fixup! fix: migrate fullscreen store and related functions/listeners …

…to composable

Signed-off-by: Maksim Sukharev <[email protected]>

src/composables/useDocumentFullscreen.ts

@@ -7,6 +7,10 @@ import { createSharedComposable } from '@vueuse/core'
 import { readonly, ref, onBeforeMount, onBeforeUnmount } from 'vue'
 import type { Ref, DeepReadonly } from 'vue'
 
+interface WebkitElement extends Element {
+	ALLOW_KEYBOARD_INPUT: FullscreenOptions;
+}
+
 /**
  * Composable to check whether the page is displayed at fullscreen
  * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the page is displayed at fullscreen
@@ -18,17 +22,11 @@ function useDocumentFullscreenComposable() {
 		isFullscreen.value = document.fullscreenElement !== null
 	}
 
-	onBeforeMount(() => {
-		document.addEventListener('fullscreenchange', changeIsFullscreen)
-		document.addEventListener('mozfullscreenchange', changeIsFullscreen)
-		document.addEventListener('MSFullscreenChange', changeIsFullscreen)
-		document.addEventListener('webkitfullscreenchange', changeIsFullscreen)
-	})
+	document.addEventListener('fullscreenchange', changeIsFullscreen)
+	document.addEventListener('webkitfullscreenchange', changeIsFullscreen)
 
 	onBeforeUnmount(() => {
 		document.removeEventListener('fullscreenchange', changeIsFullscreen)
-		document.removeEventListener('mozfullscreenchange', changeIsFullscreen)
-		document.removeEventListener('MSFullscreenChange', changeIsFullscreen)
 		document.removeEventListener('webkitfullscreenchange', changeIsFullscreen)
 	})
 
@@ -40,15 +38,14 @@ function useDocumentFullscreenComposable() {
  */
 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(Element.ALLOW_KEYBOARD_INPUT)
-	} else if (element.mozRequestFullScreen) {
-		await element.mozRequestFullScreen()
-	} else if (element.msRequestFullscreen) {
-		await element.msRequestFullscreen()
+		await element.webkitRequestFullscreen((Element as unknown as WebkitElement).ALLOW_KEYBOARD_INPUT)
 	}
 }
 
@@ -60,10 +57,6 @@ export async function disableFullscreen() {
 		await document.exitFullscreen()
 	} else if (document.webkitExitFullscreen) {
 		await document.webkitExitFullscreen()
-	} else if (document.mozCancelFullScreen) {
-		await document.mozCancelFullScreen()
-	} else if (document.msExitFullscreen) {
-		await document.msExitFullscreen()
 	}
 }
 

src/composables/useViewer.js

@@ -75,7 +75,7 @@ function reparentViewer(isFullscreen) {
 
 	if (isFullscreen) {
 		// When changed to the fullscreen mode, Viewer should be moved to the talk app
-		document.getElementById('content-vue').appendChild(viewerElement)
+		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

src/env.d.ts

@@ -3,7 +3,18 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+type ExitFullscreen = typeof document.exitFullscreen
+type RequestFullscreen = typeof document.documentElement.requestFullscreen
+
 declare global {
+	interface Document {
+		webkitExitFullscreen: ExitFullscreen;
+	}
+
+	interface HTMLElement {
+		webkitRequestFullscreen: RequestFullscreen;
+	}
+
 	// @nextcloud/webpack-vue-config build globals
 	const appName: string
 	const appVersion: string