Fix Viewer with Fullscreen mode toggle

src/composables/useViewer.js

@@ -17,6 +17,8 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { computed, nextTick, ref, watch } from 'vue'
+
 import { useIsInCall } from './useIsInCall.js'
 import { useStore } from './useStore.js'
 
@@ -29,19 +31,59 @@ import { useStore } from './useStore.js'
  * @param {object} list - The list of the files to be opened
  */
 
+/**
+ * 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
+ *
+ * @type {import('vue').Ref<boolean>}
+ */
+const isViewerOpen = ref(false)
+
 /**
  * Composable with OCA.Viewer helpers
  *
- * @return {{ openViewer: OpenViewer }}
+ * @return {{ openViewer: OpenViewer, isViewerOpen: import('vue').Ref<boolean> }}
  */
 export function useViewer() {
  const store = useStore()
  const isInCall = useIsInCall()
+ const isFullscreen = computed(() => store.getters.isFullscreen())
+
+ watch(isFullscreen, () => {
+ if (isViewerOpen.value) {
+ reparentViewer(isFullscreen.value)
+ }
+ })
 
  /**
  * @type {OpenViewer}
  */
- const openViewer = (path, list) => {
+ const openViewer = async (path, list) => {
  if (!OCA.Viewer) {
  return false
  }
@@ -59,26 +101,23 @@ export function useViewer() {
  path,
  list,
  onClose: () => {
+ isViewerOpen.value = false
  store.dispatch('setCallViewMode', { isViewerOverlay: false })
  },
  })
 
- // 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
- setTimeout(() => {
- if (store.getters.isFullscreen()) {
- document.getElementById('content-vue').appendChild(document.getElementById('viewer'))
- }
- }, 1000)
+ // Wait Viewer to be mounted
+ await nextTick()
+
+ isViewerOpen.value = true
+
+ if (isFullscreen.value) {
+ reparentViewer(true)
+ }
  }
 
  return {
+ isViewerOpen,
  openViewer,
  }
 }