remotion 4.0.474 → 4.0.476

package/dist/cjs/interpolate.js

@@ -42,6 +42,32 @@ const lengthUnits = new Set([
     'vw',
 ]);
 const cssNumberRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/;
+const transformOriginKeywords = new Set([
+    'left',
+    'center',
+    'right',
+    'top',
+    'bottom',
+]);
+const transformOriginKeywordOptions = (keyword) => {
+    if (keyword === 'left') {
+        return [{ axis: 'x', value: { value: 0, unit: '%' } }];
+    }
+    if (keyword === 'right') {
+        return [{ axis: 'x', value: { value: 100, unit: '%' } }];
+    }
+    if (keyword === 'top') {
+        return [{ axis: 'y', value: { value: 0, unit: '%' } }];
+    }
+    if (keyword === 'bottom') {
+        return [{ axis: 'y', value: { value: 100, unit: '%' } }];
+    }
+    return [
+        { axis: 'x', value: { value: 50, unit: '%' } },
+        { axis: 'y', value: { value: 50, unit: '%' } },
+    ];
+};
+const transformOriginCenter = { value: 50, unit: '%' };
 const stringifyNumber = (value) => {
     return String((0, normalize_number_js_1.normalizeNumber)(value));
 };
@@ -67,6 +93,124 @@ const parseStringInterpolationComponent = (component, value) => {
     }
     throw new TypeError(`Cannot interpolate "${value}" because "${unit}" is not a supported translate or rotate unit`);
 };
