remotion - npm Package Compare versions

Comparing version 1.6.0-alpha.48b94bd7 to 1.6.0-alpha.55498d63

dist/audio/Audio.js

@@ -11,8 +11,8 @@ "use strict";
 const Audio = (props) => {
-    const { startAt, endAt, ...otherProps } = props;
-    if (typeof startAt !== 'undefined' || typeof endAt !== 'undefined') {
-        validate_start_from_props_1.validateStartFromProps(startAt, endAt);
-        const startAtFrameNo = startAt !== null && startAt !== void 0 ? startAt : 0;
+    const { startFrom, endAt, ...otherProps } = props;
+    if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
+        validate_start_from_props_1.validateStartFromProps(startFrom, endAt);
+        const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
         const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ layout: "none", from: 0 - startAtFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Audio, Object.assign({}, otherProps), void 0) }), void 0));
+        return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Audio, Object.assign({}, otherProps), void 0) }), void 0));
     }
@@ -19,0 +19,0 @@ validate_media_props_1.validateMediaProps(props, 'Audio');

dist/audio/props.d.ts

 /// <reference types="react" />
 import { VolumeProp } from '../volume-prop';
 export declare type RemotionMainAudioProps = {
-    startAt?: number;
+    startFrom?: number;
     endAt?: number;
@@ -6,0 +6,0 @@ };

dist/CompositionManager.d.ts

@@ -19,2 +19,3 @@ /// <reference types="react" />
     volume: string | number;
+    doesVolumeChange: boolean;
     startMediaFrom: number;
@@ -26,2 +27,3 @@ } | {
     startMediaFrom: number;
+    doesVolumeChange: boolean;
 };
@@ -28,0 +30,0 @@ export declare type TSequence = {

dist/config/image-format.d.ts

@@ -5,5 +5,5 @@ import { PixelFormat } from '.';
 export declare const setImageFormat: (format: ImageFormat) => void;
-export declare const getUserPreferredImageFormat: () => "none" | "png" | "jpeg" | undefined;
+export declare const getUserPreferredImageFormat: () => "png" | "jpeg" | "none" | undefined;
 export declare const validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: PixelFormat, imageFormat: ImageFormat) => void;
 export {};
 //# sourceMappingURL=image-format.d.ts.map

dist/config/index.d.ts

@@ -28,3 +28,3 @@ import { Browser } from './browser';
          */
-        readonly setBrowserExecutable: (newBrowserExecutablePath: string | null) => void;
+        readonly setBrowserExecutable: (newBrowserExecutablePath: BrowserExecutable) => void;
     };
