@open-motion/core 0.0.1-alpha.0

package/dist/Player.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { VideoConfig } from './index';
+export interface PlayerProps {
+    component: React.ComponentType<any>;
+    config: VideoConfig;
+    inputProps?: any;
+    controls?: boolean;
+    autoPlay?: boolean;
+    loop?: boolean;
+}
+export declare const Player: React.FC<PlayerProps>;

package/dist/Player.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Player = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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 requestRef = (0, react_1.useRef)();
+    const lastTimeRef = (0, react_1.useRef)();
+    const animate = (0, react_1.useCallback)((time) => {
+        if (lastTimeRef.current !== undefined) {
+            const deltaTime = time - lastTimeRef.current;
+            const frameStep = (deltaTime / 1000) * config.fps;
+            setFrame((prevFrame) => {
+                let nextFrame = prevFrame + frameStep;
+                if (nextFrame >= config.durationInFrames) {
+                    if (loop) {
+                        nextFrame = 0;
+                    }
+                    else {
+                        nextFrame = config.durationInFrames - 1;
+                        setIsPlaying(false);
+                    }
+                }
+                return nextFrame;
+            });
+        }
+        lastTimeRef.current = time;
+        requestRef.current = requestAnimationFrame(animate);
+    }, [config.fps, config.durationInFrames, loop]);
+    (0, react_1.useEffect)(() => {
+        if (isPlaying) {
+            lastTimeRef.current = undefined;
+            requestRef.current = requestAnimationFrame(animate);
+        }
+        else {
+            if (requestRef.current) {
+                cancelAnimationFrame(requestRef.current);
+            }
+        }
+        return () => {
+            if (requestRef.current) {
+                cancelAnimationFrame(requestRef.current);
+            }
+        };
+    }, [isPlaying, animate]);
+    const togglePlay = () => setIsPlaying(!isPlaying);
+    const handleSeek = (e) => {
+        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: {
+                    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] })] }))] }));
+};
+exports.Player = Player;

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+export interface VideoConfig {
+    width: number;
+    height: number;
+    fps: number;
+    durationInFrames: number;
+}
+export declare const CompositionProvider: React.FC<{
+    config: VideoConfig;
+    frame: number;
+    inputProps?: any;
+    children: React.ReactNode;
+}>;
+export declare const useVideoConfig: () => VideoConfig;
+export declare const useCurrentFrame: () => number;
+export declare const useAbsoluteFrame: () => number;
+export declare const getInputProps: <T extends any>() => T;
+export interface CompositionProps extends VideoConfig {
+    id: string;
+    component: React.ComponentType<any>;
+}
+export declare const registerComposition: (props: CompositionProps) => void;
+export declare const getCompositions: () => CompositionProps[];
+export declare const getCompositionById: (id: string) => CompositionProps | undefined;
+/**
+ * Composition Component (Remotion compatible)
+ */
+export declare const Composition: React.FC<CompositionProps>;
+/**
+ * delayRender: Signal that an async resource is being loaded.
+ */
+export declare const delayRender: (label?: string) => number;
+/**
+ * continueRender: Signal that an async resource has finished loading.
+ */
+export declare const continueRender: (handle: number) => void;
+/**
+ * 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?: {
+    extrapolateLeft?: "extrapolate" | "clamp";
+    extrapolateRight?: "extrapolate" | "clamp";
+}) => number;
+/**
+ * Time Hijacking Bridge Script
+ */
+export declare const getTimeHijackScript: (frame: number, fps: number) => string;
+/**
+ * Sequence Component
+ */
+export declare const Sequence: React.FC<{
+    from: number;
+    durationInFrames?: number;
+    children: React.ReactNode;
+}>;
+/**
+ * Spring animation logic
+ */
+export declare const spring: ({ frame, fps, config, }: {
+    frame: number;
+    fps: number;
+    config?: {
+        stiffness?: number;
+        damping?: number;
+        mass?: number;
+    };
+}) => number;
+/**
+ * Audio Component
+ */
+export declare const Audio: React.FC<{
+    src: string;
+    startFrom?: number;
+    volume?: number;
+}>;
+export * from './Player';

package/dist/index.js

@@ -0,0 +1,183 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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 }) }) }) }));
+};
+exports.CompositionProvider = CompositionProvider;
+const useVideoConfig = () => {
+    const context = (0, react_1.useContext)(VideoConfigContext);
+    if (!context)
+        throw new Error('useVideoConfig must be used within CompositionProvider');
+    return context;
+};
+exports.useVideoConfig = useVideoConfig;
+const useCurrentFrame = () => {
+    return (0, react_1.useContext)(FrameContext);
+};
+exports.useCurrentFrame = useCurrentFrame;
+const useAbsoluteFrame = () => {
+    return (0, react_1.useContext)(AbsoluteFrameContext);
+};
+exports.useAbsoluteFrame = useAbsoluteFrame;
+const getInputProps = () => {
+    return (0, react_1.useContext)(InputPropsContext);
+};
+exports.getInputProps = getInputProps;
+const compositions = new Map();
+const registerComposition = (props) => {
+    compositions.set(props.id, props);
+    if (typeof window !== 'undefined') {
+        window.__OPEN_MOTION_COMPOSITIONS__ = Array.from(compositions.values());
+    }
+};
+exports.registerComposition = registerComposition;
+const getCompositions = () => Array.from(compositions.values());
+exports.getCompositions = getCompositions;
+const getCompositionById = (id) => compositions.get(id);
+exports.getCompositionById = getCompositionById;
+/**
+ * Composition Component (Remotion compatible)
+ */
+const Composition = (props) => {
+    (0, exports.registerComposition)(props);
+    return null;
+};
+exports.Composition = Composition;
+// --- Rendering Synchronization ---
+let delayRenderCounter = 0;
+/**
+ * delayRender: Signal that an async resource is being loaded.
+ */
+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;
+    }
+    return handle;
+};
+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);
+    }
+};
+exports.continueRender = continueRender;
+/**
+ * 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;
+};
+exports.interpolate = interpolate;
+/**
+ * Time Hijacking Bridge Script
+ */
+const getTimeHijackScript = (frame, fps) => {
+    const timeMs = (frame / fps) * 1000;
+    return `
+    (function() {
+      const timeMs = ${timeMs};
+      const frame = ${frame};
+
+      const OriginalDate = window.Date;
+      function MockDate() {
+        return new OriginalDate(timeMs);
+      }
+      MockDate.now = () => timeMs;
+      MockDate.parse = OriginalDate.parse;
+      MockDate.UTC = OriginalDate.UTC;
+      MockDate.prototype = OriginalDate.prototype;
+      window.Date = MockDate;
+
+      if (window.performance) {
+        window.performance.now = () => timeMs;
+      }
+
+      window.requestAnimationFrame = (callback) => {
+        return setTimeout(() => callback(timeMs), 0);
+      };
+      window.cancelAnimationFrame = (id) => clearTimeout(id);
+
+      console.debug('OpenMotion: Time hijacked for frame ' + frame + ' at ' + timeMs + 'ms');
+    })();
+  `;
+};
+exports.getTimeHijackScript = getTimeHijackScript;
+/**
+ * Sequence Component
+ */
+const Sequence = ({ from, durationInFrames, children }) => {
+    const currentFrame = (0, exports.useCurrentFrame)();
+    const relativeFrame = currentFrame - from;
+    const isVisible = relativeFrame >= 0 && (durationInFrames === undefined || relativeFrame < durationInFrames);
+    if (!isVisible)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(FrameContext.Provider, { value: relativeFrame, children: children }));
+};
+exports.Sequence = Sequence;
+/**
+ * Spring animation logic
+ */
+const spring = ({ frame, fps, config = { stiffness: 100, damping: 10, mass: 1 }, }) => {
+    const { stiffness = 100, damping = 10, mass = 1 } = config;
+    const t = frame / fps;
+    const zeta = damping / (2 * Math.sqrt(stiffness * mass));
+    const omega0 = Math.sqrt(stiffness / mass);
+    if (zeta < 1) {
+        const omegaD = omega0 * Math.sqrt(1 - zeta * zeta);
+        const envelope = Math.exp(-zeta * omega0 * t);
+        return 1 - envelope * (Math.cos(omegaD * t) + (zeta * omega0 / omegaD) * Math.sin(omegaD * t));
+    }
+    else {
+        return 1 - Math.exp(-omega0 * t) * (1 + omega0 * t);
+    }
+};
+exports.spring = spring;
+/**
+ * Audio Component
+ */
+const Audio = (props) => {
+    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);
+        }
+    }
+    return null;
+};
+exports.Audio = Audio;
+__exportStar(require("./Player"), exports);

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@open-motion/core",
+  "version": "0.0.1-alpha.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/open-motion/open-motion.git",
+    "directory": "packages/core"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "scripts": {
+    "build": "tsc"
+  }
+}