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 slider previews

Browse Source
This commit is contained in:
Matheus Dantas 2024-05-05 16:38:27 -03:00
parent 3e47560048
commit f5f3c7412f
2 changed files with 111 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { ShopDetails, SteamMovies, SteamScreenshot } from "@types";
import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
import * as styles from "./game-details.css";
@ -9,7 +9,7 @@ export interface GallerySliderProps {
}
export function GallerySlider({ gameDetails }: GallerySliderProps) {
const [mediaCount, setMediaCount] = useState<number>(() => {
const [mediaCount] = useState<number>(() => {
if (gameDetails) {
if (gameDetails.screenshots && gameDetails.movies) {
return gameDetails.screenshots.length + gameDetails.movies.length;
@ -22,6 +22,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
return 0;
});
const [mediaIndex, setMediaIndex] = useState<number>(0);
const [arrowShow, setArrowShow] = useState(false);
const { t } = useTranslation("game_details");
const showNextImage = () => {
@ -44,7 +45,11 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
{gameDetails?.screenshots && (
<div className={styles.gallerySliderContainer}>
<h2 className={styles.gallerySliderTitle}>{t("gallery")}</h2>
<div className={styles.gallerySliderAnimationContainer}>
<div
onMouseEnter={() => setArrowShow(true)}
onMouseLeave={() => setArrowShow(false)}
className={styles.gallerySliderAnimationContainer}
>
{gameDetails.movies &&
gameDetails.movies.map((video: SteamMovies) => (
<video
@ -64,21 +69,66 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
style={{ translate: `${-100 * mediaIndex}%` }}
/>
))}
{arrowShow && (
<>
<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 className={styles.gallerySliderPreview}>
{gameDetails.movies &&
gameDetails.movies.map((video: SteamMovies, i: number) => (
<img
onClick={() => setMediaIndex(i)}
src={video.thumbnail}
className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i ? styles.gallerySliderMediaPreviewActive : ""}`}
style={{ translate: `${-85 * mediaIndex}%` }}
/>
))}
{gameDetails.screenshots &&
gameDetails.screenshots.map(
(image: SteamScreenshot, i: number) => (
<img
onClick={() =>
setMediaIndex(
i + (gameDetails.movies ? gameDetails.movies.length : 0)
)
}
className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i + (gameDetails.movies ? gameDetails.movies.length : 0) ? styles.gallerySliderMediaPreviewActive : ""}`}
src={image.path_full}
style={{ translate: `${-85 * mediaIndex}%` }}
/>
)
)}
<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>
<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>
)}
</>

49
src/renderer/src/pages/game-details/game-details.css.ts
View File

@ -82,7 +82,9 @@ export const descriptionContent = style({
export const gallerySliderContainer = style({
padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
width: "100%",
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "center",
});
export const gallerySliderTitle = style({
@ -95,15 +97,53 @@ export const gallerySliderMedia = style({
display: "block",
flexShrink: 0,
flexGrow: 0,
transition: "translate 300ms ease-in-out"
transition: "translate 300ms ease-in-out",
});
export const gallerySliderAnimationContainer = style({
width: "100%",
height: "100%",
display: "flex",
overflow: "hidden"
})
position: "relative",
overflow: "hidden",
"@media": {
"(min-width: 1280px)": {
width: "60%",
},
},
});
export const gallerySliderPreview = style({
width: "100%",
paddingTop: "0.5rem",
height: "100%",
display: "flex",
position: "relative",
overflow: "hidden",
"@media": {
"(min-width: 1280px)": {
width: "60%",
},
},
});
export const gallerySliderMediaPreview = style({
cursor: "pointer",
width: "20%",
height: "20%",
display: "block",
flexShrink: 0,
flexGrow: 0,
opacity: 0.3,
transition: "translate 300ms ease-in-out",
":hover": {
opacity: 1,
},
});
export const gallerySliderMediaPreviewActive = style({
opacity: 1,
});
export const gallerySliderButton = style({
all: "unset",
@ -114,7 +154,6 @@ export const gallerySliderButton = style({
padding: "1rem",
cursor: "pointer",
transition: "background-color 100ms ease-in-out",
margin: `${SPACING_UNIT * 8}px ${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px `,
":hover": {
backgroundColor: "rgb(0,0,0, 0.2)",
},