diff --git a/webui/src/components/display/BlobPreview.svelte b/webui/src/components/display/BlobPreview.svelte index 01eb42f..ee6ccec 100644 --- a/webui/src/components/display/BlobPreview.svelte +++ b/webui/src/components/display/BlobPreview.svelte @@ -6,9 +6,11 @@ import VideoViewer from "./blobs/VideoViewer.svelte"; import HashBadge from "./HashBadge.svelte"; import { API_URL } from "../../lib/api"; - import { includes } from "lodash"; + import { GROUP_TYPE_ADDR } from "upend/constants"; + import AddModal from "../AddModal.svelte"; export let address: string; + export let recurse = true; $: ({ entity, entityInfo } = useEntity(address)); @@ -29,15 +31,33 @@ $: web = $entityInfo?.t == "Url"; $: fragment = Boolean($entity?.get("ANNOTATES")); + $: group = $entity?.get("IS") == GROUP_TYPE_ADDR; + $: handled = - audio || video || image || text || pdf || model || web || fragment; + audio || + video || + image || + text || + pdf || + model || + web || + fragment || + (group && recurse); let imageLoaded = null; {#if handled}
- {#if model} + {#if group} + + {:else if model} {:else if web} {#if imageLoaded != address} @@ -83,7 +103,7 @@ justify-content: center; align-items: center; flex-direction: column; - max-height: 25em; + max-height: max(25em, 100%); } .image { @@ -105,4 +125,22 @@ opacity: 0.25; text-align: center; } + + .group { + padding: 0; + + display: grid; + grid-template-columns: repeat(2, 1fr); + min-height: 0; + border: 1px solid var(--foreground); + border-radius: 4px; + + li { + list-style: none; + min-height: 0; + display: flex; + flex-direction: column; + justify-content: flex-end; + } + }