use atom to finish speaker button

webapp/components/device.tsx

@@ -1,10 +1,12 @@
 import useWhipClient from './use/whip'
+import { useAtom } from 'jotai'
 import { useEffect, useState } from 'react'
 import {
   Device,
   deviceNone,
   deviceScreen,
 } from '../lib/device'
+import { deviceSpeakerAtom } from './../store/atom'
 
 import Loading from './svg/loading'
 import SvgSpeaker from './svg/speaker'
@@ -30,12 +32,12 @@ export default function DeviceBar(props: { streamId: string }) {
   const [loadingVideo, setLoadingVideo] = useState(false)
   const [loadingScreen, setLoadingScreen] = useState(false)
 
+  const [currentDeviceSpeaker, setCurrentDeviceSpeaker] = useAtom(deviceSpeakerAtom)
+
   const {
     userStatus,
-    currentDeviceSpeaker,
     currentDeviceAudio,
     currentDeviceVideo,
-    setCurrentDeviceSpeaker,
     setCurrentDeviceAudio,
     setCurrentDeviceVideo,
     toggleEnableAudio,
@@ -91,9 +93,9 @@ export default function DeviceBar(props: { streamId: string }) {
     const audios = devices.filter(i => i.kind === 'audioinput').map(toDevice)
     const videos = devices.filter(i => i.kind === 'videoinput').map(toDevice)
 
-    if ( currentDeviceSpeaker === deviceNone.deviceId) {
+    if (currentDeviceSpeaker === deviceNone.deviceId) {
       const device = speakers[0]
-      if (device) await setCurrentDeviceSpeaker(device.deviceId)
+      if (device) setCurrentDeviceSpeaker(device.deviceId)
     } 
 
     if (currentDeviceAudio === deviceNone.deviceId) {
@@ -144,7 +146,7 @@ export default function DeviceBar(props: { streamId: string }) {
 
   const onChangedDeviceSpeaker = async (current: string) => {
     setLoadingSpeaker(true)
-    await setCurrentDeviceSpeaker(current)
+    setCurrentDeviceSpeaker(current)
     setLoadingSpeaker(false)
   }
 

webapp/components/layout.tsx

@@ -69,7 +69,7 @@ export default function Layout(props: { meetingId: string }) {
       <div></div>
 
       {enabledPresentation
-        ? <Player stream={presentationStream.stream} muted={true} width="auto" currentDeviceSpeaker={'none'} />
+        ? <Player stream={presentationStream.stream} muted={true} width="auto" />
         : null
       }
 

webapp/components/player/player.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useRef, useState } from 'react'
+import { useAtom } from 'jotai'
 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'
 
 function AudioWave(props: { stream: MediaStream }) {
   const refWave = useRef<HTMLDivElement>(null)
@@ -29,11 +31,13 @@ function AudioWave(props: { stream: MediaStream }) {
   return <div ref={refWave}></div>
 }
 
-export default function Player(props: { stream: MediaStream, muted: boolean, audio?: boolean, video?: boolean, width: string, currentDeviceSpeaker: string}) {
+export default function Player(props: { stream: MediaStream, muted: boolean, audio?: boolean, video?: boolean, width: string }) {
   const refVideo = useRef<HTMLVideoElement>(null)
   const [showAudio, setShowAudio] = useState(false)
   const audioTrack = props.stream.getAudioTracks()[0]
   const videoTrack = props.stream.getVideoTracks()[0]
+  const [currentDeviceSpeaker] = useAtom(deviceSpeakerAtom)
+
 
   useEffect(() => {
     if (audioTrack && !videoTrack) {
@@ -46,7 +50,7 @@ export default function Player(props: { stream: MediaStream, muted: boolean, aud
       el.srcObject = new MediaStream([audioTrack])
 
       if (el.setSinkId) {
-        el.setSinkId(props.currentDeviceSpeaker) 
+        el.setSinkId(currentDeviceSpeaker) 
       } 
       el.play()
 
@@ -56,7 +60,7 @@ export default function Player(props: { stream: MediaStream, muted: boolean, aud
         el.remove()
       }
     }
-  }, [audioTrack, videoTrack, props.currentDeviceSpeaker])
+  }, [audioTrack, videoTrack, currentDeviceSpeaker])
 
   useEffect(() => {
     if (refVideo.current && videoTrack) {

webapp/components/player/whep-player.tsx

@@ -5,13 +5,9 @@ import Detail from './detail'
 import Player from './player'
 import { presentationStreamAtom } from '../../store/atom'
 import { Stream } from '../../lib/api'
-import useWhipClient from '../use/whip'
-import {getStorageStream } from '../../lib/storage'
 
 export default function WhepPlayer(props: { streamId: string, userStatus: Stream, width: string }) {
   const refEnabled = useRef(false)
-  const localStreamId = getStorageStream()
-  const { currentDeviceSpeaker} = useWhipClient(localStreamId)
   const { stream, restart, start, connStatus, setRemoteStatus } = useWhepClient(props.streamId)
   const [, setPresentationStream] = useAtom(presentationStreamAtom)
 
@@ -35,7 +31,7 @@ export default function WhepPlayer(props: { streamId: string, userStatus: Stream
 
   return (
     <center className="flex flex-col">
-      <Player stream={stream} muted={false} width={props.width} audio={true} video={props.userStatus.video} currentDeviceSpeaker={currentDeviceSpeaker}/>
+      <Player stream={stream} muted={false} width={props.width} audio={true} video={props.userStatus.video} />
       <Detail streamId={props.streamId} connStatus={connStatus} userStatus={props.userStatus} restart={restart} />
     </center>
   )

webapp/components/player/whip-player.tsx

@@ -18,7 +18,7 @@ export default function WhipPlayer(props: { streamId: string, width: string }) {
 
   return (
     <center className="flex flex-col">
-      <Player stream={stream} muted={true} width={props.width} audio={false} video={userStatus.video} currentDeviceSpeaker={'none'}/>
+      <Player stream={stream} muted={true} width={props.width} audio={false} video={userStatus.video} />
       <Detail streamId={props.streamId} connStatus={userStatus.state} userStatus={userStatus} restart={restart} />
     </center>
   )

webapp/components/prepare.tsx

@@ -18,7 +18,7 @@ export default function Prepare(_props: { meetingId: string }) {
   const localStreamId = getStorageStream()
   const [_, setMeetingJoined] = useAtom(meetingJoinedAtom)
 
-  const { id, stream, currentDeviceSpeaker,setUserName, setSyncUserStatus, start } = useWhipClient(localStreamId)
+  const { id, stream, setUserName, setSyncUserStatus, start } = useWhipClient(localStreamId)
 
   const join = async () => {
     setLoading(true)
@@ -39,7 +39,7 @@ export default function Prepare(_props: { meetingId: string }) {
   return (
     <div className="flex flex-col justify-around">
       <center className="m-xs">
-        <Player stream={stream} muted={true} width="320px" audio={true} video={true} currentDeviceSpeaker={currentDeviceSpeaker}/>
+        <Player stream={stream} muted={true} width="320px" audio={true} video={true} />
       </center>
 
       <center className="mb-xs">

webapp/components/use/whip.ts

@@ -13,13 +13,10 @@ interface WHIPData extends Data {
   setUserName: (name: string) => void,
   setSyncUserStatus: (callback: (userStatus: Stream) => void) => void,
 
-  currentDeviceSpeaker: string,
   currentDeviceAudio: string,
   currentDeviceVideo: string,
-  setCurrentDeviceSpeaker: (current: string) => Promise<void>,
   setCurrentDeviceAudio: (current: string) => Promise<void>,
   setCurrentDeviceVideo: (current: string) => Promise<void>,
-  toggleEnableSpeaker: () => Promise<void>,
   toggleEnableAudio: () => Promise<void>,
   toggleEnableVideo: () => Promise<void>,
 }
@@ -28,10 +25,8 @@ class WHIPContext extends Context {
   client: WHIPClient = new WHIPClient()
   cache: WHIPData
 
-  currentDeviceSpeaker = deviceNone.deviceId
   currentDeviceAudio = deviceNone.deviceId
   currentDeviceVideo = deviceNone.deviceId
-  toggleEnableSpeaker = async () => this.setCurrentDeviceSpeaker(this.userStatus.speaker ? deviceNone.deviceId : this.currentDeviceSpeaker)
   toggleEnableAudio = async () => this.setCurrentDeviceAudio(this.userStatus.audio ? deviceNone.deviceId : this.currentDeviceAudio)
   toggleEnableVideo = async () => this.setCurrentDeviceVideo(this.userStatus.video ? deviceNone.deviceId : this.currentDeviceVideo)
 
@@ -69,13 +64,10 @@ class WHIPContext extends Context {
       setUserName: (name: string) => this.setUserName(name),
       setSyncUserStatus: (callback: (userStatus: Stream) => void) => this.setSyncUserStatus(callback),
 
-      currentDeviceSpeaker: this.currentDeviceSpeaker,
       currentDeviceAudio: this.currentDeviceAudio,
       currentDeviceVideo: this.currentDeviceVideo,
-      setCurrentDeviceSpeaker: (current: string) => this.setCurrentDeviceSpeaker(current),
       setCurrentDeviceAudio: (current: string) => this.setCurrentDeviceAudio(current),
       setCurrentDeviceVideo: (current: string) => this.setCurrentDeviceVideo(current),
-      toggleEnableSpeaker: () => this.toggleEnableSpeaker(),
       toggleEnableAudio: () => this.toggleEnableAudio(),
       toggleEnableVideo: () => this.toggleEnableVideo(),
     }
@@ -106,18 +98,6 @@ class WHIPContext extends Context {
     }
   }
 
-  async setCurrentDeviceSpeaker(current: string) {
-    const { userStatus, currentDeviceSpeaker } = this
-
-    if (current !== currentDeviceSpeaker || !userStatus.speaker) {
-      userStatus.speaker = current === deviceNone.deviceId ? false : true
-      this.currentDeviceSpeaker = current === deviceNone.deviceId ? this.currentDeviceSpeaker : current
-
-      this.sync()
-      this.syncUserStatus(userStatus)
-    }
-  }
-
   onChangedDeviceAudio() {
     const { pc, stream } = this
     // If WebRTC is connected, switch track

webapp/store/atom.ts

@@ -36,13 +36,16 @@ presentationStreamAtom.debugLabel = 'presentationStream'
 const enabledPresentationAtom = atom(get => get(presentationStreamAtom).stream.getVideoTracks().length !== 0)
 enabledPresentationAtom.debugLabel = 'enabledPresentation'
 
+const deviceSpeakerAtom = atom<string>('default')
+
 export {
   locationAtom,
   presentationStreamAtom,
 
   meetingIdAtom,
   meetingJoinedAtom,
   enabledPresentationAtom,
+  deviceSpeakerAtom,
 }
 
 export type {