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

feat: remove autoplay from html tag. makes autoplay dinamically on scroll

Browse Source
This commit is contained in:
Zamitto 2024-05-12 16:07:52 -03:00
parent da255f7c61
commit 4015af1648
1 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,11 @@ export interface GallerySliderProps {
export function GallerySlider({ gameDetails }: GallerySliderProps) {
const scrollContainerRef = useRef<HTMLDivElement>(null);
const mediaContainerRef = useRef<HTMLDivElement>(null);
const currentVideoRef = useRef<HTMLVideoElement | null>(null);
const hasScreenshots = gameDetails && gameDetails.screenshots.length;
const hasMovies = gameDetails && gameDetails.movies?.length;
const [mediaCount] = useState<number>(() => {
if (gameDetails) {
@ -28,6 +33,10 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
const [arrowShow, setArrowShow] = useState(false);
const showNextImage = () => {
if (currentVideoRef.current) {
currentVideoRef.current.pause()
}
setMediaIndex((index: number) => {
if (index === mediaCount - 1) return 0;
@ -36,6 +45,10 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
};
const showPrevImage = () => {
if (currentVideoRef.current) {
currentVideoRef.current.pause()
}
setMediaIndex((index: number) => {
if (index === 0) return mediaCount - 1;
@ -47,6 +60,21 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
setMediaIndex(0);
}, [gameDetails]);
useEffect(() => {
if (hasMovies && mediaContainerRef.current) {
mediaContainerRef.current.childNodes.forEach((node, index) => {
if (index == mediaIndex) {
if (node instanceof HTMLVideoElement) {
node.play()
currentVideoRef.current = node
} else {
console.log(" nao é video")
}
}
})
}
}, [hasMovies, mediaContainerRef, mediaIndex])
useEffect(() => {
if (scrollContainerRef.current) {
const container = scrollContainerRef.current;
@ -57,9 +85,6 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
}
}, [gameDetails, mediaIndex, mediaCount]);
const hasScreenshots = gameDetails && gameDetails.screenshots.length;
const hasMovies = gameDetails && gameDetails.movies?.length;
return (
<>
{hasScreenshots && (
@ -68,6 +93,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
onMouseEnter={() => setArrowShow(true)}
onMouseLeave={() => setArrowShow(false)}
className={styles.gallerySliderAnimationContainer}
ref={mediaContainerRef}
>
{gameDetails.movies &&
gameDetails.movies.map((video: SteamMovies) => (
@ -77,7 +103,6 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
className={styles.gallerySliderMedia}
poster={video.thumbnail}
style={{ translate: `${-100 * mediaIndex}%` }}
autoPlay
loop
muted
>