TT#71912 Optimise muteState mutations

Change-Id: Ic427ec561d79c2b9521a86e259312aec8402b597

src/components/layouts/Conference.vue

@@ -153,6 +153,7 @@
 </template>
 
 <script>
+    import _ from 'lodash';
     import {
         mapGetters,
         mapState,
@@ -293,7 +294,7 @@
             },
             toggleMuteAll(){
                 this.$refs.popover.close();
-                if(this.mutedState.length < 1) {
+                if(_.isEmpty(this.mutedState)) {
                     this.$store.dispatch('conference/muteAll');
                 }
                 else{
@@ -301,7 +302,7 @@
                 }
             },
             muteLabel() {
-                return this.mutedState.length < 1
+                return _.isEmpty(this.mutedState)
                         ? this.$t('conferencing.muteAll')
                         : this.$t('conferencing.unmuteAll');
             },

src/components/pages/Conference/CscConferenceRemoteParticipant.vue

@@ -57,6 +57,7 @@
 </template>
 
 <script>
+    import _ from 'lodash';
     import { QIcon, QCard, QCardMedia, QCardTitle, QPopover, QList, QItem, QItemMain } from 'quasar-framework'
     import CscMedia from "../../CscMedia";
     import {
@@ -133,7 +134,7 @@
                 this.assignStream();
             },
             mutedState(){
-                this.isAudioMuted = this.mutedState.includes(this.remoteParticipant.id);
+                this.isAudioMuted = _.has(this.mutedState, this.remoteParticipant.id);
                 this.$refs.cscMedia.toggleAudio(this.isAudioMuted);
             }
         }

src/store/conference.js

@@ -25,7 +25,7 @@ export default {
         leaveState: RequestState.initiated,
         leaveError: null,
         participants: [],
-        mutedState: [],
+        mutedState: {},
         remoteMediaStreams: {},
         selectedParticipant: null,
         manualSelection: false
@@ -231,14 +231,10 @@ export default {
             state.manualSelection = val;
         },
         addMutedState(state, participantId){
-            if(!state.mutedState[participantId]){
-                state.mutedState.push(participantId);
-            }
+            Vue.set(state.mutedState, participantId, participantId);
         },
         removeMutedState(state, participantId){
-            state.mutedState = state.mutedState.filter(($participant) => {
-                return participantId !== $participant;
-            });
+            Vue.delete(state.mutedState, participantId);
         }
     },
     actions: {