fix: use provide/inject to pass values of devMode to CallView children

src/components/CallView/CallView.vue

@@ -105,7 +105,6 @@
  :local-call-participant-model="localCallParticipantModel"
  :shared-datas="sharedDatas"
  v-bind="$attrs"
- :dev-mode.sync="devMode"
  @select-video="handleSelectVideo"
  @click-local-video="handleClickLocalVideo" />
 
@@ -134,7 +133,7 @@
 
 <script>
 import debounce from 'debounce'
-import { ref } from 'vue'
+import { provide, ref } from 'vue'
 
 import { showMessage } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
@@ -193,6 +192,9 @@ export default {
  setup() {
  // For debug and screenshot purposes. Set to true to enable
  const devMode = ref(false)
+ provide('CallView:devModeEnabled', devMode)
+ const screenshotMode = ref(false)
+ provide('CallView:screenshotModeEnabled', screenshotMode)
 
  return {
  localMediaModel,

src/components/CallView/Grid/Grid.vue

@@ -80,7 +80,6 @@
  :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"
@@ -102,7 +101,6 @@
  :token="token"
  :local-media-model="localMediaModel"
  :local-call-participant-model="localCallParticipantModel"
- :screenshot-mode-url="screenshotMode ? placeholderImage(8) : ''"
  @click-video="handleClickLocalVideo" />
 
  <template v-if="devMode">
@@ -141,7 +139,7 @@
 
 <script>
 import debounce from 'debounce'
-import { ref } from 'vue'
+import { inject, ref } from 'vue'
 
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
@@ -184,14 +182,6 @@ export default {
  },
 
  props: {
- /**
- * Developer mode: If enabled it allows to debug the grid using dummy
- * videos
- */
- devMode: {
- type: Boolean,
- default: false,
- },
  /**
  * Display the overflow of videos in separate pages;
  */
@@ -244,14 +234,17 @@ export default {
  },
  },
 
- emits: ['select-video', 'click-local-video', 'update:devMode'],
+ emits: ['select-video', 'click-local-video'],
 
  setup() {
+ // Developer mode: If enabled it allows to debug the grid using dummy videos
+ const devMode = inject('CallView:devModeEnabled', ref(false))
+ const screenshotMode = inject('CallView:screenshotModeEnabled', ref(false))
  // The number of dummy videos in dev mode
  const dummies = ref(4)
- const screenshotMode = ref(false)
 
  return {
+ devMode,
  dummies,
  screenshotMode,
  videosCap,
@@ -688,7 +681,7 @@ export default {
 
  disableDevMode() {
  this.screenshotMode = false
- this.$emit('update:devMode', false)
+ this.devMode = false
  },
  // whenever the document is resized, re-set the 'clientWidth' variable
  handleResize(event) {
@@ -1004,7 +997,7 @@ export default {
  object-fit: cover;
  height: 100%;
  width: 100%;
- border-radius: calc(var(--default-clickable-area) / 2);
+ border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
  }
 
  .wrapper {

src/components/CallView/shared/LocalVideo.vue

@@ -60,6 +60,8 @@
 </template>
 
 <script>
+import { inject, ref } from 'vue'
+
 import AccountOff from 'vue-material-design-icons/AccountOff.vue'
 
 import { showError, showInfo, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
@@ -74,6 +76,7 @@ import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import { AVATAR } from '../../../constants.js'
 import attachMediaStream from '../../../utils/attachmediastream.js'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
+import { placeholderImage } from '../Grid/gridPlaceholders.ts'
 
 export default {
 
@@ -132,10 +135,6 @@ export default {
  type: Boolean,
  default: false,
  },
- screenshotModeUrl: {
- type: String,
- default: '',
- },
  isPresenterOverlay: {
  type: Boolean,
  default: false,
@@ -144,6 +143,16 @@ export default {
 
  emits: ['click-video', 'click-presenter'],
 
+ setup() {
+ const devMode = inject('CallView:devModeEnabled', ref(false))
+ const screenshotMode = inject('CallView:screenshotModeEnabled', ref(false))
+
+ return {
+ devMode,
+ screenshotMode,
+ }
+ },
+
  data() {
  return {
  notificationHandle: null,
@@ -227,6 +236,10 @@ export default {
  isSelectable() {
  return !this.unSelectable && !this.isSidebar && this.hasLocalVideo && this.$store.getters.selectedVideoPeerId !== 'local'
  },
+
+ screenshotModeUrl() {
+ return this.screenshotMode ? placeholderImage(8) : ''
+ },
  },
 
  watch: {
@@ -482,7 +495,11 @@ export default {
 
 .dev-mode-video--self {
  object-fit: cover !important;
- border-radius: calc(var(--default-clickable-area) / 2);
+ border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
+
+ .presenter-overlay & {
+ border-radius: 50%;
+ }
 }
 
 .presenter-icon__hide {

src/components/CallView/shared/VideoVue.vue

@@ -31,6 +31,11 @@
  <NcLoadingIcon v-if="isLoading"
  :size="avatarSize / 2"
  class="video-loading" />
+
+ <img v-if="screenshotModeUrl && isPresenterOverlay"
+ class="dev-mode-video--presenter"
+ alt="dev-mode-video--presenter"
+ :src="screenshotModeUrl">
  </div>
  </TransitionWrapper>
  <TransitionWrapper name="fade">
@@ -79,6 +84,7 @@
 <script>
 import Hex from 'crypto-js/enc-hex.js'
 import SHA1 from 'crypto-js/sha1.js'
+import { inject, ref } from 'vue'
 
 import AccountCircle from 'vue-material-design-icons/AccountCircle.vue'
 import AccountOff from 'vue-material-design-icons/AccountOff.vue'
@@ -98,6 +104,7 @@ import { EventBus } from '../../../services/EventBus.js'
 import { useGuestNameStore } from '../../../stores/guestName.js'
 import attachMediaStream from '../../../utils/attachmediastream.js'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
+import { placeholderImage } from '../Grid/gridPlaceholders.ts'
 
 export default {
 
@@ -193,8 +200,12 @@ export default {
  emits: ['click-video', 'click-presenter', 'force-promote-video'],
 
  setup() {
- const guestNameStore = useGuestNameStore()
- return { guestNameStore }
+ const screenshotMode = inject('CallView:screenshotModeEnabled', ref(false))
+
+ return {
+ guestNameStore: useGuestNameStore(),
+ screenshotMode,
+ }
  },
 
  data() {
@@ -519,6 +530,10 @@ export default {
  nextcloudSessionId() {
  return this.model.attributes.nextcloudSessionId
  },
+
+ screenshotModeUrl() {
+ return this.screenshotMode ? placeholderImage(6) : ''
+ },
  },
 
  watch: {
@@ -666,8 +681,19 @@ export default {
  border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
 }
 
-.videoWrapper.presenter-overlay > video {
- border-radius: 50%;
+.videoWrapper.presenter-overlay {
+ & > video {
+ border-radius: 50%;
+ }
+ & > .dev-mode-video--presenter {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+ border-radius: 50%;
+ }
 }
 
 .video-loading {