fix(mixin): remove unused and default props, refactor methods

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/CallView/CallView.vue

@@ -135,7 +135,6 @@
 					:is-stripe="!isGrid"
 					:is-recording="isRecording"
 					:token="token"
-					:fit-video="true"
 					:has-pagination="true"
 					:min-height="isGrid && !isSidebar ? 240 : 150"
 					:min-width="isGrid && !isSidebar ? 320 : 200"

src/components/CallView/Grid/Grid.vue

@@ -67,8 +67,6 @@
 									:is-stripe="isStripe"
 									:is-promoted="sharedDatas[callParticipantModel.attributes.peerId].promoted"
 									:is-selected="isSelected(callParticipantModel)"
-									:fit-video="false"
-									:video-container-aspect-ratio="videoContainerAspectRatio"
 									:shared-data="sharedDatas[callParticipantModel.attributes.peerId]"
 									@click-video="handleClickVideo($event, callParticipantModel.attributes.peerId)" />
 							</template>
@@ -100,7 +98,6 @@
 							:fit-video="isStripe"
 							:token="token"
 							:local-media-model="localMediaModel"
-							:video-container-aspect-ratio="videoContainerAspectRatio"
 							:local-call-participant-model="localCallParticipantModel"
 							@click-video="handleClickLocalVideo" />
 					</div>
@@ -122,7 +119,6 @@
 					:show-controls="false"
 					:token="token"
 					:local-media-model="localMediaModel"
-					:video-container-aspect-ratio="videoContainerAspectRatio"
 					:local-call-participant-model="localCallParticipantModel"
 					@click-video="handleClickLocalVideo" />
 				<!-- page indicator (disabled) -->
