diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue index a8642c55687..7d6fd280947 100644 --- 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" /> + +
+ + +
@@ -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 index 737f23cbc2e..21b22d543b3 100644 --- a/src/components/CallView/Grid/Grid.vue +++ b/src/components/CallView/Grid/Grid.vue @@ -108,19 +108,36 @@ :local-call-participant-model="localCallParticipantModel" @click-video="handleClickLocalVideo" /> -
-

GRID INFO

-

Videos (total): {{ videosCount }}

-

Displayed videos n: {{ displayedVideos.length }}

-

Max per page: ~{{ videosCap }}

-

Grid width: {{ gridWidth }}

-

Grid height: {{ gridHeight }}

-

Min video width: {{ minWidth }}

-

Min video Height: {{ minHeight }}

-

Grid aspect ratio: {{ gridAspectRatio }}

-

Number of pages: {{ numberOfPages }}

-

Current page: {{ currentPage }}

-
+ @@ -128,6 +145,7 @@