feat(webapp): add whip & whep loading

binbat · Dec 26, 2023 · 58f6447 · 58f6447
1 parent d65861a
commit 58f6447
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/webapp/components/player/whep-player.tsx b/webapp/components/player/whep-player.tsx
@@ -7,10 +7,12 @@ import {
 } from '../../store/atom'
 import { WHEPClient } from '@binbat/whip-whep/whep'
 import { useAtom } from 'jotai'
+import SvgProgress from '../svg/progress'
 
 export default function WhepPlayer(props: { streamId: string, status: UserStatus, width: string }) {
   const refEnabled = useRef(false)
   const refPC = useRef<RTCPeerConnection | null>(null)
+  const [loading, setLoading] = useState(true)
   const [connectionState, setConnectionState] = useState("unknown")
   const [userStream, setUserStream] = useState<UserStream>({
     stream: new MediaStream,
@@ -34,6 +36,7 @@ export default function WhepPlayer(props: { streamId: string, status: UserStatus
   }
 
   const start = async (resource: string) => {
+    setLoading(false)
     if (refPC.current) {
       const whep = new WHEPClient();
       const url = location.origin + "/whep/" + resource;
@@ -44,6 +47,7 @@ export default function WhepPlayer(props: { streamId: string, status: UserStatus
   }
 
   const restart = async (resource: string) => {
+    setLoading(true)
     if (refPC.current) {
       refPC.current.close()
     }
@@ -79,7 +83,10 @@ export default function WhepPlayer(props: { streamId: string, status: UserStatus
   return (
     <div className='flex flex-col'>
       <center>
-        <Player user={userStream} muted={false} width={props.width} display="auto" />
+        { loading
+          ? <SvgProgress/>
+          : <Player user={userStream} muted={false} width={props.width} display="auto" />
+        }
       </center>
 
       <details className='text-white'>

diff --git a/webapp/components/player/whip-player.tsx b/webapp/components/player/whip-player.tsx
@@ -11,6 +11,7 @@ import {
 import Player from './player'
 import { WHIPClient } from '@binbat/whip-whep/whip'
 import { deviceScreen } from '../../lib/device'
+import SvgProgress from '../svg/progress'
 
 export default function WhipPlayer(props: { streamId: string, width: string }) {
   const refEnabled = useRef(false)
@@ -19,6 +20,8 @@ export default function WhipPlayer(props: { streamId: string, width: string }) {
   const [localStream] = useAtom(localStreamAtom)
   const [localUserStatus, setLocalUserStatus] = useAtom(localUserStatusAtom)
 
+  const [loading, setLoading] = useState(true)
+
   const [currentDeviceAudio] = useAtom(currentDeviceAudioAtom)
   const [currentDeviceVideo] = useAtom(currentDeviceVideoAtom)
 
@@ -71,9 +74,11 @@ export default function WhipPlayer(props: { streamId: string, width: string }) {
         refClient.current = whip
       }
     }
+    setLoading(false)
   }
 
   const restart = async (resource: string) => {
+    setLoading(true)
     if (refPC.current) {
       refPC.current.close()
     }
@@ -136,7 +141,10 @@ export default function WhipPlayer(props: { streamId: string, width: string }) {
   return (
     <div className='flex flex-col'>
       <center>
-        <Player user={localStream} muted={true} width={props.width} display="auto" />
+        { loading
+          ? <SvgProgress/>
+          : <Player user={localStream} muted={true} width={props.width} display="auto" />
+        }
       </center>
 
       <details className='text-white'>

diff --git a/webapp/components/svg/progress.tsx b/webapp/components/svg/progress.tsx
@@ -0,0 +1,7 @@
+export default function SvgProgress() {
+  return (
+    <svg className="animate-spin" width="128" height="128" viewBox="0 -960 960 960">
+      <path fill="#ffffff" d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z"/>
+    </svg>
+  )
+}