@@ -489,10 +485,7 @@ export default {
 		sidebarStatus() {
 			return this.$store.getters.getSidebarStatus
 		},
-		// Current aspect ratio of each video component
-		videoContainerAspectRatio() {
-			return (this.gridWidth / this.columns) / (this.gridHeight / this.rows)
-		},
+
 		wrapperStyle() {
 			if (this.isStripe) {
 				return 'height: 250px'
@@ -586,7 +579,6 @@ export default {
 				columnsMax: this.columnsMax,
 				rowsMax: this.rowsMax,
 				numberOfPages: this.numberOfPages,
-				videoContainerAspectRatio: this.videoContainerAspectRatio,
 				bodyWidth: document.body.clientWidth,
 				bodyHeight: document.body.clientHeight,
 				gridWidth: this.$refs.grid.clientWidth,

src/components/CallView/shared/LocalVideo.vue

@@ -24,9 +24,9 @@
 	<div ref="videoContainer"
 		class="localVideoContainer videoContainer videoView"
 		:class="videoContainerClass"
-		@mouseover="showShadow"
-		@mouseleave="hideShadow"
-		@click="handleClickVideo">
+		@mouseover="mouseover = true"
+		@mouseleave="mouseover = false"
+		@click="$emit('click-video')">
 		<div v-show="localMediaModel.attributes.videoEnabled"
 			:class="videoWrapperClass"
 			class="videoWrapper"
@@ -34,7 +34,7 @@
 			<video id="localVideo"
 				ref="video"
 				disablePictureInPicture="true"
-				:class="videoClass"
+				:class="fitVideo ? 'video--fit' : 'video--fill'"
 				class="video"
 				@playing="updateVideoAspectRatio" />
 		</div>
@@ -51,7 +51,6 @@
 				:class="avatarClass" />
 		</div>
 
-		<div v-if="mouseover && isSelectable" class="hover-shadow" />
 		<div class="bottom-bar">
 			<NcButton v-if="isBig"
 				type="tertiary"
@@ -174,14 +173,7 @@ export default {
 				'video-container-stripe': this.isStripe,
 				'video-container-big': this.isBig,
 				'video-container-small': this.isSmall,
-			}
-		},
-
-		videoClass() {
-			if (this.fitVideo) {
-				return 'video--fit'
-			} else {
-				return 'video--fill'
+				'hover-shadow': this.isSelectable && this.mouseover,
 			}
 		},
 
@@ -257,7 +249,6 @@ export default {
 	},
 
 	watch: {
-
 		localCallParticipantModel: {
 			immediate: true,
 
@@ -278,7 +269,6 @@ export default {
 
 		localStreamVideoError: {
 			immediate: true,
-
 			handler(error) {
 				if (error) {
 					if (error.name === 'NotAllowedError') {
@@ -326,7 +316,6 @@ export default {
 	},
 
 	methods: {
-
 		_handleForcedMute() {
 			// The default toast selector is "body-user", but as this toast can
 			// be shown to guests too, a generic selector valid both for logged-in
@@ -368,29 +357,6 @@ export default {
 				// Fallback for Firefox
 				?? this.$refs.video.videoWidth / this.$refs.video.videoHeight
 		},
-
-		showShadow() {
-			if (this.isSelectable || this.mouseover) {
-				this.mouseover = true
-			}
-		},
-		hideShadow() {
-			if (this.isSelectable || this.mouseover) {
-				this.mouseover = false
-			}
-		},
-
-		handleClickVideo(e) {
-			// Prevent clicks on the media controls buttons to trigger a video selection
-			if (e.target.localName === 'button') {
-				return
-			}
-			// Prevent clicks on the "settings icon" of the popover/actions menu to trigger a video selection
-			if (e.target.localName === 'svg') {
-				return
-			}
-			this.$emit('click-video')
-		},
 	},
 
 }
@@ -475,12 +441,13 @@ export default {
 	margin: auto;
 }
 
-.hover-shadow {
+.hover-shadow:after {
 	position: absolute;
 	height: 100%;
 	width: 100%;
 	top: 0;
 	left: 0;
+	content: '';
 	box-shadow: inset 0 0 0 3px white;
 	cursor: pointer;
 	border-radius: calc(var(--default-clickable-area) / 2);

src/components/CallView/shared/VideoVue.vue

@@ -28,9 +28,9 @@
 			hover: mouseover && !unSelectable && !isBig,
 			presenter: isPresenterOverlay && mouseover
 		}]"
-		@mouseover="showShadow"
-		@mouseleave="hideShadow"
-		@click="handleClickVideo">
+		@mouseover="mouseover = true"
+		@mouseleave="mouseover = false"
+		@click="$emit('click-video')">
 		<TransitionWrapper name="fade">
 			<div v-show="showVideo"
 				:class="videoWrapperClass"
@@ -38,7 +38,7 @@
 				:style="videoWrapperStyle">
 				<video ref="video"
 					:disablePictureInPicture="!isBig"
-					:class="videoClass"
+					:class="fitVideo ? 'video--fit' : 'video--fill'"
 					class="video"
 					@playing="updateVideoAspectRatio" />
 			</div>
@@ -309,14 +309,6 @@ export default {
 			}
 		},
 
-		videoClass() {
-			if (this.fitVideo) {
-				return 'video--fit'
-			} else {
-				return 'video--fill'
-			}
-		},
-
 		videoWrapperClass() {
 			return {
 				'icon-loading': this.isLoading,
@@ -527,7 +519,6 @@ export default {
 	},
 
 	watch: {
-
 		'model.attributes.stream'(stream) {
 			this._setStream(stream)
 		},
@@ -563,7 +554,6 @@ export default {
 	},
 
 	methods: {
-
 		_setStream(stream) {
 
 			if (!stream) {
@@ -605,29 +595,6 @@ export default {
 				// Fallback for Firefox
 				?? this.$refs.video.videoWidth / this.$refs.video.videoHeight
 		},
-
-		showShadow() {
-			if (this.isSelectable || this.mouseover) {
-				this.mouseover = true
-			}
-		},
-		hideShadow() {
-			if (this.isSelectable || this.mouseover) {
-				this.mouseover = false
-			}
-		},
-
-		handleClickVideo(e) {
-			// Prevent clicks on the media controls buttons to trigger a video selection
-			if (e.target.localName === 'button') {
-				return
-			}
-			// Prevent clicks on the "settings icon" of the popover/actions menu to trigger a video selection
-			if (e.target.localName === 'svg') {
-				return
-			}
-			this.$emit('click-video')
-		},
 	},
 
 }
@@ -737,6 +704,7 @@ export default {
 	left: 0;
 	border-radius: calc(var(--default-clickable-area) / 2);
 }
+
 .video-container.speaking::after {
 	content: '';
 	box-shadow: inset 0 0 0 2px white;
@@ -758,7 +726,7 @@ export default {
 }
 
 .video-container.presenter::after {
-	content: '' ;
+	content: '';
 	background-color: rgba(0, 0, 0, 0.5);
 	cursor: pointer;
 }