Rewrite share player page UX.
Makes /play a narrative artifact page with a clean song title, one-line transformation hook, single Play/Pause control, progress bar, minimal metadata, and a single CTA.
This commit is contained in:
b1rdmania
@@ -106,16 +106,7 @@
|
||||
background: linear-gradient(90deg, transparent, var(--color-border), transparent);
|
||||
}
|
||||
|
||||
#status {
|
||||
margin: calc(var(--spacing-unit) * 2) 0 0 0;
|
||||
padding: calc(var(--spacing-unit) * 2);
|
||||
background: var(--color-surface);
|
||||
border-left: 3px solid var(--color-accent-primary);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-md);
|
||||
font-size: 14px;
|
||||
min-height: 24px;
|
||||
}
|
||||
/* Share page: no status box */
|
||||
|
||||
button {
|
||||
background: var(--color-surface);
|
||||
@@ -225,30 +216,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: calc(var(--spacing-unit) * 2);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.actions a {
|
||||
color: rgba(0, 255, 136, 0.85);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.actions a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.backpill {
|
||||
margin-left: auto;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
/* Share page: single CTA only */
|
||||
|
||||
/* Progress (matches main page style) */
|
||||
.progress-container {
|
||||
@@ -343,50 +311,59 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 class="page-title">MOTIF</h1>
|
||||
<p class="tagline">Shared chiptune player</p>
|
||||
<div class="motif-stage" style="border-color: rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-lg);">
|
||||
<div class="motif-grid" style="gap: 14px;">
|
||||
<!-- 1. Source Song Title -->
|
||||
<h1 id="songTitle" style="margin:0; font-size: 28px; line-height: 1.15; font-weight: 800; color: var(--color-text); letter-spacing: 0.01em;">
|
||||
Loading…
|
||||
</h1>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<h3 class="section-title">Wario synthesis engine</h3>
|
||||
<p class="section-subtitle">The same Game Boy/NES render you hear on the main page.</p>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<!-- 2. Transformation Description -->
|
||||
<p id="transformLine" style="margin:0; color: rgba(255,255,255,0.72); font-size: 14px;">
|
||||
Re-synthesised as NES-era chiptune using Motif
|
||||
</p>
|
||||
|
||||
<div class="motif-stage">
|
||||
<div class="motif-grid">
|
||||
<div class="motif-header">
|
||||
<h2 class="motif-title" id="title">Loading…</h2>
|
||||
<p class="motif-kicker">Tap play to run the shared MIDI through the Wario engine.</p>
|
||||
<!-- 3. Single Play/Pause Control -->
|
||||
<div style="display:flex; justify-content:center; margin-top: 6px;">
|
||||
<button id="playToggleBtn" class="primary" disabled style="min-width: 220px; padding: 14px 18px; font-size: 15px;">
|
||||
Play
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="motif-controls">
|
||||
<button id="playBtn" class="primary" disabled>Play</button>
|
||||
<button id="stopBtn" disabled>Stop</button>
|
||||
<div class="volume-control">
|
||||
<label for="volume">Volume</label>
|
||||
<input id="volume" type="range" min="0" max="1" step="0.01" value="0.7" />
|
||||
</div>
|
||||
<span class="backpill" id="shareHint">/play</span>
|
||||
</div>
|
||||
|
||||
<div id="status">Loading…</div>
|
||||
|
||||
<div class="progress-container" id="playProgressContainer">
|
||||
<!-- 4. Progress Bar -->
|
||||
<div class="progress-container" id="playProgressContainer" style="display:block; margin-top: 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08);">
|
||||
<div class="progress-time">
|
||||
<span id="playCurrentTime">0:00</span>
|
||||
<span id="playDuration">0:00</span>
|
||||
</div>
|
||||
<div class="progress-bar-wrapper">
|
||||
<div class="progress-bar-wrapper" style="padding: 10px 0;">
|
||||
<input id="playProgressBar" class="progress-bar" type="range" min="0" max="100" value="0" step="0.1" />
|
||||
<div id="playProgressFill" class="progress-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a id="generateOwn" href="/">Generate your own</a>
|
||||
<a href="/" aria-label="Back to MOTIF home">Home</a>
|
||||
<!-- 5. Status Text Replacement (static, non-interactive) -->
|
||||
<div style="margin-top: 2px; font-size: 13px; color: rgba(255,255,255,0.72);">
|
||||
Procedural playback · No samples · Deterministic
|
||||
</div>
|
||||
|
||||
<!-- 6. Minimal metadata line (secondary, low contrast) -->
|
||||
<div style="font-size: 12px; color: rgba(255,255,255,0.52); display:flex; gap: 14px; flex-wrap: wrap;">
|
||||
<span>Engine: Wario (Game Boy / NES)</span>
|
||||
<span>Source: MIDI structure</span>
|
||||
</div>
|
||||
|
||||
<!-- Optional volume (acceptable) -->
|
||||
<div class="volume-control" style="min-width: 0; margin-top: 4px; opacity: 0.85;">
|
||||
<label for="volume" style="min-width: auto;">Volume</label>
|
||||
<input id="volume" type="range" min="0" max="1" step="0.01" value="0.7" />
|
||||
</div>
|
||||
|
||||
<!-- 7. Primary CTA (single) -->
|
||||
<div style="margin-top: 10px;">
|
||||
<a id="generateOwn" href="/" style="display:inline-block; color: rgba(0,255,136,0.92); text-decoration:none; font-weight: 650;">
|
||||
Generate your own →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+98
-59
@@ -30,32 +30,60 @@ function buildMidiUrlFromParams(): { midiUrl: string | null; title: string } {
|
||||
return { midiUrl: null, title };
|
||||
}
|
||||
|
||||
async function copyToClipboard(text: string): Promise<void> {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return;
|
||||
function titleCase(input: string): string {
|
||||
const small = new Set(['a', 'an', 'and', 'as', 'at', 'but', 'by', 'for', 'from', 'in', 'into', 'nor', 'of', 'on', 'or', 'per', 'the', 'to', 'via', 'with']);
|
||||
const words = input
|
||||
.split(/\s+/g)
|
||||
.filter(Boolean)
|
||||
.map((w) => w.trim());
|
||||
return words
|
||||
.map((word, idx) => {
|
||||
if (/^[A-Z0-9]+$/.test(word)) return word; // keep acronyms/IDs
|
||||
const lower = word.toLowerCase();
|
||||
if (idx !== 0 && small.has(lower)) return lower;
|
||||
return lower.charAt(0).toUpperCase() + lower.slice(1);
|
||||
})
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
ta.style.position = 'fixed';
|
||||
ta.style.left = '-9999px';
|
||||
ta.style.top = '0';
|
||||
document.body.appendChild(ta);
|
||||
ta.focus();
|
||||
ta.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(ta);
|
||||
function cleanLooseTitle(raw: string): string {
|
||||
return (raw || '')
|
||||
.replace(/\.mid$/i, '')
|
||||
.replace(/[_]+/g, ' ')
|
||||
.replace(/[.]+/g, ' ')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
}
|
||||
|
||||
function formatDisplayTitle(raw: string): { display: string; prefill: string } {
|
||||
const cleaned = cleanLooseTitle(raw);
|
||||
// If we have common separators "Artist - Title" or "Artist — Title", invert to "Title — Artist"
|
||||
const sepMatch = cleaned.match(/^(.+?)\s*(?:—|-)\s*(.+)$/);
|
||||
if (sepMatch) {
|
||||
const left = titleCase(sepMatch[1].trim());
|
||||
const right = titleCase(sepMatch[2].trim());
|
||||
// Heuristic: if left looks like an artist, invert (most common file naming)
|
||||
const display = `${right} — ${left}`;
|
||||
return { display, prefill: `${right} ${left}`.trim() };
|
||||
}
|
||||
|
||||
// Dot-prefix heuristic: "ARTIST.Title" becomes "Title — Artist"
|
||||
const dotPrefix = raw.match(/^([A-Za-z]{2,20})[._\s]+(.+)$/);
|
||||
if (dotPrefix && dotPrefix[1] && dotPrefix[2]) {
|
||||
const artist = titleCase(cleanLooseTitle(dotPrefix[1]));
|
||||
const title = titleCase(cleanLooseTitle(dotPrefix[2]));
|
||||
if (artist && title) return { display: `${title} — ${artist}`, prefill: `${title} ${artist}`.trim() };
|
||||
}
|
||||
|
||||
const t = titleCase(cleaned || 'Shared Motif');
|
||||
return { display: t, prefill: t };
|
||||
}
|
||||
|
||||
async function main(): Promise<void> {
|
||||
const titleEl = qs('title');
|
||||
const statusEl = qs('status');
|
||||
const playBtn = qs('playBtn') as HTMLButtonElement;
|
||||
const stopBtn = qs('stopBtn') as HTMLButtonElement;
|
||||
const titleEl = qs('songTitle');
|
||||
const playBtn = qs('playToggleBtn') as HTMLButtonElement;
|
||||
const volumeEl = qs('volume') as HTMLInputElement;
|
||||
const generateOwn = qs('generateOwn') as HTMLAnchorElement;
|
||||
const shareHint = qs('shareHint');
|
||||
const progressContainer = qs('playProgressContainer') as HTMLElement;
|
||||
const progressBar = qs('playProgressBar') as HTMLInputElement;
|
||||
const progressFill = qs('playProgressFill') as HTMLElement;
|
||||
@@ -64,16 +92,14 @@ async function main(): Promise<void> {
|
||||
|
||||
const { midiUrl: u, title } = buildMidiUrlFromParams();
|
||||
|
||||
titleEl.textContent = title;
|
||||
shareHint.textContent = u ? 'Ready' : 'Missing MIDI URL';
|
||||
const formatted = formatDisplayTitle(title);
|
||||
titleEl.textContent = formatted.display;
|
||||
|
||||
// Set CTA back to home, prefilling search if we have a title.
|
||||
generateOwn.href = title ? `/?song=${encodeURIComponent(title)}` : '/';
|
||||
generateOwn.href = formatted.prefill ? `/?song=${encodeURIComponent(formatted.prefill)}` : '/';
|
||||
|
||||
if (!u) {
|
||||
statusEl.textContent = 'Missing link data (u=...).';
|
||||
playBtn.disabled = true;
|
||||
stopBtn.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -81,27 +107,24 @@ async function main(): Promise<void> {
|
||||
const motifEngine = new MotifEngine();
|
||||
let events: NoteEvent[] | null = null;
|
||||
let isPlaying = false;
|
||||
let isGenerated = false;
|
||||
let progressInterval: number | null = null;
|
||||
let durationSec = 0;
|
||||
let resumeProgress = 0;
|
||||
|
||||
statusEl.textContent = 'Loading MIDI…';
|
||||
try {
|
||||
const buf = await midiService.fetchMIDI(u);
|
||||
if (!buf) throw new Error('Failed to fetch MIDI');
|
||||
events = MIDIParser.parseMIDI(buf);
|
||||
statusEl.textContent = 'Ready. Tap Play.';
|
||||
playBtn.disabled = false;
|
||||
} catch (e) {
|
||||
statusEl.textContent = `Load error: ${e instanceof Error ? e.message : 'Unknown error'}`;
|
||||
playBtn.disabled = true;
|
||||
stopBtn.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
function setUiPlaying(playing: boolean): void {
|
||||
isPlaying = playing;
|
||||
playBtn.disabled = playing;
|
||||
stopBtn.disabled = !playing;
|
||||
playBtn.textContent = playing ? 'Pause' : 'Play';
|
||||
}
|
||||
|
||||
function formatTime(seconds: number): string {
|
||||
@@ -116,6 +139,17 @@ async function main(): Promise<void> {
|
||||
progressBar.value = (progress * 100).toString();
|
||||
progressFill.style.width = `${progress * 100}%`;
|
||||
currentTimeEl.textContent = formatTime(current);
|
||||
|
||||
// Auto-pause at end
|
||||
if (durationSec > 0 && progress >= 0.999) {
|
||||
resumeProgress = 0;
|
||||
motifEngine.stop();
|
||||
setUiPlaying(false);
|
||||
stopProgressUpdates();
|
||||
progressBar.value = '100';
|
||||
progressFill.style.width = '100%';
|
||||
currentTimeEl.textContent = formatTime(durationSec);
|
||||
}
|
||||
}
|
||||
|
||||
function startProgressUpdates(): void {
|
||||
@@ -135,59 +169,64 @@ async function main(): Promise<void> {
|
||||
motifEngine.setVolume(vol);
|
||||
});
|
||||
|
||||
stopBtn.addEventListener('click', () => {
|
||||
motifEngine.stop();
|
||||
setUiPlaying(false);
|
||||
stopProgressUpdates();
|
||||
statusEl.textContent = 'Stopped.';
|
||||
});
|
||||
|
||||
const seekHandler = (e: Event) => {
|
||||
const p = Number.parseFloat((e.target as HTMLInputElement).value) / 100;
|
||||
if (!isGenerated) {
|
||||
resumeProgress = p;
|
||||
progressFill.style.width = `${p * 100}%`;
|
||||
currentTimeEl.textContent = formatTime(p * Math.max(0, durationSec));
|
||||
return;
|
||||
}
|
||||
if (isPlaying) {
|
||||
motifEngine.seek(p);
|
||||
updateProgress();
|
||||
} else {
|
||||
resumeProgress = p;
|
||||
progressFill.style.width = `${p * 100}%`;
|
||||
currentTimeEl.textContent = formatTime(p * durationSec);
|
||||
}
|
||||
};
|
||||
progressBar.addEventListener('input', seekHandler);
|
||||
progressBar.addEventListener('change', seekHandler);
|
||||
|
||||
playBtn.addEventListener('click', async () => {
|
||||
if (!events || isPlaying) return;
|
||||
try {
|
||||
setUiPlaying(true);
|
||||
statusEl.textContent = 'Generating…';
|
||||
if (!events) return;
|
||||
|
||||
// Pause (implemented as stop + remembered position)
|
||||
if (isPlaying) {
|
||||
resumeProgress = motifEngine.getProgress();
|
||||
motifEngine.stop();
|
||||
setUiPlaying(false);
|
||||
stopProgressUpdates();
|
||||
// Keep progress UI where it was
|
||||
progressBar.value = (resumeProgress * 100).toString();
|
||||
progressFill.style.width = `${resumeProgress * 100}%`;
|
||||
currentTimeEl.textContent = formatTime(resumeProgress * durationSec);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// First play generates the artifact (deterministically from MIDI structure).
|
||||
if (!isGenerated) {
|
||||
// Match main page "Generate & Play": procedural role-mapping → existing SynthesisEngine.
|
||||
await motifEngine.generateFromMIDI(events, 'procedural');
|
||||
motifEngine.setVolume(Number.parseFloat(volumeEl.value));
|
||||
durationSec = motifEngine.getDuration();
|
||||
durationEl.textContent = formatTime(durationSec);
|
||||
currentTimeEl.textContent = '0:00';
|
||||
progressBar.value = '0';
|
||||
progressFill.style.width = '0%';
|
||||
progressContainer.style.display = 'block';
|
||||
isGenerated = true;
|
||||
}
|
||||
|
||||
statusEl.textContent = 'Playing…';
|
||||
setUiPlaying(true);
|
||||
await motifEngine.play();
|
||||
// Seek to remembered position (for pause/resume and scrub-before-play)
|
||||
if (resumeProgress > 0) motifEngine.seek(resumeProgress);
|
||||
startProgressUpdates();
|
||||
} catch (e) {
|
||||
setUiPlaying(false);
|
||||
stopProgressUpdates();
|
||||
statusEl.textContent = `Play error: ${e instanceof Error ? e.message : 'Unknown error'}`;
|
||||
}
|
||||
});
|
||||
|
||||
// Small quality-of-life: let user click the header “Ready” to copy link.
|
||||
shareHint.addEventListener('click', async () => {
|
||||
try {
|
||||
await copyToClipboard(window.location.href);
|
||||
shareHint.textContent = 'Link copied';
|
||||
window.setTimeout(() => (shareHint.textContent = 'Ready'), 900);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
});
|
||||
shareHint.style.cursor = 'pointer';
|
||||
shareHint.title = 'Click to copy link';
|
||||
}
|
||||
|
||||
void main();
|
||||
|
||||
Reference in New Issue
Block a user