remotion 4.0.143 → 4.0.144

package/LICENSE.md

@@ -1,5 +1,9 @@
 # Remotion License
 
+In Remotion 5.0, the license will slightly change. [View the changes here](https://github.com/remotion-dev/remotion/pull/3750).
+
+---
+
 Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
 
 - [Free license](#free-license)

package/dist/cjs/Sequence.d.ts

@@ -1,39 +1,40 @@
 import React from 'react';
 import type { LoopDisplay } from './CompositionManager.js';
-export type LayoutAndStyle = {
+export type AbsoluteFillLayout = {
     layout?: 'absolute-fill';
     premountFor?: number;
     style?: React.CSSProperties;
     className?: string;
-} | {
+};
+export type LayoutAndStyle = AbsoluteFillLayout | {
     layout: 'none';
 };
 export type SequencePropsWithoutDuration = {
-    children: React.ReactNode;
-    width?: number;
-    height?: number;
-    from?: number;
-    name?: string;
-    showInTimeline?: boolean;
+    readonly children: React.ReactNode;
+    readonly width?: number;
+    readonly height?: number;
+    readonly from?: number;
+    readonly name?: string;
+    readonly showInTimeline?: boolean;
     /**
      * @deprecated For internal use only.
      */
-    _remotionInternalLoopDisplay?: LoopDisplay;
+    readonly _remotionInternalLoopDisplay?: LoopDisplay;
     /**
      * @deprecated For internal use only.
      */
-    _remotionInternalPremountDisplay?: number | null;
+    readonly _remotionInternalPremountDisplay?: number | null;
     /**
      * @deprecated For internal use only.
      */
-    _remotionInternalStack?: string;
+    readonly _remotionInternalStack?: string;
     /**
      * @deprecated For internal use only.
      */
-    _remotionInternalIsPremounting?: boolean;
+    readonly _remotionInternalIsPremounting?: boolean;
 } & LayoutAndStyle;
 export type SequenceProps = {
-    durationInFrames?: number;
+    readonly durationInFrames?: number;
 } & SequencePropsWithoutDuration;
 /**
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.

package/dist/cjs/default-css.d.ts

@@ -1,3 +1,3 @@
 export declare const injectCSS: (css: string) => void;
 export declare const OFFTHREAD_VIDEO_CLASS_NAME = "__remotion_offthreadvideo";
-export declare const makeDefaultCSS: (scope: string | null, backgroundColor: string) => string;
+export declare const makeDefaultPreviewCSS: (scope: string | null, backgroundColor: string) => string;

package/dist/cjs/default-css.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeDefaultCSS = exports.OFFTHREAD_VIDEO_CLASS_NAME = exports.injectCSS = void 0;
+exports.makeDefaultPreviewCSS = exports.OFFTHREAD_VIDEO_CLASS_NAME = exports.injectCSS = void 0;
 const injected = {};
 const injectCSS = (css) => {
     // Skip in node
@@ -18,7 +18,7 @@ const injectCSS = (css) => {
 };
 exports.injectCSS = injectCSS;
 exports.OFFTHREAD_VIDEO_CLASS_NAME = '__remotion_offthreadvideo';
-const makeDefaultCSS = (scope, backgroundColor) => {
+const makeDefaultPreviewCSS = (scope, backgroundColor) => {
     if (!scope) {
         return `
     * {
@@ -46,4 +46,4 @@ const makeDefaultCSS = (scope, backgroundColor) => {
     }
   `;
 };
-exports.makeDefaultCSS = makeDefaultCSS;
+exports.makeDefaultPreviewCSS = makeDefaultPreviewCSS;

package/dist/cjs/get-static-files.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStaticFiles = void 0;
+const v5_flag_1 = require("./v5-flag");
 let warnedServer = false;
 let warnedPlayer = false;
 const warnServerOnce = () => {
@@ -24,6 +25,9 @@ const warnPlayerOnce = () => {
  * @see [Documentation](https://www.remotion.dev/docs/getstaticfiles)
  */
 const getStaticFiles = () => {
+    if (v5_flag_1.ENABLE_V5_BREAKING_CHANGES) {
+        throw new Error('getStaticFiles() has moved into the `@remotion/studio` package. Update your imports.');
+    }
     if (typeof document === 'undefined') {
         warnServerOnce();
         return [];

package/dist/cjs/index.d.ts

@@ -90,7 +90,7 @@ export { ClipRegion } from './NativeLayers.js';
 export { EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, random, RandomSeed, } from './no-react';
 export { prefetch, PrefetchOnProgress } from './prefetch.js';
 export { registerRoot } from './register-root.js';
-export { LayoutAndStyle, Sequence, SequenceProps, SequencePropsWithoutDuration, } from './Sequence.js';
+export { AbsoluteFillLayout, LayoutAndStyle, Sequence, SequenceProps, SequencePropsWithoutDuration, } from './Sequence.js';
 export { Series } from './series/index.js';
 export * from './spring/index.js';
 export { staticFile } from './static-file.js';

package/dist/cjs/interpolate.d.ts

@@ -1,6 +1,6 @@
 export type ExtrapolateType = 'extend' | 'identity' | 'clamp' | 'wrap';
 /**
- * @description This function allows you to map a range of values to another with a conside syntax
+ * @description This function allows you to map a range of values to another with a concise syntax
  * @see [Documentation](https://www.remotion.dev/docs/interpolate)
  */
 export type EasingFunction = (input: number) => number;

package/dist/cjs/series/index.js

@@ -7,10 +7,12 @@ const Sequence_js_1 = require("../Sequence.js");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
 const flatten_children_js_1 = require("./flatten-children.js");
+const is_inside_series_js_1 = require("./is-inside-series.js");
 const SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
+    (0, is_inside_series_js_1.useRequireToBeInsideSeries)();
     // Discard ref
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return (0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: children });
 };
 const SeriesSequence = (0, react_1.forwardRef)(SeriesSequenceRefForwardingFunction);
 /**
@@ -62,8 +64,7 @@ const Series = ({ children }) => {
             return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { name: name || '<Series.Sequence>', from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
         });
     }, [children]);
-    /* eslint-disable react/jsx-no-useless-fragment */
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: childrenValue });
+    return (0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsInsideSeriesContainer, { children: childrenValue });
 };
 exports.Series = Series;
 Series.Sequence = SeriesSequence;

