133 lines
2.9 KiB
Svelte
133 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { type MediaResult, requestMediaVersion } from "#lib/api/client.js";
|
|
import { isActiveContent, visualKind } from "#lib/api/media.js";
|
|
import type { MediaVersion } from "#lib/api/types.js";
|
|
import Icon from "#lib/components/ui/Icon.svelte";
|
|
import Spinner from "#lib/components/ui/Spinner.svelte";
|
|
import { poster } from "#lib/media/poster.js";
|
|
|
|
interface Props {
|
|
version: MediaVersion;
|
|
}
|
|
|
|
let { version }: Props = $props();
|
|
|
|
let result = $state<MediaResult | null>(null);
|
|
|
|
const vk = $derived(visualKind(version.kind));
|
|
|
|
$effect(() => {
|
|
let active = true;
|
|
requestMediaVersion(version.id).then((value) => {
|
|
if (active) {
|
|
result = value;
|
|
}
|
|
});
|
|
return () => {
|
|
active = false;
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<div class="thumb">
|
|
{#if result === null}
|
|
<div class="placeholder"><Spinner /></div>
|
|
{:else if result.state === "ready" && vk === "image"}
|
|
<a href={result.url} rel="noopener" target="_blank">
|
|
<img alt={version.kind} src={result.url}>
|
|
</a>
|
|
{:else if result.state === "ready" && vk === "video"}
|
|
<a href={result.url} rel="noopener" target="_blank">
|
|
<video
|
|
muted
|
|
playsinline
|
|
preload="metadata"
|
|
src={result.url}
|
|
use:poster
|
|
></video>
|
|
<span class="play"><Icon name="large-play" size="1.5rem" /></span>
|
|
</a>
|
|
{:else if result.state === "ready"}
|
|
<a
|
|
class="file"
|
|
download={isActiveContent(result.mime)
|
|
? `media_${version.id}`
|
|
: undefined}
|
|
href={result.url}
|
|
rel="noopener"
|
|
target="_blank"
|
|
>
|
|
<Icon name="document" size="1.125rem" />
|
|
<span>{version.kind}</span>
|
|
</a>
|
|
{:else}
|
|
<div class="placeholder missing">
|
|
<Icon name="no-download" size="1.25rem" />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.thumb {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
a {
|
|
position: relative;
|
|
display: block;
|
|
overflow: hidden;
|
|
border-radius: var(--border-radius-default-small);
|
|
}
|
|
|
|
img,
|
|
video {
|
|
display: block;
|
|
width: 7rem;
|
|
height: 7rem;
|
|
object-fit: cover;
|
|
background-color: var(--color-default-shadow);
|
|
}
|
|
|
|
.play {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: var(--color-white);
|
|
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
|
|
}
|
|
|
|
.file {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
|
|
padding: 0.5rem 0.625rem;
|
|
|
|
font-size: 0.8125rem;
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
|
|
background-color: var(--color-primary-tint);
|
|
}
|
|
|
|
.placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
width: 7rem;
|
|
height: 7rem;
|
|
border-radius: var(--border-radius-default-small);
|
|
|
|
color: var(--color-text-secondary);
|
|
background-color: var(--color-default-shadow);
|
|
|
|
&.missing {
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0.75rem;
|
|
}
|
|
}
|
|
</style>
|