refactor(webapp): show audio && details

binbat · Dec 19, 2023 · 4f06985 · 4f06985
1 parent e62e0e0
commit 4f06985
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 33 deletions.
diff --git a/webapp/components/player/player.tsx b/webapp/components/player/player.tsx
@@ -4,7 +4,7 @@ import WaveSurfer from 'wavesurfer.js'
 import RecordPlugin from 'wavesurfer.js/dist/plugins/record'
 import { isWechat } from '../../lib/util'
 
-export default function Player(props: { user: UserStream, muted: boolean, width: string }) {
+export default function Player(props: { user: UserStream, muted: boolean, width: string, display: string }) {
   const refVideo = useRef<HTMLVideoElement>(null)
   const refWave = useRef<HTMLDivElement>(null)
 
@@ -54,7 +54,10 @@ export default function Player(props: { user: UserStream, muted: boolean, width:
         ref={refVideo}
         style={!!props.user.stream?.getVideoTracks().length ? { width: props.width } : { height: '0px' }}
       />
-      <div className='rounded-xl' ref={refWave}></div>
+      {props.display === "full"
+        ? <div className='rounded-xl' ref={refWave}></div>
+        : null
+      }
     </center>
   )
 }
diff --git a/webapp/components/player/whep-player.tsx b/webapp/components/player/whep-player.tsx
@@ -61,22 +61,27 @@ export default function WhepPlayer(props: { streamId: string, status: UserStatus
 
   return (
     <div className='flex flex-col'>
-      <Player user={userStream} muted={false} width={props.width} />
+      <Player user={userStream} muted={false} width={props.width} display="auto" />
 
-      <center className='text-white'>
-        <p>name: <code>{props.status.name}</code></p>
-        <p>state: <code>{String(props.status.state)}</code></p>
-        <div className='flex flex-row justify-around'>
-          <p>audio: <code>{String(props.status.audio)}</code></p>
-          <p>video: <code>{String(props.status.video)}</code></p>
-          <p>screen: <code>{String(props.status.screen)}</code></p>
-        </div>
-      </center>
+      <details className='text-white'>
+        <summary>{props.status.name}</summary>
+        <center>
+          <div className='flex flex-row flex-wrap justify-around'>
+            <p>name: <code>{props.status.name}</code></p>
+            <p>state: <code>{String(props.status.state)}</code></p>
+          </div>
+          <div className='flex flex-row flex-wrap justify-around'>
+            <p>audio: <code>{String(props.status.audio)}</code></p>
+            <p>video: <code>{String(props.status.video)}</code></p>
+            <p>screen: <code>{String(props.status.screen)}</code></p>
+          </div>
+        </center>
 
-      <center className='text-white flex flex-row justify-around'>
-        <p className='rounded-xl p-2 b-1 hover:border-orange-300'>{connectionState}</p>
-        <button className='btn-primary' onClick={() => restart(props.streamId)}>restart</button>
-      </center>
+        <center className='text-white flex flex-row justify-around'>
+          <p className='rounded-xl p-2 b-1 hover:border-orange-300'>{connectionState}</p>
+          <button className='btn-primary' onClick={() => restart(props.streamId)}>restart</button>
+        </center>
+      </details>
     </div>
   )
 }
diff --git a/webapp/components/player/whip-player.tsx b/webapp/components/player/whip-player.tsx
@@ -121,24 +121,27 @@ export default function WhipPlayer(props: { streamId: string, width: string }) {
 
   return (
     <div className='flex flex-col'>
-      <Player user={localStream} muted={true} width={props.width} />
+      <Player user={localStream} muted={true} width={props.width} display="auto" />
 
-      <center className='text-white'>
-        <div className='flex flex-row flex-wrap justify-around'>
-          <p>name: <code>{localUserStatus.name}</code></p>
-          <p>state: <code>{String(localUserStatus.state)}</code></p>
-        </div>
-        <div className='flex flex-row flex-wrap justify-around'>
-          <p>audio: <code>{String(localUserStatus.audio)}</code></p>
-          <p>video: <code>{String(localUserStatus.video)}</code></p>
-          <p>screen: <code>{String(localUserStatus.screen)}</code></p>
-        </div>
-      </center>
+      <details className='text-white'>
+        <summary>{localUserStatus.name}</summary>
+        <center>
+          <div className='flex flex-row flex-wrap justify-around'>
+            <p>name: <code>{localUserStatus.name}</code></p>
+            <p>state: <code>{String(localUserStatus.state)}</code></p>
+          </div>
+          <div className='flex flex-row flex-wrap justify-around'>
+            <p>audio: <code>{String(localUserStatus.audio)}</code></p>
+            <p>video: <code>{String(localUserStatus.video)}</code></p>
+            <p>screen: <code>{String(localUserStatus.screen)}</code></p>
+          </div>
+        </center>
 
-      <center className='text-white flex flex-row justify-around'>
-        <p className='rounded-xl p-2 b-1 hover:border-orange-300'>{localUserStatus.state}</p>
-        <button className='btn-primary' disabled={localUserStatus.state === 'connected'} onClick={() => restart(props.streamId)}>restart</button>
-      </center>
+        <center className='text-white flex flex-row justify-around'>
+          <p className='rounded-xl p-2 b-1 hover:border-orange-300'>{localUserStatus.state}</p>
+          <button className='btn-primary' disabled={localUserStatus.state === 'connected'} onClick={() => restart(props.streamId)}>restart</button>
+        </center>
+      </details>
     </div>
   )
 }
diff --git a/webapp/components/prepare.tsx b/webapp/components/prepare.tsx
@@ -68,7 +68,7 @@ export default function Prepare(props: { meetingId: string }) {
   return (
     <div className='flex flex-col justify-around'>
       <center className='m-xs'>
-        <Player user={localStream} muted={false} width="320px" />
+        <Player user={localStream} muted={false} width="320px" display="full" />
       </center>
 
       <center className='mb-xs'>