simeonradivoev/gameflow-deck
simeonradivoev/gameflow-deck
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Fixed romm login, now uses token

Browse source 
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:
Simeon Radivoev 2026-03-28 17:32:51 +02:00
parent 7c10f4e4c2
commit 816d50ae4d
Signed by: simeonradivoev
GPG key ID: 7611A451D2A5D37A
81 changed files with 1659 additions and 1097 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/mainview/components/AnimatedBackground.tsx
View file

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

8
src/mainview/components/AutoFocus.tsx
View file

@ -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
src/mainview/components/CardElement.tsx
View file

@ -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
)}

79
src/mainview/components/CardList.tsx
View file

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

24
src/mainview/components/CollectionList.tsx
View file

@ -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))}

65
src/mainview/components/CollectionsDetail.tsx
View file

@ -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>
);
}

23
src/mainview/components/ContextDialog.tsx
View file

@ -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[];
}

10
src/mainview/components/FilePicker.tsx
View file

@ -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 =>

6
src/mainview/components/GameList.tsx
View file

@ -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: (

93
src/mainview/components/Header.tsx
View file

@ -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>
);

5
src/mainview/components/LoadMoreButton.tsx
View file

@ -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)

45
src/mainview/components/LoadingCardList.tsx
View file

@ -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>
);
}

2
src/mainview/components/PlatformsList.tsx
View file

@ -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())

4
src/mainview/components/StatList.tsx
View file

@ -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} />

2
src/mainview/components/game/ActionButton.tsx
View file

@ -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}>

14
src/mainview/components/game/ActionButtons.tsx
View file

@ -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}

7
src/mainview/components/game/Details.tsx
View file

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

29
src/mainview/components/game/MainActions.tsx
View file

@ -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>;
}

1
src/mainview/components/options/OptionDropdown.tsx
View file

