thm/upend
thm/upend
1
0
Fork 0
Code Issues 75 Pull requests Projects Releases 6 Packages Wiki Activity

fix: audio preview sizing issue

Browse source
This commit is contained in:
Tomáš Mládek 2023-04-13 23:18:39 +02:00
parent 06787ada24
commit be7cc11e36
1 changed files with 79 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

152
webui/src/components/display/BlobPreview.svelte
View file

@ -61,83 +61,85 @@
} }
</script> </script>
<div class="preview" bind:clientHeight> <div class="preview">
{#if handled} {#if handled}
{#if !loaded} <div class="inner" bind:clientHeight>
<Spinner centered="absolute" /> {#if !loaded}
{/if} <Spinner centered="absolute" />
{#if types.group} {/if}
<ul class="group"> {#if types.group}
{#each groupChildren as address (address)} <ul class="group">
<li> {#each groupChildren as address (address)}
<svelte:self <li>
{address} <svelte:self
recurse={recurse - 1} {address}
on:handled={(ev) => { recurse={recurse - 1}
if (!ev.detail && !failedChildren.includes(address)) on:handled={(ev) => {
failedChildren = [...failedChildren, address]; if (!ev.detail && !failedChildren.includes(address))
}} failedChildren = [...failedChildren, address];
on:loaded={(ev) => { }}
if (ev.detail && !loadedChildren.includes(address)) on:loaded={(ev) => {
loadedChildren = [...loadedChildren, address]; if (ev.detail && !loadedChildren.includes(address))
}} loadedChildren = [...loadedChildren, address];
/> }}
</li> />
{/each} </li>
</ul> {/each}
{:else if types.model} </ul>
<ModelViewer {:else if types.model}
lookonly <ModelViewer
src="{API_URL}/raw/{address}" lookonly
on:loaded={() => (loaded = address)} src="{API_URL}/raw/{address}"
/> on:loaded={() => (loaded = address)}
{:else if types.web} />
<img {:else if types.web}
src={String($entity?.get("OG_IMAGE"))}
alt="OpenGraph image for {$entityInfo?.t == 'Url' && $entityInfo?.c}"
on:load={() => (loaded = address)}
on:error={() => (handled = false)}
/>
{:else if types.fragment}
<FragmentViewer
{address}
detail={false}
on:loaded={() => (loaded = address)}
/>
{:else if types.audio}
<div class="audiopreview image">
<img <img
src="{API_URL}/thumb/{address}?mime=audio" src={String($entity?.get("OG_IMAGE"))}
alt="Thumbnail for {address}..." alt="OpenGraph image for {$entityInfo?.t == 'Url' && $entityInfo?.c}"
loading="lazy"
on:load={() => (loaded = address)} on:load={() => (loaded = address)}
on:error={() => (handled = false)} on:error={() => (handled = false)}
/> />
{#if mediaDuration} {:else if types.fragment}
<div class="duration" style="--font-size: {clientHeight * 0.28}px"> <FragmentViewer
{mediaDuration} {address}
</div> detail={false}
{/if} on:loaded={() => (loaded = address)}
</div>
{:else if types.video}
<VideoViewer
{address}
detail={false}
on:loaded={() => (loaded = address)}
/>
{:else}
<div class="image" class:loaded={loaded == address || !handled}>
<img
src="{API_URL}/{types.mimeType?.includes('svg+xml')
? 'raw'
: 'thumb'}/{address}?size=512&quality=75"
alt="Thumbnail for {address}..."
loading="lazy"
on:load={() => (loaded = address)}
on:error={() => (handled = false)}
/> />
</div> {:else if types.audio}
{/if} <div class="audiopreview image">
<img
src="{API_URL}/thumb/{address}?mime=audio"
alt="Thumbnail for {address}..."
loading="lazy"
on:load={() => (loaded = address)}
on:error={() => (handled = false)}
/>
{#if mediaDuration}
<div class="duration" style="--font-size: {clientHeight * 0.66}px">
{mediaDuration}
</div>
{/if}
</div>
{:else if types.video}
<VideoViewer
{address}
detail={false}
on:loaded={() => (loaded = address)}
/>
{:else}
<div class="image" class:loaded={loaded == address || !handled}>
<img
src="{API_URL}/{types.mimeType?.includes('svg+xml')
? 'raw'
: 'thumb'}/{address}?size=512&quality=75"
alt="Thumbnail for {address}..."
loading="lazy"
on:load={() => (loaded = address)}
on:error={() => (handled = false)}
/>
</div>
{/if}
</div>
{:else} {:else}
<div class="hashbadge"> <div class="hashbadge">
<HashBadge {address} /> <HashBadge {address} />
@ -153,6 +155,10 @@
min-height: 0; min-height: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.inner {
display: relative;
}
} }
.hashbadge { .hashbadge {
@ -201,8 +207,8 @@
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
padding: .25rem; padding: 0.25rem;
gap: .25rem; gap: 0.25rem;
border: 1px solid var(--foreground); border: 1px solid var(--foreground);
border-radius: 4px; border-radius: 4px;