fix(video): fix toggle video bugs, improve video unit tests (#3490)

components/views/media/actions/Actions.vue

@@ -57,12 +57,13 @@ export default Vue.extend({
      * @example
      */
     toggleMute(kind: WebRTCEnum) {
+      // TODO: isLoading needs to be kind specific, currently all 3 kinds show loading icon if any of them is loading.
       this.isLoading = true
       try {
         if (kind === WebRTCEnum.AUDIO) {
-          this.$store.dispatch('audio/toggleMute', undefined, { root: true })
+          this.$store.dispatch('audio/toggleMute')
         } else if (kind === WebRTCEnum.VIDEO) {
-          this.$store.dispatch('video/toggleMute', undefined, { root: true })
+          this.$store.dispatch('video/toggleMute')
         } else {
           this.$store.dispatch(
             'webrtc/toggleMute',

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

@@ -63,9 +63,9 @@ export default Vue.extend({
       this.isLoading = true
       try {
         if (kind === WebRTCEnum.AUDIO) {
-          this.$store.dispatch('audio/toggleMute', undefined, { root: true })
+          this.$store.dispatch('audio/toggleMute')
         } else if (kind === WebRTCEnum.VIDEO && this.inCall) {
-          this.$store.dispatch('video/toggleMute', undefined, { root: true })
+          this.$store.dispatch('video/toggleMute')
         }
       } catch (e: any) {
         this.$toast.error(this.$t(e.message) as string)
@@ -81,4 +81,5 @@ export default Vue.extend({
 })
 </script>
 
-<style scoped lang="less" src="./Controls.less"></style>
+<style scoped lang="less" src="./Controls.less">
+</style>

libraries/WebRTC/Call.ts

@@ -751,6 +751,8 @@ export class Call extends Emitter<CallEventListeners> {
     } else {
       track = stream.getVideoTracks()[0]
       track.enabled = false
+      track.stop()
+      stream.removeTrack(track)
     }
 
     // tell all of the peers that we muted the track
@@ -795,7 +797,10 @@ export class Call extends Emitter<CallEventListeners> {
     if (peerId === this.localId) {
       if (kind === 'audio' && !this.streams[peerId]?.audio) {
         await this.createAudioStream(true)
-      } else if (kind === 'video' && !this.streams[peerId]?.video) {
+      } else if (
+        kind === 'video' &&
+        !this.streams[peerId]?.video?.getVideoTracks()?.length
+      ) {
         await this.createVideoStream(true)
       } else if (kind === 'screen' && !this.streams[peerId]?.screen) {
         await this.createDisplayStream()

store/audio/__snapshots__/mutations.test.ts.snap

@@ -36,18 +36,6 @@ exports[`mutations.default.setInputVolume 4 1`] = `undefined`;
 
 exports[`mutations.default.setInputVolume 5 1`] = `undefined`;
 
-exports[`mutations.default.setMuted 0 1`] = `undefined`;
-
-exports[`mutations.default.setMuted 1 1`] = `undefined`;
-
-exports[`mutations.default.setMuted 2 1`] = `undefined`;
-
-exports[`mutations.default.setMuted 3 1`] = `undefined`;
-
-exports[`mutations.default.setMuted 4 1`] = `undefined`;
-
-exports[`mutations.default.setMuted 5 1`] = `undefined`;
-
 exports[`mutations.default.setSoundLevel 0 1`] = `undefined`;
 
 exports[`mutations.default.setSoundLevel 1 1`] = `undefined`;
@@ -83,3 +71,15 @@ exports[`mutations.default.setVolume 3 1`] = `undefined`;
 exports[`mutations.default.setVolume 4 1`] = `undefined`;
 
 exports[`mutations.default.setVolume 5 1`] = `undefined`;
+
+exports[`mutations.default.toggleMute 0 1`] = `undefined`;
+
+exports[`mutations.default.toggleMute 1 1`] = `undefined`;
+
+exports[`mutations.default.toggleMute 2 1`] = `undefined`;
+
+exports[`mutations.default.toggleMute 3 1`] = `undefined`;
+
+exports[`mutations.default.toggleMute 4 1`] = `undefined`;
+
+exports[`mutations.default.toggleMute 5 1`] = `undefined`;

store/audio/actions.test.ts

@@ -1,4 +1,3 @@
-import { Sounds } from '~/libraries/SoundManager/SoundManager'
 import * as actions from '~/store/audio/actions'
 import { RegistrationStatus } from '~/store/accounts/types'
 import {
@@ -8,6 +7,25 @@ import {
 import { DataStateType } from '~/store/dataState/types'
 import { CaptureMouseTypes } from '~/store/settings/types'
 import { RootState } from '~/types/store/store'
+import { AudioState } from '~/store/audio/types'
+import initialAudioState from '~/store/audio/state'
+import { Sounds } from '~/libraries/SoundManager/SoundManager'
+import { $WebRTC } from '~/libraries/WebRTC/WebRTC'
+
+jest.mock('~/libraries/WebRTC/WebRTC', () => ({
+  $WebRTC: {
+    getCall: jest.fn(),
+  },
+}))
+const muteMock = jest.fn()
+const unmuteMock = jest.fn()
+$WebRTC.getCall.mockReturnValue({
+  mute: muteMock,
+  unmute: unmuteMock,
+})
+afterEach(() => {
+  jest.clearAllMocks()
+})
 
 describe('actions.default.toggleMute', () => {
   const initialRootState: RootState = {
@@ -124,7 +142,10 @@ describe('actions.default.toggleMute', () => {
     webrtc: {
       initialized: true,
       incomingCall: undefined,
-      activeCall: undefined,
+      activeCall: {
+        callId: 'call-id',
+        peerId: 'peer-id',
+      },
       streamMuted: {},
     },
     settings: {
@@ -164,32 +185,39 @@ describe('actions.default.toggleMute', () => {
         },
       ],
     },
+    audio: initialAudioState(),
   }
-  test('0', () => {
+
+  test('Should mute audio', () => {
     const commit = jest.fn()
     const dispatch = jest.fn()
-    const state = {
+    const state: AudioState = {
+      ...initialAudioState(),
       muted: true,
     }
     const rootState = { ...initialRootState }
-    actions.default.toggleMute({ state, commit, dispatch, rootState }, false)
-    expect(commit).toHaveBeenCalledWith('setMuted', !state.muted)
-    expect(dispatch).toHaveBeenCalledWith('sounds/playSound', Sounds.UNMUTE, {
+    actions.default.toggleMute({ state, commit, dispatch, rootState })
+    expect(commit).toHaveBeenCalledWith('toggleMute')
+    expect(dispatch).toHaveBeenCalledWith('sounds/playSound', Sounds.MUTE, {
       root: true,
     })
+    expect(muteMock).toHaveBeenCalledWith({ kind: 'audio' })
   })
-  test('1', () => {
+
+  test('Should unmute audio', () => {
     const commit = jest.fn()
     const dispatch = jest.fn()
-    const state = {
+    const state: AudioState = {
+      ...initialAudioState(),
       muted: false,
     }
     const rootState = { ...initialRootState }
-    actions.default.toggleMute({ state, commit, dispatch, rootState }, true)
-    expect(commit).toHaveBeenCalledWith('setMuted', !state.muted)
-    expect(dispatch).toHaveBeenCalledWith('sounds/playSound', Sounds.MUTE, {
+    actions.default.toggleMute({ state, commit, dispatch, rootState })
+    expect(commit).toHaveBeenCalledWith('toggleMute')
+    expect(dispatch).toHaveBeenCalledWith('sounds/playSound', Sounds.UNMUTE, {
       root: true,
     })
+    expect(unmuteMock).toHaveBeenCalledWith({ kind: 'audio' })
   })
 })
 

store/audio/actions.ts

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

store/audio/mutations.test.ts

@@ -74,98 +74,80 @@ describe('mutations.default.mute', () => {
   })
 })
 
-describe('mutations.default.setMuted', () => {
+describe('mutations.default.toggleMute', () => {
   test('0', () => {
-    const result: any = mutations.default.setMuted(
-      {
-        previousVolume: 100,
-        inputVolume: 100,
-        muted: false,
-        volume: -100,
-        deafened: false,
-        sounds: { inboundMedia: 10.0, outboundMedia: 10.23, system: -1.0 },
-      },
-      true,
-    )
+    const result: any = mutations.default.toggleMute({
+      previousVolume: 100,
+      inputVolume: 100,
+      muted: false,
+      volume: -100,
+      deafened: false,
+      sounds: { inboundMedia: 10.0, outboundMedia: 10.23, system: -1.0 },
+    })
     expect(result).toMatchSnapshot()
   })
 
   test('1', () => {
-    const result: any = mutations.default.setMuted(
-      {
-        previousVolume: 0,
-        inputVolume: -100,
-        muted: true,
-        volume: -1,
-        deafened: true,
-        sounds: { inboundMedia: -0.5, outboundMedia: -29.45, system: 0.5 },
-      },
-      true,
-    )
+    const result: any = mutations.default.toggleMute({
+      previousVolume: 0,
+      inputVolume: -100,
+      muted: true,
+      volume: -1,
+      deafened: true,
+      sounds: { inboundMedia: -0.5, outboundMedia: -29.45, system: 0.5 },
+    })
     expect(result).toMatchSnapshot()
   })
 
   test('2', () => {
-    const result: any = mutations.default.setMuted(
-      {
-        previousVolume: 0,
-        inputVolume: -100,
-        muted: true,
-        volume: 0,
-        deafened: false,
-        sounds: { inboundMedia: 10.0, outboundMedia: 0.0, system: 0.0 },
-      },
-      true,
-    )
+    const result: any = mutations.default.toggleMute({
+      previousVolume: 0,
+      inputVolume: -100,
+      muted: true,
+      volume: 0,
+      deafened: false,
+      sounds: { inboundMedia: 10.0, outboundMedia: 0.0, system: 0.0 },
+    })
     expect(result).toMatchSnapshot()
   })
 
   test('3', () => {
-    const result: any = mutations.default.setMuted(
-      {
-        previousVolume: -1,
-        inputVolume: 0,
-        muted: true,
-        volume: 100,
-        deafened: true,
-        sounds: { inboundMedia: -29.45, outboundMedia: -0.5, system: 0.5 },
-      },
-      true,
-    )
+    const result: any = mutations.default.toggleMute({
+      previousVolume: -1,
+      inputVolume: 0,
+      muted: true,
+      volume: 100,
+      deafened: true,
+      sounds: { inboundMedia: -29.45, outboundMedia: -0.5, system: 0.5 },
+    })
     expect(result).toMatchSnapshot()
   })
 
   test('4', () => {
-    const result: any = mutations.default.setMuted(
-      {
-        previousVolume: -100,
-        inputVolume: -1,
-        muted: false,
-        volume: 1,
-        deafened: true,
-        sounds: { inboundMedia: 0.0, outboundMedia: 0.0, system: -1.0 },
-      },
-      true,
-    )
+    const result: any = mutations.default.toggleMute({
+      previousVolume: -100,
+      inputVolume: -1,
+      muted: false,
+      volume: 1,
+      deafened: true,
+      sounds: { inboundMedia: 0.0, outboundMedia: 0.0, system: -1.0 },
+    })
     expect(result).toMatchSnapshot()
   })
 
   test('5', () => {
-    const result: any = mutations.default.setMuted(
-      {
-        previousVolume: -Infinity,
-        inputVolume: -Infinity,
-        muted: true,
-        volume: -Infinity,
-        deafened: false,
-        sounds: {
-          inboundMedia: -Infinity,
-          outboundMedia: -Infinity,
-          system: -Infinity,
-        },
+    const result: any = mutations.default.toggleMute({
+      previousVolume: -Infinity,
+      inputVolume: -Infinity,
+      muted: true,
+      volume: -Infinity,
+      deafened: false,
+      sounds: {
+        inboundMedia: -Infinity,
+        outboundMedia: -Infinity,
+        system: -Infinity,
       },
-      true,
-    )
+    })
     expect(result).toMatchSnapshot()
   })
 })

store/audio/mutations.ts

@@ -4,8 +4,8 @@ const mutations = {
   mute(state: AudioState) {
     state.muted = !state.muted
   },
-  setMuted(state: AudioState, muted: boolean) {
-    state.muted = muted
+  toggleMute(state: AudioState) {
+    state.muted = !state.muted
   },
   deafen(state: AudioState) {
     const isDeafened = state.deafened