Merge pull request #12300 from nextcloud/fix/call-view

fix(CallView): light improvement

4 files changed, 58 insertions, 47 deletions

diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index 9ceac692c..526c096cd 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -13,10 +13,10 @@
 			:local-shared-data="localSharedData" />
 
 		<template v-else>
-			<EmptyCallView v-if="!callParticipantModels.length && !screenSharingActive && !isGrid" :is-sidebar="isSidebar" />
+			<EmptyCallView v-if="showEmptyCallView" :is-sidebar="isSidebar" />
 
 			<div id="videos">
-				<div v-if="!isGrid" class="video__promoted" :class="{'full-page': showFullPage}">
+				<div v-if="!isGrid || !callParticipantModels.length" class="video__promoted" :class="{'full-page': showFullPage}">
 					<!-- Selected video override mode -->
 					<VideoVue v-if="showSelectedVideo && selectedCallParticipantModel"
 						:key="selectedVideoPeerId"
@@ -81,7 +81,7 @@
 
 				<!-- Stripe or fullscreen grid depending on `isGrid` -->
 				<Grid v-if="!isSidebar"
-					:is-stripe="!isGrid"
+					:is-stripe="!isGrid || !callParticipantModels.length"
 					:is-recording="isRecording"
 					:token="token"
 					:has-pagination="true"
@@ -322,13 +322,17 @@ export default {
 		},
 
 		shouldShowPresenterOverlay() {
-			return this.shownRemoteScreenCallParticipantModel.attributes.videoAvailable || this.isModelWithVideo(this.shownRemoteScreenCallParticipantModel)
+			return this.shownRemoteScreenCallParticipantModel?.attributes.videoAvailable || this.isModelWithVideo(this.shownRemoteScreenCallParticipantModel)
 
 		},
 
 		presenterVideoBlockerEnabled() {
 			return this.sharedDatas[this.shownRemoteScreenPeerId]?.remoteVideoBlocker?.isVideoEnabled()
 		},
+
+		showEmptyCallView() {
+			return !this.callParticipantModels.length && !this.screenSharingActive
+		},
 	},
 
 	watch: {
@@ -376,8 +380,8 @@ export default {
 			// Everytime a new screen is shared, switch to promoted view
 			if (newValue.length > previousValue.length) {
 				this.$store.dispatch('startPresentation')
-			} else if (newValue.length === 0 && previousValue.length > 0 && !this.hasLocalScreen) {
-				// last screen share stopped, reopening stripe
+			} else if (newValue.length === 0 && previousValue.length > 0 && !this.hasLocalScreen && !this.selectedVideoPeerId) {
+				// last screen share stopped and no selected video, restoring previous state
 				this.$store.dispatch('stopPresentation')
 			}
 		},
@@ -385,7 +389,8 @@ export default {
 			// Everytime the local screen is shared, switch to promoted view
 			if (showLocalScreen) {
 				this.$store.dispatch('startPresentation')
-			} else if (this.callParticipantModelsWithScreen.length === 0) {
+			} else if (this.callParticipantModelsWithScreen.length === 0 && !this.selectedVideoPeerId) {
+				// last screen share stopped and no selected video, restoring previous state
 				this.$store.dispatch('stopPresentation')
 			}
 		},
@@ -397,21 +402,13 @@ export default {
 			}
 		},
 
-		showSelectedVideo(newVal) {
-			if (newVal) {
-				this.$store.dispatch('setCallViewMode', { isGrid: false })
-			}
-		},
-
-		showSelectedScreen(newVal) {
-			if (newVal) {
-				this.$store.dispatch('setCallViewMode', { isGrid: false })
-			}
-		},
-
 		presenterVideoBlockerEnabled(value) {
 			this.showPresenterOverlay = value
 		},
