remotion 4.0.479 → 4.0.482

package/dist/cjs/effects/Solid.d.ts

@@ -13,5 +13,100 @@ type OptionalProps = {
     readonly pixelDensity: number | undefined;
 };
 export type SolidProps = MandatoryProps & Partial<OptionalProps>;
+export declare const solidSchema: {
+    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;
+        readonly default: "0px 0px";
+        readonly description: "Offset";
+    };
+    readonly 'style.scale': {
+        readonly type: "scale";
+        readonly max: 100;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Scale";
+    };
+    readonly 'style.rotate': {
+        readonly type: "rotation-css";
+        readonly step: 1;
+        readonly default: "0deg";
+        readonly description: "Rotation";
+    };
+    readonly 'style.opacity': {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Opacity";
+        readonly hiddenFromList: false;
+    };
+    readonly durationInFrames: {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 1;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly from: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly trimBefore: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly hidden: import("../interactivity-schema.js").BooleanFieldSchema;
+    readonly name: import("../interactivity-schema.js").HiddenFieldSchema;
+    readonly showInTimeline: import("../interactivity-schema.js").HiddenFieldSchema;
+    readonly color: {
+        readonly type: "color";
+        readonly default: "transparent";
+        readonly description: "Color";
+    };
+    readonly width: {
+        readonly type: "number";
+        readonly min: 1;
+        readonly step: 1;
+        readonly default: 1920;
+        readonly description: "Width";
+        readonly hiddenFromList: false;
+    };
+    readonly height: {
+        readonly type: "number";
+        readonly min: 1;
+        readonly step: 1;
+        readonly default: 1080;
+        readonly description: "Height";
+        readonly hiddenFromList: false;
+    };
+    readonly pixelDensity: {
+        readonly type: "number";
+        readonly min: 1;
+        readonly max: 3;
+        readonly step: 0.1;
+        readonly default: 1;
+        readonly description: "Pixel density";
+        readonly hiddenFromList: false;
+    };
+};
 export declare const Solid: React.ComponentType<MandatoryProps & Partial<OptionalProps> & InteractiveBaseProps & React.RefAttributes<HTMLCanvasElement>>;
 export {};

package/dist/cjs/effects/Solid.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Solid = void 0;
+exports.Solid = exports.solidSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
@@ -22,7 +22,7 @@ const resolveSolidPixelDensity = (pixelDensity) => {
     }
     return pixelDensity;
 };
-const solidSchema = {
+exports.solidSchema = {
     ...interactivity_schema_js_1.baseSchema,
     color: {
         type: 'color',
@@ -45,6 +45,15 @@ const solidSchema = {
         description: 'Height',
         hiddenFromList: false,
     },
+    pixelDensity: {
+        type: 'number',
+        min: 1,
+        max: 3,
+        step: 0.1,
+        default: 1,
+        description: 'Pixel density',
+        hiddenFromList: false,
+    },
     ...interactivity_schema_js_1.transformSchema,
 };
 const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, reference, }) => {
@@ -138,7 +147,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     }, [height, style, width]);
     return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: canvasWidth, height: canvasHeight, className: className, style: canvasStyle }));
 };
-const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, height, width, className, durationInFrames, style, name, from, freeze, hidden, showInTimeline, pixelDensity, ...props }, ref) => {
+const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, height, width, className, durationInFrames, style, name, from, trimBefore, freeze, hidden, showInTimeline, pixelDensity, ...props }, ref) => {
     var _a;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
@@ -146,12 +155,13 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, hei
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', outlineRef: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', outlineRef: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
 });
 exports.Solid = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SolidOuter,
+    componentName: '<Solid>',
     componentIdentity: 'dev.remotion.remotion.Solid',
-    schema: solidSchema,
+    schema: exports.solidSchema,
     supportsEffects: true,
 });
 exports.Solid.displayName = 'Solid';

package/dist/cjs/interactivity-schema.d.ts

@@ -180,6 +180,77 @@ export declare const sequenceVisualStyleSchema: {
         readonly hiddenFromList: false;
     };
 };
