From 17dbcb31dcb61e22db4a9e4d05044963499b03c8 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Wed, 28 Oct 2026 21:27:41 +0100
Subject: [PATCH] feat(viewer): use nextcloud-viewer instead of custom viewer

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/shared/assets/styles.css                  |  14 ++
 src/shared/setupWebPage.js                    |  14 +-
 src/talk/renderer/TalkDesktop.vue             |   3 -
 src/talk/renderer/Viewer/Viewer.js            | 113 ---------
 src/talk/renderer/Viewer/ViewerApp.vue        | 172 -------------
 .../renderer/Viewer/ViewerHandlerBase.vue     | 103 --------
 .../renderer/Viewer/ViewerHandlerImages.vue   |  55 -----
 .../renderer/Viewer/ViewerHandlerMedia.vue    |  34 ---
 src/talk/renderer/Viewer/ViewerHandlerPdf.vue |  27 ---
 .../renderer/Viewer/ViewerHandlerText.vue     | 226 ------------------
 .../renderer/Viewer/ViewerHandlerVideos.vue   |  31 ---
 .../renderer/Viewer/viewer.composables.ts     |  54 -----
 src/talk/renderer/Viewer/viewer.service.ts    |  32 ---
 src/talk/renderer/Viewer/viewer.utils.ts      |  35 ---
 14 files changed, 25 insertions(+), 888 deletions(-)
 delete mode 100644 src/talk/renderer/Viewer/Viewer.js
 delete mode 100644 src/talk/renderer/Viewer/ViewerApp.vue
 delete mode 100644 src/talk/renderer/Viewer/ViewerHandlerBase.vue
 delete mode 100644 src/talk/renderer/Viewer/ViewerHandlerImages.vue
 delete mode 100644 src/talk/renderer/Viewer/ViewerHandlerMedia.vue
 delete mode 100644 src/talk/renderer/Viewer/ViewerHandlerPdf.vue
 delete mode 100644 src/talk/renderer/Viewer/ViewerHandlerText.vue
 delete mode 100644 src/talk/renderer/Viewer/ViewerHandlerVideos.vue
 delete mode 100644 src/talk/renderer/Viewer/viewer.composables.ts
 delete mode 100644 src/talk/renderer/Viewer/viewer.service.ts
 delete mode 100644 src/talk/renderer/Viewer/viewer.utils.ts

