TT#72407 Additional refactoring of conference store

Change-Id: Ic96a8f39c388425051aa0b438f124d8f7a447086

src/components/layouts/Conference.vue

@@ -64,17 +64,7 @@
         </div>
         <div
             id="csc-conf-main-media"
-            v-show="!isJoined
+            v-show="showMainMedia"
-                        && isMediaEnabled
-                        && ( isCameraEnabled || isScreenEnabled )
-                    ||  (selectedParticipant
-                            && (selectedParticipant == 'local'
-                                && isMediaEnabled
-                                && (isCameraEnabled
-                                    || isScreenEnabled)
-                                )
-                            || selectedHasVideo
-                        )"
         >
             <csc-media
                 ref="localMedia"
@@ -124,7 +114,7 @@
                 >
                     <q-popover
                         ref="popover"
-                        :disable="participantsList.length < 1">
+                        :disable="conferenceHasParticipants">
                         <q-list
                             link
                             class="no-border"
@@ -261,6 +251,22 @@
                     default:
                         return this.hasRemoteVideo(selectedParticipant);
                 }
+            },
+            showMainMedia(){
+                return !this.isJoined
+                            && this.isMediaEnabled
+                            && ( this.isCameraEnabled || this.isScreenEnabled )
+                        ||  (this.selectedParticipant
+                                && (this.selectedParticipant == 'local'
+                                    && this.isMediaEnabled
+                                    && (this.isCameraEnabled
+                                        || this.isScreenEnabled)
+                                    )
+                                || this.selectedHasVideo
+                            )
+            },
+            conferenceHasParticipants(){
+                return Object.keys(this.participantsList).length < 1;
             }
         },
         methods: {

src/components/pages/Conference/CscConferenceLocalParticipant.vue

@@ -8,19 +8,18 @@
             v-if="!localMediaStream || localMediaStream && (!isCameraEnabled && !isScreenEnabled)"
         >
         </q-icon>
-
+        <csc-media
-      <csc-media
           ref="cscMedia"
           v-show="localMediaStream && (isCameraEnabled || isScreenEnabled)"
           class="csc-media-cont"
           :muted="true"
           :stream="localMediaStream"
-      />
+        />
-      <q-card-title
+        <q-card-title
         class="csc-conf-participants-item-title"
-      >
+        >
-        {{ localParticipant.displayName }}
+            {{ localParticipant.displayName }}
-      </q-card-title>
+        </q-card-title>
     </q-card>
 </template>
 

src/store/conference.js

@@ -211,7 +211,6 @@ export default {
                 });
             }
             state.participants.push(participant.getId());
-
         },
         participantLeft(state, participant) {
             state.participants = state.participants.filter(($participant) => {

t/store/conference.js

@@ -4,7 +4,7 @@
 import ConferenceModule from '../../src/store/conference';
 import { assert } from 'chai';
 
-describe('ConferenceModule', function(){
+describe('Conference', function(){
 
     it('should add a participant id to the store if not already stored', () => {
         let state = {
@@ -48,17 +48,6 @@ describe('ConferenceModule', function(){
 
     });
 
-    it('should add a participant mediastream to the store', () => {
-        let state = {
-            remoteMediaStreams: {}
-        };
-        const participantId = '123456789';
-
-        ConferenceModule.mutations.addRemoteMedia(state, participantId);
-        assert.exists(state.remoteMediaStreams[participantId]);
-
-    });
-
     it('should remove a participant mediastream from the store', () => {
         let state = {
             remoteMediaStreams: {
@@ -104,6 +93,4 @@ describe('ConferenceModule', function(){
         assert.equal(state.selectedParticipant, null);
 
     });
-
-
 });