// shotseq.com — main app
// React + Babel. Reads i18n globals injected by Astro and encoder.js.
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"dark": false,
"accent": "#111111",
"showSettings": true
}/*EDITMODE-END*/;
// ── helpers ────────────────────────────────────────────────────────────────
const fmtTime = (s) => {
if (!isFinite(s)) return "00:00";
const m = Math.floor(s / 60);
const sec = Math.floor(s % 60);
return `${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
};
const fmtBytes = (n) => {
if (n < 1024) return `${n} B`;
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
return `${(n / 1024 / 1024).toFixed(1)} MB`;
};
const ASPECTS = {
"16:9": [16, 9],
"9:16": [9, 16],
"1:1": [1, 1],
"4:5": [4, 5],
"3:2": [3, 2],
};
const RESOLUTIONS = {
"720p": 720,
"1080p": 1080,
"1440p": 1440,
"2160p": 2160,
};
function dimsFor(aspect, res) {
const [aw, ah] = ASPECTS[aspect];
// res = height for landscape, longer-side for portrait/square
const shortSide = res;
// We treat res as the short side for portrait, height for landscape, side for square.
let w, h;
if (aw >= ah) {
h = shortSide;
w = Math.round((h * aw) / ah);
} else {
w = shortSide;
h = Math.round((w * ah) / aw);
}
// Round to even (codec requirement)
w = w + (w % 2);
h = h + (h % 2);
return [w, h];
}
const ACCENT_OPTIONS = ["#111111", "#D43A2F", "#1F5BFF", "#137A4A", "#7A3CC4"];
// ── Demo images ──────────────────────────────────────────────────────────
// Curated free photos from Unsplash. Loaded with CORS so we can canvas-encode.
// Photographer credits render under the filmstrip.
const DEMO_PHOTOS = [
{
id: "jUCQRQeRs3k",
by: "Willian Justen de Vasconcellos",
handle: "willianjusten",
url: "https://images.unsplash.com/photo-1521080755838-d2311117f767?w=1920&q=80&auto=format&fit=crop",
},
{
id: "wVjd0eWNqI8",
by: "Paul Earle",
handle: "paulearlephotography",
url: "https://images.unsplash.com/photo-1483354483454-4cd359948304?w=1920&q=80&auto=format&fit=crop",
},
{
id: "hXXRLtTxXCU",
by: "Brigitta Schneiter",
handle: "brisch27",
url: "https://images.unsplash.com/photo-1484902945377-bd2a38e625cd?w=1920&q=80&auto=format&fit=crop",
},
{
id: "6YmzwamGzCg",
by: "Mads Schmidt Rasmussen",
handle: "mvds",
url: "https://images.unsplash.com/photo-1519120944692-1a8d8cfc107f?w=1920&q=80&auto=format&fit=crop",
},
];
// Fallback palettes used only when a photo fails to load (offline, blocked).
const FALLBACK_PALETTES = [
[[0, "#f4d6a6"], [0.55, "#d6855a"], [1, "#4a1f1c"]],
[[0, "#1a3a5a"], [0.6, "#3e6b8c"], [1, "#a9c4d6"]],
[[0, "#1a1a1a"], [0.55, "#3a3633"], [1, "#a3998c"]],
[[0, "#2a0d12"], [0.5, "#7a2530"], [1, "#e6a48a"]],
];
function makeFallbackImage(idx, w = 1600, h = 900) {
const cv = document.createElement("canvas");
cv.width = w; cv.height = h;
const ctx = cv.getContext("2d");
const stops = FALLBACK_PALETTES[idx % FALLBACK_PALETTES.length];
const g = ctx.createLinearGradient(0, 0, 0, h);
stops.forEach(([p, c]) => g.addColorStop(p, c));
ctx.fillStyle = g; ctx.fillRect(0, 0, w, h);
return cv;
}
function loadCrossOriginImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "anonymous";
img.referrerPolicy = "no-referrer-when-downgrade";
img.onload = () => resolve(img);
img.onerror = () => reject(new Error("load_failed"));
img.src = url;
});
}
function buildDemoImages(perImageDefault = 2) {
return DEMO_PHOTOS.map((photo, i) =>
loadCrossOriginImage(photo.url)
.then((img) => ({
id: "demo-" + photo.id,
name: `unsplash-${photo.id}.jpg`,
file: null,
img,
url: photo.url,
duration: perImageDefault,
isDemo: true,
credit: photo,
}))
.catch(() => new Promise((resolve) => {
// Fallback: offline gradient placeholder, keeps the credit reference.
const cv = makeFallbackImage(i);
cv.toBlob((blob) => {
const blobUrl = URL.createObjectURL(blob);
const im = new Image();
im.onload = () => resolve({
id: "demo-fb-" + i,
name: `demo-0${i + 1}.png`,
file: null,
img: im,
url: blobUrl,
duration: perImageDefault,
isDemo: true,
credit: { ...photo, offline: true },
});
im.src = blobUrl;
}, "image/png");
}))
);
}
// ── load an uploaded File into an HTMLImageElement ─────────────────────────
function loadImageFile(file) {
return new Promise((resolve, reject) => {
const url = URL.createObjectURL(file);
const img = new Image();
img.onload = () => resolve({ img, url });
img.onerror = () => {
URL.revokeObjectURL(url);
reject(new Error("decode"));
};
img.src = url;
});
}
// ── small inline icons (stroke only, minimal) ──────────────────────────────
const Icon = {
Play: (p) => ,
Pause: (p) => ,
Plus: (p) => ,
X: (p) => ,
Sun: (p) => ,
Moon: (p) => ,
Download: (p) => ,
Drag: (p) => ,
};
// ── Top bar ────────────────────────────────────────────────────────────────
function TopBar({ tr, lang, setLang, dark, setDark, hasImages, onExport, onUpload, busy }) {
return (
shotseq.com
{tr("tagline")}
);
}
// ── Dropzone (empty state) ─────────────────────────────────────────────────
function EmptyDrop({ tr, onFiles }) {
const [over, setOver] = useState(false);
return (
{ e.preventDefault(); setOver(true); }}
onDragLeave={() => setOver(false)}
onDrop={(e) => {
e.preventDefault();
setOver(false);
const files = [...e.dataTransfer.files].filter((f) => f.type.startsWith("image/"));
if (files.length) onFiles(files);
}}
onClick={() => document.getElementById("__file_in").click()}
>
{tr("drop_title")}
{tr("drop_sub")}
{tr("footer")}
{images.length === 0 && (
{tr("select_image")}
)}
{fmtTime(currentTime)} / {fmtTime(total)}
{ setPlaying(false); setCurrentTime(parseFloat(e.target.value)); }}
/>
{(() => {
const [w, h] = dimsFor(settings.aspect, RESOLUTIONS[settings.resolution]);
return `${w}×${h}`;
})()} · {settings.fps}{tr("fps_short")}
);
}
// ── Filmstrip ──────────────────────────────────────────────────────────────
function Filmstrip({ tr, images, setImages, selectedId, setSelectedId, onAdd, currentTime, setCurrentTime }) {
const dragId = useRef(null);
const [dragOverId, setDragOverId] = useState(null);
const onDragStart = (id) => (e) => {
dragId.current = id;
e.dataTransfer.effectAllowed = "move";
// dummy
try { e.dataTransfer.setData("text/plain", id); } catch (_) {}
};
const onDragOver = (id) => (e) => {
e.preventDefault();
if (id !== dragOverId) setDragOverId(id);
};
const onDrop = (id) => (e) => {
e.preventDefault();
const from = dragId.current;
setDragOverId(null);
if (!from || from === id) return;
setImages((prev) => {
const next = [...prev];
const fi = next.findIndex((x) => x.id === from);
const ti = next.findIndex((x) => x.id === id);
if (fi < 0 || ti < 0) return prev;
const [m] = next.splice(fi, 1);
next.splice(ti, 0, m);
return next;
});
};
const setDur = (id, v) => {
setImages((prev) => prev.map((im) => im.id === id ? { ...im, duration: Math.max(0.1, v) } : im));
};
const remove = (id) => {
setImages((prev) => prev.filter((im) => im.id !== id));
if (selectedId === id) setSelectedId(null);
};
return (
{tr("images_n")(images.length)}
{images.length > 0 && images.every((i) => i.isDemo) ? tr("demo_hint") : tr("empty_hint")}
{images.map((im) => (
))}
{images.length > 0 && images.every((i) => i.isDemo) && (
)}
);
}
// ── Settings panel (right rail) ────────────────────────────────────────────
function FieldRow({ label, children }) {
return (
);
}
function SegRadio({ value, options, onChange }) {
return (
{options.map((o) => (
))}
);
}
function SettingsPanel({ tr, settings, setSettings, perImageDefault, setPerImageDefault, applyDurationAll }) {
const upd = (k) => (v) => setSettings((s) => ({ ...s, [k]: v }));
const [w, h] = dimsFor(settings.aspect, RESOLUTIONS[settings.resolution]);
return (
);
}
// ── Export overlay ─────────────────────────────────────────────────────────
function ExportOverlay({ tr, state, onClose, onAbort }) {
if (!state) return null;
return (
{state.phase === "encoding" && (
{tr("exporting")}
{tr("encoding_progress")(state.pct)}
{state.frame}/{state.total}
)}
{state.phase === "done" && (
{tr("download")}
{state.meta.filename} · {fmtBytes(state.meta.size)} · {tr("encoded_in")((state.meta.ms / 1000).toFixed(1))}
)}
{state.phase === "error" && (
{state.message}
)}
);
}
// ── App ────────────────────────────────────────────────────────────────────
function App() {
const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
const [lang, setLangRaw] = useState(() => {
if (window.__SHOTSEQ_LANG__ && I18N[window.__SHOTSEQ_LANG__]) return window.__SHOTSEQ_LANG__;
try {
const saved = localStorage.getItem("shotseq.lang");
if (saved && I18N[saved]) return saved;
} catch (_) {}
const nav = (navigator.language || "en").toLowerCase();
if (nav.startsWith("zh-tw") || nav.startsWith("zh-hk") || nav.includes("hant")) return "zh-TW";
if (nav.startsWith("zh")) return "zh-CN";
if (nav.startsWith("ja")) return "ja";
if (nav.startsWith("es")) return "es";
return "en";
});
const setLang = useCallback((v) => {
try { localStorage.setItem("shotseq.lang", v); } catch (_) {}
const target = window.__SHOTSEQ_LOCALE_URLS__ && window.__SHOTSEQ_LOCALE_URLS__[v];
if (target && target !== window.location.pathname) {
window.location.href = target;
return;
}
setLangRaw(v);
}, []);
const tr = useCallback((key) => {
const d = I18N[lang] || I18N.en;
return d[key] !== undefined ? d[key] : (I18N.en[key] !== undefined ? I18N.en[key] : key);
}, [lang]);
const [images, setImages] = useState([]);
const [demoLoaded, setDemoLoaded] = useState(false);
const [selectedId, setSelectedId] = useState(null);
const [perImageDefault, setPerImageDefault] = useState(2);
const [settings, setSettings] = useState({
aspect: "16:9",
resolution: "1080p",
fps: 30,
format: "mp4",
transition: "fade",
fadeDuration: 0.5,
fit: "contain",
background: "#000000",
});
const [currentTime, setCurrentTime] = useState(0);
const [playing, setPlaying] = useState(false);
const [exportState, setExportState] = useState(null);
const abortRef = useRef(null);
// Bootstrap demo images so the editor isn't an empty screen on first load.
useEffect(() => {
if (demoLoaded) return;
let cancelled = false;
(async () => {
const items = await Promise.all(buildDemoImages(perImageDefault));
if (cancelled) return;
setImages(items);
setSelectedId(items[0]?.id ?? null);
setDemoLoaded(true);
})();
return () => { cancelled = true; };
}, []); // eslint-disable-line
// Theme + accent
useEffect(() => {
document.documentElement.dataset.theme = t.dark ? "dark" : "light";
document.documentElement.style.setProperty("--accent", t.accent);
}, [t.dark, t.accent]);
// total duration
const total = useMemo(() => {
if (!images.length) return 0;
const { total } = window.buildSegments(images, settings.transition, settings.fadeDuration);
return total;
}, [images, settings.transition, settings.fadeDuration]);
// clamp currentTime
useEffect(() => {
if (currentTime > total) setCurrentTime(total);
}, [total]); // eslint-disable-line
// File ingestion. When the current set is demos, replace it.
const ingestFiles = useCallback(async (files) => {
const news = [];
for (const f of files) {
try {
const { img, url } = await loadImageFile(f);
news.push({
id: Math.random().toString(36).slice(2),
name: f.name,
file: f,
img,
url,
duration: perImageDefault,
isDemo: false,
});
} catch (_) {
// ignore
}
}
if (!news.length) return;
setImages((prev) => {
// If everything is a demo, replace; otherwise append.
const allDemo = prev.length > 0 && prev.every((p) => p.isDemo);
const base = allDemo ? [] : prev;
// Revoke demo blob URLs we're dropping.
if (allDemo) prev.forEach((p) => { try { URL.revokeObjectURL(p.url); } catch (_) {} });
const next = [...base, ...news];
setSelectedId((cur) => {
if (allDemo) return next[0].id;
return cur ?? next[0].id;
});
return next;
});
}, [perImageDefault]);
const onFileInput = (e) => {
const files = [...(e.target.files || [])].filter((f) => f.type.startsWith("image/"));
e.target.value = "";
if (files.length) ingestFiles(files);
};
// Drag-anywhere when images exist
useEffect(() => {
const onOver = (e) => { if (e.dataTransfer?.types?.includes("Files")) e.preventDefault(); };
const onDrop = (e) => {
if (!e.dataTransfer?.files?.length) return;
const files = [...e.dataTransfer.files].filter((f) => f.type.startsWith("image/"));
if (files.length) { e.preventDefault(); ingestFiles(files); }
};
window.addEventListener("dragover", onOver);
window.addEventListener("drop", onDrop);
return () => {
window.removeEventListener("dragover", onOver);
window.removeEventListener("drop", onDrop);
};
}, [ingestFiles]);
// Apply default duration to all images
const applyDurationAll = (v) => setImages((prev) => prev.map((im) => ({ ...im, duration: v })));
// Export
const doExport = async () => {
if (!images.length) return;
const [w, h] = dimsFor(settings.aspect, RESOLUTIONS[settings.resolution]);
const ac = new AbortController();
abortRef.current = ac;
setExportState({ phase: "encoding", pct: 0, frame: 0, total: 0 });
try {
const result = await window.shotseqEncode({
images, width: w, height: h, fps: settings.fps,
transition: settings.transition,
fadeDuration: settings.fadeDuration,
fit: settings.fit,
background: settings.background,
format: settings.format,
signal: ac.signal,
onProgress: (frame, total) => {
const pct = Math.round((frame / total) * 100);
setExportState((s) => s && s.phase === "encoding" ? { ...s, pct, frame, total } : s);
},
});
const url = URL.createObjectURL(result.blob);
const filename = `shotseq-${Date.now()}.${result.ext}`;
setExportState({
phase: "done",
url,
meta: { filename, size: result.blob.size, ms: result.durationMs },
});
} catch (err) {
if (err.code === "ABORTED") {
setExportState(null);
return;
}
const msg = err.code === "NO_CODEC" ? tr("no_codec") : tr("error_encode");
setExportState({ phase: "error", message: msg });
console.error("encode error:", err);
}
};
const abortExport = () => { abortRef.current?.abort(); };
const showSettings = t.showSettings && images.length > 0;
return (
);
}
ReactDOM.createRoot(document.getElementById("root")).render();
