From a6ba81b50e312a6f1ebdbe195b5ac82dc8d5910b Mon Sep 17 00:00:00 2001
From: Dominic Kempf <dominic.kempf@iwr.uni-heidelberg.de>
Date: Mon, 22 Jul 2024 14:39:15 +0200
Subject: [PATCH] Implement rudimentary asset viewer capabilities

---
 src/App.svelte                            |  3 +-
 src/components/EasyDBDetailView.svelte    |  2 +
 src/components/logic/AssetDispatch.svelte | 23 +++++++++
 src/components/logic/AssetViewer.svelte   | 63 +++++++++++++++++++++++
 src/components/viewer/ImageViewer.svelte  | 11 ++++
 src/components/viewer/VideoViewer.svelte  |  7 +++
 6 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 src/components/logic/AssetDispatch.svelte
 create mode 100644 src/components/logic/AssetViewer.svelte
 create mode 100644 src/components/viewer/ImageViewer.svelte
 create mode 100644 src/components/viewer/VideoViewer.svelte

diff --git a/src/App.svelte b/src/App.svelte
index b5109c9..3503b7a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Button, Heading, Input, Label, MultiSelect, Select } from "flowbite-svelte";
-  import { assetStore, easydbInstanceStore, easydbInstanceDataStore, easydbInstanceDataPromiseStore, uuidStore } from "./lib/stores";
+  import { easydbInstanceStore, easydbInstanceDataStore, easydbInstanceDataPromiseStore, uuidStore } from "./lib/stores";
   import EasyDbDetailView from "./components/EasyDBDetailView.svelte";
 
   let uuid = "859e2318-32f6-4013-8468-ef8cec0b581b";
