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

Signed-off-by: Antreesy <antreesy.web@gmail.com>
nextcloud · Aug 30, 2024 · 80d6555 · 80d6555
1 parent df9514f
commit 80d6555
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/src/components/CallView/CallView.vue b/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,

diff --git a/src/components/CallView/Grid/Grid.vue b/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 {

diff --git a/src/components/CallView/shared/LocalVideo.vue b/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 {