From 4f06985c522198e76a7901dd953b613e25773b01 Mon Sep 17 00:00:00 2001
From: a-wing <1@233.email>
Date: Tue, 19 Dec 2023 22:47:14 +0800
Subject: [PATCH] refactor(webapp): show audio && details

---
 webapp/components/player/player.tsx      |  7 +++--
 webapp/components/player/whep-player.tsx | 33 ++++++++++++----------
 webapp/components/player/whip-player.tsx | 35 +++++++++++++-----------
 webapp/components/prepare.tsx            |  2 +-
 4 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/webapp/components/player/player.tsx b/webapp/components/player/player.tsx
index bf97201..ccea3d0 100644
--- 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
index 592e41e..f6b1bcb 100644
--- 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
index d65699e..e40119b 100644
--- 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
index 9e14269..398a4b6 100644
--- 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'>