diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index f3c5719e..6855100e 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -98,7 +98,9 @@ "copied_to_clipboard": "Copied", "got_it": "Got it", "previous_screenshot": "Previous screenshot", - "next_screenshot": "Next screenshot" + "next_screenshot": "Next screenshot", + "screenshot": "Screenshot {{number}}", + "open_screenshot": "Open screenshot {{number}}" }, "activation": { "title": "Activate Hydra", diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json index bb29957a..5ad27c07 100644 --- a/src/locales/pt/translation.json +++ b/src/locales/pt/translation.json @@ -94,7 +94,9 @@ "copied_to_clipboard": "Copiado", "got_it": "Entendi", "previous_screenshot": "Captura de tela anterior", - "next_screenshot": "Próxima captura de tela" + "next_screenshot": "Próxima captura de tela", + "screenshot": "Captura de tela {{number}}", + "open_screenshot": "Ver captura de tela {{number}}" }, "activation": { "title": "Ativação", 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 5b54ce33..801c3a5b 100644 --- a/src/renderer/src/pages/game-details/gallery-slider.css.ts +++ b/src/renderer/src/pages/game-details/gallery-slider.css.ts @@ -55,7 +55,7 @@ export const gallerySliderPreview = style({ }, }); -export const gallerySliderMediaPreview = recipe({ +export const mediaPreviewButton = recipe({ base: { cursor: "pointer", width: "20%", @@ -80,6 +80,13 @@ export const gallerySliderMediaPreview = recipe({ }, }); +export const mediaPreview = style({ + width: "100%", + height: "100%", + display: "flex", + flex: "1", +}); + export const gallerySliderButton = recipe({ base: { position: "absolute", diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx index 0852356f..81bbf72d 100644 --- a/src/renderer/src/pages/game-details/gallery-slider.tsx +++ b/src/renderer/src/pages/game-details/gallery-slider.tsx @@ -1,7 +1,7 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react"; -import type { ShopDetails, SteamMovies, SteamScreenshot } from "@types"; +import type { ShopDetails } from "@types"; import * as styles from "./gallery-slider.css"; import { useTranslation } from "react-i18next"; @@ -13,7 +13,6 @@ export interface GallerySliderProps { export function GallerySlider({ gameDetails }: GallerySliderProps) { const scrollContainerRef = useRef(null); const mediaContainerRef = useRef(null); - const currentVideoRef = useRef(null); const { t } = useTranslation("game_details"); @@ -58,15 +57,14 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { }, [gameDetails]); useEffect(() => { - if (currentVideoRef.current) { - currentVideoRef.current.pause(); - } - if (hasMovies && mediaContainerRef.current) { mediaContainerRef.current.childNodes.forEach((node, index) => { - if (index == mediaIndex && node instanceof HTMLVideoElement) { - node.play(); - currentVideoRef.current = node; + if (node instanceof HTMLVideoElement) { + if (index == mediaIndex) { + node.play(); + } else { + node.pause(); + } } }); } @@ -82,6 +80,25 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { } }, [gameDetails, mediaIndex, mediaCount]); + const previews = useMemo(() => { + 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 && ( @@ -93,7 +110,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { ref={mediaContainerRef} > {gameDetails.movies && - gameDetails.movies.map((video: SteamMovies) => ( + gameDetails.movies.map((video) => ( ))} - {gameDetails.screenshots && - gameDetails.screenshots.map( - (image: SteamScreenshot, i: number) => ( - - ) - )} + + {hasScreenshots && + gameDetails.screenshots.map((image, i) => ( + {t("screenshot", + ))} + ))} )}