From 8de739f80ff2d3b77c563dac7c0d13bb3a999495 Mon Sep 17 00:00:00 2001
From: Carlo Venusino <cvenusino@sipwise.com>
Date: Mon, 18 Nov 2019 16:24:10 +0100
Subject: [PATCH] TT#47706 Conferencing: As a Customer, I want to mute/unmute
 each participant separately

- Must see a more menu at the top of the ParticipantItem (#70952)
- Must be able to mute/unmute the remote audio by opening the more menu and clicking the mute/unmute list item (#70955)
- Must see an icon that refelcts the current state in the ParticipantItem (whether muted or unmuted) (#70956)

Change-Id: Ibab4bdd9887c1a8ce4e3760c154cefae6b6caab7
---
 src/components/CscMedia.vue                   |  6 ++
 .../CscConferenceRemoteParticipant.vue        | 89 ++++++++++++++++---
 src/locales/en.json                           |  4 +-
 src/themes/app.common.styl                    |  3 +-
 4 files changed, 86 insertions(+), 16 deletions(-)

diff --git a/src/components/CscMedia.vue b/src/components/CscMedia.vue
index 3056648f..8374e668 100644
--- a/src/components/CscMedia.vue
+++ b/src/components/CscMedia.vue
@@ -164,6 +164,12 @@
                 else {
                     this.fitMediaToParent();
                 }
+            },
+            toggleAudio(){
+                return this.$refs.media.muted = !this.$refs.media.muted;
+            },
+            isMuted(){
+                return this.$refs.media.muted;
             }
         },
         watch: {
diff --git a/src/components/pages/Conference/CscConferenceRemoteParticipant.vue b/src/components/pages/Conference/CscConferenceRemoteParticipant.vue
index 5f51925a..14dc25df 100644
--- a/src/components/pages/Conference/CscConferenceRemoteParticipant.vue
+++ b/src/components/pages/Conference/CscConferenceRemoteParticipant.vue
@@ -2,6 +2,39 @@
     <q-card
         class="csc-conf-participant-cont"
     >
+        <div class="csc-conf-audio-icons-cont">
+            <q-icon
+                name="more_vert"
+                class="csc-conf-toggle-audio-menu-icon"
+            >
+                <q-popover ref="popover" class="csc-conf-toggle-audio-popover">
+                    <q-list
+                        link
+                        class="no-border csc-conf-toggle-audio-menu-item"
+                    >
+                        <q-item
+                            @click="toggleAudio"
+                        >
+                            <q-item-main
+                                :label="audioLabel()"
+                            />
+                        </q-item>
+                    </q-list>
+                </q-popover>
+            </q-icon>
+            <q-icon
+                class="csc-conf-toggle-audio-icon"
+                name="volume_off"
+                v-if="isMuted"
+            >
+            </q-icon>
+            <q-icon
+                class="csc-conf-toggle-audio-icon"
+                name="volume_up"
+                v-if="!isMuted"
+            >
+            </q-icon>
+        </div>
         <q-icon
             name="person"
             class="csc-conf-avatar"
@@ -24,7 +57,7 @@
 </template>
 
 <script>
-    import { QIcon, QCard, QCardMedia, QCardTitle } from 'quasar-framework'
+    import { QIcon, QCard, QCardMedia, QCardTitle, QPopover, QList, QItem, QItemMain } from 'quasar-framework'
     import CscMedia from "../../CscMedia";
     import {
         mapGetters,
@@ -37,11 +70,16 @@
             QCard,
             QCardMedia,
             QCardTitle,
+            QPopover,
+            QList,
+            QItem,
+            QItemMain,
             CscMedia
         },
         data: function () {
             return {
-                localMediaStream : null
+                localMediaStream : null,
+                isMuted: false
             }
         },
         props: [
@@ -59,29 +97,38 @@
             ])
         },
         mounted() {
-            this.assignStream(this);
+            this.assignStream();
             if(!this.manualSelection){
                 this.$store.commit('conference/setSelectedParticipant', this.remoteParticipant.id);
             }
         },
         methods: {
-            assignStream: (scope) => {
-                if (scope.$refs.cscMedia && scope.remoteMediaStreams[scope.remoteParticipant.id] === scope.remoteParticipant.id) {
-                    scope.localMediaStream = scope.remoteMediaStream(scope.remoteParticipant.id);
-                    scope.$refs.cscMedia.assignStream(scope.localMediaStream);
-                    if(scope.selectedParticipant == scope.remoteParticipant.id){
-                        scope.$store.commit('conference/setSelectedParticipant', 'local'); // TODO improve (workaround to reset the mediaStream)
-                        scope.$store.commit('conference/setSelectedParticipant', scope.remoteParticipant.id);
+            assignStream(){
+                if (this.$refs.cscMedia && this.remoteMediaStreams[this.remoteParticipant.id] === this.remoteParticipant.id) {
+                    this.localMediaStream = this.remoteMediaStream(this.remoteParticipant.id);
+                    this.$refs.cscMedia.assignStream(this.localMediaStream);
+                    if(this.selectedParticipant == this.remoteParticipant.id){
+                        this.$store.commit('conference/setSelectedParticipant', 'local'); // TODO improve (workaround to reset the mediaStream)
+                        this.$store.commit('conference/setSelectedParticipant', this.remoteParticipant.id);
                     }
                 }
-                else if (scope.$refs.cscMedia) {
-                    scope.$refs.cscMedia.reset();
+                else if (this.$refs.cscMedia) {
+                    this.$refs.cscMedia.reset();
                 }
+            },
+            toggleAudio(){
+                this.$refs.popover.close()
+                this.isMuted = this.$refs.cscMedia.toggleAudio();
+            },
+            audioLabel() {
+                return this.isMuted
+                        ? this.$t('conferencing.unmuteMicrophone')
+                        : this.$t('conferencing.muteMicrophone');
             }
         },
         watch: {
             remoteMediaStreams() {
-                this.assignStream(this);
+                this.assignStream();
             }
         }
     }
@@ -89,4 +136,20 @@
 
 <style lang="stylus" rel="stylesheet/stylus">
     @import '../../../themes/app.common.styl'
+    .csc-conf-audio-icons-cont
+        position relative
+        width 100%
+    .csc-conf-toggle-audio-menu-icon
+        position absolute
+        padding-top 5px
+        z-index 10
+    .csc-conf-toggle-audio-icon
+        @extend .csc-conf-toggle-audio-menu-icon
+        right 5px
+        cursor default
+    .csc-conf-toggle-audio-popover
+        width 115px
+    .csc-conf-toggle-audio-menu-item
+        .q-item
+            font-size 14px
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
index aec2b754..5d15f54e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -596,7 +596,9 @@
         "copyLinkButtonLabel": "Copy link",
         "exitDialogTitle": "Leave conference",
         "exitDialogText": "Leave current conference now!",
-        "leaveButtonLabel": "Leave"
+        "leaveButtonLabel": "Leave",
+        "muteMicrophone": "Mute",
+        "unmuteMicrophone": "Unmute"
     },
     "userSettings": {
         "changePassword": "Change password",
diff --git a/src/themes/app.common.styl b/src/themes/app.common.styl
index 6b35852d..41006b1b 100644
--- a/src/themes/app.common.styl
+++ b/src/themes/app.common.styl
@@ -256,8 +256,7 @@ input.q-input-target
     position relative
     width 100%
     height 100%
-    top 0
-    bottom 0
+    top 0px
     left -22px
     right 0
     margin auto