gabriel / musehub public
release-detail.ts typescript
108 lines 4.1 KB
Raw
sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 8 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 14 commits
sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 8 days ago
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 8 days ago
sha256:408916fc5973ba59c6e4eebaa80ebdcc801c0a63205651e25009d11548f79454 chore: bump version to 0.2.0.dev2 — nightly.2, matching muse Sonnet 4.6 patch 11 days ago
sha256:d035733f21ccff27735fddebfbbe0ed24565a32a22db8de5885402262671ecd2 chore: bump version to 0.2.0rc15 for musehub#113 fix release Sonnet 4.6 patch 14 days ago
sha256:0032d6cfa33bc3c8367436ad768e7dd0e339b4332153160247da8266cb5fa352 Merge branch 'task/version-tags-phase3-server' into dev Human 17 days ago
sha256:4669620efda9ff41c55bdefd1f7bfe1c239d468428744c84ead9957e5a003a53 merge: rescue snapshot-recovery hardening (c00aa21d) into d… Opus 4.8 minor ⚠ 29 days ago
sha256:a59da49c4611b970fc4b6ae48678ce4943261c213a07ddbd73ce9201df869b4a fix: remove false-positive proposal_comments index drop fro… Sonnet 4.6 patch 33 days ago
sha256:0a240d6dbff234f07d98a28a4a9a68db702f3f9ff9260196f24219bdb1c0b6f3 feat: render markdown mists as HTML with heading anchor links Sonnet 4.6 patch 34 days ago
sha256:24a7d47486ebc4ebd1832830580e177ec6f877b48dced8c000e198cdec4ce9d6 Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:b9ff931d147e0114a1f17060f415b89ed551c170a91ff226c70437aa5c85f9ee Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:d1122d21e73471879b460037b22c0b50fded7c423444a176f248428f75dac39c Merge 'task/fix-issue-pagination-cursor' into 'dev' — propo… Human 35 days ago
sha256:01e18975e73d2b3cd5b6db7929c895bef9aa6e0d4391dc5b2adfc548b41318dd Merge 'feat/adding-debug-logs-to-staging' into 'dev' — prop… Human 35 days ago
sha256:6b1949fc2797ca4c1936a637a4cbfec828ef56cf52398a2e74ca3c4f494e728f fix: use wire_bytes not mpack_bytes_raw in compute_object_b… Sonnet 4.6 patch 48 days ago
sha256:b99f2455dc346966d040133f5203297e6e3ef5803a93728a2c30568d0a0f7583 rename: delta_add → delta_upsert across wire format, models… Sonnet 4.6 patch 50 days ago