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

fix: Fixed issues on windows

Browse source 
feat: Implemented mouse and gamepad automatic switching
fix: Made touch screen work better on the steam deck
This commit is contained in:
Simeon Radivoev 2026-02-24 18:58:48 +02:00
parent e4df8fb9fb
commit b4a89385d0
Signed by: simeonradivoev
GPG key ID: 7611A451D2A5D37A
24 changed files with 334 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/mainview/routes/settings/directories.tsx
View file

@ -1,5 +1,5 @@
import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { Block, createFileRoute, useBlocker } from '@tanstack/react-router';
import { Block, createFileRoute } from '@tanstack/react-router';
import DownloadDirectoryOption from '@/mainview/components/options/DownloadDirectoryOption';
import { useIsMutating, useMutation, useQuery } from '@tanstack/react-query';
import { changeDownloadsMutation, downloadDrivesQuery } from '@/mainview/scripts/queries';
@ -7,12 +7,12 @@ import { DownloadsDrive } from '@/shared/constants';
import prettyBytes from 'pretty-bytes';
import classNames from 'classnames';
import { GamePadButtonCode, Shortcut, useShortcuts } from '@/mainview/scripts/shortcuts';
import { Download, FolderOpen, HardDrive, Usb } from 'lucide-react';
import { Download, FolderOpen, HardDrive, Save, Usb } from 'lucide-react';
import { twMerge } from 'tailwind-merge';
import { OptionSpace } from '@/mainview/components/options/OptionSpace';
import data from '@emulators';
import { Button } from '@/mainview/components/options/Button';
import { systemApi } from '@/mainview/scripts/clientApi';
import useActiveControl from '@/mainview/scripts/gamepads';
export const Route = createFileRoute('/settings/directories')({
component: RouteComponent,
@ -20,46 +20,54 @@ export const Route = createFileRoute('/settings/directories')({
function DriveComponent (data: { drive: DownloadsDrive; downloadsSize: number; refetchDrives: () => void; })
{
const { ref, focused, focusKey } = useFocusable({ focusKey: data.drive.device });
const { ref, focused, focusKey } = useFocusable({
focusKey: data.drive.device,
onFocus: () => (ref.current as HTMLElement)?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
});
const isMoving = useIsMutating(changeDownloadsMutation);
const usedWithoutDownlods = data.drive.used - (data.drive.isCurrentlyUsed ? data.downloadsSize : 0);
const usedPercent = usedWithoutDownlods / data.drive.size;
const usedPercentRaw = data.drive.used / data.drive.size;
const changeDownloads = useMutation({ ...changeDownloadsMutation, onSuccess: data.refetchDrives }); data.drive.unusableReason;
const shortcuts: Shortcut[] = [];
if (!data.drive.unusableReason && isMoving <= 0)
const valid = !data.drive.unusableReason && isMoving <= 0;
const handleAction = () => changeDownloads.mutate(data.drive.mountPoint);
if (valid)
{
shortcuts.push({ label: "Move Downloads", button: GamePadButtonCode.A, action: () => changeDownloads.mutate(data.drive.mountPoint) });
shortcuts.push({ label: "Move Downloads", button: GamePadButtonCode.A, action: handleAction });
}
useShortcuts(focusKey, () => shortcuts, [shortcuts]);
const { isMouse } = useActiveControl();
return <li ref={ref} className={twMerge('flex flex-col p-4 bg-base-300 rounded-2xl gap-1',
return <li ref={ref} className={twMerge('flex flex-row p-4 bg-base-300 rounded-2xl gap-1 items-end',
classNames({
"ring-7": focused,
"border-dashed border-primary border-7": data.drive.isCurrentlyUsed,
"border-dashed border-primary border-4": data.drive.isCurrentlyUsed,
"border-solid": data.drive.unusableReason === 'already_used',
"ring-error": data.drive.unusableReason === 'not_enough_space',
}))}>
<div className='flex gap-2 font-semibold'>{data.drive.isRemovable ? <Usb /> : <HardDrive />}{data.drive.label}</div>
<small className='opacity-60'>{data.drive.mountPoint}</small>
<div className='flex gap-2'>
{prettyBytes(data.drive.size - data.drive.used)} Free
{data.drive.unusableReason === 'not_enough_space' && <p className='text-error'>(Not Enough Space)</p>}
{data.drive.unusableReason === 'already_used' && <p>(Currently Used)</p>}
{data.drive.unusableReason !== 'already_used' && data.drive.isCurrentlyUsed && <p className='opacity-60'>(Custom Path)</p>}
</div>
<div className='flex flex-col grow gap-1'>
<div className='flex gap-2 font-semibold'>{data.drive.isRemovable ? <Usb /> : <HardDrive />}{data.drive.label}</div>
<small className='opacity-60'>{data.drive.mountPoint}</small>
<div className='flex gap-2'>
{prettyBytes(data.drive.size - data.drive.used)} Free
{data.drive.unusableReason === 'not_enough_space' && <p className='text-error'>(Not Enough Space)</p>}
{data.drive.unusableReason === 'already_used' && <p>(Currently Used)</p>}
{data.drive.unusableReason !== 'already_used' && data.drive.isCurrentlyUsed && <p className='opacity-60'>(Custom Path)</p>}
</div>
<div className={twMerge("progress", classNames({
"progress-warning": usedPercent > 0.8,
"progress-error": data.drive.unusableReason === 'not_enough_space',
}))}>
<div className={twMerge('h-full bg-primary', classNames({
"bg-warning": usedPercent > 0.8,
"bg-error": data.drive.unusableReason === 'not_enough_space',
}))} style={{ width: usedPercent.toLocaleString('en-US', { style: 'percent' }) }}></div>
{!!data.drive.isCurrentlyUsed && <div className="h-full bg-base-content" style={{ width: usedPercentRaw.toLocaleString('en-US', { style: 'percent' }) }}></div>}
<div className={twMerge("progress", classNames({
"progress-warning": usedPercent > 0.8,
"progress-error": data.drive.unusableReason === 'not_enough_space',
}))}>
<div className={twMerge('h-full bg-primary', classNames({
"bg-warning": usedPercent > 0.8,
"bg-error": data.drive.unusableReason === 'not_enough_space',
}))} style={{ width: usedPercent.toLocaleString('en-US', { style: 'percent' }) }}></div>
{!!data.drive.isCurrentlyUsed && <div className="h-full bg-base-content" style={{ width: usedPercentRaw.toLocaleString('en-US', { style: 'percent' }) }}></div>}
</div>
</div>
{valid && isMouse && <Button type="button" className='btn-circle' onAction={handleAction} id={`${data.drive.mountPoint}-select`}><Save /></Button>}
</li>;
}
@ -77,7 +85,7 @@ function RouteComponent ()
<Block shouldBlockFn={() => isMoving} withResolver={false} />
<ul ref={ref} className="list rounded-box gap-2">
<div className="divider text-2xl mt-0 md:mt-4">
<Download className='size-16' /> Downloads ({drives?.downloadsSize ? prettyBytes(drives?.downloadsSize) : '?'})
<Download className='size-16' /> Downloads ({drives?.downloadsSize ? prettyBytes(drives?.downloadsSize) : <span className="loading loading-spinner loading-lg size-6"></span>})
</div>
<ul className='p-2 grid grid-cols-2 gap-3'>
{drives?.drives.filter(d => d.mountPoint).map(d => <DriveComponent refetchDrives={refetch} downloadsSize={drives.downloadsSize} drive={d} />)}