From 072b4dc4d3e79831e51ea03e64bbda5b739fc347 Mon Sep 17 00:00:00 2001 From: Hydra Date: Tue, 7 May 2024 09:40:51 +0100 Subject: [PATCH] chore: updating yarn.lock --- src/locales/ru/translation.json | 2 +- src/main/events/misc/show-open-dialog.ts | 4 +- .../src/pages/game-details/gallery-slider.tsx | 89 +++++++++++-------- .../pages/game-details/game-details.css.ts | 15 ++-- yarn.lock | 3 - 5 files changed, 62 insertions(+), 51 deletions(-) diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json index 2f5244ff..5372420d 100644 --- a/src/locales/ru/translation.json +++ b/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": { diff --git a/src/main/events/misc/show-open-dialog.ts b/src/main/events/misc/show-open-dialog.ts index baa6a016..b107409a 100644 --- a/src/main/events/misc/show-open-dialog.ts +++ b/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, { diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx index 87eafb8f..d506103c 100644 --- a/src/renderer/src/pages/game-details/gallery-slider.tsx +++ b/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 = - useRef(null); + const scrollContainerRef = useRef(null); + const [mediaCount] = useState(() => { if (gameDetails) { if (gameDetails.screenshots && gameDetails.movies) { @@ -25,16 +25,6 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { const [mediaIndex, setMediaIndex] = useState(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(); - }, [mediaIndex]); + 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; + } + }, [mediaIndex, mediaCount]); + + const hasScreenshots = gameDetails && gameDetails.screenshots.length > 0; + const hasMovies = gameDetails && gameDetails.movies.length > 0; + return ( <> - {gameDetails?.screenshots && ( + {hasScreenshots && (
setArrowShow(true)} @@ -65,33 +66,41 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { {gameDetails.movies && gameDetails.movies.map((video: SteamMovies) => ( ))} - {gameDetails.screenshots && - gameDetails.screenshots.map((image: SteamScreenshot) => ( - - ))} + + {gameDetails.screenshots.map((image: SteamScreenshot) => ( + + ))} + {arrowShow && ( <> +
- {gameDetails.movies && + {hasMovies && gameDetails.movies.map((video: SteamMovies, i: number) => ( setMediaIndex(i)} src={video.thumbnail} className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i ? styles.gallerySliderMediaPreviewActive : ""}`} /> ))} - {gameDetails.screenshots && - gameDetails.screenshots.map( - (image: SteamScreenshot, i: number) => ( - - 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} - /> - ) - )} + + {gameDetails.screenshots.map( + (image: SteamScreenshot, i: number) => ( + + 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} + /> + ) + )}
)} diff --git a/src/renderer/src/pages/game-details/game-details.css.ts b/src/renderer/src/pages/game-details/game-details.css.ts index 647fc0ec..8b331480 100644 --- a/src/renderer/src/pages/game-details/game-details.css.ts +++ b/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, - transition: "translate 300ms ease-in-out", + flexGrow: "0", + 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: "black", + fill: vars.color.muted, width: "2rem", height: "2rem", }); diff --git a/yarn.lock b/yarn.lock index fa415f5a..cdb52ab7 100644 --- a/yarn.lock +++ b/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"