fix: request fullscreen for the whole page

src/App.vue

@@ -783,6 +783,19 @@ body .modal-wrapper * {
 	overflow-wrap: break-word;
 	margin-block: 0 12px;
 }
+
+// Styles for the app content at fullscreen mode
+body.talk-in-fullscreen {
+	#header {
+		display: none !important;
+	}
+	#content-vue {
+		margin: 0;
+		height: 100%;
+		width: 100%;
+		border-radius: 0;
+	}
+}
 </style>
 
 <style lang="scss" scoped>

src/FilesSidebarTabApp.vue

@@ -384,6 +384,24 @@ export default {
 }
 </script>
 
+<style>
+/* FIXME: remove after https://github.com/nextcloud-libraries/nextcloud-vue/pull/4959 is released */
+body .modal-wrapper * {
+	box-sizing: border-box;
+}
+
+/* FIXME: Align styles of NcModal header with NcDialog header. Remove if all are migrated */
+body .modal-wrapper h2.nc-dialog-alike-header {
+	font-size: 21px;
+	text-align: center;
+	height: fit-content;
+	min-height: var(--default-clickable-area);
+	line-height: var(--default-clickable-area);
+	overflow-wrap: break-word;
+	margin-block: 0 12px;
+}
+</style>
+
 <style scoped>
 .talkChatTab {
 	height: 100%;

src/PublicShareAuthSidebar.vue

@@ -211,6 +211,11 @@ export default {
 #talk-sidebar *::after {
 	box-sizing: border-box;
 }
+
+ /* FIXME: remove after https://github.com/nextcloud-libraries/nextcloud-vue/pull/4959 is released */
+body .modal-wrapper * {
+	box-sizing: border-box;
+}
 </style>
 
 <style lang="scss" scoped>

src/PublicShareSidebar.vue

@@ -251,6 +251,13 @@ export default {
 }
 </script>
 
+<style>
+/* FIXME: remove after https://github.com/nextcloud-libraries/nextcloud-vue/pull/4959 is released */
+body .modal-wrapper * {
+	box-sizing: border-box;
+}
+</style>
+
 <style lang="scss" scoped>
 /* Properties based on the app-sidebar */
 #talk-sidebar {

src/Recording.vue

@@ -54,6 +54,13 @@ export default {
 }
 </script>
 
+<style>
+/* FIXME: remove after https://github.com/nextcloud-libraries/nextcloud-vue/pull/4959 is released */
+body .modal-wrapper * {
+	box-sizing: border-box;
+}
+</style>
+
 <style lang="scss" scoped>
 /* The CallView descendants expect border-box to be set, as in the normal UI the
  * CallView is a descendant of NcContent, which applies the border-box to all

src/components/BreakoutRoomsEditor/SendMessageDialog.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcDialog ref="modal"
+	<NcDialog ref="dialog"
 		:name="dialogTitle"
 		:container="container"
 		close-on-click-outside
@@ -91,7 +91,7 @@ export default {
 
 	mounted() {
 		// Postpone render of NewMessage until modal container is mounted
-		this.modalContainerId = `#modal-description-${this.$refs.modal.navigationId}`
+		this.modalContainerId = '#' + this.$refs.dialog.$el.querySelector('.modal-container')?.id
 		this.$nextTick(() => {
 			this.$refs.newMessage.focusInput()
 		})

src/components/CallView/shared/ViewerOverlayCallView.vue

@@ -5,17 +5,7 @@
 
 <template>
 	<div ref="ghost" class="viewer-overlay-ghost">
-		<!--
-			Viewer Overlay should be teleported to be to the top of DOM to be on top of the Viewer,
-			because by default Viewer is on top of an entire Talk (#content-vue).
-			In the fullscreen mode Viewer is manually moved to #content-vue which is top layer by Fullscreen API.
-			FIXME: this is not correct to use Portal/Teleport to move something inside the Vue app.
-			Alternative solutions could be:
-			- Use full version of the Portal library (doesn't solve the same problem with Viewer)
-			- Use a new child of #content-vue as Talk Vue app
-		-->
-		<!-- Also Portal's selector is not reactive. We need to re-mount the node on selector change using key -->
-		<Portal :key="portalSelector" :selector="portalSelector">
+		<Portal>
 			<!-- Add .app-talk to use Talk icon classes outside of #content-vue -->
 			<div class="viewer-overlay app-talk"
 				:style="{
@@ -207,10 +197,6 @@ export default {
 			return this.$store.getters.conversation(this.token)
 		},
 
-		portalSelector() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		hasLocalScreen() {
 			return !!this.localModel.attributes.localScreen
 		},

src/composables/useDocumentFullscreen.ts

@@ -16,6 +16,12 @@ function useDocumentFullscreenComposable() {
 
 	const changeIsFullscreen = () => {
 		isFullscreen.value = document.fullscreenElement !== null
+
+		if (isFullscreen.value) {
+			document.body.classList.add('talk-in-fullscreen')
+		} else {
+			document.body.classList.remove('talk-in-fullscreen')
+		}
 	}
 
 	document.addEventListener('fullscreenchange', changeIsFullscreen)
@@ -33,15 +39,10 @@ function useDocumentFullscreenComposable() {
  * Enable a fullscreen with Fullscreen API
  */
 export async function enableFullscreen() {
-	const element = document.getElementById('content-vue')
-	if (!element) {
-		return
-	}
-
-	if (element.requestFullscreen) {
-		await element.requestFullscreen()
-	} else if (element.webkitRequestFullscreen) {
-		await element.webkitRequestFullscreen()
+	if (document.body.requestFullscreen) {
+		await document.body.requestFullscreen()
+	} else if (document.body.webkitRequestFullscreen) {
+		await document.body.webkitRequestFullscreen()
 	}
 }
 

src/composables/useViewer.js

@@ -3,9 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { nextTick, ref, watch } from 'vue'
+import { nextTick, ref } from 'vue'
 
-import { useDocumentFullscreen } from './useDocumentFullscreen.ts'
 import { useIsInCall } from './useIsInCall.js'
 import { useStore } from './useStore.js'
 import { useSidebarStore } from '../stores/sidebar.js'
@@ -57,32 +56,6 @@ function generatePermissions(filePermissions) {
 	return permissions
 }
 
-/**
- * FIXME Remove this hack once it is possible to set the parent
- * element of the viewer.
- * By default the viewer is a sibling of the fullscreen element, so
- * it is not visible when in fullscreen mode. It is not possible to
- * specify the parent nor to know when the viewer was actually
- * opened, so for the time being it is reparented if needed shortly
- * after calling it.
- *
- * @see https://github.com/nextcloud/viewer/issues/995
- *
- * @param {boolean} isFullscreen - is currently in fullscreen mode
- */
-function reparentViewer(isFullscreen) {
-	const viewerElement = document.getElementById('viewer')
-
-	if (isFullscreen) {
-		// When changed to the fullscreen mode, Viewer should be moved to the talk app
-		document.getElementById('content-vue')?.appendChild(viewerElement)
-	} else {
-		// In normal mode if it was in fullscreen before, move back to body
-		// Otherwise it will be overlapped by web-page's header
-		document.body.appendChild(viewerElement)
-	}
-}
-
 /**
  * Is Viewer currently opened
  *
@@ -99,15 +72,8 @@ const isViewerOpen = ref(false)
 export function useViewer(fileAPI) {
 	const store = useStore()
 	const isInCall = useIsInCall()
-	const isFullscreen = useDocumentFullscreen()
 	const sidebarStore = useSidebarStore()
 
-	watch(isFullscreen, () => {
-		if (isViewerOpen.value) {
-			reparentViewer(isFullscreen.value)
-		}
-	})
-
 	/**
 	 * Map object to be used by Viewer
 	 * @param {object} file file object (from Files API or Talk API)
@@ -164,10 +130,6 @@ export function useViewer(fileAPI) {
 		await nextTick()
 
 		isViewerOpen.value = true
-
-		if (isFullscreen.value) {
-			reparentViewer(true)
-		}
 	}
 
 	return {

src/main.js

@@ -51,8 +51,8 @@ Vue.use(VueRouter)
 
 const pinia = createPinia()
 
-TooltipOptions.container = '#content-vue'
-store.dispatch('setMainContainerSelector', '#content-vue')
+TooltipOptions.container = 'body'
+store.dispatch('setMainContainerSelector', 'body')
 
 const instance = new Vue({
 	el: '#content',

src/mainFilesSidebar.js

@@ -42,7 +42,7 @@ Vue.use(Vuex)
 
 const pinia = createPinia()
 
-store.dispatch('setMainContainerSelector', '.talkChatTab')
+store.dispatch('setMainContainerSelector', 'body')
 
 const newCallView = () => new Vue({
 	store,

src/mainPublicShareAuthSidebar.js

@@ -41,7 +41,7 @@ Vue.use(PiniaVuePlugin)
 Vue.use(Vuex)
 
 const pinia = createPinia()
-store.dispatch('setMainContainerSelector', '#talk-sidebar')
+store.dispatch('setMainContainerSelector', 'body')
 
 /**
  * Wraps all the body contents in its own container.

src/mainPublicShareSidebar.js

@@ -42,7 +42,7 @@ Vue.use(Vuex)
 
 const pinia = createPinia()
 
-store.dispatch('setMainContainerSelector', '#talk-sidebar')
+store.dispatch('setMainContainerSelector', 'body')
 
 /**
  *

src/mainRecording.js

@@ -52,8 +52,8 @@ Vue.use(VueRouter)
 
 const pinia = createPinia()
 
-TooltipOptions.container = '#call-container'
-store.dispatch('setMainContainerSelector', '#call-container')
+TooltipOptions.container = 'body'
+store.dispatch('setMainContainerSelector', 'body')
 
 window.store = store
 

src/store/uiModeStore.js

@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { useDocumentFullscreen } from '../composables/useDocumentFullscreen.ts'
-
 /**
  * This store handles the values that need to be customized depending on the
  * current UI mode of Talk (main UI, embedded in Files sidebar, video
@@ -17,8 +15,7 @@ const state = {
 
 const getters = {
 	getMainContainerSelector: (state, getters, rootState, rootGetters) => () => {
-		const isFullscreen = useDocumentFullscreen()
-		return isFullscreen.value ? state.mainContainerSelector : 'body'
+		return state.mainContainerSelector
 	},
 }