From 5f2881a6df75b9662f6add8780694ff0260b5b62 Mon Sep 17 00:00:00 2001 From: DorraJaouad Date: Fri, 22 Mar 2024 16:57:16 +0100 Subject: [PATCH 1/2] Fix(PresenterOverlay): move PresenterOverlay to a different component and add grabbing effects Signed-off-by: DorraJaouad --- src/components/CallView/CallView.vue | 95 ++-------- .../CallView/shared/PresenterOverlay.vue | 163 ++++++++++++++++++ src/components/CallView/shared/VideoVue.vue | 2 + 3 files changed, 180 insertions(+), 80 deletions(-) create mode 100644 src/components/CallView/shared/PresenterOverlay.vue diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue index e278f05443c..d81aa5ccfa9 100644 --- a/src/components/CallView/CallView.vue +++ b/src/components/CallView/CallView.vue @@ -75,36 +75,13 @@ :shared-data="sharedDatas[shownRemoteScreenPeerId]" is-big /> - - - - - - - + - import debounce from 'debounce' -import VueDraggableResizable from 'vue-draggable-resizable' - -import AccountBox from 'vue-material-design-icons/AccountBoxOutline.vue' import { getCapabilities } from '@nextcloud/capabilities' import { showMessage } from '@nextcloud/dialogs' import { subscribe, unsubscribe } from '@nextcloud/event-bus' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' - import Grid from './Grid/Grid.vue' import EmptyCallView from './shared/EmptyCallView.vue' 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 VideoVue from './shared/VideoVue.vue' @@ -190,13 +163,11 @@ export default { name: 'CallView', components: { - AccountBox, EmptyCallView, ViewerOverlayCallView, - VueDraggableResizable, Grid, LocalVideo, - NcButton, + PresenterOverlay, ReactionToaster, Screen, VideoVue, @@ -242,9 +213,9 @@ export default { isBackgroundBlurred: true, showPresenterOverlay: true, debounceFetchPeers: () => {}, - presenterOverlaySize: 128, } }, + computed: { promotedParticipantModel() { return this.callParticipantModels.find((callParticipantModel) => this.sharedDatas[callParticipantModel.attributes.peerId].promoted) @@ -367,12 +338,8 @@ export default { }) }, - isPresenterCollapsed() { - return !this.showPresenterOverlay && this.shownRemoteScreenCallParticipantModel.attributes.videoAvailable - }, - shouldShowPresenterOverlay() { - return this.showPresenterOverlay && this.isModelWithVideo(this.shownRemoteScreenCallParticipantModel) + return this.shownRemoteScreenCallParticipantModel.attributes.videoAvailable || this.isModelWithVideo(this.shownRemoteScreenCallParticipantModel) }, @@ -380,6 +347,7 @@ export default { return this.sharedDatas[this.shownRemoteScreenPeerId]?.remoteVideoBlocker?.isVideoEnabled() }, }, + watch: { 'localCallParticipantModel.attributes.peerId'(newValue, previousValue) { const index = this.screens.indexOf(previousValue) @@ -462,12 +430,14 @@ export default { this.showPresenterOverlay = value }, }, + created() { // Ensure that data is properly initialized before mounting the // subviews. this.updateDataFromCallParticipantModels(this.callParticipantModels) this.isBackgroundBlurred = BrowserStorage.getItem('background-blurred') !== 'false' }, + mounted() { this.debounceFetchPeers = debounce(this.fetchPeers, 1500) EventBus.$on('refresh-peer-list', this.debounceFetchPeers) @@ -476,9 +446,8 @@ export default { subscribe('switch-screen-to-id', this._switchScreenToId) subscribe('set-background-blurred', this.setBackgroundBlurred) - - window.addEventListener('resize', this.updateSize) }, + beforeDestroy() { this.debounceFetchPeers.clear?.() EventBus.$off('refresh-peer-list', this.debounceFetchPeers) @@ -487,9 +456,8 @@ export default { unsubscribe('switch-screen-to-id', this._switchScreenToId) unsubscribe('set-background-blurred', this.setBackgroundBlurred) - - window.removeEventListener('resize', this.updateSize) }, + methods: { /** * Updates data properties that depend on the CallParticipantModels. @@ -769,9 +737,6 @@ export default { } }, - updateSize() { - this.presenterOverlaySize = Math.min(Math.max(window.innerWidth * 0.1, 100), 242) - }, }, } @@ -796,36 +761,6 @@ export default { } } -.presenter-overlay__video { - position: relative; - --max-size: 242px; - --min-size: 100px; - width: 10vw; - height: 10vw; - max-width: var(--max-size); - max-height: var(--max-size); - min-width: var(--min-size); - min-height: var(--min-size); - z-index: 10; -} - -.presenter-overlay--collapse { - position: absolute !important; - opacity: .7; - bottom: 48px; - right: 0; - - #call-container:hover & { - background-color: rgba(0, 0, 0, 0.1) !important; - - &:hover, - &:focus { - opacity: 1; - background-color: rgba(0, 0, 0, 0.2) !important; - } - } -} - #videos { position: absolute; width: 100%; diff --git a/src/components/CallView/shared/PresenterOverlay.vue b/src/components/CallView/shared/PresenterOverlay.vue new file mode 100644 index 00000000000..b4d3e8251de --- /dev/null +++ b/src/components/CallView/shared/PresenterOverlay.vue @@ -0,0 +1,163 @@ + + + + + + diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue index 86808d0e383..515e522097b 100644 --- a/src/components/CallView/shared/VideoVue.vue +++ b/src/components/CallView/shared/VideoVue.vue @@ -727,6 +727,7 @@ export default { content: ''; box-shadow: inset 0 0 0 3px white; cursor: pointer; + z-index: 1; } .presenter-icon__hide { @@ -739,6 +740,7 @@ export default { border-radius: 50%; padding: 6px; width: 44px; + z-index: 2; &:hover { cursor: pointer; From 2a064197afd8282068345b83f11ba93adc171019 Mon Sep 17 00:00:00 2001 From: DorraJaouad Date: Tue, 26 Mar 2024 16:27:44 +0100 Subject: [PATCH 2/2] fix: lint and comments Signed-off-by: DorraJaouad --- .../CallView/shared/PresenterOverlay.vue | 15 ++++++++------- src/components/CallView/shared/VideoVue.vue | 2 +- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/CallView/shared/PresenterOverlay.vue b/src/components/CallView/shared/PresenterOverlay.vue index b4d3e8251de..9ae7a95db46 100644 --- a/src/components/CallView/shared/PresenterOverlay.vue +++ b/src/components/CallView/shared/PresenterOverlay.vue @@ -131,13 +131,13 @@ export default { min-height: var(--min-size); z-index: 10; - &:hover { - cursor: grab; - } + &:hover { + cursor: grab; + } - &.dragging { - cursor: grabbing; - } + &.dragging { + cursor: grabbing; + } } .presenter-overlay--collapsed { @@ -158,6 +158,7 @@ export default { } :deep(div) { - cursor: inherit; + // prevent default cursor + cursor: inherit; } diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue index 515e522097b..e41203c56c9 100644 --- a/src/components/CallView/shared/VideoVue.vue +++ b/src/components/CallView/shared/VideoVue.vue @@ -740,7 +740,7 @@ export default { border-radius: 50%; padding: 6px; width: 44px; - z-index: 2; + z-index: 2; // Above video and its border &:hover { cursor: pointer;