Add the submission pipeline and the review loop
Steps 3 and 4 of the build order. A member can now upload a song, watch it convert, publish it, and review what everyone else has published. Pipeline: - ffprobe reads tags synchronously at submit so prefill never races typing; ffmpeg converts to Opus in the background, two at a time - ffmpeg succeeding is the validation — no container sniffing - publish moves the file inside the transaction, so a song row and its .ogg appear together or neither does - five submissions per rolling 24h, failures excluded Reviews and the reveal rule: - the queue is unreviewed songs only, oldest first, never your own - other people's reviews and the average are withheld in the query, not the template — a hidden average is never sent - 30 minutes to edit or delete your own review, enforced in the WHERE clause - deleting the last review unlocks the song for its submitter again The waiting page has one button: the metadata form autosaves after a pause in typing, and Julkaise submits it and publishes in the same request, so nothing is lost without JS. Genres store an English code and render a Finnish label.
This commit is contained in:
Esa Kataja
@@ -1,5 +0,0 @@
|
||||
{{define "content"}}
|
||||
<h1>Jono</h1>
|
||||
<p class="muted">Jono on tyhjä — kappaleita ei vielä voi lähettää. Tämä sivu täyttyy kun
|
||||
lähetysputki ja arvostelut ovat valmiit.</p>
|
||||
{{end}}
|
||||
@@ -5,6 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{.Title}} — Levyraati</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<script src="/static/htmx.min.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@@ -14,6 +15,8 @@
|
||||
<a href="/admin">Ylläpito</a>
|
||||
{{else if .Member}}
|
||||
<a href="/">Jono</a>
|
||||
<a href="/songs">Kappaleet</a>
|
||||
<a href="/submit">Lähetä</a>
|
||||
<span class="avatar" title="{{.Member.Name}}">{{.Member.Initials}}</span>
|
||||
<form method="post" action="/logout"><button class="link">Kirjaudu ulos</button></form>
|
||||
{{else}}
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
{{define "player"}}
|
||||
<audio controls preload="none" src="/audio/{{.ID}}" class="player"></audio>
|
||||
{{end}}
|
||||
|
||||
{{define "songrow"}}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="/songs/{{.ID}}">{{.Title}}</a>
|
||||
<span class="muted"> — {{.Artist}}</span>
|
||||
{{if .Own}}<span class="tag">oma</span>{{else if .Reviewed}}<span class="tag done">arvosteltu</span>{{end}}
|
||||
</td>
|
||||
<td class="nowrap">{{.GenreLabel}}</td>
|
||||
<td class="nowrap">{{.Length}}</td>
|
||||
<td class="nowrap">
|
||||
{{if .Average}}<strong>{{score .Average}}</strong> <span class="muted">({{.ReviewCount}})</span>
|
||||
{{else if .ReviewCount}}<span class="muted">{{.ReviewCount}} arvostelua</span>
|
||||
{{else}}<span class="muted">—</span>{{end}}
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
|
||||
{{define "scorefield"}}
|
||||
<label>Pisteet
|
||||
<span class="scorerow">
|
||||
<input type="range" name="score" min="1" max="100" value="{{.}}"
|
||||
oninput="this.nextElementSibling.value = this.value">
|
||||
<output>{{.}}</output>
|
||||
</span>
|
||||
</label>
|
||||
{{end}}
|
||||
@@ -0,0 +1,18 @@
|
||||
{{define "content"}}
|
||||
<h1>Jono</h1>
|
||||
|
||||
{{if .Data.Items}}
|
||||
<p class="muted">Arvostelemattomat kappaleet, vanhimmasta uusimpaan. Pisteet paljastuvat kun
|
||||
olet kirjoittanut oman arvostelusi.</p>
|
||||
<table>
|
||||
<thead><tr><th>Kappale</th><th>Genre</th><th>Kesto</th><th>Arvostelut</th></tr></thead>
|
||||
<tbody>
|
||||
{{range .Data.Items}}{{template "songrow" .}}{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{with .Data.NextCursor}}<p><a href="/?cursor={{.}}">Lisää →</a></p>{{end}}
|
||||
{{else}}
|
||||
<p class="empty">Jono on tyhjä. Olet arvostellut kaiken, mitä muut ovat lähettäneet.</p>
|
||||
<p><a href="/submit">Lähetä kappale</a> tai selaa <a href="/songs">kaikkia kappaleita</a>.</p>
|
||||
{{end}}
|
||||
{{end}}
|
||||
@@ -0,0 +1,105 @@
|
||||
{{define "content"}}
|
||||
{{$s := .Data}}
|
||||
<h1>{{$s.Title}}</h1>
|
||||
<p class="byline">
|
||||
{{$s.Artist}} · {{$s.GenreLabel}} · {{$s.Length}} ·
|
||||
lähettänyt {{$s.Submitter}} {{fidate $s.CreatedAt}}
|
||||
{{if $s.Own}}<span class="tag">oma kappale</span>{{end}}
|
||||
</p>
|
||||
|
||||
{{template "player" $s}}
|
||||
|
||||
{{with $s.Description}}<p class="intro">{{.}}</p>{{end}}
|
||||
{{with $s.SourceURL}}<p class="muted"><a href="{{.}}" rel="noreferrer">Kuuntele YouTubessa</a></p>{{end}}
|
||||
|
||||
{{if $s.CanEdit}}
|
||||
<details class="editbox">
|
||||
<summary>Muokkaa tietoja</summary>
|
||||
<form method="post" action="/songs/{{$s.ID}}" class="stack">
|
||||
<label>Nimi <input name="title" value="{{$s.Title}}" maxlength="100" required></label>
|
||||
<label>Esittäjä <input name="artist" value="{{$s.Artist}}" maxlength="100" required></label>
|
||||
<label>Genre
|
||||
<select name="genre" required>
|
||||
{{$current := $s.Genre}}
|
||||
{{range $s.Genres}}
|
||||
<option value="{{.Code}}" {{if eq .Code $current}}selected{{end}}>{{.Label}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</label>
|
||||
<label>Esittely <textarea name="description" rows="4" maxlength="2000">{{$s.Description}}</textarea></label>
|
||||
<button type="submit">Tallenna</button>
|
||||
</form>
|
||||
<form method="post" action="/songs/{{$s.ID}}/delete"
|
||||
onsubmit="return confirm('Poistetaanko kappale lopullisesti?')">
|
||||
<button type="submit" class="danger">Poista kappale</button>
|
||||
</form>
|
||||
<p class="muted small">Muokkaus ja poisto ovat mahdollisia vain ennen ensimmäistä arvostelua.</p>
|
||||
</details>
|
||||
{{else if $s.Own}}
|
||||
<p class="muted small">Kappaletta on jo arvosteltu, joten tietoja ei voi enää muuttaa.</p>
|
||||
{{end}}
|
||||
|
||||
<section>
|
||||
{{if $s.CanReview}}
|
||||
<h2>Arvostele</h2>
|
||||
<form method="post" action="/songs/{{$s.ID}}/review" class="stack">
|
||||
{{template "scorefield" 50}}
|
||||
<label>Arvostelu
|
||||
<textarea name="text" rows="6" maxlength="5000" required
|
||||
placeholder="Mitä kuulit?"></textarea>
|
||||
</label>
|
||||
<button type="submit">Tallenna arvostelu</button>
|
||||
</form>
|
||||
<p class="muted small">Muiden arvostelut ja pisteet paljastuvat kun olet tallentanut omasi.
|
||||
Voit muokata tai poistaa arvostelusi 30 minuutin ajan.</p>
|
||||
{{else if $s.ViewerReview}}
|
||||
<h2>Oma arvostelusi</h2>
|
||||
{{with $s.ViewerReview}}
|
||||
{{if .CanEdit}}
|
||||
<form method="post" action="/reviews/{{.ID}}" class="stack">
|
||||
<input type="hidden" name="from" value="/songs/{{$s.ID}}">
|
||||
{{template "scorefield" .Score}}
|
||||
<label>Arvostelu
|
||||
<textarea name="text" rows="6" maxlength="5000" required>{{.Text}}</textarea>
|
||||
</label>
|
||||
<button type="submit">Päivitä</button>
|
||||
</form>
|
||||
<form method="post" action="/reviews/{{.ID}}/delete"
|
||||
onsubmit="return confirm('Poistetaanko arvostelu?')">
|
||||
<input type="hidden" name="from" value="/songs/{{$s.ID}}">
|
||||
<button type="submit" class="danger">Poista arvostelu</button>
|
||||
</form>
|
||||
<p class="muted small">Muokkausaika päättyy {{fidate .EditableUntil}}.</p>
|
||||
{{else}}
|
||||
<p class="score">{{.Score}}</p>
|
||||
<p>{{.Text}}</p>
|
||||
<p class="muted small">Muokkausaika on päättynyt.</p>
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Arvostelut{{if $s.ReviewCount}} ({{$s.ReviewCount}}){{end}}</h2>
|
||||
|
||||
{{if $s.Revealed}}
|
||||
{{if $s.Average}}<p class="average">Keskiarvo <strong>{{score $s.Average}}</strong></p>{{end}}
|
||||
{{range $s.Reviews}}
|
||||
<article class="review">
|
||||
<header>
|
||||
<span class="avatar">{{.Initials}}</span>
|
||||
<strong>{{.Reviewer}}</strong>
|
||||
<span class="score">{{.Score}}</span>
|
||||
<span class="muted small">{{fidate .CreatedAt}}</span>
|
||||
</header>
|
||||
<p>{{.Text}}</p>
|
||||
</article>
|
||||
{{else}}
|
||||
<p class="muted">Kukaan ei ole vielä arvostellut tätä kappaletta.</p>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<p class="muted">Muiden arvostelut ja keskiarvo näkyvät kun olet kirjoittanut omasi.
|
||||
{{if $s.ReviewCount}}Arvosteluja on {{$s.ReviewCount}}.{{end}}</p>
|
||||
{{end}}
|
||||
</section>
|
||||
{{end}}
|
||||
@@ -0,0 +1,16 @@
|
||||
{{define "content"}}
|
||||
<h1>Kappaleet</h1>
|
||||
|
||||
{{if .Data.Items}}
|
||||
<table>
|
||||
<thead><tr><th>Kappale</th><th>Genre</th><th>Kesto</th><th>Pisteet</th></tr></thead>
|
||||
<tbody>
|
||||
{{range .Data.Items}}{{template "songrow" .}}{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{with .Data.NextCursor}}<p><a href="/songs?cursor={{.}}">Vanhempia →</a></p>{{end}}
|
||||
{{else}}
|
||||
<p class="empty">Yhtään kappaletta ei ole vielä julkaistu.</p>
|
||||
<p><a href="/submit">Lähetä ensimmäinen</a>.</p>
|
||||
{{end}}
|
||||
{{end}}
|
||||
@@ -0,0 +1,55 @@
|
||||
{{define "submission-status"}}
|
||||
<div class="status" {{if not .Done}}hx-get="/submit/{{.ID}}/status" hx-trigger="every 2s" hx-swap="outerHTML"{{end}}>
|
||||
<p class="{{if .Failed}}error{{end}}"><strong>{{.Label}}</strong></p>
|
||||
{{if .Failed}}
|
||||
{{with .StatusMsg}}<p class="muted small">{{.}}</p>{{end}}
|
||||
<form method="post" action="/submit/{{.ID}}/discard">
|
||||
<button type="submit">Poista lähetys</button>
|
||||
</form>
|
||||
{{else}}
|
||||
<!-- Outside the form and attached to it with form=, so one button both submits the metadata
|
||||
and publishes. Disabled until the audio has finished converting. -->
|
||||
<button type="submit" form="meta" {{if not .Ready}}disabled{{end}}>Julkaise</button>
|
||||
{{if not .Ready}}<p class="muted small">Julkaise aukeaa kun muunnos on valmis.</p>{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "saved"}}<span id="saved" class="saved">{{if .}}Tallennettu {{.}}{{end}}</span>{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<h1>Lähetys</h1>
|
||||
|
||||
{{if .Data.Failed}}{{template "submission-status" .Data}}{{end}}
|
||||
|
||||
{{if not .Data.Failed}}
|
||||
<form id="meta" method="post" action="/submit/{{.Data.ID}}/publish" class="stack"
|
||||
hx-post="/submit/{{.Data.ID}}" hx-trigger="input changed delay:1.2s, change"
|
||||
hx-target="#saved" hx-swap="outerHTML">
|
||||
<label>Kappaleen nimi
|
||||
<input name="title" value="{{.Data.Title}}" maxlength="100" required>
|
||||
</label>
|
||||
<label>Esittäjä
|
||||
<input name="artist" value="{{.Data.Artist}}" maxlength="100" required>
|
||||
</label>
|
||||
<label>Genre
|
||||
<select name="genre" required>
|
||||
<option value="">— valitse —</option>
|
||||
{{$current := .Data.Genre}}
|
||||
{{range .Data.Genres}}
|
||||
<option value="{{.Code}}" {{if eq .Code $current}}selected{{end}}>{{.Label}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</label>
|
||||
<label>Esittely <span class="muted small">(vapaaehtoinen)</span>
|
||||
<textarea name="description" rows="5" maxlength="2000">{{.Data.Description}}</textarea>
|
||||
</label>
|
||||
{{template "saved" ""}}
|
||||
</form>
|
||||
|
||||
<p class="muted">Tiedot tallentuvat itsestään kirjoittaessasi. Nimi, esittäjä ja genre tarvitaan
|
||||
ennen julkaisua.</p>
|
||||
|
||||
{{template "submission-status" .Data}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
@@ -0,0 +1,67 @@
|
||||
{{define "content"}}
|
||||
<h1>Lähetä kappale</h1>
|
||||
|
||||
{{with .Data.Error}}<p class="error">{{.}}</p>{{end}}
|
||||
|
||||
<form method="post" action="/submit" enctype="multipart/form-data" class="stack">
|
||||
<label class="dropzone" id="dropzone" for="audio">
|
||||
<input type="file" id="audio" name="audio" accept="audio/*" required>
|
||||
<span class="dz-title">Raahaa äänitiedosto tähän</span>
|
||||
<span class="muted small">tai valitse napsauttamalla</span>
|
||||
<span class="filename" id="filename"></span>
|
||||
</label>
|
||||
<button type="submit">Lähetä</button>
|
||||
</form>
|
||||
|
||||
{{with .Data.Submissions}}
|
||||
<section>
|
||||
<h2>Omat lähetykset</h2>
|
||||
<table>
|
||||
<thead><tr><th>Kappale</th><th>Tila</th><th>Lähetetty</th></tr></thead>
|
||||
<tbody>
|
||||
{{range .}}
|
||||
<tr>
|
||||
<td><a href="/submit/{{.ID}}">{{if .Title}}{{.Title}}{{else}}(nimetön){{end}}</a></td>
|
||||
<td>{{.Label}}</td>
|
||||
<td class="nowrap">{{fidate .CreatedAt}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="muted small">Valmis lähetys odottaa Julkaise-painallusta — vasta se tuo kappaleen
|
||||
muiden nähtäville.</p>
|
||||
</section>
|
||||
{{end}}
|
||||
|
||||
<p class="muted">Enintään 50 MB ja 15 minuuttia. Tiedosto muunnetaan Opus-muotoon, ja pääset
|
||||
kirjoittamaan esittelyn odotellessa. Kappale julkaistaan vasta kun painat Julkaise.</p>
|
||||
|
||||
<script>
|
||||
// The native control can't be relabelled or styled, so it is hidden behind this one — which
|
||||
// still is the input, so keyboard focus and form submission work untouched.
|
||||
(function () {
|
||||
const zone = document.getElementById('dropzone')
|
||||
const input = document.getElementById('audio')
|
||||
const name = document.getElementById('filename')
|
||||
|
||||
const show = () => {
|
||||
name.textContent = input.files.length ? input.files[0].name : ''
|
||||
zone.classList.toggle('has-file', input.files.length > 0)
|
||||
}
|
||||
input.addEventListener('change', show)
|
||||
|
||||
for (const type of ['dragenter', 'dragover']) {
|
||||
zone.addEventListener(type, e => { e.preventDefault(); zone.classList.add('over') })
|
||||
}
|
||||
for (const type of ['dragleave', 'dragend', 'drop']) {
|
||||
zone.addEventListener(type, e => { e.preventDefault(); zone.classList.remove('over') })
|
||||
}
|
||||
zone.addEventListener('drop', e => {
|
||||
if (e.dataTransfer.files.length) {
|
||||
input.files = e.dataTransfer.files
|
||||
show()
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user