diff --git a/webui/src/components/display/blobs/AudioViewer.svelte b/webui/src/components/display/blobs/AudioViewer.svelte index 71a87f4..de0b0e5 100644 --- a/webui/src/components/display/blobs/AudioViewer.svelte +++ b/webui/src/components/display/blobs/AudioViewer.svelte @@ -1,8 +1,17 @@ @@ -74,9 +223,76 @@ class:hidden={!detail} />
+ {#if currentAnnotation} +
+

Annotation #{currentAnnotationIndex}

+
+
+
+ Start: { + currentAnnotation.update({ + start: parseInt(ev.currentTarget.value), + }); + updateAnnotationDebounced(currentAnnotation); + }} + /> +
+
+ End: { + currentAnnotation.update({ + end: parseInt(ev.currentTarget.value), + }); + updateAnnotationDebounced(currentAnnotation); + }} + /> +
+
+ Color: { + currentAnnotation.update({ color: ev.currentTarget.value }); + updateAnnotation(currentAnnotation); + }} + /> +
+
+
+
currentAnnotation.remove()}> + +
+ +
+
+
+ {#key currentAnnotation} + { + currentAnnotation.update({ data: ev.detail }); + updateAnnotation(currentAnnotation); + }} + /> + {/key} +
+
+ {/if}
diff --git a/webui/src/components/display/blobs/FragmentViewer.svelte b/webui/src/components/display/blobs/FragmentViewer.svelte index edb34be..ed40d7f 100644 --- a/webui/src/components/display/blobs/FragmentViewer.svelte +++ b/webui/src/components/display/blobs/FragmentViewer.svelte @@ -3,7 +3,7 @@ import Spinner from "../../utils/Spinner.svelte"; export let address: string; export let detail: boolean; - import { xywh } from "../../../util/xywh"; + import { xywh } from "../../../util/fragments/xywh"; import UpLink from "../UpLink.svelte"; const { entity } = useEntity(address); @@ -43,7 +43,10 @@ justify-content: center; } - img.imageLoaded { - border: 2px dashed colors.$yellow; + img { + max-width: 100%; + &.imageLoaded { + border: 2px dashed colors.$yellow; + } } diff --git a/webui/src/util/fragments/time.ts b/webui/src/util/fragments/time.ts new file mode 100644 index 0000000..7ef07d1 --- /dev/null +++ b/webui/src/util/fragments/time.ts @@ -0,0 +1,29 @@ +/** + * Both `start` and `end` are in seconds. + */ +export class TimeFragment { + start: number | null; + end: number | null; + + constructor(start: number, end: number) { + this.start = start; + this.end = end; + } + + public static parse(fragment: string): TimeFragment { + if (!fragment.startsWith("t=")) { + return undefined; + } + const data = fragment.substring("t=".length); + try { + const [start, end] = data.split(",").map((str) => parseFloat(str)); + return new TimeFragment(start || null, end || null); + } catch { + return undefined; + } + } + + public toString(): string { + return `t=${this.start || ""},${this.end || ""}`; + } +} diff --git a/webui/src/util/xywh.ts b/webui/src/util/fragments/xywh.ts similarity index 100% rename from webui/src/util/xywh.ts rename to webui/src/util/fragments/xywh.ts