mirror of https://github.com/jetkvm/kvm.git
refactor: update FailSafeModeOverlay to simplify reboot handling and adjust video settings UI
This commit is contained in:
Adam Shiervani
parent
2c512f72bc
commit
42a0e1fd9b
|
|
@ -35,7 +35,6 @@ export function FailSafeModeOverlay({ reason }: FailSafeModeOverlayProps) {
|
|||
const { navigateTo } = useDeviceUiNavigation();
|
||||
const { appVersion } = useVersion();
|
||||
const { systemVersion } = useDeviceStore();
|
||||
const [showRebootConfirm, setShowRebootConfirm] = useState(false);
|
||||
const [isDownloadingLogs, setIsDownloadingLogs] = useState(false);
|
||||
|
||||
const getReasonCopy = () => {
|
||||
|
|
@ -55,19 +54,6 @@ export function FailSafeModeOverlay({ reason }: FailSafeModeOverlayProps) {
|
|||
|
||||
const { message } = getReasonCopy();
|
||||
|
||||
const handleReboot = () => {
|
||||
if (!showRebootConfirm) {
|
||||
setShowRebootConfirm(true);
|
||||
return;
|
||||
}
|
||||
|
||||
send("reboot", { force: true }, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(`Failed to reboot: ${resp.error.message}`);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleReportAndDownloadLogs = () => {
|
||||
setIsDownloadingLogs(true);
|
||||
|
||||
|
|
@ -146,52 +132,30 @@ Please attach the recovery logs file that was downloaded to your computer:
|
|||
<h2 className="text-xl font-bold">Fail safe mode activated</h2>
|
||||
<p className="text-sm">{message}</p>
|
||||
</div>
|
||||
{showRebootConfirm ? (
|
||||
<div className="rounded-md bg-amber-50 p-3 dark:bg-amber-950/20">
|
||||
<p className="mb-3 text-sm text-amber-900 dark:text-amber-200">
|
||||
Rebooting will restart your device. This may resolve the issue. Continue?
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleReboot}
|
||||
theme="primary"
|
||||
size="SM"
|
||||
text="Confirm Reboot"
|
||||
/>
|
||||
<Button
|
||||
onClick={() => setShowRebootConfirm(false)}
|
||||
theme="light"
|
||||
size="SM"
|
||||
text="Cancel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
onClick={handleReportAndDownloadLogs}
|
||||
theme="primary"
|
||||
size="SM"
|
||||
disabled={isDownloadingLogs}
|
||||
LeadingIcon={GitHubIcon}
|
||||
text={isDownloadingLogs ? "Downloading Logs..." : "Report Issue & Download Logs"}
|
||||
/>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
onClick={handleReportAndDownloadLogs}
|
||||
theme="primary"
|
||||
size="SM"
|
||||
disabled={isDownloadingLogs}
|
||||
LeadingIcon={GitHubIcon}
|
||||
text={isDownloadingLogs ? "Downloading Logs..." : "Report Issue & Download Logs"}
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={handleReboot}
|
||||
theme="light"
|
||||
size="SM"
|
||||
text="Reboot Device"
|
||||
/>
|
||||
<Button
|
||||
onClick={() => navigateTo("/settings/general/reboot")}
|
||||
theme="light"
|
||||
size="SM"
|
||||
text="Reboot Device"
|
||||
/>
|
||||
|
||||
<Button
|
||||
size="SM"
|
||||
onClick={handleDowngrade}
|
||||
theme="light"
|
||||
text="Downgrade to v0.4.8"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
size="SM"
|
||||
onClick={handleDowngrade}
|
||||
theme="light"
|
||||
text="Downgrade to v0.4.8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -358,7 +358,7 @@ video::-webkit-media-controls {
|
|||
.diagonal-stripes {
|
||||
background: repeating-linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 0, 0, 0.2) 0 12px, /* red-50 with 20% opacity */
|
||||
rgba(255, 0, 0, 0.1) 0 12px, /* red-50 with 20% opacity */
|
||||
transparent 12px 24px
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -161,12 +161,13 @@ export default function SettingsRoute() {
|
|||
</div>
|
||||
</FeatureFlag>
|
||||
<div className={cx("shrink-0", {
|
||||
"pointer-events-none opacity-50 cursor-not-allowed": isVideoDisabled
|
||||
"opacity-50 cursor-not-allowed!": isVideoDisabled
|
||||
})}>
|
||||
<NavLink
|
||||
to="video"
|
||||
className={({ isActive }) => (isActive ? "active" : "")}
|
||||
>
|
||||
className={({ isActive }) => cx(isActive ? "active" : "", {
|
||||
"pointer-events-none": isVideoDisabled
|
||||
})} >
|
||||
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
|
||||
<LuVideo className="h-4 w-4 shrink-0" />
|
||||
<h1>Video</h1>
|
||||
|
|
@ -174,11 +175,13 @@ export default function SettingsRoute() {
|
|||
</NavLink>
|
||||
</div>
|
||||
<div className={cx("shrink-0", {
|
||||
"pointer-events-none opacity-50 cursor-not-allowed": isVideoDisabled
|
||||
"opacity-50 cursor-not-allowed": isVideoDisabled
|
||||
})}>
|
||||
<NavLink
|
||||
to="hardware"
|
||||
className={({ isActive }) => (isActive ? "active" : "")}
|
||||
className={({ isActive }) => cx(isActive ? "active" : "", {
|
||||
"pointer-events-none": isVideoDisabled
|
||||
})}
|
||||
>
|
||||
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
|
||||
<LuCpu className="h-4 w-4 shrink-0" />
|
||||
|
|
|
|||
|
|
@ -484,9 +484,9 @@ export default function KvmIdRoute() {
|
|||
rpcDataChannel.onopen = () => {
|
||||
setRpcDataChannel(rpcDataChannel);
|
||||
|
||||
// setTimeout(() => {
|
||||
// useFailsafeModeStore.setState({ isFailsafeMode: true, reason: "video" });
|
||||
// }, 1000);
|
||||
setTimeout(() => {
|
||||
useFailsafeModeStore.setState({ isFailsafeMode: true, reason: "video" });
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const rpcHidChannel = pc.createDataChannel("hidrpc");
|
||||
|
|
|
|||
Loading…
Reference in New Issue