From 81f46b521670fcd43cf77c66f5c7c949013184b3 Mon Sep 17 00:00:00 2001
From: Hans-Peter Herzog <hherzog@sipwise.com>
Date: Tue, 12 Nov 2019 12:05:30 +0100
Subject: [PATCH] TT#70157 Fix duplicate media creation issue

Change-Id: I5e4728fda8d1ff260a1183ef0c8eeeccc17ea11b
---
 src/components/CscMedia.vue                   |  7 ++++
 src/components/layouts/Conference.vue         | 19 ++++++-----
 .../CscConferenceRemoteParticipant.vue        |  3 ++
 src/plugins/conference.js                     | 31 ++++++------------
 src/store/conference.js                       | 32 ++++++++++---------
 5 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/src/components/CscMedia.vue b/src/components/CscMedia.vue
index ee676827..3056648f 100644
--- a/src/components/CscMedia.vue
+++ b/src/components/CscMedia.vue
@@ -66,6 +66,13 @@
             QIcon
         },
         methods: {
+            reset() {
+                if (this.$refs.media) {
+                    this.$refs.media.pause();
+                    this.$refs.media.srcObject = null;
+                    this.$refs.media.load();
+                }
+            },
             assignStream(stream) {
                 if(stream !== null && stream !== undefined) {
                     this.loading = true;
diff --git a/src/components/layouts/Conference.vue b/src/components/layouts/Conference.vue
index bf33ca9a..57c36445 100644
--- a/src/components/layouts/Conference.vue
+++ b/src/components/layouts/Conference.vue
@@ -99,7 +99,8 @@
 
 <script>
     import {
-        mapGetters
+        mapGetters,
+        mapActions
     } from 'vuex'
     import CscConferenceJoin from '../pages/Conference/CscConferenceJoin'
     import CscConferenceJoined from '../pages/Conference/CscConferenceJoined'
@@ -171,6 +172,9 @@
             }
         },
         methods: {
+            ...mapActions('conference', [
+                'leave'
+            ]),
             close() {
                 if(!this.isJoined) {
                     this.$router.push({path: '/user/home'});
@@ -198,13 +202,7 @@
             },
             async join(conferenceId) {
                 if(this.hasConferenceId) {
-                    await this.$store.dispatch('conference/enableMicrophone');
-                    this.$store.dispatch('conference/join', conferenceId);
-                }
-            },
-            leave() {
-                if(this.isJoined) {
-                    this.$store.dispatch('conference/leave');
+                    await this.$store.dispatch('conference/join', conferenceId);
                 }
             }
         },
@@ -213,6 +211,11 @@
                 if(!value) {
                     this.$store.commit('conference/disposeLocalMedia');
                 }
+            },
+            localMediaStream(stream) {
+                if (this.$refs.localMedia && (stream === null || stream === undefined)) {
+                    this.$refs.localMedia.reset();
+                }
             }
         }
     }
diff --git a/src/components/pages/Conference/CscConferenceRemoteParticipant.vue b/src/components/pages/Conference/CscConferenceRemoteParticipant.vue
index 75a7413a..6aa01285 100644
--- a/src/components/pages/Conference/CscConferenceRemoteParticipant.vue
+++ b/src/components/pages/Conference/CscConferenceRemoteParticipant.vue
@@ -51,6 +51,9 @@
                 if (this.$refs.cscMedia && this.remoteMediaStreams[this.remoteParticipant.id] === this.remoteParticipant.id) {
                     this.$refs.cscMedia.assignStream(this.remoteMediaStream(this.remoteParticipant.id));
                 }
+                else if (this.$refs.cscMedia) {
+                    this.$refs.cscMedia.reset();
+                }
             }
         },
         watch: {
diff --git a/src/plugins/conference.js b/src/plugins/conference.js
index 780c8164..2193517d 100644
--- a/src/plugins/conference.js
+++ b/src/plugins/conference.js
@@ -43,32 +43,20 @@ export class ConferencePlugin {
         return this.rtcEngine.getConferenceNetwork();
     }
 
-    joinConference(options) {
-        return new Promise((resolve, reject)=>{
-            options.localMediaStream = this.getLocalMediaStream();
-            this.getNetwork().joinConference(options).then((conference)=>{
-                this.conference = conference;
-                resolve(conference);
-            }).catch((err)=>{
-                reject(err);
-            });
-        });
+    async joinConference(options) {
+        options.localMediaStream = this.getLocalMediaStream();
+        this.conference = await this.getNetwork().joinConference(options);
+        return this.conference;
     }
 
-    changeConferenceMedia() {
-        return new Promise((resolve, reject)=>{
-            this.getNetwork().changeConferenceMedia({
-                localMediaStream: this.getLocalMediaStream()
-            }).then(()=>{
-                resolve();
-            }).catch((err)=>{
-                reject(err);
-            });
+    async changeConferenceMedia() {
+        await this.getNetwork().changeConferenceMedia({
+            localMediaStream: this.getLocalMediaStream()
         });
     }
 
-    leaveConference() {
-        return this.getNetwork().leaveConference();
+    async leaveConference() {
+        await this.getNetwork().leaveConference();
     }
 
     onLeft(listener) {
@@ -137,6 +125,7 @@ export class ConferencePlugin {
         if(this.hasLocalMediaStream()) {
             this.getLocalMediaStream().stop();
         }
+        this.localMediaStream = null;
     }
 
     getLocalMediaStreamNative() {
diff --git a/src/store/conference.js b/src/store/conference.js
index b74eff10..f4f6da24 100644
--- a/src/store/conference.js
+++ b/src/store/conference.js
@@ -232,9 +232,6 @@ export default {
             let localMediaStream;
             return media.build().then(($localMediaStream) => {
                 localMediaStream = $localMediaStream;
-                localMediaStream.onVideoEnded(() => {
-                    context.dispatch('createLocalMedia', MediaTypes.mic);
-                });
                 Vue.$conference.setLocalMediaStream(localMediaStream);
                 switch (type) {
                     default:
@@ -371,28 +368,33 @@ export default {
                 context.dispatch('disableScreen');
             }
         },
-        join(context, conferenceId) {
-            if (context.getters.hasLocalMediaStream) {
+        async join(context, conferenceId) {
+            try {
+                if (!Vue.$conference.hasLocalMediaStream()) {
+                    await context.dispatch('enableMicrophone');
+                }
                 context.commit('joinRequesting');
-                Vue.$conference.joinConference({
+                await Vue.$conference.joinConference({
                     conferenceName: conferenceId,
                     displayName: context.getters.username
-                }).then(() => {
-                    context.commit('joinSucceeded');
-                }).catch((err) => {
-                    context.commit('joinFailed', err.message);
                 });
+                context.commit('joinSucceeded');
+            }
+            catch (err) {
+                context.commit('joinFailed', err.message);
             }
         },
-        leave(context) {
+        async leave(context) {
             if (context.getters.isJoined) {
-                context.commit('leaveRequesting');
-                Vue.$conference.leaveConference().then(() => {
+                try {
+                    context.commit('leaveRequesting');
+                    await Vue.$conference.leaveConference();
                     context.commit('leaveSucceeded');
                     context.commit('disposeLocalMedia');
-                }).catch((err) => {
+                }
+                catch (err) {
                     context.commit('leaveFailed', err.message);
-                });
+                }
             }
         }
     }