+const parseTransformOriginLengthPercentage = ({ component, value, allowPercentage, }) => {
+    var _a;
+    const match = cssNumberRegex.exec(component);
+    if (match === null) {
+        throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? 'length-percentage' : 'z length'}`);
+    }
+    const unit = (_a = match[2]) !== null && _a !== void 0 ? _a : null;
+    const numberValue = Number(match[1]);
+    if (!Number.isFinite(numberValue)) {
+        throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not finite`);
+    }
+    if (unit === null ||
+        !lengthUnits.has(unit) ||
+        (!allowPercentage && unit === '%')) {
+        throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? 'length-percentage' : 'z length'}`);
+    }
+    return { value: numberValue, unit };
+};
+const parseTransformOriginToken = (component, value) => {
+    const lower = component.toLowerCase();
+    if (transformOriginKeywords.has(lower)) {
+        return { type: 'keyword', keyword: lower };
+    }
+    return {
+        type: 'length-percentage',
+        parsed: parseTransformOriginLengthPercentage({
+            component,
+            value,
+            allowPercentage: true,
+        }),
+    };
+};
+const parseTwoTransformOriginKeywords = (first, second, value) => {
+    const candidates = [];
+    for (const firstOption of transformOriginKeywordOptions(first)) {
+        for (const secondOption of transformOriginKeywordOptions(second)) {
+            if (firstOption.axis === secondOption.axis) {
+                continue;
+            }
+            candidates.push(firstOption.axis === 'x'
+                ? [firstOption.value, secondOption.value]
+                : [secondOption.value, firstOption.value]);
+        }
+    }
+    if (candidates.length === 0) {
+        throw new TypeError(`Cannot interpolate "${value}" because "${first} ${second}" is not a valid transform-origin keyword pair`);
+    }
+    return candidates[0];
+};
+const parseTransformOriginXY = (parts, value) => {
+    if (parts.length === 1) {
+        const token = parseTransformOriginToken(parts[0], value);
+        if (token.type === 'length-percentage') {
+            return [token.parsed, transformOriginCenter];
+        }
+        if (token.keyword === 'top' || token.keyword === 'bottom') {
+            return [
+                transformOriginCenter,
+                transformOriginKeywordOptions(token.keyword)[0].value,
+            ];
+        }
+        return [
+            transformOriginKeywordOptions(token.keyword)[0].value,
+            transformOriginCenter,
+        ];
+    }
+    const first = parseTransformOriginToken(parts[0], value);
+    const second = parseTransformOriginToken(parts[1], value);
+    if (first.type === 'length-percentage' &&
+        second.type === 'length-percentage') {
+        return [first.parsed, second.parsed];
+    }
+    if (first.type === 'keyword' && second.type === 'keyword') {
+        return parseTwoTransformOriginKeywords(first.keyword, second.keyword, value);
+    }
+    const keyword = first.type === 'keyword'
+        ? first
+        : second.type === 'keyword'
+            ? second
+            : null;
+    const length = first.type === 'length-percentage'
+        ? first.parsed
+        : second.type === 'length-percentage'
+            ? second.parsed
+            : null;
+    if (keyword === null || length === null) {
+        throw new Error('Expected a keyword and a length-percentage value');
+    }
+    const keywordIsFirst = first.type === 'keyword';
+    if (keyword.keyword === 'left' || keyword.keyword === 'right') {
+        if (!keywordIsFirst) {
+            throw new TypeError(`Cannot interpolate "${value}" because horizontal transform-origin keywords must come before a length-percentage value`);
+        }
+        return [transformOriginKeywordOptions(keyword.keyword)[0].value, length];
+    }
+    if (keyword.keyword === 'top' || keyword.keyword === 'bottom') {
+        return [length, transformOriginKeywordOptions(keyword.keyword)[0].value];
+    }
+    return keywordIsFirst
+        ? [transformOriginCenter, length]
+        : [length, transformOriginCenter];
+};
+const parseTransformOriginValue = (output, parts) => {
+    const [x, y] = parseTransformOriginXY(parts.slice(0, 2), output);
+    const z = parts[2] === undefined
+        ? { value: 0, unit: null }
+        : parseTransformOriginLengthPercentage({
+            component: parts[2],
+            value: output,
+            allowPercentage: false,
+        });
+    return {
+        kind: 'translate',
+        values: [x.value, y.value, z.value],
+        units: [x.unit, y.unit, z.unit],
+        dimensions: parts[2] === undefined ? 2 : 3,
+    };
+};
 const parseStringInterpolationValue = (output) => {
     var _a, _b, _c, _d, _e, _f;
     var _g, _h, _j, _k, _l, _m;
@@ -85,6 +229,9 @@ const parseStringInterpolationValue = (output) => {
     if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
         throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
     }
+    if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
+        return parseTransformOriginValue(output, parts);
+    }
     const parsed = parts.map((part) => parseStringInterpolationComponent(part, output));
     const [{ kind }] = parsed;
     for (const part of parsed) {

package/dist/cjs/loop/index.js

@@ -84,7 +84,7 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, showInTimeli
             durationInFrames,
         };
     }, [currentFrame, durationInFrames]);
-    return (jsx_runtime_1.jsx(LoopContext.Provider, { value: loopContext, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/loop' : undefined, _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, showInTimeline: showInTimeline, children: children }) }));
+    return (jsx_runtime_1.jsx(LoopContext.Provider, { value: loopContext, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/loop", _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, showInTimeline: showInTimeline, children: children }) }));
 };
 exports.Loop = Loop;
 exports.Loop.useLoop = useLoop;

package/dist/cjs/no-react.d.ts

@@ -63,6 +63,7 @@ export declare const NoReactInternals: {
     }) => string[];
     sequenceSchema: {
         readonly hidden: import("./sequence-field-schema").BooleanFieldSchema;
+        readonly showInTimeline: import("./sequence-field-schema").HiddenFieldSchema;
         readonly from: {
             readonly type: "number";
             readonly default: 0;
@@ -82,6 +83,12 @@ export declare const NoReactInternals: {
             readonly description: "Layout";
             readonly variants: {
                 readonly 'absolute-fill': {
+                    readonly 'style.transformOrigin': {
+                        readonly type: "transform-origin";
+                        readonly step: 1;
+                        readonly default: "50% 50%";
+                        readonly description: "Transform origin";
+                    };
                     readonly 'style.translate': {
                         readonly type: "translate";
                         readonly step: 1;
@@ -135,6 +142,8 @@ export declare const NoReactInternals: {
                 readonly none: {};
             };
         };
+    } & {
+        name: import("./sequence-field-schema").SequenceFieldSchema;
     };
     parseScaleValue: (value: unknown) => import("./scale-value").ScaleValue;
     serializeScaleValue: ([x, y, z]: import("./scale-value").ScaleValue) => string | number;

package/dist/cjs/sequence-field-schema.d.ts

@@ -41,6 +41,13 @@ export type TranslateFieldSchema = {
     description?: string;
     keyframable?: boolean;
 };
+export type TransformOriginFieldSchema = {
+    type: 'transform-origin';
+    step?: number;
+    default: string | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
 export type ScaleFieldSchema = {
     type: 'scale';
     min?: number;
@@ -95,13 +102,19 @@ export type ArrayFieldSchema = {
     description?: string;
     keyframable?: false;
 };
-export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | ArrayFieldSchema | EnumFieldSchema;
+export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | ArrayFieldSchema | EnumFieldSchema;
 export type SequenceFieldSchema = VisibleFieldSchema | HiddenFieldSchema;
 export type SequenceSchema = {
     [key: string]: SequenceFieldSchema;
 };
 export type SchemaKeysRecord<S extends SequenceSchema> = Record<keyof S, unknown>;
 export declare const sequenceVisualStyleSchema: {
+    readonly 'style.transformOrigin': {
+        readonly type: "transform-origin";
+        readonly step: 1;
+        readonly default: "50% 50%";
+        readonly description: "Transform origin";
+    };
     readonly 'style.translate': {
         readonly type: "translate";
         readonly step: 1;
@@ -155,6 +168,12 @@ export declare const sequencePremountSchema: {
     };
 };
 export declare const sequenceStyleSchema: {
+    readonly 'style.transformOrigin': {
+        readonly type: "transform-origin";
+        readonly step: 1;
+        readonly default: "50% 50%";
+        readonly description: "Transform origin";
+    };
     readonly 'style.translate': {
         readonly type: "translate";
         readonly step: 1;
@@ -206,6 +225,10 @@ export declare const sequenceStyleSchema: {
     };
 };
 export declare const hiddenField: SequenceFieldSchema;
+export declare const sequenceNameField: SequenceFieldSchema;
+export declare const extendSchemaWithSequenceName: <S extends SequenceSchema>(schema: S) => S & {
+    name: SequenceFieldSchema;
+};
 export declare const durationInFramesField: {
     readonly type: "number";
     readonly default: undefined;
@@ -221,6 +244,7 @@ export declare const fromField: {
 };
 export declare const sequenceSchema: {
     readonly hidden: BooleanFieldSchema;
+    readonly showInTimeline: HiddenFieldSchema;
     readonly from: {
         readonly type: "number";
         readonly default: 0;
@@ -240,6 +264,12 @@ export declare const sequenceSchema: {
         readonly description: "Layout";
         readonly variants: {
             readonly 'absolute-fill': {
+                readonly 'style.transformOrigin': {
+                    readonly type: "transform-origin";
+                    readonly step: 1;
+                    readonly default: "50% 50%";
+                    readonly description: "Transform origin";
+                };
                 readonly 'style.translate': {
                     readonly type: "translate";
                     readonly step: 1;
@@ -293,9 +323,12 @@ export declare const sequenceSchema: {
             readonly none: {};
         };
     };
+} & {
+    name: SequenceFieldSchema;
 };
 export declare const sequenceSchemaWithoutFrom: {
     readonly hidden: BooleanFieldSchema;
+    readonly showInTimeline: HiddenFieldSchema;
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -309,6 +342,12 @@ export declare const sequenceSchemaWithoutFrom: {
         readonly description: "Layout";
         readonly variants: {
             readonly 'absolute-fill': {
+                readonly 'style.transformOrigin': {
+                    readonly type: "transform-origin";
+                    readonly step: 1;
+                    readonly default: "50% 50%";
+                    readonly description: "Transform origin";
+                };
                 readonly 'style.translate': {
                     readonly type: "translate";
                     readonly step: 1;
@@ -362,5 +401,7 @@ export declare const sequenceSchemaWithoutFrom: {
             readonly none: {};
         };
     };
+} & {
+    name: SequenceFieldSchema;
 };
 export declare const sequenceSchemaDefaultLayoutNone: SequenceSchema;

package/dist/cjs/sequence-field-schema.js

@@ -1,7 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.sequenceSchema = exports.fromField = exports.durationInFramesField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.sequenceVisualStyleSchema = void 0;
+exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.sequenceSchema = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.sequenceVisualStyleSchema = void 0;
 exports.sequenceVisualStyleSchema = {
+    'style.transformOrigin': {
+        type: 'transform-origin',
+        step: 1,
+        default: '50% 50%',
+        description: 'Transform origin',
+    },
     'style.translate': {
         type: 'translate',
         step: 1,
@@ -63,6 +69,19 @@ exports.hiddenField = {
     default: false,
     description: 'Hidden',
 };
+const showInTimelineField = {
+    type: 'hidden',
+};
+exports.sequenceNameField = {
+    type: 'hidden',
+};
+const extendSchemaWithSequenceName = (schema) => {
+    return {
+        name: exports.sequenceNameField,
+        ...schema,
+    };
+};
+exports.extendSchemaWithSequenceName = extendSchemaWithSequenceName;
 exports.durationInFramesField = {
     type: 'number',
     default: undefined,
@@ -76,8 +95,9 @@ exports.fromField = {
     step: 1,
     hiddenFromList: true,
 };
-exports.sequenceSchema = {
+exports.sequenceSchema = (0, exports.extendSchemaWithSequenceName)({
     hidden: exports.hiddenField,
+    showInTimeline: showInTimelineField,
     from: exports.fromField,
     durationInFrames: exports.durationInFramesField,
     layout: {
@@ -89,12 +109,13 @@ exports.sequenceSchema = {
             none: {},
         },
     },
-};
-exports.sequenceSchemaWithoutFrom = {
+});
+exports.sequenceSchemaWithoutFrom = (0, exports.extendSchemaWithSequenceName)({
     hidden: exports.hiddenField,
+    showInTimeline: showInTimelineField,
     durationInFrames: exports.durationInFramesField,
     layout: exports.sequenceSchema.layout,
-};
+});
 exports.sequenceSchemaDefaultLayoutNone = {
     ...exports.sequenceSchema,
     layout: {

package/dist/cjs/series/index.d.ts

@@ -4,7 +4,7 @@ type SeriesSequenceProps = PropsWithChildren<{
     readonly durationInFrames: number;
     readonly offset?: number;
     readonly className?: string;
-} & Pick<SequenceProps, 'layout' | 'name' | 'hidden'> & LayoutAndStyle>;
+} & Pick<SequenceProps, 'layout' | 'name' | 'hidden' | 'showInTimeline'> & LayoutAndStyle>;
 declare const SeriesSequence: React.ForwardRefExoticComponent<SeriesSequenceProps & React.RefAttributes<HTMLDivElement>>;
 type SeriesProps = SequenceProps;
 /**

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.474";
+export declare const VERSION = "4.0.476";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.474';
+exports.VERSION = '4.0.476';

package/dist/cjs/video/VideoForPreview.js

@@ -131,11 +131,9 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         premountDisplay: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premountDisplay) !== null && _c !== void 0 ? _c : null,
         postmountDisplay: (_d = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmountDisplay) !== null && _d !== void 0 ? _d : null,
         loopDisplay: undefined,
-        documentationLink: name === undefined
-            ? onlyWarnForMediaSeekingError
-                ? 'https://www.remotion.dev/docs/offthreadvideo'
-                : 'https://www.remotion.dev/docs/html5-video'
-            : null,
+        documentationLink: onlyWarnForMediaSeekingError
+            ? 'https://www.remotion.dev/docs/offthreadvideo'
+            : 'https://www.remotion.dev/docs/html5-video',
         refForOutline: videoRef,
     });
     // putting playback before useVolume
@@ -282,6 +280,6 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         requestsVideoFrame: Boolean(onVideoFrame),
         isClientSideRendering: false,
     });
-    return (jsx_runtime_1.jsx("video", { ref: videoRef, muted: muted || mediaMuted || userPreferredVolume <= 0, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, ...nativeProps }));
+    return (jsx_runtime_1.jsx("video", { ...nativeProps, ref: videoRef, muted: muted || mediaMuted || userPreferredVolume <= 0, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, controls: false }));
 };
 exports.VideoForPreview = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);

package/dist/cjs/wrap-in-schema.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SequenceControls } from './CompositionManager.js';
-import type { SequenceSchema } from './sequence-field-schema.js';
+import { type SequenceSchema } from './sequence-field-schema.js';
 export declare const getNestedValue: (obj: Record<string, unknown>, key: string) => unknown;
 export declare const readValuesFromProps: (props: Record<string, unknown>, keys: string[]) => Record<string, unknown>;
 export declare const selectActiveKeys: (schema: SequenceSchema, values: Record<string, unknown>) => string[];

package/dist/cjs/wrap-in-schema.js

@@ -38,6 +38,7 @@ const react_1 = __importStar(require("react"));
 const delete_nested_key_js_1 = require("./delete-nested-key.js");
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const flatten_schema_js_1 = require("./flatten-schema.js");
+const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
 const sequence_node_path_js_1 = require("./sequence-node-path.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
@@ -99,7 +100,8 @@ exports.mergeValues = mergeValues;
 const stackToOverrideMap = {};
 const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
     // Schema is static for a component, so we move this outside
-    const flatSchema = (0, flatten_schema_js_1.getFlatSchemaWithAllKeys)(schema);
+    const schemaWithSequenceName = (0, sequence_field_schema_js_1.extendSchemaWithSequenceName)(schema);
+    const flatSchema = (0, flatten_schema_js_1.getFlatSchemaWithAllKeys)(schemaWithSequenceName);
     const flatKeys = Object.keys(flatSchema);
     const Wrapped = (0, react_1.forwardRef)((props, ref) => {
         var _a;
@@ -154,7 +156,7 @@ const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const controls = (0, react_1.useMemo)(() => {
             return {
-                schema,
+                schema: schemaWithSequenceName,
                 currentRuntimeValueDotNotation,
                 overrideId,
                 supportsEffects,
@@ -164,7 +166,7 @@ const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const { merged: valuesDotNotation, propsToDelete } = (0, react_1.useMemo)(() => {
             return (0, use_schema_js_1.computeEffectiveSchemaValuesDotNotation)({
-                schema,
+                schema: schemaWithSequenceName,
                 currentValue: currentRuntimeValueDotNotation,
                 overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
                 propStatus: nodePath === null
@@ -180,7 +182,7 @@ const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
             frame,
         ]);
         // 4. Eliminate values forbidden by the resolved discriminated union.
-        const activeKeys = (0, exports.selectActiveKeys)(schema, valuesDotNotation);
+        const activeKeys = (0, exports.selectActiveKeys)(schemaWithSequenceName, valuesDotNotation);
         // 5. Apply the active values back onto the props.
         const mergedProps = (0, exports.mergeValues)({
             props: props,