fix: Fixed romm login, now uses token
feat: Moved romm to internal plugin fix: Made focusing and navigation more reliable fix: Loading errors on first time launch
This commit is contained in:
parent
7c10f4e4c2
commit
816d50ae4d
GPG key ID:
7611A451D2A5D37A
81 changed files with 1659 additions and 1097 deletions
|
|
@ -119,14 +119,14 @@ export function AnimatedBackground (data: {
|
|||
|
||||
>
|
||||
{!data.scrolling && <div className='absolute top-0 left-0 right-0 bottom-0 overflow-hidden'>
|
||||
<div className='absolute w-full h-full bg-radial from-base-100 to-base-300 -z-5'></div>
|
||||
{blur && finalLastBackgroundUrl && <img className='absolute w-full h-full object-cover object-center -z-4 mask-radial-at-center mask-radial-from-0 mask-radial-farthest-corner' src={finalLastBackgroundUrl.href}></img>}
|
||||
{finalBackgroundUrl ? <img
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
key={finalBackgroundUrl?.href}
|
||||
className={'absolute w-full h-full object-cover object-center opacity-0 -z-3 mask-radial-from-0'}
|
||||
src={finalBackgroundUrl?.href}
|
||||
onLoad={e => e.currentTarget.classList.add(blur ? "animate-bg-zoom-big" : "animate-bg-zoom")}
|
||||
onLoad={e => e.currentTarget.classList.add("animate-bg-zoom")}
|
||||
></img> : <><div className='mobile:hidden bg-gradient'></div></>}
|
||||
<div className='absolute top-0 left-0 right-0 bottom-0 bg-linear-to-b from-base-100/60 to-base-300/80 -z-2' />
|
||||
<div className='mobile:hidden bg-noise'></div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { doesFocusableExist, getCurrentFocusKey } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import { doesFocusableExist, FocusDetails, getCurrentFocusKey } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export function AutoFocus (data: {
|
||||
parentKey?: string;
|
||||
focus: () => void;
|
||||
focus: (focusDetails?: FocusDetails | undefined) => void;
|
||||
force?: boolean;
|
||||
delay?: number;
|
||||
})
|
||||
|
|
@ -16,10 +16,10 @@ export function AutoFocus (data: {
|
|||
{
|
||||
if (data.delay)
|
||||
{
|
||||
delayTimeout = window.setTimeout(() => data.focus(), data.delay);
|
||||
delayTimeout = window.setTimeout(() => data.focus({ instant: true }), data.delay);
|
||||
} else
|
||||
{
|
||||
data.focus();
|
||||
data.focus({ instant: true });
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import useActiveControl from "../scripts/gamepads";
|
|||
export function GameCardSkeleton ()
|
||||
{
|
||||
return (
|
||||
<li className="game-card bg-base-100/80 p-4 z-0 mx-2 max-h-(--game-card-height) min-w-(--game-card-width) w-(--game-card-width)">
|
||||
<li className="game-card bg-base-100/80 p-4 z-0 mx-2 min-w-(--game-card-width) w-(--game-card-width)">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="skeleton h-60 w-full opacity-40"></div>
|
||||
<div className="skeleton h-4 w-full opacity-40"></div>
|
||||
|
|
@ -22,7 +22,6 @@ export type GameCardFocusHandler = (id: string, node: HTMLElement, details: Focu
|
|||
export interface GameCardParams
|
||||
{
|
||||
title: string;
|
||||
type?: string;
|
||||
subtitle: string | JSX.Element;
|
||||
preview?: string | JSX.Element | ((p: { focused: boolean; }) => JSX.Element);
|
||||
srcset?: string;
|
||||
|
|
@ -43,7 +42,7 @@ export default function CardElement (data: GameCardParams & InteractParams)
|
|||
focusKey: data.focusKey,
|
||||
onFocus: (l, p, details) => data.onFocus?.(data.id, ref.current as any, details),
|
||||
onEnterPress: () => data.onAction?.(),
|
||||
onBlur: () => data.onBlur?.(data.id)
|
||||
onBlur: () => data.onBlur?.(data.id),
|
||||
});
|
||||
const { isPointer } = useActiveControl();
|
||||
|
||||
|
|
@ -76,7 +75,7 @@ export default function CardElement (data: GameCardParams & InteractParams)
|
|||
classNames({ "h-full": typeof data.preview === "string" })
|
||||
)}>
|
||||
{typeof data.preview === "string" ? (
|
||||
<img draggable={false} srcSet={data.srcset} className={classNames("object-cover w-full h-full", data.previewClassName, { "animate-rotate-small": focused && !isPointer })} src={data.preview} loading="lazy" decoding="async" ></img>
|
||||
<img draggable={false} srcSet={data.srcset} className={classNames("object-cover aspect-3/4", data.previewClassName, { "animate-rotate-small": focused && !isPointer })} src={data.preview} ></img>
|
||||
) : (
|
||||
typeof data.preview === 'function' ? data.preview({ focused }) : data.preview
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,42 @@ export interface GameMetaExtra extends GameMeta
|
|||
focusKey: string;
|
||||
}
|
||||
|
||||
function LocalCardElement (data: { game: GameMetaExtra, i: number; } & FocusParams & InteractParams)
|
||||
{
|
||||
let preview: GameCardParams['preview'] = data.game.preview;
|
||||
if (!preview && data.game.previewUrl)
|
||||
{
|
||||
preview = data.game.previewUrl;
|
||||
}
|
||||
|
||||
const handleAction = () =>
|
||||
{
|
||||
data.game.onSelect?.();
|
||||
data.onAction?.();
|
||||
};
|
||||
useShortcuts(data.game.focusKey, () => [{ label: "Select", button: GamePadButtonCode.A, action: handleAction }]);
|
||||
|
||||
return (
|
||||
<CardElement
|
||||
index={data.i}
|
||||
focusKey={data.game.focusKey}
|
||||
data-index={data.i}
|
||||
title={data.game.title}
|
||||
subtitle={data.game.subtitle ?? ""}
|
||||
srcset={data.game.previewSrcset}
|
||||
onFocus={(id, node, details) =>
|
||||
{
|
||||
data.game.onFocus?.(details);
|
||||
data.onFocus?.(id, node, details);
|
||||
}}
|
||||
onAction={handleAction}
|
||||
preview={preview}
|
||||
badges={data.game.badges}
|
||||
id={data.game.id}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardList (data: {
|
||||
id: string;
|
||||
type?: string;
|
||||
|
|
@ -30,46 +66,10 @@ export function CardList (data: {
|
|||
{
|
||||
const { ref, focusKey } = useFocusable({
|
||||
focusKey: data.id,
|
||||
forceFocus: true,
|
||||
autoRestoreFocus: true
|
||||
});
|
||||
|
||||
function BuildCard (g: GameMetaExtra, i: number)
|
||||
{
|
||||
let preview: GameCardParams['preview'] = g.preview;
|
||||
if (!preview && g.previewUrl)
|
||||
{
|
||||
preview = g.previewUrl;
|
||||
}
|
||||
|
||||
const handleAction = () =>
|
||||
{
|
||||
g.onSelect?.();
|
||||
data.onSelectGame?.(g.id);
|
||||
};
|
||||
useShortcuts(g.focusKey, () => [{ label: "Select", button: GamePadButtonCode.A, action: handleAction }]);
|
||||
|
||||
return (
|
||||
<CardElement
|
||||
key={g.id}
|
||||
type={data.type}
|
||||
index={i}
|
||||
focusKey={g.focusKey}
|
||||
data-index={i}
|
||||
title={g.title}
|
||||
subtitle={g.subtitle ?? ""}
|
||||
srcset={g.previewSrcset}
|
||||
onFocus={(id, node, details) =>
|
||||
{
|
||||
g.onFocus?.(details);
|
||||
data.onGameFocus?.(id, node, details);
|
||||
}}
|
||||
onAction={handleAction}
|
||||
preview={preview}
|
||||
badges={g.badges}
|
||||
id={g.id}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ul
|
||||
title="Games"
|
||||
|
|
@ -88,7 +88,8 @@ export function CardList (data: {
|
|||
}}
|
||||
>
|
||||
<FocusContext.Provider value={focusKey}>
|
||||
{data.games.map(BuildCard)}
|
||||
{data.games.map((g, i) => <LocalCardElement
|
||||
key={g.id} onFocus={data.onGameFocus} game={g} onAction={() => data.onSelectGame?.(g.id)} i={i} />)}
|
||||
{data.finalElement}
|
||||
</FocusContext.Provider>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { RPC_URL } from "@/shared/constants";
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { CardList, GameMetaExtra } from "./CardList";
|
||||
import { GameCardFocusHandler } from "./CardElement";
|
||||
import { getCollectionsQuery } from "@queries/romm";
|
||||
import { Router } from "..";
|
||||
|
||||
export default function CollectionList (data: {
|
||||
id: string,
|
||||
|
|
@ -14,12 +14,16 @@ export default function CollectionList (data: {
|
|||
saveChildFocus?: 'session' | 'local';
|
||||
})
|
||||
{
|
||||
const navigate = useNavigate();
|
||||
const { data: collections } = useSuspenseQuery(getCollectionsQuery());
|
||||
const { data: collections } = useSuspenseQuery(getCollectionsQuery);
|
||||
|
||||
const handleDefaultSelect = (id: string) =>
|
||||
const handleDefaultSelect = (gameId: string) =>
|
||||
{
|
||||
navigate({ to: `/collection/${id}` });
|
||||
const [source, id] = gameId.split('@');
|
||||
Router.navigate({
|
||||
to: `/collection/$source/$id`,
|
||||
params: { source, id },
|
||||
search: { countHint: collections.find(c => c.id.id === id && c.id.source === source)?.game_count }
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -28,16 +32,16 @@ export default function CollectionList (data: {
|
|||
id={data.id}
|
||||
className={data.className}
|
||||
saveChildFocus={data.saveChildFocus}
|
||||
games={collections.sort((a, b) => Date.parse(a.updated_at) - Date.parse(b.updated_at))
|
||||
games={collections
|
||||
.map((g) => ({
|
||||
id: String(g.id),
|
||||
id: `${g.id.source}@${g.id.id}`,
|
||||
title: g.name,
|
||||
focusKey: `collection-${g.id}`,
|
||||
subtitle: g.owner_username,
|
||||
previewUrl: `${RPC_URL(__HOST__)}/api/romm/${g.path_covers_small[0]}`,
|
||||
subtitle: "",
|
||||
previewUrl: `${RPC_URL(__HOST__)}${g.path_platform_cover}`,
|
||||
badges: [
|
||||
<span className="text-lg font-bold badge bg-base-100 shadow-md shadow-base-300 h-8 rounded-full mr-2">
|
||||
{g.rom_count}
|
||||
{g.game_count}
|
||||
</span>
|
||||
],
|
||||
} satisfies GameMetaExtra))}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { AnimatedBackground } from './AnimatedBackground';
|
||||
import { FocusContext, setFocus, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
|
||||
import { HeaderUI } from './Header';
|
||||
import { HeaderUI, StickyHeaderUI } from './Header';
|
||||
import { GameList } from './GameList';
|
||||
import { Search, Settings2 } from 'lucide-react';
|
||||
import { JSX, Suspense, useEffect } from 'react';
|
||||
|
|
@ -9,77 +9,82 @@ import { AutoFocus } from './AutoFocus';
|
|||
import { GamePadButtonCode, useShortcutContext, useShortcuts } from '../scripts/shortcuts';
|
||||
import { GameListFilterType } from '@/shared/constants';
|
||||
import { GameCardFocusHandler } from './CardElement';
|
||||
import { HandleGoBack } from '../scripts/utils';
|
||||
import { HandleGoBack, useStickyDataAttr } from '../scripts/utils';
|
||||
import LoadingCardList from './LoadingCardList';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { gameQuery } from '../scripts/queries/romm';
|
||||
|
||||
export interface CollectionsDetailParams
|
||||
{
|
||||
id?: string;
|
||||
setBackground?: (url: string) => void;
|
||||
filters?: GameListFilterType;
|
||||
builder?: () => Promise<{ filter?: GameListFilterType, title?: JSX.Element; }>;
|
||||
headerTitle?: JSX.Element;
|
||||
title?: JSX.Element;
|
||||
footer?: JSX.Element;
|
||||
focus?: string;
|
||||
countHit?: number;
|
||||
}
|
||||
|
||||
export function CollectionsDetail (data: CollectionsDetailParams)
|
||||
{
|
||||
const focusKey = `game-list-${data.id}-${data.filters ? Object.values(data.filters).map(f => String(f)).join(",") : ''}`;
|
||||
const builtData = useQuery({
|
||||
queryKey: ['filter', data.id], queryFn: async () =>
|
||||
{
|
||||
return data.builder?.() ?? { filter: data.filters, title: data.title };
|
||||
}
|
||||
});
|
||||
const queryClient = useQueryClient();
|
||||
const focusKey = `game-list-${data.id}-${data?.filters ? Object.values(data?.filters).map(f => String(f)).join(",") : ''}`;
|
||||
const { ref, focusSelf } = useFocusable({
|
||||
focusKey,
|
||||
preferredChildFocusKey: `${focusKey}-list`,
|
||||
preferredChildFocusKey: `${focusKey}-list`
|
||||
});
|
||||
|
||||
useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
|
||||
const { shortcuts } = useShortcutContext();
|
||||
|
||||
const handleScroll: GameCardFocusHandler = (id, node, details) =>
|
||||
const handleScroll: GameCardFocusHandler = (cardId, node, details) =>
|
||||
{
|
||||
|
||||
const [source, id] = cardId.split('@');
|
||||
queryClient.prefetchQuery(gameQuery(source, id));
|
||||
|
||||
if (!(details.nativeEvent instanceof MouseEvent))
|
||||
{
|
||||
node.scrollIntoView({ block: 'center', behavior: details.instant ? 'instant' : 'smooth' });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if (data.focus)
|
||||
setFocus(data.focus, { instant: true });
|
||||
}, [data.focus]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
return () => setFocus('');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<FocusContext value={focusKey}>
|
||||
<AnimatedBackground animated ref={ref} backgroundKey="home-background" className='flex'>
|
||||
<div className="px-3 w-full pt-2">
|
||||
<HeaderUI title={data.headerTitle} buttons={[{ id: "search", icon: <Search /> }, { id: "filter", icon: <Settings2 /> }]} />
|
||||
</div>
|
||||
<div className="w-full grow mt-4 rounded-2xl px-2 overflow-y-scroll justify-center mask-alpha sm:portrait:mask-t-from-transparent md:landscape:mask-t-from-transparent mask-t-to-20 mask-t-to-black">
|
||||
<div className="h-fit w-full md:px-6 pt-4 pb-32">
|
||||
{data.title}
|
||||
<Suspense>
|
||||
<div ref={ref} className='absolute w-screen h-screen overflow-y-scroll'>
|
||||
<StickyHeaderUI title={data.headerTitle} buttons={[{ id: "search", icon: <Search /> }, { id: "filter", icon: <Settings2 /> }]} ref={ref} />
|
||||
<div className="w-full grow rounded-2xl justify-center mask-alpha sm:portrait:mask-t-from-transparent md:landscape:mask-t-from-transparent mask-t-to-20 mask-t-to-black">
|
||||
<div className="relative h-fit w-full md:px-6 pt-4 pb-32">
|
||||
{builtData.data?.filter && data.title}
|
||||
{(builtData.data?.filter || (!data.filters && !data.builder)) && <Suspense fallback={<LoadingCardList grid placeholderCount={data.countHit ?? 8} id={`${focusKey}-list`} />}>
|
||||
<GameList
|
||||
grid
|
||||
filters={data.filters}
|
||||
filters={builtData.data?.filter}
|
||||
onFocus={handleScroll}
|
||||
id={`${focusKey}-list`}>
|
||||
|
||||
</GameList>
|
||||
<AutoFocus focus={focusSelf} />
|
||||
</Suspense>
|
||||
<AutoFocus parentKey={focusKey} focus={focusSelf} />
|
||||
</Suspense>}
|
||||
<div className='absolute top-0 bottom-0 left-0 right-0 bg-radial from-base-100 to-base-300'></div>
|
||||
<div className='mobile:hidden bg-noise z-1'></div>
|
||||
<div className='mobile:hidden bg-dots z-1'></div>
|
||||
</div>
|
||||
</div>
|
||||
<footer className="px-2 pb-2 absolute bottom-0 w-full h-12 flex items-center justify-between">
|
||||
<footer className="px-2 pb-2 fixed bottom-0 w-full h-12 flex items-center justify-between">
|
||||
<div>
|
||||
{data.footer}
|
||||
</div>
|
||||
<Shortcuts shortcuts={shortcuts} />
|
||||
</footer>
|
||||
</AnimatedBackground>
|
||||
</div>
|
||||
</FocusContext>
|
||||
);
|
||||
}
|
||||
|
|
@ -10,8 +10,9 @@ import { FOCUS_KEYS } from "../scripts/types";
|
|||
export function ContextList (data: { options?: DialogEntry[]; className?: string; showCloseButton?: boolean; })
|
||||
{
|
||||
const context = useContext(ContextDialogContext);
|
||||
return <ul className={twMerge("list", data.className)}>
|
||||
return <ul className={twMerge("list gap-1", data.className)}>
|
||||
{data.options?.map(o => <OptionElement className="list-row" key={o.id} {...o} />)}
|
||||
<div className="divider m-0 "></div>
|
||||
{data.showCloseButton !== false && <OptionElement className="list-row" type='accent' icon={<X />} action={() => context.close()} id="close-context-dialog" content="Close" />}
|
||||
</ul>;
|
||||
}
|
||||
|
|
@ -32,12 +33,12 @@ export function OptionElement (data: DialogEntry & { onFocus?: () => void; class
|
|||
trackChildren: typeof data.content !== 'string'
|
||||
});
|
||||
const colors = {
|
||||
primary: "active:bg-primary control-pointer:hover:bg-primary control-pointer:hover:text-primary-content focused:bg-primary focused:text-primary-content in-focused:bg-primary in-focused:text-primary-content",
|
||||
secondary: "active:bg-secondary control-pointer:hover:bg-secondary control-pointer:hover:text-secondary-content focused:bg-secondary focused:text-secondary-content in-focused:bg-secondary in-focused:text-secondary-content",
|
||||
accent: "active:bg-accent control-pointer:hover:bg-accent control-pointer:hover:text-accent-content focused:bg-accent focused:text-accent-content in-focused:bg-accent in-focused:text-accent-content",
|
||||
info: "active:bg-info control-pointer:hover:bg-info control-pointer:hover:text-info-content focused:bg-info focused:text-info-content in-focused:bg-info in-focused:text-info-content",
|
||||
warning: "active:bg-warning control-pointer:hover:bg-warning control-pointer:hover:text-warning-content focused:bg-warning focused:text-warning-content in-focused:bg-warning in-focused:text-warning-content",
|
||||
error: "active:bg-error control-pointer:hover:bg-error control-pointer:hover:text-error-content focused:bg-error focused:text-error-content in-focused:bg-error in-focused:text-error-content"
|
||||
primary: "active:bg-primary active:text-primary-content focusable-primary in-data-[selected=true]:bg-primary in-data-[selected=true]:text-primary-content",
|
||||
secondary: "active:bg-secondary active:text-secondary-content focusable-secondary in-data-[selected=true]:bg-secondary in-data-[selected=true]:text-secondary-content",
|
||||
accent: "active:bg-accent active:text-accent-content focusable-accent in-data-[selected=true]:bg-accent in-data-[selected=true]:text-accent-content",
|
||||
info: "active:bg-info active:text-info-content focusable-info in-data-[selected=true]:bg-info in-data-[selected=true]:text-info-content",
|
||||
warning: "active:bg-warning active:text-warning-content focusable-warning in-data-[selected=true]:bg-warning in-data-[selected=true]:text-warning-content",
|
||||
error: "active:bg-error active:text-error-content focusable-error in-data-[selected=true]:bg-error in-data-[selected=true]:text-error-content"
|
||||
};
|
||||
if (data.shortcuts)
|
||||
{
|
||||
|
|
@ -45,13 +46,14 @@ export function OptionElement (data: DialogEntry & { onFocus?: () => void; class
|
|||
}
|
||||
return <li ref={ref}
|
||||
onClick={handleAction}
|
||||
data-selected={data.selected}
|
||||
className={
|
||||
twMerge("flex cursor-pointer sm:text-sm md:text-base")}>
|
||||
twMerge("flex cursor-pointer sm:text-sm md:text-base group-focusable scroll-m-4")}>
|
||||
<FocusContext value={focusKey}>
|
||||
<div className={twMerge("flex w-full sm:h-12 md:h-14 items-center px-4 rounded-2xl transition-all gap-2 active:animate-scale in-focused:font-semibold",
|
||||
<div className={twMerge("flex bg-base-200 in-data-[selected=true]:border-4 in-focused:border-4 border-base-300 w-full sm:h-12 md:h-14 items-center px-4 rounded-2xl gap-2 in-focused:font-semibold focusable not-active:control-mouse:hover:bg-base-300 in-focused:z-100",
|
||||
data.className,
|
||||
colors[data.type],
|
||||
"active:bg-base-content! active:text-base-300! active:transition-none")}>
|
||||
"in-focused:bg-base-content in-focused:text-base-100")}>
|
||||
{data.icon}
|
||||
{data.content}
|
||||
</div>
|
||||
|
|
@ -65,6 +67,7 @@ export interface DialogEntry
|
|||
content: string | JSX.Element;
|
||||
icon?: string | JSX.Element;
|
||||
type: 'primary' | 'secondary' | 'accent' | 'info' | 'warning' | 'error';
|
||||
selected?: boolean;
|
||||
action?: (ctx: { close: () => void, focus: (focusDetails?: FocusDetails | undefined) => void; }) => void;
|
||||
shortcuts?: Shortcut[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { ContextList, DialogEntry } from "./ContextDialog";
|
|||
import { systemApi } from "../scripts/clientApi";
|
||||
import { useContext, useRef, useState } from "react";
|
||||
import path from "pathe";
|
||||
import { Check, Folder, FolderInput, FolderOutput, FolderPlus, HardDrive, Usb, X } from "lucide-react";
|
||||
import { Check, File, Folder, FolderInput, FolderOutput, FolderPlus, HardDrive, Usb, X } from "lucide-react";
|
||||
import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import { DirType } from "@/shared/constants";
|
||||
import classNames from "classnames";
|
||||
|
|
@ -44,13 +44,13 @@ function List (data: {
|
|||
{
|
||||
const fullPath = path.join(f.parentPath, f.name);
|
||||
const isDefaultPath = fullPath === startingPath;
|
||||
let icon = <Folder />;
|
||||
let icon = <Folder className="text-warning" />;
|
||||
if (isDefaultPath)
|
||||
{
|
||||
icon = <FolderInput />;
|
||||
icon = <FolderInput className="text-warning" />;
|
||||
} else if (!f.isDirectory)
|
||||
{
|
||||
icon = <></>;
|
||||
icon = <File />;
|
||||
}
|
||||
const shortcuts: Shortcut[] = [];
|
||||
let action: () => void;
|
||||
|
|
@ -201,7 +201,7 @@ function ListWithDrives (data: {
|
|||
<div className="divider divider-horizontal m-1"></div>
|
||||
</div>
|
||||
<div className="divider divider-horizontal m-0"></div>
|
||||
<div className="overflow-y-auto w-full">
|
||||
<div className="overflow-y-auto w-full p-2">
|
||||
<List
|
||||
id={`list-${data.id}`}
|
||||
dirs={data.files.filter(d =>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { GameMetaExtra, CardList } from "./CardList";
|
||||
import { GameListFilterType, RPC_URL } from "@shared/constants";
|
||||
import { DefaultRommStaleTime, GameListFilterType, RPC_URL } from "@shared/constants";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { HardDrive } from "lucide-react";
|
||||
import { JSX, useContext } from "react";
|
||||
|
|
@ -24,7 +24,7 @@ export interface GameListParams
|
|||
|
||||
export function GameList (data: GameListParams)
|
||||
{
|
||||
const games = useSuspenseQuery(allGamesQuery(data.filters));
|
||||
const games = useSuspenseQuery({ ...allGamesQuery(data.filters), staleTime: DefaultRommStaleTime });
|
||||
const navigator = useNavigate();
|
||||
const blur = useLocalSetting('backgroundBlur');
|
||||
const backgroundContext = useContext(AnimatedBackgroundContext);
|
||||
|
|
@ -80,7 +80,7 @@ export function GameList (data: GameListParams)
|
|||
platformUrl.searchParams.set('width', "64");
|
||||
|
||||
return {
|
||||
id: `game-${g.id.source}-${g.id.id}`,
|
||||
id: `${g.id.source}@${g.id.id}`,
|
||||
focusKey: g.slug ?? `game-${g.id}`,
|
||||
title: g.name ?? "",
|
||||
subtitle: (
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import
|
|||
Bell,
|
||||
Bluetooth,
|
||||
Clock,
|
||||
Plug,
|
||||
Settings,
|
||||
Wifi,
|
||||
WifiHigh,
|
||||
|
|
@ -21,16 +22,18 @@ import
|
|||
WifiZero,
|
||||
} from "lucide-react";
|
||||
import { RoundButton } from "./RoundButton";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { RPC_URL } from "../../shared/constants";
|
||||
import { JSX, RefObject, useEffect, useRef, useState } from "react";
|
||||
import { keepPreviousData, useQuery } from "@tanstack/react-query";
|
||||
import { RPC_URL, SystemInfoType } from "../../shared/constants";
|
||||
import { JSX, RefObject, useContext, useEffect, useRef, useState } from "react";
|
||||
import { systemApi } from "../scripts/clientApi";
|
||||
import { Router } from "..";
|
||||
import { useStickyDataAttr } from "../scripts/utils";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { TwitchIcon } from "../scripts/brandIcons";
|
||||
import { rommUserQuery } from "../scripts/queries/romm";
|
||||
import { rommLoggedInQuery, rommUserQuery } from "../scripts/queries/romm";
|
||||
import { twitchLoginVerificationQuery } from "../scripts/queries/settings";
|
||||
import { da } from "zod/v4/locales";
|
||||
import { SystemInfoContext } from "../scripts/contexts";
|
||||
|
||||
function HeaderAvatar (data: {
|
||||
id: string;
|
||||
|
|
@ -76,7 +79,7 @@ export interface HeaderAccount
|
|||
{
|
||||
id: string;
|
||||
preview?: string | JSX.Element;
|
||||
status?: "status-error" | "status-success" | "status-neutral";
|
||||
className?: string;
|
||||
type?: "base" | "primary" | "secondary" | "accent";
|
||||
locked?: boolean;
|
||||
action?: () => void;
|
||||
|
|
@ -128,26 +131,19 @@ function ClockStatus ()
|
|||
|
||||
function BluetoothStatus ()
|
||||
{
|
||||
const { data: bluetooth } = useQuery({
|
||||
queryKey: ['wifi'],
|
||||
queryFn: () => systemApi.api.system.info.bluetooth.get().then(d => d.data),
|
||||
refetchInterval: 3000
|
||||
});
|
||||
return bluetooth && bluetooth.find(b => b.connected) && <div>
|
||||
const systemContext = useContext(SystemInfoContext);
|
||||
|
||||
return systemContext?.bluetoothDevices.find(b => b.connected) && <div>
|
||||
<Bluetooth className="w-6 h-6" />
|
||||
</div>;
|
||||
}
|
||||
|
||||
function WiFiStatus ()
|
||||
{
|
||||
const { data: wifi, isLoading } = useQuery({
|
||||
queryKey: ['wifi'],
|
||||
queryFn: () => systemApi.api.system.info.wifi.get().then(d => d.data),
|
||||
refetchInterval: 3000
|
||||
});
|
||||
const systemContext = useContext(SystemInfoContext);
|
||||
|
||||
return (!!wifi && wifi.length > 0) || isLoading ? <div>
|
||||
{wifi?.map(w =>
|
||||
return systemContext && systemContext.wifiConnections.length > 0 ? <div>
|
||||
{systemContext.wifiConnections.map(w =>
|
||||
{
|
||||
const className = "w-6 h-6";
|
||||
let icon = <Wifi className={className} />;
|
||||
|
|
@ -170,46 +166,44 @@ function WiFiStatus ()
|
|||
|
||||
function BatteryStatus ()
|
||||
{
|
||||
const { data: battery } = useQuery({
|
||||
queryKey: ['battery'],
|
||||
queryFn: () => systemApi.api.system.info.battery.get().then(d => d.data),
|
||||
refetchInterval: 3000
|
||||
});
|
||||
const batteryClassName = "w-6 h-6";
|
||||
const systemContext = useContext(SystemInfoContext);
|
||||
|
||||
const batteryClassName = "md:size-10 sm:size-6";
|
||||
let batteryIcon = <BatteryFull className={batteryClassName} />;
|
||||
if (battery?.isCharging || battery?.acConnected)
|
||||
if (systemContext)
|
||||
{
|
||||
batteryIcon = <BatteryCharging className={batteryClassName} />;
|
||||
} else if (battery?.percent)
|
||||
{
|
||||
if (battery.percent < 5)
|
||||
if (systemContext.battery.isCharging || systemContext.battery.acConnected)
|
||||
{
|
||||
batteryIcon = <BatteryWarning className={batteryClassName} />;
|
||||
}
|
||||
else if (battery.percent < 15)
|
||||
batteryIcon = <BatteryCharging className={batteryClassName} />;
|
||||
} else if (systemContext.battery.percent)
|
||||
{
|
||||
batteryIcon = <BatteryLow className={batteryClassName} />;
|
||||
} else if (battery.percent < 50)
|
||||
{
|
||||
batteryIcon = <BatteryMedium className={batteryClassName} />;
|
||||
if (systemContext.battery.percent < 5)
|
||||
{
|
||||
batteryIcon = <BatteryWarning className={batteryClassName} />;
|
||||
}
|
||||
else if (systemContext.battery.percent < 15)
|
||||
{
|
||||
batteryIcon = <BatteryLow className={batteryClassName} />;
|
||||
} else if (systemContext.battery.percent < 50)
|
||||
{
|
||||
batteryIcon = <BatteryMedium className={batteryClassName} />;
|
||||
}
|
||||
}
|
||||
}
|
||||
return !!battery && battery.hasBattery && <div className="flex gap-2 items-center">
|
||||
return !!systemContext?.battery.hasBattery && <div className="flex gap-2 items-center">
|
||||
{batteryIcon}
|
||||
<span className="font-semibold">{battery?.percent} %</span>
|
||||
<span className="font-semibold">{systemContext.battery?.percent} %</span>
|
||||
</div>;
|
||||
}
|
||||
|
||||
export function HeaderAccounts (data: { accounts?: HeaderAccount[]; })
|
||||
{
|
||||
const rommUser = useQuery({
|
||||
...rommUserQuery(),
|
||||
refetchOnWindowFocus: false,
|
||||
retry: 1
|
||||
});
|
||||
const rommUser = useQuery({ ...rommLoggedInQuery, placeholderData: keepPreviousData });
|
||||
const twitchStatus = useQuery({
|
||||
...twitchLoginVerificationQuery, refetchOnWindowFocus: false,
|
||||
retry: 1
|
||||
...twitchLoginVerificationQuery,
|
||||
refetchOnWindowFocus: false,
|
||||
retry: 1,
|
||||
placeholderData: keepPreviousData
|
||||
});
|
||||
|
||||
const { ref } = useFocusable({ focusKey: 'accounts' });
|
||||
|
|
@ -217,15 +211,15 @@ export function HeaderAccounts (data: { accounts?: HeaderAccount[]; })
|
|||
const accounts: HeaderAccount[] = [];
|
||||
if (data.accounts) accounts.push(...data.accounts);
|
||||
|
||||
if (rommUser.data)
|
||||
if (rommUser.data?.hasLogin || rommUser.isError)
|
||||
{
|
||||
accounts.push({
|
||||
id: 'romm', preview: `${RPC_URL(__HOST__)}/api/romm/assets/logos/romm_logo_xbox_one_square.svg`,
|
||||
id: 'romm', preview: `https://romm.app/_ipx/q_80/images/blocks/logos/romm.svg`,
|
||||
action: () =>
|
||||
{
|
||||
Router.navigate({ to: '/settings/accounts', search: { focus: 'rommAddress' } });
|
||||
},
|
||||
status: rommUser.data ? "status-success" : 'status-error',
|
||||
className: rommUser.data?.hasLogin && !rommUser.isError ? undefined : "border-error",
|
||||
type: 'secondary'
|
||||
});
|
||||
}
|
||||
|
|
@ -248,6 +242,7 @@ export function HeaderAccounts (data: { accounts?: HeaderAccount[]; })
|
|||
id={`account-${a.id}`}
|
||||
locked={a.locked}
|
||||
preview={a.preview}
|
||||
className={a.className}
|
||||
onSelect={a.action}
|
||||
/>)}
|
||||
</div>;
|
||||
|
|
@ -303,7 +298,7 @@ export function HeaderUI (data: HeaderUIParams)
|
|||
>
|
||||
<HeaderAccounts accounts={data.accounts} />
|
||||
{data.title}
|
||||
<HeaderStatusBar buttonElements={data.buttonElements} buttons={[...data.buttons ?? [], { icon: <Settings />, id: "settings", action: goToSettings, external: true }]} />
|
||||
<HeaderStatusBar key={"header-status-bar"} buttonElements={data.buttonElements} buttons={[...data.buttons ?? [], { icon: <Settings />, id: "settings", action: goToSettings, external: true }]} />
|
||||
</header>
|
||||
</FocusContext.Provider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import { FOCUS_KEYS } from "../scripts/types";
|
||||
import { useIntersectionObserver } from "usehooks-ts";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function LoadMoreButton (data: { isFetching: boolean; lastId?: FrontEndId; } & FocusParams & InteractParams)
|
||||
{
|
||||
|
|
@ -17,7 +18,11 @@ export default function LoadMoreButton (data: { isFetching: boolean; lastId?: Fr
|
|||
onEnterPress: handleAction
|
||||
});
|
||||
|
||||
|
||||
|
||||
const { ref: intersct } = useIntersectionObserver({
|
||||
initialIsIntersecting: true,
|
||||
rootMargin: "20%",
|
||||
onChange: (isIntersecting, entry) =>
|
||||
{
|
||||
if (isIntersecting)
|
||||
|
|
|
|||
|
|
@ -1,15 +1,27 @@
|
|||
import classNames from 'classnames';
|
||||
import { GameCardSkeleton } from './CardElement';
|
||||
import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import CardElement from './CardElement';
|
||||
|
||||
export default function LoadingCardList (data: { placeholderCount: number, grid?: boolean; })
|
||||
|
||||
export default function LoadingCardList (data: { id: string, placeholderCount: number, grid?: boolean; className?: string; })
|
||||
{
|
||||
|
||||
const { ref, focusKey } = useFocusable({
|
||||
focusKey: data.id,
|
||||
forceFocus: true,
|
||||
autoRestoreFocus: true
|
||||
});
|
||||
|
||||
return (
|
||||
<ul
|
||||
ref={ref}
|
||||
title="Games"
|
||||
id={`card-list-placeholder`}
|
||||
save-child-focus="session"
|
||||
className={classNames("my-6 items-center justify-center-safe h-(--game-card-height) ",
|
||||
data.grid ? "card-grid gap-5" : 'card-list gap-6'
|
||||
className={twMerge("items-center justify-center-safe h-full",
|
||||
data.grid ? "grid h-fit sm:gap-2 md:gap-5 auto-rows-min grid-cols-[repeat(auto-fill,var(--game-card-width))]" :
|
||||
'landscape:grid landscape:grid-flow-col landscape:auto-cols-min auto-rows-[1fr] sm:gap-2 md:gap-4 portrait:grid portrait:auto-rows-min portrait:grid-cols-[repeat(auto-fill,var(--game-card-width))] *:portrait:aspect-8/10 *:landscape:aspect-8/12 sm:landscape:max-h-84 md:max-h-128!',
|
||||
data.className
|
||||
)}
|
||||
onKeyDown={(e) =>
|
||||
{
|
||||
|
|
@ -18,7 +30,28 @@ export default function LoadingCardList (data: { placeholderCount: number, grid?
|
|||
}}
|
||||
style={{ scrollbarWidth: "none" }}
|
||||
>
|
||||
{new Array(data.placeholderCount).fill(1).map((p, i) => <GameCardSkeleton key={i} />)}
|
||||
<FocusContext.Provider value={focusKey}>
|
||||
{new Array(data.placeholderCount).fill(1).map((g, i) =>
|
||||
{
|
||||
return <CardElement
|
||||
key={i}
|
||||
index={i}
|
||||
focusKey={`loading-card-${i}`}
|
||||
data-index={i}
|
||||
title={""}
|
||||
subtitle={""}
|
||||
onFocus={(id, node, details) =>
|
||||
{
|
||||
|
||||
}}
|
||||
preview={<div className='flex justify-center items-center portrait:aspect-8/10 landscape:aspect-8/12'>
|
||||
<span className="loading loading-spinner loading-xl"></span>
|
||||
</div>}
|
||||
id={`loading-card-${i}`}
|
||||
/>;
|
||||
})}
|
||||
</FocusContext.Provider>
|
||||
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export function PlatformsList (data: {
|
|||
|
||||
const handleDefaultSelect = (source: string, id: string) =>
|
||||
{
|
||||
navigate({ to: `/platform/${source}/${id}` });
|
||||
navigate({ to: `/platform/$source/$id`, params: { source, id }, search: { countHint: platforms.find(p => p.id.id === id && p.id.source === source)?.game_count } });
|
||||
};
|
||||
|
||||
const platformsMapped = useMemo(() => platforms.sort((a, b) => a.updated_at.getTime() - b.updated_at.getTime())
|
||||
|
|
|
|||
|
|
@ -34,10 +34,10 @@ export default function StatList (data: {
|
|||
let content: any = undefined;
|
||||
if (s.content instanceof Array)
|
||||
{
|
||||
content = <div key={`label-items-${i}`} className="flex flex-wrap gap-2">{s.content.map((c, ci) => <span key={`label-items-${i}-${ci}`} className={twMerge("rounded-full bg-base-200 px-3 py-1", data.elementClassName)}>{c}</span>)}</div>;
|
||||
content = <div key={`label-items-${i}`} className="flex flex-wrap gap-2">{s.content.map((c, ci) => <span key={`label-items-${i}-${ci}`} className={twMerge("rounded-3xl bg-base-200 px-3 py-1", data.elementClassName)}>{c}</span>)}</div>;
|
||||
} else
|
||||
{
|
||||
content = <div key={`label-element-${i}`} className={twMerge("flex gap-2 rounded-full bg-base-200 px-3 py-1", data.elementClassName)}>{s.icon}{s.content}</div>;
|
||||
content = <div key={`label-element-${i}`} className={twMerge("flex gap-2 rounded-3xl bg-base-200 px-3 py-1", data.elementClassName)}>{s.icon}{s.content}</div>;
|
||||
}
|
||||
const element = <>
|
||||
<Label id={`${data.id}-label-${i}`} key={`label-${i}`} label={s.label} />
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export default function ActionButton (data: {
|
|||
primary: "bg-primary text-primary-content focused:bg-base-content focused:text-base-300 focusable focusable-primary",
|
||||
base: " text-base-content border-dashed border-base-content/20 border-2 focused:bg-base-content focused:text-base-300 focusable focusable-primary",
|
||||
accent: "bg-accent text-accent-content focusable focusable-primary focusable:bg-base-content focusable:text-base-300",
|
||||
error: "bg-error text-error-content focused:bg-error focused:text-error-content",
|
||||
error: "bg-error text-error-content focused:bg-error focused:text-error-content focusable focusable-primary",
|
||||
};
|
||||
return (
|
||||
<div className="tooltip tooltip-accent tooltip-right" data-tip={data.tooltip}>
|
||||
|
|
|
|||
|
|
@ -28,13 +28,13 @@ function AchievementsInfo (data: { game: FrontEndGameTypeDetailed; } & InteractP
|
|||
</ActionButton>;
|
||||
}
|
||||
|
||||
export default function ActionButtons (data: { game: FrontEndGameTypeDetailed, source: string, id: string; })
|
||||
export default function ActionButtons (data: { game?: FrontEndGameTypeDetailed, source: string, id: string; })
|
||||
{
|
||||
const [, setDetailsSection] = useLocalStorage('details-section', 'screenshots');
|
||||
|
||||
const { ref, focusKey, hasFocusedChild } = useFocusable({ focusKey: 'actions', trackChildren: true });
|
||||
const { ref, focusKey, hasFocusedChild } = useFocusable({ focusKey: 'actions', forceFocus: true, trackChildren: true, preferredChildFocusKey: 'mainAction' });
|
||||
const deleteMutation = useMutation({
|
||||
...deleteGameMutation(data.game.id),
|
||||
...deleteGameMutation({ id: data.id, source: data.source }),
|
||||
onSuccess: () =>
|
||||
{
|
||||
location.reload();
|
||||
|
|
@ -47,7 +47,7 @@ export default function ActionButtons (data: { game: FrontEndGameTypeDetailed, s
|
|||
});
|
||||
|
||||
const contextOptions: DialogEntry[] = [];
|
||||
if (data.game.local)
|
||||
if (data.game?.local)
|
||||
{
|
||||
contextOptions.push({
|
||||
id: 'delete',
|
||||
|
|
@ -66,15 +66,15 @@ export default function ActionButtons (data: { game: FrontEndGameTypeDetailed, s
|
|||
return <div ref={ref} className="flex sm:gap-2 md:gap-4 sm:h-16 md:h-32 overflow-hidden p-2 items-center shrink-0">
|
||||
<FocusContext value={focusKey}>
|
||||
<MainActions game={data.game} source={data.source} id={data.id} />
|
||||
<AchievementsInfo game={data.game} onAction={() =>
|
||||
{data.game && <AchievementsInfo game={data.game} onAction={() =>
|
||||
{
|
||||
setDetailsSection("achievements");
|
||||
if (data.game.achievements?.entires[0])
|
||||
if (data.game?.achievements?.entires[0])
|
||||
{
|
||||
setFocus(data.game.achievements.entires[0].id);
|
||||
}
|
||||
|
||||
}} />
|
||||
}} />}
|
||||
<ActionButton tooltip="Settings" onAction={() => setOpen(true, 'settings')} type="base" id="settings" icon={<Settings />} >
|
||||
</ActionButton >
|
||||
{settingsDialog}
|
||||
|
|
|
|||
|
|
@ -27,8 +27,9 @@ export default function Details (data: {
|
|||
const { ref, focusKey } = useFocusable({
|
||||
focusKey: 'main-details',
|
||||
onFocus: (l, p, d) => scrollIntoViewHandler({ block: 'end', behavior: 'smooth' })(focusKey, ref.current, d),
|
||||
preferredChildFocusKey: "play-btn",
|
||||
saveLastFocusedChild: false
|
||||
preferredChildFocusKey: "actions",
|
||||
saveLastFocusedChild: false,
|
||||
forceFocus: true
|
||||
});
|
||||
|
||||
const platformCoverImg = data.game?.path_platform_cover ? new URL(`${RPC_URL(__HOST__)}${data.game?.path_platform_cover}`) : undefined;
|
||||
|
|
@ -87,7 +88,7 @@ export default function Details (data: {
|
|||
<div className="skeleton h-4 w-[80%]"></div>
|
||||
</div>}
|
||||
</div>
|
||||
{!!data.game && <ActionButtons source={data.source} id={data.id} game={data.game} key="actions" />}
|
||||
<ActionButtons source={data.source} id={data.id} game={data.game} key="actions" />
|
||||
</div>
|
||||
</section>
|
||||
</FocusContext>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ import { getErrorMessage } from "react-error-boundary";
|
|||
import toast from "react-hot-toast";
|
||||
import { useLocalStorage } from "usehooks-ts";
|
||||
import { ContextList, DialogEntry, useContextDialog } from "../ContextDialog";
|
||||
import { Clock, Download, EllipsisVertical, PackageOpen, Play, TriangleAlert } from "lucide-react";
|
||||
import { Clock, Download, EllipsisVertical, Import, PackageOpen, Play, TriangleAlert } from "lucide-react";
|
||||
import { installMutation, playMutation } from "@/mainview/scripts/queries/romm";
|
||||
import ActionButton from "./ActionButton";
|
||||
|
||||
export default function MainActions (data: { game: FrontEndGameTypeDetailed, source: string, id: string; })
|
||||
export default function MainActions (data: { game?: FrontEndGameTypeDetailed, source: string, id: string; })
|
||||
{
|
||||
const installMut = useMutation(installMutation(data.source, data.id));
|
||||
const playMut = useMutation({
|
||||
|
|
@ -29,7 +29,7 @@ export default function MainActions (data: { game: FrontEndGameTypeDetailed, sou
|
|||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
const [details, setDetails] = useState<string | undefined>(undefined);
|
||||
const [commands, setCommands] = useState<CommandEntry[] | undefined>(undefined);
|
||||
const [preferredCommand, setPreferredCommand] = useLocalStorage<string | number | undefined>(`${data.game.source ?? data.game.id.source}-${data.game.source_id ?? data.game.id.id}-preferred-command`, undefined);
|
||||
const [preferredCommand, setPreferredCommand] = useLocalStorage<string | number | undefined>(`${data.game?.source ?? data.game?.id.source}-${data.game?.source_id ?? data.game?.id.id}-preferred-command`, undefined);
|
||||
const queryClient = useQueryClient();
|
||||
const validCommands = commands ? commands.filter(c => c.valid) : [];
|
||||
const validDefaultCommand = commands?.find(c =>
|
||||
|
|
@ -41,7 +41,7 @@ export default function MainActions (data: { game: FrontEndGameTypeDetailed, sou
|
|||
|
||||
useEffect(() =>
|
||||
{
|
||||
const sub = rommApi.api.romm.status({ source: data.game.id.source })({ id: data.game.id.id }).subscribe();
|
||||
const sub = rommApi.api.romm.status({ source: data.source })({ id: data.id }).subscribe();
|
||||
ws.current = sub.ws;
|
||||
|
||||
sub.subscribe((e) =>
|
||||
|
|
@ -69,7 +69,7 @@ export default function MainActions (data: { game: FrontEndGameTypeDetailed, sou
|
|||
sub.close();
|
||||
ws.current = undefined;
|
||||
};
|
||||
}, [data.game.id]);
|
||||
}, [data.source, data.id]);
|
||||
|
||||
let progressIcon: JSX.Element | undefined = undefined;
|
||||
switch (status)
|
||||
|
|
@ -101,7 +101,7 @@ export default function MainActions (data: { game: FrontEndGameTypeDetailed, sou
|
|||
Router.navigate({ to: '/embedded/$source/$id', params: { source: data.source, id: data.id }, search: Object.fromEntries(params.entries()), replace: true });
|
||||
} else
|
||||
{
|
||||
playMut.mutate({ source: data.game.id.source, id: data.game.id.id, command_id: cmd.id });
|
||||
playMut.mutate({ source: data.source, id: data.id, command_id: cmd.id });
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -142,20 +142,31 @@ export default function MainActions (data: { game: FrontEndGameTypeDetailed, sou
|
|||
}
|
||||
else
|
||||
{
|
||||
let icon = <span className="loading loading-spinner loading-lg"></span>;
|
||||
if (status === 'install')
|
||||
{
|
||||
icon = <Download />;
|
||||
} else if (status === 'present')
|
||||
{
|
||||
icon = <Import />;
|
||||
}
|
||||
mainButton = <ActionButton
|
||||
key={status ?? 'unknown'}
|
||||
disabled={installMut.isPending}
|
||||
onAction={() =>
|
||||
{
|
||||
if (status === 'install')
|
||||
switch (status)
|
||||
{
|
||||
installMut.mutate();
|
||||
case 'present':
|
||||
case 'install':
|
||||
installMut.mutate();
|
||||
break;
|
||||
}
|
||||
}}
|
||||
tooltip={details ?? status}
|
||||
type='primary'
|
||||
id="mainAction">
|
||||
{status === 'install' ? <Download /> : <span className="loading loading-spinner loading-lg"></span>}
|
||||
{icon}
|
||||
</ActionButton>;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ export function OptionDropdown (data: {
|
|||
content: v,
|
||||
id: String(i),
|
||||
type: 'primary',
|
||||
selected: data.value === v,
|
||||
action: () =>
|
||||
{
|
||||
data.onChange?.(v);
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export function StoreEmulatorCard (data: {
|
|||
ref={ref}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
data-installed={!!data.emulator.validSource}
|
||||
data-installed={data.emulator.validSources.some(s => s.exists)}
|
||||
onClick={isTouch ? handleSelect : undefined}
|
||||
className={twMerge("relative focusable focusable-info bg-base-100 rounded-4xl transition-shadow focused:not-control-mouse:animate-scale-small shadow-lg border border-base-content/10 active:ring-4 active:ring-base-content active:transition-none", data.className)}
|
||||
>
|
||||
|
|
@ -62,10 +62,10 @@ export function StoreEmulatorCard (data: {
|
|||
<div>
|
||||
<p className="font-bold text-base-content text-xl leading-snug in-data-[installed=true]:text-success">{data.emulator.name}</p>
|
||||
<ul className="flex flex-wrap gap-1">
|
||||
{data.emulator.systems.map(({ id, name, icon }) =>
|
||||
{data.emulator.systems.map(({ id, name, iconUrl }) =>
|
||||
{
|
||||
return <div key={id} className="flex gap-1 items-center text-base-content/35 mt-0.5">
|
||||
{!!icon && <img draggable={false} className="size-6 p-1 bg-base-200 rounded-full" src={`${RPC_URL(__HOST__)}${icon}`} />}
|
||||
{!!iconUrl && <img draggable={false} className="size-6 p-1 bg-base-200 rounded-full" src={`${RPC_URL(__HOST__)}${iconUrl}`} />}
|
||||
<p className="text-nowrap text-ellipsis overflow-hidden">{name}</p>
|
||||
</div>;
|
||||
})}
|
||||
|
|
@ -75,17 +75,19 @@ export function StoreEmulatorCard (data: {
|
|||
</div>
|
||||
|
||||
<div className="flex gap-1 mt-1 h-10 items-center">
|
||||
{!!data.emulator.integration && data.emulator.validSource?.type === 'store' && <div className="tooltip tooltip-primary" data-tip="Has Integration">
|
||||
{!!data.emulator.integration && data.emulator.validSources.some(s => s.type === 'store') && <div className="tooltip tooltip-primary" data-tip="Has Integration">
|
||||
<div className="bg-primary text-primary-content rounded-full p-1"><WandSparkles /></div>
|
||||
</div>}
|
||||
{!!data.emulator.validSource && <div className="tooltip" data-tip={data.emulator.validSource.type}>
|
||||
<div data-source={data.emulator.validSource?.type} className="flex items-center justify-center rounded-full p-1 size-8 bg-warning text-warning-content data-[source=store]:bg-success data-[source=store]:text-success-content">
|
||||
{emulatorStatusIcons[data.emulator.validSource?.type ?? '']}
|
||||
</div>
|
||||
</div>}
|
||||
{data.emulator.validSources.slice(0, 3).map(s =>
|
||||
{
|
||||
return <div className="tooltip" data-tip={s.type}>
|
||||
<div data-source={s.type} className="flex items-center justify-center rounded-full p-1 size-8 bg-warning text-warning-content data-[source=store]:bg-success data-[source=store]:text-success-content">
|
||||
{emulatorStatusIcons[s.type]}
|
||||
</div>
|
||||
</div>;
|
||||
})}
|
||||
{isMouse && <>
|
||||
<Button onAction={handleSelect} style="base" className="grow text-base-content/40" id={`${data.emulator.name}-details`} >Details<ChevronRight /></Button>
|
||||
<Button className="bg-transparent border-none shadow-none w-6 p-0" id={`${data.emulator.name}-options`} ><EllipsisVertical /></Button>
|
||||
</>}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue