@open-motion/core 0.0.1-alpha.0 → 0.0.2

package/README.md

@@ -0,0 +1,38 @@
+# @open-motion/core
+
+Core React primitives, hooks, and player for **OpenMotion** — the open-source programmatic video engine.
+
+## ✨ Features
+
+- ⚛️ **React Components**: Use `Composition`, `Sequence`, `Video`, and more to build your video.
+- 🎣 **Powerful Hooks**: Access `useCurrentFrame`, `useVideoConfig`, and `getInputProps` anywhere.
+- ⏱️ **Animation Utilities**: High-performance `spring` animations and multi-segment `interpolate` functions.
+- 🎞️ **Interactive Player**: Real-time preview and scrubbing during development.
+
+## 🚀 Installation
+
+```bash
+pnpm add @open-motion/core
+# or
+npm install @open-motion/core
+```
+
+## 📖 Usage
+
+```tsx
+import { Composition, Sequence, spring, useCurrentFrame, useVideoConfig } from "@open-motion/core";
+
+const MyVideo = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const scale = spring({ frame, fps });
+
+  return (
+    <div style={{ flex: 1, backgroundColor: "white", display: "flex", justifyContent: "center", alignItems: "center" }}>
+      <h1 style={{ transform: `scale(${scale})` }}>Hello OpenMotion</h1>
+    </div>
+  );
+};
+```
+
+Learn more at the [main OpenMotion repository](https://github.com/jsongo/open-motion).

package/dist/Player.js

@@ -7,8 +7,23 @@ const index_1 = require("./index");
 const Player = ({ component: Component, config, inputProps = {}, controls = true, autoPlay = false, loop = false, }) => {
     const [frame, setFrame] = (0, react_1.useState)(0);
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(autoPlay);
+    const [scale, setScale] = (0, react_1.useState)(1);
+    const containerRef = (0, react_1.useRef)(null);
     const requestRef = (0, react_1.useRef)();
     const lastTimeRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        const handleResize = () => {
+            if (containerRef.current) {
+                const parentWidth = containerRef.current.parentElement?.clientWidth || window.innerWidth;
+                const s = Math.min(1, (parentWidth - 40) / config.width);
+                if (s > 0)
+                    setScale(s);
+            }
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [config.width]);
     const animate = (0, react_1.useCallback)((time) => {
         if (lastTimeRef.current !== undefined) {
             const deltaTime = time - lastTimeRef.current;
@@ -51,12 +66,19 @@ const Player = ({ component: Component, config, inputProps = {}, controls = true
         setFrame(Number(e.target.value));
         setIsPlaying(false);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'inline-block', border: '1px solid #ccc', borderRadius: '4px', overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, style: {
+            display: 'inline-block',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+            overflow: 'hidden',
+            background: '#f0f0f0',
+            width: config.width * scale,
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                     width: config.width,
                     height: config.height,
-                    position: 'relative',
-                    background: '#000',
-                    overflow: 'hidden'
-                }, children: (0, jsx_runtime_1.jsx)(index_1.CompositionProvider, { config: config, frame: Math.floor(frame), inputProps: inputProps, children: (0, jsx_runtime_1.jsx)(Component, {}) }) }), controls && ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '10px', background: '#f0f0f0', display: 'flex', alignItems: 'center', gap: '10px' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: togglePlay, children: isPlaying ? 'Pause' : 'Play' }), (0, jsx_runtime_1.jsx)("input", { type: "range", min: "0", max: config.durationInFrames - 1, step: "1", value: Math.floor(frame), onChange: handleSeek, style: { flex: 1 } }), (0, jsx_runtime_1.jsxs)("div", { style: { minWidth: '80px', fontSize: '12px', textAlign: 'right' }, children: [Math.floor(frame), " / ", config.durationInFrames] })] }))] }));
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'top left',
+                    background: '#fff'
+                }, children: (0, jsx_runtime_1.jsx)(index_1.CompositionProvider, { config: config, frame: frame, inputProps: inputProps, children: (0, jsx_runtime_1.jsx)(Component, {}) }) }), controls && ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '10px', background: '#f0f0f0', display: 'flex', alignItems: 'center', gap: '10px', position: 'relative', zIndex: 10 }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: togglePlay, children: isPlaying ? 'Pause' : 'Play' }), (0, jsx_runtime_1.jsx)("input", { type: "range", min: "0", max: config.durationInFrames - 1, step: "1", value: Math.floor(frame), onChange: handleSeek, style: { flex: 1 } }), (0, jsx_runtime_1.jsxs)("div", { style: { minWidth: '80px', fontSize: '12px', textAlign: 'right', color: '#000' }, children: [Math.floor(frame), " / ", config.durationInFrames] })] }))] }));
 };
 exports.Player = Player;

