diff --git a/src/renderer/index.html b/src/renderer/index.html index 2b85e347..ea90e311 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -6,7 +6,7 @@ Hydra diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx index 5e3a97d2..823e91be 100644 --- a/src/renderer/src/pages/game-details/gallery-slider.tsx +++ b/src/renderer/src/pages/game-details/gallery-slider.tsx @@ -1,43 +1,67 @@ import { useState } from "react"; -import { ShopDetails } from "@types"; +import { ShopDetails, SteamMovies, SteamScreenshot } from "@types"; import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react"; import * as styles from "./game-details.css"; +import { useTranslation } from "react-i18next"; export interface GallerySliderProps { gameDetails: ShopDetails | null; - } +} -export function GallerySlider({gameDetails}: GallerySliderProps){ - const [imageIndex, setImageIndex] = useState(0) +export function GallerySlider({ gameDetails }: GallerySliderProps) { + const [mediaIndex, setMediaIndex] = useState(0); + const [mediaType, setMediaType] = useState<'video' | 'image'>('video'); + const { t } = useTranslation("game_details"); const showNextImage = () => { - setImageIndex((index:number) => { - if(gameDetails?.screenshots.length && index === (gameDetails?.screenshots.length - 1)) return 0 + setMediaIndex((index: number) => { + if (gameDetails?.movies.length && index === (gameDetails?.movies.length - 1) && mediaType === 'video') { + setMediaType('image') + return 1 + } + if (gameDetails?.screenshots.length && index === (gameDetails?.screenshots.length - 1) && mediaType === 'image') { + setMediaType('video') + return 0 + } return index + 1 }) }; const showPrevImage = () => { - setImageIndex((index:number) => { - if(index === 0 && gameDetails?.screenshots) return gameDetails?.screenshots.length - 1 - + setMediaIndex((index: number) => { + if (gameDetails?.screenshots.length && index === 0 && mediaType === 'video') { + setMediaType('image') + return gameDetails?.screenshots.length - 1 + } + if (gameDetails?.movies.length && index === 1 && mediaType === 'image') { + setMediaType('video') + return gameDetails?.movies.length - 1 + } + return index - 1 }) }; - - return ( <> - {gameDetails?.screenshots && ( -
-

Gallery

- - - -
- )} + {gameDetails?.screenshots && ( +
+

{t('Videos and screenshots')}

+
+ {gameDetails.movies.map((video: SteamMovies) => ( + + ))} + {gameDetails.screenshots.map((image: SteamScreenshot) => ( + + ))} +
+ + +
+ )} ) 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 2fa9ae5c..184a3f88 100644 --- a/src/renderer/src/pages/game-details/game-details.css.ts +++ b/src/renderer/src/pages/game-details/game-details.css.ts @@ -89,12 +89,22 @@ export const gallerySliderTitle = style({ padding: `${SPACING_UNIT}px 0`, }); -export const gallerySliderImage = style({ - +export const gallerySliderMedia = style({ width: "100%", + height: "100%", display: "block", + flexShrink: 0, + flexGrow: 0, + transition: "translate 300ms ease-in-out" }); +export const gallerySliderAnimationContainer = style({ + width: "100%", + height: "100%", + display: "flex", + overflow: "hidden" +}) + export const gallerySliderButton = style({ all: "unset", display: "block", diff --git a/src/types/index.ts b/src/types/index.ts index 9cb3a163..1b63f13b 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -12,6 +12,20 @@ export interface SteamScreenshot { path_full: string; } +export interface SteamVideoSource { + max: string; + '480': string; +} + +export interface SteamMovies { + id: number; + mp4: SteamVideoSource; + webm: SteamVideoSource; + thumbnail: string; + name: string; + highlight: boolean; +} + export interface SteamAppDetails { name: string; detailed_description: string; @@ -19,6 +33,7 @@ export interface SteamAppDetails { short_description: string; publishers: string[]; genres: SteamGenre[]; + movies: SteamMovies[]; screenshots: SteamScreenshot[]; pc_requirements: { minimum: string;