From a1db8c29202f15502c0648a74e08376d0025e8be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Thu, 10 Feb 2022 11:43:31 +0100
Subject: [PATCH] [ui] show OG image in BlobPreview

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

diff --git a/webui/src/components/display/BlobPreview.svelte b/webui/src/components/display/BlobPreview.svelte
index 9a7e37e..0071e90 100644
--- a/webui/src/components/display/BlobPreview.svelte
+++ b/webui/src/components/display/BlobPreview.svelte
@@ -5,7 +5,7 @@
   import TextViewer from "./blobs/TextViewer.svelte";
   export let address: string;
 
-  $: ({ entity } = useEntity(address));
+  $: ({ entity, entityInfo } = useEntity(address));
 
   $: mimeType = String($entity?.get("FILE_MIME"));
 
@@ -19,8 +19,9 @@
   $: text = mimeType.startsWith("text");
   $: pdf = mimeType.startsWith("application/pdf");
   $: model = mimeType?.startsWith("model");
+  $: web = $entityInfo?.t == "Url";
 
-  $: handled = audio || video || image || text || pdf || model;
+  $: handled = audio || video || image || text || pdf || model || web;
 
   let imageLoaded = null;
 </script>
@@ -86,6 +87,17 @@
     {#if model}
       <ModelViewer src="api/raw/{address}" />
     {/if}
+    {#if web}
+      {#if imageLoaded != address}
+        <Spinner />
+      {/if}
+      <img
+        src={String($entity?.get("OG_IMAGE"))}
+        alt="OpenGraph image for {$entityInfo?.t == 'Url' && $entityInfo?.c}"
+        on:load={() => (imageLoaded = address)}
+        on:error={() => (handled = false)}
+      />
+    {/if}
   </div>
 {/if}