PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-03 00:33:49 +03:00
Code Issues Actions 1 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 * as styles from "./game-details.css";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
export interface GallerySliderProps { export interface GallerySliderProps {
gameDetails: ShopDetails | null; gameDetails: ShopDetails | null;
} }
export function GallerySlider({ gameDetails }: GallerySliderProps) { export function GallerySlider({ gameDetails }: GallerySliderProps) {
const [mediaIndex, setMediaIndex] = useState<number>(0); 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 { t } = useTranslation("game_details");
const showNextImage = () => { const showNextImage = () => {
setMediaIndex((index: number) => { setMediaIndex((index: number) => {
if (gameDetails?.movies.length && index === (gameDetails?.movies.length - 1) && mediaType === 'video') { if (
setMediaType('image') gameDetails?.movies.length &&
return 1 index === gameDetails?.movies.length - 1 &&
mediaType === "video"
) {
setMediaType("image");
return 1;
} }
if (gameDetails?.screenshots.length && index === (gameDetails?.screenshots.length - 1) && mediaType === 'image') { if (
setMediaType('video') gameDetails?.screenshots.length &&
return 0 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 (gameDetails?.screenshots.length && index === 0 && mediaType === 'video') { if (
setMediaType('image') gameDetails?.screenshots.length &&
return gameDetails?.screenshots.length - 1 index === 0 &&
mediaType === "video"
) {
setMediaType("image");
return gameDetails?.screenshots.length - 1;
} }
if (gameDetails?.movies.length && index === 1 && mediaType === 'image') { if (gameDetails?.movies.length && index === 1 && mediaType === "image") {
setMediaType('video') setMediaType("video");
return gameDetails?.movies.length - 1 return gameDetails?.movies.length - 1;
} }
return index - 1 return index - 1;
}) });
}; };
return ( return (
<> <>
{gameDetails?.screenshots && ( {gameDetails?.screenshots && (
<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.map((video: SteamMovies) => (
<video controls className={styles.gallerySliderMedia} poster={video.thumbnail} style={{ translate: `${-100 * mediaIndex}%` }}> <video
<source src={video.webm.max.replace('http', 'https')} /> controls
className={styles.gallerySliderMedia}
poster={video.thumbnail}
style={{ translate: `${-100 * mediaIndex}%` }}
>
<source src={video.webm.max.replace("http", "https")} />
</video> </video>
))} ))}
{gameDetails.screenshots.map((image: SteamScreenshot) => ( {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> </div>
<button onClick={showPrevImage} className={styles.gallerySliderButton} style={{ left: 0 }}><ChevronLeftIcon className={styles.gallerySliderIcons} /></button> <button
<button onClick={showNextImage} className={styles.gallerySliderButton} style={{ right: 0 }}><ChevronRightIcon className={styles.gallerySliderIcons} /></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> </div>
)} )}
</> </>
) );
} }

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

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