fix(call): mute button logic

components/views/media/actions/Actions.vue

@@ -14,10 +14,9 @@ import {
 } from 'satellite-lucide-icons'
 
 import { mapState } from 'vuex'
-import { Sounds } from '~/libraries/SoundManager/SoundManager'
 import { WebRTCEnum } from '~/libraries/Enums/enums'
 import { Peer2Peer } from '~/libraries/WebRTC/Libp2p'
-import { PeerMutedState } from '~/store/webrtc/types'
+import { RootState } from '~/types/store/store'
 const p2p = Peer2Peer.getInstance()
 
 export default Vue.extend({
@@ -36,12 +35,16 @@ export default Vue.extend({
     }
   },
   computed: {
-    ...mapState(['audio', 'video', 'webrtc']),
+    ...mapState({
+      audio: (state) => (state as RootState).audio,
+      video: (state) => (state as RootState).video,
+      webrtc: (state) => (state as RootState).webrtc,
+    }),
     audioMuted(): boolean {
       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
@@ -53,13 +56,15 @@ export default Vue.extend({
      * @description Toggles mute for outgoing audio
      * @example
      */
-    async toggleMute(kind: keyof PeerMutedState) {
+    toggleMute(kind: WebRTCEnum) {
       this.isLoading = true
       try {
-        if (kind === 'audio') {
-          this.$store.dispatch('audio/toggleMute', {}, { root: true })
+        if (kind === WebRTCEnum.AUDIO) {
+          this.$store.dispatch('audio/toggleMute', undefined, { root: true })
+        } else if (kind === WebRTCEnum.VIDEO) {
+          this.$store.dispatch('video/toggleMute', undefined, { root: true })
         } else {
-          await this.$store.dispatch(
+          this.$store.dispatch(
             'webrtc/toggleMute',
             { kind, peerId: p2p.id },
             { root: true },

components/views/navigation/sidebar/controls/Controls.html

@@ -22,6 +22,7 @@
     <headphones-icon v-else size="1x"></headphones-icon>
   </InteractablesButton>
   <InteractablesButton
+    v-if="inCall"
     :type="videoMuted ? 'danger' : 'dark'"
     size="small"
     v-tooltip.top="videoMuted ? $t('controls.turn_on_camera') : $t('controls.turn_off_camera')"

components/views/navigation/sidebar/controls/Controls.vue

@@ -15,6 +15,8 @@ import {
 import { mapState } from 'vuex'
 import { Peer2Peer } from '~/libraries/WebRTC/Libp2p'
 import { PeerMutedState } from '~/store/webrtc/types'
+import { WebRTCEnum } from '~/libraries/Enums/enums'
+import { RootState } from '~/types/store/store'
 const p2p = Peer2Peer.getInstance()
 
 export default Vue.extend({
@@ -32,16 +34,24 @@ export default Vue.extend({
     }
   },
   computed: {
-    ...mapState(['audio', 'video', 'webrtc', 'accounts']),
+    ...mapState({
+      audio: (state) => (state as RootState).audio,
+      video: (state) => (state as RootState).video,
+      webrtc: (state) => (state as RootState).webrtc,
+      accounts: (state) => (state as RootState).accounts,
+    }),
     audioMuted(): boolean {
       return this.audio.muted
     },
     videoMuted(): boolean {
-      return p2p.id && this.webrtc.streamMuted[p2p.id]?.video
+      return this.inCall ? this.video.disabled : false
     },
     screenMuted(): boolean {
       return p2p.id && this.webrtc.streamMuted[p2p.id]?.screen
     },
+    inCall(): boolean {
+      return this.webrtc.activeCall !== undefined
+    },
   },
   methods: {
     /**
@@ -52,10 +62,10 @@ export default Vue.extend({
     async toggleMute(kind: keyof PeerMutedState) {
       this.isLoading = true
       try {
-        if (kind === 'audio') {
-          this.$store.dispatch('audio/toggleMute', {}, { root: true })
-        } else if (kind === 'video') {
-          this.$store.dispatch('video/toggleMute', {}, { root: true })
+        if (kind === WebRTCEnum.AUDIO) {
+          this.$store.dispatch('audio/toggleMute', undefined, { root: true })
+        } else if (kind === WebRTCEnum.VIDEO && this.inCall) {
+          this.$store.dispatch('video/toggleMute', undefined, { root: true })
         }
       } catch (e: any) {
         this.$toast.error(this.$t(e.message) as string)

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)
 

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,
     })
   })

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' })
   },
 }
 

store/webrtc/actions.ts

@@ -288,7 +288,6 @@ const webRTCActions = {
       return
     }
     const isMuted = state.streamMuted[peerId]?.[kind]
-    commit('audio/setMuted', isMuted)
     if (isMuted) {
       await 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' })

store/webrtc/types.ts

@@ -1,7 +1,7 @@
+import { WebRTCEnum } from '~/libraries/Enums/enums'
+
 export type PeerMutedState = {
-  audio: boolean
-  video: boolean
-  screen: boolean
+  [key in WebRTCEnum]: boolean
 }
 export type StreamMutedState = {
   [key: string]: PeerMutedState