diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue index bbd34e7f59..65c49832ca 100644 --- a/src/components/CallView/CallView.vue +++ b/src/components/CallView/CallView.vue @@ -56,6 +56,19 @@ @switchScreenToId="_switchScreenToId" /> + +
+ +
@@ -101,7 +114,8 @@ :video-container-aspect-ratio="videoContainerAspectRatio" :local-call-participant-model="localCallParticipantModel" :is-sidebar="isSidebar" - @switchScreenToId="1" /> + @switchScreenToId="1" + @click="handleClickLocalVideo" />
@@ -152,6 +166,7 @@ export default { }, callParticipantCollection: callParticipantCollection, videoContainerAspectRatio: 0, + isLocalVideoSelected: true, } }, computed: { @@ -183,6 +198,18 @@ export default { return this.$store.getters.isGrid }, + showGrid() { + return (!this.isOneToOneView || this.showLocalScreen) && !this.isSidebar + }, + + gridTargetAspectRatio() { + if (this.isStripe) { + return 1 + } else { + return 1.5 + } + }, + selectedVideoPeerId() { return this.$store.getters.selectedVideoPeerId }, @@ -199,8 +226,8 @@ export default { return (this.isOneToOne && !this.isGrid) || this.isSidebar }, - showGrid() { - return (!this.isOneToOneView || this.showLocalScreen) && !this.isSidebar + hasLocalVideo() { + return this.localMediaModel.attributes.videoEnabled }, hasLocalScreen() { @@ -210,22 +237,32 @@ export default { hasRemoteScreen() { return this.callParticipantModelsWithScreen.length > 0 }, + // The following conditions determine what to show in the "Big container" + // of the promoted view - showSelected() { - return !this.isGrid && this.hasSelectedVideo && !this.showLocalScreen && !this.showRemoteScreen + // Show local screen (has priority over anything else when screensharing) + showLocalScreen() { + return this.screens.filter(screen => screen === localCallParticipantModel.attributes.peerId).length === 1 }, - showPromoted() { - return !this.isGrid && !this.hasSelectedVideo && !this.screenSharingActive + // Shows the local video if selected + showLocalVideo() { + return this.hasLocalScreen && this.isLocalVideoSelected }, - showLocalScreen() { - return this.screens.filter(screen => screen === localCallParticipantModel.attributes.peerId).length === 1 + // Show selected video (other than local) + showSelected() { + return !this.isGrid && this.hasSelectedVideo && !this.showLocalScreen && !this.showLocalVideo + }, + // Show the current automatically promoted video + showPromoted() { + return !this.isGrid && !this.hasSelectedVideo && !this.screenSharingActive && !this.showLocalVideo }, + // Show somebody else's screen showRemoteScreen() { - return this.shownRemoteScreenPeerId !== null + return this.shownRemoteScreenPeerId !== null && !this.showLocalVideo }, shownRemoteScreenPeerId() { @@ -251,14 +288,6 @@ export default { return null }, - - gridTargetAspectRatio() { - if (this.isStripe) { - return 1 - } else { - return 1.5 - } - }, }, watch: { localScreen: function(localScreen) { @@ -457,6 +486,9 @@ export default { this.$store.dispatch('isGrid', false) this.$store.dispatch('selectedVideoPeerId', peerId) }, + handleClickLocalVideo() { + this.showSelectedLocalVideo = true + }, }, }