/* =========================================================================== iRaven App Store Studio — application shell: routing, project store, photo editor, brand editor, export. =========================================================================== */ const LS_KEY = 'socc360_studio_v4'; const IDX_KEY = 'iraven_projects_v1'; const PROJ_PREFIX = 'iraven_proj_'; /* ---------- project store ---------- */ function loadIndex() { try { const j = JSON.parse(localStorage.getItem(IDX_KEY) || '[]'); if (Array.isArray(j)) return j; } catch (e) {} return []; } function saveIndex(idx) { try { localStorage.setItem(IDX_KEY, JSON.stringify(idx)); } catch (e) {} } function loadProjectState(id) { try { const j = JSON.parse(localStorage.getItem(PROJ_PREFIX + id) || 'null'); if (j && j.slides) return j; } catch (e) {} return null; } function saveProjectState(id, st) { try { localStorage.setItem(PROJ_PREFIX + id, JSON.stringify(st)); } catch (e) {} } function newProjectId() { return 'p' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6); } function createProject(brand, slides, videos, assets) { const id = newProjectId(); const idx = loadIndex(); idx.unshift({ id, name: brand.name || 'App', brand, counts: { slides: slides.length, videos: videos.length } }); saveIndex(idx); const st = { brand, slides, videos, assets: assets || [], current: 0, vcurrent: 0, tab: 'photos' }; saveProjectState(id, st); if (window.__hasBackend) { fetch('/api/project/' + id, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify(st) }).catch(() => {}); } return id; } /* one-time migration of the original single-app Socc360 workspace */ function migrateLegacy() { if (loadIndex().length) return; const brand = { name: 'Socc360', tagline: 'Football from every angle.', accent1: '#4f86ff', accent2: '#f5a623' }; let st = null; try { const p = JSON.parse(localStorage.getItem(LS_KEY) || 'null'); if (p && p.slides) st = p; } catch (e) {} const slides = (st && st.slides) || window.makeDefaultSlides(); const videos = (st && st.videos) || window.makeDefaultVideos(); const id = newProjectId(); const idx = [{ id, name: 'Socc360', brand, counts: { slides: slides.length, videos: videos.length } }]; saveIndex(idx); saveProjectState(id, { brand, slides, videos, assets: [], current: (st && st.current) || 0, vcurrent: (st && st.vcurrent) || 0, tab: (st && st.tab) || 'photos' }); } /* concepts (AI wizard) → project */ function projectFromConcepts(c) { const tplCycle = ['headline-top', 'angled', 'callouts', 'poster', 'headline-bottom', 'big-stat', 'full-bleed', 'duo']; const bgCycle = ['stadium', 'ember', 'aurora', 'royal', 'floodlight', 'steel', 'dawn', 'minimal']; const brand = { name: c.name || 'App', tagline: c.tagline || '', logo: c.logo || null, accent1: /^#/.test(c.accent1 || '') ? c.accent1 : '#4f86ff', accent2: /^#/.test(c.accent2 || '') ? c.accent2 : '#f5a623' }; const slides = (c.screens || []).map((s, i) => ({ device: 'iphone', template: tplCycle[i % tplCycle.length], bg: bgCycle[i % bgCycle.length], accent: i % 2 ? 'brand2' : 'brand1', titleSize: 'md', headline: (s.headline || '').replace(/\\n/g, '\n'), subtitle: s.subtitle || '', callouts: '', image: null, image2: null, })); const vidTpl = ['rise', 'showcase', 'orbit']; const bgCycle2 = ['stadium', 'ember', 'aurora', 'royal', 'floodlight', 'steel', 'dawn', 'minimal']; const videos = (c.videos && c.videos.length ? c.videos : [{ headline: brand.name, subtitle: brand.tagline }]) .map((v, i) => ({ device: 'iphone', bg: bgCycle2[i % bgCycle2.length], accent: i % 2 ? 'brand2' : 'brand1', outro: true, name: 'Preview ' + String(i + 1).padStart(2, '0'), scenes: [window.makeScene({ headline: (v.headline || '').replace(/\\n/g, '\n'), subtitle: v.subtitle || '', captionPos: 'top', dur: 3, enter: { type: 'rise', dur: 0.8, ease: 'outBack' }, exit: { type: 'fade', dur: 0.5, ease: 'in' }, })], })); return createProject(brand, slides, videos, []); } /* ---------- photo slide thumbnail ---------- */ function Thumb({ slide, active, index, onClick }) { const dims = (window.DEVICES[slide.device] || window.DEVICES.iphone).canvas; const W = 116; const scale = W / dims.w; return ( ); } /* ---------- photo editor (rail + stage + controls) ---------- */ function PhotoEditor({ slides, setSlides, current, setCurrent, exportHostRef, onStatus, assets, setAssets, pickMedia, assist }) { const slide = slides[Math.min(current, slides.length - 1)]; const device = window.DEVICES[slide.device] || window.DEVICES.iphone; const dims = device.canvas; const stageRef = useRef(null); const [scale, setScale] = useState(0.3); useEffect(() => { const fit = () => { const el = stageRef.current; if (!el) return; const pad = 56; const s = Math.min((el.clientWidth - pad) / dims.w, (el.clientHeight - pad) / dims.h); setScale(Math.max(0.05, s)); }; fit(); const ro = new ResizeObserver(fit); if (stageRef.current) ro.observe(stageRef.current); return () => ro.disconnect(); }, [dims.w, dims.h]); const patch = (changes) => setSlides(arr => arr.map((s, i) => i === current ? { ...s, ...changes } : s)); const addSlide = () => { if (slides.length >= 10) return; const ns = { device: 'iphone', template: 'headline-top', bg: 'stadium', accent: 'brand1', titleSize: 'md', headline: 'New screen', subtitle: '', callouts: '', image: null, image2: null }; setSlides(arr => [...arr.slice(0, current + 1), ns, ...arr.slice(current + 1)]); setCurrent(current + 1); }; const delSlide = () => { if (slides.length <= 1) return; setSlides(arr => arr.filter((_, i) => i !== current)); setCurrent(c => Math.max(0, Math.min(c, slides.length - 2))); }; const move = (dir) => { const j = current + dir; if (j < 0 || j >= slides.length) return; setSlides(arr => { const a = [...arr]; const t = a[current]; a[current] = a[j]; a[j] = t; return a; }); setCurrent(j); }; const onUpload = (field, file) => { if (!file) return; window.storeAsset(setAssets, { blob: file, kind: 'image', source: 'upload', name: file.name }) .then(a => patch({ [field]: window.assetToRef(a) })) .catch(() => onStatus && onStatus('Could not store image')); }; const chooseFromStorage = (field) => pickMedia({ accept: 'image', title: 'Screenshot', aiKind: 'image', onPick: (a) => patch({ [field]: window.assetToRef(a) }) }); return (
{device.label} · {dims.w}×{dims.h}px
); } /* ---------- studio shell (one project) ---------- */ function StudioShell({ projId, onHome }) { const initRef = useRef(null); if (!initRef.current) { const st = loadProjectState(projId); initRef.current = st || { brand: window.CURRENT_BRAND, slides: window.makeBlankSlides(), videos: window.makeDefaultVideos(), assets: [], current: 0, vcurrent: 0, tab: 'photos' }; } const init = initRef.current; const [brand, setBrand] = useState(init.brand || { name: 'App', tagline: '', accent1: '#4f86ff', accent2: '#f5a623' }); const [showBrand, setShowBrand] = useState(false); window.CURRENT_BRAND = brand; // accents + outro read from here const [slides, setSlides] = useState(init.slides); const [current, setCurrent] = useState(Math.min(init.current, init.slides.length - 1)); /* migrate any legacy template-based previews into the scene model */ const [videos, setVideos] = useState(() => (init.videos || []).map(window.videoToScenes)); const [vcurrent, setVcurrent] = useState(Math.min(init.vcurrent, Math.max(0, (init.videos || []).length - 1))); const [assets, setAssets] = useState(() => { let a = init.assets || []; /* seed Socc360's shipped stock library into Storage the first time */ const isSocc = (init.brand && init.brand.name) === 'Socc360'; if (isSocc && !a.some(x => x.sub === 'bundled')) { a = [...window.bundledAssetRecords().filter(b => !a.some(x => x.path === b.path)), ...a]; } return a; }); const [tab, setTab] = useState(init.tab); const [exportMsg, setExportMsg] = useState(null); const [showCfg, setShowCfg] = useState(false); const [showStorage, setShowStorage] = useState(false); const [combineOpen, setCombineOpen] = useState(false); const [mediaPick, setMediaPick] = useState(null); // {accept,title,aiKind,onPick} const [genState, setGenState] = useState(null); // {kind,prompt,onAsset} const [assistState, setAssistState] = useState(null);// scope for AIAssist const exportHostRef = useRef(null); const exportRootRef = useRef(null); const videoStageRef = useRef(null); useEffect(() => { saveProjectState(projId, { brand, slides, videos, assets, current, vcurrent, tab }); const idx = loadIndex(); const it = idx.find(p => p.id === projId); if (it) { it.counts = { slides: slides.length, videos: videos.length }; it.brand = brand; it.name = brand.name; saveIndex(idx); } if (window.__hasBackend) { clearTimeout(window.__stateSyncT); window.__stateSyncT = setTimeout(() => { fetch('/api/project/' + projId, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ brand, slides, videos, assets, current, vcurrent, tab }) }).catch(() => {}); }, 1200); } }, [slides, current, videos, vcurrent, tab, brand, assets]); /* shared media helpers passed to both editors */ const pickMedia = (opts) => setMediaPick(opts); const genMedia = (opts) => setGenState(opts || {}); const assist = (scope) => setAssistState(scope); const storeUpload = async (file) => { if (!file) return null; if (file.type && file.type.startsWith('video')) { setExportMsg('Checking video…'); const p = await window.vidProbeVideo(file); if (!p.ok) { setExportMsg(window.VID_CODEC_MSG); setTimeout(() => setExportMsg(null), 9000); return null; } const a = await window.storeAsset(setAssets, { blob: file, kind: 'video', source: 'upload', name: file.name, dur: p.dur }); setExportMsg(null); return a; } return await window.storeAsset(setAssets, { blob: file, kind: file.type && file.type.startsWith('audio') ? 'audio' : 'image', source: 'upload', name: file.name }); }; useEffect(() => { if (exportHostRef.current && !exportRootRef.current) { exportRootRef.current = ReactDOM.createRoot(exportHostRef.current); } }, []); /* re-index any media used by this project that lost its Storage record (e.g. soundtracks/clips added through older flows) so it shows in Storage */ useEffect(() => { let live = true; window.reconcileAssets({ slides, videos, assets }, (fn) => { if (live) setAssets(fn); }); return () => { live = false; }; // eslint-disable-next-line }, []); /* photo export — selected screen only, exact App Store pixels */ const renderToHost = (sl) => new Promise(async (resolve) => { const host = exportHostRef.current; exportRootRef.current.render(null); for (let i = 0; i < 400 && host.firstChild; i++) await vidYield(); exportRootRef.current.render(); for (let i = 0; i < 800 && !host.firstChild; i++) await vidYield(); const imgs = host.querySelectorAll('img'); await Promise.all([...imgs].map(im => im.complete && im.naturalWidth ? Promise.resolve() : new Promise(r => { im.onload = im.onerror = r; }))); try { await document.fonts.ready; } catch (e) {} resolve(); }); const exportPhoto = async () => { const sl = slides[current]; const d = (window.DEVICES[sl.device] || window.DEVICES.iphone).canvas; setExportMsg('Rendering…'); try { await window.mediaPrewarm([sl.image, sl.image2]); await renderToHost(sl); const fontCss = await getFontEmbedCss(); const url = await window.htmlToImage.toPng(exportHostRef.current.firstChild, { width: d.w, height: d.h, pixelRatio: 1, backgroundColor: '#03050e', fontEmbedCSS: fontCss, style: { position: 'static', left: '0px', top: '0px', margin: '0' }, }); const a = document.createElement('a'); a.href = url; a.download = `${(brand.name || 'app').toLowerCase().replace(/[^a-z0-9]+/g, '')}-${sl.device}-${String(current + 1).padStart(2, '0')}.png`; a.click(); try { await window.storeAsset(setAssets, { dataUrl: url, kind: 'image', source: 'export', sub: 'screenshot', name: `${(brand.name || 'app').toLowerCase().replace(/[^a-z0-9]+/g, '')}-${String(current + 1).padStart(2, '0')}.png` }); } catch (e) {} setExportMsg('Saved ✓'); } catch (e) { setExportMsg('Export failed'); console.error(e); } setTimeout(() => setExportMsg(null), 1600); }; const exportVideo = () => { videoStageRef.current && videoStageRef.current.record(); }; const savePreview = () => { videoStageRef.current && videoStageRef.current.save && videoStageRef.current.save(); }; // App Store-ready export: runs the rendered mp4 through the server-side // ffmpeg pipeline (`/api/export`) so the output is guaranteed constant // 30 fps, H.264 high@4.0, AAC stereo, capped to 30s. App Store Connect // rejects the raw `Export video` output because the realtime encoder // can drift to <30 fps avg on slow CPUs. const [appStorePreset, setAppStorePreset] = useState( typeof window !== 'undefined' && window.APP_STORE_DEFAULT_PRESET ? window.APP_STORE_DEFAULT_PRESET : 'iphone-6-5-portrait'); const exportAppStore = () => { videoStageRef.current && videoStageRef.current.recordAppStore && videoStageRef.current.recordAppStore(appStorePreset); }; // Record on server — the deterministic offline path. Walks the timeline // frame-by-frame, captures each frame as JPEG, zips, ships to /api/render // where ffmpeg image2 assembles a CFR 30 mp4. Use this whenever the // browser-side WebCodecs export shows repeated/missing frames (live //