@@ -15,7 +15,6 @@
   let selected_data_languages = ['de-DE', 'en-US'];
 
   function dumpStores() {
-    console.log("assetStore: ", $assetStore);
     console.log("easydbInstanceStore: ", $easydbInstanceStore);
     console.log("easydbInstanceDataStore: ", $easydbInstanceDataStore);
     console.log("easydbInstanceDataPromiseStore: ", $easydbInstanceDataPromiseStore);
diff --git a/src/components/EasyDBDetailView.svelte b/src/components/EasyDBDetailView.svelte
index fe46f0d..267e4bd 100644
--- a/src/components/EasyDBDetailView.svelte
+++ b/src/components/EasyDBDetailView.svelte
@@ -4,6 +4,7 @@
   import { maskObj } from "../lib/easydbHelpers";
   import { appLanguageStore, dataLanguagesStore, easydbInstanceStore, easydbInstanceDataPromiseStore, uuidStore } from "../lib/stores";
 
+  import AssetViewer from "./logic/AssetViewer.svelte";
   import RecursiveEasyDbDetailView from "./logic/RecursiveEasyDBDetailView.svelte";
 
   export let uuid = "";
@@ -24,6 +25,7 @@
   {#await easydb_api_object($uuidStore.at(-1), mask) }
     Waiting for API response...
   {:then data }
+    <AssetViewer fields={maskObj(data).fields} data={data} table={maskObj(data).table_name_hint}/>
     <RecursiveEasyDbDetailView fields={maskObj(data).fields} data={data} table={maskObj(data).table_name_hint}/>
   {/await}
 {/await}
diff --git a/src/components/logic/AssetDispatch.svelte b/src/components/logic/AssetDispatch.svelte
new file mode 100644
index 0000000..cffd373
--- /dev/null
+++ b/src/components/logic/AssetDispatch.svelte
@@ -0,0 +1,23 @@
+<script>
+  import NotImplemented from "../utils/NotImplemented.svelte";
+
+  export let asset;
+
+  // Importing all the implememented viewers.
+  import ImageViewer from "../viewer/ImageViewer.svelte";
+  import VideoViewer from "../viewer/VideoViewer.svelte";
+
+  // Mapping the "class" names from the data to a Svelte component
+  // implementing the respective viewer.
+  const componentMapping = {
+    "audio": VideoViewer,
+    "image": ImageViewer,
+    "video": VideoViewer,
+  };
+</script>
+
+{#if asset.class in componentMapping}
+  <svelte:component this={componentMapping[asset.class]} asset={asset} />
+{:else}
+  <NotImplemented message="Asset type '{asset.class}' not implemented" />
+{/if}
diff --git a/src/components/logic/AssetViewer.svelte b/src/components/logic/AssetViewer.svelte
new file mode 100644
index 0000000..4748860
--- /dev/null
+++ b/src/components/logic/AssetViewer.svelte
@@ -0,0 +1,63 @@
+<script>
+  import { fieldData, findSchemaColumn, hasReverseSubData, hasSubData, linkedSubData, reverseLinkedSubData } from "../../lib/easydbHelpers";
+
+  import { Carousel, Pagination } from "flowbite-svelte";
+  import AssetDispatch from "./AssetDispatch.svelte";
+
+  export let fields;
+  export let table;
+  export let data;
+
+  function findAssets(fields, table, data) {
+    let ret = [];
+    for (const field of fields) {
+      if (field.kind === "field") {
+        if (findSchemaColumn(table, field).type === "eas") {
+          ret = ret.concat(fieldData(data, table, field));
+        }
+      }
+      if (field.kind === "linked-table") {
+        if (hasSubData(data, table, field)) {
+          for (const subdata of linkedSubData(data, table, field)) {
+            ret = ret.concat(findAssets(field.mask.fields, field.other_table_name_hint, subdata));
+          }
+        }
+      }
+      if (field.kind === "reverse-linked-table") {
+        if (hasReverseSubData(data, table, field)) {
+          for (const subdata of reverseLinkedSubData(data, table, field)) {
+            ret = ret.concat(findAssets(field.mask.fields, field.other_table_name_hint, subdata));
+          }
+        }
+      }
+    }
+    return ret;
+  }
+
+  function getCarouselImages(assets) {
+    return assets.map((asset) => { return {src: asset.versions.preview.url}});
+  }
+
+  const assets = findAssets(fields, table, data);
+  console.log(assets);
+</script>
+
+<!-- If there are no assets, no viewer is shown -->
+{#if assets.length > 0}
+  <!-- If all assets are images, we show them as a carousel, as we have this
+  component readily available from flowbite svelte -->
+  {#if assets.every((asset) => asset.class === "image") }
+    <Carousel images={getCarouselImages(assets)} imgClass="object-contain" class="bg-gray-200" let:Controls>
+      <Controls />
+    </Carousel>
+  {:else}
+    <!-- In this case we construct our own carousel-like thing with pagination -->
+    {#if assets.length > 1}
+      Pagination
+      <!-- <Pagination /> -->
+    {/if}
+    {#each assets as asset}
+      <AssetDispatch asset={asset} />
+    {/each}
+  {/if}
+{/if}
diff --git a/src/components/viewer/ImageViewer.svelte b/src/components/viewer/ImageViewer.svelte
new file mode 100644
index 0000000..10b5f1c
--- /dev/null
+++ b/src/components/viewer/ImageViewer.svelte
@@ -0,0 +1,11 @@
+<!-- NB: This component is used much less than you would expect, because
+         datasets that do only have image assets are displayed using the
+         Carousel component from Flowbite Svelte. Only in the case of mixing
+         image and non-image assets this is used to display images. -->
+<script>
+  import { Img } from "flowbite-svelte";
+
+  export let asset;
+</script>
+
+<Img src={asset.versions.preview.url} alt={asset.original_filename} />
diff --git a/src/components/viewer/VideoViewer.svelte b/src/components/viewer/VideoViewer.svelte
new file mode 100644
index 0000000..071b779
--- /dev/null
+++ b/src/components/viewer/VideoViewer.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { Video } from "flowbite-svelte";
+
+  export let asset;
+</script>
+
+<Video src={asset.versions.original.url} controls />
\ No newline at end of file