package/dist/cjs/series/is-inside-series.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const IsInsideSeriesContext: React.Context<boolean>;
+export declare const IsInsideSeriesContainer: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const IsNotInsideSeriesProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const useRequireToBeInsideSeries: () => void;

package/dist/cjs/series/is-inside-series.js

@@ -0,0 +1,44 @@
+"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 __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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRequireToBeInsideSeries = exports.IsNotInsideSeriesProvider = exports.IsInsideSeriesContainer = exports.IsInsideSeriesContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.IsInsideSeriesContext = (0, react_1.createContext)(false);
+const IsInsideSeriesContainer = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.IsInsideSeriesContext.Provider, { value: true, children: children }));
+};
+exports.IsInsideSeriesContainer = IsInsideSeriesContainer;
+const IsNotInsideSeriesProvider = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.IsInsideSeriesContext.Provider, { value: false, children: children }));
+};
+exports.IsNotInsideSeriesProvider = IsNotInsideSeriesProvider;
+const useRequireToBeInsideSeries = () => {
+    const isInsideSeries = react_1.default.useContext(exports.IsInsideSeriesContext);
+    if (!isInsideSeries) {
+        throw new Error('This component must be inside a <Series /> component.');
+    }
+};
+exports.useRequireToBeInsideSeries = useRequireToBeInsideSeries;

package/dist/cjs/spring/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.measureSpring = exports.spring = void 0;
+const interpolate_js_1 = require("../interpolate.js");
 const validate_frame_js_1 = require("../validate-frame.js");
 const validate_fps_js_1 = require("../validation/validate-fps.js");
 const validation_spring_duration_js_1 = require("../validation/validation-spring-duration.js");
@@ -64,16 +65,14 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
         fps,
         frame: durationProcessed,
         config,
-        from,
-        to,
     });
-    if (!config.overshootClamping) {
-        return spr.current;
-    }
-    if (to >= from) {
-        return Math.min(spr.current, to);
-    }
-    return Math.max(spr.current, to);
+    const inner = config.overshootClamping
+        ? to >= from
+            ? Math.min(spr.current, to)
+            : Math.max(spr.current, to)
+        : spr.current;
+    const interpolated = from === 0 && to === 1 ? inner : (0, interpolate_js_1.interpolate)(inner, [0, 1], [from, to]);
+    return interpolated;
 }
 exports.spring = spring;
 var measure_spring_js_2 = require("./measure-spring.js");

package/dist/cjs/spring/measure-spring.js

@@ -49,8 +49,6 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
             fps,
             frame,
             config,
-            from,
-            to,
         });
     };
     let animation = calc();

package/dist/cjs/spring/spring-utils.d.ts