@ -44,6 +44,7 @@ export function OptionDropdown (data: {
content: v,
id: String(i),
type: 'primary',
selected: data.value === v,
action: () =>
{
data.onChange?.(v);

22
src/mainview/components/store/StoreEmulatorCard.tsx
View file

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

42
src/mainview/gen/routeTree.gen.ts
View file

@ -18,7 +18,6 @@ import { Route as SettingsEmulatorsRouteImport } from './../routes/settings/emul
import { Route as SettingsDirectoriesRouteImport } from './../routes/settings/directories'
import { Route as SettingsAccountsRouteImport } from './../routes/settings/accounts'
import { Route as SettingsAboutRouteImport } from './../routes/settings/about'
import { Route as CollectionIdRouteImport } from './../routes/collection.$id'
import { Route as StoreTabRouteRouteImport } from './../routes/store/tab/route'
import { Route as StoreTabIndexRouteImport } from './../routes/store/tab/index'
import { Route as StoreTabGamesRouteImport } from './../routes/store/tab/games'
@ -27,6 +26,7 @@ import { Route as PlatformSourceIdRouteImport } from './../routes/platform.$sour
import { Route as LauncherSourceIdRouteImport } from './../routes/launcher.$source.$id'
import { Route as GameSourceIdRouteImport } from './../routes/game/$source.$id'
import { Route as EmbeddedSourceIdRouteImport } from './../routes/embedded.$source.$id'
import { Route as CollectionSourceIdRouteImport } from './../routes/collection.$source.$id'
import { Route as StoreDetailsEmulatorIdRouteImport } from './../routes/store/details.emulator.$id'
const GamesRoute = GamesRouteImport.update({
@ -74,11 +74,6 @@ const SettingsAboutRoute = SettingsAboutRouteImport.update({
path: '/about',
getParentRoute: () => SettingsRouteRoute,
} as any)
const CollectionIdRoute = CollectionIdRouteImport.update({
id: '/collection/$id',
path: '/collection/$id',
getParentRoute: () => rootRouteImport,
} as any)
const StoreTabRouteRoute = StoreTabRouteRouteImport.update({
id: '/store/tab',
path: '/store/tab',
@ -119,6 +114,11 @@ const EmbeddedSourceIdRoute = EmbeddedSourceIdRouteImport.update({
path: '/embedded/$source/$id',
getParentRoute: () => rootRouteImport,
} as any)
const CollectionSourceIdRoute = CollectionSourceIdRouteImport.update({
id: '/collection/$source/$id',
path: '/collection/$source/$id',
getParentRoute: () => rootRouteImport,
} as any)
const StoreDetailsEmulatorIdRoute = StoreDetailsEmulatorIdRouteImport.update({
id: '/store/details/emulator/$id',
path: '/store/details/emulator/$id',
@ -130,13 +130,13 @@ export interface FileRoutesByFullPath {
'/settings': typeof SettingsRouteRouteWithChildren
'/games': typeof GamesRoute
'/store/tab': typeof StoreTabRouteRouteWithChildren
'/collection/$id': typeof CollectionIdRoute
'/settings/about': typeof SettingsAboutRoute
'/settings/accounts': typeof SettingsAccountsRoute
'/settings/directories': typeof SettingsDirectoriesRoute
'/settings/emulators': typeof SettingsEmulatorsRoute
'/settings/interface': typeof SettingsInterfaceRoute
'/settings/plugins': typeof SettingsPluginsRoute
'/collection/$source/$id': typeof CollectionSourceIdRoute
'/embedded/$source/$id': typeof EmbeddedSourceIdRoute
'/game/$source/$id': typeof GameSourceIdRoute
'/launcher/$source/$id': typeof LauncherSourceIdRoute
@ -150,13 +150,13 @@ export interface FileRoutesByTo {
'/': typeof IndexRoute
'/settings': typeof SettingsRouteRouteWithChildren
'/games': typeof GamesRoute
'/collection/$id': typeof CollectionIdRoute
'/settings/about': typeof SettingsAboutRoute
'/settings/accounts': typeof SettingsAccountsRoute
'/settings/directories': typeof SettingsDirectoriesRoute
'/settings/emulators': typeof SettingsEmulatorsRoute
'/settings/interface': typeof SettingsInterfaceRoute
'/settings/plugins': typeof SettingsPluginsRoute
'/collection/$source/$id': typeof CollectionSourceIdRoute
'/embedded/$source/$id': typeof EmbeddedSourceIdRoute
'/game/$source/$id': typeof GameSourceIdRoute
'/launcher/$source/$id': typeof LauncherSourceIdRoute
@ -172,13 +172,13 @@ export interface FileRoutesById {
'/settings': typeof SettingsRouteRouteWithChildren
'/games': typeof GamesRoute
'/store/tab': typeof StoreTabRouteRouteWithChildren
'/collection/$id': typeof CollectionIdRoute
'/settings/about': typeof SettingsAboutRoute
'/settings/accounts': typeof SettingsAccountsRoute
'/settings/directories': typeof SettingsDirectoriesRoute
'/settings/emulators': typeof SettingsEmulatorsRoute
'/settings/interface': typeof SettingsInterfaceRoute
'/settings/plugins': typeof SettingsPluginsRoute
'/collection/$source/$id': typeof CollectionSourceIdRoute
'/embedded/$source/$id': typeof EmbeddedSourceIdRoute
'/game/$source/$id': typeof GameSourceIdRoute
'/launcher/$source/$id': typeof LauncherSourceIdRoute
@ -195,13 +195,13 @@ export interface FileRouteTypes {
| '/settings'
| '/games'
| '/store/tab'
| '/collection/$id'
| '/settings/about'
| '/settings/accounts'
| '/settings/directories'
| '/settings/emulators'
| '/settings/interface'
| '/settings/plugins'
| '/collection/$source/$id'
| '/embedded/$source/$id'
| '/game/$source/$id'
| '/launcher/$source/$id'
@ -215,13 +215,13 @@ export interface FileRouteTypes {
| '/'
| '/settings'
| '/games'
| '/collection/$id'
| '/settings/about'
| '/settings/accounts'
| '/settings/directories'
| '/settings/emulators'
| '/settings/interface'
| '/settings/plugins'
| '/collection/$source/$id'
| '/embedded/$source/$id'
| '/game/$source/$id'
| '/launcher/$source/$id'
@ -236,13 +236,13 @@ export interface FileRouteTypes {
| '/settings'
| '/games'
| '/store/tab'
| '/collection/$id'
| '/settings/about'
| '/settings/accounts'
| '/settings/directories'
| '/settings/emulators'
| '/settings/interface'
| '/settings/plugins'
| '/collection/$source/$id'
| '/embedded/$source/$id'
| '/game/$source/$id'
| '/launcher/$source/$id'
@ -258,7 +258,7 @@ export interface RootRouteChildren {
SettingsRouteRoute: typeof SettingsRouteRouteWithChildren
GamesRoute: typeof GamesRoute
StoreTabRouteRoute: typeof StoreTabRouteRouteWithChildren
CollectionIdRoute: typeof CollectionIdRoute
CollectionSourceIdRoute: typeof CollectionSourceIdRoute
EmbeddedSourceIdRoute: typeof EmbeddedSourceIdRoute
GameSourceIdRoute: typeof GameSourceIdRoute
LauncherSourceIdRoute: typeof LauncherSourceIdRoute
@ -331,13 +331,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof SettingsAboutRouteImport
parentRoute: typeof SettingsRouteRoute
}
'/collection/$id': {
id: '/collection/$id'
path: '/collection/$id'
fullPath: '/collection/$id'
preLoaderRoute: typeof CollectionIdRouteImport
parentRoute: typeof rootRouteImport
}
'/store/tab': {
id: '/store/tab'
path: '/store/tab'
@ -394,6 +387,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof EmbeddedSourceIdRouteImport
parentRoute: typeof rootRouteImport
}
'/collection/$source/$id': {
id: '/collection/$source/$id'
path: '/collection/$source/$id'
fullPath: '/collection/$source/$id'
preLoaderRoute: typeof CollectionSourceIdRouteImport
parentRoute: typeof rootRouteImport
}
'/store/details/emulator/$id': {
id: '/store/details/emulator/$id'
path: '/store/details/emulator/$id'
@ -447,7 +447,7 @@ const rootRouteChildren: RootRouteChildren = {
SettingsRouteRoute: SettingsRouteRouteWithChildren,
GamesRoute: GamesRoute,
StoreTabRouteRoute: StoreTabRouteRouteWithChildren,
CollectionIdRoute: CollectionIdRoute,
CollectionSourceIdRoute: CollectionSourceIdRoute,
EmbeddedSourceIdRoute: EmbeddedSourceIdRoute,
GameSourceIdRoute: GameSourceIdRoute,
LauncherSourceIdRoute: LauncherSourceIdRoute,

2
src/mainview/gen/static-icon-assets.gen.ts
View file

@ -464,7 +464,7 @@ const assets = new Set<string>([
]);
// Store basePath resolved from Vite config
const BASE_PATH = "./";
const BASE_PATH = "/";
/**

16
src/mainview/index.css
View file

@ -365,8 +365,10 @@ body {
.bg-noise {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-image: url("https://momentsingraphics.de/Media/BlueNoise/BlueNoise470.png");
mix-blend-mode: color-dodge;
@ -375,8 +377,10 @@ body {
.bg-dots {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-image: radial-gradient(var(--color-neutral) 0.1rem, transparent 0.1rem);
background-size: 2rem 2rem;
@ -421,11 +425,11 @@ body {
html:active-view-transition-type(slide-up) {
&::view-transition-old(root) {
animation: fade-out 300ms ease-in forwards;
animation: fade-out 200ms ease-in forwards;
}
&::view-transition-new(root) {
animation: slide-up 300ms ease-in-out forwards;
animation: slide-up 200ms ease-out forwards;
}
}

2
src/mainview/index.html
View file

@ -18,7 +18,9 @@
<title>GameFlow</title>
</head>
<body>
<script type="module" src="./preload.tsx"></script>
<script type="module" src="./index.tsx"></script>
<div id="preload"></div>
<div id="root"></div>
</body>
</html>

6
src/mainview/index.tsx
View file

@ -45,7 +45,7 @@ export const Router = createRouter({
history: hashHistory,
defaultPreload: "intent",
context: { queryClient },
scrollRestoration: true,
scrollRestoration: false,
defaultNotFoundComponent: NotFound,
defaultPendingMs: 300,
defaultErrorComponent: Error,
@ -67,6 +67,7 @@ export const Router = createRouter({
});
const focusMap = new Map<number, string>();
export const focusQueue: string[] = [];
Router.history.subscribe((op) =>
{
@ -77,7 +78,8 @@ Router.history.subscribe((op) =>
{
if (focusMap.has(op.location.state.__TSR_index))
{
setFocus(focusMap.get(op.location.state.__TSR_index)!);
focusQueue.pop();
focusQueue.push(focusMap.get(op.location.state.__TSR_index)!);
focusMap.delete(op.location.state.__TSR_index);
}
}

21
src/mainview/preload.tsx Normal file
View file

@ -0,0 +1,21 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
const rootElement = document.getElementById("preload")!;
if (!rootElement.innerHTML)
{
const root = createRoot(rootElement);
root.render(
<StrictMode>
<div className="in-data-[loaded=true]:hidden absolute flex items-center gap-2 justify-center bg-base-300 w-screen h-screen z-100 font-semibold text-2xl text-shadow-lg">
<span className="loading loading-spinner loading-xl"></span>
<div className="absolute w-screen h-screen bg-radial from-base-100 to-base-300 -z-2"></div>
<div className="bg-noise"></div>
<div className="bg-dots"></div>
Loading Gameflow
</div>
</StrictMode>,
);
}

23
src/mainview/routes/__root.tsx
View file

@ -4,7 +4,10 @@ import Notifications from "../components/Notifications";
import { Toaster } from "react-hot-toast";
import { mobileCheck, useLocalSetting } from "../scripts/utils";
import useActiveControl from "../scripts/gamepads";
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { SystemInfoContext } from "../scripts/contexts";
import { SystemInfoType } from "@/shared/constants";
import { systemApi } from "../scripts/clientApi";
export const Route = createRootRouteWithContext<RouterContext>()({
component: RootComponent,
@ -31,11 +34,25 @@ function RootComponent ()
}, [theme]);
const [systemInfo, setSystemInfo] = useState<SystemInfoType | undefined>();
useEffect(() =>
{
const sub = systemApi.api.system.info.system.subscribe();
sub.subscribe(({ data }) =>
{
setSystemInfo(data);
});
document.documentElement.dataset.loaded = "true";
}, []);
return (
<div data-device={isMobile ? 'mobile' : ''} data-active-control={control} className="w-screen h-screen overflow-hidden">
<Outlet />
<SystemInfoContext value={systemInfo}>
<Outlet />
</SystemInfoContext>
<Notifications />
<Toaster containerStyle={{ viewTimelineName: 'toasters' }} />
<Toaster containerStyle={{ viewTimelineName: 'toasters', viewTransitionName: 'notifications' }} />
{/*import.meta.env.DEV && !isMobile &&
<>
<TanStackRouterDevtools position="top-left" />

27
src/mainview/routes/collection.$id.tsx
View file

@ -1,27 +0,0 @@
import { createFileRoute } from '@tanstack/react-router';
import { CollectionsDetail } from '../components/CollectionsDetail';
import { getRomsApiRomsGetOptions } from '@clients/romm/@tanstack/react-query.gen';
import { DefaultRommStaleTime } from '@shared/constants';
import { useQuery } from '@tanstack/react-query';
import { useContext } from 'react';
import { AnimatedBackgroundContext } from '../scripts/contexts';
import { getCollectionQuery } from '@queries/romm';
export const Route = createFileRoute('/collection/$id')({
component: RouteComponent,
loader: ({ params, context }) => context.queryClient.fetchQuery({
...getRomsApiRomsGetOptions({ query: { collection_id: Number(params.id) } }),
staleTime: DefaultRommStaleTime,
})
});
function RouteComponent ()
{
const { id } = Route.useParams();
const { data: collection } = useQuery(getCollectionQuery(Number(id)));
const animatedBgContext = useContext(AnimatedBackgroundContext);
return (
<CollectionsDetail setBackground={animatedBgContext.setBackground} title={<div className="divider font-semibold text-2xl">{collection?.name}</div>} filters={{ collection_id: Number(id) }} />
);
}

25
src/mainview/routes/collection.$source.$id.tsx Normal file
View file

@ -0,0 +1,25 @@
import { createFileRoute } from '@tanstack/react-router';
import { CollectionsDetail } from '../components/CollectionsDetail';
import { useQuery } from '@tanstack/react-query';
import { useContext } from 'react';
import { AnimatedBackgroundContext } from '../scripts/contexts';
import { getCollectionQuery } from '@queries/romm';
import { zodValidator } from '@tanstack/zod-adapter';
import z from 'zod';
export const Route = createFileRoute('/collection/$source/$id')({
component: RouteComponent,
validateSearch: zodValidator(z.object({ countHint: z.number().optional() }))
});
function RouteComponent ()
{
const { source, id } = Route.useParams();
const { countHint } = Route.useSearch();
const { data: collection } = useQuery(getCollectionQuery(source, id));
const animatedBgContext = useContext(AnimatedBackgroundContext);
return (
<CollectionsDetail countHit={countHint} setBackground={animatedBgContext.setBackground} title={<div className="divider font-semibold text-2xl">{collection?.name}</div>} filters={{ collection_id: Number(id), collection_source: source }} />
);
}

94
src/mainview/routes/game/$source.$id.tsx
View file

@ -22,6 +22,7 @@ import { GameDetailsContext } from "@/mainview/scripts/contexts";
import { gameQuery, gamesRecommendedBasedOnGameQuery } from "@queries/romm";
import { GamesSection } from "@/mainview/components/store/GamesSection";
import Details, { DetailElement } from "@/mainview/components/game/Details";
import { AutoFocus } from "@/mainview/components/AutoFocus";
export const Route = createFileRoute("/game/$source/$id")({
loader: async ({ params, context }) =>
@ -29,7 +30,6 @@ export const Route = createFileRoute("/game/$source/$id")({
context.queryClient.prefetchQuery(gameQuery(params.source, params.id));
},
component: RouteComponent,
pendingComponent: GameDetailsUIPending,
errorComponent: Error,
validateSearch: zodValidator(z.object({ focus: z.string().optional() }))
});
@ -71,81 +71,6 @@ function Error (data: ErrorComponentProps)
</AnimatedBackground>;
}
function MainDetailsPending ()
{
const { ref } = useFocusable({ focusKey: "main-details" });
return <main ref={ref} className="flex p-3 flex-col flex-1 min-h-0">
<section className="flex portrait:flex-col my-4 sm:p-0 md:px-12 md:pb-8 pt-4 sm:gap-8 md:gap-12 portrait:w-full h-full min-h-0 rounded-4xl flex-1 z-0 sm:text-sm md:text-base">
<div className="flex gap-6 overflow-hidden bg-base-100 justify-end portrait:w-full rounded-3xl aspect-3/4 portrait:h-24 p-4">
<div className="skeleton w-full h-full"></div>
</div>
<div className="flex-2 flex flex-col sm:gap-1 md:gap-6 sm:pt-2 md:pt-16 min-h-0">
<div className="flex flex-wrap sm:gap-4 md:gap-6 shrink-0">
<DetailElement icon={<Clock />} ></DetailElement>
<DetailElement icon={<div className="skeleton size-6" />} ><div className="skeleton h-4 w-32"></div></DetailElement>
<DetailElement icon={
<Store />
} >
</DetailElement>
</div>
<div className="md:hidden divider divider-vertical m-0"></div>
<div className="text-base-content/80 flex-1 min-h-0 leading-relaxed grow text-wrap whitespace-break-spaces text-ellipsis overflow-hidden text-lg">
<div className="flex flex-col gap-4 w-full">
<div className="skeleton h-4 w-[30%]"></div>
<div className="skeleton h-4 w-[80%]"></div>
<div className="skeleton h-4 w-full"></div>
<div className="skeleton h-4 w-[60%]"></div>
<div className="skeleton h-4 w-full"></div>
<div className="skeleton h-4 w-[80%]"></div>
</div>
</div>
</div>
</section>
</main>;
}
function GameDetailsUIPending ()
{
const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details-error", preferredChildFocusKey: "main-details" });
useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
const { shortcuts } = useShortcutContext();
useEffect(() =>
{
focusSelf();
}, []);
return <AnimatedBackground ref={ref} backgroundKey="game-details">
<div className="z-10">
<FocusContext value={focusKey}>
<div className="h-0" />
<div className="sticky group top-0 bg-base-100/40 group p-2 z-15 transition-colors data-stuck:backdrop-blur-3xl">
<HeaderUI />
</div>
<div className="flex flex-col h-[80vh] overflow-hidden bg-linear-to-t from-base-100 to-base-100/40">
<MainDetailsPending />
</div>
<div className="bg-base-200">
<div className="divider m-0 pb-12"><div className="flex items-center gap-3 opacity-60"><Image className="sm:size-4 md:size-6" />Screenshots</div></div>
<div className="flex flex-col w-full z-0 min-h-0">
<div
className="flex gap-6 px-16 py-2 sm:overflow-scroll md:overflow-hidden no-scrollbar justify-center-safe"
>
{Array.from({ length: 5 }).map((s, i) => <div key={i} className="skeleton h-64 w-lg"></div>)}
</div>
</div>
<footer className="fixed left-0 right-0 bottom-0 w-full p-4 flex items-center justify-end z-10">
<Shortcuts shortcuts={shortcuts} />
</footer>
</div>
</FocusContext>
</div>
</AnimatedBackground>;
}
function MoreDetails (data: { game: FrontEndGameTypeDetailed | undefined; })
{
const [details] = useDetailsSection();
@ -219,7 +144,7 @@ function RouteComponent ()
const { data } = useQuery(gameQuery(source, id));
const { focus } = Route.useSearch();
const [, setUpdate] = useState(0);
const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details", preferredChildFocusKey: "main-details" });
const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details", preferredChildFocusKey: "main-details", forceFocus: true });
const headerRef = useRef(null);
const sentinelRef = useRef(null);
const backgroundImage = data ? new URL(`${RPC_URL(__HOST__)}${data.path_cover}`) : undefined;
@ -228,20 +153,8 @@ function RouteComponent ()
useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
const { shortcuts } = useShortcutContext();
useEffect(() =>
{
if (focus)
{
setFocus(focus, { instant: true });
} else
{
focusSelf();
}
}, []);
useStickyDataAttr(headerRef, sentinelRef, ref);
const recommendedEmulators = data?.emulators?.filter(e => e.validSource);
const recommendedEmulators = data?.emulators?.filter(e => e.validSources.some(em => em.exists));
const { ref: intersct } = useIntersectionObserver({
onChange: (isIntersecting, entry) =>
@ -252,6 +165,7 @@ function RouteComponent ()
return (
<AnimatedBackground ref={ref} backgroundKey="game-details" backgroundUrl={backgroundImage} scrolling>
<AutoFocus focus={focusSelf} />
<GameDetailsContext value={{
update: () => setUpdate(v => v + 1)
}} >

7
src/mainview/routes/games.tsx
View file

@ -12,10 +12,5 @@ function RouteComponent ()
{
const { focus } = Route.useSearch();
return (
<div className="w-full h-full">
<CollectionsDetail focus={focus} id='all-games'
/>
</div>
);
return <CollectionsDetail focus={focus} id='all-games' />;
}

34
src/mainview/routes/index.tsx
View file

@ -15,7 +15,7 @@ import
{
createFileRoute,
} from "@tanstack/react-router";
import { useMutation } from "@tanstack/react-query";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import
{
FocusContext,
@ -44,6 +44,7 @@ import { mobileCheck, useDragScroll } from "../scripts/utils";
import { AnimatedBackgroundContext } from "../scripts/contexts";
import Carousel from "../components/Carousel";
import { closeMutation } from "@queries/system";
import { gameQuery } from "../scripts/queries/romm";
export const Route = createFileRoute("/")({
component: ConsoleHomeUI,
@ -101,6 +102,7 @@ function HomeList (data: {
selectedFilter: string;
})
{
const queryClient = useQueryClient();
const [initFocus, setInitFocus] = useState(false);
const bg = useContext(AnimatedBackgroundContext);
const { } = Route.useSearch;
@ -125,28 +127,20 @@ function HomeList (data: {
Router.navigate({ to: '/game/$source/$id', params: { id: String(sourceId ?? id.id), source: source ?? id.source } });
};
const handleCollectionSelect = (id: string) =>
{
Router.navigate({ to: `/collection/${id}` });
};
const handlePlatformSelect = (source: string, id: string) =>
{
Router.navigate({ to: `/platform/${source}/${id}` });
};
let activeList: JSX.Element;
switch (data.selectedFilter)
{
case 'consoles':
activeList = <>
<PlatformsList saveChildFocus="session" onSelect={handlePlatformSelect} onFocus={handleNodeFocus} className="animate-slide-up" key="consoles-list" id="consoles-list" setBackground={bg.setBackground} />
<AutoFocus parentKey={focusKey} focus={focusSelf} delay={10} />
<Suspense key={data.selectedFilter} fallback={<LoadingCardList id={`card-list-${data.selectedFilter}`} className="*:aspect-8/10! md:py-12" placeholderCount={8} />}>
<PlatformsList saveChildFocus="session" onFocus={handleNodeFocus} className="animate-slide-up" key="consoles-list" id="consoles-list" setBackground={bg.setBackground} />
<AutoFocus parentKey={focusKey} focus={focusSelf} delay={10} />
</Suspense>
</>;
break;
case 'collections':
activeList = <>
<CollectionList saveChildFocus="session" onSelect={handleCollectionSelect} onFocus={handleNodeFocus} className="animate-slide-up" key="collections-list" id="collections-list" setBackground={bg.setBackground} />
<CollectionList saveChildFocus="session" onFocus={handleNodeFocus} className="animate-slide-up" key="collections-list" id="collections-list" setBackground={bg.setBackground} />
<AutoFocus parentKey={focusKey} focus={focusSelf} delay={10} />
</>;
break;
@ -155,12 +149,17 @@ function HomeList (data: {
<GameList
onGameSelect={handleGameSelect}
saveChildFocus="session"
onFocus={handleNodeFocus}
onFocus={(l, n, d) =>
{
const [source, id] = l.split('@');
queryClient.prefetchQuery(gameQuery(source, id));
handleNodeFocus(l, n, d);
}}
className="animate-slide-up"
key="games-list"
id="games-list"
setBackground={bg.setBackground}
filters={{ limit: 12 }}
filters={{ limit: 12, orderBy: 'activity' }}
finalElement={<ShowAllGamesCard />}
/>
<AutoFocus parentKey={focusKey} focus={focusSelf} delay={10} />
@ -201,7 +200,7 @@ function HomeList (data: {
}}>
<div className="landscape:flex landscape:px-16 portrait:min-h-fit portrait:h-fit portrait:pb-32 portrait:w-full landscape:h-full landscape:items-center">
<ErrorBoundary fallback={<HomeListError focused={focused} />}>
<Suspense key={data.selectedFilter} fallback={<LoadingCardList placeholderCount={8} />}>
<Suspense key={data.selectedFilter} fallback={<LoadingCardList id={`card-list-${data.selectedFilter}`} placeholderCount={8} />}>
{activeList}
<SaveScroll id={`card-list-${data.selectedFilter}`} ref={ref} />
</Suspense>
@ -223,6 +222,7 @@ function MainMenu ()
ref={ref}
save-child-focus="session"
className="flex items-center gap-y-1 sm:portrait:bg-base-100 sm:portrait:p-2 sm:portrait:rounded-full sm:gap-1 md:gap-3"
style={{ viewTransitionName: "main-menu" }}
>
<FocusContext.Provider value={focusKey}>
<CircleIcon

25
src/mainview/routes/platform.$source.$id.tsx
View file

@ -3,18 +3,24 @@ import { CollectionsDetail } from "../components/CollectionsDetail";
import { useQuery } from "@tanstack/react-query";
import { RPC_URL } from "../../shared/constants";
import { platformQuery } from "@queries/romm";
import { zodValidator } from "@tanstack/zod-adapter";
import z from "zod";
export const Route = createFileRoute("/platform/$source/$id")({
component: RouteComponent
component: RouteComponent,
validateSearch: zodValidator(z.object({ countHint: z.number().optional() }))
});
function PlatformTitle (data: { pathCover: string | null, platformName?: string; })
function PlatformTitle (data: {})
{
const { source, id } = Route.useParams();
const { data: platform } = useQuery(platformQuery(source, id));
return <div className="sm:landscape:hidden flex flex-col gap-2 pl-2 text-2xl font-semibold text-base-content justify-center drop-shadow">
<div className="divider mb-6 mt-0">
{!!data.pathCover && <img className="size-14 rounded-full p-2" src={`${RPC_URL(__HOST__)}${data.pathCover}`} ></img>}
{data.platformName}
{!!platform && <img className="size-14 rounded-full p-2" src={`${RPC_URL(__HOST__)}${platform.path_cover}`} ></img>}
{platform?.name}
</div>
</div>;
}
@ -22,14 +28,15 @@ function PlatformTitle (data: { pathCover: string | null, platformName?: string;
function RouteComponent ()
{
const { source, id } = Route.useParams();
const { data: platform } = useQuery(platformQuery(source, id));
const { countHint } = Route.useSearch();
return (
<div className="w-full h-full">
{!!platform && <CollectionsDetail
title={<PlatformTitle pathCover={platform.path_cover} platformName={platform.name} />}
filters={{ platform_id: Number(id), platform_slug: platform.slug, platform_source: source }}
/>}
<CollectionsDetail
countHit={countHint}
title={<PlatformTitle />}
filters={{ platform_id: Number(id), platform_source: source }}
/>
</div>
);
}

26
src/mainview/routes/settings/accounts.tsx
View file

@ -7,7 +7,7 @@ import
import { useIsMutating, useMutation, useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import classNames from "classnames";
import { Key, Link, Lock, LogOut, Save, ScanQrCode, Trash, User, X } from "lucide-react";
import { Key, Link, Lock, LogIn, LogOut, Save, ScanQrCode, Trash, User, X } from "lucide-react";
import
{
useEffect,
@ -24,7 +24,8 @@ import { useJobStatus } from "@/mainview/scripts/utils";
import { useInterval } from "usehooks-ts";
import { TwitchIcon } from "@/mainview/scripts/brandIcons";
import { twitchLoginMutation, twitchLoginVerificationQuery, twitchLogoutMutation } from "@queries/settings";
import { rommGetOptionsQuery, rommHasPasswordQuery, rommHostnameQuery, rommLoginMutation, rommLogoutMutation, rommQrLoginMutation, rommUsernameQuery, rommUserQuery } from "@queries/romm";
import { rommGetOptionsQuery, rommLoggedInQuery, rommHostnameQuery, rommLoginMutation, rommLogoutMutation, rommQrLoginMutation, rommUsernameQuery, rommUserQuery } from "@queries/romm";
import { systemApi } from "@/mainview/scripts/clientApi";
export const Route = createFileRoute("/settings/accounts")({
component: RouteComponent,
@ -47,7 +48,10 @@ function LoginQR (data: { id: string, isOpen: boolean, cancel: () => void, url:
<QRCode value={data.url} />
<progress ref={progressRef} className="progress w-56" max="100"></progress>
{!!data.code && <p> Code: {data.code} </p>}
<Button id="qr-login-cancel" focusClassName="btn-warning" type="button" onAction={() => data.cancel()}><X /> Cancel</Button>
<div className="flex gap-2">
<Button id="qr-login-open-url" focusClassName="btn-primary" type="button" onAction={() => systemApi.api.system.open.post({ url: data.url })}><Link /> Open</Button>
<Button id="qr-login-cancel" focusClassName="btn-warning" type="button" onAction={() => data.cancel()}><X /> Cancel</Button>
</div>
</ContextDialog>;
}
@ -83,11 +87,12 @@ function TwitchLogin ()
</div>;
}
function LoginControls (data: { hasPassword: boolean; })
function LoginControls (data: {})
{
const user = useQuery(rommUserQuery());
const user = useQuery(rommUserQuery);
const loginMutation = useMutation(rommQrLoginMutation);
const { data: statusValue, wsRef } = useJobStatus('login-job');
const { data: loginStatusData } = useQuery(rommLoggedInQuery);
const context = useSettingsFormContext({});
const isMutatingRomm = useIsMutating({ mutationKey: ["romm", "auth"] }) > 0;
const logoutMutation = useMutation({
@ -107,15 +112,15 @@ function LoginControls (data: { hasPassword: boolean; })
}
<Button id="qr-login" type="button" disabled={loginMutation.isPending} onAction={() => loginMutation.mutate()}><ScanQrCode /> </Button>
<Button id="can-submit" disabled={!context.state.canSubmit || !context.state.isDirty} type="submit" onAction={() => context.handleSubmit()} >
<Save /> Save
<LogIn /> Login
</Button>
{data.hasPassword &&
{loginStatusData?.hasLogin &&
<Button id="forget" onAction={() =>
{
toast("Logout", { id: 'romm-logout-noti' });
logoutMutation.mutate();
}} disabled={isMutatingRomm} type="button" >
<Trash /> Forget
<LogOut /> Logout
</Button>
}
<Button id="cancel" disabled={context.state.isDefaultValue} type="reset" onAction={() => context.reset()}>
@ -137,7 +142,6 @@ function RouteComponent ()
preferredChildFocusKey: focus
});
const { data: hasPassword } = useQuery(rommHasPasswordQuery);
const { data: hostname } = useQuery(rommHostnameQuery);
const { data: username } = useQuery(rommUsernameQuery);
@ -217,10 +221,10 @@ function RouteComponent ()
<loginForm.AppField name="username" children={(field) =>
<field.FormOption label={"Romm Username"} icon={<User />} type="text" />} />
<loginForm.AppField name="password" children={(field) =>
<field.FormOption label={"Romm Password"} icon={<Key />} type="password" placeholder={hasPassword ? '*****' : "Password"} />} />
<field.FormOption label={"Romm Password"} icon={<Key />} type="password" placeholder="Password" />} />
<loginForm.Subscribe children={(form) =>
<OptionSpace id="login-controls-space" className="justify-end border-0">
<LoginControls hasPassword={hasPassword === true} />
<LoginControls />
</OptionSpace>} />
</form>
</loginForm.AppForm>

114
src/mainview/routes/settings/emulators.tsx
View file

@ -2,16 +2,16 @@ import { createFileRoute } from '@tanstack/react-router';
import { OptionSpace } from '../../components/options/OptionSpace';
import { OptionInput } from '../../components/options/OptionInput';
import { useMutation, useQuery } from '@tanstack/react-query';
import { useCallback, useEffect, useState } from 'react';
import { JSX, useCallback, useEffect, useState } from 'react';
import { Button } from '../../components/options/Button';
import { Check, ChevronDown, FolderSearch, SearchAlert, Trash, TriangleAlert } from 'lucide-react';
import { Check, ChevronDown, FileQuestion, FolderSearch, Plug, SearchAlert, Store, Trash, TriangleAlert } from 'lucide-react';
import { ContextDialog, ContextList, DialogEntry, OptionElement } from '../../components/ContextDialog';
import classNames from 'classnames';
import { twMerge } from 'tailwind-merge';
import { RPC_URL } from '../../../shared/constants';
import emulators from '@emulators';
import { FocusContext, setFocus, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { GamePadButtonCode, useShortcuts } from '@/mainview/scripts/shortcuts';
import { GamePadButtonCode, Shortcut, useShortcuts } from '@/mainview/scripts/shortcuts';
import FilePicker from '@/mainview/components/FilePicker';
import { dirname } from 'pathe';
import { autoEmulatorsQuery, customEmulatorAddMutation, customEmulatorDeleteMutation, customEmulatorRemoveValueQuery, customEmulatorsQuery, setCustomEmulatorMutation } from '@queries/settings';
@ -19,6 +19,7 @@ import Carousel from '@/mainview/components/Carousel';
import { FOCUS_KEYS } from '@/mainview/scripts/types';
import { scrollIntoNearestParent, scrollIntoViewHandler, useDragScroll } from '@/mainview/scripts/utils';
import { SettingsOption } from '@/mainview/components/options/SettingsOption';
import { Router } from '@/mainview';
export const Route = createFileRoute('/settings/emulators')({
component: RouteComponent,
@ -54,7 +55,7 @@ function EmulatorListType (data: { category: string, action: (e: string) => void
const { ref, focusKey } = useFocusable({ focusKey: 'list-section' });
return <div ref={ref} className='grow'>
<FocusContext value={focusKey}>
<ContextList className='sm:h-[80vh] md:h-[60vh] overflow-auto' options={Object.keys(emulators).filter(e => e.startsWith(data.category)).map(e => ({
<ContextList className='sm:h-[80vh] md:h-[60vh] p-2 overflow-auto' options={Object.keys(emulators).filter(e => e.startsWith(data.category)).map(e => ({
id: e,
action: (ctx) =>
{
@ -185,43 +186,88 @@ function EmulatorPath (data: { id: string; })
}
function EmulatorBadge (data: {
path?: string,
exists: boolean,
emulator: string;
isCritical: boolean;
pathCover?: string;
emulator: FrontEndEmulator & {
isCritical: boolean;
},
addOverride: (emulator: string) => void;
} & FocusParams)
{
const { focusKey, ref, focused } = useFocusable({
focusKey: FOCUS_KEYS.EMULATOR_CARD(data.emulator),
focusKey: FOCUS_KEYS.EMULATOR_CARD(data.emulator.name),
onFocus (l, p, details) { data.onFocus?.(focusKey, ref.current, details); }
});
useShortcuts(focusKey, () => [{
label: 'Add Override',
button: GamePadButtonCode.A,
action: () =>
data.addOverride(data.emulator)
}], [data.addOverride]);
useShortcuts(focusKey, () =>
{
const shortcuts: Shortcut[] = [{
label: 'Add Override',
button: GamePadButtonCode.A,
action: () =>
data.addOverride(data.emulator.name)
}];
if (data.emulator.validSources.some(s => s.type === 'store'))
{
shortcuts.push({
button: GamePadButtonCode.Y,
label: "Visit Store",
action ()
{
Router.navigate({ to: '/store/details/emulator/$id', params: { id: data.emulator.name } });
},
});
}
return shortcuts;
}, [data.addOverride]);
return <div ref={ref} className={classNames("tooltip tooltip-primary tooltip-right", { "tooltip-open": focused })} data-tip={`${emulators[data.emulator]}`}>
<div className={
twMerge('flex flex-col rounded-3xl bg-base-300 justify-center items-center p-4 overflow-hidden h-full',
classNames({
"bg-base-200": !data.path,
"border-dashed border-base-content/40 border-2": !data.path && data.isCritical && !focused,
"border-dashed border-accent border-4": focused
}))
}>
<p className='flex gap-2 font-semibold'>
{data.path ? data.exists ? <Check /> : <TriangleAlert className='text-error' /> : <SearchAlert className={data.isCritical ? 'text-warning' : 'text-base-content/40'} />}
{!!data.pathCover && <img className='size-6 drop-shadow drop-shadow-black/20' src={`${RPC_URL(__HOST__)}${data.pathCover}`}></img>}
{data.emulator}
</p>
{data.path ? <small className={classNames('opacity-60 max-w-full overflow-clip text-nowrap text-ellipsis', { 'text-error': !data.exists })}>{data.path}</small> : ""}
let statusIcon = <SearchAlert className={data.emulator.isCritical ? 'text-warning' : 'text-base-content/40'} />;
if (data.emulator.validSources.some(s => s.exists))
{
statusIcon = <Check />;
}
return <div ref={ref} className={
twMerge('grid grid-rows-3 grid-cols-1 flex-col rounded-3xl bg-base-300 items-center p-4 overflow-hidden h-full select-none focusable focusable-accent',
classNames({
"bg-base-200": !data.emulator.validSources.some(v => v.exists),
"border-dashed border-base-content/40 border-2": !data.emulator.validSources.some(v => v.exists) && data.emulator.isCritical && !focused,
}))
}>
<div className='flex flex-col items-center gap-1'>
<div className='flex gap-2 font-semibold'>
{statusIcon}
{!!data.emulator.logo && <img className='size-6 drop-shadow drop-shadow-black/20' src={`${RPC_URL(__HOST__)}${data.emulator.logo}`}></img>}
{data.emulator.name}
</div>
<div className='text-base-content/40 max-w-full overflow-hidden text-nowrap text-ellipsis'>
{data.emulator.description ?? emulators[data.emulator.name]}
</div>
</div>
{data.emulator.validSources.length > 0 && <div className="divider">
<div className='flex p-2 gap-1'>{data.emulator.validSources.map(s =>
{
let icon = <FileQuestion />;
let action: (() => void) | undefined = undefined;
let className = "bg-warning text-warning-content";
switch (s.type)
{
case 'store':
icon = <Store />;
className = "hover:bg-base-content hover:text-base-100 cursor-pointer bg-accent text-accent-content";
action = () => { Router.navigate({ to: '/store/details/emulator/$id', params: { id: data.emulator.name } }); };
break;
case 'embedded':
icon = <Plug />;
className = "bg-info text-info-content";
break;
}
return <div onClick={action} className={twMerge('drop-shadow-md rounded-full p-1', className)}>{icon}</div>;
})}</div>
</div>}
<ul className='list'>
{data.emulator.validSources.slice(0, 3).filter(s => s.exists).map(s => <li className={classNames('list-item opacity-60 max-w-full overflow-clip text-nowrap text-ellipsis', { 'text-error': !s.exists })}>{s.binPath}</li>)}
</ul>
</div>;
}
@ -233,7 +279,7 @@ function EmulatorBadges (data: { path?: string; addOverride: (emulator: string)
{
return data.toSorted((a, b) =>
{
const sourceCompare = (b.validSource ? 1 : 0) - (a.validSource ? 1 : 0);
const sourceCompare = (b.validSources.some(s => s.exists) ? 1 : 0) - (a.validSources.some(s => s.exists) ? 1 : 0);
if (sourceCompare !== 0)
{
return sourceCompare;
@ -250,10 +296,10 @@ function EmulatorBadges (data: { path?: string; addOverride: (emulator: string)
onFocus (l, p, details) { data.onFocus?.(focusKey, ref.current, details); }
});
useDragScroll(ref);
return <Carousel scrollRef={ref} className='grid grid-flow-col overflow-x-scroll auto-cols-[16rem] grid-rows-[repeat(3,4rem)] gap-2 justify-center-safe py-4 no-scrollbar'>
return <Carousel scrollRef={ref} className='grid grid-flow-col overflow-x-scroll auto-cols-[16rem] grid-rows-[repeat(1,12rem)] gap-2 justify-center-safe py-4 no-scrollbar px-12'>
<FocusContext value={focusKey}>
{autoEmulators?.map(e => <EmulatorBadge onFocus={(k, n, d) => scrollIntoNearestParent(n)} key={e.name} isCritical={e.isCritical} addOverride={data.addOverride} pathCover={e.logo} path={e.validSource?.binPath} exists={!!e.validSource} emulator={e.name} />)}
{autoEmulators?.map(e => <EmulatorBadge onFocus={(k, n, d) => scrollIntoNearestParent(n)} key={e.name} addOverride={data.addOverride} emulator={e} />)}
</FocusContext>
</Carousel>;

4
src/mainview/routes/settings/plugins.tsx
View file

@ -48,7 +48,9 @@ function RouteComponent ()
{
return <>
<div className="divider">{source === 'builtin' ? "Built In" : "Store"}</div>
{plugins.map(p => <Plugin key={p.name} plugin={p} setEnabled={(v) => pluginMutation.mutate({ id: p.name, enabled: v })} />)}
<div className='flex flex-col gap-2'>
{plugins.map(p => <Plugin key={p.name} plugin={p} setEnabled={(v) => pluginMutation.mutate({ id: p.name, enabled: v })} />)}
</div>
</>;
})}
</>;

23
src/mainview/routes/store/details.emulator.$id.tsx
View file

@ -11,7 +11,7 @@ import Shortcuts from "@/mainview/components/Shortcuts";
import { AnimatedBackground } from "@/mainview/components/AnimatedBackground";
import { systemApi } from "@/mainview/scripts/clientApi";
import { Button } from "@/mainview/components/options/Button";
import { ChevronDown, Cpu, Download, Gamepad2, Info, Settings, Trash2, TriangleAlert, WandSparkles } from "lucide-react";
import { ChevronDown, Cpu, Download, Gamepad2, Info, Puzzle, Settings, Trash2, TriangleAlert, WandSparkles } from "lucide-react";
import { ContextList, DialogEntry, useContextDialog } from "@/mainview/components/ContextDialog";
import { RPC_URL } from "@/shared/constants";
import Screenshots from "@/mainview/components/Screenshots";
@ -33,7 +33,7 @@ export const Route = createFileRoute('/store/details/emulator/$id')({
async loader (ctx)
{
ctx.context.queryClient.prefetchQuery(storeEmulatorDetailsQuery(ctx.params.id));
ctx.context.queryClient.prefetchQuery(storeEmulatorsRecommendedQuery);
ctx.context.queryClient.prefetchQuery(storeEmulatorsRecommendedQuery(ctx.params.id));
ctx.context.queryClient.prefetchQuery(gamesRecommendedBasedOnEmulatorQuery(ctx.params.id));
}
});
@ -208,7 +208,7 @@ function TitleArea (data: {
}
};
installButtonContent = <><span className="loading loading-spinner loading-lg"></span>{installState ? status.install[installState] : biosDownloadState ? status.bios[biosDownloadState] : undefined}</>;
} else if (data.emulator.validSource)
} else if (data.emulator.validSources.some(s => s.exists))
{
installButtonContent = <><Settings /> Options</>;
} else if (data.emulator.downloads.length > 0)
@ -235,10 +235,10 @@ function TitleArea (data: {
<div className="flex flex-col grow gap-1 sm:portrait:items-center md:items-start">
<h1 className="text-4xl font-semibold text-shadow-md">{data.emulator?.name ?? <div className="skeleton h-10 w-84" />}</h1>
<div className="flex gap-2">
{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 className="size-6 p-1 bg-base-200 rounded-full" src={`${RPC_URL(__HOST__)}${icon}`} />}
{!!iconUrl && <img className="size-6 p-1 bg-base-200 rounded-full" src={`${RPC_URL(__HOST__)}${iconUrl}`} />}
<p className="text-nowrap text-ellipsis overflow-hidden dark:text-shadow-lg">{name}</p>
</div>;
}) ?? <><div className="skeleton h-4 w-48" /><div className="skeleton h-4 w-32" /></>}
@ -249,7 +249,7 @@ function TitleArea (data: {
{!!data.emulator?.bios?.[0] && <div className="tooltip" data-tip="Has BIOS">
<div className="flex items-center justify-center bg-base-200 p-2 rounded-full"><Cpu className="size-5" /></div>
</div>}
{data.emulator && !!data.emulator.integration && data.emulator.validSource?.type === 'store' && <div className="tooltip" data-tip="Has Integration">
{data.emulator && !!data.emulator.integration && data.emulator.validSources.some(s => s.type === 'store') && <div className="tooltip" data-tip="Has Integration">
<div className="bg-base-200 rounded-full p-2"><WandSparkles className="size-5" /></div>
</div>}
</div>
@ -296,7 +296,7 @@ export function RouteComponent ()
});
const { data: emulator, isPending: isEmulatorPending } = useQuery(storeEmulatorDetailsQuery(id));
const { data: recommendedEmulators } = useQuery(storeEmulatorsRecommendedQuery);
const { data: recommendedEmulators } = useQuery(storeEmulatorsRecommendedQuery(id));
const { data: recommendedGames } = useQuery(gamesRecommendedBasedOnEmulatorQuery(id));
useShortcuts(focusKey, () => [{
@ -323,14 +323,19 @@ export function RouteComponent ()
if (emulator.keywords)
stats.push({ label: "Tags", content: emulator.keywords });
stats.push({ label: "Systems", content: emulator.systems.map(s => s.name) });
stats.push(...emulator.sources.flatMap(s => [{ label: "Source", content: s.type, icon: emulatorStatusIcons[s.type] }, { label: "Location", content: s.binPath }]));
stats.push(...emulator.sources.flatMap(s => [{
label: "Source", content: <div className="flex flex-wrap gap-1 p-1">
<div className="flex gap-1 flex-1">{emulatorStatusIcons[s.type]}{s.type}:</div>
<div className="grow text-base-content/40">{s.binPath}</div>
</div>
}]));
if (emulator.bios)
stats.push({
label: "Bios", content: emulator.bios && emulator.bios.length > 0 ? emulator.bios : <div className="text-warning font-semibold">Missing</div>
});
if (emulator.integration)
{
stats.push({ label: "Integration", content: `${emulator.integration.name} (${emulator.integration.version})` });
stats.push({ label: "Integration", icon: <Puzzle />, content: `${emulator.integration.name} (${emulator.integration.version})` });
}
}

6
src/mainview/routes/store/tab/emulators.tsx
View file

@ -49,7 +49,11 @@ function RouteComponent ()
id={data.name}
key={data.name}
emulator={data}
onFocus={({ node, details }) => { node.scrollIntoView({ behavior: details.instant ? 'instant' : 'smooth', block: 'center' }); }}
onFocus={({ id, node, details }) =>
{
node.scrollIntoView({ behavior: details.instant ? 'instant' : 'smooth', block: 'center' });
storeContext.prefetchDetails('emulator', 'store', id);
}}
onSelect={(id, focus) => storeContext.showDetails('emulator', 'store', id, focus)}
/>
)) ?? Array.from({ length: 10 }).map((_, i) => <div key={i} className="skeleton rounded-3xl" />)}

10
src/mainview/routes/store/tab/games.tsx
View file

@ -1,12 +1,13 @@
import { FocusContext, getCurrentFocusKey, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { createFileRoute, useSearch } from '@tanstack/react-router';
import { Gamepad2 } from 'lucide-react';
import { useEffect } from 'react';
import { useContext, useEffect } from 'react';
import { useInfiniteQuery } from '@tanstack/react-query';
import FrontEndGameCard from '@/mainview/components/FrontEndGameCard';
import { GetFocusedElement } from '@/mainview/scripts/spatialNavigation';
import LoadMoreButton from '@/mainview/components/LoadMoreButton';
import { storeGamesInfiniteQuery } from '@queries/store';
import { StoreContext } from '@/mainview/scripts/contexts';
export const Route = createFileRoute('/store/tab/games')({
component: RouteComponent
@ -18,6 +19,7 @@ function RouteComponent ()
const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "main-area", preferredChildFocusKey: focus });
const { data, fetchNextPage, isFetchingNextPage, isFetching } = useInfiniteQuery(storeGamesInfiniteQuery);
const storeContext = useContext(StoreContext);
useEffect(() =>
{
@ -45,7 +47,11 @@ function RouteComponent ()
</div>
<div className="grid grid-cols-[repeat(auto-fill,18rem)] auto-rows-[21rem] py-2 md:px-4 gap-4 justify-center-safe">
{data?.pages.flatMap((page) => (
page.data.map((g, i) => <FrontEndGameCard onFocus={handleFocus} key={g.id.id} game={g} index={i} />))
page.data.map((g, i) => <FrontEndGameCard onFocus={(k, n, d) =>
{
storeContext.prefetchDetails('game', g.id.source, g.id.id);
handleFocus(k, n, d);
}} key={g.id.id} game={g} index={i} />))
) ?? Array.from({ length: 20 }).map((_, i) => <div key={i} className="flex flex-col gap-4">
<div className="skeleton grow w-full"></div>
<div className="skeleton h-4 w-[80%]"></div>

4
src/mainview/routes/store/tab/index.tsx
View file

@ -107,9 +107,9 @@ function Main (data: { games?: FrontEndGameTypeDetailed[]; })
export function RouteComponent ()
{
const { focus } = useSearch({ from: '/store/tab' });
const { data: crucialEmulators, isSuccess } = useQuery({ ...autoEmulatorsQuery, select: (data) => data.filter(e => !e.validSource && e.isCritical) });
const { data: crucialEmulators, isSuccess } = useQuery({ ...autoEmulatorsQuery, select: (data) => data.filter(e => !e.validSources.some(s => s.exists) && e.isCritical) });
const { data: featuredGames } = useQuery(storeFeaturedGamesQuery);
const { data: recommendedEmulators } = useQuery(storeEmulatorsRecommendedQuery);
const { data: recommendedEmulators } = useQuery(storeEmulatorsRecommendedQuery());
const { focusKey, ref, focusSelf } = useFocusable({ focusKey: 'main-area', preferredChildFocusKey: focus ?? "recommended-emulators" });
const storeContext = useContext(StoreContext);

18
src/mainview/routes/store/tab/route.tsx
View file

@ -3,9 +3,12 @@ import { FilterUI } from '@/mainview/components/Filters';
import { HeaderUI } from '@/mainview/components/Header';
import Shortcuts from '@/mainview/components/Shortcuts';
import { StoreContext } from '@/mainview/scripts/contexts';
import { gameQuery } from '@/mainview/scripts/queries/romm';
import { storeEmulatorDetailsQuery } from '@/mainview/scripts/queries/store';
import { GamePadButtonCode, useShortcutContext, useShortcuts } from '@/mainview/scripts/shortcuts';
import { mobileCheck, useStickyDataAttr } from '@/mainview/scripts/utils';
import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { useQueryClient } from '@tanstack/react-query';
import { useMatchRoute } from '@tanstack/react-router';
import { createFileRoute, Outlet } from '@tanstack/react-router';
import { zodValidator } from '@tanstack/zod-adapter';
@ -78,6 +81,7 @@ function RouteComponent ()
preferredChildFocusKey: 'top-area',
forceFocus: true
});
const queryClient = useQueryClient();
const headerRef = useRef(null);
const sentinelRef = useRef(null);
const filters: Record<string, FilterOption> = {
@ -110,11 +114,23 @@ function RouteComponent ()
};
const handlePrefetch = (type: string, source: string, id: string) =>
{
if (type === 'emulator')
{
queryClient.prefetchQuery(storeEmulatorDetailsQuery(id));
}
else if (type === 'game')
{
queryClient.prefetchQuery(gameQuery(source, id));
}
};
const isMobile = mobileCheck();
useStickyDataAttr(headerRef, sentinelRef, ref);
return <div ref={ref} className='overflow-y-scroll w-screen h-screen' >
<StoreContext value={{ showDetails: handleDetails }} >
<StoreContext value={{ showDetails: handleDetails, prefetchDetails: handlePrefetch }} >
<FocusContext.Provider value={focusKey}>
<div className="relative flex flex-col min-h-screen text-base-content z-10" >
<div ref={sentinelRef} className="h-0" />

4
src/mainview/scripts/contexts.ts
View file

@ -1,8 +1,10 @@
import { SystemInfoType } from "@/shared/constants";
import { FocusDetails } from "@noriginmedia/norigin-spatial-navigation";
import { createContext } from "react";
export const StoreContext = createContext({} as {
showDetails: (type: 'emulator' | 'game', source: string, id: string, focusSource: string) => void;
prefetchDetails: (type: 'emulator' | 'game', source: string, id: string) => void;
forceFocus?: string;
});
@ -32,6 +34,8 @@ export const FilePickerContext = createContext<{
activeDrive: Drive | undefined;
}>({} as any);
export const SystemInfoContext = createContext({} as SystemInfoType | undefined);
export const GameDetailsContext = createContext<{
update: () => void;
}>({} as any);

50
src/mainview/scripts/queries/romm.ts
View file

@ -22,16 +22,21 @@ export const gameQuery = (source: string, id: string) => queryOptions({
return data;
},
});
export const rommLogoutMutation = mutationOptions({ mutationKey: ["romm", "auth", "logout"], mutationFn: () => rommApi.api.romm.logout.post() });
export const rommLogoutMutation = mutationOptions({ mutationKey: ["romm", "auth", "logout"], mutationFn: () => rommApi.api.romm.logout.romm.post() });
export const rommQrLoginMutation = mutationOptions({
mutationKey: ['login', 'qr', 'cancel'],
mutationFn: () => rommApi.api.romm.login.romm.post()
mutationFn: async () =>
{
const { data, error } = await rommApi.api.romm.login.romm.qr.post();
if (error) throw error;
return data;
}
});
export const rommLoginMutation = mutationOptions({
mutationKey: ["romm", "login"],
mutationFn: async (data: z.infer<typeof RommLoginDataSchema>) =>
{
const { error } = await rommApi.api.romm.login.post({ username: data.username, password: data.password, host: data.hostname });
const { error } = await rommApi.api.romm.login.romm.post({ username: data.username, password: data.password, host: data.hostname });
if (error) throw error;
},
onSuccess: (d, v, r, c) =>
@ -43,9 +48,14 @@ export const rommLoginMutation = mutationOptions({
console.error(e);
},
});
export const rommUserQuery = () => queryOptions({
...getCurrentUserApiUsersMeGetOptions(),
queryKey: ['romm', 'auth', "login"] as any,
export const rommUserQuery = queryOptions({
queryKey: ['romm', 'auth', "login"],
queryFn: async () =>
{
const { data, error } = await rommApi.api.romm.user.romm.get();
if (error) throw error;
return data;
},
refetchOnWindowFocus: false,
retry: 0
});
@ -54,19 +64,39 @@ export const rommGetOptionsQuery = () => queryOptions({
refetchInterval: 30000,
retry: false,
});
export const rommHasPasswordQuery = queryOptions({ queryKey: ['romm', 'auth', 'passLength'], queryFn: () => rommApi.api.romm.login.get().then(d => d.data?.hasPassword as boolean) });
export const rommLoggedInQuery = queryOptions({
queryKey: ['romm', 'auth', 'passLength'], queryFn: async () =>
{
const { data, error } = await rommApi.api.romm.login.romm.get();
if (error) throw error;
return data;
}
});
export const rommHostnameQuery = queryOptions({ queryKey: ['romm', 'auth', 'hostname'], queryFn: () => settingsApi.api.settings({ id: 'rommAddress' }).get().then(d => d.data?.value as string) });
export const rommUsernameQuery = queryOptions({ queryKey: ['romm', 'auth', 'username'], queryFn: () => settingsApi.api.settings({ id: 'rommUser' }).get().then(d => d.data?.value as string) });
export const deleteGameMutation = (id: FrontEndId) => mutationOptions({
mutationKey: ['delete', id],
mutationFn: () => rommApi.api.romm.game({ source: id.source })({ id: id.id }).delete()
});
export const getCollectionsQuery = () => queryOptions({
...getCollectionsApiCollectionsGetOptions(),
export const getCollectionsQuery = queryOptions({
queryKey: ['collections', 'all'],
queryFn: async () =>
{
const { data, error } = await rommApi.api.romm.collections.get();
if (error) throw error;
return data;
},
refetchOnWindowFocus: false,
staleTime: DefaultRommStaleTime
});
export const getCollectionQuery = (id: number) => queryOptions({ ...getCollectionApiCollectionsIdGetOptions({ path: { id } }) });
export const getCollectionQuery = (source: string, id: string) => queryOptions({
queryKey: ['collection', source, id], queryFn: async () =>
{
const { data, error } = await rommApi.api.romm.collection({ source })({ id }).get();
if (error) throw error;
return data;
}, staleTime: DefaultRommStaleTime
});
export const platformQuery = (source: string, id: string) => queryOptions({
queryKey: ['platform', source, id], queryFn: async () =>
{

6
src/mainview/scripts/queries/store.ts
View file

@ -18,10 +18,10 @@ export const storeFeaturedGamesQuery = queryOptions({
return data;
}
});
export const storeEmulatorsRecommendedQuery = queryOptions({
queryKey: ['store-emulators', 'recommended'], queryFn: async () =>
export const storeEmulatorsRecommendedQuery = (id?: string) => queryOptions({
queryKey: ['store-emulators', 'recommended', id ?? 'all'], queryFn: async () =>
{
const { data, error } = await storeApi.api.store.emulators.get({ query: { limit: 6, missing: true, orderBy: 'importance' } });
const { data, error } = await storeApi.api.store.emulators.get({ query: { limit: 6, missing: true, orderBy: 'importance', related: id } });
if (error) throw error;
return data;
}

18
src/mainview/scripts/spatialNavigation.ts
View file

@ -9,6 +9,8 @@ import
UseFocusableResult,
} from "@noriginmedia/norigin-spatial-navigation";
import { RefObject, useEffect, useState } from "react";
import { focusQueue, Router } from "..";
import { scrollIntoViewHandler } from "./utils";
init({
shouldFocusDOMNode: false,
@ -21,6 +23,7 @@ let sortSiblingsByPriority = SpatialNavigation.sortSiblingsByPriority.bind(Spati
let removeFocusable = SpatialNavigation.removeFocusable.bind(SpatialNavigation);
let setFocus = SpatialNavigation.setFocus.bind(SpatialNavigation);
let setCurrentFocusedKey = SpatialNavigation.setCurrentFocusedKey.bind(SpatialNavigation);
let updateLayout = SpatialNavigation.updateLayout.bind(SpatialNavigation);
type SaveFocusType = "session" | "local";
@ -87,6 +90,11 @@ export function useGlobalFocus ()
return focused;
}
SpatialNavigation.updateLayout = (focusKey) =>
{
updateLayout(focusKey);
};
SpatialNavigation.setFocus = (newFocusKey, focusDetails) =>
{
setFocus(newFocusKey, focusDetails);
@ -113,6 +121,16 @@ SpatialNavigation.sortSiblingsByPriority = (siblings, currentLayout, direction,
SpatialNavigation.addFocusable = (toAdd) =>
{
addFocusable(toAdd);
const queuedFocus = focusQueue[0];
if (queuedFocus === toAdd.focusKey)
{
// Use double request to account for dynamic layouts
requestAnimationFrame(() => requestAnimationFrame(() =>
{
setFocus(queuedFocus, { instant: true });
}));
}
const component: {
lastFocusedChildKey?: string;
preferredChildFocusKey?: string;

13
src/mainview/scripts/utils.ts
View file

@ -1,22 +1,9 @@
import { LocalSettingsSchema, LocalSettingsType } from "@/shared/constants";
import { doesFocusableExist, getCurrentFocusKey } from "@noriginmedia/norigin-spatial-navigation";
import { RefObject, useEffect, useRef, useState } from "react";
import { useLocalStorage } from "usehooks-ts";
import { jobsApi } from "./clientApi";
import { JobsAPIType } from "@/bun/api/rpc";
import { Router } from "..";
import Elysia from "elysia";
import { Prettify } from "elysia/types";
import z from "zod";
export function selfFocusSmart (shouldFocus: boolean, focusSelf: () => void)
{
if (shouldFocus && (!getCurrentFocusKey() || !doesFocusableExist(getCurrentFocusKey())))
{
console.log("Self Focus");
focusSelf();
}
}
export type ScrollSaveParams = {
id: string;