@@ -36,3 +36,3 @@ readonly Rendering: {
          */
-        readonly setConcurrency: (newConcurrency: number | null) => void;
+        readonly setConcurrency: (newConcurrency: Concurrency) => void;
         /**
@@ -48,3 +48,3 @@ * Set the JPEG quality for the frames.
          */
-        readonly setImageFormat: (format: "none" | "png" | "jpeg") => void;
+        readonly setImageFormat: (format: "png" | "jpeg" | "none") => void;
         /**
@@ -61,3 +61,3 @@ * Render only a subset of a video.
          * If the video file already exists, should Remotion overwrite
-         * the output? Default: false
+         * the output? Default: true
          */
@@ -64,0 +64,0 @@ readonly setOverwriteOutput: (newOverwrite: boolean) => void;

dist/config/index.js

@@ -65,3 +65,3 @@ "use strict";
          * If the video file already exists, should Remotion overwrite
-         * the output? Default: false
+         * the output? Default: true
          */
@@ -68,0 +68,0 @@ setOverwriteOutput: overwrite_1.setOverwriteOutput,

dist/config/input-props.d.ts

@@ -0,2 +1,3 @@
+export declare const INPUT_PROPS_KEY = "remotion.inputProps";
 export declare const getInputProps: () => any;
 //# sourceMappingURL=input-props.d.ts.map

dist/config/input-props.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInputProps = void 0;
+exports.getInputProps = exports.INPUT_PROPS_KEY = void 0;
+exports.INPUT_PROPS_KEY = 'remotion.inputProps';
 const getInputProps = () => {
     if (process.env.NODE_ENV === 'production') {
-        const param = new URLSearchParams(window.location.search).get('props');
+        const param = localStorage.getItem(exports.INPUT_PROPS_KEY);
         if (!param) {
             return {};
         }
-        const parsed = JSON.parse(decodeURIComponent(param));
+        const parsed = JSON.parse(param);
         return parsed;
@@ -12,0 +13,0 @@ }

dist/config/overwrite.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getShouldOverwrite = exports.setOverwriteOutput = void 0;
-let shouldOverwrite = false;
+let shouldOverwrite = true;
 const setOverwriteOutput = (newOverwrite) => {
@@ -6,0 +6,0 @@ if (typeof newOverwrite !== 'boolean') {

dist/internals.d.ts

@@ -16,7 +16,7 @@ /// <reference types="react" />
     getRoot: () => import("react").FC<{}> | null;
-    getBrowserExecutable: () => string | null;
-    getCompositionName: () => string;
+    getBrowserExecutable: () => import("./config/browser-executable").BrowserExecutable;
+    getCompositionName: () => import("./config/browser-executable").BrowserExecutable;
     getIsEvaluation: () => boolean;
     getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
-    getConcurrency: () => number | null;
+    getConcurrency: () => import("./config/concurrency").Concurrency;
     getRange: () => number | [number, number] | null;
@@ -31,3 +31,3 @@ getShouldOverwrite: () => boolean;
         codec: import("./config/codec").CodecOrUndefined;
-        fileExtension: string | null;
+        fileExtension: import("./config/browser-executable").BrowserExecutable;
         emitWarning: boolean;
@@ -43,5 +43,5 @@ }) => "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav";
     getActualCrf: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav") => number;
-    setFrameRangeFromCli: (newFrameRange: import("react").ReactText) => void;
-    getUserPreferredImageFormat: () => "none" | "png" | "jpeg" | undefined;
-    validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", imageFormat: "none" | "png" | "jpeg") => void;
+    setFrameRangeFromCli: (newFrameRange: string | number) => void;
+    getUserPreferredImageFormat: () => "png" | "jpeg" | "none" | undefined;
+    validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", imageFormat: "png" | "jpeg" | "none") => void;
     validateSelectedPixelFormatAndCodecCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav") => void;
@@ -52,4 +52,5 @@ validateFrameRange: (frameRange: number | [number, number] | null) => void;
     isAudioCodec: (codec: import("./config/codec").CodecOrUndefined) => boolean;
+    INPUT_PROPS_KEY: string;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, WebpackOverrideFn, TAsset, RenderAssetInfo, TimelineContextValue, };
 //# sourceMappingURL=internals.d.ts.map

dist/internals.js

@@ -32,2 +32,3 @@ "use strict";
 const image_sequence_1 = require("./config/image-sequence");
+const input_props_1 = require("./config/input-props");
 const override_webpack_1 = require("./config/override-webpack");
@@ -86,3 +87,4 @@ const overwrite_1 = require("./config/overwrite");
     isAudioCodec: is_audio_codec_1.isAudioCodec,
+    INPUT_PROPS_KEY: input_props_1.INPUT_PROPS_KEY,
 };
 //# sourceMappingURL=internals.js.map

dist/register-root.d.ts

@@ -7,4 +7,4 @@ import React from 'react';
 export declare const removeStaticComposition: (id: string) => void;
-export declare const getCompositionName: () => string;
+export declare const getCompositionName: () => string | null;
 export declare const getIsEvaluation: () => boolean;
 //# sourceMappingURL=register-root.d.ts.map

dist/register-root.js

@@ -34,3 +34,3 @@ "use strict";
     }
-    throw new Error('No comp name specified in URL');
+    return null;
 };
@@ -37,0 +37,0 @@ exports.getCompositionName = getCompositionName;

dist/test/audio.test.js

