source: Klonkt/src/views/pages/admin-audio.ejs@ 5300652

<div class="container ax-page">

  <p><a href="/admin" class="btn">&larr; <%= t('nav.admin') %></a></p>
  <%- include('../partials/media-tabs', { active: 'audio', audioOn: true }) %>
  <header class="ax-header">
    <div>
      <h1><%= t('aaud.title') %></h1>
      <p class="ax-tagline"><%= t('aaud.tagline_pre') %> <code>[[track:&lt;id&gt;]]</code> <%= t('aaud.tagline_post') %></p>
    </div>
  </header>

  <% if (success) { %><div class="ax-flash ax-flash-ok"><%= success %></div><% } %>
  <% if (error) { %><div class="ax-flash ax-flash-err"><%= error %></div><% } %>

  <%# ── MUSICBRAINZ ─────────────────────────────────────────────
      Wie ben jij, buiten Klonkt? Een MBID is geen vocabulaire maar een
      register: eraan koppelen is als je ISBN noemen. Andere muziekdiensten
      -- Funkwhale voorop -- herkennen je eraan zonder dat wij hun model
      hoeven over te nemen (shaer-mbz). %>
  <section class="ax-card" id="mb-card">
    <div class="ax-card-title"><%= t('aaud.mb_title') %></div>
    <p class="ax-hint"><%= t('aaud.mb_hint') %></p>

    <% if (site.mb_artist_id) { %>
      <p class="mb-linked">
        <%= t('aaud.mb_linked') %>
        <strong><%= site.mb_artist_name || site.mb_artist_id %></strong>
        <a href="https://musicbrainz.org/artist/<%= site.mb_artist_id %>"
           target="_blank" rel="noopener"><%= t('aaud.mb_open') %></a>
      </p>
      <%# Ontkoppelen moet kunnen: een verkeerde koppeling zet jouw naam onder
          andermans werk, en dat hoort met een klik terug te draaien zijn. %>
      <form method="POST" action="<%= (typeof siteUrlBase !== 'undefined' ? siteUrlBase : '') %>/admin/audio/musicbrainz/unlink">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <button type="submit" class="ax-btn ax-btn-quiet"><%= t('aaud.mb_unlink') %></button>
      </form>
    <% } %>

    <div class="mb-zoek">
      <input type="text" id="mb-q" value="<%= site.author || site.title || '' %>"
             placeholder="<%= t('aaud.artist') %>" autocomplete="off">
      <button type="button" class="ax-btn" id="mb-zoek-btn"><%= t('aaud.mb_search') %></button>
    </div>
    <div id="mb-uit" class="mb-uit" hidden></div>
  </section>

  <%# ── UPLOAD ──────────────────────────────────────────────── %>
  <section class="ax-card">
    <div class="ax-card-title"><%= t('aaud.upload') %></div>

    <%# Bulk drag-drop zone. Multiple files at once, transcoded sequentially.
        Title is auto-derived from each filename. Artist/album/cover are
        SHARED across the batch (set once, applied to every track) — same
        pattern as iTunes/Plex bulk-add. %>
    <div class="ax-form">

      <%# Shared metadata fields (apply to ALL files in the batch). %>
      <div class="ax-row ax-row-2">
        <label class="ax-field">
          <span><%= t('aaud.artist') %> <small><%= t('aaud.applied_all') %></small></span>
          <input type="text" id="batch-artist" placeholder="<%= t('aaud.optional') %>">
        </label>
        <label class="ax-field">
          <span><%= t('aaud.album') %> <small><%= t('aaud.applied_all') %></small></span>
          <input type="text" id="batch-album" placeholder="<%= t('aaud.optional') %>">
        </label>
      </div>
      <label class="ax-field ax-file">
        <span><%= t('aaud.cover') %> <small><%= t('aaud.cover_hint') %></small></span>
        <span class="ax-file-control">
          <span class="ax-btn ax-btn-secondary ax-file-btn">🖼 <%= t('aaud.choose_cover') %></span>
          <span class="ax-file-name" data-empty><%= t('aaud.no_file') %></span>
          <input type="file" id="batch-cover" accept="image/jpeg,image/png,image/webp,image/gif">
        </span>
      </label>

      <%# The drop-zone itself. Click anywhere to open file picker. %>
      <label class="ax-dropzone" id="audio-dropzone" tabindex="0">
        <span class="ax-dropzone-icon">🎵</span>
        <strong class="ax-dropzone-title"><%= t('aaud.drag_here') %></strong>
        <span class="ax-dropzone-sub"><%= t('aaud.or_click') %><br><small>mp3, m4a, ogg, opus, flac · max <%= maxBytesMb %> MB · wav max <%= maxWavMb %> MB</small></span>
        <input type="file" id="audio-files" accept="audio/*" multiple>
      </label>

      <%# Per-file progress list. Populated by JS as files are queued. %>
      <ul class="ax-upload-queue" id="upload-queue" hidden></ul>

      <div class="ax-form-actions" id="upload-actions" hidden>
        <button type="button" class="ax-btn ax-btn-primary" id="start-upload-btn">⬆ <%= t('aaud.start_upload') %></button>
        <button type="button" class="ax-btn" id="clear-queue-btn"><%= t('aaud.clear_list') %></button>
      </div>
    </div>
  </section>

  <%# ── TRACK LIST ─────────────────────────────────────────── %>
  <section class="ax-card">
    <div class="ax-card-title" style="display:flex;align-items:center;gap:.5rem">
      <%= t('aaud.tracks') %> <span class="ax-count"><%= tracks.length %></span>
      <button type="button" class="ax-btn ax-btn-secondary" id="add-link-track-btn"
              style="margin-left:auto;font-size:.85rem" title="<%= t('aaud.add_link_track_title') %>">
        + <%= t('aaud.add_link_track') %>
      </button>
    </div>

    <% if (!tracks.length) { %>
      <div class="ax-empty">
        <div class="ax-empty-icon">♫</div>
        <p><%= t('aaud.no_tracks') %></p>
      </div>
    <% } else { %>
      <%
        // Pre-fetch loop labels — `t` is shadowed by the loop var below.
        var _aaudUntitled = t('aaud.untitled');
        var _aaudPlay     = t('aaud.play');
        var _aaudEdit     = t('aaud.edit');
        var _aaudDlOn     = t('aaud.dl_on');
        var _aaudDlOff    = t('aaud.dl_off');
        var _aaudDelete   = t('aaud.delete');
        var _aaudCopy     = t('aaud.copy_click');
        var _aaudDelConfirm = t('aaud.delete_confirm');
      %>
      <ul class="ax-list">
        <% tracks.forEach(function(t) { %>
          <li class="ax-track" data-track-id="<%= t.id %>">
            <% if (t.cover_url) { %>
              <img class="ax-track-cover" src="<%= t.cover_url %>" alt="" data-cover-thumb>
            <% } else { %>
              <span class="ax-track-cover ax-track-cover-empty" data-cover-thumb>♫</span>
            <% } %>

            <div class="ax-track-meta">
              <div class="ax-track-title" data-cell="title"><%= t.title || _aaudUntitled %></div>
              <div class="ax-track-sub">
                <span data-cell="artist"><%= t.artist || '—' %></span>
                <% if (t.album) { %><span class="ax-track-sep">·</span><span data-cell="album"><%= t.album %></span><% } else { %><span data-cell="album" hidden></span><% } %>
                <span class="ax-track-sep">·</span><span><%= t.size ? Math.round(t.size/1024) + ' KB' : '—' %></span>
              </div>
              <code class="ax-embed" data-copy="[[track:<%= t.id %>]]" title="<%= _aaudCopy %>">[[track:<%= t.id %>]]</code>
            </div>

            <div class="ax-track-actions">
              <% if (t.stream_url) { %>
                <button type="button" class="ax-icon-btn ax-track-play"
                        data-stream-url="<%= t.stream_url %>"
                        data-track-id="<%= t.id %>"
                        aria-label="<%= _aaudPlay %>" title="<%= _aaudPlay %>">
                  <span class="ax-track-play-icon" aria-hidden="true">▶</span>
                </button>
              <% } %>
              <button type="button" class="ax-icon-btn" data-track-edit data-id="<%= t.id %>" aria-label="<%= _aaudEdit %>" title="<%= _aaudEdit %>">✎</button>
              <% if (typeof premiumUnlocked === 'undefined' || premiumUnlocked) { %>
                <button type="button" class="ax-icon-btn" data-track-dl data-id="<%= t.id %>" data-on="<%= t.downloadable ? '1' : '0' %>"
                        aria-label="<%= t.downloadable ? _aaudDlOn : _aaudDlOff %>" title="<%= t.downloadable ? _aaudDlOn : _aaudDlOff %>"
                        style="<%= t.downloadable ? 'color:var(--accent,#6b8f71)' : 'opacity:.5' %>">⬇</button>
              <% } %>
              <form action="/admin/audio/<%= t.id %>/delete" method="post" data-confirm="<%= _aaudDelConfirm %>" class="ax-track-delete">
                <button type="submit" class="ax-icon-btn ax-icon-btn-danger" aria-label="<%= _aaudDelete %>" title="<%= _aaudDelete %>">🗑</button>
              </form>
            </div>
          </li>
        <% }); %>
      </ul>
    <% } %>
  </section>

  <% if ((typeof premiumUnlocked === 'undefined' || premiumUnlocked) && typeof embedUrl !== 'undefined') { %>
    <section class="ax-section" style="margin-top:1.5rem">
      <h2 style="margin:0 0 .4rem">🔊 <%= t('aaud.embed_player') %></h2>
      <p style="opacity:.75;font-size:.9rem;margin:0 0 .6rem"><%= t('aaud.embed_hint') %></p>
      <textarea readonly rows="3" data-selectall style="width:100%;font-family:monospace;font-size:12px;padding:10px;border-radius:8px;border:1px solid var(--rule);background:var(--paper-2);color:inherit;">&lt;iframe src="<%= embedUrl %>" width="100%" height="420" frameborder="0" loading="lazy" style="border-radius:12px"&gt;&lt;/iframe&gt;</textarea>
      <p style="margin:.6rem 0 0"><a class="btn" href="<%= embedUrl %>" target="_blank">▶ <%= t('aaud.preview_player') %></a></p>
    </section>
  <% } %>

