mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-03-09 15:40:26 +00:00
chore: updating yarn.lock
This commit is contained in:
Hydra
parent
9e648fed28
commit
072b4dc4d3
5 changed files with 62 additions and 51 deletions
|
|
@ -138,7 +138,7 @@
|
|||
"telemetry": "Телеметрия",
|
||||
"telemetry_description": "Включить анонимную статистику использования",
|
||||
"behavior": "Поведение",
|
||||
"quit_app_instead_hiding": "Закрывать приложение вместо того, чтобы сворачивать его в трей"
|
||||
"quit_app_instead_hiding": "Закрывать приложение вместо того, чтобы сворачивать его в трей",
|
||||
"launch_with_system": "Запуск приложения при запуске системы"
|
||||
},
|
||||
"notifications": {
|
||||
|
|
|
|||
|
|
@ -7,8 +7,10 @@ const showOpenDialog = async (
|
|||
options: Electron.OpenDialogOptions
|
||||
) => {
|
||||
if (WindowManager.mainWindow) {
|
||||
dialog.showOpenDialog(WindowManager.mainWindow, options);
|
||||
return dialog.showOpenDialog(WindowManager.mainWindow, options);
|
||||
}
|
||||
|
||||
throw new Error("Main window is not available");
|
||||
};
|
||||
|
||||
registerEvent(showOpenDialog, {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { RefObject, useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { ShopDetails, SteamMovies, SteamScreenshot } from "@types";
|
||||
import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
|
||||
import * as styles from "./game-details.css";
|
||||
|
|
@ -8,8 +8,8 @@ export interface GallerySliderProps {
|
|||
}
|
||||
|
||||
export function GallerySlider({ gameDetails }: GallerySliderProps) {
|
||||
const scrollContainerRef: RefObject<HTMLDivElement> =
|
||||
useRef<HTMLDivElement>(null);
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [mediaCount] = useState<number>(() => {
|
||||
if (gameDetails) {
|
||||
if (gameDetails.screenshots && gameDetails.movies) {
|
||||
|
|
@ -25,16 +25,6 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
|
|||
const [mediaIndex, setMediaIndex] = useState<number>(0);
|
||||
const [arrowShow, setArrowShow] = useState(false);
|
||||
|
||||
const scrollHorizontallyToPercentage = () => {
|
||||
if (scrollContainerRef.current) {
|
||||
const container = scrollContainerRef.current;
|
||||
const totalWidth = container.scrollWidth - container.clientWidth;
|
||||
const itemWidth = totalWidth / (mediaCount - 1);
|
||||
const scrollLeft = mediaIndex * itemWidth;
|
||||
container.scrollLeft = scrollLeft;
|
||||
}
|
||||
};
|
||||
|
||||
const showNextImage = () => {
|
||||
setMediaIndex((index: number) => {
|
||||
if (index === mediaCount - 1) return 0;
|
||||
|
|
@ -42,6 +32,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
|
|||
return index + 1;
|
||||
});
|
||||
};
|
||||
|
||||
const showPrevImage = () => {
|
||||
setMediaIndex((index: number) => {
|
||||
if (index === 0) return mediaCount - 1;
|
||||
|
|
@ -51,11 +42,21 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
scrollHorizontallyToPercentage();
|
||||
}, [mediaIndex]);
|
||||
if (scrollContainerRef.current) {
|
||||
const container = scrollContainerRef.current;
|
||||
const totalWidth = container.scrollWidth - container.clientWidth;
|
||||
const itemWidth = totalWidth / (mediaCount - 1);
|
||||
const scrollLeft = mediaIndex * itemWidth;
|
||||
container.scrollLeft = scrollLeft;
|
||||
}
|
||||
}, [mediaIndex, mediaCount]);
|
||||
|
||||
const hasScreenshots = gameDetails && gameDetails.screenshots.length > 0;
|
||||
const hasMovies = gameDetails && gameDetails.movies.length > 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
{gameDetails?.screenshots && (
|
||||
{hasScreenshots && (
|
||||
<div className={styles.gallerySliderContainer}>
|
||||
<div
|
||||
onMouseEnter={() => setArrowShow(true)}
|
||||
|
|
@ -65,33 +66,41 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
|
|||
{gameDetails.movies &&
|
||||
gameDetails.movies.map((video: SteamMovies) => (
|
||||
<video
|
||||
key={video.id}
|
||||
controls
|
||||
className={styles.gallerySliderMedia}
|
||||
poster={video.thumbnail}
|
||||
style={{ translate: `${-100 * mediaIndex}%` }}
|
||||
autoPlay
|
||||
muted
|
||||
>
|
||||
<source src={video.webm.max.replace("http", "https")} />
|
||||
</video>
|
||||
))}
|
||||
{gameDetails.screenshots &&
|
||||
gameDetails.screenshots.map((image: SteamScreenshot) => (
|
||||
|
||||
{gameDetails.screenshots.map((image: SteamScreenshot) => (
|
||||
<img
|
||||
key={image.id}
|
||||
className={styles.gallerySliderMedia}
|
||||
src={image.path_full}
|
||||
style={{ translate: `${-100 * mediaIndex}%` }}
|
||||
/>
|
||||
))}
|
||||
|
||||
{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 }}
|
||||
>
|
||||
|
|
@ -102,18 +111,20 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
|
|||
</div>
|
||||
|
||||
<div className={styles.gallerySliderPreview} ref={scrollContainerRef}>
|
||||
{gameDetails.movies &&
|
||||
{hasMovies &&
|
||||
gameDetails.movies.map((video: SteamMovies, i: number) => (
|
||||
<img
|
||||
key={video.id}
|
||||
onClick={() => setMediaIndex(i)}
|
||||
src={video.thumbnail}
|
||||
className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i ? styles.gallerySliderMediaPreviewActive : ""}`}
|
||||
/>
|
||||
))}
|
||||
{gameDetails.screenshots &&
|
||||
gameDetails.screenshots.map(
|
||||
|
||||
{gameDetails.screenshots.map(
|
||||
(image: SteamScreenshot, i: number) => (
|
||||
<img
|
||||
key={image.id}
|
||||
onClick={() =>
|
||||
setMediaIndex(
|
||||
i + (gameDetails.movies ? gameDetails.movies.length : 0)
|
||||
|
|
|
|||
|
|
@ -92,8 +92,9 @@ export const gallerySliderMedia = style({
|
|||
height: "100%",
|
||||
display: "block",
|
||||
flexShrink: 0,
|
||||
flexGrow: 0,
|
||||
transition: "translate 300ms ease-in-out",
|
||||
flexGrow: "0",
|
||||
transition: "translate 0.3s ease-in-out",
|
||||
borderRadius: "4px",
|
||||
});
|
||||
|
||||
export const gallerySliderAnimationContainer = style({
|
||||
|
|
@ -123,8 +124,8 @@ export const gallerySliderPreview = style({
|
|||
},
|
||||
},
|
||||
"::-webkit-scrollbar-thumb": {
|
||||
width: "20%"
|
||||
}
|
||||
width: "20%",
|
||||
},
|
||||
});
|
||||
|
||||
export const gallerySliderMediaPreview = style({
|
||||
|
|
@ -137,6 +138,7 @@ export const gallerySliderMediaPreview = style({
|
|||
opacity: 0.3,
|
||||
paddingRight: "5px",
|
||||
transition: "translate 300ms ease-in-out",
|
||||
borderRadius: "4px",
|
||||
":hover": {
|
||||
opacity: 1,
|
||||
},
|
||||
|
|
@ -156,13 +158,12 @@ export const gallerySliderButton = style({
|
|||
cursor: "pointer",
|
||||
transition: "background-color 100ms ease-in-out",
|
||||
":hover": {
|
||||
backgroundColor: "rgb(0,0,0, 0.2)",
|
||||
backgroundColor: "rgb(0, 0, 0, 0.2)",
|
||||
},
|
||||
});
|
||||
|
||||
export const gallerySliderIcons = style({
|
||||
stroke: "white",
|
||||
fill: "black",
|
||||
fill: vars.color.muted,
|
||||
width: "2rem",
|
||||
height: "2rem",
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1827,14 +1827,11 @@ app-root-path@^3.1.0:
|
|||
resolved "https://registry.npmjs.org/app-root-path/-/app-root-path-3.1.0.tgz"
|
||||
integrity sha512-biN3PwB2gUtjaYy/isrU3aNWI5w+fAfvHkSvCKeQGxhmYpwKFUxudR3Yya+KqVRHBmEDYh+/lTozYCFbmzX4nA==
|
||||
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
applescript@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/applescript/-/applescript-1.0.0.tgz#bb87af568cad034a4e48c4bdaf6067a3a2701317"
|
||||
integrity sha512-yvtNHdWvtbYEiIazXAdp/NY+BBb65/DAseqlNiJQjOx9DynuzOYDbVLBJvuc0ve0VL9x6B3OHF6eH52y9hCBtQ==
|
||||
|
||||
>>>>>>> 53e5d2938c050ead27fdc8883d58f75920d63923
|
||||
argparse@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue