This commit is contained in:
Tom Wopat 2025-09-24 12:16:05 +02:00 committed by GitHub
commit 25d8f3500a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 12 deletions

View File

@ -2,7 +2,7 @@ import React from "react";
import { ExclamationTriangleIcon } from "@heroicons/react/24/solid"; import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
import { ArrowPathIcon, ArrowRightIcon } from "@heroicons/react/16/solid"; import { ArrowPathIcon, ArrowRightIcon } from "@heroicons/react/16/solid";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { LuPlay } from "react-icons/lu"; import { LuMaximize, LuPlay } from "react-icons/lu";
import { BsMouseFill } from "react-icons/bs"; import { BsMouseFill } from "react-icons/bs";
import { Button, LinkButton } from "@components/Button"; import { Button, LinkButton } from "@components/Button";
@ -209,9 +209,10 @@ export function PeerConnectionDisconnectedOverlay({
interface HDMIErrorOverlayProps { interface HDMIErrorOverlayProps {
readonly show: boolean; readonly show: boolean;
readonly hdmiState: string; readonly hdmiState: string;
readonly requestFullscreen: () => void;
} }
export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) { export function HDMIErrorOverlay({ show, hdmiState, requestFullscreen }: HDMIErrorOverlayProps) {
const isNoSignal = hdmiState === "no_signal"; const isNoSignal = hdmiState === "no_signal";
const isOtherError = hdmiState === "no_lock" || hdmiState === "out_of_range"; const isOtherError = hdmiState === "no_lock" || hdmiState === "out_of_range";
@ -247,14 +248,25 @@ export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
</li> </li>
</ul> </ul>
</div> </div>
<div> <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 py-1.5">
<LinkButton <div className="relative flex flex-wrap items-center gap-x-2 gap-y-2">
to={"https://jetkvm.com/docs/getting-started/troubleshooting"} <LinkButton
theme="light" to={"https://jetkvm.com/docs/getting-started/troubleshooting"}
text="Learn more" theme="light"
TrailingIcon={ArrowRightIcon} text="Learn more"
size="SM" TrailingIcon={ArrowRightIcon}
/> size="SM"
/>
</div>
<div className="flex flex-wrap items-right gap-x-2 gap-y-2">
<Button
size="XS"
theme="light"
text="Fullscreen"
LeadingIcon={LuMaximize}
onClick={() => requestFullscreen()}
/>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -542,9 +542,9 @@ export default function WebRTCVideo() {
style={{ animationDuration: "500ms" }} style={{ animationDuration: "500ms" }}
className="animate-slideUpFade pointer-events-none absolute inset-0 flex items-center justify-center" className="animate-slideUpFade pointer-events-none absolute inset-0 flex items-center justify-center"
> >
<div className="relative h-full w-full rounded-md"> <div className="relative h-full w-full rounded-md" onClick={requestPointerLock}>
<LoadingVideoOverlay show={isVideoLoading} /> <LoadingVideoOverlay show={isVideoLoading} />
<HDMIErrorOverlay show={hdmiError} hdmiState={hdmiState} /> <HDMIErrorOverlay show={hdmiError} hdmiState={hdmiState} requestFullscreen={requestFullscreen}/>
<NoAutoplayPermissionsOverlay <NoAutoplayPermissionsOverlay
show={hasNoAutoPlayPermissions} show={hasNoAutoPlayPermissions}
onPlayClick={() => { onPlayClick={() => {