diff --git a/src/components/CscMedia.vue b/src/components/CscMedia.vue index 7cc0eef4..851c8f27 100644 --- a/src/components/CscMedia.vue +++ b/src/components/CscMedia.vue @@ -166,10 +166,7 @@ } }, toggleAudio(muted){ - return this.$refs.media.muted = muted || !this.$refs.media.muted; - }, - isMuted(){ - return this.$refs.media.muted; + this.$refs.media.muted = muted; } }, watch: { diff --git a/src/components/layouts/Conference.vue b/src/components/layouts/Conference.vue index a8177ed7..63613d03 100644 --- a/src/components/layouts/Conference.vue +++ b/src/components/layouts/Conference.vue @@ -42,7 +42,6 @@ @@ -116,6 +115,7 @@ :disable="!hasConferenceId || isJoining" /> @@ -49,9 +48,6 @@ CscConferenceRemoteParticipant, CscConferenceLocalParticipant }, - props: [ - 'isMuted' - ], computed: { ...mapState('conference', [ 'remoteMediaStreams' diff --git a/src/components/pages/Conference/CscConferenceRemoteParticipant.vue b/src/components/pages/Conference/CscConferenceRemoteParticipant.vue index b5c7cce8..1d23a7ba 100644 --- a/src/components/pages/Conference/CscConferenceRemoteParticipant.vue +++ b/src/components/pages/Conference/CscConferenceRemoteParticipant.vue @@ -78,7 +78,7 @@ }, data: function () { return { - isAudioMuted: JSON.parse(this.isMuted), + isAudioMuted: false, localMediaStream : null } }, @@ -86,15 +86,14 @@ 'remoteParticipant', 'remoteMediaStream', 'remoteMediaStreams', - 'hasRemoteVideo', - 'isMuted' + 'hasRemoteVideo' ], computed: { ...mapState('conference', [ 'manualSelection' ]), ...mapGetters('conference', [ - 'selectedParticipant' + 'mutedState' ]) }, mounted() { @@ -119,7 +118,9 @@ }, toggleAudio(){ this.$refs.popover.close(); - this.isAudioMuted = this.$refs.cscMedia.toggleAudio(); + this.isAudioMuted + ? this.$store.commit('conference/removeMutedState', this.remoteParticipant.id) + : this.$store.commit('conference/addMutedState', this.remoteParticipant.id) }, audioLabel() { return this.isAudioMuted @@ -131,9 +132,9 @@ remoteMediaStreams() { this.assignStream(); }, - isMuted(){ - this.isAudioMuted = this.isMuted; - this.$refs.cscMedia.toggleAudio(this.isMuted); + mutedState(){ + this.isAudioMuted = this.mutedState.includes(this.remoteParticipant.id); + this.$refs.cscMedia.toggleAudio(this.isAudioMuted); } } } diff --git a/src/store/conference.js b/src/store/conference.js index 34918041..ab7c0115 100644 --- a/src/store/conference.js +++ b/src/store/conference.js @@ -25,6 +25,7 @@ export default { leaveState: RequestState.initiated, leaveError: null, participants: [], + mutedState: [], remoteMediaStreams: {}, selectedParticipant: null, manualSelection: false @@ -100,6 +101,9 @@ export default { participantsList(state) { return state.participants; }, + mutedState(state){ + return state.mutedState; + }, remoteMediaStreams(state) { return state.remoteMediaStreams; }, @@ -225,6 +229,16 @@ export default { }, setManualSelection(state, val){ state.manualSelection = val; + }, + addMutedState(state, participantId){ + if(!state.mutedState[participantId]){ + state.mutedState.push(participantId); + } + }, + removeMutedState(state, participantId){ + state.mutedState = state.mutedState.filter(($participant) => { + return participantId !== $participant; + }); } }, actions: { @@ -418,6 +432,17 @@ export default { context.commit('leaveFailed', err.message); } } + }, + muteAll(context){ + for(let participant of context.getters.participantsList){ + context.commit('addMutedState', participant); + } + + }, + unMuteAll(context){ + for(let participant of context.getters.participantsList){ + context.commit('removeMutedState', participant); + } } } }