// Z-AMPP in-house editor — Phase A
// Vanilla JS, no framework. Single track, single video preview, in/out markers per clip.
// Reads assets from /api/v1/assets, streams via /api/v1/assets/:id/stream.
(function () {
const $ = (id) => document.getElementById(id);
// ── State ────────────────────────────────────────────────
const state = {
assets: [], // [{ id, display_name, status, duration_ms, ...}]
filtered: [],
clips: [], // [{ uid, assetId, name, src, inSec, outSec, durSec, thumbUrl }]
selectedClipUid: null,
isPlaying: false,
nextUid: 1,
drafts: loadDrafts(),
};
function loadDrafts() {
try { return JSON.parse(localStorage.getItem('zampp-edit-drafts') || '[]'); }
catch { return []; }
}
function persistDrafts() {
try { localStorage.setItem('zampp-edit-drafts', JSON.stringify(state.drafts)); } catch {}
}
// Thumbnails: /api/v1/assets/:id/thumbnail returns JSON { url }, not the image itself.
const _thumbCache = new Map();
async function _thumbFor(id) {
if (_thumbCache.has(id)) return _thumbCache.get(id);
const p = (async () => {
try {
const r = await fetch('/api/v1/assets/' + id + '/thumbnail', { credentials: 'include' });
if (!r.ok) return null;
const j = await r.json();
return j.url || null;
} catch { return null; }
})();
_thumbCache.set(id, p);
return p;
}
function hydrateThumbnails(root) {
(root || document).querySelectorAll('img[data-asset-thumb]').forEach(async (img) => {
if (img.dataset.hydrated === '1') return;
img.dataset.hydrated = '1';
const id = img.dataset.assetThumb;
const url = await _thumbFor(id);
if (url) img.src = url;
else img.style.opacity = '0.2';
});
}
// ── API ──────────────────────────────────────────────────
async function apiGet(path) {
const r = await fetch('/api/v1' + path, { credentials: 'include' });
if (!r.ok) throw new Error('HTTP ' + r.status + ' on ' + path);
return r.json();
}
async function loadAssets() {
try {
const j = await apiGet('/assets?limit=500');
state.assets = (j.assets || []).filter(a => a.media_type === 'video' && a.status === 'ready');
renderAssets();
} catch (e) {
$('assetList').innerHTML = 'Failed: ' + esc(e.message) + '
';
}
}
async function streamUrlFor(assetId) {
const j = await apiGet('/assets/' + assetId + '/stream');
return j.url;
}
// ── Helpers ──────────────────────────────────────────────
function esc(s) {
return String(s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":"'"}[c]));
}
function fmtTime(sec) {
if (sec == null || isNaN(sec)) return '--:--.--';
sec = Math.max(0, sec);
const m = Math.floor(sec / 60);
const s = sec - m * 60;
return String(m).padStart(2,'0') + ':' + s.toFixed(2).padStart(5,'0');
}
function thumbUrl(assetId) { return '/api/v1/assets/' + assetId + '/thumbnail'; }
// ── Render: asset library ────────────────────────────────
function renderAssets() {
const q = ($('assetSearch').value || '').trim().toLowerCase();
state.filtered = state.assets.filter(a => !q || (a.display_name || '').toLowerCase().includes(q));
const list = $('assetList');
if (state.filtered.length === 0) {
list.innerHTML = '' + (q ? 'No matches.' : 'No video assets yet. Upload from Ingest.') + '
';
return;
}
list.innerHTML = state.filtered.map(a => {
const name = a.display_name || a.filename || a.id;
return '' +
'
![]()
' +
'
' + esc(name) + '
' +
'
' +
'
' +
'
![]()
' +
'
' +
'
' + esc(c.name) + '
' +
'
' + fmtTime(c.inSec) + '' + fmtTime(c.outSec) + '
' +
'
Select a clip on the timeline to inspect.
';
return;
}
const trimmed = Math.max(0, c.outSec - c.inSec);
host.innerHTML =
'' +
'
Clip' +
'
' + esc(c.name) + '
' +
'
' +
'
Trim' +
'
' +
'- In
- ' + fmtTime(c.inSec) + '
' +
'- Out
- ' + fmtTime(c.outSec) + '
' +
'- Length
- ' + fmtTime(trimmed) + '
' +
'- Source
- ' + fmtTime(c.durSec) + '
' +
'
' +
'
' +
'
Actions' +
'
' +
'' +
'' +
'' +
'' +
'' +
'' +
'
' +
'