From da255f7c61b992bb043cbe82c9744e761e7f3866 Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Sun, 12 May 2024 16:06:48 -0300 Subject: [PATCH 01/11] fix: arrow have smaller height --- src/renderer/src/pages/game-details/gallery-slider.css.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/renderer/src/pages/game-details/gallery-slider.css.ts b/src/renderer/src/pages/game-details/gallery-slider.css.ts index c7e0b7c2..18464eea 100644 --- a/src/renderer/src/pages/game-details/gallery-slider.css.ts +++ b/src/renderer/src/pages/game-details/gallery-slider.css.ts @@ -78,8 +78,9 @@ export const gallerySliderButton = style({ all: "unset", display: "block", position: "absolute", - top: 0, - bottom: 0, + height: "15%", + top: "50%", + transform: "translateY(-50%)", padding: "1rem", cursor: "pointer", transition: "background-color 100ms ease-in-out", From 4015af164819d79e8c0894a6afcc30dcd3f1b06d Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Sun, 12 May 2024 16:07:52 -0300 Subject: [PATCH 02/11] feat: remove autoplay from html tag. makes autoplay dinamically on scroll --- .../src/pages/game-details/gallery-slider.tsx | 33 ++++++++++++++++--- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx index 1baca359..368a77f0 100644 --- a/src/renderer/src/pages/game-details/gallery-slider.tsx +++ b/src/renderer/src/pages/game-details/gallery-slider.tsx @@ -9,6 +9,11 @@ export interface GallerySliderProps { export function GallerySlider({ gameDetails }: GallerySliderProps) { const scrollContainerRef = useRef(null); + const mediaContainerRef = useRef(null); + const currentVideoRef = useRef(null); + + const hasScreenshots = gameDetails && gameDetails.screenshots.length; + const hasMovies = gameDetails && gameDetails.movies?.length; const [mediaCount] = useState(() => { 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 > From 1c7c64a5a2188de368f9fa557f335f5936774f67 Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Sun, 12 May 2024 16:09:47 -0300 Subject: [PATCH 03/11] fix: replace webm with mp4 file. cause high cpu usage sometimes --- src/renderer/src/pages/game-details/gallery-slider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx index 368a77f0..9a9d57fa 100644 --- a/src/renderer/src/pages/game-details/gallery-slider.tsx +++ b/src/renderer/src/pages/game-details/gallery-slider.tsx @@ -106,7 +106,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { loop muted > - + ))} {gameDetails.screenshots && From 483f069d816be5df1d4d1963192f67153c87ffcf Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Sun, 12 May 2024 16:11:08 -0300 Subject: [PATCH 04/11] remove debug log --- src/renderer/src/pages/game-details/gallery-slider.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx index 9a9d57fa..287b83cb 100644 --- a/src/renderer/src/pages/game-details/gallery-slider.tsx +++ b/src/renderer/src/pages/game-details/gallery-slider.tsx @@ -67,8 +67,6 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { if (node instanceof HTMLVideoElement) { node.play() currentVideoRef.current = node - } else { - console.log(" nao é video") } } }) From b0803fa28d744558e511f52798611acb39785e82 Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Sun, 12 May 2024 16:51:25 -0300 Subject: [PATCH 05/11] feat: add lazy loading to images and thumbs --- src/renderer/src/pages/game-details/gallery-slider.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx index 287b83cb..174c4759 100644 --- a/src/renderer/src/pages/game-details/gallery-slider.tsx +++ b/src/renderer/src/pages/game-details/gallery-slider.tsx @@ -112,6 +112,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { (image: SteamScreenshot, i: number) => ( ( setMediaIndex(i)} src={video.thumbnail} className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i ? styles.gallerySliderMediaPreviewActive : ""}`} @@ -156,6 +158,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { (image: SteamScreenshot, i: number) => ( setMediaIndex( i + (gameDetails.movies ? gameDetails.movies.length : 0) From 05c6c7c64d4011b837ca00e659cd541a4b838b0f Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Sun, 12 May 2024 16:55:54 -0300 Subject: [PATCH 06/11] simplify chained ifs --- src/renderer/src/pages/game-details/gallery-slider.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx index 174c4759..77fcb858 100644 --- a/src/renderer/src/pages/game-details/gallery-slider.tsx +++ b/src/renderer/src/pages/game-details/gallery-slider.tsx @@ -63,11 +63,9 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { useEffect(() => { if (hasMovies && mediaContainerRef.current) { mediaContainerRef.current.childNodes.forEach((node, index) => { - if (index == mediaIndex) { - if (node instanceof HTMLVideoElement) { - node.play() - currentVideoRef.current = node - } + if (index == mediaIndex && node instanceof HTMLVideoElement) { + node.play() + currentVideoRef.current = node } }) } From 43026392202f22cd42c0d740b29f26f829596696 Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Sun, 12 May 2024 17:03:39 -0300 Subject: [PATCH 07/11] fix: video not playing on thumb click --- .../src/pages/game-details/gallery-slider.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx index 77fcb858..b0400bd9 100644 --- a/src/renderer/src/pages/game-details/gallery-slider.tsx +++ b/src/renderer/src/pages/game-details/gallery-slider.tsx @@ -33,10 +33,6 @@ 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; @@ -45,10 +41,6 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { }; const showPrevImage = () => { - if (currentVideoRef.current) { - currentVideoRef.current.pause() - } - setMediaIndex((index: number) => { if (index === 0) return mediaCount - 1; @@ -61,6 +53,10 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { }, [gameDetails]); useEffect(() => { + if (currentVideoRef.current) { + currentVideoRef.current.pause() + } + if (hasMovies && mediaContainerRef.current) { mediaContainerRef.current.childNodes.forEach((node, index) => { if (index == mediaIndex && node instanceof HTMLVideoElement) { From ff20d531c28cad92ea827a9516807f4b70cf3446 Mon Sep 17 00:00:00 2001 From: Hydra Date: Mon, 13 May 2024 02:02:55 +0100 Subject: [PATCH 08/11] feat: improving buttons on gallery slider --- src/locales/en/translation.json | 4 +- src/locales/pt/translation.json | 4 +- src/renderer/src/components/modal/modal.tsx | 9 +- .../pages/game-details/gallery-slider.css.ts | 100 +++++++++++------- .../src/pages/game-details/gallery-slider.tsx | 81 ++++++++------ 5 files changed, 127 insertions(+), 71 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 0674d1b5..f3c5719e 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -96,7 +96,9 @@ "dont_show_it_again": "Don't show it again", "copy_to_clipboard": "Copy", "copied_to_clipboard": "Copied", - "got_it": "Got it" + "got_it": "Got it", + "previous_screenshot": "Previous screenshot", + "next_screenshot": "Next screenshot" }, "activation": { "title": "Activate Hydra", diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json index dda53065..bb29957a 100644 --- a/src/locales/pt/translation.json +++ b/src/locales/pt/translation.json @@ -92,7 +92,9 @@ "dont_show_it_again": "Não mostrar novamente", "copy_to_clipboard": "Copiar", "copied_to_clipboard": "Copiado", - "got_it": "Entendi" + "got_it": "Entendi", + "previous_screenshot": "Captura de tela anterior", + "next_screenshot": "Próxima captura de tela" }, "activation": { "title": "Ativação", diff --git a/src/renderer/src/components/modal/modal.tsx b/src/renderer/src/components/modal/modal.tsx index 79308c1e..82c3b481 100644 --- a/src/renderer/src/components/modal/modal.tsx +++ b/src/renderer/src/components/modal/modal.tsx @@ -24,6 +24,7 @@ export function Modal({ }: ModalProps) { const [isClosing, setIsClosing] = useState(false); const modalContentRef = useRef(null); + const titleRef = useRef(null); const { t } = useTranslation("modal"); @@ -52,6 +53,8 @@ export function Modal({ useEffect(() => { if (visible) { + if (titleRef.current) titleRef.current.focus(); + const onKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape" && isTopMostModal()) { handleCloseClick(); @@ -94,8 +97,10 @@ export function Modal({ >
-

{title}

- {description &&

{description}

} +

+ {title} +

+ {description &&

{description}

}
- - - )} + + +
@@ -144,7 +156,9 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { loading="lazy" onClick={() => setMediaIndex(i)} src={video.thumbnail} - className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i ? styles.gallerySliderMediaPreviewActive : ""}`} + className={styles.gallerySliderMediaPreview({ + active: mediaIndex === i, + })} /> ))} {gameDetails.screenshots && @@ -158,7 +172,12 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { i + (gameDetails.movies ? gameDetails.movies.length : 0) ) } - className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i + (gameDetails.movies ? gameDetails.movies.length : 0) ? styles.gallerySliderMediaPreviewActive : ""}`} + className={styles.gallerySliderMediaPreview({ + active: + mediaIndex === + i + + (gameDetails.movies ? gameDetails.movies.length : 0), + })} src={image.path_full} /> ) From aaa94a43bbad16e15fa3599e63ca3b7b10dbc628 Mon Sep 17 00:00:00 2001 From: Hydra Date: Mon, 13 May 2024 02:38:07 +0100 Subject: [PATCH 09/11] chore: removing tabindex from modal --- src/renderer/src/components/modal/modal.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/renderer/src/components/modal/modal.tsx b/src/renderer/src/components/modal/modal.tsx index a0fc198a..696189ad 100644 --- a/src/renderer/src/components/modal/modal.tsx +++ b/src/renderer/src/components/modal/modal.tsx @@ -24,7 +24,6 @@ export function Modal({ }: ModalProps) { const [isClosing, setIsClosing] = useState(false); const modalContentRef = useRef(null); - const titleRef = useRef(null); const { t } = useTranslation("modal"); @@ -53,8 +52,6 @@ export function Modal({ useEffect(() => { if (visible) { - if (titleRef.current) titleRef.current.focus(); - const onKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape" && isTopMostModal()) { handleCloseClick(); @@ -99,10 +96,8 @@ export function Modal({ >
-

- {title} -

- {description &&

{description}

} +

{title}

+ {description &&

{description}

}
+ ))}
)} From 0e09f59412781b0760c74e8f12e44874eb708888 Mon Sep 17 00:00:00 2001 From: Hydra Date: Mon, 13 May 2024 10:24:14 +0100 Subject: [PATCH 11/11] chore: fixing a11y for gallery slider --- .github/workflows/lint.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 293a898b..3e5072c7 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -1,6 +1,6 @@ name: Lint -on: [pull_request, push] +on: [push] jobs: lint: