From 8d94175edd5da8d7a2c093f6063b9b7bf42bbe2f Mon Sep 17 00:00:00 2001
From: Carlo Venusino <cvenusino@sipwise.com>
Date: Mon, 25 Nov 2019 18:15:26 +0100
Subject: [PATCH] TT#47707 Conferencing: As a Customer, I want to mute/unmute
 all participants

- can mute all participants at the same time by clicking a single button (#71350)
- can unmute all participants at the same time by clicking a single button (#71352)

Change-Id: Iaf40499acc23baaef797db61b714932fb561e7a0
---
 src/components/CscMedia.vue                   |  4 +-
 src/components/layouts/Conference.vue         | 49 ++++++++++++++++++-
 .../Conference/CscConferenceParticipants.vue  |  4 ++
 .../CscConferenceRemoteParticipant.vue        | 19 ++++---
 src/locales/en.json                           |  4 +-
 5 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/src/components/CscMedia.vue b/src/components/CscMedia.vue
index 8374e668..7cc0eef4 100644
--- a/src/components/CscMedia.vue
+++ b/src/components/CscMedia.vue
@@ -165,8 +165,8 @@
                     this.fitMediaToParent();
                 }
             },
-            toggleAudio(){
-                return this.$refs.media.muted = !this.$refs.media.muted;
+            toggleAudio(muted){
+                return this.$refs.media.muted = muted || !this.$refs.media.muted;
             },
             isMuted(){
                 return this.$refs.media.muted;
diff --git a/src/components/layouts/Conference.vue b/src/components/layouts/Conference.vue
index 3e58970b..a8177ed7 100644
--- a/src/components/layouts/Conference.vue
+++ b/src/components/layouts/Conference.vue
@@ -40,7 +40,9 @@
                 v-if="!isJoining && isJoined"
             />
             <csc-conference-participants
+                ref="confParticipants"
                 v-if="!isJoining && isJoined"
+                :is-muted="isMuted"
             />
         </div>
 
@@ -113,6 +115,31 @@
                     @click="toggleScreen()"
                     :disable="!hasConferenceId || isJoining"
                 />
+                <q-btn
+                    class="csc-conf-button"
+                    :color="screenButtonColor"
+                    icon="more_vert"
+                    round
+                    :disable="!hasConferenceId || isJoining"
+                >
+                    <q-popover
+                        ref="popover"
+                        :disable="participantsList.length < 1">
+                        <q-list
+                            link
+                            class="no-border"
+                        >
+                            <q-item
+                                @click="toggleMuteAll"
+                            >
+                                <q-item-main
+                                    :label="muteLabel()"
+
+                                />
+                            </q-item>
+                        </q-list>
+                    </q-popover>
+                </q-btn>
             </div>
         </div>
         <csc-confirm-dialog
@@ -141,12 +168,17 @@
         QBtn,
         QCard,
         QCardMedia,
-        QIcon
+        QIcon,
+        QPopover,
+        QList,
+        QItem,
+        QItemMain
     } from 'quasar-framework'
     import CscConfirmDialog from "../CscConfirmationDialog";
     export default {
         data: function () {
             return {
+                isMuted: false,
                 selectedMediaStream : null,
                 selectedParticipantName: null
             }
@@ -165,7 +197,11 @@
             QBtn,
             QCard,
             QCardMedia,
-            QIcon
+            QIcon,
+            QPopover,
+            QList,
+            QItem,
+            QItemMain
         },
         computed: {
             ...mapState('conference',[
@@ -255,6 +291,15 @@
                     this.$store.dispatch('conference/toggleScreen');
                 }
             },
+            toggleMuteAll(){
+                this.$refs.popover.close();
+                this.isMuted = !this.isMuted;
+            },
+            muteLabel() {
+                return this.isMuted
+                        ? this.$t('conferencing.unmuteAll')
+                        : this.$t('conferencing.muteAll');
+            },
             async join(conferenceId) {
                 if(this.hasConferenceId) {
                     await this.$store.dispatch('conference/join', conferenceId);
diff --git a/src/components/pages/Conference/CscConferenceParticipants.vue b/src/components/pages/Conference/CscConferenceParticipants.vue
index 3eaf9023..940483e3 100644
--- a/src/components/pages/Conference/CscConferenceParticipants.vue
+++ b/src/components/pages/Conference/CscConferenceParticipants.vue
@@ -23,6 +23,7 @@
                 :has-remote-video="hasRemoteVideo(participantId)"
                 :remote-media-stream="remoteMediaStream"
                 :remote-media-streams="remoteMediaStreams"
+                :is-muted="isMuted"
             />
         </div>
     </div>
@@ -48,6 +49,9 @@
             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 14dc25df..b5c7cce8 100644
--- a/src/components/pages/Conference/CscConferenceRemoteParticipant.vue
+++ b/src/components/pages/Conference/CscConferenceRemoteParticipant.vue
@@ -25,13 +25,13 @@
             <q-icon
                 class="csc-conf-toggle-audio-icon"
                 name="volume_off"
-                v-if="isMuted"
+                v-if="isAudioMuted"
             >
             </q-icon>
             <q-icon
                 class="csc-conf-toggle-audio-icon"
                 name="volume_up"
-                v-if="!isMuted"
+                v-if="!isAudioMuted"
             >
             </q-icon>
         </div>
@@ -78,8 +78,8 @@
         },
         data: function () {
             return {
-                localMediaStream : null,
-                isMuted: false
+                isAudioMuted: JSON.parse(this.isMuted),
+                localMediaStream : null
             }
         },
         props: [
@@ -87,6 +87,7 @@
             'remoteMediaStream',
             'remoteMediaStreams',
             'hasRemoteVideo',
+            'isMuted'
         ],
         computed: {
             ...mapState('conference', [
@@ -117,11 +118,11 @@
                 }
             },
             toggleAudio(){
-                this.$refs.popover.close()
-                this.isMuted = this.$refs.cscMedia.toggleAudio();
+                this.$refs.popover.close();
+                this.isAudioMuted = this.$refs.cscMedia.toggleAudio();
             },
             audioLabel() {
-                return this.isMuted
+                return this.isAudioMuted
                         ? this.$t('conferencing.unmuteMicrophone')
                         : this.$t('conferencing.muteMicrophone');
             }
@@ -129,6 +130,10 @@
         watch: {
             remoteMediaStreams() {
                 this.assignStream();
+            },
+            isMuted(){
+                this.isAudioMuted = this.isMuted;
+                this.$refs.cscMedia.toggleAudio(this.isMuted);
             }
         }
     }
diff --git a/src/locales/en.json b/src/locales/en.json
index 5d15f54e..a434858c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -598,7 +598,9 @@
         "exitDialogText": "Leave current conference now!",
         "leaveButtonLabel": "Leave",
         "muteMicrophone": "Mute",
-        "unmuteMicrophone": "Unmute"
+        "unmuteMicrophone": "Unmute",
+        "muteAll": "Mute all",
+        "unmuteAll": "Unmute all"
     },
     "userSettings": {
         "changePassword": "Change password",