fix: use LocalVideo component in screenshot mode

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Aug 19, 2024 · f0bcc9c · f0bcc9c
1 parent 22a286f
commit f0bcc9c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
@@ -71,18 +71,16 @@
 							<h1 v-if="!screenshotMode" class="dev-mode__title">
 								Dev mode on ;-)
 							</h1>
-							<div v-else
-								class="dev-mode-video--self video"
-								:style="{'background': 'url(' + placeholderImage(8) + ')'}" />
 						</template>
-						<LocalVideo v-if="!isStripe && !isRecording && !screenshotMode"
+						<LocalVideo v-if="!isStripe && !isRecording"
 							ref="localVideo"
 							class="video"
 							is-grid
 							:fit-video="false"
 							:token="token"
 							:local-media-model="localMediaModel"
 							:local-call-participant-model="localCallParticipantModel"
+							:screenshot-mode-url="screenshotMode ? placeholderImage(8) : ''"
 							@click-video="handleClickLocalVideo" />
 					</div>
 					<NcButton v-if="hasNextPage && gridWidth > 0"
@@ -96,14 +94,15 @@
 						</template>
 					</NcButton>
 				</div>
-				<LocalVideo v-if="isStripe && !isRecording && !screenshotMode"
+				<LocalVideo v-if="isStripe && !isRecording"
 					ref="localVideo"
 					class="video"
 					:is-stripe="true"
 					:show-controls="false"
 					:token="token"
 					:local-media-model="localMediaModel"
 					:local-call-participant-model="localCallParticipantModel"
+					:screenshot-mode-url="screenshotMode ? placeholderImage(8) : ''"
 					@click-video="handleClickLocalVideo" />
 
 				<template v-if="devMode">
@@ -1004,11 +1003,6 @@ export default {
 
 	position: relative;
 
-	&--self {
-		background-size: cover !important;
-		border-radius: calc(var(--default-clickable-area) / 2);
-	}
-
 	img {
 		object-fit: cover;
 		height: 100%;

diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
@@ -10,7 +10,12 @@
 		@mouseover="mouseover = true"
 		@mouseleave="mouseover = false"
 		@click="$emit('click-video')">
-		<div v-show="localMediaModel.attributes.videoEnabled"
+		<img v-if="screenshotModeUrl"
+			class="dev-mode-video--self videoWrapper"
+			alt="dev-mode-video--self"
+			:src="screenshotModeUrl">
+
+		<div v-show="!screenshotModeUrl && localMediaModel.attributes.videoEnabled"
 			class="videoWrapper"
 			:style="videoWrapperStyle">
 			<video id="localVideo"
@@ -23,7 +28,7 @@
 				:size="avatarSize"
 				class="video-loading" />
 		</div>
-		<div v-if="!localMediaModel.attributes.videoEnabled && !isSidebar" class="avatar-container">
+		<div v-if="!screenshotModeUrl && !localMediaModel.attributes.videoEnabled && !isSidebar" class="avatar-container">
 			<VideoBackground v-if="isGrid || isStripe"
 				:display-name="displayName"
 				:user="userId" />
@@ -118,6 +123,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		screenshotModeUrl: {
+			type: String,
+			default: '',
+		}
 	},
 
 	emits: ['click-video'],
@@ -445,4 +454,9 @@ export default {
 		}
 	}
 }
+
+.dev-mode-video--self {
+	object-fit: cover !important;
+	border-radius: calc(var(--default-clickable-area) / 2);
+}
 </style>