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

[ui] audioviewer its own component

feat/vaults
Tomáš Mládek 2022-02-14 13:27:51 +01:00
parent fbc63d2409
commit 77b7bd7a31
No known key found for this signature in database
GPG Key ID: 65E225C8B3E2ED8A
2 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
<script lang="ts">
import { useEntity } from "../../lib/entity";
import Spinner from "../utils/Spinner.svelte";
import AudioViewer from "./blobs/AudioViewer.svelte";
import ImageViewer from "./blobs/ImageViewer.svelte";
import ModelViewer from "./blobs/ModelViewer.svelte";
import TextViewer from "./blobs/TextViewer.svelte";
@ -40,16 +41,7 @@
</div>
{/if}
{#if audio}
{#if imageLoaded != address}
<Spinner />
{/if}
<img
src="api/thumb/{address}"
alt={address}
on:load={() => (imageLoaded = address)}
on:error={() => (imageLoaded = address)}
/>
<audio controls preload="auto" src="api/raw/{address}" />
<AudioViewer {address} />
{/if}
{#if video}
{#if imageLoaded != address}

28
webui/src/components/display/blobs/AudioViewer.svelte Normal file
View File

@ -0,0 +1,28 @@
<script lang="ts">
import Spinner from "../../utils/Spinner.svelte";
export let address: string;
let imageLoaded = null;
</script>
<div class="audio">
{#if imageLoaded != address}
<Spinner />
{/if}
<img
src="api/thumb/{address}"
alt={address}
on:load={() => (imageLoaded = address)}
on:error={() => (imageLoaded = address)}
/>
<audio controls preload="auto" src="api/raw/{address}" />
</div>
<style lang="scss">
.audio {
max-width: 100%;
display: flex;
flex-direction: column;
}
</style>