external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: fixing a11y for gallery slider

Browse source
This commit is contained in:
Hydra 2024-05-13 10:21:21 +01:00
parent aaa94a43bb
commit 2ba5c2b04f
No known key found for this signature in database
4 changed files with 68 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/locales/en/translation.json
View file

@ -98,7 +98,9 @@
"copied_to_clipboard": "Copied",
"got_it": "Got it",
"previous_screenshot": "Previous screenshot",
"next_screenshot": "Next screenshot"
"next_screenshot": "Next screenshot",
"screenshot": "Screenshot {{number}}",
"open_screenshot": "Open screenshot {{number}}"
},
"activation": {
"title": "Activate Hydra",

4
src/locales/pt/translation.json
View file

@ -94,7 +94,9 @@
"copied_to_clipboard": "Copiado",
"got_it": "Entendi",
"previous_screenshot": "Captura de tela anterior",
"next_screenshot": "Próxima captura de tela"
"next_screenshot": "Próxima captura de tela",
"screenshot": "Captura de tela {{number}}",
"open_screenshot": "Ver captura de tela {{number}}"
},
"activation": {
"title": "Ativação",

9
src/renderer/src/pages/game-details/gallery-slider.css.ts
View file

@ -55,7 +55,7 @@ export const gallerySliderPreview = style({
},
});
export const gallerySliderMediaPreview = recipe({
export const mediaPreviewButton = recipe({
base: {
cursor: "pointer",
width: "20%",
@ -80,6 +80,13 @@ export const gallerySliderMediaPreview = recipe({
},
});
export const mediaPreview = style({
width: "100%",
height: "100%",
display: "flex",
flex: "1",
});
export const gallerySliderButton = recipe({
base: {
position: "absolute",

109
src/renderer/src/pages/game-details/gallery-slider.tsx
View file

@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
import type { ShopDetails, SteamMovies, SteamScreenshot } from "@types";
import type { ShopDetails } from "@types";
import * as styles from "./gallery-slider.css";
import { useTranslation } from "react-i18next";
@ -13,7 +13,6 @@ export interface GallerySliderProps {
export function GallerySlider({ gameDetails }: GallerySliderProps) {
const scrollContainerRef = useRef<HTMLDivElement>(null);
const mediaContainerRef = useRef<HTMLDivElement>(null);
const currentVideoRef = useRef<HTMLVideoElement | null>(null);
const { t } = useTranslation("game_details");
@ -58,15 +57,14 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
}, [gameDetails]);
useEffect(() => {
if (currentVideoRef.current) {
currentVideoRef.current.pause();
}
if (hasMovies && mediaContainerRef.current) {
mediaContainerRef.current.childNodes.forEach((node, index) => {
if (index == mediaIndex && node instanceof HTMLVideoElement) {
node.play();
currentVideoRef.current = node;
if (node instanceof HTMLVideoElement) {
if (index == mediaIndex) {
node.play();
} else {
node.pause();
}
}
});
}
@ -82,6 +80,25 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
}
}, [gameDetails, mediaIndex, mediaCount]);
const previews = useMemo(() => {
const screenshotPreviews =
gameDetails?.screenshots.map(({ id, path_thumbnail }) => ({
id,
thumbnail: path_thumbnail,
})) ?? [];
if (gameDetails?.movies) {
const moviePreviews = gameDetails.movies.map(({ id, thumbnail }) => ({
id,
thumbnail,
}));
return [...moviePreviews, ...screenshotPreviews];
}
return screenshotPreviews;
}, [gameDetails]);
return (
<>
{hasScreenshots && (
@ -93,7 +110,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
ref={mediaContainerRef}
>
{gameDetails.movies &&
gameDetails.movies.map((video: SteamMovies) => (
gameDetails.movies.map((video) => (
<video
key={video.id}
controls
@ -107,19 +124,17 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
<source src={video.mp4.max.replace("http", "https")} />
</video>
))}
{gameDetails.screenshots &&
gameDetails.screenshots.map(
(image: SteamScreenshot, i: number) => (
<img
key={"image-" + i}
loading="lazy"
className={styles.gallerySliderMedia}
src={image.path_full}
style={{ translate: `${-100 * mediaIndex}%` }}
tabIndex={-1}
/>
)
)}
{hasScreenshots &&
gameDetails.screenshots.map((image, i) => (
<img
key={image.id}
className={styles.gallerySliderMedia}
src={image.path_full}
style={{ translate: `${-100 * mediaIndex}%` }}
alt={t("screenshot", { number: i + 1 })}
/>
))}
<button
onClick={showPrevImage}
@ -149,39 +164,23 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
</div>
<div className={styles.gallerySliderPreview} ref={scrollContainerRef}>
{hasMovies &&
gameDetails.movies?.map((video: SteamMovies, i: number) => (
{previews.map((media, i) => (
<button
key={media.id}
type="button"
className={styles.mediaPreviewButton({
active: mediaIndex === i,
})}
onClick={() => setMediaIndex(i)}
aria-label={t("open_screenshot", { number: i + 1 })}
>
<img
key={video.id}
loading="lazy"
onClick={() => setMediaIndex(i)}
src={video.thumbnail}
className={styles.gallerySliderMediaPreview({
active: mediaIndex === i,
})}
src={media.thumbnail}
className={styles.mediaPreview}
alt={t("screenshot", { number: i + 1 })}
/>
))}
{gameDetails.screenshots &&
gameDetails.screenshots.map(
(image: SteamScreenshot, i: number) => (
<img
key={"image-thumb-" + i}
loading="lazy"
onClick={() =>
setMediaIndex(
i + (gameDetails.movies ? gameDetails.movies.length : 0)
)
}
className={styles.gallerySliderMediaPreview({
active:
mediaIndex ===
i +
(gameDetails.movies ? gameDetails.movies.length : 0),
})}
src={image.path_full}
/>
)
)}
</button>
))}
</div>
</div>
)}