diff --git a/src/shared/assets/styles.css b/src/shared/assets/styles.css
index 84f5a20ee..a7587793f 100644
--- a/src/shared/assets/styles.css
+++ b/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;
+}
diff --git a/src/shared/setupWebPage.js b/src/shared/setupWebPage.js
index 538ee78d7..b276111e1 100644
--- a/src/shared/setupWebPage.js
+++ b/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)
 }
 
 /**
diff --git a/src/talk/renderer/TalkDesktop.vue b/src/talk/renderer/TalkDesktop.vue
index 250ecc76b..a9e933ae0 100644
--- a/src/talk/renderer/TalkDesktop.vue
+++ b/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>
diff --git a/src/talk/renderer/Viewer/Viewer.js b/src/talk/renderer/Viewer/Viewer.js
deleted file mode 100644
index c8cfba93e..000000000
--- a/src/talk/renderer/Viewer/Viewer.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { createApp } from 'vue'
-import ViewerApp from './ViewerApp.vue'
-import ViewerHandlerImages from './ViewerHandlerImages.vue'
-import ViewerHandlerPdf from './ViewerHandlerPdf.vue'
-import ViewerHandlerText from './ViewerHandlerText.vue'
-import ViewerHandlerVideos from './ViewerHandlerVideos.vue'
-
-/**
- * Create and mount Viewer instance with similar to original OCA.Viewer interface
- *
- * @return {object}
- */
-export function createViewer() {
-	const Viewer = {
-		availableHandlers: [
-			{
-				id: 'images',
-				group: 'media',
-				mimes: [
-					'image/apng',
-					'image/bmp',
-					'image/gif',
-					'image/jpeg',
-					'image/png',
-					'image/svg+xml',
-					'image/webp',
-					'image/x-icon',
-					'image/x-xbitmap',
-				],
-				component: ViewerHandlerImages,
-			},
-			{
-				id: 'videos',
-				group: 'media',
-				mimes: [
-					'video/mpeg',
-					'video/ogg',
-					'video/webm',
-					'video/mp4',
-					'video/x-m4v',
-					'video/x-flv',
-					'video/quicktime',
-					'video/x-matroska',
-				],
-				component: ViewerHandlerVideos,
-			},
-			{
-				id: 'pdf',
-				group: 'document',
-				mimes: ['application/pdf'],
-				component: ViewerHandlerPdf,
-			},
-			{
-				id: 'text',
-				group: 'document',
-				mimes: [
-					'text/markdown',
-					'text/plain',
-				],
-				component: ViewerHandlerText,
-			},
-			{
-				id: 'text',
-				group: 'code',
-				mimes: [
-					'application/javascript', // .js .mjs .cjs
-					'application/json', // .json
-					'application/x-msdos-program', // .bat .cmd
-					'application/x-perl', // .pl
-					'application/x-php', // .php
-					'application/xml', // .xml
-					'application/yaml', // .yaml .yml
-					'text/css', // .css
-					'text/csv', // .csv
-					'text/html', // .html
-					'text/x-c', // .c
-					'text/x-c++src', // .cpp
-					'text/x-h', // .h
-					'text/x-java-source', // .java
-					'text/x-ldif', // .ldif
-					'text/x-python', // .py
-					'text/x-rst', // .rst
-					'text/x-shellscript', // .sh
-				],
-				component: ViewerHandlerText,
-			},
-		],
-
-		get mimetypes() {
-			return this.availableHandlers.flatMap((handler) => handler.mimes)
-		},
-
-		open(...args) {
-			Viewer.instance.open(...args)
-		},
-
-		close() {
-			Viewer.instance.close()
-		},
-
-		instance: null,
-	}
-
-	const container = document.body.appendChild(document.createElement('div'))
-	Viewer.instance = createApp(ViewerApp).mount(container)
-
-	return Viewer
-}
diff --git a/src/talk/renderer/Viewer/ViewerApp.vue b/src/talk/renderer/Viewer/ViewerApp.vue
deleted file mode 100644
index d470a0165..000000000
--- a/src/talk/renderer/Viewer/ViewerApp.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<script setup>
-import { translate as t } from '@nextcloud/l10n'
-import { generateUrl } from '@nextcloud/router'
-import { computed, ref } from 'vue'
-import NcActionLink from '@nextcloud/vue/components/NcActionLink'
-import NcModal from '@nextcloud/vue/components/NcModal'
-import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-
-/**
- * Noop
- */
-function noop() {}
-
-/**
- * Noop for loadMore
- */
-async function noopLoadMore() {
-	return []
-}
-
-const isOpen = ref(false)
-const isLoadingMore = ref(false)
-
-// List of variables to sync with upstream openViewer call
-const onClose = ref(noop)
-const file = ref(null)
-const list = ref([])
-const loadMore = ref(noopLoadMore)
-const hasMore = ref(false)
-
-const viewComponent = computed(() => file.value && window.OCA.Viewer.availableHandlers.find((handler) => handler.mimes.includes(file.value.mime))?.component)
-
-const link = computed(() => file.value && generateUrl(`/f/${file.value.fileid}`))
-
-const currentIndex = computed(() => list.value.findIndex((item) => item.fileid === file.value?.fileid))
-const hasPrevious = computed(() => currentIndex.value > 0)
-const hasNext = computed(() => currentIndex.value !== -1 && (currentIndex.value < list.value.length - 1 || hasMore.value))
-
-/**
- * Open the viewer modal
- *
- * @param {object} options - Options
- * @param {object} options.fileInfo - File info
- * @param {object[]} [options.list] - List of files to paginate through
- * @param {() => Promise<object[]>} [options.loadMore] - Callback to fetch more files for the list
- * @param {() => void} options.onClose - Callback called then the modal is closed
- */
-function open(options = {}) {
-	onClose.value = options.onClose ?? noop
-	file.value = options.fileInfo ?? null
-	list.value = options.list?.length ? options.list : (file.value ? [file.value] : [])
-	loadMore.value = options.loadMore ?? noopLoadMore
-	hasMore.value = !!options.loadMore
-	isOpen.value = true
-}
-
-/**
- * Close the viewer modal
- */
-function close() {
-	file.value = null
-	list.value = []
-	loadMore.value = noopLoadMore
-	hasMore.value = false
-	onClose.value()
-	onClose.value = noop
-}
-
-/**
- * Show the previous file in the list
- */
-function showPrevious() {
-	if (hasPrevious.value) {
-		file.value = list.value[currentIndex.value - 1]
-	}
-}
-
-/**
- * Show the next file in the list, fetching more files first if needed
- */
-async function showNext() {
-	if (currentIndex.value === list.value.length - 1 && hasMore.value && !isLoadingMore.value) {
-		isLoadingMore.value = true
-		try {
-			const moreFiles = await loadMore.value()
-			if (moreFiles?.length) {
-				list.value = [...list.value, ...moreFiles]
-			} else {
-				// No more files to load, stop trying
-				hasMore.value = false
-			}
-		} catch (e) {
-			console.error('Failed to load more files for the Viewer', e)
-			hasMore.value = false
-		} finally {
-			isLoadingMore.value = false
-		}
-	}
-
-	if (hasNext.value) {
-		file.value = list.value[currentIndex.value + 1]
-	}
-}
-
-defineExpose({
-	open,
-	close,
-})
-</script>
-
-<template>
-	<NcModal
-		v-if="file"
-		id="viewer"
-		v-model:show="isOpen"
-		class="viewer-modal"
-		:class="{ 'viewer-modal--open': isOpen }"
-		:name="file.basename"
-		size="full"
-		closeButtonOutside
-		dark
-		:hasPrevious
-		:hasNext
-		@close="close"
-		@previous="showPrevious"
-		@next="showNext">
-		<component
-			:is="viewComponent"
-			v-if="viewComponent"
-			:file="file" />
-
-		<template #actions>
-			<NcActionLink :href="link">
-				<template #icon>
-					<IconOpenInNew :size="20" />
-				</template>
-				{{ t('talk_desktop', 'Open in a web browser') }}
-			</NcActionLink>
-		</template>
-	</NcModal>
-</template>
-
-<style>
-.header {
-	transition: background-color 250ms; /* Same as NcModal transition timing */
-}
-
-body:has(.viewer-modal--open) .header {
-	background: black;
-}
-</style>
-
-<style scoped>
-/* By default modal container overlaps an entire page. Move it down to not overlap the title */
-.viewer-modal {
-	top: var(--header-height) !important;
-}
-
-.viewer-modal :deep(.modal-container) {
-	background: none !important;
-	height: calc(100% - var(--header-height) * 2) !important;
-}
-
-.viewer-modal :deep(.modal-container__content) {
-	overflow: hidden !important;
-}
-</style>
diff --git a/src/talk/renderer/Viewer/ViewerHandlerBase.vue b/src/talk/renderer/Viewer/ViewerHandlerBase.vue
deleted file mode 100644
index a94e27103..000000000
--- a/src/talk/renderer/Viewer/ViewerHandlerBase.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
-  -->
-
-<script setup>
-import { t } from '@nextcloud/l10n'
-import { computed } from 'vue'
-import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
-import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
-
-const props = defineProps({
-	loading: {
-		type: Boolean,
-		required: false,
-		default: false,
-	},
-	error: {
-		type: [Boolean, String],
-		required: false,
-		default: false,
-	},
-	/**
-	 * In lazy mode the content is rendered visually hidden during loading.
-	 * Used when loading happens on rendering, for example, loading <img>.
-	 */
-	lazy: {
-		type: Boolean,
-		required: false,
-	},
-})
-
-const readyToShow = computed(() => !props.loading && !props.error)
-</script>
-
-<template>
-	<div class="viewer-wrapper">
-		<NcEmptyContent
-			v-if="loading"
-			:name="t('talk_desktop', 'Loading …')"
-			class="viewer-wrapper__empty-content delayed-appear"
-			data-theme-dark>
-			<template #icon>
-				<NcLoadingIcon />
-			</template>
-		</NcEmptyContent>
-
-		<NcEmptyContent
-			v-else-if="error"
-			:name="t('talk_desktop', 'Could not load the file')"
-			:description="typeof error === 'string' ? error : undefined"
-			class="viewer-wrapper__empty-content"
-			data-theme-dark>
-			<template #icon>
-				<IconAlertCircleOutline />
-			</template>
-		</NcEmptyContent>
-
-		<div v-if="lazy || readyToShow" class="viewer-wrapper__content" :class="{ 'hidden-visually': lazy && !readyToShow }">
-			<slot />
-		</div>
-	</div>
-</template>
-
-<style scoped>
-.viewer-wrapper {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 100%;
-}
-
-.viewer-wrapper__empty-content {
-	/* Explicitly set color to apply theme override */
-	color: var(--color-main-text);
-}
-
-.viewer-wrapper__content {
-	width: 100%;
-	height: 100%;
-}
-
-.viewer-wrapper__content > :deep(*) {
-	width: 100%;
-	height: 100%;
-}
-
-@keyframes delayed-appear {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-
-.delayed-appear {
-	opacity: 0;
-	animation: delayed-appear 0s forwards;
-	animation-delay: var(--animation-slow);
-}
-</style>
diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
deleted file mode 100644
index cd0a5eea9..000000000
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<script setup>
-import { computed, ref, watch } from 'vue'
-import ViewerHandlerMedia from './ViewerHandlerMedia.vue'
-import { generateFilePreviewUrl, generateUserFileDavUrl } from './viewer.utils.ts'
-
-const props = defineProps({
-	file: {
-		type: Object,
-		required: true,
-	},
-})
-
-const failed = ref(false)
-
-const src = computed(() => {
-	return failed.value
-		? generateUserFileDavUrl(props.file.filename)
-		: generateFilePreviewUrl(props.file.fileid, props.file.etag)
-})
-
-watch(() => props.file, () => {
-	failed.value = false
-})
-
-/**
- * Handle the failure of the preview image, falling back to the real file once before erroring out
- *
- * @param {(withError?: boolean | string) => void} handleLoadEnd - the callback handler from ViewerHandlerMedia
- */
-function handleError(handleLoadEnd) {
-	if (!failed.value) {
-		failed.value = true
-		return
-	}
-	handleLoadEnd(true)
-}
-</script>
-
-<template>
-	<ViewerHandlerMedia v-slot="{ mediaClass, handleLoadEnd }">
-		<img
-			:key="src"
-			class="viewer-image"
-			:class="mediaClass"
-			:src="src"
-			:alt="file.basename"
-			@load="handleLoadEnd(false)"
-			@error="handleError(handleLoadEnd)">
-	</ViewerHandlerMedia>
-</template>
diff --git a/src/talk/renderer/Viewer/ViewerHandlerMedia.vue b/src/talk/renderer/Viewer/ViewerHandlerMedia.vue
deleted file mode 100644
index c1ba54738..000000000
--- a/src/talk/renderer/Viewer/ViewerHandlerMedia.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
-  -->
-
-<script setup>
-import { ref } from 'vue'
-import ViewerHandlerBase from './ViewerHandlerBase.vue'
-
-const loading = ref(true)
-const error = ref(false)
-
-/**
- * Handle the end of the loading process
- *
- * @param {boolean | string} withError - Whether the loading process ended with an error
- */
-function handleLoadEnd(withError = false) {
-	loading.value = false
-	error.value = withError
-}
-</script>
-
-<template>
-	<ViewerHandlerBase :loading="loading" :error="error" lazy>
-		<slot :handleLoadEnd="handleLoadEnd" mediaClass="viewer-media" />
-	</ViewerHandlerBase>
-</template>
-
-<style scoped>
-:deep(.viewer-media) {
-	object-fit: scale-down;
-}
-</style>
diff --git a/src/talk/renderer/Viewer/ViewerHandlerPdf.vue b/src/talk/renderer/Viewer/ViewerHandlerPdf.vue
deleted file mode 100644
index 41a824d8c..000000000
--- a/src/talk/renderer/Viewer/ViewerHandlerPdf.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<script setup>
-import { computed, toRef } from 'vue'
-import ViewerHandlerBase from './ViewerHandlerBase.vue'
-import { useFileContent } from './viewer.composables.ts'
-
-const props = defineProps({
-	file: {
-		type: Object,
-		required: true,
-	},
-})
-
-const { content, loading, error } = useFileContent(toRef(() => props.file.filename), 'binary')
-
-const src = computed(() => content.value ? URL.createObjectURL(content.value) : undefined)
-</script>
-
-<template>
-	<ViewerHandlerBase :loading="loading" :error="error">
-		<iframe v-if="src" :src="src" />
-	</ViewerHandlerBase>
-</template>
diff --git a/src/talk/renderer/Viewer/ViewerHandlerText.vue b/src/talk/renderer/Viewer/ViewerHandlerText.vue
deleted file mode 100644
index d513c414a..000000000
--- a/src/talk/renderer/Viewer/ViewerHandlerText.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
-  -->
-
-<script setup>
-import { t } from '@nextcloud/l10n'
-import { computed, ref, toRef } from 'vue'
-import NcButton from '@nextcloud/vue/components/NcButton'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
-import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
-import NcRichText from '@nextcloud/vue/components/NcRichText'
-import IconCheck from 'vue-material-design-icons/Check.vue'
-import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
-import IconFileChartOutline from 'vue-material-design-icons/FileChartOutline.vue'
-import IconFileDocumentOutline from 'vue-material-design-icons/FileDocumentOutline.vue'
-import IconFileOutline from 'vue-material-design-icons/FileOutline.vue'
-import IconWrap from 'vue-material-design-icons/Wrap.vue'
-import ViewerHandlerBase from './ViewerHandlerBase.vue'
-import { useFileContent } from './viewer.composables.ts'
-
-const props = defineProps({
-	file: {
-		type: Object,
-		required: true,
-	},
-})
-
-const format = computed(() => {
-	const mimeToFormat = {
-		'text/markdown': 'md',
-		'text/plain': 'txt',
-	}
-	return mimeToFormat[props.file.mime] ?? 'code'
-})
-
-const layout = ref('compact')
-
-const wrap = ref(true)
-const wrapLabel = computed(() => format.value === 'md' ? t('talk_desktop', 'Wrap content in code blocks') : t('talk_desktop', 'Wrap content'))
-
-const justCopied = ref(false)
-
-const { content, loading, error } = useFileContent(toRef(() => props.file.filename), 'text')
-
-/**
- * Copy the content of the file to the clipboard
- */
-function copy() {
-	navigator.clipboard.writeText(content.value)
-	justCopied.value = true
-	setTimeout(() => {
-		justCopied.value = false
-	}, 2000)
-}
-</script>
-
-<template>
-	<ViewerHandlerBase :loading="loading" :error="error" :errorDescription="error">
-		<template #default>
-			<div class="viewer-text">
-				<template v-if="content">
-					<fieldset :aria-label="t('talk_desktop', 'Controls')" class="viewer-text__controls">
-						<fieldset class="viewer-text__layout-switch" :aria-label="t('talk_desktop', 'Layout')">
-							<NcCheckboxRadioSwitch
-								v-model="layout"
-								:aria-label="t('talk_desktop', 'Compact')"
-								value="compact"
-								type="radio"
-								name="layout"
-								buttonVariant
-								buttonVariantGrouped="horizontal">
-								<template #icon>
-									<IconFileDocumentOutline :size="20" />
-								</template>
-							</NcCheckboxRadioSwitch>
-							<NcCheckboxRadioSwitch
-								v-model="layout"
-								:aria-label="t('talk_desktop', 'Wide')"
-								value="wide"
-								type="radio"
-								name="layout"
-								buttonVariant
-								buttonVariantGrouped="horizontal">
-								<template #icon>
-									<IconFileChartOutline :size="20" style="transform: rotate(90deg) scaleX(-1)" />
-								</template>
-							</NcCheckboxRadioSwitch>
-						</fieldset>
-						<NcButton
-							v-model:pressed="wrap"
-							:aria-label="wrapLabel"
-							:title="wrapLabel"
-							variant="tertiary">
-							<template #icon>
-								<IconWrap :size="20" />
-							</template>
-						</NcButton>
-						<NcButton
-							:aria-label="t('talk_desktop', 'Copy content')"
-							:title="t('talk_desktop', 'Copy content')"
-							variant="tertiary"
-							@click="copy">
-							<template #icon>
-								<IconCheck v-if="justCopied" :size="20" />
-								<IconContentCopy v-else :size="20" />
-							</template>
-						</NcButton>
-					</fieldset>
-
-					<div
-						:aria-label="t('talk_desktop', 'Read-only text file content')"
-						class="viewer-text__content"
-						:class="[
-							`viewer-text__content--${format}`,
-							{
-								'viewer-text__content--compact': layout === 'compact',
-								'viewer-text__content--wrap': wrap,
-							},
-						]"
-						contenteditable
-						spellcheck="false"
-						@beforeinput.prevent>
-						<code v-if="format === 'code'">{{ content }}</code>
-						<NcRichText v-else :text="content" :useExtendedMarkdown="format === 'md'" />
-					</div>
-				</template>
-
-				<div v-else class="viewer-text__empty">
-					<NcEmptyContent :name="t('talk_desktop', 'The file is empty')">
-						<template #icon>
-							<IconFileOutline />
-						</template>
-					</NcEmptyContent>
-				</div>
-			</div>
-		</template>
-	</ViewerHandlerBase>
-</template>
-
-<style scoped>
-.viewer-text {
-	background-color: var(--color-main-background);
-	position: relative;
-	overflow: auto;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 0 calc(var(--default-grid-baseline) * 2);
-}
-
-.viewer-text__controls {
-	background-color: inherit;
-	width: 100%;
-	display: flex;
-	gap: var(--default-grid-baseline);
-	justify-content: flex-end;
-	padding: calc(var(--default-grid-baseline) * 2) 0;
-	position: sticky;
-	inset-block-start: 0;
-}
-
-.viewer-text__layout-switch {
-	display: flex;
-}
-
-.viewer-text__content {
-	flex: 1 0 auto;
-	width: 100%;
-	overflow-x: auto;
-	/* Reset global rich contenteditable styles */
-	background-color: unset;
-	border: none;
-	border-radius: 0;
-	padding: 0;
-	margin: 0;
-
-	&:focus-visible,
-	&:hover,
-	&:focus,
-	&:active {
-		box-shadow: none !important;
-		border: none !important;
-	}
-}
-
-.viewer-text__content--compact {
-	max-width: 900px;
-}
-
-.viewer-text__content--md :deep(pre) {
-	background: var(--color-background-dark);
-	padding: 1em;
-	overflow: auto;
-	white-space: pre;
-}
-
-.viewer-text__content--md :deep(ul) {
-	/* The default value is too small and doesnt fit the marker */
-	/* TODO: fix in upstream */
-	padding-inline-start: 1.2em !important;
-}
-
-.viewer-text__content--md.viewer-text__content--wrap :deep(pre) {
-	white-space: pre-wrap;
-}
-
-.viewer-text__content--txt,
-.viewer-text__content--code {
-	white-space: pre;
-
-	&.viewer-text__content--wrap {
-		white-space: pre-wrap;
-	}
-}
-
-.viewer-text__content--code code {
-	display: block;
-}
-
-.viewer-text__empty {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-</style>
diff --git a/src/talk/renderer/Viewer/ViewerHandlerVideos.vue b/src/talk/renderer/Viewer/ViewerHandlerVideos.vue
deleted file mode 100644
index 4aebe34e3..000000000
--- a/src/talk/renderer/Viewer/ViewerHandlerVideos.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<script setup>
-import { computed } from 'vue'
-import ViewerHandlerMedia from './ViewerHandlerMedia.vue'
-import { generateUserFileDavUrl } from './viewer.utils.ts'
-
-const props = defineProps({
-	file: {
-		type: Object,
-		required: true,
-	},
-})
-
-const src = computed(() => generateUserFileDavUrl(props.file.filename))
-</script>
-
-<template>
-	<ViewerHandlerMedia v-slot="{ mediaClass, handleLoadEnd }">
-		<video
-			class="viewer-video"
-			:class="mediaClass"
-			:src="src"
-			controls
-			@canplay="handleLoadEnd(false)"
-			@error="handleLoadEnd(true)" />
-	</ViewerHandlerMedia>
-</template>
diff --git a/src/talk/renderer/Viewer/viewer.composables.ts b/src/talk/renderer/Viewer/viewer.composables.ts
deleted file mode 100644
index 1acd0830a..000000000
--- a/src/talk/renderer/Viewer/viewer.composables.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import type { MaybeRefOrGetter, Ref } from 'vue'
-
-import { ref, toValue, watchEffect } from 'vue'
-import { fetchFileContent } from './viewer.service.ts'
-
-type FileContentComposableResult<T> = {
-	content: Ref<T>
-	loading: Ref<boolean>
-	error: Ref<boolean | string>
-}
-
-export function useFileContent(filename: MaybeRefOrGetter<string>, format: 'binary'): FileContentComposableResult<Blob | null>
-export function useFileContent(filename: MaybeRefOrGetter<string>, format: 'text'): FileContentComposableResult<string | null>
-/**
- * Fetch file content with reactive state in a watch effect
- *
- * @param filename - Path to user's file, e.g. '/Talk/file.txt'
- * @param format - Format of the file content to be returned. Binary is returned as Blob
- */
-export function useFileContent(filename: MaybeRefOrGetter<string>, format: 'text' | 'binary'): FileContentComposableResult<Blob | string | null> {
-	const content: Ref<Blob | string | null> = ref(null)
-	const loading: Ref<boolean> = ref(false)
-	const error: Ref<boolean | string> = ref(false)
-
-	watchEffect(async () => {
-		loading.value = true
-		content.value = null
-		error.value = false
-		try {
-			// Help TS to infer the type from overloads
-			content.value = format === 'text'
-				? await fetchFileContent(toValue(filename), format)
-				: await fetchFileContent(toValue(filename), format)
-		} catch (e) {
-			console.error('Failed to fetch file content', e)
-			// TODO: We can parse error from e.response, but it is not translated
-			// Or we can add messages for different status codes but it seems
-			// that it's always 404 if file cannot be loaded for any reason
-			error.value = true
-		}
-		loading.value = false
-	})
-
-	return {
-		content,
-		loading,
-		error,
-	}
-}
diff --git a/src/talk/renderer/Viewer/viewer.service.ts b/src/talk/renderer/Viewer/viewer.service.ts
deleted file mode 100644
index d5c527154..000000000
--- a/src/talk/renderer/Viewer/viewer.service.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import type { FileStat } from 'webdav'
-
-import { defaultRemoteURL, defaultRootPath, getClient } from '@nextcloud/files/dav'
-
-export async function fetchFileContent(filename: string, format: 'text'): Promise<string>
-export async function fetchFileContent(filename: string, format: 'binary'): Promise<Blob>
-/**
- * Fetch file content
- *
- * @param filename - Path to user's file, e.g. '/Talk/file.txt'
- * @param format - Format of the file content to be returned. 'binary' is returned as Blob
- */
-export async function fetchFileContent(filename: string, format: 'text' | 'binary'): Promise<string | Blob> {
-	const webDavClient = getClient(defaultRemoteURL + defaultRootPath)
-
-	if (format === 'text') {
-		// Get the text file content
-		return await webDavClient.getFileContents(filename, { format }) as string
-	}
-
-	// Get the MIME type of the file for the binary file to generate a correct Blob later
-	const stat = await webDavClient.stat(filename) as FileStat
-	const mimeType = stat.mime
-	// Get the file content as ArrayBuffer and convert it to Blob
-	const content = await webDavClient.getFileContents(filename, { format }) as ArrayBuffer
-	return new Blob([content], { type: mimeType })
-}
diff --git a/src/talk/renderer/Viewer/viewer.utils.ts b/src/talk/renderer/Viewer/viewer.utils.ts
deleted file mode 100644
index e32222e40..000000000
--- a/src/talk/renderer/Viewer/viewer.utils.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { defaultRemoteURL, defaultRootPath } from '@nextcloud/files/dav'
-import { generateUrl } from '@nextcloud/router'
-
-/**
- * Generate an absolute WebDAV URL to a user's file
- *
- * @param filename - Path to user's file, e.g. '/Talk/file.txt'
- * @return Full path to the file, e.g. 'https://nextcloud.ltd/remote.php/dav/files/username/Talk/file.txt'
- */
-export function generateUserFileDavUrl(filename: string): string {
-	return defaultRemoteURL + defaultRootPath + filename
-}
-
-/**
- * Generate an absolute URL for a Nextcloud file preview
- *
- * @param fileId - the fileid
- * @param etag - the ETag
- */
-export function generateFilePreviewUrl(fileId: string, etag: string): string {
-	const searchParams = new URLSearchParams(Object.entries({
-		fileId,
-		x: Math.floor(window.screen.width * window.devicePixelRatio).toString(),
-		y: Math.floor(window.screen.height * window.devicePixelRatio).toString(),
-		a: 'true',
-		etag,
-	})).toString()
-
-	return generateUrl(`/core/preview?${searchParams}`)
-}