From 9fe95fa9ed05db26d1499e6be1d8b102206e1e63 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 3 Sep 2024 17:18:31 +0200
Subject: [PATCH] fix(viewer): add loading and error handling with improved UI

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 .../renderer/Viewer/ViewerHandlerBase.vue     | 91 +++++++++++++++++++
 .../renderer/Viewer/ViewerHandlerImages.vue   | 28 ++----
 .../renderer/Viewer/ViewerHandlerMedia.vue    | 33 +++++++
 .../renderer/Viewer/ViewerHandlerVideos.vue   | 27 ++----
 4 files changed, 143 insertions(+), 36 deletions(-)
 create mode 100644 src/talk/renderer/Viewer/ViewerHandlerBase.vue
 create mode 100644 src/talk/renderer/Viewer/ViewerHandlerMedia.vue

diff --git a/src/talk/renderer/Viewer/ViewerHandlerBase.vue b/src/talk/renderer/Viewer/ViewerHandlerBase.vue
new file mode 100644
index 00000000..6bd33297
--- /dev/null
+++ b/src/talk/renderer/Viewer/ViewerHandlerBase.vue
@@ -0,0 +1,91 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+  -->
+
+<script setup>
+import { computed } from 'vue'
+import { t } from '@nextcloud/l10n'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+
+const props = defineProps({
+	loading: {
+		type: Boolean,
+		required: false,
+		default: false,
+	},
+	error: {
+		type: [String, Boolean],
+		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="delayed-appear">
+			<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">
+			<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__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
index 61f880a5..c0be22f3 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -6,6 +6,7 @@
 <script setup>
 import { computed } from 'vue'
 import { generateFilePreviewUrl } from './viewer.utils.ts'
+import ViewerHandlerMedia from './ViewerHandlerMedia.vue'
 
 const props = defineProps({
 	file: {
@@ -18,22 +19,13 @@ const src = computed(() => generateFilePreviewUrl(props.file.fileid, props.file.
 </script>
 
 <template>
-	<div class="media-wrapper">
-		<img :src="src" :alt="file.basename">
-	</div>
+	<ViewerHandlerMedia v-slot="{ mediaClass, handleLoadEnd }">
+		<img :key="src"
+			class="viewer-image"
+			:class="mediaClass"
+			:src="src"
+			:alt="file.basename"
+			@load="handleLoadEnd(false)"
+			@error="handleLoadEnd(true)">
+	</ViewerHandlerMedia>
 </template>
-
-<style scoped>
-.media-wrapper {
-	display: flex;
-	height: 100%;
-	width: 100%;
-	justify-content: center;
-	align-items: center;
-
-	> * {
-		max-width: 100%;
-		max-height: 100%;
-	}
-}
-</style>
diff --git a/src/talk/renderer/Viewer/ViewerHandlerMedia.vue b/src/talk/renderer/Viewer/ViewerHandlerMedia.vue
new file mode 100644
index 00000000..0ae44aa5
--- /dev/null
+++ b/src/talk/renderer/Viewer/ViewerHandlerMedia.vue
@@ -0,0 +1,33 @@
+<!--
+  - 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 :handle-load-end="handleLoadEnd" media-class="viewer-media" />
+	</ViewerHandlerBase>
+</template>
+
+<style scoped>
+:deep(.viewer-media) {
+	object-fit: scale-down;
+}
+</style>
diff --git a/src/talk/renderer/Viewer/ViewerHandlerVideos.vue b/src/talk/renderer/Viewer/ViewerHandlerVideos.vue
index 8102daac..754732dc 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerVideos.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerVideos.vue
@@ -6,6 +6,7 @@
 <script setup>
 import { computed } from 'vue'
 import { generateUserFileDavUrl } from './viewer.utils.ts'
+import ViewerHandlerMedia from './ViewerHandlerMedia.vue'
 
 const props = defineProps({
 	file: {
@@ -18,22 +19,12 @@ const src = computed(() => generateUserFileDavUrl(props.file.filename))
 </script>
 
 <template>
-	<div class="media-wrapper">
-		<video :src="src" controls />
-	</div>
+	<ViewerHandlerMedia v-slot="{ mediaClass, handleLoadEnd }">
+		<video class="viewer-video"
+			:class="mediaClass"
+			:src="src"
+			controls
+			@canplay="handleLoadEnd(false)"
+			@error="handleLoadEnd(true)" />
+	</ViewerHandlerMedia>
 </template>
-
-<style scoped>
-.media-wrapper {
-	display: flex;
-	height: 100%;
-	width: 100%;
-	justify-content: center;
-	align-items: center;
-
-	> * {
-		max-width: 100%;
-		max-height: 100%;
-	}
-}
-</style>