remotion 3.2.8 → 3.2.11

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-remotion:build: cache hit, replaying output 3b9dbba79b49f6d2
-remotion:build: 
-remotion:build: > remotion@3.2.7 build /Users/jonathanburger/remotion/packages/core
-remotion:build: > tsc -d
-remotion:build: 
+remotion:build: cache hit, replaying output 4d866b4a1e0f5d2c
+remotion:build: 
+remotion:build: > remotion@3.2.10 build /Users/jonathanburger/remotion/packages/core
+remotion:build: > tsc -d
+remotion:build: 

package/dist/CompositionManager.d.ts

@@ -50,6 +50,7 @@ export declare type TAsset = {
     mediaFrame: number;
     playbackRate: number;
 };
+declare type BaseMetadata = Pick<TCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
 export declare type CompositionManagerContext = {
     compositions: TComposition[];
     registerComposition: <T>(comp: TComposition<T>) => void;
@@ -58,6 +59,8 @@ export declare type CompositionManagerContext = {
     unregisterFolder: (name: string, parent: string | null) => void;
     currentComposition: string | null;
     setCurrentComposition: (curr: string) => void;
+    setCurrentCompositionMetadata: (metadata: BaseMetadata) => void;
+    currentCompositionMetadata: BaseMetadata | null;
     registerSequence: (seq: TSequence) => void;
     unregisterSequence: (id: string) => void;
     registerAsset: (asset: TAsset) => void;

package/dist/CompositionManager.js

@@ -34,6 +34,7 @@ exports.CompositionManager = (0, react_1.createContext)({
     unregisterFolder: () => undefined,
     currentComposition: null,
     setCurrentComposition: () => undefined,
+    setCurrentCompositionMetadata: () => undefined,
     registerSequence: () => undefined,
     unregisterSequence: () => undefined,
     registerAsset: () => undefined,
@@ -41,6 +42,7 @@ exports.CompositionManager = (0, react_1.createContext)({
     sequences: [],
     assets: [],
     folders: [],
+    currentCompositionMetadata: null,
 });
 exports.compositionsRef = react_1.default.createRef();
 const CompositionManagerProvider = ({ children }) => {
@@ -51,6 +53,7 @@ const CompositionManagerProvider = ({ children }) => {
     const [assets, setAssets] = (0, react_1.useState)([]);
     const [folders, setFolders] = (0, react_1.useState)([]);
     const [sequences, setSequences] = (0, react_1.useState)([]);
+    const [currentCompositionMetadata, setCurrentCompositionMetadata] = (0, react_1.useState)(null);
     const registerComposition = (0, react_1.useCallback)((comp) => {
         setCompositions((comps) => {
             if (comps.find((c) => c.id === comp.id)) {
@@ -127,21 +130,24 @@ const CompositionManagerProvider = ({ children }) => {
             folders,
             registerFolder,
             unregisterFolder,
+            currentCompositionMetadata,
+            setCurrentCompositionMetadata,
         };
     }, [
         compositions,
-        currentComposition,
         registerComposition,
-        registerSequence,
         unregisterComposition,
+        currentComposition,
+        registerSequence,
         unregisterSequence,
         registerAsset,
         unregisterAsset,
         sequences,
         assets,
+        folders,
         registerFolder,
         unregisterFolder,
-        folders,
+        currentCompositionMetadata,
     ]);
     return ((0, jsx_runtime_1.jsx)(exports.CompositionManager.Provider, { value: contextValue, children: children }));
 };

package/dist/Sequence.js

@@ -5,10 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AbsoluteFill_1 = require("./AbsoluteFill");
 const CompositionManager_1 = require("./CompositionManager");
+const get_environment_1 = require("./get-environment");
 const get_timeline_clip_name_1 = require("./get-timeline-clip-name");
 const nonce_1 = require("./nonce");
 const timeline_position_state_1 = require("./timeline-position-state");
-const use_unsafe_video_config_1 = require("./use-unsafe-video-config");
+const use_video_config_1 = require("./use-video-config");
 exports.SequenceContext = (0, react_1.createContext)(null);
 const Sequence = ({ from, durationInFrames = Infinity, children, name, showInTimeline = true, showLoopTimesInTimeline, ...other }) => {
     const { layout = 'absolute-fill' } = other;
@@ -18,7 +19,6 @@ const Sequence = ({ from, durationInFrames = Infinity, children, name, showInTim
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
-    const actualFrom = cumulatedFrom + from;
     const nonce = (0, nonce_1.useNonce)();
     if (layout !== 'absolute-fill' && layout !== 'none') {
         throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
@@ -44,15 +44,11 @@ const Sequence = ({ from, durationInFrames = Infinity, children, name, showInTim
         throw new TypeError(`The "from" prop of a sequence must be an integer, but got ${from}.`);
     }
     const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
-    const unsafeVideoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
-    const compositionDuration = unsafeVideoConfig
-        ? unsafeVideoConfig.durationInFrames
-        : 0;
-    const actualDurationInFrames = Math.min(compositionDuration - from, parentSequence
-        ? Math.min(parentSequence.durationInFrames +
-            (parentSequence.cumulatedFrom + parentSequence.relativeFrom) -
-            actualFrom, durationInFrames)
-        : durationInFrames);
+    const videoConfig = (0, use_video_config_1.useVideoConfig)();
+    const parentSequenceDuration = parentSequence
+        ? Math.min(parentSequence.durationInFrames - from, durationInFrames)
+        : durationInFrames;
+    const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
     const contextValue = (0, react_1.useMemo)(() => {
         var _a;
@@ -75,6 +71,9 @@ const Sequence = ({ from, durationInFrames = Infinity, children, name, showInTim
     }, [children, name]);
     (0, react_1.useEffect)(() => {
         var _a;
+        if ((0, get_environment_1.getRemotionEnvironment)() !== 'preview') {
+            return;
+        }
         registerSequence({
             from,
             duration: actualDurationInFrames,
@@ -92,7 +91,6 @@ const Sequence = ({ from, durationInFrames = Infinity, children, name, showInTim
         };
     }, [
         durationInFrames,
-        actualFrom,
         id,
         name,
         registerSequence,
@@ -106,10 +104,8 @@ const Sequence = ({ from, durationInFrames = Infinity, children, name, showInTim
         nonce,
         showLoopTimesInTimeline,
     ]);
-    const endThreshold = (() => {
-        return actualFrom + durationInFrames - 1;
-    })();
-    const content = absoluteFrame < actualFrom
+    const endThreshold = cumulatedFrom + from + durationInFrames - 1;
+    const content = absoluteFrame < cumulatedFrom + from
         ? null
         : absoluteFrame > endThreshold
             ? null

package/dist/audio/AudioForRendering.js

@@ -22,8 +22,8 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     // but at the same time the same on all threads
     const id = (0, react_1.useMemo)(() => {
         var _a;
-        return `audio-${(0, random_1.random)((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${props.muted}`;
-    }, [props.muted, props.src, sequenceContext]);
+        return `audio-${(0, random_1.random)((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`;
+    }, [props.src, sequenceContext]);
     const { volume: volumeProp, playbackRate, ...nativeProps } = props;
     const volume = (0, volume_prop_1.evaluateVolume)({
         volume: volumeProp,
@@ -44,6 +44,9 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         if (props.muted) {
             return;
         }
+        if (volume <= 0) {
+            return;
+        }
         registerAsset({
             type: 'audio',
             src: (0, absolute_src_1.getAbsoluteSrc)(props.src),

package/dist/config.d.ts

@@ -20,6 +20,12 @@ export declare type ConfigType = {
          * @default 15
          */
         readonly setMaxTimelineTracks: (maxTracks: number) => void;
+        /**
+         * Enable Keyboard shortcuts in the Remotion Preview.
+         * @param enabled Boolean whether to enable the keyboard shortcuts
+         * @default true
+         */
+        readonly setKeyboardShortcutsEnabled: (enableShortcuts: boolean) => void;
     };
     readonly Bundling: {
         /**

package/dist/index.d.ts

@@ -34,6 +34,11 @@ export declare type BundleState = {
 } | {
     type: 'composition';
     compositionName: string;
+    compositionDefaultProps: unknown;
+    compositionHeight: number;
+    compositionDurationInFrames: number;
+    compositionWidth: number;
+    compositionFps: number;
 };
 export * from './AbsoluteFill';
 export * from './audio';

package/dist/internals.d.ts

@@ -17,7 +17,18 @@ export declare const Internals: {
     RemotionRoot: import("react").FC<{
         children: import("react").ReactNode;
     }>;
-    useVideo: () => TComposition<unknown> | null;
+    useVideo: () => {
+        height: number;
+        width: number;
+        fps: number;
+        durationInFrames: number;
+        defaultProps: unknown;
+        id: string;
+        folderName: string | null;
+        parentFolderName: string | null;
+        component: import("react").LazyExoticComponent<import("react").ComponentType<unknown>>;
+        nonce: number;
+    } | null;
     getRoot: () => import("react").FC<{}> | null;
     useMediaVolumeState: () => readonly [number, (u: number) => void];
     useMediaMutedState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void];

package/dist/use-media-in-timeline.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const use_audio_frame_1 = require("./audio/use-audio-frame");
 const CompositionManager_1 = require("./CompositionManager");
 const get_asset_file_name_1 = require("./get-asset-file-name");
+const get_environment_1 = require("./get-environment");
 const nonce_1 = require("./nonce");
 const play_and_handle_not_allowed_error_1 = require("./play-and-handle-not-allowed-error");
 const Sequence_1 = require("./Sequence");
@@ -32,11 +33,9 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const [initialVolume] = (0, react_1.useState)(() => volume);
     const nonce = (0, nonce_1.useNonce)();
-    const duration = (() => {
-        return parentSequence
-            ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
-            : videoConfig.durationInFrames;
-    })();
+    const duration = parentSequence
+        ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
+        : videoConfig.durationInFrames;
     const doesVolumeChange = typeof volume === 'function';
     const volumes = (0, react_1.useMemo)(() => {
         if (typeof volume === 'number') {
@@ -66,6 +65,10 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
         if (!src) {
             throw new Error('No src passed');
         }
+        if ((0, get_environment_1.getRemotionEnvironment)() !== 'preview' &&
+            process.env.NODE_ENV !== 'test') {
+            return;
+        }
         registerSequence({
             type: mediaType,
             src,

package/dist/use-video.d.ts

@@ -1 +1,13 @@
-export declare const useVideo: () => import("./CompositionManager").TComposition<unknown> | null;
+/// <reference types="react" />
+export declare const useVideo: () => {
+    height: number;
+    width: number;
+    fps: number;
+    durationInFrames: number;
+    defaultProps: unknown;
+    id: string;
+    folderName: string | null;
+    parentFolderName: string | null;
+    component: import("react").LazyExoticComponent<import("react").ComponentType<unknown>>;
+    nonce: number;
+} | null;

package/dist/use-video.js

@@ -7,9 +7,22 @@ const useVideo = () => {
     const context = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
     return (0, react_1.useMemo)(() => {
         var _a;
-        return (_a = context.compositions.find((c) => {
+        const selected = context.compositions.find((c) => {
             return c.id === context.currentComposition;
-        })) !== null && _a !== void 0 ? _a : null;
-    }, [context.compositions, context.currentComposition]);
+        });
+        if (selected) {
+            return {
+                ...selected,
+                // 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 : {}),
+            };
+        }
+        return null;
+    }, [
+        context.compositions,
+        context.currentComposition,
+        context.currentCompositionMetadata,
+    ]);
 };
 exports.useVideo = useVideo;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.2.8";
+export declare const VERSION = "3.2.11";

package/dist/version.js

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

package/dist/video/OffthreadVideoForRendering.js

@@ -30,9 +30,8 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
     }
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
-    const id = (0, react_1.useMemo)(() => `video-${(0, random_1.random)(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${muted}`, [
+    const id = (0, react_1.useMemo)(() => `offthreadvideo-${(0, random_1.random)(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`, [
         src,
-        muted,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
@@ -55,6 +54,9 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
         if (muted) {
             return;
         }
+        if (volume <= 0) {
+            return;
+        }
         registerAsset({
             type: 'video',
             src: (0, absolute_src_1.getAbsoluteSrc)(src),

package/dist/video/VideoForRendering.js

@@ -29,10 +29,9 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, playbac
     // but at the same time the same on all threads
     const id = (0, react_1.useMemo)(() => {
         var _a;
-        return `video-${(0, random_1.random)((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${props.muted}`;
+        return `video-${(0, random_1.random)((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`;
     }, [
         props.src,
-        props.muted,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
@@ -52,6 +51,9 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, playbac
         if (props.muted) {
             return;
         }
+        if (volume <= 0) {
+            return;
+        }
         if (!window.remotion_audioEnabled) {
             return;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "remotion",
-	"version": "3.2.8",
+	"version": "3.2.11",
 	"description": "Render videos in React",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -54,5 +54,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7ccde3ec3f4adecd5fb7188d9d2933435bba5743"
+	"gitHead": "43d44e718e41200aea544719e9963482f9a65120"
 }