fix(sidebar): fix toggle mute dispatch

components/views/media/actions/Actions.vue

@@ -1,4 +1,4 @@
-<template src="./Actions.html" />
+<template src="./Actions.html"></template>
 
 <script lang="ts">
 import Vue from 'vue'
@@ -17,6 +17,7 @@ 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'
 const p2p = Peer2Peer.getInstance()
 
 export default Vue.extend({
@@ -37,13 +38,13 @@ export default Vue.extend({
   computed: {
     ...mapState(['audio', 'video', 'webrtc']),
     audioMuted(): boolean {
-      return this.webrtc.streamMuted[p2p.id]?.audio
+      return this.audio.muted
     },
     videoMuted(): boolean {
-      return this.webrtc.streamMuted[p2p.id]?.video
+      return p2p.id && this.webrtc.streamMuted[p2p.id]?.video
     },
     screenMuted(): boolean {
-      return this.webrtc.streamMuted[p2p.id]?.screen
+      return p2p.id && this.webrtc.streamMuted[p2p.id]?.screen
     },
   },
   methods: {
@@ -52,13 +53,17 @@ export default Vue.extend({
      * @description Toggles mute for outgoing audio
      * @example
      */
-    toggleMute(kind = 'audio') {
+    toggleMute(kind: keyof PeerMutedState) {
       this.isLoading = true
-      this.$store.dispatch(
-        'webrtc/toggleMute',
-        { kind, peerId: p2p.id },
-        { root: true },
-      )
+      if (kind === 'audio') {
+        this.$store.dispatch('audio/toggleMute', {}, { root: true })
+      } else {
+        this.$store.dispatch(
+          'webrtc/toggleMute',
+          { kind, peerId: p2p.id },
+          { root: true },
+        )
+      }
       this.isLoading = false
     },
     /**

components/views/media/user/User.html

@@ -28,7 +28,7 @@
       type="random"
       :seed="user.address"
       :size="$device.isMobile ? 36 : 65"
-      :class="`${!audioStream ? 'calling' : ''}`"
+      :class="{calling: audioStream}"
       :source="user.profilePicture"
     />
     <TypographyTag :text="user.name" inverted />

components/views/media/user/User.vue

@@ -66,7 +66,7 @@ export default Vue.extend({
     },
     muted() {
       return (
-        (this.user?.peerId && this.webrtc.streamMuted[this.user.peerId]) || {
+        (this.user?.peerId && this.webrtc.streamMuted[this.user.peerId]) ?? {
           audio: true,
           video: true,
           screen: true,

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

@@ -1,4 +1,4 @@
-<template src="./Controls.html" />
+<template src="./Controls.html"></template>
 
 <script lang="ts">
 import Vue from 'vue'
@@ -13,9 +13,8 @@ import {
 } from 'satellite-lucide-icons'
 
 import { mapState } from 'vuex'
-import { Sounds } from '~/libraries/SoundManager/SoundManager'
-import { WebRTCEnum } from '~/libraries/Enums/types/webrtc'
 import { Peer2Peer } from '~/libraries/WebRTC/Libp2p'
+import { PeerMutedState } from '~/store/webrtc/types'
 const p2p = Peer2Peer.getInstance()
 
 export default Vue.extend({
@@ -35,13 +34,13 @@ export default Vue.extend({
   computed: {
     ...mapState(['audio', 'video', 'webrtc', 'accounts']),
     audioMuted(): boolean {
-      return this.audio.muted || this.webrtc.streamMuted[p2p.id]?.audio
+      return this.audio.muted
     },
     videoMuted(): boolean {
-      return this.video.disabled || this.webrtc.streamMuted[p2p.id]?.video
+      return p2p.id && this.webrtc.streamMuted[p2p.id]?.video
     },
     screenMuted(): boolean {
-      return this.webrtc.streamMuted[p2p.id]?.screen
+      return p2p.id && this.webrtc.streamMuted[p2p.id]?.screen
     },
   },
   methods: {
@@ -50,18 +49,14 @@ export default Vue.extend({
      * @description
      * @example
      */
-    async toggleMute(kind = 'audio') {
+    async toggleMute(kind: keyof PeerMutedState) {
+      this.isLoading = true
       if (kind === 'audio') {
-        this.$store.dispatch('audio/toggleMute')
-        return
-      }
-
-      if (kind === 'video') {
-        this.$store.dispatch('video/toggle')
-        return
+        this.$store.dispatch('audio/toggleMute', {}, { root: true })
+      } else if (kind === 'video') {
+        this.$store.dispatch('video/toggleMute', {}, { root: true })
       }
-
-      this.$store.dispatch('webrtc/toggleMute', { kind })
+      this.isLoading = false
     },
     async toggleDeafen() {
       this.isLoading = true

store/audio/actions.ts

@@ -7,25 +7,26 @@ export default {
    * @description Toggles mute for outgoing audio
    * @example @click="toggleMute"
    */
-  toggleMute({
-    state,
-    commit,
-    dispatch,
-    muted = !state.muted,
-    rootState,
-  }: any) {
+  toggleMute({ state, commit, dispatch, rootState }: any) {
+    const muted = !state.muted
     const { activeCall } = rootState.webrtc
     const call = activeCall && $WebRTC.getCall(activeCall.callId)
 
     commit('setMuted', muted)
 
+    dispatch('sounds/playSound', muted ? Sounds.MUTE : Sounds.UNMUTE, {
+      root: true,
+    })
+
+    if (!call) {
+      return
+    }
+
     if (muted) {
-      if (call) call.unmute({ kind: 'audio' })
-      dispatch('sounds/playSound', Sounds.UNMUTE, { root: true })
+      call.mute({ kind: 'audio' })
       return
     }
-    if (call) call.mute({ kind: 'audio' })
-    dispatch('sounds/playSound', Sounds.MUTE, { root: true })
+    call.unmute({ kind: 'audio' })
   },
   /**
    * @method toggleDeafen

store/webrtc/actions.ts

@@ -12,6 +12,7 @@ import { PropCommonEnum } from '~/libraries/Enums/enums'
 import { Peer2Peer, PrivateKeyInfo } from '~/libraries/WebRTC/Libp2p'
 import { CallPeerDescriptor } from '~/libraries/WebRTC/Call'
 import { Friend } from '~/types/ui/friends'
+import { Sounds } from '~/libraries/SoundManager/SoundManager'
 
 const announceFrequency = 5000
 const webRTCActions = {
@@ -276,7 +277,7 @@ const webRTCActions = {
    * @param kind Kind of the stream (audio/video/screen)
    */
   toggleMute(
-    { state }: ActionsArguments<WebRTCState>,
+    { state, dispatch, commit }: ActionsArguments<WebRTCState>,
     { peerId, kind }: { peerId: string; kind: 'audio' | 'video' | 'screen' },
   ) {
     if (!state.activeCall || !peerId) {
@@ -287,11 +288,14 @@ 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 })
       return
     }
     call.mute({ peerId, kind })
+    dispatch('sounds/playSound', Sounds.MUTE, { root: true })
   },
 
   /**
@@ -422,6 +426,9 @@ const webRTCActions = {
       commit('setActiveCall', { callId, peerId })
       commit('conversation/setCalling', true, { root: true })
       commit('updateCreatedAt', Date.now())
+      if (rootState.audio.muted) {
+        call.mute({ peerId: localId, kind: 'audio' })
+      }
     }
     call.on('CONNECTED', onCallConnected)
 
@@ -446,8 +453,11 @@ const webRTCActions = {
       commit('setMuted', {
         peerId: $Peer2Peer.id,
         kind,
-        muted: false,
+        muted: rootState.audio.muted,
       })
+      if (rootState.audio.muted) {
+        call.mute({ peerId: localId, kind: 'audio' })
+      }
     }
     call.on('LOCAL_TRACK_CREATED', onCallTrack)
 
@@ -469,6 +479,9 @@ const webRTCActions = {
         kind,
         muted: false,
       })
+      if (rootState.audio.muted) {
+        call.mute({ peerId: localId, kind: 'audio' })
+      }
     }
     call.on('REMOTE_TRACK_RECEIVED', onCallPeerTrack)