blob: 57858dbc1717ea15238c79526ced0aff3b8f49b2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
import { ButtonItem, Field, Focusable, PanelSection, PanelSectionRow } from "@decky/ui";
import { useState } from "react";
import { ConfigurationData } from "../config/configSchema";
import { GameTarget } from "../hooks/useGameConfiguration";
import { GameConfigurationControls } from "./GameConfigurationControls";
interface Props {
game: GameTarget;
config: ConfigurationData;
onConfigChange: (
fieldName: keyof ConfigurationData,
value: boolean | number | string | string[],
) => Promise<void>;
onRepair: (appid: string) => Promise<boolean>;
}
function targetDescription(game: GameTarget): string {
if (game.transport.kind === "flatpak") return "Non-Steam · Flatpak";
return game.nonSteam ? "Non-Steam" : "Steam";
}
export function NowPlayingTab({
game,
config,
onConfigChange,
onRepair,
}: Props) {
const [busy, setBusy] = useState(false);
const supportNeedsRepair =
game.transport.kind === "flatpak" &&
game.flatpakSupport?.support_status !== "ready";
const handleRepair = async () => {
if (busy) return;
setBusy(true);
try {
await onRepair(game.appid);
} finally {
setBusy(false);
}
};
return (
<Focusable>
<PanelSection title="Now Playing">
<PanelSectionRow>
<Field label={game.name} description={targetDescription(game)} />
</PanelSectionRow>
</PanelSection>
{supportNeedsRepair && (
<PanelSection>
<PanelSectionRow>
<Field
label="Flatpak support needs repair"
description={game.flatpakSupport?.error || "The target runtime extension is not ready."}
/>
</PanelSectionRow>
<PanelSectionRow>
<ButtonItem layout="below" disabled={busy} onClick={() => void handleRepair()}>
{busy ? "Repairing..." : "Repair Flatpak support"}
</ButtonItem>
</PanelSectionRow>
</PanelSection>
)}
<GameConfigurationControls
config={config}
onConfigChange={onConfigChange}
showWorkarounds={false}
/>
</Focusable>
);
}
|
