fix(call): mute button logic

Satellite-im · May 30, 2022 · ac0f4c4 · ac0f4c4
1 parent 9a357e4
commit ac0f4c4
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 20 deletions.
diff --git a/components/views/media/actions/Actions.vue b/components/views/media/actions/Actions.vue
@@ -41,7 +41,7 @@ export default Vue.extend({
       return this.audio.muted
     },
     videoMuted(): boolean {
-      return p2p.id && this.webrtc.streamMuted[p2p.id]?.video
+      return this.video.disabled
     },
     screenMuted(): boolean {
       return p2p.id && this.webrtc.streamMuted[p2p.id]?.screen
@@ -56,7 +56,9 @@ export default Vue.extend({
     toggleMute(kind: keyof PeerMutedState) {
       this.isLoading = true
       if (kind === 'audio') {
-        this.$store.dispatch('audio/toggleMute', {}, { root: true })
+        this.$store.dispatch('audio/toggleMute', undefined, { root: true })
+      } else if (kind === 'video') {
+        this.$store.dispatch('video/toggleMute', undefined, { root: true })
       } else {
         this.$store.dispatch(
           'webrtc/toggleMute',

diff --git a/components/views/navigation/sidebar/controls/Controls.vue b/components/views/navigation/sidebar/controls/Controls.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
       return this.audio.muted
     },
     videoMuted(): boolean {
-      return p2p.id && this.webrtc.streamMuted[p2p.id]?.video
+      return this.video.disabled
     },
     screenMuted(): boolean {
       return p2p.id && this.webrtc.streamMuted[p2p.id]?.screen
@@ -52,9 +52,9 @@ export default Vue.extend({
     async toggleMute(kind: keyof PeerMutedState) {
       this.isLoading = true
       if (kind === 'audio') {
-        this.$store.dispatch('audio/toggleMute', {}, { root: true })
+        this.$store.dispatch('audio/toggleMute', undefined, { root: true })
       } else if (kind === 'video') {
-        this.$store.dispatch('video/toggleMute', {}, { root: true })
+        this.$store.dispatch('video/toggleMute', undefined, { root: true })
       }
       this.isLoading = false
     },

diff --git a/store/audio/actions.ts b/store/audio/actions.ts
@@ -1,14 +1,19 @@
+import type { AudioState } from './types'
 import { Sounds } from '~/libraries/SoundManager/SoundManager'
 import { $WebRTC } from '~/libraries/WebRTC/WebRTC'
+import { ActionsArguments } from '~/types/store/store'
 
 export default {
   /**
    * @method toggleMute
    * @description Toggles mute for outgoing audio
    * @example @click="toggleMute"
    */
-  toggleMute({ state, commit, dispatch, rootState }: any) {
-    const muted = !state.muted
+  toggleMute(
+    { state, commit, dispatch, rootState }: ActionsArguments<AudioState>,
+    muted: boolean,
+  ) {
+    muted = muted ?? !state.muted
     const { activeCall } = rootState.webrtc
     const call = activeCall && $WebRTC.getCall(activeCall.callId)
 

diff --git a/store/video/actions.test.ts b/store/video/actions.test.ts
@@ -181,9 +181,9 @@ describe('', () => {
       disabled: true,
     }
     const rootState = { ...initialRootState }
-    module.default.toggle({ state, commit, dispatch, rootState })
+    module.default.toggleMute({ state, commit, dispatch, rootState })
     expect(commit).toHaveBeenCalledWith('setDisabled', !state.disabled)
-    expect(dispatch).toHaveBeenCalledWith('sounds/playSound', Sounds.MUTE, {
+    expect(dispatch).toHaveBeenCalledWith('sounds/playSound', Sounds.UNMUTE, {
       root: true,
     })
   })
@@ -194,9 +194,9 @@ describe('', () => {
       disabled: false,
     }
     const rootState = { ...initialRootState }
-    module.default.toggle({ state, commit, dispatch, rootState })
+    module.default.toggleMute({ state, commit, dispatch, rootState })
     expect(commit).toHaveBeenCalledWith('setDisabled', !state.disabled)
-    expect(dispatch).toHaveBeenCalledWith('sounds/playSound', Sounds.UNMUTE, {
+    expect(dispatch).toHaveBeenCalledWith('sounds/playSound', Sounds.MUTE, {
       root: true,
     })
   })

diff --git a/store/video/actions.ts b/store/video/actions.ts
@@ -4,22 +4,29 @@ import { Sounds } from '~/libraries/SoundManager/SoundManager'
 import { $WebRTC } from '~/libraries/WebRTC/WebRTC'
 
 const videoActions = {
-  toggle(
+  toggleMute(
     { state, commit, dispatch, rootState }: ActionsArguments<VideoState>,
-    disabled = !state.disabled,
+    disabled?: boolean,
   ) {
+    disabled = disabled ?? !state.disabled
     const { activeCall } = rootState.webrtc
     const call = activeCall && $WebRTC.getCall(activeCall.callId)
 
     commit('setDisabled', disabled)
 
+    dispatch('sounds/playSound', disabled ? Sounds.MUTE : Sounds.UNMUTE, {
+      root: true,
+    })
+
+    if (!call) {
+      return
+    }
+
     if (disabled) {
-      if (call) call.unmute({ kind: 'audio' })
-      dispatch('sounds/playSound', Sounds.UNMUTE, { root: true })
+      call.mute({ kind: 'video' })
       return
     }
-    if (call) call.mute({ kind: 'audio' })
-    dispatch('sounds/playSound', Sounds.MUTE, { root: true })
+    call.unmute({ kind: 'video' })
   },
 }
 

diff --git a/store/webrtc/actions.ts b/store/webrtc/actions.ts
@@ -288,7 +288,6 @@ const webRTCActions = {
       return
     }
     const isMuted = state.streamMuted[peerId]?.[kind]
-    commit('audio/setMuted', isMuted)
     if (isMuted) {
       call.unmute({ peerId, kind })
       dispatch('sounds/playSound', Sounds.UNMUTE, { root: true })
@@ -320,7 +319,7 @@ const webRTCActions = {
    * this.$store.dispatch('webrtc/initialize', { callId: 'groupId1', peerIds: ['userid1', 'userid2'] })
    */
   async createCall(
-    { commit, state, rootState }: ActionsArguments<WebRTCState>,
+    { commit, state, rootState, dispatch }: ActionsArguments<WebRTCState>,
     {
       callId,
       peerIds,
@@ -429,6 +428,7 @@ const webRTCActions = {
       if (rootState.audio.muted) {
         call.mute({ peerId: localId, kind: 'audio' })
       }
+      commit('video/setDisabled', true, { root: true })
     }
     call.on('CONNECTED', onCallConnected)
 
@@ -450,10 +450,16 @@ const webRTCActions = {
       kind?: string | undefined
     }) {
       $Logger.log('webrtc', `local track created: ${track.kind}#${track.id}`)
+      let muted = false
+      if (kind === 'audio') {
+        muted = rootState.audio.muted
+      } else if (kind === 'video') {
+        muted = rootState.video.disabled
+      }
       commit('setMuted', {
         peerId: $Peer2Peer.id,
         kind,
-        muted: rootState.audio.muted,
+        muted,
       })
       if (rootState.audio.muted) {
         call.mute({ peerId: localId, kind: 'audio' })