fix(webapp): screen share

binbat · Jan 16, 2024 · d79bbda · d79bbda
1 parent a64c3ce
commit d79bbda
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 19 deletions.
diff --git a/webapp/components/device.tsx b/webapp/components/device.tsx
@@ -111,25 +111,20 @@ export default function DeviceBar(props: { streamId: string }) {
 
   const toggleEnableScreen = async () => {
     setLoadingScreen(true)
-    if (userStatus.screen) {
-      await onChangedDeviceVideo(deviceNone.deviceId)
-    } else {
-      await onChangedDeviceVideo(deviceScreen.deviceId)
-    }
+    await onChangedDeviceVideo(userStatus.screen ? deviceNone.deviceId : deviceScreen.deviceId)
     setLoadingScreen(false)
   }
 
   return (
     <div className='flex flex-row flex-wrap justify-around p-xs'>
       <center className='flex flex-row flex-wrap justify-around'>
         <section className='m-1 p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500'>
-          <button className='text-rose-400 rounded-md w-8 h-8' onClick={() => toggleEnableAudio()}>
-            <center>
-              {loadingAudio
-                ? <Loading />
-                : <SvgAudio />
-              }
-            </center>
+          <button className='text-rose-400 rounded-md w-8 h-8' onClick={async () => {
+            setLoadingAudio(true)
+            toggleEnableAudio()
+            setLoadingAudio(false)
+          }}>
+            <center>{ loadingAudio ? <Loading/> : <SvgAudio/> }</center>
           </button>
           <div className='flex flex-col justify-between w-1 pointer-events-none'>
             {permissionAudio === "granted"
@@ -158,13 +153,12 @@ export default function DeviceBar(props: { streamId: string }) {
         </section>
 
         <section className='m-1 p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500'>
-          <button className='text-rose-400 rounded-md w-8 h-8' onClick={() => toggleEnableVideo()}>
-            <center>
-              {loadingVideo
-                ? <Loading />
-                : <SvgVideo />
-              }
-            </center>
+          <button className='text-rose-400 rounded-md w-8 h-8' onClick={async () => {
+            setLoadingVideo(true)
+            await toggleEnableVideo()
+            setLoadingVideo(false)
+          }}>
+            <center>{ loadingVideo ? <Loading/> : <SvgVideo/> }</center>
           </button>
           <div className='flex flex-col justify-between w-1 pointer-events-none'>
             {permissionVideo === "granted"

diff --git a/webapp/components/use/whip.ts b/webapp/components/use/whip.ts
@@ -4,6 +4,7 @@ import { WHIPClient } from '@binbat/whip-whep/whip'
 import { UserStatus } from '../../store/atom'
 import {
   deviceNone,
+  deviceScreen,
   asyncGetAudioStream,
   asyncGetVideoStream,
 } from '../../lib/device'
@@ -104,6 +105,8 @@ class WHIPContext extends Context {
 
       setStream(new MediaStream([...audioTracks, ...videoTracks]))
       userStatus.video = current === deviceNone.deviceId ? false : true
+      // NOTE: screen share
+      userStatus.screen = current !== deviceScreen.deviceId ? false : true
       this.currentDeviceVideo = current === deviceNone.deviceId ? this.currentDeviceVideo : current
 
       this.sync()