Make LocalVideo selectable

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

5 files changed, 45 insertions, 28 deletions

diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index 867f02a83..6245c1ba8 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -101,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"
@@ -114,8 +115,8 @@
 				:video-container-aspect-ratio="videoContainerAspectRatio"
 				:local-call-participant-model="localCallParticipantModel"
 				:is-sidebar="isSidebar"
-				@switchScreenToId="1"
-				@click="handleClickLocalVideo" />
+				:is-selectable="hasLocalVideo && !isLocalVideoSelected"
+				@switchScreenToId="1" />
 		</div>
 	</div>
 </template>
@@ -166,7 +167,7 @@ export default {
 			},
 			callParticipantCollection: callParticipantCollection,
 			videoContainerAspectRatio: 0,
-			isLocalVideoSelected: true,
+			isLocalVideoSelected: false,
 		}
 	},
 	computed: {
@@ -485,9 +486,11 @@ export default {
 		handleSelectVideo(peerId) {
 			this.$store.dispatch('isGrid', false)
 			this.$store.dispatch('selectedVideoPeerId', peerId)
+			this.isLocalVideoSelected = false
 		},
 		handleClickLocalVideo() {
-			this.isLocalVideoSelected = true
+			this.$store.dispatch('isGrid', false)
+			this.isLocalVideoSelected = !this.isLocalVideoSelected
 		},
 	},
 }
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 50d4bd470..21ece69f1 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/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"
@@ -632,9 +634,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
 		},
+
 	},
 }
 
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index d9afedf63..224b1351b 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -21,7 +21,10 @@
 <template>
 	<div id="localVideoContainer"
 		class="videoContainer videoView"
-		:class="videoContainerClass">
+		:class="videoContainerClass"
+		@mouseover="showShadow"
+		@mouseleave="hideShadow"
+		@click="handleClickVideo">
 		<video v-show="localMediaModel.attributes.videoEnabled"
 			id="localVideo"
 			ref="video"
@@ -55,6 +58,7 @@
 				:quality-warning-tooltip="qualityWarningTooltip"
 				@switchScreenToId="$emit('switchScreenToId', $event)" />
 		</transition>
+		<div v-if="mouseover && !isBig" class="hover-shadow" />
 	</div>
 </template>
 
@@ -103,6 +107,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		isSelectable: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
diff --git a/src/components/CallView/shared/Video.vue b/src/components/CallView/shared/Video.vue
index ee5cca94e..e6ad2d8f9 100644
--- a/src/components/CallView/shared/Video.vue
+++ b/src/components/CallView/shared/Video.vue
@@ -151,12 +151,6 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			mouseover: false,
-		}
-	},
-
 	computed: {
 
 		isSelectable() {
@@ -356,20 +350,6 @@ export default {
 				this.$refs.video.style.transform = ''
 			}
 		},
-		showShadow() {
-			if (this.isSelectable) {
-				this.mouseover = true
-			}
-		},
-		hideShadow() {
-			if (this.isSelectable) {
-				this.mouseover = false
-			}
-		},
-
-		handleClickVideo() {
-			this.$emit('click-video')
-		},
 	},
 
 }
diff --git a/src/mixins/video.js b/src/mixins/video.js
index e8882788f..29ba18d62 100644
--- a/src/mixins/video.js
+++ b/src/mixins/video.js
@@ -25,6 +25,7 @@ const video = {
 	data() {
 		return {
 			incomingStreamAspectRatio: null,
+			mouseover: false,
 		}
 	},
 	props: {
@@ -51,6 +52,23 @@ const video = {
 		},
 	},
 
+	methods: {
+		showShadow() {
+			if (this.isSelectable) {
+				this.mouseover = true
+			}
+		},
+		hideShadow() {
+			if (this.isSelectable) {
+				this.mouseover = false
+			}
+		},
+
+		handleClickVideo() {
+			this.$emit('click-video')
+		},
+	},
+
 	computed: {
 		videoClass() {
 			if (this.fitVideo) {