gabriel / musehub public
release-detail.ts typescript
108 lines 4.1 KB
Raw
sha256:3c58668648c7323bb9f5c6881cfe6a3f14fc93fcb73b537d253732952a5bf8bf chore: bump version to 0.2.0rc12 Sonnet 4.6 patch 9 days ago
1 /**
2 * release-detail.ts — Release detail page module.
3 *
4 * Responsibilities:
5 * 1. Wire the native <audio> element to custom play/pause, progress, time controls.
6 * 2. Gracefully hide the player and show the error state when audio fails to load.
7 * 3. Animate asset rows on scroll (IntersectionObserver).
8 * 4. Progress bar click-to-seek.
9 */
10
11 // ── Time formatter ────────────────────────────────────────────────────────────
12
13 function fmtTime(s: number): string {
14 if (!isFinite(s) || s < 0) return "—";
15 return `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
16 }
17
18 // ── Native audio player ───────────────────────────────────────────────────────
19
20 function initAudioPlayer(): void {
21 const audio = document.getElementById("rd-audio") as HTMLAudioElement | null;
22 const playBtn = document.getElementById("rd-play-btn") as HTMLButtonElement | null;
23 const progWrap = document.getElementById("rd-progress-wrap") as HTMLElement | null;
24 const progFill = document.getElementById("rd-progress-fill") as HTMLElement | null;
25 const timeEl = document.getElementById("rd-time") as HTMLElement | null;
26 const player = document.getElementById("rd-player") as HTMLElement | null;
27 const errorEl = document.getElementById("rd-audio-error") as HTMLElement | null;
28
29 if (!audio) return;
30
31 // Enable controls once audio is ready
32 audio.addEventListener("canplaythrough", () => {
33 if (playBtn) playBtn.disabled = false;
34 if (timeEl) timeEl.textContent = `0:00 / ${fmtTime(audio.duration)}`;
35 });
36
37 // Update progress and time while playing
38 audio.addEventListener("timeupdate", () => {
39 const pct = audio.duration ? (audio.currentTime / audio.duration) * 100 : 0;
40 if (progFill) progFill.style.width = `${pct}%`;
41 if (timeEl) timeEl.textContent = `${fmtTime(audio.currentTime)} / ${fmtTime(audio.duration)}`;
42 });
43
44 // Reset play button when track ends
45 audio.addEventListener("ended", () => {
46 if (playBtn) playBtn.textContent = "▶";
47 });
48
49 // Graceful error state — hide player, show error banner
50 audio.addEventListener("error", () => {
51 if (player) player.style.display = "none";
52 if (errorEl) errorEl.classList.add("visible");
53 if (timeEl) timeEl.textContent = "—";
54 });
55
56 // Play / Pause toggle
57 if (playBtn) {
58 playBtn.addEventListener("click", () => {
59 if (audio.paused) {
60 audio.play().catch(() => {
61 if (player) player.style.display = "none";
62 if (errorEl) errorEl.classList.add("visible");
63 });
64 playBtn.textContent = "⏸";
65 } else {
66 audio.pause();
67 playBtn.textContent = "▶";
68 }
69 });
70 }
71
72 // Click on progress bar to seek
73 if (progWrap) {
74 progWrap.addEventListener("click", (e: MouseEvent) => {
75 if (!audio.duration) return;
76 const rect = progWrap.getBoundingClientRect();
77 audio.currentTime = ((e.clientX - rect.left) / rect.width) * audio.duration;
78 });
79 }
80
81 // Start loading
82 audio.load();
83 }
84
85 // ── Asset row entrance animations ─────────────────────────────────────────────
86
87 function animateAssets(): void {
88 const rows = document.querySelectorAll<HTMLElement>(".rd-asset-row, .rd-dl-card");
89 if (!rows.length) return;
90
91 const io = new IntersectionObserver((entries) => {
92 entries.forEach((entry, i) => {
93 if (!entry.isIntersecting) return;
94 const el = entry.target as HTMLElement;
95 el.style.animationDelay = `${i * 40}ms`;
96 io.unobserve(el);
97 });
98 }, { threshold: 0.05 });
99
100 rows.forEach(row => io.observe(row));
101 }
102
103 // ── Entry point ───────────────────────────────────────────────────────────────
104
105 export function initReleaseDetail(_data?: Record<string, unknown>): void {
106 initAudioPlayer();
107 animateAssets();
108 }
File History 1 commit
sha256:35d76015db2541686c33edd44343ea2d9f751325b4a5556cc9c4c9c0f84edbbe chore: bump version to 0.2.0rc12 Sonnet 4.6 patch 8 days ago