@@ -7,4 +7,4 @@ "use strict";
 const expect_to_throw_1 = require("./expect-to-throw");
-test('It should throw if startAt prop is negative', () => {
-    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(audio_1.Audio, { startAt: -40 }, void 0)), /startAt must be greater than equal to 0 instead got -40./);
+test('It should throw if startFrom prop is negative', () => {
+    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(audio_1.Audio, { startFrom: -40 }, void 0)), /startFrom must be greater than equal to 0 instead got -40./);
 });
@@ -14,4 +14,4 @@ test('It should throw if endAt prop is negative', () => {
 });
-test('It should throw if endAt is less than startAt', () => {
-    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(audio_1.Audio, { startAt: 10, endAt: 1 }, void 0)), /endAt prop must be greater than startAt prop/);
+test('It should throw if endAt is less than startFrom', () => {
+    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(audio_1.Audio, { startFrom: 10, endAt: 1 }, void 0)), /endAt prop must be greater than startFrom prop/);
 });
@@ -23,6 +23,6 @@ test('It should throw if endAt is not a number', () => {
 });
-test('It should throw if startAt is not a number', () => {
+test('It should throw if startFrom is not a number', () => {
     expect_to_throw_1.expectToThrow(
     //@ts-expect-error
-    () => react_1.render(jsx_runtime_1.jsx(audio_1.Audio, { startAt: 'hey' }, void 0)), /type of startAt prop must be a number, instead got type string./);
+    () => react_1.render(jsx_runtime_1.jsx(audio_1.Audio, { startFrom: 'hey' }, void 0)), /type of startFrom prop must be a number, instead got type string./);
 });
@@ -32,6 +32,6 @@ test('It should throw if endAt is NaN', () => {
 });
-test('It should throw if startAt is NaN or Infinity', () => {
-    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(audio_1.Audio, { startAt: NaN }, void 0)), /startAt prop can not be NaN or Infinity./);
-    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(audio_1.Audio, { startAt: Infinity }, void 0)), /startAt prop can not be NaN or Infinity./);
+test('It should throw if startFrom is NaN or Infinity', () => {
+    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(audio_1.Audio, { startFrom: NaN }, void 0)), /startFrom prop can not be NaN or Infinity./);
+    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(audio_1.Audio, { startFrom: Infinity }, void 0)), /startFrom prop can not be NaN or Infinity./);
 });
 //# sourceMappingURL=audio.test.js.map

dist/test/nested-sequences.test.js

@@ -44,5 +44,5 @@ "use strict";
     };
-    const startAt = 40;
+    const startFrom = 40;
     const endAt = 90;
