external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix error when displaying img and video last screenshot not showing

Browse source
This commit is contained in:
Matheus Dantas 2024-05-05 03:53:17 -03:00
parent e047ec924b
commit 3e47560048
1 changed files with 34 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

81
src/renderer/src/pages/game-details/gallery-slider.tsx
View file

@ -1,4 +1,4 @@
import { useState } from "react"; import { useEffect, useState } from "react";
import { ShopDetails, SteamMovies, SteamScreenshot } from "@types"; import { ShopDetails, SteamMovies, SteamScreenshot } from "@types";
import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react"; import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
import * as styles from "./game-details.css"; import * as styles from "./game-details.css";
@ -9,46 +9,31 @@ export interface GallerySliderProps {
} }
export function GallerySlider({ gameDetails }: GallerySliderProps) { export function GallerySlider({ gameDetails }: GallerySliderProps) {
const [mediaCount, setMediaCount] = useState<number>(() => {
if (gameDetails) {
if (gameDetails.screenshots && gameDetails.movies) {
return gameDetails.screenshots.length + gameDetails.movies.length;
} else if (gameDetails.movies) {
return gameDetails.movies.length;
} else if (gameDetails.screenshots) {
return gameDetails.screenshots.length;
}
}
return 0;
});
const [mediaIndex, setMediaIndex] = useState<number>(0); const [mediaIndex, setMediaIndex] = useState<number>(0);
const [mediaType, setMediaType] = useState<"video" | "image">("video");
const { t } = useTranslation("game_details"); const { t } = useTranslation("game_details");
const showNextImage = () => { const showNextImage = () => {
setMediaIndex((index: number) => { setMediaIndex((index: number) => {
if ( if (index === mediaCount - 1) return 0;
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; return index + 1;
}); });
}; };
const showPrevImage = () => { const showPrevImage = () => {
setMediaIndex((index: number) => { setMediaIndex((index: number) => {
if ( if (index === 0) return mediaCount - 1;
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 index - 1;
}); });
@ -60,23 +45,25 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
<div className={styles.gallerySliderContainer}> <div className={styles.gallerySliderContainer}>
<h2 className={styles.gallerySliderTitle}>{t("gallery")}</h2> <h2 className={styles.gallerySliderTitle}>{t("gallery")}</h2>
<div className={styles.gallerySliderAnimationContainer}> <div className={styles.gallerySliderAnimationContainer}>
{gameDetails.movies.map((video: SteamMovies) => ( {gameDetails.movies &&
<video gameDetails.movies.map((video: SteamMovies) => (
controls <video
className={styles.gallerySliderMedia} controls
poster={video.thumbnail} className={styles.gallerySliderMedia}
style={{ translate: `${-100 * mediaIndex}%` }} poster={video.thumbnail}
> style={{ translate: `${-100 * mediaIndex}%` }}
<source src={video.webm.max.replace("http", "https")} /> >
</video> <source src={video.webm.max.replace("http", "https")} />
))} </video>
{gameDetails.screenshots.map((image: SteamScreenshot) => ( ))}
<img {gameDetails.screenshots &&
className={styles.gallerySliderMedia} gameDetails.screenshots.map((image: SteamScreenshot) => (
src={image.path_full} <img
style={{ translate: `${-100 * mediaIndex}%` }} className={styles.gallerySliderMedia}
/> src={image.path_full}
))} style={{ translate: `${-100 * mediaIndex}%` }}
/>
))}
</div> </div>
<button <button
onClick={showPrevImage} onClick={showPrevImage}