chore: updating yarn.lock

src/locales/ru/translation.json

@@ -138,7 +138,7 @@
     "telemetry": "Телеметрия",
     "telemetry_description": "Включить анонимную статистику использования",
     "behavior": "Поведение",
-    "quit_app_instead_hiding": "Закрывать приложение вместо того, чтобы сворачивать его в трей"
+    "quit_app_instead_hiding": "Закрывать приложение вместо того, чтобы сворачивать его в трей",
     "launch_with_system": "Запуск приложения при запуске системы"
   },
   "notifications": {

src/main/events/misc/show-open-dialog.ts

@@ -7,8 +7,10 @@ const showOpenDialog = async (
   options: Electron.OpenDialogOptions
 ) => {
   if (WindowManager.mainWindow) {
-    dialog.showOpenDialog(WindowManager.mainWindow, options);
+    return dialog.showOpenDialog(WindowManager.mainWindow, options);
   }
+
+  throw new Error("Main window is not available");
 };
 
 registerEvent(showOpenDialog, {

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

@@ -1,4 +1,4 @@
-import { RefObject, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ShopDetails, SteamMovies, SteamScreenshot } from "@types";
 import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
 import * as styles from "./game-details.css";
@@ -8,8 +8,8 @@ export interface GallerySliderProps {
 }
 
 export function GallerySlider({ gameDetails }: GallerySliderProps) {
-  const scrollContainerRef: RefObject<HTMLDivElement> =
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
-    useRef<HTMLDivElement>(null);
+
   const [mediaCount] = useState<number>(() => {
     if (gameDetails) {
       if (gameDetails.screenshots && gameDetails.movies) {
@@ -25,16 +25,6 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
   const [mediaIndex, setMediaIndex] = useState<number>(0);
   const [arrowShow, setArrowShow] = useState(false);
 
-  const scrollHorizontallyToPercentage = () => {
-    if (scrollContainerRef.current) {
-      const container = scrollContainerRef.current;
-      const totalWidth = container.scrollWidth - container.clientWidth;
-      const itemWidth = totalWidth / (mediaCount - 1);
-      const scrollLeft = mediaIndex * itemWidth;
-      container.scrollLeft = scrollLeft;
-    }
-  };
-
   const showNextImage = () => {
     setMediaIndex((index: number) => {
       if (index === mediaCount - 1) return 0;
@@ -42,6 +32,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
       return index + 1;
     });
   };
+
   const showPrevImage = () => {
     setMediaIndex((index: number) => {
       if (index === 0) return mediaCount - 1;
@@ -51,11 +42,21 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
   };
 
   useEffect(() => {
-    scrollHorizontallyToPercentage();
+    if (scrollContainerRef.current) {
-  }, [mediaIndex]);
+      const container = scrollContainerRef.current;
+      const totalWidth = container.scrollWidth - container.clientWidth;
+      const itemWidth = totalWidth / (mediaCount - 1);
+      const scrollLeft = mediaIndex * itemWidth;
+      container.scrollLeft = scrollLeft;
+    }
+  }, [mediaIndex, mediaCount]);
+
+  const hasScreenshots = gameDetails && gameDetails.screenshots.length > 0;
+  const hasMovies = gameDetails && gameDetails.movies.length > 0;
+
   return (
     <>
-      {gameDetails?.screenshots && (
+      {hasScreenshots && (
         <div className={styles.gallerySliderContainer}>
           <div
             onMouseEnter={() => setArrowShow(true)}
@@ -65,33 +66,41 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
             {gameDetails.movies &&
               gameDetails.movies.map((video: SteamMovies) => (
                 <video
+                  key={video.id}
                   controls
                   className={styles.gallerySliderMedia}
                   poster={video.thumbnail}
                   style={{ translate: `${-100 * mediaIndex}%` }}
+                  autoPlay
+                  muted
                 >
                   <source src={video.webm.max.replace("http", "https")} />
                 </video>
               ))}
-            {gameDetails.screenshots &&
+
-              gameDetails.screenshots.map((image: SteamScreenshot) => (
+            {gameDetails.screenshots.map((image: SteamScreenshot) => (
-                <img
+              <img
-                  className={styles.gallerySliderMedia}
+                key={image.id}
-                  src={image.path_full}
+                className={styles.gallerySliderMedia}
-                  style={{ translate: `${-100 * mediaIndex}%` }}
+                src={image.path_full}
-                />
+                style={{ translate: `${-100 * mediaIndex}%` }}
-              ))}
+              />
+            ))}
+
             {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 }}
                 >
@@ -102,28 +111,30 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
           </div>
 
           <div className={styles.gallerySliderPreview} ref={scrollContainerRef}>
-            {gameDetails.movies &&
+            {hasMovies &&
               gameDetails.movies.map((video: SteamMovies, i: number) => (
                 <img
+                  key={video.id}
                   onClick={() => setMediaIndex(i)}
                   src={video.thumbnail}
                   className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i ? styles.gallerySliderMediaPreviewActive : ""}`}
                 />
               ))}
-            {gameDetails.screenshots &&
+
-              gameDetails.screenshots.map(
+            {gameDetails.screenshots.map(
-                (image: SteamScreenshot, i: number) => (
+              (image: SteamScreenshot, i: number) => (
-                  <img
+                <img
-                    onClick={() =>
+                  key={image.id}
-                      setMediaIndex(
+                  onClick={() =>
-                        i + (gameDetails.movies ? gameDetails.movies.length : 0)
+                    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}
+                  className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i + (gameDetails.movies ? gameDetails.movies.length : 0) ? styles.gallerySliderMediaPreviewActive : ""}`}
-                  />
+                  src={image.path_full}
-                )
+                />
-              )}
+              )
+            )}
           </div>
         </div>
       )}

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

@@ -92,8 +92,9 @@ export const gallerySliderMedia = style({
   height: "100%",
   display: "block",
   flexShrink: 0,
-  flexGrow: 0,
+  flexGrow: "0",
-  transition: "translate 300ms ease-in-out",
+  transition: "translate 0.3s ease-in-out",
+  borderRadius: "4px",
 });
 
 export const gallerySliderAnimationContainer = style({
@@ -123,8 +124,8 @@ export const gallerySliderPreview = style({
     },
   },
   "::-webkit-scrollbar-thumb": {
-    width: "20%"
+    width: "20%",
-  }
+  },
 });
 
 export const gallerySliderMediaPreview = style({
@@ -137,6 +138,7 @@ export const gallerySliderMediaPreview = style({
   opacity: 0.3,
   paddingRight: "5px",
   transition: "translate 300ms ease-in-out",
+  borderRadius: "4px",
   ":hover": {
     opacity: 1,
   },
@@ -156,13 +158,12 @@ export const gallerySliderButton = style({
   cursor: "pointer",
   transition: "background-color 100ms ease-in-out",
   ":hover": {
-    backgroundColor: "rgb(0,0,0, 0.2)",
+    backgroundColor: "rgb(0, 0, 0, 0.2)",
   },
 });
 
 export const gallerySliderIcons = style({
-  stroke: "white",
+  fill: vars.color.muted,
-  fill: "black",
   width: "2rem",
   height: "2rem",
 });

yarn.lock

@@ -1827,14 +1827,11 @@ app-root-path@^3.1.0:
   resolved "https://registry.npmjs.org/app-root-path/-/app-root-path-3.1.0.tgz"
   integrity sha512-biN3PwB2gUtjaYy/isrU3aNWI5w+fAfvHkSvCKeQGxhmYpwKFUxudR3Yya+KqVRHBmEDYh+/lTozYCFbmzX4nA==
 
-<<<<<<< HEAD
-=======
 applescript@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/applescript/-/applescript-1.0.0.tgz#bb87af568cad034a4e48c4bdaf6067a3a2701317"
   integrity sha512-yvtNHdWvtbYEiIazXAdp/NY+BBb65/DAseqlNiJQjOx9DynuzOYDbVLBJvuc0ve0VL9x6B3OHF6eH52y9hCBtQ==
 
->>>>>>> 53e5d2938c050ead27fdc8883d58f75920d63923
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"