TT#72500 Main media stream selection issue

Change-Id: I0382c706a8f6ae1d567273080191043b62871866

src/components/layouts/Conference.vue

@@ -311,22 +311,24 @@
                     await this.$store.dispatch('conference/join', conferenceId);
                 }
             },
-            showSelectedParticipant: ( participant, scope )=>{
-                if(scope.$refs.localMedia) {
+            showSelectedParticipant( participant ) {
+                if(this.$refs.localMedia) {
                     switch(participant){
                         case 'local':
-                            if(scope.localParticipant){
-                                scope.selectedParticipantName = scope.localParticipant.displayName
-                                scope.selectedMediaStream = scope.localMediaStream
-                                scope.$refs.localMedia.assignStream(scope.selectedMediaStream);
+                            if(this.localParticipant){
+                                this.selectedParticipantName = this.localParticipant.displayName
+                                this.selectedMediaStream = this.localMediaStream
+                                this.$refs.localMedia.assignStream(this.selectedMediaStream);
+
                             }
                         break;
                         default:
-                            scope.selectedMediaStream = scope.remoteMediaStream(participant);
-                            scope.$refs.localMedia.assignStream(scope.selectedMediaStream);
-                            scope.selectedParticipantName = scope.remoteParticipant(participant).displayName
+                            this.selectedMediaStream = this.remoteMediaStream(participant);
+                            this.$refs.localMedia.assignStream(this.selectedMediaStream);
+                            this.selectedParticipantName = this.remoteParticipant(participant).displayName;
                         break;
                     }
+
                 }
             }
         },
@@ -339,7 +341,7 @@
             selectedParticipant:{
                 handler: function(participant){
                     if(participant){
-                        this.showSelectedParticipant(participant, this);
+                        this.showSelectedParticipant(participant);
                     }
                 },
                 deep: true

src/components/pages/Conference/CscConferenceRemoteParticipant.vue

@@ -94,6 +94,7 @@
                 'manualSelection'
             ]),
             ...mapGetters('conference', [
+                'selectedParticipant',
                 'mutedState'
             ])
         },
@@ -105,7 +106,7 @@
         },
         methods: {
             assignStream(){
-                if (this.$refs.cscMedia && this.remoteMediaStreams[this.remoteParticipant.id] === this.remoteParticipant.id) {
+                if (this.$refs.cscMedia && _.has(this.remoteMediaStreams, this.remoteParticipant.id)){
                     this.localMediaStream = this.remoteMediaStream(this.remoteParticipant.id);
                     this.$refs.cscMedia.assignStream(this.localMediaStream);
                     if(this.selectedParticipant == this.remoteParticipant.id){

src/store/conference.js

@@ -195,6 +195,10 @@ export default {
             state.joinState = RequestState.initiated;
             state.joinError = null;
             state.selectedParticipant = null;
+            state.remoteMediaStreams = {}
+            state.manualSelection = false;
+            state.participants = {};
+            state.mutedState = {};
         },
         leaveFailed(state, error) {
             state.leaveState = RequestState.failed;