Skip to content

Commit

Permalink
fix: add dummies input, stripe and screenshot mode toggles
Browse files Browse the repository at this point in the history
Signed-off-by: Maksim Sukharev <[email protected]>
  • Loading branch information
Antreesy authored and backportbot[bot] committed Oct 14, 2024
1 parent 9e84391 commit 6a72f65
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 34 deletions.
37 changes: 36 additions & 1 deletion src/components/CallView/CallView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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` -->
Expand Down Expand Up @@ -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'
Expand All @@ -151,13 +164,14 @@ export default {
components: {
EmptyCallView,
ViewerOverlayCallView,
Grid,
LocalVideo,
PresenterOverlay,
ReactionToaster,
Screen,
VideoBottomBar,
VideoVue,
ViewerOverlayCallView,
},
props: {
Expand Down Expand Up @@ -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.
*
Expand Down Expand Up @@ -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 {
Expand Down
96 changes: 63 additions & 33 deletions src/components/CallView/Grid/Grid.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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;
*/
Expand Down Expand Up @@ -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(),
Expand Down Expand Up @@ -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 })
},
},
},
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 6a72f65

Please sign in to comment.