+
+		showEmptyCallView(value) {
+			this.$store.dispatch('isEmptyCallView', value)
+		},
 	},
 
 	created() {
@@ -433,6 +430,7 @@ export default {
 
 	beforeDestroy() {
 		this.debounceFetchPeers.clear?.()
+		this.$store.dispatch('isEmptyCallView', true)
 		EventBus.off('refresh-peer-list', this.debounceFetchPeers)
 
 		callParticipantCollection.off('remove', this._lowerHandWhenParticipantLeaves)
@@ -646,9 +644,8 @@ export default {
 			if (this.isSidebar) {
 				return
 			}
-			this.$store.dispatch('startPresentation')
 			this.$store.dispatch('selectedVideoPeerId', peerId)
-			this.isLocalVideoSelected = false
+			this.$store.dispatch('startPresentation')
 		},
 		handleClickLocalVideo() {
 			// DO nothing if no video
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 31ded7f30..184991590 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -78,8 +78,8 @@
 						<LocalVideo v-if="!isStripe && !isRecording && !screenshotMode"
 							ref="localVideo"
 							class="video"
-							:is-grid="true"
-							:fit-video="isStripe"
+							is-grid
+							:fit-video="false"
 							:token="token"
 							:local-media-model="localMediaModel"
 							:local-call-participant-model="localCallParticipantModel"
@@ -801,7 +801,7 @@ export default {
 		},
 
 		handleClickStripeCollapse() {
-			this.$store.dispatch('setCallViewMode', { isStripeOpen: !this.stripeOpen })
+			this.$store.dispatch('setCallViewMode', { isStripeOpen: !this.stripeOpen, clearLast: false })
 		},
 
 		handleMovement() {
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index b04511bfe..baf377adb 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/src/components/TopBar/TopBarMenu.vue
@@ -62,21 +62,20 @@
 					{{ t('spreed', 'Media settings') }}
 				</NcActionButton>
 				<NcActionSeparator />
+				<!-- Call layout switcher -->
+				<NcActionButton v-if="showCallLayoutSwitch"
+					close-after-click
+					@click="changeView">
+					<template #icon>
+						<GridView v-if="!isGrid"
+							:size="20" />
+						<PromotedView v-else
+							:size="20" />
+					</template>
+					{{ changeViewText }}
+				</NcActionButton>
 			</template>
 
-			<!-- Call layout switcher -->
-			<NcActionButton v-if="showActions && isInCall"
-				close-after-click
-				@click="changeView">
-				<template #icon>
-					<GridView v-if="!isGrid"
-						:size="20" />
-					<PromotedView v-else
-						:size="20" />
-				</template>
-				{{ changeViewText }}
-			</NcActionButton>
-
 			<!-- Fullscreen -->
 			<NcActionButton :aria-label="t('spreed', 'Toggle full screen')"
 				close-after-click
@@ -370,6 +369,10 @@ export default {
 			return this.conversation.objectType === CONVERSATION.OBJECT_TYPE.BREAKOUT_ROOM
 				&& this.isInCall
 		},
+
+		showCallLayoutSwitch() {
+			return !this.$store.getters.isEmptyCallView
+		}
 	},
 
 	methods: {
@@ -434,7 +437,7 @@ export default {
 		},
 
 		changeView() {
-			this.$store.dispatch('setCallViewMode', { isGrid: !this.isGrid })
+			this.$store.dispatch('setCallViewMode', { isGrid: !this.isGrid, clearLast: false })
 			this.$store.dispatch('selectedVideoPeerId', null)
 		},
 
diff --git a/src/store/callViewStore.js b/src/store/callViewStore.js
index 5bf1df1d0..73695ba82 100644
--- a/src/store/callViewStore.js
+++ b/src/store/callViewStore.js
@@ -15,6 +15,7 @@ const state = {
 	isViewerOverlay: false,
 	isGrid: false,
 	isStripeOpen: true,
+	isEmptyCallView: true,
 	lastIsGrid: null,
 	lastIsStripeOpen: null,
 	presentationStarted: false,
@@ -29,6 +30,7 @@ const getters = {
 	isViewerOverlay: (state) => state.isViewerOverlay,
 	isGrid: (state) => state.isGrid,
 	isStripeOpen: (state) => state.isStripeOpen,
+	isEmptyCallView: (state) => state.isEmptyCallView,
 	lastIsGrid: (state) => state.lastIsGrid,
 	lastIsStripeOpen: (state) => state.lastIsStripeOpen,
 	presentationStarted: (state) => state.presentationStarted,
@@ -68,6 +70,9 @@ const mutations = {
 	isStripeOpen(state, value) {
 		state.isStripeOpen = value
 	},
+	isEmptyCallView(state, value) {
+		state.isEmptyCallView = value
+	},
 	lastIsGrid(state, value) {
 		state.lastIsGrid = value
 	},
@@ -156,17 +161,16 @@ const actions = {
 		if (clearLast) {
 			context.commit('lastIsGrid', null)
 			context.commit('lastIsStripeOpen', null)
-		} else {
-			context.commit('lastIsGrid', context.getters.isGrid)
-			context.commit('lastIsStripeOpen', context.getters.isStripeOpen)
 		}
 
 		if (isGrid !== null) {
+			context.commit('lastIsGrid', context.getters.isGrid)
 			BrowserStorage.setItem('callprefs-' + context.getters.getToken() + '-isgrid', isGrid)
 			context.commit('isGrid', isGrid)
 		}
 
 		if (isStripeOpen !== null) {
+			context.commit('lastIsStripeOpen', context.getters.isStripeOpen)
 			context.commit('isStripeOpen', isStripeOpen)
 		}
 	},
@@ -217,18 +221,25 @@ const actions = {
 		if (!context.getters.presentationStarted) {
 			return
 		}
-
-		// restore previous state
-		context.dispatch('setCallViewMode', {
-			isGrid: context.getters.lastIsGrid,
-			isStripeOpen: context.getters.lastIsStripeOpen,
-		})
+		if (!context.getters.isGrid && !context.getters.isStripeOpen) {
+			// User didn't pick grid view during presentation
+			// restore previous state
+			context.dispatch('setCallViewMode', {
+				isGrid: context.getters.lastIsGrid,
+				isStripeOpen: context.getters.lastIsStripeOpen,
+				clearLast: false,
+			})
+		}
 		context.commit('presentationStarted', false)
 	},
 
 	dismissQualityWarningTooltip(context) {
 		context.commit('setQualityWarningTooltipDismissed', { qualityWarningTooltipDismissed: true })
 	},
+
+	isEmptyCallView(context, value) {
+		context.commit('isEmptyCallView', value)
+	},
 }
 
 export default { state, mutations, getters, actions }