From ac0f4c40f992014ce225e7c810cc0a6a03a9c3d7 Mon Sep 17 00:00:00 2001 From: Jason Woodland Date: Mon, 30 May 2022 19:25:55 +1000 Subject: [PATCH] fix(call): mute button logic --- components/views/media/actions/Actions.vue | 6 ++++-- .../navigation/sidebar/controls/Controls.vue | 6 +++--- store/audio/actions.ts | 9 +++++++-- store/video/actions.test.ts | 8 ++++---- store/video/actions.ts | 19 +++++++++++++------ store/webrtc/actions.ts | 12 +++++++++--- 6 files changed, 40 insertions(+), 20 deletions(-) diff --git a/components/views/media/actions/Actions.vue b/components/views/media/actions/Actions.vue index e630efecda..3889e8de29 100644 --- 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 index a47697234d..9c070b78e1 100644 --- 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 index d9b5fd8a57..ac405b63c5 100644 --- a/store/audio/actions.ts +++ b/store/audio/actions.ts @@ -1,5 +1,7 @@ +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 { /** @@ -7,8 +9,11 @@ export default { * @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, + 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 index 0ed2055795..c7d93fb5e7 100644 --- 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 index 066009ad70..e059fafa74 100644 --- 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, - 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 index 9e52b59a02..c909c09c3d 100644 --- 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, + { commit, state, rootState, dispatch }: ActionsArguments, { 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' })