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

fix: logins now refresh on plugins load

Browse source 
feat: Added tar archive support
fix: Downloaded games and emulator execute permission now updated
fix: Fixed rclone for linux
fix: on screen keyaboard only now shows up when using a gamepad or touch
This commit is contained in:
Simeon Radivoev 2026-04-21 23:21:50 +03:00
parent 6aacec2c0d
commit 7bd0ebdcca
Signed by: simeonradivoev
GPG key ID: C16C2132A7660C8E
39 changed files with 523 additions and 275 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -63,7 +63,7 @@ export function CardList (data: {
onSelectGame?: (id: string) => void;
focus?: string;
className?: string;
finalElement?: JSX.Element;
finalElement?: JSX.Element | JSX.Element[];
saveChildFocus?: 'session' | 'local';
} & FocusParams)
{

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

@ -1,7 +1,7 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import { ContextList, DialogEntry } from "./ContextDialog";
import { systemApi } from "../scripts/clientApi";
import { useContext, useRef, useState } from "react";
import { FocusEventHandler, useContext, useRef, useState } from "react";
import path from "pathe";
import { Check, File, Folder, FolderInput, FolderOutput, FolderPlus, HardDrive, Usb, X } from "lucide-react";
import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
@ -15,6 +15,7 @@ import toast from "react-hot-toast";
import { FilePickerContext } from "../scripts/contexts";
import useActiveControl from "../scripts/gamepads";
import { createFolderMutation, drivesQuery, filesQuery } from "@queries/system";
import { showKeyboardHandler } from "../scripts/utils";
function List (data: {
id: string,
@ -87,15 +88,16 @@ function List (data: {
function NewFolderInput (data: { id: string, name: string | undefined, setName: (name: string) => void; className?: string; })
{
const inputRef = useRef<HTMLInputElement>(null);
const { control } = useActiveControl();
const { ref, focused, focusSelf } = useFocusable({
focusKey: data.id,
onEnterPress: () => inputRef.current?.focus(),
onBlur: () => inputRef.current?.blur(),
});
const handleFocus = () =>
const handleFocus: FocusEventHandler<HTMLInputElement> = (e) =>
{
focusSelf();
systemApi.api.system.show_keyboard.post();
showKeyboardHandler(control as any, e.target);
};
return <div className={data.className} ref={ref}>
<input ref={inputRef}

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

@ -17,7 +17,8 @@ export interface GameListParams extends FocusParams
onGameSelect?: (id: FrontEndId, source: string | null, sourceId: string | null) => void;
focus?: string;
className?: string;
finalElement?: JSX.Element;
finalElement?: JSX.Element | JSX.Element[];
emptyElement?: JSX.Element | JSX.Element[];
saveChildFocus?: "session" | "local";
}
@ -52,6 +53,25 @@ export function GameList (data: GameListParams)
navigator({ to: '/game/$source/$id', params: { id: String(g.source_id ?? g.id.id), source: g.source ?? g.id.source } });
};
const finalElement: JSX.Element[] = [];
if (!games.isFetching && !!games.data && games.data.games.length <= 0)
{
if (Array.isArray(data.emptyElement))
{
finalElement.push(...data.emptyElement);
} else if (data.emptyElement)
{
finalElement.push(data.emptyElement);
}
}
if (Array.isArray(data.finalElement))
{
finalElement.push(...data.finalElement);
} else if (data.finalElement)
{
finalElement.push(data.finalElement);
}
return (
<>
<CardList
@ -60,7 +80,7 @@ export function GameList (data: GameListParams)
grid={data.grid}
className={data.className}
onFocus={data.onFocus}
finalElement={data.finalElement}
finalElement={finalElement}
saveChildFocus={data.saveChildFocus}
focus={data.focus}
games={games.data?.games

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

@ -153,7 +153,7 @@ function WiFiStatus ()
return systemContext && systemContext.wifiConnections.length > 0 ? <div>
{systemContext.wifiConnections.map(w =>
{
const className = "w-6 h-6";
const className = "w-10 h-10";
let icon = <Wifi className={className} />;
if (w.signalLevel >= -60)
icon = <Wifi className={className} />;
@ -164,7 +164,7 @@ function WiFiStatus ()
else if (w.signalLevel >= -90)
icon = <WifiZero className={className} />;
return <div className="tooltip" data-tip={w.signalLevel}>
return <div className="tooltip tooltip-bottom" data-tip={w.signalLevel}>
{icon}
</div>;
})}

9
src/mainview/components/HeaderSearchField.tsx
View file

@ -1,10 +1,13 @@
import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
import { Ref, RefObject, useEffect, useRef, useState } from "react";
import { FocusEventHandler, Ref, RefObject, useEffect, useRef, useState } from "react";
import { GamePadButtonCode, useShortcuts } from "../scripts/shortcuts";
import { oneShot } from "../scripts/audio/audio";
import { Search } from "lucide-react";
import { RoundButton } from "./RoundButton";
import { useEventListener } from "usehooks-ts";
import { systemApi } from "../scripts/clientApi";
import { showKeyboardHandler } from "../scripts/utils";
import useActiveControl from "../scripts/gamepads";
function SearchInput (data: {
id: string;
@ -16,6 +19,7 @@ function SearchInput (data: {
onSubmit: (search: string | undefined) => void;
} & FocusParams)
{
const { control } = useActiveControl();
const { ref, focusKey } = useFocusable({
onBlur: () => inputRef.current?.blur(),
onFocus: (l, p, d) =>
@ -59,6 +63,8 @@ function SearchInput (data: {
data.onSubmit?.(undefined);
}, inputRef as any);
const handlInputFocus: FocusEventHandler<HTMLInputElement> = e => showKeyboardHandler(control as any, e.target);
return <label ref={ref} onFocus={data.onInputFocus} className='input rounded-full input-lg w-full max-w-xs has-focus:bg-base-300 ring-primary focused:ring-7 has-focus:ring-7 has-focus:ring-base-content'>
<Search />
<input
@ -68,6 +74,7 @@ function SearchInput (data: {
setLocalSearch(data.search);
}}
autoFocus={data.compact}
onFocus={handlInputFocus}
ref={inputRef}
value={localSearch ?? ""}
onChange={v => setLocalSearch(v.target.value)}

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

@ -2,7 +2,7 @@ import { setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation
import { FOCUS_KEYS } from "../scripts/types";
import { useIntersectionObserver } from "usehooks-ts";
export default function LoadMoreButton (data: { isFetching: boolean; lastId?: FrontEndId; } & FocusParams & InteractParams)
export default function LoadMoreButton (data: { isFetching: boolean; hidden?: boolean, lastId?: FrontEndId; } & FocusParams & InteractParams)
{
const handleAction = (event?: Event) =>
{
@ -12,7 +12,7 @@ export default function LoadMoreButton (data: { isFetching: boolean; lastId?: Fr
};
const { ref, focusKey, focused } = useFocusable({
focusable: !data.isFetching,
focusable: !data.isFetching && data.hidden !== true,
focusKey: 'load-more-btn',
onFocus: (_l, _p, details) => data.onFocus?.(focusKey, ref.current, details),
onEnterPress: handleAction
@ -34,5 +34,5 @@ export default function LoadMoreButton (data: { isFetching: boolean; lastId?: Fr
{
ref.current = r;
intersct(r);
}} className='flex bg-base-100 game-card focusable focusable-accent focusable-hover text-2xl justify-center items-center cursor-pointer' onClick={e => handleAction(e.nativeEvent)} id='load-more-btn'>{data.isFetching ? <span className="loading loading-spinner loading-xl"></span> : "Load More"}</div>;
}} className='flex data-[hidden=true]:invisible bg-base-100 game-card focusable focusable-accent focusable-hover text-2xl justify-center items-center cursor-pointer' data-hidden={data.hidden} onClick={e => handleAction(e.nativeEvent)} id='load-more-btn'>{data.isFetching ? <span className="loading loading-spinner loading-xl"></span> : "Load More"}</div>;
}

16
src/mainview/components/options/OptionInput.tsx
View file

@ -6,6 +6,8 @@ import { systemApi } from "../../scripts/clientApi";
import { CheckIcon, X } from "lucide-react";
import { oneShot } from "@/mainview/scripts/audio/audio";
import { GamePadButtonCode, Shortcut, useShortcuts } from "@/mainview/scripts/shortcuts";
import { showKeyboardHandler } from "@/mainview/scripts/utils";
import useActiveControl from "@/mainview/scripts/gamepads";
export function OptionInput (data: {
name: string;
@ -35,6 +37,7 @@ export function OptionInput (data: {
}
oneShot('click');
};
const { control } = useActiveControl();
const [inputFocused, setInputFocused] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const { ref, focusKey } = useFocusable({
@ -99,20 +102,11 @@ export function OptionInput (data: {
return shortcuts;
}, [inputFocused, data.type]);
const handleInputFocus = () =>
const handleInputFocus: FocusEventHandler<HTMLInputElement> = (e) =>
{
option.focus();
setInputFocused(true);
if (inputRef.current)
{
var rect = inputRef.current?.getBoundingClientRect();
systemApi.api.system.show_keyboard.post({
XPosition: rect.x,
YPosition: rect.y,
Width: rect.width,
Height: rect.height
});
}
showKeyboardHandler(control as any, e.target);
};
const handleInputBlur = (e: any) =>

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

@ -10,6 +10,9 @@ import
OctagonAlert,
Maximize,
Store,
LayoutGrid,
PlusCircle,
Plus,
} from "lucide-react";
import
{
@ -39,7 +42,7 @@ import { GamePadButtonCode, useShortcutContext, useShortcuts } from "../scripts/
import z from "zod";
import CollectionList from "../components/CollectionList";
import { zodValidator } from '@tanstack/zod-adapter';
import { mobileCheck, useDragScroll } from "../scripts/utils";
import { mobileCheck, scrollIntoNearestParent, scrollIntoViewHandler, useDragScroll } from "../scripts/utils";
import { AnimatedBackgroundContext } from "../scripts/contexts";
import Carousel from "../components/Carousel";
import { closeMutation } from "@queries/system";
@ -48,6 +51,7 @@ import { oneShot } from "../scripts/audio/audio";
import { FloatingShortcuts } from "../components/Shortcuts";
import SelectMenu from "../components/SelectMenu";
import HeaderSearchField from "../components/HeaderSearchField";
import CardElement from "../components/CardElement";
export const Route = createFileRoute("/")({
component: ConsoleHomeUI,
@ -91,6 +95,35 @@ function HomeListError (data: { focused: boolean; })
</div></div>;
}
function Preview (data: { index: number; children?: any; })
{
const isMobile = mobileCheck();
return <div
className="flex p-6 bg-base-100 justify-center items-center aspect-3/4"
style={{
background: `linear-gradient(
color-mix(in srgb, var(--color-base-content) 60%, transparent),
color-mix(in srgb, var(--color-base-300) 60%, transparent)
), url(https://picsum.photos/id/${10 + data.index}/100/100.webp?blur=10) center / cover`,
backgroundBlendMode: isMobile ? undefined : "screen",
boxShadow: isMobile ? undefined : 'inset 0 0 32px rgba(0,0,0,0.6)'
}}
>
{data.children}
</div>;
}
function GetStoreGamesCard ()
{
const router = useRouter();
const handleNavigate = () =>
{
router.navigate({ to: '/store/tab/games' });
};
return <CardElement onFocus={scrollIntoViewHandler({ behavior: "smooth", inline: "center" })} badges={[<Search className="size-8" />]} onAction={handleNavigate} title="Gameflow Store" subtitle="Get Free Games" preview={<Preview index={43} ><Store className="not-mobile:drop-shadow-md in-focus:animate-rotate size-32" /></Preview>} focusKey='store-games-btn' index={0} id="store-games-btn" />;
}
function ShowAllGamesCard ()
{
const router = useRouter();
@ -98,8 +131,7 @@ function ShowAllGamesCard ()
{
router.navigate({ to: '/games' });
};
const { ref } = useFocusable({ focusKey: 'all-games-btn', onEnterPress: handleNavigate });
return <div ref={ref} onClick={handleNavigate} className="flex focusable focusable-primary justify-center items-center bg-base-300/80 rounded-3xl font-semibold w-(--game-card-width) h-(--game-card-height) focusable-hover cursor-pointer">All Games</div>;
return <CardElement onFocus={scrollIntoViewHandler({ behavior: "smooth", inline: "center" })} onAction={handleNavigate} title="All Games" preview={<Preview index={17} ><LayoutGrid className="not-mobile:drop-shadow-md in-focus:animate-rotate size-32" /></Preview>} focusKey='all-games-btn' index={0} id="all-games-btn" />;
}
function HomeList (data: {
@ -165,7 +197,8 @@ function HomeList (data: {
id="games-list"
setBackground={bg.setBackground}
filters={{ limit: 12, orderBy: 'activity' }}
finalElement={<ShowAllGamesCard />}
finalElement={[<GetStoreGamesCard />, <ShowAllGamesCard />]}
emptyElement={[]}
/>
<AutoFocus parentKey={focusKey} focus={focusSelf} delay={10} />
</>;

3
src/mainview/routes/launcher.$source.$id.tsx
View file

@ -10,7 +10,8 @@ import { useRef } from 'react';
export const Route = createFileRoute('/launcher/$source/$id')({
component: RouteComponent,
staticData: {
enterSound: 'launch'
enterSound: 'launch',
missNavSound: false
},
});

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

@ -24,7 +24,7 @@ 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, rommLoggedInQuery, rommHostnameQuery, rommLoginMutation, rommLogoutMutation, rommQrLoginMutation, rommUsernameQuery, rommUserQuery } from "@queries/romm";
import { rommGetOptionsQuery, rommLoggedInQuery, rommHostnameQuery, rommLoginMutation, rommLogoutMutation, rommQrLoginMutation, rommUsernameQuery, rommUserQuery, invalidateLogin } from "@queries/romm";
import { systemApi } from "@/mainview/scripts/clientApi";
export const Route = createFileRoute("/settings/accounts")({
@ -59,10 +59,7 @@ function TwitchLogin ()
{
const loginStatus = useQuery(twitchLoginVerificationQuery);
const loginMutation = useMutation({
...twitchLoginMutation,
onSuccess: () => loginStatus.refetch()
});
const loginMutation = useMutation(twitchLoginMutation);
const logoutMutation = useMutation({ ...twitchLogoutMutation, onSuccess: () => loginStatus.refetch() });
@ -100,8 +97,8 @@ function LoginControls (data: {})
...rommLogoutMutation,
onSuccess: async (d, v, r, c) =>
{
user.refetch();
await c.client.invalidateQueries({ queryKey: ["romm", "auth"] });
await user.refetch();
await invalidateLogin(c.client);
await router.navigate({ replace: true });
}
});

2
src/mainview/routes/settings/plugin.$source.tsx
View file

@ -42,7 +42,7 @@ function PluginAction (data: { id: string, title: string | undefined, descriptio
<div>{data.title ?? data.id}</div>
<div className='text-sm text-base-content/40 text-wrap'>{data.description}</div>
</div>}>
<Button id={`${data.id}-btn`} onAction={e => action.mutate()} >{data.action}</Button>
<Button id={`${data.id}-btn`} onAction={e => action.mutate()} >{action.isPending && <span className="loading loading-spinner loading-lg"></span>}{data.action}</Button>
</OptionSpace>;
}

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

@ -71,6 +71,7 @@ function RouteComponent ()
</div>
<div className="pl-12">
<CardList grid finalElement={<LoadMoreButton
hidden
lastId={data?.pages.at(-1)?.data.at(-1)?.id}
onFocus={handleFocus}
isFetching={isFetchingNextPage || isFetching}

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

@ -80,11 +80,11 @@ function Main (data: { games?: FrontEndGameTypeDetailed[]; })
<div className='flex sm:portrait:flex-wrap sm:portrait:grow gap-4 max-h-full justify-center'>
<div className='relative rounded-3xl max-w-xs h-48 overflow-hidden shadow-lg'>
<div className='flex absolute bottom-4 left-4 size-8 bg-base-content text-base-100 rounded-full items-center justify-center shadow-lg '><HardDrive /></div>
{!!data.games && <img className='object-cover w-full h-full ' src={`${RPC_URL(__HOST__)}${data.games[selectedGame].path_covers[0]}`} />}
{!!data.games && <img className='object-cover w-full h-full' src={`${RPC_URL(__HOST__)}${data.games[selectedGame].path_covers[0]}`} />}
</div>
<div className='flex flex-col gap-2 py-3 max-w-md'>
<h1 className='font-semibold text-3xl text-shadow-md'>{game.name}</h1>
<p className='overflow-hidden text-wrap text-ellipsis text-base-content/60 text-shadow-md'>{game.summary}</p>
<p className='overflow-hidden text-wrap text-ellipsis wrap-anywhere max-h-24 text-base-content/60 text-shadow-md'>{game.summary}</p>
</div>
</div>
</div>

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

@ -1,6 +1,6 @@
import { DefaultRommStaleTime, GameListFilterType, RommLoginDataSchema } from "@/shared/constants";
import { rommApi, settingsApi } from "../clientApi";
import { InvalidateQueryFilters, mutationOptions, QueryFilters, queryOptions, useMutation } from "@tanstack/react-query";
import { InvalidateQueryFilters, mutationOptions, QueryClient, QueryFilters, queryOptions, useMutation } from "@tanstack/react-query";
import z from "zod";
import { statsApiStatsGetOptions } from "@/clients/romm/@tanstack/react-query.gen";
@ -23,6 +23,20 @@ export const gameQuery = (source: string, id: string) => queryOptions({
},
});
export const rommLogoutMutation = mutationOptions({ mutationKey: ["romm", "auth", "logout"], mutationFn: () => rommApi.api.romm.logout.romm.post() });
export const invalidateLogin = (client: QueryClient) =>
{
return client.invalidateQueries({
predicate (query)
{
return query.queryKey.includes('auth')
|| query.queryKey.includes('games')
|| query.queryKey.includes('game')
|| query.queryKey.includes('platform')
|| query.queryKey.includes('platforms')
|| query.queryKey.includes('collections');
},
});
};
export const rommQrLoginMutation = mutationOptions({
mutationKey: ['login', 'qr', 'cancel'],
mutationFn: async () =>
@ -30,7 +44,11 @@ export const rommQrLoginMutation = mutationOptions({
const { data, error } = await rommApi.api.romm.login.romm.qr.post();
if (error) throw error;
return data;
}
},
onSuccess: (d, v, r, c) =>
{
invalidateLogin(c.client);
},
});
export const rommLoginMutation = mutationOptions({
mutationKey: ["romm", "login"],
@ -41,7 +59,7 @@ export const rommLoginMutation = mutationOptions({
},
onSuccess: (d, v, r, c) =>
{
c.client.invalidateQueries({ queryKey: ['romm', 'auth'] });
invalidateLogin(c.client);
},
onError: (e) =>
{

13
src/mainview/scripts/queries/settings.ts
View file

@ -2,6 +2,7 @@ import { mutationOptions, queryOptions } from "@tanstack/react-query";
import { getErrorMessage } from "react-error-boundary";
import toast from "react-hot-toast";
import { rommApi, settingsApi } from "../clientApi";
import { invalidateLogin } from "./romm";
export const changeDownloadsMutation = mutationOptions({
mutationKey: ["setting", "downloads"],
@ -29,21 +30,25 @@ export const autoEmulatorsQuery = queryOptions({
}
});
export const twitchLogoutMutation = mutationOptions({
mutationKey: ['twitch', 'logout'],
mutationKey: ['twitch', 'auth', 'logout'],
mutationFn: () =>
{
return rommApi.api.romm.logout.twitch.post();
}
});
export const twitchLoginMutation = mutationOptions({
mutationKey: ['twitch', 'login'],
mutationKey: ['twitch', 'auth', 'login'],
mutationFn: (openInBrowser: boolean) =>
{
return rommApi.api.romm.login.twitch.post({ openInBrowser });
}
},
onSuccess (data, variables, onMutateResult, context)
{
invalidateLogin(context.client);
},
});
export const twitchLoginVerificationQuery = queryOptions({
queryKey: ['twitch', 'login', 'status'],
queryKey: ['twitch', 'login', 'status', 'auth'],
retry (failureCount, error)
{
if ((error as any).status === 404)

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

@ -1,7 +1,7 @@
import { LocalSettingsSchema, LocalSettingsType } from "@/shared/constants";
import { DependencyList, RefObject, useEffect, useRef, useState } from "react";
import { DependencyList, FocusEventHandler, RefObject, useEffect, useRef, useState } from "react";
import { useLocalStorage } from "usehooks-ts";
import { jobsApi } from "./clientApi";
import { jobsApi, systemApi } from "./clientApi";
import { JobsAPIType } from "@/bun/api/rpc";
import { AnyRouter, useRouter } from "@tanstack/react-router";
import { soundMap } from "./audio/audioConstants";
@ -368,4 +368,18 @@ export function useOnNavigateBack (callback: (state: { sound?: keyof typeof soun
return unsub;
}, [router]);
}
}
export function showKeyboardHandler (activeControl: string, node?: HTMLInputElement)
{
if (node && node.type !== 'checkbox' && (activeControl === 'gamepad' || activeControl === 'touch'))
{
var rect = node.getBoundingClientRect();
systemApi.api.system.show_keyboard.post({
XPosition: rect.x,
YPosition: rect.y,
Width: rect.width,
Height: rect.height
});
}
};