add slider previews

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { ShopDetails, SteamMovies, SteamScreenshot } from "@types";
 import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
 import * as styles from "./game-details.css";
@@ -9,7 +9,7 @@ export interface GallerySliderProps {
 }
 
 export function GallerySlider({ gameDetails }: GallerySliderProps) {
-  const [mediaCount, setMediaCount] = useState<number>(() => {
+  const [mediaCount] = useState<number>(() => {
     if (gameDetails) {
       if (gameDetails.screenshots && gameDetails.movies) {
         return gameDetails.screenshots.length + gameDetails.movies.length;
@@ -22,6 +22,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
     return 0;
   });
   const [mediaIndex, setMediaIndex] = useState<number>(0);
+  const [arrowShow, setArrowShow] = useState(false);
   const { t } = useTranslation("game_details");
 
   const showNextImage = () => {
@@ -44,7 +45,11 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
       {gameDetails?.screenshots && (
         <div className={styles.gallerySliderContainer}>
           <h2 className={styles.gallerySliderTitle}>{t("gallery")}</h2>
-          <div className={styles.gallerySliderAnimationContainer}>
+          <div
+            onMouseEnter={() => setArrowShow(true)}
+            onMouseLeave={() => setArrowShow(false)}
+            className={styles.gallerySliderAnimationContainer}
+          >
             {gameDetails.movies &&
               gameDetails.movies.map((video: SteamMovies) => (
                 <video
@@ -64,21 +69,66 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
                   style={{ translate: `${-100 * mediaIndex}%` }}
                 />
               ))}
+            {arrowShow && (
+              <>
+                <button
+                  onClick={showPrevImage}
+                  className={styles.gallerySliderButton}
+                  style={{ left: 0 }}
+                >
+                  <ChevronLeftIcon className={styles.gallerySliderIcons} />
+                </button>
+                <button
+                  onClick={showNextImage}
+                  className={styles.gallerySliderButton}
+                  style={{ right: 0 }}
+                >
+                  <ChevronRightIcon className={styles.gallerySliderIcons} />
+                </button>
+              </>
+            )}
+          </div>
+
+          <div className={styles.gallerySliderPreview}>
+            {gameDetails.movies &&
+              gameDetails.movies.map((video: SteamMovies, i: number) => (
+                <img
+                  onClick={() => setMediaIndex(i)}
+                  src={video.thumbnail}
+                  className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i ? styles.gallerySliderMediaPreviewActive : ""}`}
+                  style={{ translate: `${-85 * mediaIndex}%` }}
+                />
+              ))}
+            {gameDetails.screenshots &&
+              gameDetails.screenshots.map(
+                (image: SteamScreenshot, i: number) => (
+                  <img
+                    onClick={() =>
+                      setMediaIndex(
+                        i + (gameDetails.movies ? gameDetails.movies.length : 0)
+                      )
+                    }
+                    className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i + (gameDetails.movies ? gameDetails.movies.length : 0) ? styles.gallerySliderMediaPreviewActive : ""}`}
+                    src={image.path_full}
+                    style={{ translate: `${-85 * mediaIndex}%` }}
+                  />
+                )
+              )}
+            <button
+              onClick={showPrevImage}
+              className={styles.gallerySliderButton}
+              style={{ left: 0 }}
+            >
+              <ChevronLeftIcon className={styles.gallerySliderIcons} />
+            </button>
+            <button
+              onClick={showNextImage}
+              className={styles.gallerySliderButton}
+              style={{ right: 0 }}
+            >
+              <ChevronRightIcon className={styles.gallerySliderIcons} />
+            </button>
           </div>
-          <button
-            onClick={showPrevImage}
-            className={styles.gallerySliderButton}
-            style={{ left: 0 }}
-          >
-            <ChevronLeftIcon className={styles.gallerySliderIcons} />
-          </button>
-          <button
-            onClick={showNextImage}
-            className={styles.gallerySliderButton}
-            style={{ right: 0 }}
-          >
-            <ChevronRightIcon className={styles.gallerySliderIcons} />
-          </button>
         </div>
       )}
     </>

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

@@ -82,7 +82,9 @@ export const descriptionContent = style({
 export const gallerySliderContainer = style({
   padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
   width: "100%",
-  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
 });
 
 export const gallerySliderTitle = style({
@@ -95,15 +97,53 @@ export const gallerySliderMedia = style({
   display: "block",
   flexShrink: 0,
   flexGrow: 0,
-  transition: "translate 300ms ease-in-out"
+  transition: "translate 300ms ease-in-out",
 });
 
 export const gallerySliderAnimationContainer = style({
   width: "100%",
   height: "100%",
   display: "flex",
-  overflow: "hidden"
+  position: "relative",
-})
+  overflow: "hidden",
+  "@media": {
+    "(min-width: 1280px)": {
+      width: "60%",
+    },
+  },
+});
+
+export const gallerySliderPreview = style({
+  width: "100%",
+  paddingTop: "0.5rem",
+  height: "100%",
+  display: "flex",
+  position: "relative",
+  overflow: "hidden",
+  "@media": {
+    "(min-width: 1280px)": {
+      width: "60%",
+    },
+  },
+});
+
+export const gallerySliderMediaPreview = style({
+  cursor: "pointer",
+  width: "20%",
+  height: "20%",
+  display: "block",
+  flexShrink: 0,
+  flexGrow: 0,
+  opacity: 0.3,
+  transition: "translate 300ms ease-in-out",
+  ":hover": {
+    opacity: 1,
+  },
+});
+
+export const gallerySliderMediaPreviewActive = style({
+  opacity: 1,
+});
 
 export const gallerySliderButton = style({
   all: "unset",
@@ -114,7 +154,6 @@ export const gallerySliderButton = style({
   padding: "1rem",
   cursor: "pointer",
   transition: "background-color 100ms ease-in-out",
-  margin: `${SPACING_UNIT * 8}px ${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px `,
   ":hover": {
     backgroundColor: "rgb(0,0,0, 0.2)",
   },