3057eb8eda
- Replace /audio/<token>/<v>.mp3 with /api/stream/<token>/<v>.mp3. - Stream bytes from private storage with Accept-Ranges and Content-Range support. - Keep old /audio route returning 404. - Update player page JS to use new stream endpoint.
201 lines
6.5 KiB
HTML
201 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Your Theme Song</title>
|
|
<style>
|
|
/*
|
|
Private customer player page.
|
|
Shows two audio players for Version A and Version B, plus approval
|
|
buttons or a revision note form depending on request status.
|
|
After the customer makes a choice, the controls are hidden and a
|
|
confirmation/waiting message is shown. The number of remaining
|
|
customer revisions is displayed when revisions are enabled.
|
|
*/
|
|
body{
|
|
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
|
|
background:#111827;
|
|
color:#f3f4f6;
|
|
margin:0;
|
|
padding:1rem;
|
|
line-height:1.5;
|
|
}
|
|
.container{
|
|
max-width:640px;
|
|
margin:0 auto;
|
|
background:#1f2937;
|
|
padding:1.5rem;
|
|
border-radius:1rem;
|
|
}
|
|
h1{color:#60a5fa;}
|
|
.player{
|
|
background:#111827;
|
|
padding:1rem;
|
|
border-radius:.5rem;
|
|
margin:1rem 0;
|
|
}
|
|
audio{width:100%;margin-top:.5rem;}
|
|
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;}
|
|
button{
|
|
flex:1;
|
|
min-width:120px;
|
|
padding:.8rem;
|
|
border:none;
|
|
border-radius:.5rem;
|
|
background:#3b82f6;
|
|
color:#fff;
|
|
font-weight:700;
|
|
cursor:pointer;
|
|
}
|
|
button:disabled{background:#374151;color:#9ca3af;cursor:not-allowed;}
|
|
button.selected{background:#10b981;}
|
|
button.both{background:#8b5cf6;}
|
|
button.revision{background:#f59e0b;color:#000;}
|
|
form{margin-top:1rem;}
|
|
textarea{
|
|
width:100%;
|
|
padding:.6rem;
|
|
border-radius:.5rem;
|
|
border:1px solid #374151;
|
|
background:#111827;
|
|
color:#f3f4f6;
|
|
box-sizing:border-box;
|
|
min-height:80px;
|
|
}
|
|
.status{
|
|
padding:.8rem;
|
|
background:#064e3b;
|
|
border-radius:.5rem;
|
|
margin-top:1rem;
|
|
}
|
|
.status.waiting{background:#3f3f46;}
|
|
.locked{
|
|
margin-top:1rem;
|
|
padding:1rem;
|
|
background:#111827;
|
|
border-radius:.5rem;
|
|
border:1px solid #374151;
|
|
}
|
|
.locked h2{margin-top:0;color:#fbbf24;}
|
|
.locked p{margin:.3rem 0;}
|
|
.lyrics{
|
|
background:#111827;
|
|
border:1px solid #374151;
|
|
border-radius:.5rem;
|
|
padding:1rem 1.25rem;
|
|
margin:1rem 0;
|
|
line-height:1.3;
|
|
font-size:1rem;
|
|
}
|
|
.lyrics h2{
|
|
margin-top:0;
|
|
margin-bottom:.5rem;
|
|
color:#fbbf24;
|
|
font-size:1.2rem;
|
|
}
|
|
.lyrics .section-label{
|
|
color:#60a5fa;
|
|
font-weight:700;
|
|
display:block;
|
|
margin-top:.5rem;
|
|
margin-bottom:.1rem;
|
|
}
|
|
.lyrics .lyric-line{
|
|
display:block;
|
|
line-height:1.3;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🎧 Your Custom Theme Song</h1>
|
|
<p>Hi {{ req.name }}! Listen to both versions and pick the one you want.</p>
|
|
|
|
{% if req.suno_lyrics %}
|
|
<div class="lyrics">
|
|
<h2>🎵 Song Lyrics</h2>
|
|
{% for line in req.suno_lyrics.splitlines() %}
|
|
{% set line = line.strip() %}
|
|
{% if line and not (line.startswith('[') and line.endswith(']')) %}
|
|
<span class="lyric-line">{{ line }}</span>
|
|
{% elif not line %}
|
|
<br>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Version A player -->
|
|
<div class="player">
|
|
<h3>Version A</h3>
|
|
<audio controls controlsList="nodownload" id="player-a"></audio>
|
|
</div>
|
|
|
|
<!-- Version B player -->
|
|
<div class="player">
|
|
<h3>Version B</h3>
|
|
<audio controls controlsList="nodownload" id="player-b"></audio>
|
|
</div>
|
|
|
|
<script>
|
|
(function(){
|
|
// Audio sources are assigned via JS so they do not appear in static HTML source.
|
|
document.getElementById('player-a').src = "{{ url_for('stream_audio', token=req.player_token, version='a') }}";
|
|
document.getElementById('player-b').src = "{{ url_for('stream_audio', token=req.player_token, version='b') }}";
|
|
})();
|
|
</script>
|
|
|
|
{% if req.status == 'revisions_requested' %}
|
|
<!-- Customer asked for changes; lock the page and tell them to wait -->
|
|
<div class="locked waiting">
|
|
<h2>📝 Revision Requested</h2>
|
|
<p>You asked for changes. We will generate a new version and update this page.</p>
|
|
<p><strong>Your note:</strong> {{ req.revision_note }}</p>
|
|
</div>
|
|
|
|
{% elif req.status in ['awaiting_payment','paid','delivered'] %}
|
|
<!-- Customer already picked a version; show their choice and payment instruction -->
|
|
<div class="locked">
|
|
<h2>✅ Choice Received</h2>
|
|
<p>You selected:</span> <strong>{% if req.customer_approved == 'both' %}Both Versions{% else %}Version {{ req.customer_approved.upper() }}{% endif %}</strong></p>
|
|
{% if req.status == 'awaiting_payment' %}
|
|
<p>Please return to the booth to finalize payment and collect your files.</p>
|
|
{% elif req.status == 'paid' %}
|
|
<p>Payment recorded. Your files are being prepared.</p>
|
|
{% elif req.status == 'delivered' %}
|
|
<p>Delivered! Check your email for the MP3 attachment(s).</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% else %}
|
|
<!-- Approval form: customer picks Version A, B, or both -->
|
|
<form method="POST" action="{{ url_for('approve', token=req.player_token) }}">
|
|
<input type="hidden" name="choice" id="choice">
|
|
<div class="actions">
|
|
<button type="submit" onclick="document.getElementById('choice').value='a'">I want Version A</button>
|
|
<button type="submit" onclick="document.getElementById('choice').value='b'">I want Version B</button>
|
|
<button type="submit" class="both" onclick="document.getElementById('choice').value='both'">I want both</button>
|
|
</div>
|
|
</form>
|
|
|
|
{% if revisions_left > 0 %}
|
|
<!-- Revision form: customer asks for changes -->
|
|
<form method="POST" action="{{ url_for('revise', token=req.player_token) }}">
|
|
<p style="color:#93c5fd;font-weight:600">Revisions remaining: {{ revisions_left }}</p>
|
|
<label for="revision_note">Or ask for changes:</label>
|
|
<textarea id="revision_note" name="revision_note" placeholder="e.g. make the chorus louder, swap a lyric..."></textarea>
|
|
<div class="actions">
|
|
<button type="submit" class="revision">Request Changes</button>
|
|
</div>
|
|
</form>
|
|
{% else %}
|
|
<p style="margin-top:1rem;color:#f87171;font-weight:600">No revisions remaining. Please speak to the booth operator if you need further changes.</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|