Allow using media controls on videos without selecting video

src/components/CallView/CallView.vue

@@ -56,6 +56,19 @@
 						@switchScreenToId="_switchScreenToId" />
 				</template>
 			</div>
+			<!-- Local Video Override mode -->
+			<div v-if="showLocalVideo" ref="videoContainer" class="video__promoted override">
+				<LocalVideo
+					ref="localVideo"
+					:fit-video="true"
+					:is-stripe="false"
+					:is-big="true"
+					:local-media-model="localMediaModel"
+					:video-container-aspect-ratio="videoContainerAspectRatio"
+					:local-call-participant-model="localCallParticipantModel"
+					:is-sidebar="false"
+					@switchScreenToId="1" />
+			</div>
 			<!-- Screens -->
 			<div v-if="!isSidebar && (showLocalScreen || showRemoteScreen)" id="screens">
 				<!-- local screen -->
@@ -88,7 +101,8 @@
 				:local-media-model="localMediaModel"
 				:local-call-participant-model="localCallParticipantModel"
 				:shared-datas="sharedDatas"
-				@select-video="handleSelectVideo" />
+				@select-video="handleSelectVideo"
+				@click-local-video="handleClickLocalVideo" />
 			<!-- Local video if the conversation is 1to1 or if sidebar -->
 			<LocalVideo
 				v-if="isOneToOneView"
@@ -183,6 +197,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,33 +225,43 @@ export default {
 			return (this.isOneToOne && !this.isGrid) || this.isSidebar
 		},
 
-		showGrid() {
-			return (!this.isOneToOneView || this.showLocalScreen) && !this.isSidebar
+		hasLocalVideo() {
+			return this.localMediaModel.attributes.videoEnabled
 		},
 
 		hasLocalScreen() {
-			return this.localMediaModel.attributes.localScreen
+			return !!this.localMediaModel.attributes.localScreen
 		},
 
 		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.hasLocalVideo && this.$store.getters.selectedVideoPeerId === 'local'
 		},
 
-		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 +287,6 @@ export default {
 
 			return null
 		},
-
-		gridTargetAspectRatio() {
-			if (this.isStripe) {
-				return 1
-			} else {
-				return 1.5
-			}
-		},
 	},
 	watch: {
 		localScreen: function(localScreen) {
@@ -295,6 +323,13 @@ export default {
 				this.$store.dispatch('isGrid', false)
 			}
 		},
+		'hasLocalVideo': function(newValue) {
+			if (this.$store.getters.selectedVideoPeerId === 'local') {
+				if (!newValue) {
+					this.$store.dispatch('selectedVideoPeerId', null)
+				}
+			}
+		},
 
 	},
 	created() {
@@ -456,6 +491,12 @@ export default {
 		handleSelectVideo(peerId) {
 			this.$store.dispatch('isGrid', false)
 			this.$store.dispatch('selectedVideoPeerId', peerId)
+			this.isLocalVideoSelected = false
+		},
+		handleClickLocalVideo() {
+			// Deselect possible selected video
+			this.$store.dispatch('selectedVideoPeerId', 'local')
+			this.$store.dispatch('isGrid', false)
 		},
 	},
 }

src/components/CallView/Grid/Grid.vue

@@ -62,7 +62,8 @@
 						:local-media-model="localMediaModel"
 						:video-container-aspect-ratio="videoContainerAspectRatio"
 						:local-call-participant-model="localCallParticipantModel"
-						@switchScreenToId="1" />
+						@switchScreenToId="1"
+						@click-video="handleClickLocalVideo" />
 				</template>
 				<!-- Grid developer mode -->
 				<template v-else>
@@ -91,7 +92,8 @@
 			:local-media-model="localMediaModel"
 			:video-container-aspect-ratio="videoContainerAspectRatio"
 			:local-call-participant-model="localCallParticipantModel"
-			@switchScreenToId="1" />
+			@switchScreenToId="1"
+			@click-video="handleClickLocalVideo" />
 		<!-- page indicator (disabled) -->
 		<div
 			v-if="numberOfPages !== 0 && hasPagination && false"
@@ -213,6 +215,10 @@ export default {
 			type: Object,
 			required: true,
 		},
+		isLocalVideoSelectable: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -632,9 +638,15 @@ export default {
 			console.debug('selected-video peer id', peerId)
 			this.$emit('select-video', peerId)
 		},
+
+		handleClickLocalVideo() {
+			this.$emit('click-local-video')
+		},
+
 		isSelected(callParticipantModel) {
 			return callParticipantModel.attributes.peerId === this.$store.getters.selectedVideoPeerId
 		},
+
 	},
 }