mirror of
https://github.com/sipeed/NanoKVM.git
synced 2026-09-11 00:22:56 -05:00
fix: improve WebRTC loading indicator
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { Spin } from 'antd';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { useAtom, useAtomValue } from 'jotai';
|
import { useAtom, useAtomValue } from 'jotai';
|
||||||
import { w3cwebsocket as W3cWebSocket } from 'websocket';
|
import { w3cwebsocket as W3cWebSocket } from 'websocket';
|
||||||
@@ -85,12 +86,6 @@ export const H264Webrtc = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
peer.onconnectionstatechange = () => {
|
|
||||||
if (peer.iceConnectionState === 'connected' || peer.connectionState === 'connected') {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
peer.ontrack = (event) => {
|
peer.ontrack = (event) => {
|
||||||
if (videoElement && event.track.kind === 'video') {
|
if (videoElement && event.track.kind === 'video') {
|
||||||
videoElement.srcObject = new MediaStream([event.track]);
|
videoElement.srcObject = new MediaStream([event.track]);
|
||||||
@@ -258,10 +253,8 @@ export const H264Webrtc = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isLoading && (
|
{isLoading && (
|
||||||
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/20">
|
<div className="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[2px] transition-all duration-300">
|
||||||
<div className="rounded-full bg-neutral-900/85 px-4 py-2 text-sm text-neutral-100 shadow-lg">
|
<Spin size="large" />
|
||||||
Loading
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user