// Z-AMPP MAM bridge. On boot, reads ?asset= from URL and imports it. // Also exports pickFromMAM() for an in-app picker. type MAMAsset = { id: string; display_name?: string; filename?: string; }; async function getStreamURL(assetId: string): Promise { const r = await fetch('/api/v1/assets/' + assetId + '/stream', { credentials: 'omit' }); if (!r.ok) throw new Error('stream lookup failed: ' + r.status); const j = await r.json(); if (!j || !j.url) throw new Error('stream lookup: no url'); return j.url; } async function listAssets(limit = 200): Promise { const r = await fetch('/api/v1/assets?limit=' + limit, { credentials: 'omit' }); if (!r.ok) throw new Error('list assets failed: ' + r.status); const j = await r.json(); return (j && j.assets) || []; } function getMediaBridge(): any { const w = window as any; return w.__mediaBridge || w.mediaBridge || w.MediaBridge || (w.editor && w.editor.mediaBridge) || null; } async function importAsset(assetId: string, name?: string): Promise { const url = await getStreamURL(assetId); const safeName = (name || (assetId + '.mp4')).replace(/[^\w.\-]+/g, '_'); const store: any = (window as any).__projectStore; if (store && typeof store.getState === 'function' && typeof store.getState().importMedia === 'function') { const res = await fetch(url, { credentials: 'omit' }); if (!res.ok) throw new Error('fetch failed: ' + res.status); const blob = await res.blob(); const inferred = (safeName.toLowerCase().endsWith('.webm') ? 'video/webm' : safeName.toLowerCase().endsWith('.mov') ? 'video/quicktime' : safeName.toLowerCase().endsWith('.mp3') ? 'audio/mpeg' : safeName.toLowerCase().endsWith('.wav') ? 'audio/wav' : 'video/mp4'); const ct = (blob.type && blob.type !== 'application/octet-stream') ? blob.type : inferred; const file = new File([blob], safeName, { type: ct }); return store.getState().importMedia(file); } const bridge = getMediaBridge(); if (bridge && typeof bridge.importFromURL === 'function') return bridge.importFromURL(url, safeName); throw new Error('No import target'); } export async function pickFromMAM(): Promise { const assets = await listAssets(200); const overlay = document.createElement('div'); Object.assign(overlay.style, { position:'fixed',inset:'0',background:'rgba(0,0,0,0.72)',zIndex:'999999',display:'flex',alignItems:'center',justifyContent:'center' } as CSSStyleDeclaration); const modal = document.createElement('div'); Object.assign(modal.style, { width:'min(960px,92vw)',maxHeight:'84vh',background:'#161618',color:'#e8e8ea',borderRadius:'12px',padding:'16px',display:'flex',flexDirection:'column',gap:'12px',overflow:'hidden' } as CSSStyleDeclaration); modal.innerHTML = '
Import from Z-AMPP MAM
'; const grid = document.createElement('div'); Object.assign(grid.style, { display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))',gap:'10px',overflowY:'auto',padding:'4px' } as CSSStyleDeclaration); for (const a of assets) { const card = document.createElement('button'); Object.assign(card.style, { background:'#1f1f23',border:'1px solid #2c2c32',borderRadius:'8px',padding:'6px',color:'#e8e8ea',cursor:'pointer',display:'flex',flexDirection:'column',gap:'6px',textAlign:'left' } as CSSStyleDeclaration); const label = a.display_name || a.filename || a.id; card.innerHTML = '' + label + ''; card.addEventListener('click', async () => { card.disabled = true; card.style.opacity='0.5'; try { await importAsset(a.id, label); } catch(e){ alert('Import failed: '+(e as Error).message); } finally { card.disabled=false; card.style.opacity='1'; } }); grid.appendChild(card); } modal.appendChild(grid); overlay.appendChild(modal); document.body.appendChild(overlay); const close = () => overlay.remove(); overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); }); modal.querySelector('[data-close]')?.addEventListener('click', close); } function showBanner(text: string): void { let el = document.getElementById('zampp-import-banner'); if (!el) { el = document.createElement('div'); el.id = 'zampp-import-banner'; el.style.cssText = 'position:fixed;top:14px;left:50%;transform:translateX(-50%);background:rgba(31,58,208,0.95);color:#fff;font:500 13px/1.4 system-ui,sans-serif;padding:10px 18px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:2147483647;display:flex;align-items:center;gap:10px;letter-spacing:0.02em'; document.body.appendChild(el); } el.innerHTML = '' + text; if (!document.getElementById('zampp-banner-keyframes')) { const st = document.createElement('style'); st.id = 'zampp-banner-keyframes'; st.textContent = '@keyframes zamppPulse{0%,100%{opacity:0.4}50%{opacity:1}}'; document.head.appendChild(st); } } function hideBanner(): void { const el = document.getElementById('zampp-import-banner'); if (el) el.remove(); } export function initMAMBridge(): void { try { const qs = new URLSearchParams(window.location.search); const projectId = qs.get('project'); if (projectId) { try { window.localStorage.setItem('mamProjectId', projectId); } catch {} } (window as any).__zamppPickFromMAM = pickFromMAM; const assetId = qs.get('asset'); if (!assetId) return; showBanner('Loading clip from Z-AMPP MAM…'); // Auto-skip the startup chooser so MediaBridge initializes immediately. const clickMatching = (matches: string[]): boolean => { const btns = document.querySelectorAll('button,[role="button"],a'); for (const el of Array.from(btns)) { const t = (el.textContent || '').trim().toLowerCase(); if (matches.some(m => t === m || t.startsWith(m))) { (el as HTMLElement).click(); return true; } } return false; }; let dismissTries = 0; const dismissInterval = setInterval(() => { const acted = clickMatching(['horizontal', 'open editor', 'start fresh', 'skip tour']); if (dismissTries++ > 80) clearInterval(dismissInterval); if (acted) dismissTries = Math.max(0, dismissTries - 4); }, 250); let lastProjectId: string | null = null; let stableSince = 0; let imported = false; const tryImport = async (n = 0): Promise => { if (imported) return; const w = window as any; const st = w.__projectStore && w.__projectStore.getState && w.__projectStore.getState(); const p = st && st.project; const ready = !!(p && p.mediaLibrary); if (!ready) { if (n < 80) { setTimeout(() => tryImport(n + 1), 750); return; } console.error('[mam-bridge] project never loaded'); return; } if (p.id !== lastProjectId) { lastProjectId = p.id; stableSince = Date.now(); setTimeout(() => tryImport(n + 1), 750); return; } if (Date.now() - stableSince < 600) { setTimeout(() => tryImport(n + 1), 500); return; } try { await importAsset(assetId); imported = true; console.log('[mam-bridge] imported', assetId, 'into project', p.id); showBanner('Clip ready in media bin'); setTimeout(hideBanner, 2500); } catch (e) { if (n < 80) setTimeout(() => tryImport(n + 1), 1000); else { console.error('[mam-bridge] import retries exhausted', e); showBanner('Could not auto-import clip. Use Add Media instead.'); setTimeout(hideBanner, 6000); } } }; if (document.readyState === 'complete') tryImport(); else window.addEventListener('load', () => tryImport()); } catch (e) { console.error('[mam-bridge] init failed', e); } } initMAMBridge();