+export declare const textSchema: {
+    readonly 'style.color': {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Color";
+    };
+    readonly 'style.fontSize': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Font size";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.lineHeight': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 0;
+        readonly step: 0.05;
+        readonly description: "Line height";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.fontWeight': {
+        readonly type: "enum";
+        readonly default: "400";
+        readonly description: "Font weight";
+        readonly variants: {
+            readonly '100': {};
+            readonly '200': {};
+            readonly '300': {};
+            readonly '400': {};
+            readonly '500': {};
+            readonly '600': {};
+            readonly '700': {};
+            readonly '800': {};
+            readonly '900': {};
+            readonly normal: {};
+            readonly bold: {};
+        };
+    };
+    readonly 'style.fontStyle': {
+        readonly type: "enum";
+        readonly default: "normal";
+        readonly description: "Font style";
+        readonly variants: {
+            readonly normal: {};
+            readonly italic: {};
+            readonly oblique: {};
+        };
+    };
+    readonly 'style.textAlign': {
+        readonly type: "enum";
+        readonly default: "left";
+        readonly description: "Text align";
+        readonly variants: {
+            readonly left: {};
+            readonly center: {};
+            readonly right: {};
+            readonly justify: {};
+            readonly start: {};
+            readonly end: {};
+        };
+    };
+    readonly 'style.letterSpacing': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly step: 0.1;
+        readonly description: "Letter spacing";
+        readonly hiddenFromList: false;
+    };
+};
 export declare const premountSchema: {
     readonly premountFor: {
         readonly type: "number";
@@ -301,6 +372,13 @@ export declare const fromField: {
     readonly step: 1;
     readonly hiddenFromList: true;
 };
+export declare const trimBeforeField: {
+    readonly type: "number";
+    readonly default: 0;
+    readonly min: 0;
+    readonly step: 1;
+    readonly hiddenFromList: true;
+};
 export declare const freezeField: {
     readonly type: "number";
     readonly default: null;
@@ -321,6 +399,13 @@ export declare const baseSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly trimBefore: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;
@@ -345,6 +430,13 @@ export declare const sequenceSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly trimBefore: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;
@@ -428,6 +520,13 @@ export declare const baseSchemaWithoutFrom: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly trimBefore: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;
@@ -446,6 +545,13 @@ export declare const sequenceSchemaWithoutFrom: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly trimBefore: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;

package/dist/cjs/interactivity-schema.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.baseSchemaWithoutFrom = exports.sequenceSchema = exports.baseSchema = exports.freezeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.premountSchema = exports.sequenceVisualStyleSchema = exports.transformSchema = void 0;
+exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.baseSchemaWithoutFrom = exports.sequenceSchema = exports.baseSchema = exports.freezeField = exports.trimBeforeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.premountSchema = exports.textSchema = exports.sequenceVisualStyleSchema = exports.transformSchema = void 0;
 exports.transformSchema = {
     'style.transformOrigin': {
         type: 'transform-origin',
@@ -38,6 +38,77 @@ exports.transformSchema = {
     },
 };
 exports.sequenceVisualStyleSchema = exports.transformSchema;
+exports.textSchema = {
+    'style.color': {
+        type: 'color',
+        default: undefined,
+        description: 'Color',
+    },
+    'style.fontSize': {
+        type: 'number',
+        default: undefined,
+        min: 0,
+        step: 1,
+        description: 'Font size',
+        hiddenFromList: false,
+    },
+    'style.lineHeight': {
+        type: 'number',
+        default: undefined,
+        min: 0,
+        step: 0.05,
+        description: 'Line height',
+        hiddenFromList: false,
+    },
+    'style.fontWeight': {
+        type: 'enum',
+        default: '400',
+        description: 'Font weight',
+        variants: {
+            '100': {},
+            '200': {},
+            '300': {},
+            '400': {},
+            '500': {},
+            '600': {},
+            '700': {},
+            '800': {},
+            '900': {},
+            normal: {},
+            bold: {},
+        },
+    },
+    'style.fontStyle': {
+        type: 'enum',
+        default: 'normal',
+        description: 'Font style',
+        variants: {
+            normal: {},
+            italic: {},
+            oblique: {},
+        },
+    },
+    'style.textAlign': {
+        type: 'enum',
+        default: 'left',
+        description: 'Text align',
+        variants: {
+            left: {},
+            center: {},
+            right: {},
+            justify: {},
+            start: {},
+            end: {},
+        },
+    },
+    'style.letterSpacing': {
+        type: 'number',
+        default: undefined,
+        step: 0.1,
+        description: 'Letter spacing',
+        hiddenFromList: false,
+    },
+};
 exports.premountSchema = {
     premountFor: {
         type: 'number',
@@ -97,6 +168,13 @@ exports.fromField = {
     step: 1,
     hiddenFromList: true,
 };
+exports.trimBeforeField = {
+    type: 'number',
+    default: 0,
+    min: 0,
+    step: 1,
+    hiddenFromList: true,
+};
 exports.freezeField = {
     type: 'number',
     default: null,
@@ -106,6 +184,7 @@ exports.freezeField = {
 exports.baseSchema = {
     durationInFrames: exports.durationInFramesField,
     from: exports.fromField,
+    trimBefore: exports.trimBeforeField,
     freeze: exports.freezeField,
     hidden: exports.hiddenField,
     name: exports.sequenceNameField,
@@ -125,6 +204,7 @@ exports.sequenceSchema = {
 };
 exports.baseSchemaWithoutFrom = {
     durationInFrames: exports.durationInFramesField,
+    trimBefore: exports.trimBeforeField,
     freeze: exports.freezeField,
     hidden: exports.hiddenField,
     name: exports.sequenceNameField,

package/dist/cjs/internals.d.ts

@@ -91,6 +91,13 @@ export declare const Internals: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly trimBefore: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;
@@ -115,6 +122,13 @@ export declare const Internals: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly trimBefore: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;
@@ -307,6 +321,77 @@ export declare const Internals: {
             readonly type: "hidden";
         };
     };
+    readonly textSchema: {
+        readonly 'style.color': {
+            readonly type: "color";
+            readonly default: undefined;
+            readonly description: "Color";
+        };
+        readonly 'style.fontSize': {
+            readonly type: "number";
+            readonly default: undefined;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Font size";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.lineHeight': {
+            readonly type: "number";
+            readonly default: undefined;
+            readonly min: 0;
+            readonly step: 0.05;
+            readonly description: "Line height";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.fontWeight': {
+            readonly type: "enum";
+            readonly default: "400";
+            readonly description: "Font weight";
+            readonly variants: {
+                readonly '100': {};
+                readonly '200': {};
+                readonly '300': {};
+                readonly '400': {};
+                readonly '500': {};
+                readonly '600': {};
+                readonly '700': {};
+                readonly '800': {};
+                readonly '900': {};
+                readonly normal: {};
+                readonly bold: {};
+            };
+        };
+        readonly 'style.fontStyle': {
+            readonly type: "enum";
+            readonly default: "normal";
+            readonly description: "Font style";
+            readonly variants: {
+                readonly normal: {};
+                readonly italic: {};
+                readonly oblique: {};
+            };
+        };
+        readonly 'style.textAlign': {
+            readonly type: "enum";
+            readonly default: "left";
+            readonly description: "Text align";
+            readonly variants: {
+                readonly left: {};
+                readonly center: {};
+                readonly right: {};
+                readonly justify: {};
+                readonly start: {};
+                readonly end: {};
+            };
+        };
+        readonly 'style.letterSpacing': {
+            readonly type: "number";
+            readonly default: undefined;
+            readonly step: 0.1;
+            readonly description: "Letter spacing";
+            readonly hiddenFromList: false;
+        };
+    };
     readonly transformSchema: {
         readonly 'style.transformOrigin': {
             readonly type: "transform-origin";
@@ -390,7 +475,7 @@ export declare const Internals: {
     }) | null;
     readonly getRoot: () => import("react").FC<{}> | null;
     readonly useMediaVolumeState: () => readonly [number, (u: number) => void];
-    readonly useMediaMutedState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void];
+    readonly usePlayerMutedState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void];
     readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, }: {
         volume: import("./volume-prop.js").VolumeProp | undefined;
         mediaVolume: number;

package/dist/cjs/internals.js

@@ -146,6 +146,7 @@ exports.Internals = {
     sequenceStyleSchema: interactivity_schema_js_1.sequenceStyleSchema,
     sequenceVisualStyleSchema: interactivity_schema_js_1.sequenceVisualStyleSchema,
     sequencePremountSchema: interactivity_schema_js_1.sequencePremountSchema,
+    textSchema: interactivity_schema_js_1.textSchema,
     transformSchema: interactivity_schema_js_1.transformSchema,
     premountSchema: interactivity_schema_js_1.premountSchema,
     flattenActiveSchema: flatten_schema_js_1.flattenActiveSchema,
@@ -155,7 +156,7 @@ exports.Internals = {
     useVideo: use_video_js_1.useVideo,
     getRoot: register_root_js_1.getRoot,
     useMediaVolumeState: volume_position_state_js_1.useMediaVolumeState,
-    useMediaMutedState: volume_position_state_js_1.useMediaMutedState,
+    usePlayerMutedState: volume_position_state_js_1.usePlayerMutedState,
     useMediaInTimeline: use_media_in_timeline_js_1.useMediaInTimeline,
     useLazyComponent: use_lazy_component_js_1.useLazyComponent,
     truthy: truthy_js_1.truthy,

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

@@ -75,6 +75,13 @@ export declare const NoReactInternals: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly trimBefore: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;

package/dist/cjs/prefetch.js

@@ -96,15 +96,15 @@ const prefetch = (src, options) => {
         resolve = res;
         reject = rej;
     });
+    waitUntilDone.catch(() => undefined);
     const controller = new AbortController();
-    let canBeAborted = true;
+    let reader = null;
     fetch(srcWithoutHash, {
         signal: controller.signal,
         credentials: (_c = options === null || options === void 0 ? void 0 : options.credentials) !== null && _c !== void 0 ? _c : undefined,
     })
         .then((res) => {
         var _a, _b, _c;
-        canBeAborted = false;
         if (canceled) {
             return null;
         }
@@ -124,9 +124,10 @@ const prefetch = (src, options) => {
         if (!res.body) {
             throw new Error(`HTTP response of ${srcWithoutHash} has no body`);
         }
-        const reader = res.body.getReader();
+        const responseReader = res.body.getReader();
+        reader = responseReader;
         return getBlobFromReader({
-            reader,
+            reader: responseReader,
             contentType: (_c = (_b = options === null || options === void 0 ? void 0 : options.contentType) !== null && _b !== void 0 ? _b : headerContentType) !== null && _c !== void 0 ? _c : null,
             contentLength: res.headers.get('Content-Length')
                 ? parseInt(res.headers.get('Content-Length'), 10)
@@ -135,7 +136,7 @@ const prefetch = (src, options) => {
         });
     })
         .then((buf) => {
-        if (!buf) {
+        if (!buf || canceled) {
             return;
         }
         const actualBlob = (options === null || options === void 0 ? void 0 : options.contentType)
@@ -188,13 +189,17 @@ const prefetch = (src, options) => {
                 });
             }
             else {
+                if (canceled) {
+                    return;
+                }
                 canceled = true;
-                if (canBeAborted) {
-                    try {
-                        controller.abort(new Error('free() called'));
-                    }
-                    catch (_a) { }
+                const cancellationError = new Error('free() called');
+                reject(cancellationError);
+                try {
+                    controller.abort(cancellationError);
                 }
+                catch (_a) { }
+                reader === null || reader === void 0 ? void 0 : reader.cancel(cancellationError).catch(() => undefined);
             }
         },
         waitUntilDone: () => {

package/dist/cjs/series/index.js

@@ -67,6 +67,7 @@ const SeriesInner = (props) => {
  */
 const Series = Object.assign((0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SeriesInner,
+    componentName: '<Series>',
     componentIdentity: 'dev.remotion.remotion.Series',
     schema: interactivity_schema_js_1.sequenceSchemaDefaultLayoutNone,
     supportsEffects: false,

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

@@ -124,6 +124,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             id,
             duration,
             from: 0,
+            trimBefore: null,
             parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
             displayName: finalDisplayName,
             documentationLink,

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.479";
+export declare const VERSION = "4.0.482";

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.479';
+exports.VERSION = '4.0.482';

package/dist/cjs/video/VideoForPreview.js

@@ -108,7 +108,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
     const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
-    const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
+    const [playerMuted] = (0, volume_position_state_js_1.usePlayerMutedState)();
     const userPreferredVolume = (0, volume_prop_js_1.evaluateVolume)({
         frame: volumePropFrame,
         volume,
@@ -280,6 +280,6 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         requestsVideoFrame: Boolean(onVideoFrame),
         isClientSideRendering: false,
     });
-    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 }));
+    return (jsx_runtime_1.jsx("video", { ...nativeProps, ref: videoRef, muted: muted || playerMuted || userPreferredVolume <= 0, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, controls: false }));
 };
 exports.VideoForPreview = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);