package/dist/index.d.ts

@@ -34,13 +34,27 @@ export declare const delayRender: (label?: string) => number;
  * continueRender: Signal that an async resource has finished loading.
  */
 export declare const continueRender: (handle: number) => void;
+/**
+ * Easing functions
+ */
+export type EasingFunction = (t: number) => number;
+export declare const Easing: {
+    linear: (t: number) => number;
+    ease: (t: number) => number;
+    in: (t: number) => number;
+    out: (t: number) => number;
+    inOut: (t: number) => number;
+    bezier: (_x1: number, y1: number, _x2: number, y2: number) => (t: number) => number;
+    step: (t: number) => 0 | 1;
+};
 /**
  * interpolate function: maps a value from one range to another.
  * Compatible with Remotion's interpolate.
  */
-export declare const interpolate: (input: number, inputRange: [number, number], outputRange: [number, number], options?: {
+export declare const interpolate: (input: number, inputRange: number[], outputRange: number[], options?: {
     extrapolateLeft?: "extrapolate" | "clamp";
     extrapolateRight?: "extrapolate" | "clamp";
+    easing?: EasingFunction;
 }) => number;
 /**
  * Time Hijacking Bridge Script
@@ -74,4 +88,17 @@ export declare const Audio: React.FC<{
     startFrom?: number;
     volume?: number;
 }>;
+/**
+ * Video Component
+ * Supports frame-accurate seeking and synchronization with the engine.
+ */
+export declare const Video: React.FC<{
+    src: string;
+    startFrom?: number;
+    endAt?: number;
+    playbackRate?: number;
+    muted?: boolean;
+    volume?: number;
+    style?: React.CSSProperties;
+}>;
 export * from './Player';

package/dist/index.js

@@ -10,25 +10,76 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Audio = exports.spring = exports.Sequence = exports.getTimeHijackScript = exports.interpolate = exports.continueRender = exports.delayRender = exports.Composition = exports.getCompositionById = exports.getCompositions = exports.registerComposition = exports.getInputProps = exports.useAbsoluteFrame = exports.useCurrentFrame = exports.useVideoConfig = exports.CompositionProvider = void 0;
+exports.Video = exports.Audio = exports.spring = exports.Sequence = exports.getTimeHijackScript = exports.interpolate = exports.Easing = exports.continueRender = exports.delayRender = exports.Composition = exports.getCompositionById = exports.getCompositions = exports.registerComposition = exports.getInputProps = exports.useAbsoluteFrame = exports.useCurrentFrame = exports.useVideoConfig = exports.CompositionProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const VideoConfigContext = (0, react_1.createContext)(null);
 const FrameContext = (0, react_1.createContext)(0);
 const AbsoluteFrameContext = (0, react_1.createContext)(0);
 const InputPropsContext = (0, react_1.createContext)({});
 const CompositionProvider = ({ config, frame, inputProps = {}, children }) => {
-    return ((0, jsx_runtime_1.jsx)(VideoConfigContext.Provider, { value: config, children: (0, jsx_runtime_1.jsx)(InputPropsContext.Provider, { value: inputProps, children: (0, jsx_runtime_1.jsx)(AbsoluteFrameContext.Provider, { value: frame, children: (0, jsx_runtime_1.jsx)(FrameContext.Provider, { value: frame, children: children }) }) }) }));
+    const [currentFrame, setCurrentFrame] = react_1.default.useState(frame);
+    react_1.default.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            window.__OPEN_MOTION_READY__ = true;
+        }
+    }, [currentFrame]);
+    react_1.default.useEffect(() => {
+        setCurrentFrame(frame);
+    }, [frame]);
+    react_1.default.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const handler = (e) => {
+                if (typeof e.detail?.frame === 'number') {
+                    setCurrentFrame(e.detail.frame);
+                }
+            };
+            window.addEventListener('open-motion-frame-update', handler);
+            return () => window.removeEventListener('open-motion-frame-update', handler);
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(VideoConfigContext.Provider, { value: config, children: (0, jsx_runtime_1.jsx)(InputPropsContext.Provider, { value: inputProps, children: (0, jsx_runtime_1.jsx)(AbsoluteFrameContext.Provider, { value: currentFrame, children: (0, jsx_runtime_1.jsx)(FrameContext.Provider, { value: currentFrame, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            width: config.width,
+                            height: config.height,
+                            backgroundColor: 'white',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            position: 'relative',
+                            overflow: 'hidden',
+                        }, children: children }) }) }) }) }));
 };
 exports.CompositionProvider = CompositionProvider;
 const useVideoConfig = () => {
     const context = (0, react_1.useContext)(VideoConfigContext);
-    if (!context)
-        throw new Error('useVideoConfig must be used within CompositionProvider');
+    if (!context) {
+        return { width: 1920, height: 1080, fps: 30, durationInFrames: 100 };
+    }
     return context;
 };
 exports.useVideoConfig = useVideoConfig;
