);
}
/* =================================================
THUMBS + EXPORT
================================================= */
function MediaExportPanel({ images, setImages, duration, playRange, setPlayRange, exporting, onExport, exportProgress, activeImageIdx, aspect, fitMode, setFitMode, onLoadImageSet, myImages, setMyImages, orderMode, setOrderMode }) {
const { t } = useT();
const [dragIdx, setDragIdx] = useState(-1);
const [overIdx, setOverIdx] = useState(-1);
const [overSide, setOverSide] = useState("left");
const [previewIdx, setPreviewIdx] = useState(-1);
const uploadInputRef = useRef(null);
useEffect(() => {
if (previewIdx < 0) return;
const onKey = (e) => { if (e.key === "Escape") setPreviewIdx(-1); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [previewIdx]);
const onThumbDragStart = (i) => (e) => {
setDragIdx(i);
e.dataTransfer.effectAllowed = "move";
};
const onThumbDragOver = (i) => (e) => {
e.preventDefault();
const r = e.currentTarget.getBoundingClientRect();
const side = (e.clientX - r.left) < r.width / 2 ? "left" : "right";
setOverIdx(i); setOverSide(side);
};
const onThumbDrop = () => {
if (dragIdx === -1 || overIdx === -1 || dragIdx === overIdx) {
setDragIdx(-1); setOverIdx(-1); return;
}
const next = [...images];
const [moved] = next.splice(dragIdx, 1);
let target = overIdx > dragIdx ? overIdx - 1 : overIdx;
if (overSide === "right") target += 1;
next.splice(target, 0, moved);
setImages(next);
setDragIdx(-1); setOverIdx(-1);
};
const removeImage = (i) => async () => {
const img = images[i];
setImages(images.filter((_, j) => j !== i));
if (img && img.type === "local") {
try { await window.BeatflowMyImages.remove(img.id); } catch (e) { console.error(e); }
setMyImages(prev => prev.filter(m => m.id !== img.id));
try { URL.revokeObjectURL(img.src); } catch {}
}
};
const [start, end] = playRange;
const segDur = Math.max(0, end - start);
return (
);
}
/* =================================================
TWEAKS PANEL
================================================= */
function TweaksPanel({ tweaks, setTweak, visible, onClose }) {
const { t } = useT();
if (!visible) return null;
const accents = ["#ff3b4e", "#6b5cff", "#00d4ff", "#4ade80", "#fbbf24"];
return (
{accents.map(c => (
setTweak("accent", c)}
/>
))}
{["9:16", "1:1", "16:9"].map(a => (
))}
setTweak("pulseMs", +e.target.value)} />
{[{k:"bars",label: t("tweaks.wave_bars")},{k:"line",label: t("tweaks.wave_line")}].map(o => (
))}
);
}
/* =================================================
APP ROOT
================================================= */
function App() {
const [track, setTrack] = useState(DEMO_TRACK);
const [analyzed, setAnalyzed] = useState(true);
const [analyzing, setAnalyzing] = useState(false);
const [playing, setPlaying] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const [pulseKey, setPulseKey] = useState(0);
const [images, setImages] = useState(() => window.BeatflowUploads.getInitialImages());
const [playRange, setPlayRange] = useState([0, DEMO_TRACK.duration]);
const [exporting, setExporting] = useState(false);
const [exportProgress, setExportProgress] = useState(0);
const [tweaks, setTweaks] = useState(TWEAKS);
const [tweaksVisible, setTweaksVisible] = useState(false);
const [fitMode, setFitMode] = useState("cover"); // cover | contain | stretch
const [orderMode, setOrderMode] = useState("sequential"); // sequential | random
const [myImages, setMyImages] = useState([]); // IndexedDB 持久化的"我的图片"库
const audioRef = useRef(null);
const [lang, setLang] = useState(() => {
try { return localStorage.getItem("bf_lang") || "en"; } catch(e) { return "en"; }
});
const [stats, setStats] = useState({ analyzed: 0, exported: 0 });
const refreshStats = useCallback(async () => {
try {
const base = (window.BeatflowUploads.getApiUrl?.() || "").replace(/\/+$/, "");
const r = await fetch(`${base}/api/stats`);
if (r.ok) setStats(await r.json());
} catch (e) { /* ignore offline */ }
}, []);
useEffect(() => { refreshStats(); }, [refreshStats]);
const [theme, setTheme] = useState(() => {
try { return localStorage.getItem("bf_theme") || "dark"; } catch(e) { return "dark"; }
});
const t = useCallback((k) => (I18N[lang] && I18N[lang][k]) || I18N.en[k] || k, [lang]);
const toggleLang = () => { const n = lang === "zh" ? "en" : "zh"; setLang(n); try { localStorage.setItem("bf_lang", n); } catch(e) {} };
const toggleTheme = () => { const n = theme === "dark" ? "light" : "dark"; setTheme(n); try { localStorage.setItem("bf_theme", n); } catch(e) {} };
useEffect(() => { document.documentElement.setAttribute("data-theme", theme); }, [theme]);
useEffect(() => { document.documentElement.setAttribute("lang", lang === "zh" ? "zh-CN" : "en"); }, [lang]);
// 启动加载"我的图片"库；非空时默认全部填进节拍序列
useEffect(() => {
(async () => {
try {
await window.BeatflowMyImages.initDB();
const list = await window.BeatflowMyImages.list();
if (list.length > 0) {
setMyImages(list);
setImages(list);
}
} catch (e) { console.error("BeatflowMyImages init failed:", e); }
})();
// 卸载时回收所有 blob URL
return () => { window.BeatflowMyImages && window.BeatflowMyImages.revokeAll(myImages); };
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const onPickPreset = async (p) => {
setPlaying(false);
const next = typeof window.BeatflowUploads.pickPreset === "function"
? await window.BeatflowUploads.pickPreset(p)
: { ...p };
// 清理上一条 track 的 objectURL
if (track && track.audioUrl && track.audioUrl !== next.audioUrl) {
try { URL.revokeObjectURL(track.audioUrl); } catch {}
}
setTrack(next);
setPlayRange([0, next.duration || 0]);
setCurrentTime(0);
// 三种情况：
// 预分析 JSON 已并入（next.beat_times 非空）→ 视为已分析，跳过 API
// 有真 file 但无预分析 → 需要用户点"开始分析"
// 无真 file（纯 mock） → UI 按 bpm/duration 合成节拍，直接当已分析
const hasPreBeats = Array.isArray(next.beat_times) && next.beat_times.length > 0;
setAnalyzed(hasPreBeats || !next.file);
};
const onClearAudio = () => {
setPlaying(false);
if (track && track.audioUrl) {
try { URL.revokeObjectURL(track.audioUrl); } catch {}
}
setTrack(null);
setAnalyzed(false);
setCurrentTime(0);
setPlayRange([0, 0]);
};
// 首次加载：自动载入随机预置的音频和预分析节拍
useEffect(() => { onPickPreset(DEMO_TRACK); }, []);
const onLoadImageSet = (set) => {
if (set && set.kind === "mine") { setImages(myImages); return; }
setImages(window.BeatflowUploads.loadImageSet(set));
};
const duration = track?.duration || 0;
const bpm = track?.bpm || 0;
// 真 API 给了 beat_times 就用它；否则按 BPM 合成（预置曲目）
const beats = useMemo(() => {
if (!analyzed) return [];
if (Array.isArray(track?.beat_times) && track.beat_times.length) return track.beat_times;
return buildBeats(bpm, duration);
}, [analyzed, bpm, duration, track]);
const waveform = useMemo(() => analyzed ? buildWaveform(2400, bpm || 120, duration) : null, [analyzed, bpm, duration]);
// 随机顺序：一个下标置换数组，长度 === images.length
// 切到 random 或 images.length 变化时重洗一次
const [randomOrder, setRandomOrder] = useState([]);
useEffect(() => {
if (orderMode !== "random") { setRandomOrder([]); return; }
const a = Array.from({ length: images.length }, (_, i) => i);
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
setRandomOrder(a);
}, [orderMode, images.length]);
// Which image is showing? image index = (beat index passed) mod images.length
const activeImageIdx = useMemo(() => {
if (!images.length) return 0;
let passed = 0;
for (let i = 0; i < beats.length; i++) if (beats[i] <= currentTime) passed = i + 1;
return Math.max(0, (passed - 1)) % images.length;
}, [currentTime, beats, images.length]);
// 随机模式下：把 activeImageIdx 映射成 images 中的另一个下标
const displayImageIdx = useMemo(() => {
if (orderMode !== "random" || randomOrder.length !== images.length) return activeImageIdx;
return randomOrder[activeImageIdx] ?? activeImageIdx;
}, [activeImageIdx, orderMode, randomOrder, images.length]);
/* ---- playback loop ---- */
const rafRef = useRef(null);
const startTsRef = useRef(0);
const startAtRef = useRef(0);
const lastBeatIdxRef = useRef(-1);
// 真实音频 play/pause 同步
useEffect(() => {
const el = audioRef.current;
if (!el || !track?.audioUrl) return;
if (playing) {
if (currentTime < playRange[0] || currentTime >= playRange[1]) el.currentTime = playRange[0];
el.play().catch(() => {});
} else {
el.pause();
}
}, [playing, track?.audioUrl]);
useEffect(() => {
if (!playing) { cancelAnimationFrame(rafRef.current); return; }
const [rStart, rEnd] = playRange;
const hasRealAudio = !!(audioRef.current && track?.audioUrl);
let startT = currentTime;
if (currentTime < rStart || currentTime >= rEnd) startT = rStart;
startTsRef.current = performance.now();
startAtRef.current = startT;
if (startT !== currentTime) setCurrentTime(startT);
if (hasRealAudio) { try { audioRef.current.currentTime = startT; } catch {} }
lastBeatIdxRef.current = -1;
for (let i = 0; i < beats.length; i++) if (beats[i] <= startT) lastBeatIdxRef.current = i;
const tick = () => {
let t;
if (hasRealAudio) {
t = audioRef.current.currentTime;
if (t >= rEnd || audioRef.current.ended) {
try { audioRef.current.currentTime = rStart; } catch {}
t = rStart;
lastBeatIdxRef.current = -1;
}
} else {
const elapsed = (performance.now() - startTsRef.current) / 1000;
t = startAtRef.current + elapsed;
if (t >= rEnd) {
t = rStart;
startTsRef.current = performance.now();
startAtRef.current = rStart;
lastBeatIdxRef.current = -1;
for (let i = 0; i < beats.length; i++) if (beats[i] <= rStart) lastBeatIdxRef.current = i;
}
}
setCurrentTime(t);
let newLast = lastBeatIdxRef.current;
for (let i = lastBeatIdxRef.current + 1; i < beats.length; i++) {
if (beats[i] <= t) newLast = i; else break;
}
if (newLast !== lastBeatIdxRef.current) {
lastBeatIdxRef.current = newLast;
setPulseKey(k => k + 1);
}
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
}, [playing, beats, duration, playRange, track?.audioUrl]);
/* ---- keyboard ---- */
useEffect(() => {
const onKey = (e) => {
if (e.target.tagName === "INPUT" || e.target.tagName === "SELECT" || e.target.tagName === "TEXTAREA") return;
if (e.code === "Space") { e.preventDefault(); setPlaying(p => !p); }
if (e.key === "Escape") setTweaksVisible(false);
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, []);
/* ---- seek ---- */
const onSeek = useCallback((t) => {
const clamped = Math.max(0, Math.min(duration, t));
setCurrentTime(clamped);
if (audioRef.current && track?.audioUrl) {
try { audioRef.current.currentTime = clamped; } catch {}
}
if (playing) {
startTsRef.current = performance.now();
startAtRef.current = clamped;
}
}, [duration, playing, track?.audioUrl]);
/* ---- analyze (uploads.js swap-in) ---- */
const onAnalyze = async () => {
if (!track) return;
setAnalyzing(true);
setAnalyzed(false);
try {
if (typeof window.BeatflowUploads.analyzeTrack === "function") {
const next = await window.BeatflowUploads.analyzeTrack(track);
setTrack(next);
setPlayRange([0, next.duration || 0]);
setCurrentTime(0);
} else {
// fallback 给原型：setTimeout mock
await new Promise((r) => setTimeout(r, 900));
}
setAnalyzed(true);
refreshStats();
} catch (e) {
alert(`分析失败：${e?.message || e}`);
} finally {
setAnalyzing(false);
}
};
/* ---- add images (via uploads.js swap-in) ---- */
/* ---- export (simulated) ---- */
/* ---- export (delegated to export.js swap-in) ---- */
const onExport = async () => {
setExporting(true);
setExportProgress(0);
try {
const imgsForExport = (orderMode === "random" && randomOrder.length === images.length)
? randomOrder.map(i => images[i])
: images;
await window.BeatflowExport.exportVideo({
track, images: imgsForExport, beats, playRange,
aspect: tweaks.aspect || "9:16",
fitMode, format: "webm", fps: 30,
onProgress: setExportProgress,
});
try {
const base = (window.BeatflowUploads.getApiUrl?.() || "").replace(/\/+$/, "");
await fetch(`${base}/api/export-log`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
name: track?.name,
duration: (playRange?.[1] ?? 0) - (playRange?.[0] ?? 0),
aspect: tweaks.aspect || "9:16",
}),
});
} catch (e) { /* ignore offline */ }
refreshStats();
} catch (err) {
if (err && err.name !== "AbortError") console.error(err);
} finally {
setExporting(false);
}
};
/* ---- tweaks ---- */
const setTweak = (k, v) => {
setTweaks(t => ({ ...t, [k]: v }));
sendTweak({ [k]: v });
if (k === "accent") document.documentElement.style.setProperty("--accent", v);
};
useEffect(() => {
if (tweaks.accent) document.documentElement.style.setProperty("--accent", tweaks.accent);
}, []);
/* ---- edit-mode protocol ---- */
useEffect(() => {
const onMsg = (e) => {
if (!e.data) return;
if (e.data.type === "__activate_edit_mode") setTweaksVisible(true);
if (e.data.type === "__deactivate_edit_mode") setTweaksVisible(false);
};
window.addEventListener("message", onMsg);
try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch(e) {}
return () => window.removeEventListener("message", onMsg);
}, []);
return (
setPlaying(p => !p)}
playRange={playRange}
onPickPreset={onPickPreset}
onClearAudio={onClearAudio}
/>
setTweak("aspect", a)}
playing={playing} onPlay={() => setPlaying(p => !p)}
currentTime={currentTime} duration={duration} beats={beats}
onSeek={onSeek}
images={images} activeImageIdx={displayImageIdx}
pulseKey={pulseKey} pulseMs={tweaks.pulseMs || 180}
exporting={exporting} exportProgress={exportProgress}
fitMode={fitMode}
playRange={playRange} setPlayRange={setPlayRange}
/>
setTweaksVisible(false)} />
{/* 真实音频元素（隐藏），驱动播放；源由 track.audioUrl 提供 */}
);
}
ReactDOM.createRoot(document.getElementById("root")).render(
);
)}
)}