chore: fixing a11y for gallery slider

src/locales/en/translation.json

@@ -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",

src/locales/pt/translation.json

@@ -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",

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

@@ -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",

src/renderer/src/pages/game-details/gallery-slider.tsx

@@ -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) {
+        if (node instanceof HTMLVideoElement) {
-          node.play();
+          if (index == mediaIndex) {
-          currentVideoRef.current = node;
+            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(
+            {hasScreenshots &&
-                (image: SteamScreenshot, i: number) => (
+              gameDetails.screenshots.map((image, i) => (
-                  <img
+                <img
-                    key={"image-" + i}
+                  key={image.id}
-                    loading="lazy"
+                  className={styles.gallerySliderMedia}
-                    className={styles.gallerySliderMedia}
+                  src={image.path_full}
-                    src={image.path_full}
+                  style={{ translate: `${-100 * mediaIndex}%` }}
-                    style={{ translate: `${-100 * mediaIndex}%` }}
+                  alt={t("screenshot", { number: i + 1 })}
-                    tabIndex={-1}
+                />
-                  />
+              ))}
-                )
-              )}
 
             <button
               onClick={showPrevImage}
@@ -149,39 +164,23 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
           </div>
 
           <div className={styles.gallerySliderPreview} ref={scrollContainerRef}>
-            {hasMovies &&
+            {previews.map((media, i) => (
-              gameDetails.movies?.map((video: SteamMovies, i: number) => (
+              <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}
+                  src={media.thumbnail}
-                  loading="lazy"
+                  className={styles.mediaPreview}
-                  onClick={() => setMediaIndex(i)}
+                  alt={t("screenshot", { number: i + 1 })}
-                  src={video.thumbnail}
-                  className={styles.gallerySliderMediaPreview({
-                    active: mediaIndex === i,
-                  })}
                 />
-              ))}
+              </button>
-            {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}
-                  />
-                )
-              )}
           </div>
         </div>
       )}