Merge pull request #326 from hydralauncher/fix/video-controller-not-clickable-on-game-details

Fix/video controller not clickable on game details

.github/workflows/lint.yml

@@ -1,6 +1,6 @@
 name: Lint
 
-on: [pull_request, push]
+on: [push]
 
 jobs:
   lint:

src/locales/en/translation.json

@@ -96,7 +96,11 @@
     "dont_show_it_again": "Don't show it again",
     "copy_to_clipboard": "Copy",
     "copied_to_clipboard": "Copied",
-    "got_it": "Got it"
+    "got_it": "Got it",
+    "previous_screenshot": "Previous screenshot",
+    "next_screenshot": "Next screenshot",
+    "screenshot": "Screenshot {{number}}",
+    "open_screenshot": "Open screenshot {{number}}"
   },
   "activation": {
     "title": "Activate Hydra",

src/locales/pt/translation.json

@@ -92,7 +92,11 @@
     "dont_show_it_again": "Não mostrar novamente",
     "copy_to_clipboard": "Copiar",
     "copied_to_clipboard": "Copiado",
-    "got_it": "Entendi"
+    "got_it": "Entendi",
+    "previous_screenshot": "Captura de tela anterior",
+    "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

@@ -1,3 +1,4 @@
+import { recipe } from "@vanilla-extract/recipes";
 import { SPACING_UNIT, vars } from "../../theme.css";
 import { style } from "@vanilla-extract/css";
 
@@ -13,7 +14,7 @@ export const gallerySliderMedia = style({
   width: "100%",
   height: "100%",
   display: "block",
-  flexShrink: 0,
+  flexShrink: "0",
   flexGrow: "0",
   transition: "translate 0.3s ease-in-out",
   borderRadius: "4px",
@@ -54,42 +55,77 @@ export const gallerySliderPreview = style({
   },
 });
 
-export const gallerySliderMediaPreview = style({
+export const mediaPreviewButton = recipe({
+  base: {
     cursor: "pointer",
     width: "20%",
     height: "20%",
     display: "block",
-  flexShrink: 0,
+    flexShrink: "0",
-  flexGrow: 0,
+    flexGrow: "0",
-  opacity: 0.3,
+    opacity: "0.3",
     transition: "translate 0.3s ease-in-out, opacity 0.2s ease",
     borderRadius: "4px",
     border: `solid 1px ${vars.color.border}`,
     ":hover": {
+      opacity: "0.8",
+    },
+  },
+  variants: {
+    active: {
+      true: {
         opacity: "1",
       },
-});
+    },
-
-export const gallerySliderMediaPreviewActive = style({
-  opacity: 1,
-});
-
-export const gallerySliderButton = style({
-  all: "unset",
-  display: "block",
-  position: "absolute",
-  top: 0,
-  bottom: 0,
-  padding: "1rem",
-  cursor: "pointer",
-  transition: "background-color 100ms ease-in-out",
-  ":hover": {
-    backgroundColor: "rgb(0, 0, 0, 0.2)",
   },
 });
 
-export const gallerySliderIcons = style({
+export const mediaPreview = style({
-  fill: vars.color.muted,
+  width: "100%",
-  width: "2rem",
+  height: "100%",
-  height: "2rem",
+  display: "flex",
+  flex: "1",
+});
+
+export const gallerySliderButton = recipe({
+  base: {
+    position: "absolute",
+    alignSelf: "center",
+    cursor: "pointer",
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    transition: "all 0.2s ease-in-out",
+    borderRadius: "50%",
+    color: vars.color.muted,
+    width: "48px",
+    height: "48px",
+    ":hover": {
+      backgroundColor: "rgba(0, 0, 0, 0.6)",
+    },
+    ":active": {
+      transform: "scale(0.95)",
+    },
+  },
+  variants: {
+    direction: {
+      left: {
+        left: "0",
+        marginLeft: `${SPACING_UNIT}px`,
+        transform: `translateX(${-(48 + SPACING_UNIT)}px)`,
+      },
+      right: {
+        right: "0",
+        marginRight: `${SPACING_UNIT}px`,
+        transform: `translateX(${48 + SPACING_UNIT}px)`,
+      },
+    },
+    visible: {
+      true: {
+        transform: "translateX(0)",
+        opacity: "1",
+      },
+      false: {
+        opacity: "0",
+      },
+    },
+  },
 });

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

@@ -1,7 +1,10 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
-import { ShopDetails, SteamMovies, SteamScreenshot } from "@types";
 import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
+
+import type { ShopDetails } from "@types";
+
 import * as styles from "./gallery-slider.css";
+import { useTranslation } from "react-i18next";
 
 export interface GallerySliderProps {
   gameDetails: ShopDetails | null;
@@ -9,6 +12,12 @@ export interface GallerySliderProps {
 
 export function GallerySlider({ gameDetails }: GallerySliderProps) {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const mediaContainerRef = useRef<HTMLDivElement>(null);
+
+  const { t } = useTranslation("game_details");
+
+  const hasScreenshots = gameDetails && gameDetails.screenshots.length;
+  const hasMovies = gameDetails && gameDetails.movies?.length;
 
   const [mediaCount] = useState<number>(() => {
     if (gameDetails) {
@@ -25,7 +34,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
   });
 
   const [mediaIndex, setMediaIndex] = useState<number>(0);
-  const [arrowShow, setArrowShow] = useState(false);
+  const [showArrows, setShowArrows] = useState(false);
 
   const showNextImage = () => {
     setMediaIndex((index: number) => {
@@ -47,6 +56,20 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
     setMediaIndex(0);
   }, [gameDetails]);
 
+  useEffect(() => {
+    if (hasMovies && mediaContainerRef.current) {
+      mediaContainerRef.current.childNodes.forEach((node, index) => {
+        if (node instanceof HTMLVideoElement) {
+          if (index == mediaIndex) {
+            node.play();
+          } else {
+            node.pause();
+          }
+        }
+      });
+    }
+  }, [hasMovies, mediaContainerRef, mediaIndex]);
+
   useEffect(() => {
     if (scrollContainerRef.current) {
       const container = scrollContainerRef.current;
@@ -57,92 +80,107 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
     }
   }, [gameDetails, mediaIndex, mediaCount]);
 
-  const hasScreenshots = gameDetails && gameDetails.screenshots.length;
+  const previews = useMemo(() => {
-  const hasMovies = gameDetails && gameDetails.movies?.length;
+    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 && (
         <div className={styles.gallerySliderContainer}>
           <div
-            onMouseEnter={() => setArrowShow(true)}
+            onMouseEnter={() => setShowArrows(true)}
-            onMouseLeave={() => setArrowShow(false)}
+            onMouseLeave={() => setShowArrows(false)}
             className={styles.gallerySliderAnimationContainer}
+            ref={mediaContainerRef}
           >
             {gameDetails.movies &&
-              gameDetails.movies.map((video: SteamMovies) => (
+              gameDetails.movies.map((video) => (
                 <video
                   key={video.id}
                   controls
                   className={styles.gallerySliderMedia}
                   poster={video.thumbnail}
                   style={{ translate: `${-100 * mediaIndex}%` }}
-                  autoPlay
                   loop
                   muted
+                  tabIndex={-1}
                 >
-                  <source src={video.webm.max.replace("http", "https")} />
+                  <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
-                    key={"image-" + i}
+                  key={image.id}
                   className={styles.gallerySliderMedia}
                   src={image.path_full}
                   style={{ translate: `${-100 * mediaIndex}%` }}
+                  alt={t("screenshot", { number: i + 1 })}
                 />
-                )
+              ))}
-              )}
+
-            {arrowShow && (
-              <>
             <button
               onClick={showPrevImage}
               type="button"
-                  className={styles.gallerySliderButton}
+              className={styles.gallerySliderButton({
-                  style={{ left: 0 }}
+                visible: showArrows,
+                direction: "left",
+              })}
+              aria-label={t("previous_screenshot")}
+              tabIndex={0}
             >
-                  <ChevronLeftIcon className={styles.gallerySliderIcons} />
+              <ChevronLeftIcon size={36} />
             </button>
 
             <button
               onClick={showNextImage}
               type="button"
-                  className={styles.gallerySliderButton}
+              className={styles.gallerySliderButton({
-                  style={{ right: 0 }}
+                visible: showArrows,
+                direction: "right",
+              })}
+              aria-label={t("next_screenshot")}
+              tabIndex={0}
             >
-                  <ChevronRightIcon className={styles.gallerySliderIcons} />
+              <ChevronRightIcon size={36} />
             </button>
-              </>
-            )}
           </div>
 
           <div className={styles.gallerySliderPreview} ref={scrollContainerRef}>
-            {hasMovies &&
+            {previews.map((media, i) => (
-              gameDetails.movies?.map((video: SteamMovies, i: number) => (
+              <button
-                <img
+                key={media.id}
-                  key={video.id}
+                type="button"
+                className={styles.mediaPreviewButton({
+                  active: mediaIndex === i,
+                })}
                 onClick={() => setMediaIndex(i)}
-                  src={video.thumbnail}
+                aria-label={t("open_screenshot", { number: i + 1 })}
-                  className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i ? styles.gallerySliderMediaPreviewActive : ""}`}
+              >
-                />
-              ))}
-            {gameDetails.screenshots &&
-              gameDetails.screenshots.map(
-                (image: SteamScreenshot, i: number) => (
                 <img
-                    key={"image-thumb-" + i}
+                  src={media.thumbnail}
-                    onClick={() =>
+                  className={styles.mediaPreview}
-                      setMediaIndex(
+                  alt={t("screenshot", { number: i + 1 })}
-                        i + (gameDetails.movies ? gameDetails.movies.length : 0)
-                      )
-                    }
-                    className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i + (gameDetails.movies ? gameDetails.movies.length : 0) ? styles.gallerySliderMediaPreviewActive : ""}`}
-                    src={image.path_full}
                 />
-                )
+              </button>
-              )}
+            ))}
           </div>
         </div>
       )}