</div>

<style>
/* ─── Page wrapper ──────────────────────────────────────────────── */
.ax-page {
  max-width: 880px;
  margin: 1.5rem auto 4rem;
  padding: 0 1rem;
}
.ax-header {
  display: flex; align-items: flex-start; gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.ax-header h1 {
  font-family: var(--font-display, serif);
  font-size: 1.75rem;
  margin: 0 0 0.25rem;
}
.ax-tagline {
  color: var(--ink-muted, var(--ink-soft));
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.ax-tagline code {
  background: var(--paper-2);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}
.ax-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: border-color 120ms;
}
.ax-back:hover { border-color: var(--accent); }

/* ─── Flash messages ───────────────────────────────────────────── */
.ax-flash {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.ax-flash-ok  { background: rgba(40,160,90,.15); color: #2a9d5e; border: 1px solid rgba(40,160,90,.3); }
.ax-flash-err { background: rgba(200,60,60,.15); color: #c33;    border: 1px solid rgba(200,60,60,.3); }

/* ─── Card sections ────────────────────────────────────────────── */
.ax-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.ax-card-title {
  font-family: var(--font-display, serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex; align-items: baseline; gap: 0.5rem;
}
.ax-count {
  font-family: var(--font-ui, system-ui);
  font-size: 0.8rem;
  color: var(--ink-muted, var(--ink-soft));
  background: var(--paper-2);
  padding: 0.1em 0.55em;
  border-radius: 999px;
  font-weight: 500;
}

/* ─── Form fields ──────────────────────────────────────────────── */
.ax-form {
  display: flex; flex-direction: column;
  gap: 0.85rem;
}
.ax-row {
  display: grid; gap: 0.85rem;
}
.ax-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
  .ax-row-2 { grid-template-columns: 1fr; }
}
.ax-field {
  display: flex; flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.ax-field > span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  display: flex; align-items: baseline; gap: 0.4rem;
  flex-wrap: wrap;
}
.ax-field > span small {
  font-weight: 400; color: var(--ink-muted);
  font-size: 0.95em;
}
.ax-field input[type="text"],
.ax-field input[type="url"],
.ax-field input[type="email"],
.ax-field select,
.ax-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-ui, system-ui), sans-serif;
  font-size: 0.95rem;
  -webkit-appearance: none; appearance: none;
  transition: border-color 120ms;
}
.ax-field input:focus,
.ax-field select:focus,
.ax-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* ─── File inputs (custom-styled wrapper) ─────────────────────── */
.ax-file-control {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap;
  position: relative;
  min-height: 40px;
}
.ax-file-control input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  z-index: 2;
}
.ax-file-btn {
  pointer-events: none;  /* let clicks pass through to the file input */
}
.ax-file-name {
  font-size: 0.85rem;
  color: var(--ink);
  word-break: break-all;
  flex: 1;
  min-width: 0;
}
.ax-file-name[data-empty] { color: var(--ink-muted, var(--ink-soft)); }

.ax-form-actions {
  display: flex; gap: 0.5rem;
  margin-top: 0.25rem;
}
.ax-form-actions[hidden] { display: none; }

/* ─── Buttons ──────────────────────────────────────────────────── */
.ax-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-ui, system-ui), sans-serif;
  font-size: 0.9rem; font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  min-height: 40px;
  transition: background 120ms, border-color 120ms;
  -webkit-tap-highlight-color: transparent;
}
.ax-btn:hover { border-color: var(--accent); }
.ax-btn-secondary { background: var(--paper-2); }
.ax-btn-primary {
  background: var(--accent); color: white;
  border-color: var(--accent);
}
.ax-btn-primary:hover { opacity: 0.92; border-color: var(--accent); }

