add disable/enable function

webapp/components/device.tsx

@@ -6,7 +6,7 @@ import {
   deviceNone,
   deviceScreen,
 } from '../lib/device'
-import { deviceSpeakerAtom } from './../store/atom'
+import { deviceSpeakerAtom, SpeakerStatusAtom } from './../store/atom'
 
 import Loading from './svg/loading'
 import SvgSpeaker from './svg/speaker'
@@ -33,6 +33,7 @@ export default function DeviceBar(props: { streamId: string }) {
   const [loadingScreen, setLoadingScreen] = useState(false)
 
   const [currentDeviceSpeaker, setCurrentDeviceSpeaker] = useAtom(deviceSpeakerAtom)
+  const [SpeakerStatus, setSpeakerStatus] = useAtom(SpeakerStatusAtom)
 
   const {
     userStatus,
@@ -173,10 +174,24 @@ export default function DeviceBar(props: { streamId: string }) {
       <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={async () => {
+            setLoadingSpeaker(true)
+            setSpeakerStatus((prev) => !prev)
+            setLoadingSpeaker(false)
           }}>
             <center>{ loadingSpeaker ? <Loading/> : <SvgSpeaker/> }</center>
           </button>
-          <div className="flex flex-col justify-between w-1 pointer-events-none"></div>
+          <div className="flex flex-col justify-between w-1 pointer-events-none">
+            <div></div>
+            {!SpeakerStatus
+              ? <div></div>
+              : <div className="w-8 h-1 bg-red-500 rounded-full rotate-45"
+                style={{
+                  position: 'relative',
+                  right: '32px',
+                  bottom: '14px',
+                }}></div>
+            }
+          </div>
           <select
             className="w-3.5 h-8 rounded-sm rotate-180"
             value={currentDeviceSpeaker}

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'
 import SvgProgress from '../svg/progress'
-import { deviceSpeakerAtom } from '../../store/atom'
+import { deviceSpeakerAtom, SpeakerStatusAtom } from '../../store/atom'
 
 function AudioWave(props: { stream: MediaStream }) {
   const refWave = useRef<HTMLDivElement>(null)
@@ -37,6 +37,7 @@ export default function Player(props: { stream: MediaStream, muted: boolean, aud
   const audioTrack = props.stream.getAudioTracks()[0]
   const videoTrack = props.stream.getVideoTracks()[0]
   const [currentDeviceSpeaker] = useAtom(deviceSpeakerAtom)
+  const [SpeakerStatus] = useAtom(SpeakerStatusAtom)
 
 
   useEffect(() => {
@@ -52,6 +53,8 @@ export default function Player(props: { stream: MediaStream, muted: boolean, aud
       if (el.setSinkId) {
         el.setSinkId(currentDeviceSpeaker)
       }
+
+      el.muted = SpeakerStatus
       el.play()
 
       return () => {
@@ -60,7 +63,7 @@ export default function Player(props: { stream: MediaStream, muted: boolean, aud
         el.remove()
       }
     }
-  }, [audioTrack, videoTrack, currentDeviceSpeaker])
+  }, [audioTrack, videoTrack, currentDeviceSpeaker, SpeakerStatus])
 
   useEffect(() => {
     if (refVideo.current && videoTrack) {

webapp/components/use/whxp.ts

@@ -19,7 +19,6 @@ class Context extends EventTarget {
   userStatus: Stream = {
     name: '',
     state: StreamState.New,
-    speaker: true,
     audio: true,
     video: true,
     screen: false,

webapp/lib/api.ts

@@ -24,7 +24,6 @@ enum StreamState {
 interface Stream {
   name: string,
   state: StreamState
-  speaker: boolean,
   audio: boolean,
   video: boolean,
   screen: boolean,

webapp/store/atom.ts

@@ -16,7 +16,6 @@ interface UserStatus {
    */
   name: string
   state: StreamState
-  speaker: boolean
   audio: boolean
   video: boolean
   screen: boolean
@@ -36,7 +35,8 @@ presentationStreamAtom.debugLabel = 'presentationStream'
 const enabledPresentationAtom = atom(get => get(presentationStreamAtom).stream.getVideoTracks().length !== 0)
 enabledPresentationAtom.debugLabel = 'enabledPresentation'
 
-const deviceSpeakerAtom = atom<string>('default')
+const deviceSpeakerAtom = atom<string>('')
+const SpeakerStatusAtom = atom<boolean>(false)
 
 export {
   locationAtom,
@@ -46,6 +46,7 @@ export {
   meetingJoinedAtom,
   enabledPresentationAtom,
   deviceSpeakerAtom,
+  SpeakerStatusAtom,
 }
 
 export type {