@@ -71,9 +122,9 @@ let delayRenderCounter = 0;
  */
 const delayRender = (label) => {
     const handle = delayRenderCounter++;
-    console.debug(`OpenMotion: delayRender[${handle}] ${label || ''}`);
     if (typeof window !== 'undefined') {
         window.__OPEN_MOTION_DELAY_RENDER_COUNT__ = (window.__OPEN_MOTION_DELAY_RENDER_COUNT__ || 0) + 1;
+        console.debug(`[OpenMotion] delayRender: ${label || handle}, count: ${window.__OPEN_MOTION_DELAY_RENDER_COUNT__}`);
     }
     return handle;
 };
@@ -82,25 +133,81 @@ exports.delayRender = delayRender;
  * continueRender: Signal that an async resource has finished loading.
  */
 const continueRender = (handle) => {
-    console.debug(`OpenMotion: continueRender[${handle}]`);
     if (typeof window !== 'undefined') {
         window.__OPEN_MOTION_DELAY_RENDER_COUNT__ = Math.max(0, (window.__OPEN_MOTION_DELAY_RENDER_COUNT__ || 0) - 1);
+        console.debug(`[OpenMotion] continueRender: ${handle}, count: ${window.__OPEN_MOTION_DELAY_RENDER_COUNT__}`);
     }
 };
 exports.continueRender = continueRender;
+exports.Easing = {
+    linear: (t) => t,
+    ease: (t) => t * t * (3 - 2 * t),
+    in: (t) => t * t,
+    out: (t) => t * (2 - t),
+    inOut: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+    bezier: (_x1, y1, _x2, y2) => {
+        // Simple cubic bezier approximation (y-only for now)
+        return (t) => {
+            const u = 1 - t;
+            const tt = t * t;
+            const uu = u * u;
+            const ttt = tt * t;
+            // P0=0, P3=1
+            return 3 * uu * t * y1 + 3 * u * tt * y2 + ttt;
+        };
+    },
+    step: (t) => (t < 0.5 ? 0 : 1),
+};
 /**
  * interpolate function: maps a value from one range to another.
  * Compatible with Remotion's interpolate.
  */
 const interpolate = (input, inputRange, outputRange, options) => {
-    const [minInput, maxInput] = inputRange;
-    const [minOutput, maxOutput] = outputRange;
-    let result = minOutput + ((input - minInput) / (maxInput - minInput)) * (maxOutput - minOutput);
-    if (options?.extrapolateLeft === 'clamp' && input < minInput)
-        return minOutput;
-    if (options?.extrapolateRight === 'clamp' && input > maxInput)
-        return maxOutput;
-    return result;
+    if (inputRange.length < 2)
+        return outputRange[0];
+    // Simple linear interpolation between multiple segments
+    for (let i = 0; i < inputRange.length - 1; i++) {
+        const minInput = inputRange[i];
+        const maxInput = inputRange[i + 1];
+        const minOutput = outputRange[i];
+        const maxOutput = outputRange[i + 1];
+        if (input >= minInput && input <= maxInput) {
+            let progress = (input - minInput) / (maxInput - minInput);
+            if (options?.easing) {
+                progress = options.easing(progress);
+            }
+            return minOutput + progress * (maxOutput - minOutput);
+        }
+    }
+    const firstInput = inputRange[0];
+    const lastInput = inputRange[inputRange.length - 1];
+    const firstOutput = outputRange[0];
+    const lastOutput = outputRange[outputRange.length - 1];
+    if (input < firstInput) {
+        if (options?.extrapolateLeft === 'clamp')
+            return firstOutput;
+        // Extrapolate using first segment
+        const nextInput = inputRange[1];
+        const nextOutput = outputRange[1];
+        let progress = (input - firstInput) / (nextInput - firstInput);
+        if (options?.easing) {
+            progress = options.easing(progress);
+        }
+        return firstOutput + progress * (nextOutput - firstOutput);
+    }
+    if (input > lastInput) {
+        if (options?.extrapolateRight === 'clamp')
+            return lastOutput;
+        // Extrapolate using last segment
+        const prevInput = inputRange[inputRange.length - 2];
+        const prevOutput = outputRange[outputRange.length - 2];
+        let progress = (input - lastInput) / (lastInput - prevInput);
+        if (options?.easing) {
+            progress = options.easing(progress);
+        }
+        return lastOutput + progress * (lastOutput - prevOutput);
+    }
+    return firstOutput;
 };
 exports.interpolate = interpolate;
 /**
@@ -131,8 +238,6 @@ const getTimeHijackScript = (frame, fps) => {
         return setTimeout(() => callback(timeMs), 0);
       };
       window.cancelAnimationFrame = (id) => clearTimeout(id);
-
-      console.debug('OpenMotion: Time hijacked for frame ' + frame + ' at ' + timeMs + 'ms');
     })();
   `;
 };
@@ -171,13 +276,54 @@ exports.spring = spring;
  * Audio Component
  */
 const Audio = (props) => {
+    const startFrame = (0, exports.useAbsoluteFrame)();
     if (typeof window !== 'undefined') {
         window.__OPEN_MOTION_AUDIO_ASSETS__ = window.__OPEN_MOTION_AUDIO_ASSETS__ || [];
-        if (!window.__OPEN_MOTION_AUDIO_ASSETS__.find((a) => a.src === props.src)) {
-            window.__OPEN_MOTION_AUDIO_ASSETS__.push(props);
+        const exists = window.__OPEN_MOTION_AUDIO_ASSETS__.find((a) => a.src === props.src &&
+            (a.startFrom || 0) === (props.startFrom || 0) &&
+            (a.volume || 1) === (props.volume || 1) &&
+            a.startFrame === startFrame);
+        if (!exists) {
+            window.__OPEN_MOTION_AUDIO_ASSETS__.push({
+                ...props,
+                startFrame,
+            });
         }
     }
     return null;
 };
 exports.Audio = Audio;
+/**
+ * Video Component
+ * Supports frame-accurate seeking and synchronization with the engine.
+ */
+const Video = ({ src, startFrom = 0, endAt, playbackRate = 1, muted = true, volume = 1, style }) => {
+    const frame = (0, exports.useCurrentFrame)();
+    const { fps } = (0, exports.useVideoConfig)();
+    const videoRef = react_1.default.useRef(null);
+    const isVisible = endAt === undefined || frame < endAt;
+    react_1.default.useEffect(() => {
+        const video = videoRef.current;
+        if (!video || !isVisible)
+            return;
+        const targetTime = (frame * playbackRate + startFrom) / fps;
+        // Only seek if the difference is significant to avoid jitter
+        if (Math.abs(video.currentTime - targetTime) > 0.001) {
+            video.currentTime = targetTime;
+        }
+    }, [frame, fps, startFrom, playbackRate, isVisible]);
+    if (!isVisible)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, src: src, muted: muted, playsInline: true, style: {
+            display: 'block',
+            objectFit: 'cover',
+            ...style,
+        }, onLoadedMetadata: (e) => {
+            const video = e.currentTarget;
+            video.volume = volume;
+            // Ensure it's paused so we can control it via currentTime
+            video.pause();
+        } }));
+};
+exports.Video = Video;
 __exportStar(require("./Player"), exports);

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@open-motion/core",
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/open-motion/open-motion.git",
+    "url": "https://github.com/jsongo/open-motion.git",
     "directory": "packages/core"
   },
   "publishConfig": {
@@ -17,7 +17,8 @@
   ],
   "dependencies": {},
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "scripts": {
     "build": "tsc"