external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-12 19:22:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: improving buttons on gallery slider

Browse source
This commit is contained in:
Hydra 2024-05-13 02:02:55 +01:00
parent cabec999ba
commit ff20d531c2
No known key found for this signature in database
5 changed files with 127 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/locales/en/translation.json
View file

@ -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",

4
src/locales/pt/translation.json
View file

@ -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",

9
src/renderer/src/components/modal/modal.tsx
View file

@ -24,6 +24,7 @@ export function Modal({
}: ModalProps) {
const [isClosing, setIsClosing] = useState(false);
const modalContentRef = useRef<HTMLDivElement | null>(null);
const titleRef = useRef<HTMLHeadingElement | null>(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({
>
<div className={styles.modalHeader}>
<div style={{ display: "flex", gap: 4, flexDirection: "column" }}>
<h3>{title}</h3>
{description && <p>{description}</p>}
<h3 ref={titleRef} tabIndex={0}>
{title}
</h3>
{description && <p tabIndex={0}>{description}</p>}
</div>
<button

100
src/renderer/src/pages/game-details/gallery-slider.css.ts
View file

@ -1,3 +1,4 @@
import { recipe } from "@vanilla-extract/recipes";
import { SPACING_UNIT, vars } from "../../theme.css";
import { style } from "@vanilla-extract/css";
@ -13,7 +14,7 @@ export const gallerySliderMedia = style({
width: "100%",
height: "100%",
display: "block",
flexShrink: 0,
flexShrink: "0",
flexGrow: "0",
transition: "translate 0.3s ease-in-out",
borderRadius: "4px",
@ -54,43 +55,70 @@ export const gallerySliderPreview = style({
},
});
export const gallerySliderMediaPreview = style({
cursor: "pointer",
width: "20%",
height: "20%",
display: "block",
flexShrink: 0,
flexGrow: 0,
opacity: 0.3,
transition: "translate 0.3s ease-in-out, opacity 0.2s ease",
borderRadius: "4px",
border: `solid 1px ${vars.color.border}`,
":hover": {
opacity: "1",
export const gallerySliderMediaPreview = recipe({
base: {
cursor: "pointer",
width: "20%",
height: "20%",
display: "block",
flexShrink: "0",
flexGrow: "0",
opacity: "0.3",
transition: "translate 0.3s ease-in-out, opacity 0.2s ease",
borderRadius: "4px",
border: `solid 1px ${vars.color.border}`,
":hover": {
opacity: "0.8",
},
},
variants: {
active: {
true: {
opacity: "1",
},
},
},
});
export const gallerySliderMediaPreviewActive = style({
opacity: 1,
});
export const gallerySliderButton = style({
all: "unset",
display: "block",
position: "absolute",
height: "15%",
top: "50%",
transform: "translateY(-50%)",
padding: "1rem",
cursor: "pointer",
transition: "background-color 100ms ease-in-out",
":hover": {
backgroundColor: "rgb(0, 0, 0, 0.2)",
export const gallerySliderButton = recipe({
base: {
position: "absolute",
alignSelf: "center",
cursor: "pointer",
backgroundColor: "rgba(0, 0, 0, 0.4)",
transition: "all 0.2s ease-in-out",
borderRadius: "50%",
color: vars.color.muted,
width: "48px",
height: "48px",
":hover": {
backgroundColor: "rgba(0, 0, 0, 0.6)",
},
":active": {
transform: "scale(0.95)",
},
},
variants: {
direction: {
left: {
left: "0",
marginLeft: `${SPACING_UNIT}px`,
transform: `translateX(${-(48 + SPACING_UNIT)}px)`,
},
right: {
right: "0",
marginRight: `${SPACING_UNIT}px`,
transform: `translateX(${48 + SPACING_UNIT}px)`,
},
},
visible: {
true: {
transform: "translateX(0)",
opacity: "1",
},
false: {
opacity: "0",
},
},
},
});
export const gallerySliderIcons = style({
fill: vars.color.muted,
width: "2rem",
height: "2rem",
});

81
src/renderer/src/pages/game-details/gallery-slider.tsx
View file

@ -1,7 +1,10 @@
import { useEffect, useRef, useState } from "react";
import { ShopDetails, SteamMovies, SteamScreenshot } from "@types";
import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
import type { ShopDetails, SteamMovies, SteamScreenshot } from "@types";
import * as styles from "./gallery-slider.css";
import { useTranslation } from "react-i18next";
export interface GallerySliderProps {
gameDetails: ShopDetails | null;
@ -12,6 +15,8 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
const mediaContainerRef = useRef<HTMLDivElement>(null);
const currentVideoRef = useRef<HTMLVideoElement | null>(null);
const { t } = useTranslation("game_details");
const hasScreenshots = gameDetails && gameDetails.screenshots.length;
const hasMovies = gameDetails && gameDetails.movies?.length;
@ -30,7 +35,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
});
const [mediaIndex, setMediaIndex] = useState<number>(0);
const [arrowShow, setArrowShow] = useState(false);
const [showArrows, setShowArrows] = useState(false);
const showNextImage = () => {
setMediaIndex((index: number) => {
@ -54,18 +59,18 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
useEffect(() => {
if (currentVideoRef.current) {
currentVideoRef.current.pause()
currentVideoRef.current.pause();
}
if (hasMovies && mediaContainerRef.current) {
mediaContainerRef.current.childNodes.forEach((node, index) => {
if (index == mediaIndex && node instanceof HTMLVideoElement) {
node.play()
currentVideoRef.current = node
node.play();
currentVideoRef.current = node;
}
})
});
}
}, [hasMovies, mediaContainerRef, mediaIndex])
}, [hasMovies, mediaContainerRef, mediaIndex]);
useEffect(() => {
if (scrollContainerRef.current) {
@ -82,8 +87,8 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
{hasScreenshots && (
<div className={styles.gallerySliderContainer}>
<div
onMouseEnter={() => setArrowShow(true)}
onMouseLeave={() => setArrowShow(false)}
onMouseEnter={() => setShowArrows(true)}
onMouseLeave={() => setShowArrows(false)}
className={styles.gallerySliderAnimationContainer}
ref={mediaContainerRef}
>
@ -97,6 +102,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
style={{ translate: `${-100 * mediaIndex}%` }}
loop
muted
tabIndex={-1}
>
<source src={video.mp4.max.replace("http", "https")} />
</video>
@ -110,30 +116,36 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
className={styles.gallerySliderMedia}
src={image.path_full}
style={{ translate: `${-100 * mediaIndex}%` }}
tabIndex={-1}
/>
)
)}
{arrowShow && (
<>
<button
onClick={showPrevImage}
type="button"
className={styles.gallerySliderButton}
style={{ left: 0 }}
>
<ChevronLeftIcon className={styles.gallerySliderIcons} />
</button>
<button
onClick={showNextImage}
type="button"
className={styles.gallerySliderButton}
style={{ right: 0 }}
>
<ChevronRightIcon className={styles.gallerySliderIcons} />
</button>
</>
)}
<button
onClick={showPrevImage}
type="button"
className={styles.gallerySliderButton({
visible: showArrows,
direction: "left",
})}
aria-label={t("previous_screenshot")}
tabIndex={0}
>
<ChevronLeftIcon size={36} />
</button>
<button
onClick={showNextImage}
type="button"
className={styles.gallerySliderButton({
visible: showArrows,
direction: "right",
})}
aria-label={t("next_screenshot")}
tabIndex={0}
>
<ChevronRightIcon size={36} />
</button>
</div>
<div className={styles.gallerySliderPreview} ref={scrollContainerRef}>
@ -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}
/>
)