PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-01-23 21:44:55 +03:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Add prettier to gallery-slider.tsx, remove console.log and revert .env.example file exclusion

Browse Source
This commit is contained in:
Matheus Dantas 2024-05-05 00:25:23 -03:00
parent 77b975d456
commit 1e5c0db46e
3 changed files with 90 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.env.example Normal file
View File

@ -0,0 +1,5 @@
MAIN_VITE_STEAMGRIDDB_API_KEY=YOUR_API_KEY
MAIN_VITE_ONLINEFIX_USERNAME=YOUR_USERNAME
MAIN_VITE_ONLINEFIX_PASSWORD=YOUR_PASSWORD
MAIN_VITE_SENTRY_DSN=YOUR_SENTRY_DSN
RENDERER_VITE_SENTRY_DSN=YOUR_SENTRY_DSN

83
src/renderer/src/pages/game-details/gallery-slider.tsx
View File

@ -4,65 +4,96 @@ 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 [mediaIndex, setMediaIndex] = useState<number>(0);
const [mediaType, setMediaType] = useState<'video' | 'image'>('video');
const [mediaType, setMediaType] = useState<"video" | "image">("video");
const { t } = useTranslation("game_details");
const showNextImage = () => {
setMediaIndex((index: number) => {
if (gameDetails?.movies.length && index === (gameDetails?.movies.length - 1) && mediaType === 'video') {
setMediaType('image')
return 1
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
if (
gameDetails?.screenshots.length &&
index === gameDetails?.screenshots.length - 1 &&
mediaType === "image"
) {
setMediaType("video");
return 0;
}
return index + 1
})
return index + 1;
});
};
const showPrevImage = () => {
setMediaIndex((index: number) => {
if (gameDetails?.screenshots.length && index === 0 && mediaType === 'video') {
setMediaType('image')
return gameDetails?.screenshots.length - 1
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
if (gameDetails?.movies.length && index === 1 && mediaType === "image") {
setMediaType("video");
return gameDetails?.movies.length - 1;
}
return index - 1
})
return index - 1;
});
};
return (
<>
{gameDetails?.screenshots && (
<div className={styles.gallerySliderContainer}>
<h2 className={styles.gallerySliderTitle}>{t('gallery')}</h2>
<h2 className={styles.gallerySliderTitle}>{t("gallery")}</h2>
<div className={styles.gallerySliderAnimationContainer}>
{gameDetails.movies.map((video: SteamMovies) => (
<video controls className={styles.gallerySliderMedia} poster={video.thumbnail} style={{ translate: `${-100 * mediaIndex}%` }}>
<source src={video.webm.max.replace('http', 'https')} />
<video
controls
className={styles.gallerySliderMedia}
poster={video.thumbnail}
style={{ translate: `${-100 * mediaIndex}%` }}
>
<source src={video.webm.max.replace("http", "https")} />
</video>
))}
{gameDetails.screenshots.map((image: SteamScreenshot) => (
<img className={styles.gallerySliderMedia} src={image.path_full} style={{ translate: `${-100 * mediaIndex}%` }} />
<img
className={styles.gallerySliderMedia}
src={image.path_full}
style={{ translate: `${-100 * mediaIndex}%` }}
/>
))}
</div>
<button onClick={showPrevImage} className={styles.gallerySliderButton} style={{ left: 0 }}><ChevronLeftIcon className={styles.gallerySliderIcons} /></button>
<button onClick={showNextImage} className={styles.gallerySliderButton} style={{ right: 0 }}><ChevronRightIcon className={styles.gallerySliderIcons} /></button>
<button
onClick={showPrevImage}
className={styles.gallerySliderButton}
style={{ left: 0 }}
>
<ChevronLeftIcon className={styles.gallerySliderIcons} />
</button>
<button
onClick={showNextImage}
className={styles.gallerySliderButton}
style={{ right: 0 }}
>
<ChevronRightIcon className={styles.gallerySliderIcons} />
</button>
</div>
)}
</>
)
);
}

1
src/renderer/src/pages/game-details/game-details.tsx
View File

@ -88,7 +88,6 @@ export function GameDetails() {
useEffect(() => {
getGame();
}, [getGame, gameDownloading?.id]);
console.log(gameDetails)
useEffect(() => {
setGame(null);
setIsLoading(true);