@@ -11,9 +11,7 @@ export type SpringConfig = {
     stiffness: number;
     overshootClamping: boolean;
 };
-export declare function springCalculation({ from, to, frame, fps, config, }: {
-    from?: number;
-    to?: number;
+export declare function springCalculation({ frame, fps, config, }: {
     frame: number;
     fps: number;
     config?: Partial<SpringConfig>;

package/dist/cjs/spring/spring-utils.js

@@ -60,10 +60,10 @@ function advance({ animation, now, config, }) {
     return animationNode;
 }
 const calculationCache = {};
-function springCalculation({ from = 0, to = 1, frame, fps, config = {}, }) {
+function springCalculation({ frame, fps, config = {}, }) {
+    const from = 0;
+    const to = 1;
     const cacheKey = [
-        from,
-        to,
         frame,
         fps,
         config.damping,

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

@@ -1,8 +1,7 @@
 import type { VideoConfig } from './video-config.js';
 /**
- * /**
  * @description Get some info about the context of the video that you are making.
  * @see [Documentation](https://www.remotion.dev/docs/use-video-config)
- * @returns Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
+ * @returns Returns an object containing `fps`, `width`, `height`, `durationInFrames`, `id` and `defaultProps`.
  */
 export declare const useVideoConfig: () => VideoConfig;

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

@@ -6,10 +6,9 @@ const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const is_player_js_1 = require("./is-player.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 /**
- * /**
  * @description Get some info about the context of the video that you are making.
  * @see [Documentation](https://www.remotion.dev/docs/use-video-config)
- * @returns Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
+ * @returns Returns an object containing `fps`, `width`, `height`, `durationInFrames`, `id` and `defaultProps`.
  */
 const useVideoConfig = () => {
     const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();

package/dist/cjs/version.d.ts

@@ -1 +1,6 @@
-export declare const VERSION = "4.0.143";
+/**
+ * @description Provides the current version number of the Remotion library.
+ * @see [Documentation](https://remotion.dev/docs/version)
+ * @returns {string} The current version of the remotion package
+ */
+export declare const VERSION = "4.0.144";

package/dist/cjs/version.js

@@ -1,5 +1,10 @@
 "use strict";
+// Automatically generated on publish
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-// Automatically generated on publish
-exports.VERSION = '4.0.143';
+/**
+ * @description Provides the current version number of the Remotion library.
+ * @see [Documentation](https://remotion.dev/docs/version)
+ * @returns {string} The current version of the remotion package
+ */
+exports.VERSION = '4.0.144';

package/dist/cjs/watch-static-file.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.watchStaticFile = exports.WATCH_REMOTION_STATIC_FILES = void 0;
 const get_remotion_environment_1 = require("./get-remotion-environment");
+const v5_flag_1 = require("./v5-flag");
 exports.WATCH_REMOTION_STATIC_FILES = 'remotion_staticFilesChanged';
 /**
  * @description Watch for changes in a specific static file.
@@ -11,6 +12,9 @@ exports.WATCH_REMOTION_STATIC_FILES = 'remotion_staticFilesChanged';
  * @see [Documentation](https://www.remotion.dev/docs/watchstaticfile)
  */
 const watchStaticFile = (fileName, callback) => {
+    if (v5_flag_1.ENABLE_V5_BREAKING_CHANGES) {
+        throw new Error('watchStaticFile() has moved into the `@remotion/studio` package. Update your imports.');
+    }
     // Check if function is called in Remotion Studio
     if (!(0, get_remotion_environment_1.getRemotionEnvironment)().isStudio) {
         // eslint-disable-next-line no-console

package/dist/esm/index.mjs

@@ -1,5 +1,5 @@
 import React, { createContext, useState, useMemo, useLayoutEffect, useContext, useEffect, forwardRef, useCallback, useRef, createRef, useImperativeHandle, useReducer, Suspense, Children } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
 const NativeLayersContext = createContext({
@@ -105,7 +105,12 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.143';
+/**
+ * @description Provides the current version number of the Remotion library.
+ * @see [Documentation](https://remotion.dev/docs/version)
+ * @returns {string} The current version of the remotion package
+ */
+const VERSION = '4.0.144';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -926,10 +931,9 @@ const useUnsafeVideoConfig = () => {
 };
 
 /**
- * /**
  * @description Get some info about the context of the video that you are making.
  * @see [Documentation](https://www.remotion.dev/docs/use-video-config)
- * @returns Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
+ * @returns Returns an object containing `fps`, `width`, `height`, `durationInFrames`, `id` and `defaultProps`.
  */
 const useVideoConfig = () => {
     const videoConfig = useUnsafeVideoConfig();
@@ -3666,7 +3670,7 @@ const injectCSS = (css) => {
     injected[css] = true;
 };
 const OFFTHREAD_VIDEO_CLASS_NAME = '__remotion_offthreadvideo';
-const makeDefaultCSS = (scope, backgroundColor) => {
+const makeDefaultPreviewCSS = (scope, backgroundColor) => {
     if (!scope) {
         return `
     * {
@@ -3699,7 +3703,7 @@ var CSSUtils = /*#__PURE__*/Object.freeze({
     __proto__: null,
     injectCSS: injectCSS,
     OFFTHREAD_VIDEO_CLASS_NAME: OFFTHREAD_VIDEO_CLASS_NAME,
-    makeDefaultCSS: makeDefaultCSS
+    makeDefaultPreviewCSS: makeDefaultPreviewCSS
 });
 
 const REMOTION_STUDIO_CONTAINER_ELEMENT = '__remotion-studio-container';
@@ -4467,10 +4471,25 @@ const flattenChildren = (children) => {
     }, []);
 };
 
+const IsInsideSeriesContext = createContext(false);
+const IsInsideSeriesContainer = ({ children }) => {
+    return (jsx(IsInsideSeriesContext.Provider, { value: true, children: children }));
+};
+const IsNotInsideSeriesProvider = ({ children }) => {
+    return (jsx(IsInsideSeriesContext.Provider, { value: false, children: children }));
+};
+const useRequireToBeInsideSeries = () => {
+    const isInsideSeries = React.useContext(IsInsideSeriesContext);
+    if (!isInsideSeries) {
+        throw new Error('This component must be inside a <Series /> component.');
+    }
+};
+
 const SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
+    useRequireToBeInsideSeries();
     // Discard ref
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return jsx(Fragment, { children: children });
+    return jsx(IsNotInsideSeriesProvider, { children: children });
 };
 const SeriesSequence = forwardRef(SeriesSequenceRefForwardingFunction);
 /**
@@ -4522,8 +4541,7 @@ const Series = ({ children }) => {
             return (jsx(Sequence, { name: name || '<Series.Sequence>', from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
         });
     }, [children]);
-    /* eslint-disable react/jsx-no-useless-fragment */
-    return jsx(Fragment, { children: childrenValue });
+    return jsx(IsInsideSeriesContainer, { children: childrenValue });
 };
 Series.Sequence = SeriesSequence;
 addSequenceStackTraces(SeriesSequence);
@@ -4605,10 +4623,10 @@ function advance({ animation, now, config, }) {
     return animationNode;
 }
 const calculationCache = {};
-function springCalculation({ from = 0, to = 1, frame, fps, config = {}, }) {
+function springCalculation({ frame, fps, config = {}, }) {
+    const from = 0;
+    const to = 1;
     const cacheKey = [
-        from,
-        to,
         frame,
         fps,
         config.damping,
@@ -4692,8 +4710,6 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
             fps,
             frame,
             config,
-            from,
-            to,
         });
     };
     let animation = calc();
@@ -4782,16 +4798,14 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
         fps,
         frame: durationProcessed,
         config,
-        from,
-        to,
     });
-    if (!config.overshootClamping) {
-        return spr.current;
-    }
-    if (to >= from) {
-        return Math.min(spr.current, to);
-    }
-    return Math.max(spr.current, to);
+    const inner = config.overshootClamping
+        ? to >= from
+            ? Math.min(spr.current, to)
+            : Math.max(spr.current, to)
+        : spr.current;
+    const interpolated = from === 0 && to === 1 ? inner : interpolate(inner, [0, 1], [from, to]);
+    return interpolated;
 }
 
 /**

package/dist/esm/version.mjs

@@ -1,4 +1,9 @@
 // Automatically generated on publish
-const VERSION = '4.0.143';
+/**
+ * @description Provides the current version number of the Remotion library.
+ * @see [Documentation](https://remotion.dev/docs/version)
+ * @returns {string} The current version of the remotion package
+ */
+const VERSION = '4.0.144';
 
 export { VERSION };

package/ensure-correct-version.ts

@@ -7,6 +7,12 @@ const {version} = packageJson;
 const src =
 	`
 // Automatically generated on publish
+
+/**
+ * @description Provides the current version number of the Remotion library.
+ * @see [Documentation](https://remotion.dev/docs/version)
+ * @returns {string} The current version of the remotion package
+ */
 export const VERSION = '${version}';
 `.trim() + '\n';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.143",
+  "version": "4.0.144",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",