setArrowShow(true)}
@@ -63,37 +70,45 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
className={styles.gallerySliderAnimationContainer}
>
{gameDetails.movies &&
- gameDetails.movies.map((video: SteamMovies, i: number) => (
+ gameDetails.movies.map((video: SteamMovies) => (
))}
{gameDetails.screenshots &&
- gameDetails.screenshots.map((image: SteamScreenshot, i: number) => (
-
- ))}
+ gameDetails.screenshots.map(
+ (image: SteamScreenshot, i: number) => (
+
+ )
+ )}
{arrowShow && (
<>
+
- {gameDetails.movies &&
- gameDetails.movies.map((video: SteamMovies, i: number) => (
+ {hasMovies &&
+ gameDetails.movies?.map((video: SteamMovies, i: number) => (
setMediaIndex(i)}
src={video.thumbnail}
className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i ? styles.gallerySliderMediaPreviewActive : ""}`}
diff --git a/src/renderer/src/pages/game-details/game-details.css.ts b/src/renderer/src/pages/game-details/game-details.css.ts
index 647fc0ec..72c5e4d3 100644
--- a/src/renderer/src/pages/game-details/game-details.css.ts
+++ b/src/renderer/src/pages/game-details/game-details.css.ts
@@ -79,94 +79,6 @@ export const descriptionContent = style({
height: "100%",
});
-export const gallerySliderContainer = style({
- padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
- width: "100%",
- display: "flex",
- flexDirection: "column",
- alignItems: "center",
-});
-
-export const gallerySliderMedia = style({
- width: "100%",
- height: "100%",
- display: "block",
- flexShrink: 0,
- flexGrow: 0,
- transition: "translate 300ms ease-in-out",
-});
-
-export const gallerySliderAnimationContainer = style({
- width: "100%",
- height: "100%",
- display: "flex",
- 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",
- overflowX: "auto",
- overflowY: "hidden",
- "@media": {
- "(min-width: 1280px)": {
- width: "60%",
- },
- },
- "::-webkit-scrollbar-thumb": {
- width: "20%"
- }
-});
-
-export const gallerySliderMediaPreview = style({
- cursor: "pointer",
- width: "20%",
- height: "20%",
- display: "block",
- flexShrink: 0,
- flexGrow: 0,
- opacity: 0.3,
- paddingRight: "5px",
- transition: "translate 300ms ease-in-out",
- ":hover": {
- opacity: 1,
- },
-});
-
-export const gallerySliderMediaPreviewActive = style({
- opacity: 1,
-});
-
-export const gallerySliderButton = style({
- all: "unset",
- display: "block",
- position: "absolute",
- top: 0,
- bottom: 0,
- padding: "1rem",
- cursor: "pointer",
- transition: "background-color 100ms ease-in-out",
- ":hover": {
- backgroundColor: "rgb(0,0,0, 0.2)",
- },
-});
-
-export const gallerySliderIcons = style({
- stroke: "white",
- fill: "black",
- width: "2rem",
- height: "2rem",
-});
-
export const contentSidebar = style({
borderLeft: `solid 1px ${vars.color.border};`,
width: "100%",
diff --git a/src/renderer/src/pages/game-details/game-details.tsx b/src/renderer/src/pages/game-details/game-details.tsx
index 215f9b1f..02c880d8 100644
--- a/src/renderer/src/pages/game-details/game-details.tsx
+++ b/src/renderer/src/pages/game-details/game-details.tsx
@@ -68,7 +68,7 @@ export function GameDetails() {
const dispatch = useAppDispatch();
- const { game: gameDownloading, startDownload, isDownloading } = useDownload();
+ const { game: gameDownloading, startDownload } = useDownload();
const heroImage = steamUrlBuilder.libraryHero(objectID!);
@@ -122,7 +122,7 @@ export function GameDetails() {
setHowLongToBeat({ isLoading: true, data: null });
}, [getGame, dispatch, navigate, objectID, i18n.language]);
- const isGameDownloading = isDownloading && gameDownloading?.id === game?.id;
+ const isGameDownloading = gameDownloading?.id === game?.id;
useEffect(() => {
if (isGameDownloading)
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx b/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx
index 4c4b9a5a..7638f53e 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx
+++ b/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx
@@ -1,3 +1,4 @@
+import { GameStatus, GameStatusHelper } from "@shared";
import { NoEntryIcon, PlusCircleIcon } from "@primer/octicons-react";
import { Button } from "@renderer/components";
@@ -49,7 +50,7 @@ export function HeroPanelActions({
filters: [
{
name: "Game executable",
- extensions: window.electron.platform === "win32" ? ["exe"] : [],
+ extensions: ["exe"],
},
],
})
@@ -152,7 +153,7 @@ export function HeroPanelActions({
);
}
- if (game?.status === "paused") {
+ if (game?.status === GameStatus.Paused) {
return (
<>