/* Tiny icon-only button for row actions */
.ax-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.ax-icon-btn:hover { border-color: var(--accent); }
.ax-icon-btn-danger:hover { color: #dc2626; border-color: #dc2626; }

.ax-track-play.is-playing {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper-2));
}
.ax-track-play-icon { font-size: 0.85rem; line-height: 1; }

/* ─── Empty state ──────────────────────────────────────────────── */
.ax-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--ink-muted, var(--ink-soft));
}
.ax-empty-icon {
  font-size: 2.5rem;
  font-family: var(--font-display, serif);
  color: var(--ink-soft);
  opacity: 0.4;
  margin-bottom: 0.5rem;
}
.ax-empty p { margin: 0; }

/* ─── Track list (card per row) ────────────────────────────────── */
.ax-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 0.6rem;
}
.ax-track {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.75rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  transition: border-color 120ms;
}
.ax-track:hover { border-color: var(--accent); }
.ax-track-cover {
  width: 56px; height: 56px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display, serif);
  font-size: 1.5rem;
  color: var(--accent);
  flex-shrink: 0;
}
.ax-track-cover-empty { /* span variant */ }
.ax-track-meta {
  min-width: 0;  /* allow text-overflow on long titles */
  display: flex; flex-direction: column; gap: 0.2rem;
}
.ax-track-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ax-track-sub {
  font-size: 0.8rem;
  color: var(--ink-muted, var(--ink-soft));
  display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
}
.ax-track-sep { opacity: 0.5; }
.ax-embed {
  display: inline-block;
  background: var(--paper);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: all;
  margin-top: 0.15rem;
  word-break: break-all;
  align-self: flex-start;
  transition: background 120ms;
}
.ax-embed:hover { background: var(--rule); }
.ax-embed.is-copied { background: rgba(40,160,90,0.2); color: #2a9d5e; }

.ax-track-actions {
  display: flex; gap: 0.4rem;
  flex-shrink: 0;
}
.ax-track-delete { display: inline; }

/* ─── Mobile tweaks ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .ax-track {
    grid-template-columns: 48px 1fr;
    grid-template-areas: "cover meta" "actions actions";
    gap: 0.6rem;
  }
  .ax-track-cover { grid-area: cover; width: 48px; height: 48px; }
  .ax-track-meta  { grid-area: meta; }
  .ax-track-actions {
    grid-area: actions;
    justify-content: flex-end;
    border-top: 1px solid var(--rule);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
  }
}

/* ─── Bulk drop-zone ──────────────────────────────────────────── */
.ax-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem;
  padding: 2rem 1rem;
  border: 2px dashed var(--rule);
  border-radius: 12px;
  background: var(--paper-2);
  cursor: pointer;
  text-align: center;
  transition: border-color 150ms, background 150ms;
  position: relative;
  min-height: 160px;
}
.ax-dropzone:hover,
.ax-dropzone:focus-within {
  border-color: var(--accent);
}
.ax-dropzone.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper-2));
}
.ax-dropzone input[type="file"] {
  /* Cover the whole dropzone but invisible — clicks bubble through to it. */
  position: absolute; inset: 0;
  opacity: 0;
  cursor: pointer;
}
.ax-dropzone-icon {
  font-size: 2rem;
  opacity: 0.5;
  line-height: 1;
}
.ax-dropzone-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.ax-dropzone-sub {
  font-size: 0.85rem;
  color: var(--ink-muted, var(--ink-soft));
  line-height: 1.4;
}
.ax-dropzone-sub small {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* ─── Upload queue ────────────────────────────────────────────── */
.ax-upload-queue {
  list-style: none;
  padding: 0; margin: 0.75rem 0 0;
  display: flex; flex-direction: column;
  gap: 0.4rem;
}
.ax-queue-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 0.875rem;
  transition: border-color 150ms, opacity 150ms;
}
.ax-queue-item--active {
  border-color: var(--accent);
}
.ax-queue-item--done {
  border-color: rgba(40,160,90,0.4);
  opacity: 0.85;
}
.ax-queue-item--error {
  border-color: rgba(220,60,60,0.5);
}
.ax-queue-name {
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ax-queue-size {
  font-size: 0.75rem;
  color: var(--ink-muted, var(--ink-soft));
  margin-left: 0.5rem;
}
.ax-queue-status {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
}
.ax-queue-status--queued   { color: var(--ink-muted, var(--ink-soft)); }
.ax-queue-status--uploading,
.ax-queue-status--transcoding {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper-2));
}
.ax-queue-status--done {
  color: #2a9d5e;
  background: rgba(40,160,90,0.12);
}
.ax-queue-status--error {
  color: #dc2626;
  background: rgba(220,60,60,0.12);
}
</style>

<%# Track editor modal (exposes window.openTrackEditor) %>
<%- include('../partials/track-editor', { csrfToken: (typeof csrfToken !== 'undefined' ? csrfToken : '') }) %>

<%# Het script staat in assets/js/mod/admin-audio.js; de gegevens via partials/page-data.ejs (shaer-bqr). %>
<%- include('../partials/page-data', { pageData: { change_failed: t('aaud.change_failed'), copied: t('aaud.copied'), create_failed: t('aaud.create_failed'), dl_off: t('aaud.dl_off'), dl_on: t('aaud.dl_on'), editor_not_loaded: t('aaud.editor_not_loaded'), err_unexpected: t('aaud.err_unexpected'), failed: t('aaud.failed'), new_track: t('aaud.new_track'), no_file: t('aaud.no_file'), pause: t('aaud.pause'), play: t('aaud.play'), st_done: t('aaud.st_done'), st_error: t('aaud.st_error'), st_queued: t('aaud.st_queued'), st_transcoding: t('aaud.st_transcoding'), st_uploading: t('aaud.st_uploading'), untitled: t('aaud.untitled') } }) %>