-    const content = (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 0 - startAt, durationInFrames: endAt }, { children: jsx_runtime_1.jsx(NestedChild, {}, void 0) }), void 0));
+    const content = (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 0 - startFrom, durationInFrames: endAt }, { children: jsx_runtime_1.jsx(NestedChild, {}, void 0) }), void 0));
     const getForFrame = (frame) => {
@@ -68,5 +68,5 @@ const { queryByText } = react_1.render(jsx_runtime_1.jsx(timeline_position_state_1.TimelineContext.Provider, Object.assign({ value: {
     };
-    const startAt = 40;
+    const startFrom = 40;
     const endAt = 90;
-    const content = (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 40, durationInFrames: Infinity }, { children: jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 0 - startAt, durationInFrames: endAt }, { children: jsx_runtime_1.jsx(NestedChild, {}, void 0) }), void 0) }), void 0));
+    const content = (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 40, durationInFrames: Infinity }, { children: jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 0 - startFrom, durationInFrames: endAt }, { children: jsx_runtime_1.jsx(NestedChild, {}, void 0) }), void 0) }), void 0));
     const getForFrame = (frame) => {
@@ -73,0 +73,0 @@ const { queryByText } = react_1.render(jsx_runtime_1.jsx(timeline_position_state_1.TimelineContext.Provider, Object.assign({ value: {

dist/test/overwrite.test.js

@@ -21,9 +21,9 @@ "use strict";
 });
-test('getShouldOverwrite should return false by default', () => {
-    expect(overwrite_1.getShouldOverwrite()).toEqual(false);
+test('getShouldOverwrite should return true by default', () => {
+    expect(overwrite_1.getShouldOverwrite()).toEqual(true);
 });
 test('setOverwriteOutput should return a boolean value', () => {
-    overwrite_1.setOverwriteOutput(true);
-    expect(overwrite_1.getShouldOverwrite()).toEqual(true);
+    overwrite_1.setOverwriteOutput(false);
+    expect(overwrite_1.getShouldOverwrite()).toEqual(false);
 });
 //# sourceMappingURL=overwrite.test.js.map

dist/test/video.test.js

@@ -7,4 +7,4 @@ "use strict";
 const expect_to_throw_1 = require("./expect-to-throw");
-test('It should throw if startAt prop is negative', () => {
-    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(video_1.Video, { startAt: -40 }, void 0)), /startAt must be greater than equal to 0 instead got -40./);
+test('It should throw if startFrom prop is negative', () => {
+    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(video_1.Video, { startFrom: -40 }, void 0)), /startFrom must be greater than equal to 0 instead got -40./);
 });
@@ -14,4 +14,4 @@ test('It should throw if endAt prop is negative', () => {
 });
-test('It should throw if endAt is less than startAt', () => {
-    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(video_1.Video, { startAt: 10, endAt: 1 }, void 0)), /endAt prop must be greater than startAt prop/);
+test('It should throw if endAt is less than startFrom', () => {
+    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(video_1.Video, { startFrom: 10, endAt: 1 }, void 0)), /endAt prop must be greater than startFrom prop/);
 });
@@ -23,6 +23,6 @@ test('It should throw if endAt is not a number', () => {
 });
-test('It should throw if startAt is not a number', () => {
+test('It should throw if startFrom is not a number', () => {
     expect_to_throw_1.expectToThrow(
     //@ts-expect-error
-    () => react_1.render(jsx_runtime_1.jsx(video_1.Video, { startAt: 'hey' }, void 0)), /type of startAt prop must be a number, instead got type string./);
+    () => react_1.render(jsx_runtime_1.jsx(video_1.Video, { startFrom: 'hey' }, void 0)), /type of startFrom prop must be a number, instead got type string./);
 });
@@ -32,6 +32,6 @@ test('It should throw if endAt is NaN', () => {
 });
-test('It should throw if startAt is NaN or Infinity', () => {
-    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(video_1.Video, { startAt: NaN }, void 0)), /startAt prop can not be NaN or Infinity./);
-    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(video_1.Video, { startAt: Infinity }, void 0)), /startAt prop can not be NaN or Infinity./);
+test('It should throw if startFrom is NaN or Infinity', () => {
+    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(video_1.Video, { startFrom: NaN }, void 0)), /startFrom prop can not be NaN or Infinity./);
+    expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(video_1.Video, { startFrom: Infinity }, void 0)), /startFrom prop can not be NaN or Infinity./);
 });
 //# sourceMappingURL=video.test.js.map

dist/use-media-in-timeline.js

@@ -29,13 +29,12 @@ "use strict";
     })();
+    const doesVolumeChange = typeof volume === 'function';
     const volumes = react_1.useMemo(() => {
-        var _a;
         if (typeof volume === 'number') {
             return volume;
         }
-        const negativeShift = Math.min(0, (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.parentFrom) !== null && _a !== void 0 ? _a : 0);
-        return new Array(duration + startsAt + negativeShift)
+        return new Array(Math.max(0, duration + startsAt))
             .fill(true)
             .map((_, i) => {
             return volume_prop_1.evaluateVolume({
-                frame: i - negativeShift,
+                frame: i + startsAt,
                 volume,
@@ -45,3 +44,3 @@ });
             .join(',');
-    }, [duration, parentSequence, startsAt, volume]);
+    }, [duration, startsAt, volume]);
     react_1.useEffect(() => {
@@ -68,3 +67,4 @@ var _a;
             nonce,
-            startMediaFrom: startsAt,
+            startMediaFrom: 0 - startsAt,
+            doesVolumeChange,
         });
