themes-y2k/waveform_player.templ
Alex Dunmow 49f9c90589 initial: theme plugin y2k
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously
an unversioned directory inside ~/src/blockninja-themes/y2k.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-06 14:11:46 +08:00

50 lines
1.7 KiB
Plaintext

package main
// waveformPlayerComponent renders a Soundcloud-style horizontal player. The
// canvas waveform is filled client-side from the audio source using WebAudio
// peak decode (v0.1 strategy noted in the spec's open questions).
templ waveformPlayerComponent(data WaveformPlayerData) {
<figure
class="y2k-bevel y2k-chrome-bg rounded-xl overflow-hidden flex items-stretch gap-4 p-3 my-4"
data-block-key="y2k:waveform_player"
>
<div class="w-20 h-20 shrink-0 y2k-image-frame overflow-hidden bg-muted">
if data.CoverImage != "" {
<img src={ data.CoverImage } alt={ data.TrackTitle } class="w-full h-full object-cover"/>
} else {
<svg viewBox="0 0 24 24" class="w-full h-full text-muted-foreground p-4" fill="currentColor" aria-hidden="true">
<path d="M9 19V6l11-3v13"/>
</svg>
}
</div>
<div class="flex-1 min-w-0 flex flex-col justify-between gap-2">
<figcaption class="flex items-baseline justify-between gap-3 min-w-0">
<span class="y2k-heading text-base truncate text-foreground">{ trackTitleOr(data.TrackTitle) }</span>
if data.Artist != "" {
<span class="text-xs uppercase tracking-wider text-muted-foreground shrink-0">{ data.Artist }</span>
}
</figcaption>
<canvas
class="w-full h-12 bg-muted/40 rounded"
data-y2k-waveform
data-audio-url={ data.AudioURL }
aria-label="audio waveform"
></canvas>
if data.AudioURL != "" {
<audio controls preload="none" class="w-full" src={ data.AudioURL }>
Your browser does not support the audio element.
</audio>
} else {
<p class="text-xs text-muted-foreground">No audio source configured.</p>
}
</div>
</figure>
}
func trackTitleOr(s string) string {
if s == "" {
return "untitled track"
}
return s
}