feat: group preview
parent
11a62b274f
commit
ce54f01337
|
@ -6,9 +6,11 @@
|
||||||
import VideoViewer from "./blobs/VideoViewer.svelte";
|
import VideoViewer from "./blobs/VideoViewer.svelte";
|
||||||
import HashBadge from "./HashBadge.svelte";
|
import HashBadge from "./HashBadge.svelte";
|
||||||
import { API_URL } from "../../lib/api";
|
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 address: string;
|
||||||
|
export let recurse = true;
|
||||||
|
|
||||||
$: ({ entity, entityInfo } = useEntity(address));
|
$: ({ entity, entityInfo } = useEntity(address));
|
||||||
|
|
||||||
|
@ -29,15 +31,33 @@
|
||||||
$: web = $entityInfo?.t == "Url";
|
$: web = $entityInfo?.t == "Url";
|
||||||
$: fragment = Boolean($entity?.get("ANNOTATES"));
|
$: fragment = Boolean($entity?.get("ANNOTATES"));
|
||||||
|
|
||||||
|
$: group = $entity?.get("IS") == GROUP_TYPE_ADDR;
|
||||||
|
|
||||||
$: handled =
|
$: handled =
|
||||||
audio || video || image || text || pdf || model || web || fragment;
|
audio ||
|
||||||
|
video ||
|
||||||
|
image ||
|
||||||
|
text ||
|
||||||
|
pdf ||
|
||||||
|
model ||
|
||||||
|
web ||
|
||||||
|
fragment ||
|
||||||
|
(group && recurse);
|
||||||
|
|
||||||
let imageLoaded = null;
|
let imageLoaded = null;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if handled}
|
{#if handled}
|
||||||
<div class="preview">
|
<div class="preview">
|
||||||
{#if model}
|
{#if group}
|
||||||
|
<ul class="group">
|
||||||
|
{#each $entity.attr["HAS"].slice(0, 4) as child}
|
||||||
|
<li>
|
||||||
|
<svelte:self address={child.value.c} recurse={false} />
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{:else if model}
|
||||||
<ModelViewer lookonly src="{API_URL}/raw/{address}" />
|
<ModelViewer lookonly src="{API_URL}/raw/{address}" />
|
||||||
{:else if web}
|
{:else if web}
|
||||||
{#if imageLoaded != address}
|
{#if imageLoaded != address}
|
||||||
|
@ -83,7 +103,7 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-height: 25em;
|
max-height: max(25em, 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
|
@ -105,4 +125,22 @@
|
||||||
opacity: 0.25;
|
opacity: 0.25;
|
||||||
text-align: center;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue