remotion 4.1.0-alpha1 → 4.1.0-alpha10

package/dist/cjs/timeline-position-state.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelinePosition = exports.SetTimelineContext = exports.TimelineContext = void 0;
+exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelinePosition = exports.getFrameForComposition = exports.persistCurrentFrame = exports.SetTimelineContext = exports.TimelineContext = void 0;
 const react_1 = require("react");
 const use_video_js_1 = require("./use-video.js");
 exports.TimelineContext = (0, react_1.createContext)({
-    frame: 0,
+    frame: {},
     playing: false,
     playbackRate: 1,
     rootId: '',
@@ -24,16 +24,34 @@ exports.SetTimelineContext = (0, react_1.createContext)({
         throw new Error('default');
     },
 });
+const makeKey = (composition) => {
+    return `remotion.time.${composition}`;
+};
+const persistCurrentFrame = (frame, composition) => {
+    localStorage.setItem(makeKey(composition), String(frame));
+};
+exports.persistCurrentFrame = persistCurrentFrame;
+const getFrameForComposition = (composition) => {
+    var _a, _b;
+    const frame = localStorage.getItem(makeKey(composition));
+    return frame
+        ? Number(frame)
+        : (_b = (typeof window === 'undefined' ? 0 : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
+};
+exports.getFrameForComposition = getFrameForComposition;
 const useTimelinePosition = () => {
+    var _a, _b;
     const videoConfig = (0, use_video_js_1.useVideo)();
     const state = (0, react_1.useContext)(exports.TimelineContext);
-    // A dynamically calculated duration using calculateMetadata()
-    // may lead to the frame being bigger than the duration.
-    // If we have the config, we clamp the frame to the duration.
     if (!videoConfig) {
-        return state.frame;
+        return typeof window === 'undefined'
+            ? 0
+            : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0;
     }
-    return Math.min(videoConfig.durationInFrames - 1, state.frame);
+    const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : (typeof window !== 'undefined' && window.remotion_isPlayer
+        ? 0
+        : (0, exports.getFrameForComposition)(videoConfig.id));
+    return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
 exports.useTimelinePosition = useTimelinePosition;
 const useTimelineSetFrame = () => {

package/dist/cjs/use-unsafe-video-config.js

@@ -13,7 +13,7 @@ const useUnsafeVideoConfig = () => {
         if (!video) {
             return null;
         }
-        const { id, durationInFrames, fps, height, width, defaultProps } = video;
+        const { id, durationInFrames, fps, height, width, defaultProps, props } = video;
         return {
             id,
             width,
@@ -21,6 +21,7 @@ const useUnsafeVideoConfig = () => {
             fps,
             durationInFrames: ctxDuration !== null && ctxDuration !== void 0 ? ctxDuration : durationInFrames,
             defaultProps,
+            props,
         };
     }, [ctxDuration, video]);
 };

package/dist/cjs/use-video.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentType, LazyExoticComponent } from 'react';
 import type { VideoConfig } from './video-config.js';
 type ReturnType = (VideoConfig & {
-    component: LazyExoticComponent<ComponentType<Record<string, unknown> | undefined>>;
+    component: LazyExoticComponent<ComponentType<Record<string, unknown>>>;
 }) | null;
 export declare const useVideo: () => ReturnType;
 export {};

package/dist/cjs/use-video.js

@@ -11,7 +11,7 @@ const useVideo = () => {
     });
     const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(context.currentComposition);
     return (0, react_1.useMemo)(() => {
-        var _a;
+        var _a, _b;
         if (!resolved) {
             return null;
         }
@@ -26,11 +26,11 @@ const useVideo = () => {
         }
         return {
             ...resolved.result,
-            defaultProps: selected.defaultProps,
+            defaultProps: (_a = selected.defaultProps) !== null && _a !== void 0 ? _a : {},
             id: selected.id,
             // We override the selected metadata with the metadata that was passed to renderMedia(),
             // and don't allow it to be changed during render anymore
-            ...((_a = context.currentCompositionMetadata) !== null && _a !== void 0 ? _a : {}),
+            ...((_b = context.currentCompositionMetadata) !== null && _b !== void 0 ? _b : {}),
             component: selected.component,
         };
     }, [context.currentCompositionMetadata, resolved, selected]);

package/dist/cjs/validation/validate-dimensions.d.ts

@@ -1 +1 @@
-export declare const validateDimension: (amount: number, nameOfProp: string, location: string) => void;
+export declare function validateDimension(amount: unknown, nameOfProp: string, location: string): asserts amount is number;

package/dist/cjs/validation/validate-dimensions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateDimension = void 0;
-const validateDimension = (amount, nameOfProp, location) => {
+function validateDimension(amount, nameOfProp, location) {
     if (typeof amount !== 'number') {
         throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
     }
@@ -17,5 +17,5 @@ const validateDimension = (amount, nameOfProp, location) => {
     if (amount <= 0) {
         throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
     }
-};
+}
 exports.validateDimension = validateDimension;

package/dist/cjs/validation/validate-duration-in-frames.d.ts

@@ -1,5 +1,4 @@
-export declare const validateDurationInFrames: ({ allowFloats, component, durationInFrames, }: {
-    durationInFrames: number;
+export declare function validateDurationInFrames(durationInFrames: unknown, options: {
     component: string;
     allowFloats: boolean;
-}) => void;
+}): asserts durationInFrames is number;

package/dist/cjs/validation/validate-duration-in-frames.js

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateDurationInFrames = void 0;
-const validateDurationInFrames = ({ allowFloats, component, durationInFrames, }) => {
+function validateDurationInFrames(durationInFrames, options) {
+    const { allowFloats, component } = options;
+    if (typeof durationInFrames === 'undefined') {
+        throw new Error(`The "durationInFrames" prop ${component} is missing.`);
+    }
     if (typeof durationInFrames !== 'number') {
         throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
     }
@@ -14,5 +18,5 @@ const validateDurationInFrames = ({ allowFloats, component, durationInFrames, })
     if (!Number.isFinite(durationInFrames)) {
         throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
     }
-};
+}
 exports.validateDurationInFrames = validateDurationInFrames;

package/dist/cjs/validation/validate-fps.d.ts

@@ -1 +1 @@
-export declare const validateFps: (fps: number, location: string, isGif: boolean) => void;
+export declare function validateFps(fps: unknown, location: string, isGif: boolean): asserts fps is number;

package/dist/cjs/validation/validate-fps.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateFps = void 0;
-const validateFps = (fps, location, isGif) => {
+function validateFps(fps, location, isGif) {
     if (typeof fps !== 'number') {
         throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
     }
@@ -17,5 +17,5 @@ const validateFps = (fps, location, isGif) => {
     if (isGif && fps > 50) {
         throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
     }
-};
+}
 exports.validateFps = validateFps;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.1.0-alpha1";
+export declare const VERSION = "4.1.0-alpha10";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '4.1.0-alpha1';
+exports.VERSION = '4.1.0-alpha10';

package/dist/cjs/video/OffthreadVideo.js

@@ -14,7 +14,9 @@ const VideoForDevelopment_js_1 = require("./VideoForDevelopment.js");
  * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
  */
 const OffthreadVideo = (props) => {
-    const { startFrom, endAt, imageFormat, ...otherProps } = props;
+    // Should only destruct `startFrom` and `endAt` from props,
+    // rest gets drilled down
+    const { startFrom, endAt, ...otherProps } = props;
     const environment = (0, get_environment_js_1.useRemotionEnvironment)();
     const onDuration = (0, react_1.useCallback)(() => undefined, []);
     if (typeof props.src !== 'string') {
@@ -31,8 +33,9 @@ const OffthreadVideo = (props) => {
     }
     (0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
     if (environment === 'rendering') {
-        return ((0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { imageFormat: imageFormat, ...otherProps }));
+        return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { ...otherProps });
     }
-    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));
+    const { transparent, ...withoutTransparent } = otherProps;
+    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
 };
 exports.OffthreadVideo = OffthreadVideo;

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.js");
 const AssetManager_js_1 = require("../AssetManager.js");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
+const cancel_render_js_1 = require("../cancel-render.js");
 const default_css_js_1 = require("../default-css.js");
 const Img_js_1 = require("../Img.js");
 const random_js_1 = require("../random.js");
@@ -91,8 +92,13 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
         return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent((0, absolute_src_js_1.getAbsoluteSrc)(src))}&time=${encodeURIComponent(currentTime)}&transparent=${String(transparent)}`;
     }, [currentTime, src, transparent]);
     const onErr = (0, react_1.useCallback)((e) => {
-        onError === null || onError === void 0 ? void 0 : onError(e);
-    }, [onError]);
+        if (onError) {
+            onError === null || onError === void 0 ? void 0 : onError(e);
+        }
+        else {
+            (0, cancel_render_js_1.cancelRender)('Failed to load image with src ' + actualSrc);
+        }
+    }, [actualSrc, onError]);
     const className = (0, react_1.useMemo)(() => {
         return [default_css_js_1.OFFTHREAD_VIDEO_CLASS_NAME, props.className]
             .filter(truthy_js_1.truthy)

package/dist/cjs/video-config.d.ts

@@ -4,5 +4,6 @@ export type VideoConfig = {
     fps: number;
     durationInFrames: number;
     id: string;
-    defaultProps: Record<string, unknown> | undefined;
+    defaultProps: Record<string, unknown>;
+    props: Record<string, unknown>;
 };