creator-editing-studio 1.3.6 → 1.3.7

package/template/preview/lib.mjs

@@ -0,0 +1,177 @@
+/**
+ * What the live preview needs from a video, worked out once and used by both halves:
+ *   server.mjs   — the local preview server (our machine, reads files directly)
+ *   publish.mjs  — sends the same things to the online preview, so it works in any chat with no restart
+ *
+ * For a video it finds: the preview module (Comp, META, BEATS), every file the edit reads with
+ * staticFile() as a small preview copy, and the edit compiled to one script.
+ */
+import {spawnSync} from 'node:child_process';
+import {createHash} from 'node:crypto';
+import {createRequire} from 'node:module';
+import {existsSync, mkdirSync, readdirSync, readFileSync, statSync} from 'node:fs';
+import {dirname, extname, join, resolve} from 'node:path';
+import {fileURLToPath, pathToFileURL} from 'node:url';
+
+export const HERE = dirname(fileURLToPath(import.meta.url));
+export const STUDIO = resolve(HERE, '..');
+export const PUBLIC = join(STUDIO, 'assets');
+export const SRC = join(STUDIO, 'src');
+const CACHE = join(HERE, '.cache');
+mkdirSync(CACHE, {recursive: true});
+
+const require = createRequire(join(STUDIO, 'package.json'));
+const esbuild = require('esbuild');
+const {FFMPEG} = await import(pathToFileURL(join(STUDIO, 'scripts', 'lib', 'media.mjs')).href);
+
+/* ----------------------------------------------------------------------------- which video */
+
+/**
+ * Everything the preview needs to know about one video, read from its own folder:
+ * src/videos/<name>/preview.tsx, the *Edit.tsx beside it, the asset folders its code mentions, its stems.
+ */
+export function configFor(name) {
+  if (!/^[a-z0-9][a-z0-9-]*$/.test(name ?? '')) throw new Error(`"${name}" is not a video name (lowercase letters, digits, dashes)`);
+  const code = join(SRC, 'videos', name);
+  if (!existsSync(join(code, 'preview.tsx'))) {
+    throw new Error(
+      `No src/videos/${name}/preview.tsx. Write it first: export Comp (the edit + its voice as <Audio src={staticFile('__stems/voice.mp3')} />), META and BEATS — copy src/videos/noufal/preview.tsx.`,
+    );
+  }
+  const source = readdirSync(code)
+    .filter((f) => /\.(tsx?|json)$/.test(f))
+    .map((f) => readFileSync(join(code, f), 'utf8'))
+    .join('\n');
+  const folders = new Set(['fonts']);
+  // Only the fonts this edit names — the studio has many, and each one is ~1 MB in the page.
+  const fonts = [...new Set([...source.matchAll(/fonts\/([\w.-]+\.(?:ttf|otf|woff2?))/g)].map((m) => m[1]))];
+  // The whole folder path up to the file name — cutouts live a level deeper (cutouts/<shot>/f123.png).
+  for (const m of source.matchAll(new RegExp(`projects/${name}/((?:[\\w-]+/)+)`, 'g'))) folders.add(`projects/${name}/${m[1].replace(/\/$/, '')}`);
+  for (const f of folders) if (!existsSync(join(PUBLIC, f))) folders.delete(f);
+
+  const stems = {};
+  if (existsSync(join(STUDIO, 'work', name, 'voice.wav'))) stems.voice = `work/${name}/voice.wav`;
+  const out = join(STUDIO, 'out', name);
+  if (existsSync(out))
+    for (const f of readdirSync(out)) {
+      const m = f.match(/^stem-(\w+)\.wav$/);
+      if (m) stems[m[1]] = `out/${name}/${f}`;
+    }
+
+  // The edit is the file named *Edit.tsx; its composition id is that name (as registered in Root.tsx).
+  const editFile = readdirSync(code).find((f) => /Edit\.tsx$/.test(f));
+  return {
+    project: name,
+    preview: `src/videos/${name}/preview.tsx`,
+    edit: `src/videos/${name}/${editFile ?? 'preview.tsx'}`,
+    composition: editFile?.replace(/\.tsx$/, '') ?? null,
+    assets: [...folders],
+    fonts,
+    stems,
+  };
+}
+
+/* ----------------------------------------------------------------------------- the footage */
+
+/** Every file the edit asks for by name (staticFile), plus the stems. Keys are the names the edit uses. */
+function assetList(c) {
+  const files = {};
+  const addDir = (rel) => {
+    const dir = join(PUBLIC, rel);
+    if (!existsSync(dir)) return;
+    for (const f of readdirSync(dir)) {
+      if (rel === 'fonts' && c.fonts && !c.fonts.includes(f)) continue;
+      if (statSync(join(dir, f)).isFile()) files[`${rel}/${f}`] = join(dir, f);
+    }
+  };
+  for (const d of c.assets) addDir(d);
+  for (const [k, f] of Object.entries(c.stems ?? {})) if (existsSync(join(STUDIO, f))) files[`__stems/${k}.mp3`] = join(STUDIO, f);
+  return Object.fromEntries(Object.entries(files).filter(([k]) => /\.(mp4|mov|png|jpe?g|webp|svg|ttf|woff2?|mp3)$/i.test(k)));
+}
+
+/**
+ * Preview copies: small enough to travel inside the player page, good enough to judge the edit in a chat-
+ * sized player. Anything fits a 540px box on its longest side. The final render always uses the originals.
+ */
+const FIT = "scale='if(gt(iw,ih),min(540,iw),-2)':'if(gt(iw,ih),-2,min(540,ih))'";
+const PROXY = {
+  video: ['-vf', FIT, '-an', '-c:v', 'libx264', '-preset', 'veryfast', '-crf', '31', '-g', '15', '-pix_fmt', 'yuv420p', '-movflags', '+faststart'],
+  image: ['-vf', FIT, '-c:v', 'libwebp', '-quality', '72'],
+  audio: ['-vn', '-ac', '2', '-ar', '44100', '-c:a', 'libmp3lame', '-b:a', '128k'],
+};
+const MIME = {'.mp4': 'video/mp4', '.webp': 'image/webp', '.mp3': 'audio/mpeg', '.svg': 'image/svg+xml', '.ttf': 'font/ttf', '.woff': 'font/woff', '.woff2': 'font/woff2', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.png': 'image/png'};
+
+function proxyOf(name, original) {
+  const st = statSync(original);
+  // The settings are part of the key, so changing them makes new copies instead of reusing old ones.
+  const key = createHash('sha1').update(`${original}:${st.size}:${st.mtimeMs}:${JSON.stringify(PROXY)}`).digest('hex').slice(0, 16);
+  const ext = extname(name).toLowerCase();
+  const kind = /\.(mp4|mov)$/.test(ext) ? 'video' : /\.(png|jpe?g)$/.test(ext) ? 'image' : ext === '.mp3' ? 'audio' : null;
+  if (!kind) return {file: original, mime: MIME[ext] ?? 'application/octet-stream'};
+  const outExt = kind === 'video' ? '.mp4' : kind === 'image' ? '.webp' : '.mp3';
+  const out = join(CACHE, `${key}${outExt}`);
+  if (!existsSync(out)) {
+    const r = spawnSync(FFMPEG, ['-y', '-v', 'error', '-i', original, ...PROXY[kind], out], {encoding: 'utf8'});
+    if (r.status !== 0) throw new Error(`could not make a preview copy of ${name}: ${r.stderr}`);
+  }
+  return {file: out, mime: MIME[outExt]};
+}
+
+/** [{name, file, mime, size, hash}] — hash is of the preview copy, so unchanged files are never re-sent. */
+export function buildManifest(c) {
+  return Object.entries(assetList(c)).map(([name, original]) => {
+    const p = proxyOf(name, original);
+    const hash = createHash('sha256').update(readFileSync(p.file)).digest('hex').slice(0, 32);
+    return {name, file: p.file, mime: p.mime, size: statSync(p.file).size, hash};
+  });
+}
+
+/* ----------------------------------------------------------------------------- the edit, compiled */
+
+/**
+ * The edit runs inside the player, so it must use the player's own React and Remotion — two copies
+ * would break every hook. Those imports become reads of window.__shared.
+ */
+const SHARED = ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'remotion'];
+const sharedPlugin = {
+  name: 'shared',
+  setup(b) {
+    b.onResolve({filter: new RegExp(`^(${SHARED.map((s) => s.replace('/', '\\/')).join('|')})$`)}, (a) => ({path: a.path, namespace: 'shared'}));
+    b.onLoad({filter: /.*/, namespace: 'shared'}, (a) => {
+      const keys = Object.keys(require(a.path)).filter((k) => /^[A-Za-z_$][\w$]*$/.test(k) && k !== 'default');
+      return {
+        contents: `const m = window.__shared[${JSON.stringify(a.path)}];\nexport default m;\n${keys.map((k) => `export const ${k} = m.${k};`).join('\n')}`,
+        loader: 'js',
+      };
+    });
+  },
+};
+
+const common = {bundle: true, jsx: 'automatic', logLevel: 'silent', loader: {'.png': 'dataurl', '.svg': 'dataurl'}};
+
+/** The edit as one script that sets window.__lpComp. Throws with a readable message if it doesn't compile. */
+export async function compileEdit(c) {
+  try {
+    const r = await esbuild.build({...common, entryPoints: [join(STUDIO, c.preview)], format: 'iife', globalName: '__lpComp', write: false, plugins: [sharedPlugin], define: {'process.env.NODE_ENV': '"development"'}});
+    return r.outputFiles[0].text;
+  } catch (e) {
+    throw new Error((e.errors ?? []).map((x) => `${x.location?.file ?? ''}:${x.location?.line ?? ''} ${x.text}`).join('\n') || String(e));
+  }
+}
+
+/**
+ * The player page. Customers get it pre-built (player.html, made when the studio ships), so they need none of
+ * the player's build tools; in the source studio it is built from ui/app.tsx.
+ */
+export async function playerHtml() {
+  const built = join(HERE, 'player.html');
+  if (existsSync(built) && !existsSync(join(HERE, 'ui', 'app.tsx'))) return readFileSync(built, 'utf8');
+  return buildUi();
+}
+
+export async function buildUi() {
+  const r = await esbuild.build({...common, entryPoints: [join(HERE, 'ui', 'app.tsx')], format: 'iife', write: false, minify: true, define: {'process.env.NODE_ENV': '"production"'}});
+  const js = r.outputFiles[0].text;
+  return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head>
+<body><div id="root"></div><script>${js.replace(/<\/script>/g, '<\\/script>')}</script></body></html>`;
+}