From 0ba8d0368d721487798bc61f495570c3c2a5ab54 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 16 Sep 2024 19:38:18 +0200
Subject: [PATCH] fix: drop Viewer+ViewerOverlay re-parenting

- Viewer is always mounted next to the #content-vue, so it will be visible on body fullscreen-ed

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../CallView/shared/ViewerOverlayCallView.vue | 16 +-------
 src/composables/useViewer.js                  | 37 -------------------
 2 files changed, 1 insertion(+), 52 deletions(-)

diff --git a/src/components/CallView/shared/ViewerOverlayCallView.vue b/src/components/CallView/shared/ViewerOverlayCallView.vue
index 9e41b6c69b4..577e8ab1e8e 100644
--- a/src/components/CallView/shared/ViewerOverlayCallView.vue
+++ b/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
 		},
diff --git a/src/composables/useViewer.js b/src/composables/useViewer.js
index 6099c28c510..bf1f177c80c 100644
--- a/src/composables/useViewer.js
+++ b/src/composables/useViewer.js
@@ -57,32 +57,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 +73,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 +131,6 @@ export function useViewer(fileAPI) {
 		await nextTick()
 
 		isViewerOpen.value = true
-
-		if (isFullscreen.value) {
-			reparentViewer(true)
-		}
 	}
 
 	return {