Context Navigation

track-editor.ejs@ 3e86f1c

main

Last change on this file since 3e86f1c was 3e86f1c, checked in by roboburr <roboburr@…>, 3 months ago

feat: automatic track duration — no more manually entering seconds

The duration of an audio track is now determined automatically instead of manually:

On upload: read from ffmpeg's codecData event during the existing transcode (no extra ffprobe binary). The upload INSERT never set duration before -> every track started as NULL ('--:--'); that is now fixed.
In the track editor: a hidden <audio preload=metadata> reads the duration and fills the field if it's still empty (manual override still possible).
Backfill: npm run backfill:durations fills existing tracks without duration via ffmpeg (probeDuration reads only codecData and stops immediately -> fast).

Co-Authored-By: Claude <noreply@…>

Property mode set to 100644

File size: 24.0 KB

Line
1	<%
2	// Track editor modal — mobile-first rewrite.
3	//
4	// Visual model:
5	// Mobile (<720px): bottom-sheet that slides up from below, max 92vh,
6	// rounded top corners only, drag-handle bar at top.
7	// Desktop (≥720px): centered modal max-width 520px, fully-rounded.
8	//
9	// Self-contained styling under the .te-* namespace — no dependency on
10	// the .ax-* admin primitives. Same visual language though: paper bg,
11	// rule borders, accent for active states.
12	//
13	// Exposes window.openTrackEditor({ id, onSaved? }) — called by the
14	// "✎ Bewerken" buttons on admin-audio. Fetches /admin/audio/api/:id,
15	// renders the form with current values + an inline <audio> preview,
16	// and PATCHes via /admin/audio/api/:id on save.
17
18	const _csrf = (typeof csrfToken !== 'undefined' && csrfToken) \|\| '';
19	%>
20
21	<style>
22	/* ─────────────────────────────────────────────────────────────────
23	Track editor modal — namespace .te-*
24	───────────────────────────────────────────────────────────────── */
25
26	.te-backdrop {
27	position: fixed; inset: 0;
28	/* Above bottom-tab nav (z=1050) and audio-player sheet (z=1100) so the
29	editor always wins. */
30	z-index: 9000;
31	background: rgba(0, 0, 0, 0.55);
32	-webkit-backdrop-filter: blur(4px);
33	backdrop-filter: blur(4px);
34	display: flex;
35	/* Mobile: dock to bottom; desktop overrides to center via media query */
36	align-items: flex-end;
37	justify-content: center;
38	animation: te-fade 160ms ease-out;
39	}
40	@keyframes te-fade { from { opacity: 0; } to { opacity: 1; } }
41
42	.te-modal {
43	background: var(--paper);
44	width: 100%;
45	max-height: 92vh;
46	/* Bottom-sheet shape on mobile — only top corners rounded */
47	border-radius: 16px 16px 0 0;
48	border: 1px solid var(--rule);
49	border-bottom: 0;
50	box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
51	display: flex; flex-direction: column;
52	overflow: hidden;
53	animation: te-slide-up 220ms cubic-bezier(.2,.9,.3,1);
54	}
55	@keyframes te-slide-up {
56	from { transform: translateY(100%); }
57	to { transform: translateY(0); }
58	}
59
60	/* Desktop: center the modal as a card */
61	@media (min-width: 720px) {
62	.te-backdrop { align-items: center; padding: 1rem; }
63	.te-modal {
64	max-width: 520px;
65	border-radius: 14px;
66	border: 1px solid var(--rule);
67	max-height: calc(100vh - 2rem);
68	box-shadow: 0 20px 60px rgba(0,0,0,0.4);
69	animation: te-fade 220ms ease-out;
70	}
71	}
72
73	/* Drag-handle bar at top of mobile sheet */
74	.te-handle {
75	width: 100%; padding: 0.6rem 0;
76	display: flex; justify-content: center;
77	flex-shrink: 0;
78	}
79	.te-handle-bar {
80	width: 36px; height: 4px;
81	background: var(--rule);
82	border-radius: 99px;
83	}
84	@media (min-width: 720px) { .te-handle { display: none; } }
85
86	.te-header {
87	display: flex; align-items: center; justify-content: space-between;
88	padding: 0.5rem 1.25rem 1rem;
89	border-bottom: 1px solid var(--rule);
90	flex-shrink: 0;
91	}
92	@media (min-width: 720px) { .te-header { padding: 1rem 1.25rem; } }
93	.te-header h3 {
94	font-family: var(--font-display, serif);
95	margin: 0; font-size: 1.15rem; font-weight: 600;
96	}
97	.te-close {
98	width: 36px; height: 36px;
99	display: inline-flex; align-items: center; justify-content: center;
100	border: 0; border-radius: 8px;
101	background: transparent;
102	color: var(--ink-muted, var(--ink-soft));
103	font-size: 1.5rem; line-height: 1;
104	cursor: pointer;
105	transition: background 120ms, color 120ms;
106	}
107	.te-close:hover { background: var(--paper-2); color: var(--ink); }
108
109	.te-body {
110	padding: 1rem 1.25rem;
111	overflow-y: auto;
112	flex: 1;
113	-webkit-overflow-scrolling: touch;
114	display: flex; flex-direction: column; gap: 1rem;
115	}
116
117	/* ── Inline preview player ─────────────────────────────────── */
118	.te-preview {
119	display: flex; align-items: center; gap: 0.75rem;
120	padding: 0.75rem;
121	background: var(--paper-2);
122	border: 1px solid var(--rule);
123	border-radius: 10px;
124	}
125	.te-preview-cover {
126	width: 56px; height: 56px;
127	border-radius: 8px; overflow: hidden;
128	background: var(--paper);
129	display: inline-flex; align-items: center; justify-content: center;
130	flex-shrink: 0;
131	font-size: 1.4rem; color: var(--accent);
132	}
133	.te-preview-cover img { width: 100%; height: 100%; object-fit: cover; }
134	.te-preview-meta {
135	flex: 1; min-width: 0;
136	display: flex; flex-direction: column; gap: 0.25rem;
137	}
138	.te-preview-title {
139	font-weight: 600; font-size: 0.95rem;
140	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
141	}
142	.te-preview-sub {
143	font-size: 0.78rem;
144	color: var(--ink-muted, var(--ink-soft));
145	}
146	.te-preview-play {
147	width: 44px; height: 44px;
148	border: 1px solid var(--rule);
149	border-radius: 50%;
150	background: var(--paper);
151	color: var(--ink);
152	font-size: 1.1rem;
153	cursor: pointer;
154	display: inline-flex; align-items: center; justify-content: center;
155	flex-shrink: 0;
156	transition: border-color 120ms, color 120ms, background 120ms;
157	}
158	.te-preview-play:hover { border-color: var(--accent); color: var(--accent); }
159	.te-preview-play.is-playing {
160	background: var(--accent); color: white; border-color: var(--accent);
161	}
162
163	/* ── Form fields ───────────────────────────────────────────── */
164	.te-form { display: flex; flex-direction: column; gap: 0.85rem; }
165	.te-row { display: grid; gap: 0.85rem; }
166	.te-row-2 { grid-template-columns: 1fr 1fr; }
167	@media (max-width: 480px) { .te-row-2 { grid-template-columns: 1fr; } }
168
169	.te-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
170	.te-field > span {
171	font-size: 0.8rem; font-weight: 600;
172	color: var(--ink-soft);
173	display: flex; align-items: baseline; gap: 0.4rem;
174	}
175	.te-field > span small {
176	font-weight: 400; color: var(--ink-muted); font-size: 0.95em;
177	}
178	.te-required { color: #dc2626; }
179	.te-field input[type="text"],
180	.te-field input[type="number"],
181	.te-field input[type="url"] {
182	width: 100%; box-sizing: border-box;
183	padding: 0.6rem 0.75rem; min-height: 44px;
184	border: 1px solid var(--rule); border-radius: 6px;
185	background: var(--paper-2); color: var(--ink);
186	font-family: var(--font-ui, system-ui), sans-serif;
187	font-size: 0.95rem;
188	-webkit-appearance: none; appearance: none;
189	transition: border-color 120ms;
190	}
191	.te-field input:focus {
192	outline: 2px solid var(--accent);
193	outline-offset: -1px;
194	border-color: var(--accent);
195	}
196
197	/* ── Cover field with thumb + button + URL ─────────────────── */
198	.te-cover-row {
199	display: grid;
200	grid-template-columns: 80px 1fr;
201	gap: 0.75rem;
202	align-items: start;
203	}
204	.te-cover-thumb {
205	width: 80px; height: 80px;
206	border-radius: 10px;
207	border: 1px dashed var(--rule);
208	background: var(--paper-2);
209	display: flex; align-items: center; justify-content: center;
210	overflow: hidden;
211	cursor: pointer;
212	transition: border-color 120ms;
213	}
214	.te-cover-thumb:hover, .te-cover-thumb.is-dragover { border-color: var(--accent); border-style: solid; }
215	.te-cover-thumb img { width: 100%; height: 100%; object-fit: cover; }
216	.te-cover-empty {
217	font-size: 1.6rem; opacity: 0.5;
218	}
219	.te-cover-actions {
220	display: flex; flex-direction: column; gap: 0.5rem;
221	min-width: 0;
222	}
223	.te-cover-btn-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
224	.te-cover-btn {
225	display: inline-flex; align-items: center; gap: 0.35rem;
226	padding: 0.45rem 0.75rem;
227	border: 1px solid var(--rule); border-radius: 6px;
228	background: var(--paper-2); color: var(--ink);
229	font-family: var(--font-ui, system-ui); font-size: 0.85rem;
230	cursor: pointer;
231	transition: border-color 120ms;
232	}
233	.te-cover-btn:hover { border-color: var(--accent); }
234	.te-cover-btn-remove:hover { color: #dc2626; border-color: #dc2626; }
235	.te-cover-status {
236	font-size: 0.78rem;
237	color: var(--ink-muted, var(--ink-soft));
238	min-height: 1em;
239	}
240	.te-cover-status.is-error { color: #dc2626; }
241	.te-cover-status.is-ok { color: #2a9d5e; }
242
243	/* ── Footer (sticky) ───────────────────────────────────────── */
244	.te-footer {
245	display: flex; align-items: center; gap: 0.5rem;
246	padding: 0.85rem 1.25rem;
247	border-top: 1px solid var(--rule);
248	background: var(--paper);
249	flex-shrink: 0;
250	}
251	.te-footer-spacer { flex: 1; }
252	.te-btn {
253	display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
254	padding: 0.6rem 1.1rem; min-height: 44px;
255	border: 1px solid var(--rule); border-radius: 8px;
256	background: var(--paper-2); color: var(--ink);
257	font-family: var(--font-ui, system-ui); font-size: 0.9rem; font-weight: 500;
258	cursor: pointer;
259	transition: border-color 120ms, background 120ms;
260	-webkit-tap-highlight-color: transparent;
261	}
262	.te-btn:hover { border-color: var(--accent); }
263	.te-btn:disabled { opacity: 0.5; cursor: not-allowed; }
264	.te-btn-primary {
265	background: var(--accent); color: white; border-color: var(--accent);
266	}
267	.te-btn-primary:hover { opacity: 0.92; }
268
269	/* Lock body scroll while modal is open */
270	body.te-modal-open { overflow: hidden; }
271	</style>
272
273	<script>
274	(function() {
275
276	function esc(s) {
277	return String(s == null ? '' : s)
278	.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
279	.replace(/"/g, '"').replace(/'/g, ''');
280	}
281
282	async function api(method, url, body) {
283	const opts = { method, credentials: 'same-origin', headers: {} };
284	if (body !== undefined) {
285	if (body instanceof FormData) {
286	opts.body = body;
287	} else {
288	opts.headers['Content-Type'] = 'application/json';
289	opts.body = JSON.stringify(body);
290	}
291	}
292	const res = await fetch(url, opts);
293	let data;
294	try { data = await res.json(); }
295	catch (_) { throw new Error('Onverwacht antwoord (' + res.status + ')'); }
296	if (!res.ok) data.ok = false;
297	return data;
298	}
299
300	/**
301	* Open the track editor.
302	* @param {object} opts
303	* @param {string} opts.id — track id to edit
304	* @param {function?} opts.onSaved — called with updated track on success
305	*/
306	window.openTrackEditor = async function openTrackEditor({ id, onSaved }) {
307	if (!id) return;
308	let track, albumSuggestions = [];
309	try {
310	const [trackJson, listJson] = await Promise.all([
311	api('GET', '/admin/audio/api/' + encodeURIComponent(id)),
312	api('GET', '/admin/audio/api/albums'),
313	]);
314	if (!trackJson.ok) throw new Error(trackJson.error \|\| 'Track niet gevonden');
315	track = trackJson.track;
316	if (listJson.ok && Array.isArray(listJson.albums)) {
317	albumSuggestions = listJson.albums.filter(Boolean);
318	}
319	} catch (err) {
320	alert('Track ophalen mislukt: ' + err.message);
321	return;
322	}
323
324	const backdrop = document.createElement('div');
325	backdrop.className = 'te-backdrop';
326	backdrop.innerHTML = `
327	<div class="te-modal" role="dialog" aria-modal="true" aria-label="Track bewerken">
328	<div class="te-handle" aria-hidden="true"><span class="te-handle-bar"></span></div>
329
330	<div class="te-header">
331	<h3>✎ Track bewerken</h3>
332	<button type="button" class="te-close" aria-label="Sluiten">×</button>
333	</div>
334
335	<div class="te-body">
336
337	${track.stream_url ? `
338	<div class="te-preview">
339	<div class="te-preview-cover">
340	${track.cover_url
341	? `<img src="${esc(track.cover_url)}" alt="">`
342	: `🎵`}
343	</div>
344	<div class="te-preview-meta">
345	<div class="te-preview-title">${esc(track.title \|\| '(zonder titel)')}</div>
346	<div class="te-preview-sub">
347	${esc(track.artist \|\| '—')}${track.album ? ' · ' + esc(track.album) : ''}
348	</div>
349	</div>
350	<button type="button" class="te-preview-play" id="te-preview-play" aria-label="Afspelen">▶</button>
351	</div>
352	` : ''}
353
354	<div class="te-form">
355
356	<label class="te-field">
357	<span>Titel <span class="te-required" aria-hidden="true">*</span></span>
358	<input type="text" id="te-title" maxlength="200" required
359	autocomplete="off" autocapitalize="words" spellcheck="false"
360	value="${esc(track.title \|\| '')}">
361	</label>
362
363	<div class="te-row te-row-2">
364	<label class="te-field">
365	<span>Artiest</span>
366	<input type="text" id="te-artist" maxlength="200"
367	autocomplete="off" autocapitalize="words" spellcheck="false"
368	value="${esc(track.artist \|\| '')}">
369	</label>
370	<label class="te-field">
371	<span>Album</span>
372	<input type="text" id="te-album" maxlength="200"
373	autocomplete="off" autocapitalize="words" spellcheck="false"
374	list="te-album-list" value="${esc(track.album \|\| '')}">
375	<datalist id="te-album-list">
376	${albumSuggestions.map(a => `<option value="${esc(a)}">`).join('')}
377	</datalist>
378	</label>
379	</div>
380
381	<label class="te-field">
382	<span>Duur <small>(seconden — automatisch bepaald, hier te overschrijven)</small></span>
383	<input type="number" id="te-duration" min="0" step="1"
384	inputmode="numeric" pattern="[0-9]*"
385	value="${track.duration \|\| ''}" placeholder="auto">
386	</label>
387
388	<div class="te-field">
389	<span>Cover</span>
390	<div class="te-cover-row">
391	<div class="te-cover-thumb" id="te-cover-thumb" tabindex="0" role="button"
392	aria-label="Klik om cover te kiezen">
393	${track.cover_url
394	? `<img src="${esc(track.cover_url)}" alt="">`
395	: `<span class="te-cover-empty">🎨</span>`}
396	</div>
397	<input type="file" id="te-cover-file"
398	accept="image/jpeg,image/png,image/webp,image/gif" hidden>
399	<div class="te-cover-actions">
400	<div class="te-cover-btn-row">
401	<button type="button" class="te-cover-btn" id="te-cover-pick">
402	📷 Foto kiezen
403	</button>
404	${track.cover_url ? `
405	<button type="button" class="te-cover-btn te-cover-btn-remove" id="te-cover-remove">
406	× Verwijder
407	</button>` : ''}
408	</div>
409	<input type="text" id="te-cover-url" inputmode="url"
410	placeholder="/media/… of https://…"
411	autocomplete="off" autocapitalize="none" spellcheck="false"
412	value="${esc(track.cover_url \|\| '')}">
413	<div class="te-cover-status" id="te-cover-status"></div>
414	</div>
415	</div>
416	</div>
417
418	</div>
419	</div>
420
421	<div class="te-footer">
422	<button type="button" class="te-btn" id="te-cancel">Annuleren</button>
423	<div class="te-footer-spacer"></div>
424	<button type="button" class="te-btn te-btn-primary" id="te-save">💾 Opslaan</button>
425	</div>
426	</div>
427	`;
428
429	document.body.appendChild(backdrop);
430	document.body.classList.add('te-modal-open');
431
432	const $ = sel => backdrop.querySelector(sel);
433
434	// ── Inline preview player (routed through global mini-player) ──
435	// We don't build our own <audio>; instead we tell the global
436	// window.pcmsAudioPlayer to load this single track. Visual state
437	// syncs against the global audio element so toggle works correctly
438	// even if the user pauses from the mini-bar.
439	const previewBtn = $('#te-preview-play');
440	if (previewBtn) {
441	const setPreviewState = (playing) => {
442	previewBtn.textContent = playing ? '⏸' : '▶';
443	previewBtn.classList.toggle('is-playing', playing);
444	previewBtn.setAttribute('aria-label', playing ? 'Pauzeren' : 'Afspelen');
445	};
446	const isOurTrack = () => {
447	// audio.src is a blob: URL (Spotify-style playback) — compare against
448	// the player's logical current-track URL instead.
449	const player = window.pcmsAudioPlayer;
450	const cur = player && player.currentTrack();
451	return !!(cur && track.stream_url && cur.url === track.stream_url);
452	};
453	const resync = () => {
454	const audio = document.getElementById('audio-element');
455	const playing = audio && !audio.paused && !audio.ended && isOurTrack();
456	setPreviewState(!!playing);
457	};
458
459	previewBtn.addEventListener('click', () => {
460	const player = window.pcmsAudioPlayer;
461	if (!player \|\| !track.stream_url) {
462	console.warn('preview: miniplayer or url missing');
463	return;
464	}
465	const audio = document.getElementById('audio-element');
466	if (audio && isOurTrack()) {
467	// Same track loaded — toggle
468	if (audio.paused) player.play(); else player.pause();
469	} else {
470	player.setQueue([{
471	url: track.stream_url,
472	title: track.title \|\| '(zonder titel)',
473	artist: track.artist \|\| '',
474	album: track.album \|\| '',
475	cover: track.cover_url \|\| '',
476	}], 0);
477	}
478	});
479
480	const audio = document.getElementById('audio-element');
481	if (audio) {
482	const evs = ['play', 'pause', 'ended', 'loadstart', 'emptied'];
483	evs.forEach(ev => audio.addEventListener(ev, resync));
484	// Detach listeners on close so we don't leak them
485	backdrop._previewCleanup = () => {
486	evs.forEach(ev => audio.removeEventListener(ev, resync));
487	};
488	resync(); // initial state
489	}
490	}
491
492	function close() {
493	// Detach our resync listeners (mini-player stays running)
494	if (backdrop._previewCleanup) backdrop._previewCleanup();
495	document.body.classList.remove('te-modal-open');
496	document.removeEventListener('keydown', onEsc);
497	backdrop.remove();
498	}
499	function onEsc(e) { if (e.key === 'Escape') close(); }
500	document.addEventListener('keydown', onEsc);
501
502	backdrop.addEventListener('click', e => {
503	// Click on the backdrop itself (not modal content) closes
504	if (e.target === backdrop) close();
505	});
506	$('.te-close').addEventListener('click', close);
507	$('#te-cancel').addEventListener('click', close);
508
509	// ── Cover picking + URL paste + drag-drop ────────────────
510	const thumb = $('#te-cover-thumb');
511	const fileInput = $('#te-cover-file');
512	const urlInput = $('#te-cover-url');
513	const status = $('#te-cover-status');
514	const pickBtn = $('#te-cover-pick');
515	const removeBtn = $('#te-cover-remove');
516
517	function setStatus(text, kind) {
518	status.textContent = text \|\| '';
519	status.className = 'te-cover-status' + (kind ? ' is-' + kind : '');
520	}
521	function setThumb(url) {
522	if (url) {
523	thumb.innerHTML = `<img src="${esc(url)}" alt="">`;
524	} else {
525	thumb.innerHTML = `<span class="te-cover-empty">🎨</span>`;
526	}
527	}
528
529	pickBtn.addEventListener('click', () => fileInput.click());
530	thumb.addEventListener('click', () => fileInput.click());
531	thumb.addEventListener('keydown', e => {
532	if (e.key === 'Enter' \|\| e.key === ' ') { e.preventDefault(); fileInput.click(); }
533	});
534
535	async function uploadCoverFile(file) {
536	if (!file) return;
537	if (!/^image\//.test(file.type)) {
538	setStatus('Alleen afbeeldingen toegestaan', 'error'); return;
539	}
540	setStatus('Uploaden…', null);
541	const fd = new FormData();
542	fd.append('cover', file);
543	try {
544	const r = await fetch('/admin/audio/api/' + encodeURIComponent(id) + '/cover', {
545	method: 'POST', body: fd, credentials: 'same-origin',
546	});
547	const j = await r.json();
548	if (!r.ok \|\| !j.ok) throw new Error(j.error \|\| 'Upload mislukt');
549	urlInput.value = j.cover_url \|\| '';
550	setThumb(j.cover_url);
551	setStatus('✓ Geüpload', 'ok');
552	} catch (err) {
553	setStatus('Mislukt: ' + err.message, 'error');
554	}
555	}
556
557	fileInput.addEventListener('change', e => {
558	const f = e.target.files && e.target.files[0];
559	if (f) uploadCoverFile(f);
560	fileInput.value = '';
561	});
562
563	// Drag-drop on thumb (desktop nicety)
564	['dragenter', 'dragover'].forEach(ev =>
565	thumb.addEventListener(ev, e => { e.preventDefault(); thumb.classList.add('is-dragover'); }));
566	['dragleave', 'drop'].forEach(ev =>
567	thumb.addEventListener(ev, e => { e.preventDefault(); thumb.classList.remove('is-dragover'); }));
568	thumb.addEventListener('drop', e => {
569	const f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
570	if (f) uploadCoverFile(f);
571	});
572
573	// URL paste auto-preview
574	urlInput.addEventListener('input', () => {
575	const v = urlInput.value.trim();
576	setThumb(v);
577	});
578
579	if (removeBtn) {
580	removeBtn.addEventListener('click', () => {
581	urlInput.value = '';
582	setThumb('');
583	removeBtn.remove();
584	});
585	}
586
587	// ── Save ────────────────────────────────────────────────
588	$('#te-save').addEventListener('click', async () => {
589	const titleEl = $('#te-title');
590	const title = titleEl.value.trim();
591	if (!title) {
592	titleEl.focus();
593	alert('Titel is verplicht');
594	return;
595	}
596	const saveBtn = $('#te-save');
597	saveBtn.disabled = true;
598	saveBtn.textContent = '⏳ Opslaan…';
599
600	try {
601	const j = await api('POST', '/admin/audio/api/' + encodeURIComponent(id), {
602	title,
603	artist: $('#te-artist').value.trim() \|\| null,
604	album: $('#te-album').value.trim() \|\| null,
605	duration: $('#te-duration').value ? Number($('#te-duration').value) : null,
606	cover_url: urlInput.value.trim() \|\| null,
607	});
608	if (!j.ok) throw new Error(j.error \|\| 'Opslaan mislukt');
609	if (typeof onSaved === 'function') onSaved(j.track \|\| { id, title,
610	artist: $('#te-artist').value.trim() \|\| null,
611	album: $('#te-album').value.trim() \|\| null,
612	cover_url: urlInput.value.trim() \|\| null });
613	close();
614	} catch (err) {
615	alert('Opslaan mislukt: ' + err.message);
616	saveBtn.disabled = false;
617	saveBtn.textContent = '💾 Opslaan';
618	}
619	});
620
621	// ── Auto-duur ───────────────────────────────────────────
622	// De server bepaalt de duur al automatisch bij upload. Dit is de vangnet/
623	// UX-laag: opent een admin een bestaande track zónder duur, dan lezen we 'm
624	// hier uit de audio-metadata en vullen het veld — zodat je nooit seconden
625	// hoeft te typen. Bestaande waarde wordt nooit overschreven. We halen de
626	// bytes via dezelfde header-gate als de speler (X-Audio-Player).
627	(async function autoDuration() {
628	const durEl = $('#te-duration');
629	if (!durEl \|\| !track.stream_url) return;
630	if (durEl.value && Number(durEl.value) > 0) return; // al ingevuld → met rust laten
631	let objUrl = null;
632	try {
633	const r = await fetch(track.stream_url, { credentials: 'same-origin', headers: { 'X-Audio-Player': '1' } });
634	if (!r.ok) return;
635	objUrl = URL.createObjectURL(await r.blob());
636	const probe = new Audio();
637	probe.preload = 'metadata';
638	probe.addEventListener('loadedmetadata', () => {
639	if (isFinite(probe.duration) && probe.duration > 0 && !(durEl.value && Number(durEl.value) > 0)) {
640	durEl.value = Math.round(probe.duration);
641	}
642	if (objUrl) URL.revokeObjectURL(objUrl);
643	});
644	probe.addEventListener('error', () => { if (objUrl) URL.revokeObjectURL(objUrl); });
645	probe.src = objUrl;
646	} catch (e) { if (objUrl) URL.revokeObjectURL(objUrl); }
647	})();
648
649	// Focus title for fast typing
650	setTimeout(() => $('#te-title').focus(), 60);
651	};
652	})();
653	</script>

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format