160 lines
3.3 KiB
Svelte
160 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import Icon from "#lib/components/ui/Icon.svelte";
|
|
import { formatDuration } from "#lib/format/duration.js";
|
|
import { t } from "#lib/i18n/locale.svelte.js";
|
|
import { claimPlayback, releasePlayback } from "#lib/media/playback.js";
|
|
|
|
interface Props {
|
|
own: boolean;
|
|
title: string;
|
|
url: string;
|
|
}
|
|
|
|
let { url, title, own }: Props = $props();
|
|
|
|
let element = $state<HTMLAudioElement>();
|
|
let currentTime = $state(0);
|
|
let duration = $state(0);
|
|
let paused = $state(true);
|
|
|
|
const progress = $derived(duration > 0 ? currentTime / duration : 0);
|
|
|
|
function toggle() {
|
|
if (!element) {
|
|
return;
|
|
}
|
|
if (paused) {
|
|
element.play().catch(() => undefined);
|
|
} else {
|
|
element.pause();
|
|
}
|
|
}
|
|
|
|
function seek(event: PointerEvent) {
|
|
if (!(element && duration > 0)) {
|
|
return;
|
|
}
|
|
const rect = event.currentTarget as HTMLElement;
|
|
const ratio =
|
|
(event.clientX - rect.getBoundingClientRect().left) / rect.offsetWidth;
|
|
element.currentTime = Math.min(1, Math.max(0, ratio)) * duration;
|
|
}
|
|
</script>
|
|
|
|
<div class="Audio" class:own>
|
|
<button
|
|
aria-label={paused ? t("ui.play") : t("ui.pause")}
|
|
class="toggle"
|
|
onclick={toggle}
|
|
type="button"
|
|
>
|
|
<Icon name={paused ? "play" : "pause"} size="1.625rem" />
|
|
</button>
|
|
<div class="content">
|
|
<div class="title">{title}</div>
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="seekline" onpointerdown={seek}>
|
|
<div class="track"></div>
|
|
<div class="fill" style:width={`${Math.round(progress * 100)}%`}></div>
|
|
</div>
|
|
<div class="meta">
|
|
{formatDuration(currentTime)}
|
|
/ {formatDuration(duration)}
|
|
</div>
|
|
</div>
|
|
<!-- biome-ignore lint/a11y/useMediaCaption: archived audio track has no captions -->
|
|
<audio
|
|
onended={() => element && releasePlayback(element)}
|
|
onplay={() => element && claimPlayback(element)}
|
|
preload="metadata"
|
|
src={url}
|
|
bind:this={element}
|
|
bind:currentTime
|
|
bind:duration
|
|
bind:paused
|
|
></audio>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.Audio {
|
|
--active: var(--color-primary);
|
|
--toggle-fg: var(--color-white);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
|
|
min-width: 15rem;
|
|
padding: 0.1875rem 0;
|
|
|
|
&.own {
|
|
--active: var(--color-white);
|
|
--toggle-fg: var(--color-background-own);
|
|
}
|
|
}
|
|
|
|
.toggle {
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
|
|
color: var(--toggle-fg);
|
|
|
|
background-color: var(--active);
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.title {
|
|
overflow: hidden;
|
|
|
|
font-weight: var(--font-weight-medium);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.seekline {
|
|
cursor: pointer;
|
|
touch-action: none;
|
|
|
|
position: relative;
|
|
height: 1rem;
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
.track,
|
|
.fill {
|
|
position: absolute;
|
|
top: 7px;
|
|
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.track {
|
|
width: 100%;
|
|
background-color: var(--color-interactive-inactive);
|
|
}
|
|
|
|
.fill {
|
|
background-color: var(--active);
|
|
}
|
|
|
|
.meta {
|
|
font-size: 0.8125rem;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
</style>
|