diff --git a/src/composables/useDocumentFullscreen.ts b/src/composables/useDocumentFullscreen.ts index b8b9bc101cc..9cafd85410f 100644 --- a/src/composables/useDocumentFullscreen.ts +++ b/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>} - 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() } } diff --git a/src/composables/useViewer.js b/src/composables/useViewer.js index 234c1f866c4..6099c28c510 100644 --- a/src/composables/useViewer.js +++ b/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 diff --git a/src/env.d.ts b/src/env.d.ts index 4d9841cd308..3acd12645ce 100644 --- a/src/env.d.ts +++ b/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