@@ -83,2 +83,3 @@ return () => unregisterSequence(id);
         volumes,
+        doesVolumeChange,
         nonce,
@@ -85,0 +86,0 @@ mediaRef,

dist/use-media-playback.js

@@ -39,3 +39,3 @@ "use strict";
         const timeShift = Math.abs(shouldBeTime - isTime);
-        if (timeShift > 0.5 && !mediaRef.current.ended) {
+        if (timeShift > 0.45 && !mediaRef.current.ended) {
             console.log('Time has shifted by', timeShift, 'sec. Fixing...');
@@ -42,0 +42,0 @@ // If scrubbing around, adjust timing

dist/validate-start-from-props.d.ts

@@ -1,2 +0,2 @@
-export declare const validateStartFromProps: (startAt: number | undefined, endAt: number | undefined) => void;
+export declare const validateStartFromProps: (startFrom: number | undefined, endAt: number | undefined) => void;
 //# sourceMappingURL=validate-start-from-props.d.ts.map

dist/validate-start-from-props.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateStartFromProps = void 0;
-const validateStartFromProps = (startAt, endAt) => {
-    if (typeof startAt !== 'undefined') {
-        if (typeof startAt !== 'number') {
-            throw new TypeError(`type of startAt prop must be a number, instead got type ${typeof startAt}.`);
+const validateStartFromProps = (startFrom, endAt) => {
+    if (typeof startFrom !== 'undefined') {
+        if (typeof startFrom !== 'number') {
+            throw new TypeError(`type of startFrom prop must be a number, instead got type ${typeof startFrom}.`);
         }
-        if (isNaN(startAt) || startAt === Infinity) {
-            throw new TypeError('startAt prop can not be NaN or Infinity.');
+        if (isNaN(startFrom) || startFrom === Infinity) {
+            throw new TypeError('startFrom prop can not be NaN or Infinity.');
         }
-        if (startAt < 0) {
-            throw new TypeError(`startAt must be greater than equal to 0 instead got ${startAt}.`);
+        if (startFrom < 0) {
+            throw new TypeError(`startFrom must be greater than equal to 0 instead got ${startFrom}.`);
         }
@@ -27,4 +27,4 @@ }
     }
-    if (endAt < startAt) {
-        throw new TypeError('endAt prop must be greater than startAt prop');
+    if (endAt < startFrom) {
+        throw new TypeError('endAt prop must be greater than startFrom prop');
     }
@@ -31,0 +31,0 @@ };

dist/video/props.d.ts

 /// <reference types="react" />
 import { VolumeProp } from '../volume-prop';
 export declare type RemotionMainVideoProps = {
-    startAt?: number;
+    startFrom?: number;
     endAt?: number;
@@ -6,0 +6,0 @@ };

dist/video/Video.js

@@ -11,8 +11,8 @@ "use strict";
 const Video = (props) => {
-    const { startAt, endAt, ...otherProps } = props;
-    if (typeof startAt !== 'undefined' || typeof endAt !== 'undefined') {
-        validate_start_from_props_1.validateStartFromProps(startAt, endAt);
-        const startAtFrameNo = startAt !== null && startAt !== void 0 ? startAt : 0;
+    const { startFrom, endAt, ...otherProps } = props;
+    if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
+        validate_start_from_props_1.validateStartFromProps(startFrom, endAt);
+        const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
         const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ layout: "none", from: 0 - startAtFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Video, Object.assign({}, otherProps), void 0) }), void 0));
+        return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Video, Object.assign({}, otherProps), void 0) }), void 0));
     }
@@ -19,0 +19,0 @@ validate_media_props_1.validateMediaProps(props, 'Video');

package.json

 {
 	"name": "remotion",
-	"version": "1.6.0-alpha.48b94bd7",
+	"version": "1.6.0-alpha.55498d63",
 	"description": "Render videos in React",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

396092

increased by0.13%

Lines of code

4678

increased by0.17%

No dependency changes