fix: add dummies input, stripe and screenshot mode toggles

Signed-off-by: Maksim Sukharev <[email protected]>
nextcloud · Oct 14, 2024 · 6a72f65 · 6a72f65
1 parent 9e84391
commit 6a72f65
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 34 deletions.
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
@@ -80,6 +80,17 @@
 						:is-one-to-one="isOneToOne"
 						:is-sidebar="isSidebar"
 						@force-promote-video="forcePromotedModel = $event" />
+
+					<div v-else-if="devMode && !isGrid"
+						class="dev-mode-video--promoted">
+						<img :alt="placeholderName(6)" :src="placeholderImage(6)">
+						<VideoBottomBar :has-shadow="false"
+							:model="placeholderModel(6)"
+							:shared-data="placeholderSharedData(6)"
+							:token="token"
+							:participant-name="placeholderName(6)"
+							is-big />
+					</div>
 				</div>
 
 				<!-- Stripe or fullscreen grid depending on `isGrid` -->
@@ -135,9 +146,11 @@ import LocalVideo from './shared/LocalVideo.vue'
 import PresenterOverlay from './shared/PresenterOverlay.vue'
 import ReactionToaster from './shared/ReactionToaster.vue'
 import Screen from './shared/Screen.vue'
+import VideoBottomBar from './shared/VideoBottomBar.vue'
 import VideoVue from './shared/VideoVue.vue'
 import ViewerOverlayCallView from './shared/ViewerOverlayCallView.vue'
 
+import { placeholderImage, placeholderModel, placeholderName, placeholderSharedData } from './Grid/gridPlaceholders.ts'
 import { SIMULCAST } from '../../constants.js'
 import { fetchPeers } from '../../services/callsService.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
