TT#70157 Fix duplicate media creation issue

Change-Id: I5e4728fda8d1ff260a1183ef0c8eeeccc17ea11b

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;

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();
+                }
             }
         }
     }

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: {

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() {

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);
-                });
+                }
             }
         }
     }