feat(viewer): use nextcloud-viewer instead of custom viewer (media only)

src/shared/assets/styles.css

@@ -40,3 +40,17 @@ kbd {
 kbd + kbd {
 	margin-inline-start: calc(1 * var(--default-grid-baseline));
 }
+
+/* @nextcloud/viewer uses 8px constant instead of var(--body-container-margin) */
+/* TODO: remove if https://github.com/nextcloud-libraries/nextcloud-viewer/pull/181 is merged and released */
+.viewer__modal[role="dialog"] div.modal-container {
+	top: calc(var(--header-height) + var(--body-container-margin)) !important;
+}
+
+/* Prevent full-size modal from overriding custom title bar (Window Controls Overlay) */
+/* TODO: should it be fixed in upstream NcModal to support PWA? */
+.modal-mask:has(>.modal-wrapper--full) {
+	top: env(titlebar-area-height, 0px) !important;
+	bottom: 0;
+	height: auto;
+}

src/shared/setupWebPage.js

@@ -232,11 +232,19 @@ function applyInitialState() {
 }
 
 /**
- * Set CSS variable for --header-height
+ * Override --header-height according to the title-bar height on every theme
  */
 function applyHeaderHeight() {
-	document.body.style.setProperty('--header-height', `${TITLE_BAR_HEIGHT}px`)
-	document.documentElement.style.setProperty('--header-height', `${TITLE_BAR_HEIGHT}px`)
+	const style = document.createElement('style')
+	style.textContent = `:root,
+[data-theme-default],
+[data-theme-light],
+[data-theme-dark],
+[data-theme-dark-highcontrast],
+[data-theme-light-highcontrast] {
+  --header-height: ${TITLE_BAR_HEIGHT}px !important;
+}`
+	document.head.appendChild(style)
 }
 
 /**

src/talk/renderer/TalkDesktop.vue

@@ -9,14 +9,11 @@ import AppWindow from '../../shared/components/AppWindow.vue'
 import TalkWrapper from './TalkWrapper/TalkWrapper.vue'
 import TitleBar from './TitleBar/TitleBar.vue'
 import { useNotificationsStore } from './notifications/notifications.store.js'
-import { createViewer } from './Viewer/Viewer.js'
 
 const isTalkInitialized = ref(false)
 provide('talk:isInitialized', isTalkInitialized)
 
 useNotificationsStore()
-
-window.OCA.Viewer = createViewer()
 </script>
 
 <template>