refactor(webapp): enabled audio && video

binbat · Dec 16, 2023 · bb8fdc8 · bb8fdc8
1 parent e295c0d
commit bb8fdc8
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 22 deletions.
diff --git a/webapp/components/device.tsx b/webapp/components/device.tsx
@@ -9,6 +9,8 @@ import {
 } from '../lib/device'
 import {
   localStreamAtom,
+  enabledAudioAtom,
+  enabledVideoAtom,
   localUserStatusAtom,
   currentDeviceAudioAtom,
   currentDeviceVideoAtom,
@@ -26,10 +28,10 @@ export default function DeviceBar() {
   const [localStream, setLocalStream] = useAtom(localStreamAtom)
   const [localUserStatus, setLocalUserStatus] = useAtom(localUserStatusAtom)
 
+  const [enabledAudio] = useAtom(enabledAudioAtom)
+  const [enabledVideo] = useAtom(enabledVideoAtom)
   const [currentDeviceAudio, setCurrentDeviceAudio] = useAtom(currentDeviceAudioAtom)
   const [currentDeviceVideo, setCurrentDeviceVideo] = useAtom(currentDeviceVideoAtom)
-  const [currentSelectDeviceAudio, setCurrentSelectDeviceAudio] = useState(disableDevice)
-  const [currentSelectDeviceVideo, setCurrentSelectDeviceVideo] = useState(disableDevice)
   const [deviceAudio, setDeviceAudio] = useState<Device[]>([deviceNone])
   const [deviceVideo, setDeviceVideo] = useState<Device[]>([deviceNone])
 
@@ -62,19 +64,17 @@ export default function DeviceBar() {
     const audios: Device[] = devices.filter(i => i.kind === 'audioinput')
     const videos: Device[] = devices.filter(i => i.kind === 'videoinput')
 
-    if (currentDeviceAudio === disableDevice && currentSelectDeviceAudio === disableDevice) {
+    if (currentDeviceAudio === disableDevice) {
       let device = audios[0]
       if (device) {
         setCurrentDeviceAudio(device.deviceId)
-        setCurrentSelectDeviceAudio(device.deviceId)
       }
     }
 
-    if (currentDeviceVideo === disableDevice && currentSelectDeviceVideo === disableDevice) {
+    if (currentDeviceVideo === disableDevice) {
       let device = videos[0]
       if (device) {
         setCurrentDeviceVideo(device.deviceId)
-        setCurrentSelectDeviceVideo(device.deviceId)
       }
     }
 
@@ -104,10 +104,10 @@ export default function DeviceBar() {
   }, [])
 
   const toggleEnableAudio = async () => {
-    if (currentDeviceAudio === disableDevice) {
-      onChangedDeviceAudio(currentSelectDeviceAudio)
-    } else {
+    if (enabledAudio) {
       onChangedDeviceAudio(disableDevice)
+    } else {
+      onChangedDeviceAudio(currentDeviceAudio)
     }
   }
 
@@ -134,16 +134,14 @@ export default function DeviceBar() {
       audio: current === disableDevice ? false : true,
     })
 
-    current === disableDevice ? null : setCurrentSelectDeviceAudio(current)
-
     setCurrentDeviceAudio(current)
   }
 
   const toggleEnableVideo = async () => {
-    if (currentDeviceVideo === disableDevice) {
-      onChangedDeviceVideo(currentSelectDeviceVideo)
-    } else {
+    if (enabledVideo) {
       onChangedDeviceVideo(disableDevice)
+    } else {
+      onChangedDeviceVideo(currentDeviceVideo)
     }
   }
 
@@ -170,8 +168,6 @@ export default function DeviceBar() {
       screen: current === "screen" ? true : false,
     })
 
-    current === disableDevice ? null : setCurrentSelectDeviceVideo(current)
-
     setCurrentDeviceVideo(current)
   }
 
@@ -189,14 +185,14 @@ export default function DeviceBar() {
               ? <div></div>
               : <div className='bg-orange-500 shadow-sm w-1 h-1 p-1 rounded-full' style={{ position: 'relative', right: '7px' }}></div>
             }
-            {currentDeviceAudio === disableDevice
-              ? <div className='w-8 h-1 bg-red-500 rounded-full rotate-45'
+            {enabledAudio
+              ? <div></div>
+              : <div className='w-8 h-1 bg-red-500 rounded-full rotate-45'
                 style={{
                   position: 'relative',
                   right: '32px',
                   bottom: '14px',
                 }}></div>
-              : <div></div>
             }
           </div>
           <select
@@ -221,14 +217,14 @@ export default function DeviceBar() {
               ? <div></div>
               : <div className='bg-orange-500 shadow-sm w-1 h-1 p-1 rounded-full' style={{ position: 'relative', right: '7px' }}></div>
             }
-            {currentDeviceVideo === disableDevice
-              ? <div className='w-8 h-1 bg-red-500 rounded-full rotate-45'
+            {enabledVideo
+              ? <div></div>
+              : <div className='w-8 h-1 bg-red-500 rounded-full rotate-45'
                 style={{
                   position: 'relative',
                   right: '32px',
                   bottom: '14px',
                 }}></div>
-              : <div></div>
             }
           </div>
           <select

diff --git a/webapp/components/prepare.tsx b/webapp/components/prepare.tsx
@@ -48,6 +48,13 @@ export default function Prepare(props: { meetingId: string }) {
         stream: stream,
         name: "Me",
       })
+
+      setLocalUserStatus({
+        ...localUserStatus,
+        audio: true,
+        video: true,
+      })
+
     } catch { }
   }
 

diff --git a/webapp/store/atom.ts b/webapp/store/atom.ts
@@ -41,6 +41,11 @@ const localStreamAtom = atom<UserStream>({
 })
 localStreamAtom.debugLabel = 'localStream'
 
+const enabledAudioAtom = atom(get => get(localStreamAtom).stream.getAudioTracks().length !== 0)
+enabledAudioAtom.debugLabel = 'enabledAudio'
+const enabledVideoAtom = atom(get => get(localStreamAtom).stream.getVideoTracks().length !== 0)
+enabledVideoAtom.debugLabel = 'enabledVideo'
+
 const localUserStatusAtom = atom<UserStatus>({
   name: "",
   state: "new",
@@ -71,6 +76,8 @@ export {
   meetingIdAtom,
   meetingJoinedAtom,
   localStreamAtom,
+  enabledAudioAtom,
+  enabledVideoAtom,
   currentDeviceAudioAtom,
   currentDeviceVideoAtom,
 }