thm
/
upend
1
0
Fork 0
Code Issues 73 Pull Requests Packages Projects Releases 5 Wiki Activity

refactor: unify media type detection

feat/type-attributes
Tomáš Mládek 2022-10-23 11:15:19 +02:00
parent 4c0d352bd3
commit 23b3388ea5
3 changed files with 72 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
webui/src/components/display/BlobPreview.svelte
View File

@ -6,43 +6,26 @@
import VideoViewer from "./blobs/VideoViewer.svelte";
import HashBadge from "./HashBadge.svelte";
import { API_URL } from "../../lib/api";
import { GROUP_TYPE_ADDR } from "upend/constants";
import { createEventDispatcher } from "svelte";
import { getTypes } from "../../util/mediatypes";
const dispatch = createEventDispatcher();
export let address: string;
export let recurse = 3;
$: ({ entity, entityInfo } = useEntity(address));
$: mimeType = String($entity?.get("FILE_MIME"));
$: audio =
["audio", "application/x-riff"].some((p) => mimeType.startsWith(p)) &&
!video;
$: video =
["video", "application/x-matroska"].some((p) => mimeType.startsWith(p)) ||
$entity?.identify().some((l) => l.endsWith(".avi"));
$: image = mimeType.startsWith("image");
$: text = mimeType.startsWith("text");
$: model =
mimeType?.startsWith("model") ||
$entity?.identify().some((l) => l.endsWith(".stl"));
$: web = $entityInfo?.t == "Url";
$: fragment = Boolean($entity?.get("ANNOTATES"));
$: group = $entity?.get("IS") == GROUP_TYPE_ADDR;
$: types = getTypes($entity, $entityInfo);
$: handled =
!$entity ||
audio ||
video ||
image ||
text ||
model ||
web ||
fragment ||
(group && recurse > 0);
types.audio ||
types.video ||
types.image ||
types.text ||
types.model ||
types.web ||
types.fragment ||
(types.group && recurse > 0);
$: dispatch("handled", handled);
@ -80,7 +63,7 @@
<div class="preview" bind:clientHeight>
{#if handled}
{#if group}
{#if types.group}
<ul class="group">
{#each groupChildren as address (address)}
<li>
@ -94,9 +77,9 @@
</li>
{/each}
</ul>
{:else if model}
{:else if types.model}
<ModelViewer lookonly src="{API_URL}/raw/{address}" />
{:else if web}
{:else if types.web}
{#if imageLoaded != address}
<Spinner />
{/if}
@ -106,11 +89,11 @@
on:load={() => (imageLoaded = address)}
on:error={() => (handled = false)}
/>
{:else if fragment}
{:else if types.fragment}
<FragmentViewer {address} detail={false} />
{:else if video}
{:else if types.video}
<VideoViewer {address} detail={false} />
{:else if audio}
{:else if types.audio}
<div class="audiopreview image">
{#if handled && imageLoaded != address}
<div class="spinner">
@ -137,7 +120,7 @@
</div>
{/if}
<img
src="{API_URL}/{mimeType?.includes('svg+xml')
src="{API_URL}/{types.mimeType?.includes('svg+xml')
? 'raw'
: 'thumb'}/{address}?size=512&quality=75"
alt="Thumbnail for {address}..."

44
webui/src/components/display/BlobViewer.svelte
View File

@ -10,6 +10,7 @@
import UpLink from "./UpLink.svelte";
import { API_URL } from "../../lib/api";
import { createEventDispatcher } from "svelte";
import { getTypes } from "../../util/mediatypes";
const dispatch = createEventDispatcher();
export let address: string;
@ -19,26 +20,17 @@
let handled = false;
$: ({ entity, entityInfo } = useEntity(address));
$: mimeType = String($entity?.get("FILE_MIME"));
$: audio =
["audio", "application/x-riff"].some((p) => mimeType.startsWith(p)) &&
!video;
$: video =
["video", "application/x-matroska"].some((p) => mimeType.startsWith(p)) ||
$entity?.identify().some((l) => l.endsWith(".avi"));
$: image = mimeType.startsWith("image");
$: text = mimeType.startsWith("text");
$: pdf = mimeType.startsWith("application/pdf");
$: model =
mimeType?.startsWith("model") ||
$entity?.identify().some((l) => l.endsWith(".stl"));
$: web = $entityInfo?.t == "Url";
$: fragment = Boolean($entity?.get("ANNOTATES"));
$: types = getTypes($entity, $entityInfo);
$: handled =
audio || video || image || text || pdf || model || web || fragment;
types.audio ||
types.video ||
types.image ||
types.text ||
types.pdf ||
types.model ||
types.web ||
types.fragment;
$: dispatch("handled", handled);
@ -47,30 +39,30 @@
{#if handled}
<div class="preview" class:detail>
{#if text}
{#if types.text}
<div class="text">
<TextViewer {address} />
</div>
{/if}
{#if audio}
{#if types.audio}
<AudioViewer {address} {detail} {editable} />
{/if}
{#if video}
{#if types.video}
<VideoViewer detail {address} />
{/if}
{#if image}
{#if types.image}
<ImageViewer {address} {editable} {detail} />
{/if}
{#if pdf}
{#if types.pdf}
<iframe
src="{API_URL}/raw/{address}?inline"
title="PDF document of {address}"
/>
{/if}
{#if model}
{#if types.model}
<ModelViewer src="{API_URL}/raw/{address}" />
{/if}
{#if web}
{#if types.web}
{#if imageLoaded != address}
<Spinner />
{/if}
@ -81,7 +73,7 @@
on:error={() => (handled = false)}
/>
{/if}
{#if fragment}
{#if types.fragment}
<UpLink passthrough to={{ entity: String($entity.get("ANNOTATES")) }}>
<FragmentViewer {address} {detail} />
</UpLink>

37
webui/src/util/mediatypes.ts Normal file
View File

@ -0,0 +1,37 @@
import type { EntityInfo } from "src/lib/entity";
import type { UpObject } from "upend";
import { GROUP_TYPE_ADDR } from "upend/constants";
export function getTypes(entity: UpObject, entityInfo: EntityInfo) {
const mimeType = String(entity?.get("FILE_MIME"));
const video =
["video", "application/x-matroska"].some((p) => mimeType.startsWith(p)) ||
entity?.identify().some((l) => l.endsWith(".avi"));
const audio =
["audio", "application/x-riff"].some((p) => mimeType.startsWith(p)) &&
!video;
const image = mimeType.startsWith("image");
const text = mimeType.startsWith("text");
const pdf = mimeType.startsWith("application/pdf");
const model =
mimeType?.startsWith("model") ||
entity?.identify().some((l) => l.endsWith(".stl"));
const web = entityInfo?.t == "Url";
const fragment = Boolean(entity?.get("ANNOTATES"));
const group = entity?.get("IS") == GROUP_TYPE_ADDR;
return {
mimeType,
audio,
video,
image,
text,
pdf,
model,
web,
fragment,
group,
};
}