Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui): update WebRTCVideo component to properly animate on peer connection state (#343)

This commit is contained in:
Adam Shiervani 2025-04-10 11:55:28 +02:00 committed by GitHub
parent 6618ee4c6e
commit 101032b816
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/components/WebRTCVideo.tsx
View File

@ -28,6 +28,7 @@ export default function WebRTCVideo() {
const videoElm = useRef<HTMLVideoElement>(null);
const mediaStream = useRTCStore(state => state.mediaStream);
const [isPlaying, setIsPlaying] = useState(false);
const peerConnectionState = useRTCStore(state => state.peerConnectionState);
// Store hooks
const settings = useSettingsStore();
@ -601,7 +602,10 @@ export default function WebRTCVideo() {
"cursor-none":
settings.mouseMode === "absolute" &&
settings.isCursorHidden,
"opacity-0": isVideoLoading || hdmiError,
"opacity-0":
isVideoLoading ||
hdmiError ||
peerConnectionState !== "connected",
"animate-slideUpFade border border-slate-800/30 opacity-0 shadow dark:border-slate-300/20":
isPlaying,
},

12
ui/src/routes/devices.$id.tsx
View File

@ -795,14 +795,16 @@ export default function KvmIdRoute() {
kvmName={deviceName || "JetKVM Device"}
/>
<div className="flex h-full w-full overflow-hidden">
<div className="pointer-events-none fixed inset-0 isolate z-20 flex h-full w-full items-center justify-center">
<div className="my-2 h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
<div className="relative z-50 flex h-full w-full overflow-hidden">
<WebRTCVideo />
<div
style={{ animationDuration: "500ms" }}
className="pointer-events-none absolute inset-0 flex animate-slideUpFade items-center justify-center p-4 opacity-0"
>
<div className="relative h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
{!!ConnectionStatusElement && ConnectionStatusElement}
</div>
</div>
{peerConnectionState === "connected" && <WebRTCVideo />}
<SidebarContainer sidebarView={sidebarView} />
</div>
</div>