@@ -151,13 +164,14 @@ export default {
 
 	components: {
 		EmptyCallView,
-		ViewerOverlayCallView,
 		Grid,
 		LocalVideo,
 		PresenterOverlay,
 		ReactionToaster,
 		Screen,
+		VideoBottomBar,
 		VideoVue,
+		ViewerOverlayCallView,
 	},
 
 	props: {
@@ -452,6 +466,11 @@ export default {
 
 	methods: {
 		t,
+		// Placeholder data for devMode and screenshotMode
+		placeholderImage,
+		placeholderName,
+		placeholderModel,
+		placeholderSharedData,
 		/**
 		 * Updates data properties that depend on the CallParticipantModels.
 		 *
@@ -764,6 +783,22 @@ export default {
 		// doesn't affect screen shares, as it's a different MediaStream
 		position: static;
 	}
+
+	.dev-mode-video--promoted {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+	}
+
+	.dev-mode-video--promoted img {
+		position: absolute;
+		height: 100%;
+		aspect-ratio: 4 / 3;
+		object-fit: cover;
+		border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
+	}
 }
 
 .local-video {

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
@@ -108,26 +108,44 @@
 					:local-call-participant-model="localCallParticipantModel"
 					@click-video="handleClickLocalVideo" />
 
-				<div v-if="devMode && !screenshotMode" class="dev-mode__data">
-					<p>GRID INFO</p>
-					<p>Videos (total): {{ videosCount }}</p>
-					<p>Displayed videos n: {{ displayedVideos.length }}</p>
-					<p>Max per page: ~{{ videosCap }}</p>
-					<p>Grid width: {{ gridWidth }}</p>
-					<p>Grid height: {{ gridHeight }}</p>
-					<p>Min video width: {{ minWidth }} </p>
-					<p>Min video Height: {{ minHeight }} </p>
-					<p>Grid aspect ratio: {{ gridAspectRatio }}</p>
-					<p>Number of pages: {{ numberOfPages }}</p>
-					<p>Current page: {{ currentPage }}</p>
-				</div>
+				<template v-if="devMode">
+					<NcButton type="tertiary"
+						class="dev-mode__toggle"
+						aria-label="Toggle screenshot mode"
+						@click="screenshotMode = !screenshotMode">
+						<template #icon>
+							<ChevronLeft v-if="!screenshotMode" fill-color="#00FF41" :size="20" />
+						</template>
+					</NcButton>
+					<div v-if="!screenshotMode" class="dev-mode__data">
+						<span>GRID INFO</span>
+						<NcButton small @click="disableDevMode">
+							Disable
+						</NcButton>
+						<span>Videos (total):</span><span>{{ videosCount }}</span>
+						<span>Displayed videos:</span><span>{{ displayedVideos.length }}</span>
+						<span>Max per page:</span><span>~{{ videosCap }}</span>
+						<span>Grid width:</span><span>{{ gridWidth }}px</span>
+						<span>Grid height:</span><span>{{ gridHeight }}px</span>
+						<span>Min video width:</span><span>{{ minWidth }}px</span>
+						<span>Min video Height:</span><span>{{ minHeight }}px</span>
+						<span>Grid aspect ratio:</span><span>{{ gridAspectRatio }}</span>
+						<span>Number of pages:</span><span>{{ numberOfPages }}</span>
+						<span>Current page:</span><span>{{ currentPage }}</span>
+						<span>Dummies:</span><input v-model.number="dummies" type="number">
+						<span>Stripe mode:</span><input v-model="devStripe" type="checkbox">
+						<span>Screenshot mode:</span><input v-model="screenshotMode" type="checkbox">
+
+					</div>
+				</template>
 			</div>
 		</TransitionWrapper>
 	</div>
 </template>
 
 <script>
 import debounce from 'debounce'
+import { ref } from 'vue'
 
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
@@ -179,17 +197,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		screenshotMode: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * The number of dummy videos in dev mode
-		 */
-		dummies: {
-			type: Number,
-			default: 8,
-		},
 		/**
 		 * Display the overflow of videos in separate pages;
 		 */
@@ -245,7 +252,13 @@ export default {
 	emits: ['select-video', 'click-local-video', 'update:devMode'],
 
 	setup() {
+		// The number of dummy videos in dev mode
+		const dummies = ref(4)
+		const screenshotMode = ref(false)
+
 		return {
+			dummies,
+			screenshotMode,
 			videosCap,
 			videosCapEnforced,
 			sidebarStore: useSidebarStore(),
@@ -546,12 +559,12 @@ export default {
 			return this.tempPromotedModels.filter(model => !model.attributes.audioAvailable)
 		},
 
-		devModeEnabled: {
+		devStripe: {
 			get() {
-				return this.devMode
+				return this.isStripe
 			},
 			set(value) {
-				this.$emit('update:devMode', value)
+				this.$store.dispatch('setCallViewMode', { isGrid: !value, clearLast: false })
 			},
 		},
 	},
@@ -682,6 +695,10 @@ export default {
 		placeholderModel,
 		placeholderSharedData,
 
+		disableDevMode() {
+			this.screenshotMode = false
+			this.$emit('update:devMode', false)
+		},
 		// whenever the document is resized, re-set the 'clientWidth' variable
 		handleResize(event) {
 			// TODO: properly handle resizes when not on first page:
@@ -1033,24 +1050,37 @@ export default {
 	opacity: 25%;
 }
 
+.dev-mode__toggle {
+	position: fixed !important;
+	left: 20px;
+	top: calc(2 * var(--header-height));
+}
+
 .dev-mode__data {
 	font-family: monospace;
 	position: fixed;
 	color: #00FF41;
 	left: 20px;
-	bottom: 50%;
-	padding: 20px;
+	top: calc(2 * var(--header-height) + 40px);
+	padding: 5px;
 	background: rgba(0, 0, 0, 0.8);
 	border: 1px solid #00FF41;
-	width: 212px;
-	font-size: 12px;
-	z-index: 999999999999999;
+	display: grid;
+	grid-template-columns: 165px 75px;
+	align-items: center;
+	justify-content: flex-start;
 
-	& p {
+	& span {
 		text-overflow: ellipsis;
 		overflow: hidden;
 		white-space: nowrap;
 	}
+	& input {
+		max-width: 65px;
+		height: 22.5px !important;
+		min-height: unset;
+		margin: 0;
+	}
 }
 
 .video:last-child {