fix(fullscreen): enable fullscreen in dashboard and fix disabling fullscreen outside conversation

src/App.vue

@@ -39,6 +39,10 @@ import RightSidebar from './components/RightSidebar/RightSidebar.vue'
 import SettingsDialog from './components/SettingsDialog/SettingsDialog.vue'
 import ConfirmDialog from './components/UIShared/ConfirmDialog.vue'
 import { useActiveSession } from './composables/useActiveSession.js'
+import {
+	toggleFullscreen,
+	useDocumentFullscreen,
+} from './composables/useDocumentFullscreen.ts'
 import { useDocumentTitle } from './composables/useDocumentTitle.ts'
 import { useGetMessagesProvider } from './composables/useGetMessages.ts'
 import { useGetToken } from './composables/useGetToken.ts'
@@ -77,6 +81,7 @@ export default {
 		useGetMessagesProvider()
 		// Add provided value to check if we're in the main app or plugin
 		provide('Talk:isMainApp', true)
+		useDocumentFullscreen()
 
 		return {
 			token: useGetToken(),
@@ -209,6 +214,7 @@ export default {
 	created() {
 		window.addEventListener('beforeunload', this.preventUnload)
 		useHotKey('f', this.handleAppSearch, { ctrl: true, stop: true, prevent: true })
+		useHotKey('f', toggleFullscreen)
 		if (getCurrentUser()) {
 			useHotKey('Escape', this.openRoot, { stop: true, prevent: true })
 		}

src/components/CallView/BottomBar.vue

@@ -4,11 +4,9 @@
 -->
 
 <script setup lang="ts">
-import { showWarning } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import { useHotKey } from '@nextcloud/vue/composables/useHotKey'
-import { computed, watch } from 'vue'
+import { computed, toValue, watch } from 'vue'
 import { useStore } from 'vuex'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
@@ -20,8 +18,7 @@ import CallButton from '../TopBar/CallButton.vue'
 import ReactionMenu from '../TopBar/ReactionMenu.vue'
 import TopBarMediaControls from '../TopBar/TopBarMediaControls.vue'
 import {
-	disableFullscreen,
-	enableFullscreen,
+	toggleFullscreen,
 	useDocumentFullscreen,
 } from '../../composables/useDocumentFullscreen.ts'
 import { useGetToken } from '../../composables/useGetToken.ts'
@@ -42,7 +39,7 @@ const store = useStore()
 const token = useGetToken()
 const actorStore = useActorStore()
 const breakoutRoomsStore = useBreakoutRoomsStore()
-const isFullscreen = useDocumentFullscreen()
+const isFullscreen = !isSidebar && useDocumentFullscreen()
 const callViewStore = useCallViewStore()
 
 const conversation = computed(() => {
@@ -70,7 +67,7 @@ const raiseHandButtonLabel = computed(() => {
 })
 
 const fullscreenLabel = computed(() => {
-	return isFullscreen.value
+	return toValue(isFullscreen)
 		? t('spreed', 'Exit full screen (F)')
 		: t('spreed', 'Full screen (F)')
 })
@@ -147,34 +144,6 @@ watch(() => localMediaModel.attributes.speaking, (speaking) => {
 	}, lowerHandDelay)
 })
 
-/**
- * Toggles the full screen mode of the call view.
- * If the sidebar is open, it does nothing.
- * If there is an open modal, it shows a warning.
- */
-function toggleFullscreen() {
-	if (isSidebar) {
-		return
-	}
-
-	// Don't toggle fullscreen if there is an open modal
-	// FIXME won't be needed without Fulscreen API
-	if (Array.from(document.body.children).filter((child) => {
-		return child.nodeName === 'DIV' && child.classList.contains('modal-mask')
-			&& window.getComputedStyle(child).display !== 'none'
-	}).length !== 0) {
-		showWarning(t('spreed', 'You need to close a dialog to toggle full screen'))
-		return
-	}
-
-	if (isFullscreen.value) {
-		disableFullscreen()
-	} else {
-		emit('toggle-navigation', { open: false })
-		enableFullscreen()
-	}
-}
-
 /**
  * Switches the call view mode between grid and speaker view.
  */
@@ -185,7 +154,6 @@ function changeView() {
 
 // Keyboard shortcuts
 useHotKey('r', toggleHandRaised)
-useHotKey('f', toggleFullscreen)
 </script>
 
 <template>

src/components/TopBar/TopBarMenu.vue

@@ -133,7 +133,6 @@
 </template>
 
 <script>
-import { showWarning } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
@@ -156,8 +155,7 @@ import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import IconFileDownload from '../../../img/material-icons/file-download.svg?raw'
 import IconMicrophoneOffOutline from '../../../img/material-icons/microphone-off-outline.svg?raw'
 import {
-	disableFullscreen,
-	enableFullscreen,
+	toggleFullscreen,
 	useDocumentFullscreen,
 } from '../../composables/useDocumentFullscreen.ts'
 import { useIsInCall } from '../../composables/useIsInCall.js'
@@ -214,12 +212,13 @@ export default {
 
 	emits: ['openBreakoutRoomsEditor'],
 
-	setup() {
+	setup(props) {
 		return {
 			IconFileDownload,
 			IconMicrophoneOffOutline,
-			isFullscreen: useDocumentFullscreen(),
+			isFullscreen: !props.isSidebar ? useDocumentFullscreen() : undefined,
 			isInCall: useIsInCall(),
+			toggleFullscreen,
 		}
 	},
 
@@ -311,29 +310,6 @@ export default {
 			})
 		},
 
-		toggleFullscreen() {
-			if (this.isSidebar) {
-				return
-			}
-
-			// Don't toggle fullscreen if there is an open modal
-			// FIXME won't be needed without Fulscreen API
-			if (Array.from(document.body.childNodes).filter((child) => {
-				return child.nodeName === 'DIV' && child.classList.contains('modal-mask')
-					&& window.getComputedStyle(child).display !== 'none'
-			}).length !== 0) {
-				showWarning(t('spreed', 'You need to close a dialog to toggle full screen'))
-				return
-			}
-
-			if (this.isFullscreen) {
-				disableFullscreen()
-			} else {
-				emit('toggle-navigation', { open: false })
-				enableFullscreen()
-			}
-		},
-
 		showMediaSettingsDialog() {
 			emit('talk:media-settings:show')
 		},

src/composables/useDocumentFullscreen.ts

@@ -3,18 +3,17 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { DeepReadonly, Ref } from 'vue'
-
+import { emit } from '@nextcloud/event-bus'
 import { createSharedComposable } from '@vueuse/core'
-import { onBeforeMount, onBeforeUnmount, readonly, ref } from 'vue'
+import { onBeforeUnmount, readonly, ref } from 'vue'
+
+const isFullscreen = ref<boolean>(document.fullscreenElement !== null)
 
 /**
  * Composable to check whether the page is displayed at fullscreen
  * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the page is displayed at fullscreen
  */
 function useDocumentFullscreenComposable() {
-	const isFullscreen = ref<boolean>(document.fullscreenElement !== null)
-
 	const changeIsFullscreen = () => {
 		isFullscreen.value = document.fullscreenElement !== null
 
@@ -39,7 +38,9 @@ function useDocumentFullscreenComposable() {
 /**
  * Enable a fullscreen with Fullscreen API
  */
-export async function enableFullscreen() {
+async function enableFullscreen() {
+	emit('toggle-navigation', { open: false })
+
 	if (document.body.requestFullscreen) {
 		await document.body.requestFullscreen()
 	} else if (document.body.webkitRequestFullscreen) {
@@ -50,14 +51,27 @@ export async function enableFullscreen() {
 /**
  * Disable a fullscreen
  */
-export async function disableFullscreen() {
+async function disableFullscreen() {
 	if (document.exitFullscreen) {
 		await document.exitFullscreen()
 	} else if (document.webkitExitFullscreen) {
 		await document.webkitExitFullscreen()
 	}
 }
 
+/**
+ * Toggles the full screen mode of the call view.
+ * If the sidebar is open, it does nothing.
+ * If there is an open modal, it shows a warning.
+ */
+export function toggleFullscreen() {
+	if (isFullscreen.value) {
+		disableFullscreen()
+	} else {
+		enableFullscreen()
+	}
+}
+
 /**
  * Shared composable to check whether the page is displayed at fullscreen
  * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the page is displayed at fullscreen

src/stores/__tests__/settings.spec.js

@@ -59,7 +59,6 @@ describe('settingsStore', () => {
 			// Arrange
 			BrowserStorage.setItem('showMediaSettings', 'false')
 			settingsStore.$reset()
-			console.log(BrowserStorage.getItem('showMediaSettings'))
 			// Assert
 			expect(settingsStore.showMediaSettings).toEqual(false)
 			expect(BrowserStorage.getItem).toHaveBeenNthCalledWith(1, 'showMediaSettings')