From faaf7a956da00c9db5120bb37db629367088ea8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 18 Aug 2024 14:06:40 +0200
Subject: [PATCH] fix(webui): fix PDF viewer

---
 .../src/lib/components/display/BlobViewer.svelte | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/webui/src/lib/components/display/BlobViewer.svelte b/webui/src/lib/components/display/BlobViewer.svelte
index 1868be6..d3c9e45 100644
--- a/webui/src/lib/components/display/BlobViewer.svelte
+++ b/webui/src/lib/components/display/BlobViewer.svelte
@@ -11,6 +11,8 @@
 	import api from '$lib/api';
 	import { createEventDispatcher } from 'svelte';
 	import { getTypes } from '$lib/util/mediatypes';
+	import { i18n } from '$lib/i18n';
+	import Icon from '$lib/components/utils/Icon.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -18,6 +20,7 @@
 	export let detail: boolean;
 
 	let handled = false;
+	let confirmedLoad = false;
 
 	$: ({ entity, entityInfo } = useEntity(address));
 	$: types = $entity && $entityInfo && getTypes($entity, $entityInfo);
@@ -58,8 +61,17 @@
 		{#if types?.image}
 			<ImageViewer {address} {detail} />
 		{/if}
-		{#if types?.pdf && size < 15_000}
-			<iframe src="{api.apiUrl}/raw/{address}?inline" title="PDF document of {address}" />
+		{#if types?.pdf}
+			{#if size < 15_000_000 || confirmedLoad}
+				<iframe src="{api.apiUrl}/raw/{address}?inline" title="PDF document of {address}" />
+			{:else}
+				<button on:click={() => (confirmedLoad = true)}>
+					<Icon name="download" />
+					{$i18n.t('This PDF is large. ({{sizeMb}}MB) Click to load.', {
+						sizeMb: Math.round(size / 1_000_000 / 100) * 100
+					})}
+				</button>
+			{/if}
 		{/if}
 		{#if types?.model}
 			<ModelViewer src="{api.apiUrl}/raw/{address}" />