feat(remotion): isolated client-side player (Approach A) — templates render in-browser

Render the React-Three-Fiber-v9 (React 19) templates client-side without touching the
React-18 Next host: a standalone Vite app (services/remotion/player) mounts
@remotion/player with the real FlexStory composition. The studio will embed it via an
iframe and feed scene data (URL hash for first paint, postMessage for live edits).

- player/main.tsx: reads {props, aspect, watermark}, computes duration via
  calcFlexStoryMetadata, renders <Player>. Free tier shows a watermark overlay
  (preview only — clean export stays server-authorized).
- vite.config.player.ts: builds to player-dist/ with relative base (servable at /player/).
- @remotion/player + vite added.

Verified: vite build bundles FlexStory + three.js (672 modules → 1.3MB) and serves
at /player/index.html (200). Browser render to be confirmed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-25 12:11:27 +03:30
parent 40fdcf280f
commit dc5ff09b67
6 changed files with 1556 additions and 2 deletions
+19
View File
@@ -0,0 +1,19 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
/**
* Builds the standalone client-side player (services/remotion/player) into a static
* bundle the Next app embeds via <iframe>. Relative base so it can be served from a
* sub-path (e.g. /player/). React-19 here, independent of the React-18 host.
*/
export default defineConfig({
plugins: [react()],
root: path.resolve(__dirname, "player"),
base: "./",
build: {
outDir: path.resolve(__dirname, "player-dist"),
emptyOutDir: true,
chunkSizeWarningLimit: 4000,
},
});