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
+ },
},
}