fix: hide call layout switch when the call view is still empty.fix/call-view

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

3 files changed, 36 insertions, 15 deletions

diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index 6d50e5148..526c096cd 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -13,7 +13,7 @@
 			:local-shared-data="localSharedData" />
 
 		<template v-else>
-			<EmptyCallView v-if="!callParticipantModels.length && !screenSharingActive" :is-sidebar="isSidebar" />
+			<EmptyCallView v-if="showEmptyCallView" :is-sidebar="isSidebar" />
 
 			<div id="videos">
 				<div v-if="!isGrid || !callParticipantModels.length" class="video__promoted" :class="{'full-page': showFullPage}">
@@ -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: {
@@ -401,6 +405,10 @@ export default {
 		presenterVideoBlockerEnabled(value) {
 			this.showPresenterOverlay = value
 		},
+
+		showEmptyCallView(value) {
+			this.$store.dispatch('isEmptyCallView', value)
+		},
 	},
 
 	created() {
@@ -422,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)
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index feca083f3..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: {
diff --git a/src/store/callViewStore.js b/src/store/callViewStore.js
index e4b611ef4..bcbf338f1 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
 	},
@@ -231,6 +236,10 @@ const actions = {
 	dismissQualityWarningTooltip(context) {
 		context.commit('setQualityWarningTooltipDismissed', { qualityWarningTooltipDismissed: true })
 	},
+
+	isEmptyCallView(context, value) {
+		context.commit('isEmptyCallView', value)
+	},
 }
 
 export default { state, mutations, getters, actions }