From ff20d531c28cad92ea827a9516807f4b70cf3446 Mon Sep 17 00:00:00 2001
From: Hydra <hydralauncher@proton.me>
Date: Mon, 13 May 2024 02:02:55 +0100
Subject: [PATCH] feat: improving buttons on gallery slider

---
 src/locales/en/translation.json               |   4 +-
 src/locales/pt/translation.json               |   4 +-
 src/renderer/src/components/modal/modal.tsx   |   9 +-
 .../pages/game-details/gallery-slider.css.ts  | 100 +++++++++++-------
 .../src/pages/game-details/gallery-slider.tsx |  81 ++++++++------
 5 files changed, 127 insertions(+), 71 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 0674d1b5..f3c5719e 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -96,7 +96,9 @@
     "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"
   },
   "activation": {
     "title": "Activate Hydra",
diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json
index dda53065..bb29957a 100644
--- a/src/locales/pt/translation.json
+++ b/src/locales/pt/translation.json
@@ -92,7 +92,9 @@
     "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"
   },
   "activation": {
     "title": "Ativação",
diff --git a/src/renderer/src/components/modal/modal.tsx b/src/renderer/src/components/modal/modal.tsx
index 79308c1e..82c3b481 100644
--- a/src/renderer/src/components/modal/modal.tsx
+++ b/src/renderer/src/components/modal/modal.tsx
@@ -24,6 +24,7 @@ export function Modal({
 }: ModalProps) {
   const [isClosing, setIsClosing] = useState(false);
   const modalContentRef = useRef<HTMLDivElement | null>(null);
+  const titleRef = useRef<HTMLHeadingElement | null>(null);
 
   const { t } = useTranslation("modal");
 
@@ -52,6 +53,8 @@ export function Modal({
 
   useEffect(() => {
     if (visible) {
+      if (titleRef.current) titleRef.current.focus();
+
       const onKeyDown = (e: KeyboardEvent) => {
         if (e.key === "Escape" && isTopMostModal()) {
           handleCloseClick();
@@ -94,8 +97,10 @@ export function Modal({
       >
         <div className={styles.modalHeader}>
           <div style={{ display: "flex", gap: 4, flexDirection: "column" }}>
-            <h3>{title}</h3>
-            {description && <p>{description}</p>}
+            <h3 ref={titleRef} tabIndex={0}>
+              {title}
+            </h3>
+            {description && <p tabIndex={0}>{description}</p>}
           </div>
 
           <button
diff --git a/src/renderer/src/pages/game-details/gallery-slider.css.ts b/src/renderer/src/pages/game-details/gallery-slider.css.ts
index 18464eea..5b54ce33 100644
--- a/src/renderer/src/pages/game-details/gallery-slider.css.ts
+++ b/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,43 +55,70 @@ export const gallerySliderPreview = style({
   },
 });
 
-export const gallerySliderMediaPreview = style({
-  cursor: "pointer",
-  width: "20%",
-  height: "20%",
-  display: "block",
-  flexShrink: 0,
-  flexGrow: 0,
-  opacity: 0.3,
-  transition: "translate 0.3s ease-in-out, opacity 0.2s ease",
-  borderRadius: "4px",
-  border: `solid 1px ${vars.color.border}`,
-  ":hover": {
-    opacity: "1",
+export const gallerySliderMediaPreview = recipe({
+  base: {
+    cursor: "pointer",
+    width: "20%",
+    height: "20%",
+    display: "block",
+    flexShrink: "0",
+    flexGrow: "0",
+    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",
-  height: "15%",
-  top: "50%",
-  transform: "translateY(-50%)",
-  padding: "1rem",
-  cursor: "pointer",
-  transition: "background-color 100ms ease-in-out",
-  ":hover": {
-    backgroundColor: "rgb(0, 0, 0, 0.2)",
+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",
+      },
+    },
   },
 });
-
-export const gallerySliderIcons = style({
-  fill: vars.color.muted,
-  width: "2rem",
-  height: "2rem",
-});
diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx
index b0400bd9..0852356f 100644
--- a/src/renderer/src/pages/game-details/gallery-slider.tsx
+++ b/src/renderer/src/pages/game-details/gallery-slider.tsx
@@ -1,7 +1,10 @@
 import { useEffect, useRef, useState } from "react";
-import { ShopDetails, SteamMovies, SteamScreenshot } from "@types";
 import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
+
+import type { ShopDetails, SteamMovies, SteamScreenshot } from "@types";
+
 import * as styles from "./gallery-slider.css";
+import { useTranslation } from "react-i18next";
 
 export interface GallerySliderProps {
   gameDetails: ShopDetails | null;
@@ -12,6 +15,8 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
   const mediaContainerRef = useRef<HTMLDivElement>(null);
   const currentVideoRef = useRef<HTMLVideoElement | null>(null);
 
+  const { t } = useTranslation("game_details");
+
   const hasScreenshots = gameDetails && gameDetails.screenshots.length;
   const hasMovies = gameDetails && gameDetails.movies?.length;
 
@@ -30,7 +35,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) => {
@@ -54,18 +59,18 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
 
   useEffect(() => {
     if (currentVideoRef.current) {
-      currentVideoRef.current.pause()
+      currentVideoRef.current.pause();
     }
 
     if (hasMovies && mediaContainerRef.current) {
       mediaContainerRef.current.childNodes.forEach((node, index) => {
         if (index == mediaIndex && node instanceof HTMLVideoElement) {
-          node.play()
-          currentVideoRef.current = node
+          node.play();
+          currentVideoRef.current = node;
         }
-      })
+      });
     }
-  }, [hasMovies, mediaContainerRef, mediaIndex])
+  }, [hasMovies, mediaContainerRef, mediaIndex]);
 
   useEffect(() => {
     if (scrollContainerRef.current) {
@@ -82,8 +87,8 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
       {hasScreenshots && (
         <div className={styles.gallerySliderContainer}>
           <div
-            onMouseEnter={() => setArrowShow(true)}
-            onMouseLeave={() => setArrowShow(false)}
+            onMouseEnter={() => setShowArrows(true)}
+            onMouseLeave={() => setShowArrows(false)}
             className={styles.gallerySliderAnimationContainer}
             ref={mediaContainerRef}
           >
@@ -97,6 +102,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
                   style={{ translate: `${-100 * mediaIndex}%` }}
                   loop
                   muted
+                  tabIndex={-1}
                 >
                   <source src={video.mp4.max.replace("http", "https")} />
                 </video>
@@ -110,30 +116,36 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
                     className={styles.gallerySliderMedia}
                     src={image.path_full}
                     style={{ translate: `${-100 * mediaIndex}%` }}
+                    tabIndex={-1}
                   />
                 )
               )}
-            {arrowShow && (
-              <>
-                <button
-                  onClick={showPrevImage}
-                  type="button"
-                  className={styles.gallerySliderButton}
-                  style={{ left: 0 }}
-                >
-                  <ChevronLeftIcon className={styles.gallerySliderIcons} />
-                </button>
 
-                <button
-                  onClick={showNextImage}
-                  type="button"
-                  className={styles.gallerySliderButton}
-                  style={{ right: 0 }}
-                >
-                  <ChevronRightIcon className={styles.gallerySliderIcons} />
-                </button>
-              </>
-            )}
+            <button
+              onClick={showPrevImage}
+              type="button"
+              className={styles.gallerySliderButton({
+                visible: showArrows,
+                direction: "left",
+              })}
+              aria-label={t("previous_screenshot")}
+              tabIndex={0}
+            >
+              <ChevronLeftIcon size={36} />
+            </button>
+
+            <button
+              onClick={showNextImage}
+              type="button"
+              className={styles.gallerySliderButton({
+                visible: showArrows,
+                direction: "right",
+              })}
+              aria-label={t("next_screenshot")}
+              tabIndex={0}
+            >
+              <ChevronRightIcon size={36} />
+            </button>
           </div>
 
           <div className={styles.gallerySliderPreview} ref={scrollContainerRef}>
@@ -144,7 +156,9 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
                   loading="lazy"
                   onClick={() => setMediaIndex(i)}
                   src={video.thumbnail}
-                  className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i ? styles.gallerySliderMediaPreviewActive : ""}`}
+                  className={styles.gallerySliderMediaPreview({
+                    active: mediaIndex === i,
+                  })}
                 />
               ))}
             {gameDetails.screenshots &&
@@ -158,7 +172,12 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
                         i + (gameDetails.movies ? gameDetails.movies.length : 0)
                       )
                     }
-                    className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i + (gameDetails.movies ? gameDetails.movies.length : 0) ? styles.gallerySliderMediaPreviewActive : ""}`}
+                    className={styles.gallerySliderMediaPreview({
+                      active:
+                        mediaIndex ===
+                        i +
+                          (gameDetails.movies ? gameDetails.movies.length : 0),
+                    })}
                     src={image.path_full}
                   />
                 )