remotion 4.0.479 → 4.0.482

package/dist/cjs/volume-position-state.d.ts

@@ -1,18 +1,18 @@
 export type MediaVolumeContextValue = {
-    mediaMuted: boolean;
+    playerMuted: boolean;
     mediaVolume: number;
 };
 export type SetMediaVolumeContextValue = {
-    setMediaMuted: (u: React.SetStateAction<boolean>) => void;
+    setPlayerMuted: (u: React.SetStateAction<boolean>) => void;
     setMediaVolume: (u: number) => void;
 };
 export declare const MediaVolumeContext: import("react").Context<MediaVolumeContextValue>;
 export declare const SetMediaVolumeContext: import("react").Context<SetMediaVolumeContextValue>;
 type MediaVolumeReturnType = readonly [number, (u: number) => void];
 export declare const useMediaVolumeState: () => MediaVolumeReturnType;
-type MediaMutedReturnType = readonly [
+type PlayerMutedReturnType = readonly [
     boolean,
     (u: React.SetStateAction<boolean>) => void
 ];
-export declare const useMediaMutedState: () => MediaMutedReturnType;
+export declare const usePlayerMutedState: () => PlayerMutedReturnType;
 export {};

package/dist/cjs/volume-position-state.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaMutedState = exports.useMediaVolumeState = exports.SetMediaVolumeContext = exports.MediaVolumeContext = void 0;
+exports.usePlayerMutedState = exports.useMediaVolumeState = exports.SetMediaVolumeContext = exports.MediaVolumeContext = void 0;
 const react_1 = require("react");
 exports.MediaVolumeContext = (0, react_1.createContext)({
-    mediaMuted: false,
+    playerMuted: false,
     mediaVolume: 1,
 });
 exports.SetMediaVolumeContext = (0, react_1.createContext)({
-    setMediaMuted: () => {
+    setPlayerMuted: () => {
         throw new Error('default');
     },
     setMediaVolume: () => {
@@ -22,11 +22,11 @@ const useMediaVolumeState = () => {
     }, [mediaVolume, setMediaVolume]);
 };
 exports.useMediaVolumeState = useMediaVolumeState;
-const useMediaMutedState = () => {
-    const { mediaMuted } = (0, react_1.useContext)(exports.MediaVolumeContext);
-    const { setMediaMuted } = (0, react_1.useContext)(exports.SetMediaVolumeContext);
+const usePlayerMutedState = () => {
+    const { playerMuted } = (0, react_1.useContext)(exports.MediaVolumeContext);
+    const { setPlayerMuted } = (0, react_1.useContext)(exports.SetMediaVolumeContext);
     return (0, react_1.useMemo)(() => {
-        return [mediaMuted, setMediaMuted];
-    }, [mediaMuted, setMediaMuted]);
+        return [playerMuted, setPlayerMuted];
+    }, [playerMuted, setPlayerMuted]);
 };
-exports.useMediaMutedState = useMediaMutedState;
+exports.usePlayerMutedState = usePlayerMutedState;

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

@@ -10,10 +10,11 @@ export declare const mergeValues: ({ props, valuesDotNotation, schemaKeys, props
     schemaKeys: string[];
     propsToDelete: Set<string>;
 }) => Record<string, unknown>;
-export declare const withInteractivitySchema: <S extends InteractivitySchema, Props extends object>({ Component, componentIdentity, schema, supportsEffects, }: {
+export declare const withInteractivitySchema: <S extends InteractivitySchema, Props extends object>({ Component, componentName, componentIdentity, schema, supportsEffects, }: {
     Component: React.ComponentType<Props & {
         readonly controls: SequenceControls | undefined;
     }>;
+    componentName: string;
     componentIdentity: string | null;
     schema: S;
     supportsEffects: boolean;

package/dist/cjs/with-interactivity-schema.js

@@ -98,7 +98,7 @@ const mergeValues = ({ props, valuesDotNotation, schemaKeys, propsToDelete, }) =
 };
 exports.mergeValues = mergeValues;
 const stackToOverrideMap = {};
-const withInteractivitySchema = ({ Component, componentIdentity, schema, supportsEffects, }) => {
+const withInteractivitySchema = ({ Component, componentName, componentIdentity, schema, supportsEffects, }) => {
     // Schema is static for a component, so we move this outside
     const schemaWithSequenceName = (0, interactivity_schema_js_1.extendSchemaWithSequenceName)(schema);
     const flatSchema = (0, flatten_schema_js_1.getFlatSchemaWithAllKeys)(schemaWithSequenceName);
@@ -161,6 +161,7 @@ const withInteractivitySchema = ({ Component, componentIdentity, schema, support
                 overrideId,
                 supportsEffects,
                 componentIdentity,
+                componentName,
             };
         }, [currentRuntimeValueDotNotation, overrideId]);
         // 3. Apply drag/code overrides on top of the runtime values.

package/dist/esm/index.mjs

@@ -1291,7 +1291,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.479";
+var VERSION = "4.0.482";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1750,6 +1750,77 @@ var transformSchema = {
   }
 };
 var sequenceVisualStyleSchema = transformSchema;
+var 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
+  }
+};
 var premountSchema = {
   premountFor: {
     type: "number",
@@ -1808,6 +1879,13 @@ var fromField = {
   step: 1,
   hiddenFromList: true
 };
+var trimBeforeField = {
+  type: "number",
+  default: 0,
+  min: 0,
+  step: 1,
+  hiddenFromList: true
+};
 var freezeField = {
   type: "number",
   default: null,
@@ -1817,6 +1895,7 @@ var freezeField = {
 var baseSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  trimBefore: trimBeforeField,
   freeze: freezeField,
   hidden: hiddenField,
   name: sequenceNameField,
@@ -1836,6 +1915,7 @@ var sequenceSchema = {
 };
 var baseSchemaWithoutFrom = {
   durationInFrames: durationInFramesField,
+  trimBefore: trimBeforeField,
   freeze: freezeField,
   hidden: hiddenField,
   name: sequenceNameField,
@@ -4108,6 +4188,7 @@ var mergeValues = ({
 var stackToOverrideMap = {};
 var withInteractivitySchema = ({
   Component,
+  componentName,
   componentIdentity,
   schema,
   supportsEffects
@@ -4156,7 +4237,8 @@ var withInteractivitySchema = ({
         currentRuntimeValueDotNotation,
         overrideId,
         supportsEffects,
-        componentIdentity
+        componentIdentity,
+        componentName
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
     const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
@@ -4196,6 +4278,7 @@ import { jsx as jsx12 } from "react/jsx-runtime";
 var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
+  trimBefore = 0,
   freeze,
   durationInFrames = Infinity,
   children,
@@ -4220,7 +4303,6 @@ var RegularSequenceRefForwardingFunction = ({
   const parentSequence = useContext17(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
-  const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + from;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
@@ -4240,6 +4322,18 @@ var RegularSequenceRefForwardingFunction = ({
   if (!Number.isFinite(from)) {
     throw new TypeError(`The "from" prop of a sequence must be finite, but got ${from}.`);
   }
+  if (typeof trimBefore !== "number") {
+    throw new TypeError(`You passed to the "trimBefore" prop of your <Sequence> an argument of type ${typeof trimBefore}, but it must be a number.`);
+  }
+  if (trimBefore < 0) {
+    throw new TypeError(`The "trimBefore" prop of <Sequence /> must be greater than or equal to 0, but got ${trimBefore}.`);
+  }
+  if (Number.isNaN(trimBefore)) {
+    throw new TypeError('The "trimBefore" prop of <Sequence /> must be a real number, but it is NaN.');
+  }
+  if (!Number.isFinite(trimBefore)) {
+    throw new TypeError(`The "trimBefore" prop of <Sequence /> must be finite, but it is ${trimBefore}.`);
+  }
   if (typeof freeze !== "undefined" && freeze !== null) {
     if (typeof freeze !== "number") {
       throw new TypeError(`The "freeze" prop of <Sequence /> must be a number, but is of type ${typeof freeze}.`);
@@ -4253,7 +4347,9 @@ var RegularSequenceRefForwardingFunction = ({
   }
   const absoluteFrame = useTimelinePosition();
   const videoConfig = useVideoConfig();
-  const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
+  const effectiveRelativeFrom = from - trimBefore;
+  const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + effectiveRelativeFrom;
+  const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - effectiveRelativeFrom, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
   const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
   const wrapperRefForOutline = useRef6(null);
@@ -4264,7 +4360,7 @@ var RegularSequenceRefForwardingFunction = ({
   const postmounting = useMemo14(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
-  const currentSequenceStart = cumulatedFrom + from;
+  const currentSequenceStart = cumulatedFrom + effectiveRelativeFrom;
   const parentSequenceStart = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const parentFirstFrame = parentSequence ? parentSequenceStart - parentSequence.cumulatedNegativeFrom : 0;
   const firstFrame = Math.max(0, parentFirstFrame, currentSequenceStart);
@@ -4273,7 +4369,7 @@ var RegularSequenceRefForwardingFunction = ({
     return {
       absoluteFrom,
       cumulatedFrom,
-      relativeFrom: from,
+      relativeFrom: effectiveRelativeFrom,
       cumulatedNegativeFrom,
       durationInFrames: actualDurationInFrames,
       parentFrom: parentSequence?.relativeFrom ?? 0,
@@ -4288,7 +4384,7 @@ var RegularSequenceRefForwardingFunction = ({
   }, [
     cumulatedFrom,
     absoluteFrom,
-    from,
+    effectiveRelativeFrom,
     actualDurationInFrames,
     parentSequence,
     id,
@@ -4310,6 +4406,7 @@ var RegularSequenceRefForwardingFunction = ({
   const stackRef = useRef6(null);
   stackRef.current = stack ?? inheritedStack;
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
+  const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
   const parentCumulatedNegativeFrom = parentSequence?.cumulatedNegativeFrom ?? 0;
   const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
   const mediaFrameAtSequenceZero = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom : null;
@@ -4328,6 +4425,7 @@ var RegularSequenceRefForwardingFunction = ({
           documentationLink: resolvedDocumentationLink,
           duration: actualDurationInFrames,
           from,
+          trimBefore: registeredTrimBefore,
           id,
           loopDisplay,
           nonce: nonce.get(),
@@ -4352,6 +4450,7 @@ var RegularSequenceRefForwardingFunction = ({
           doesVolumeChange: isMedia.data.doesVolumeChange,
           duration: actualDurationInFrames,
           from,
+          trimBefore: registeredTrimBefore,
           id,
           loopDisplay,
           nonce: nonce.get(),
@@ -4377,6 +4476,7 @@ var RegularSequenceRefForwardingFunction = ({
     }
     registerSequence({
       from,
+      trimBefore: registeredTrimBefore,
       duration: actualDurationInFrames,
       id,
       displayName: timelineClipName,
@@ -4410,6 +4510,8 @@ var RegularSequenceRefForwardingFunction = ({
     actualDurationInFrames,
     rootId,
     from,
+    trimBefore,
+    registeredTrimBefore,
     showInTimeline,
     nonce,
     loopDisplay,
@@ -4541,12 +4643,14 @@ var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
 var SequenceWithoutSchema = SequenceInner;
 var Sequence = withInteractivitySchema({
   Component: SequenceInner,
+  componentName: "<Sequence>",
   componentIdentity: "dev.remotion.remotion.Sequence",
   schema: sequenceSchema,
   supportsEffects: false
 });
 var SequenceWithoutFrom = withInteractivitySchema({
   Component: SequenceInner,
+  componentName: "<Sequence>",
   componentIdentity: null,
   schema: sequenceSchemaWithoutFrom,
   supportsEffects: false
@@ -5321,6 +5425,7 @@ var AnimatedImageInner = ({
 };
 var AnimatedImage = withInteractivitySchema({
   Component: AnimatedImageInner,
+  componentName: "<AnimatedImage>",
   componentIdentity: "dev.remotion.remotion.AnimatedImage",
   schema: animatedImageSchema,
   supportsEffects: true
@@ -5754,13 +5859,15 @@ var prefetch = (src, options) => {
     resolve = res;
     reject = rej;
   });
+  waitUntilDone.catch(() => {
+    return;
+  });
   const controller = new AbortController;
-  let canBeAborted = true;
+  let reader = null;
   fetch(srcWithoutHash, {
     signal: controller.signal,
     credentials: options?.credentials ?? undefined
   }).then((res) => {
-    canBeAborted = false;
     if (canceled) {
       return null;
     }
@@ -5776,15 +5883,16 @@ var 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: options?.contentType ?? headerContentType ?? null,
       contentLength: res.headers.get("Content-Length") ? parseInt(res.headers.get("Content-Length"), 10) : null,
       onProgress: options?.onProgress
     });
   }).then((buf) => {
-    if (!buf) {
+    if (!buf || canceled) {
       return;
     }
     const actualBlob = options?.contentType ? new Blob([buf], { type: options.contentType }) : buf;
@@ -5832,12 +5940,18 @@ var prefetch = (src, options) => {
           return copy;
         });
       } else {
-        canceled = true;
-        if (canBeAborted) {
-          try {
-            controller.abort(new Error("free() called"));
-          } catch {}
+        if (canceled) {
+          return;
         }
+        canceled = true;
+        const cancellationError = new Error("free() called");
+        reject(cancellationError);
+        try {
+          controller.abort(cancellationError);
+        } catch {}
+        reader?.cancel(cancellationError).catch(() => {
+          return;
+        });
       }
     },
     waitUntilDone: () => {
@@ -7079,6 +7193,7 @@ var useMediaInTimeline = ({
       id,
       duration,
       from: 0,
+      trimBefore: null,
       parent: parentSequence?.id ?? null,
       displayName: finalDisplayName,
       documentationLink,
@@ -7995,11 +8110,11 @@ var useMediaTag = ({
 // src/volume-position-state.ts
 import { createContext as createContext22, useContext as useContext27, useMemo as useMemo26 } from "react";
 var MediaVolumeContext = createContext22({
-  mediaMuted: false,
+  playerMuted: false,
   mediaVolume: 1
 });
 var SetMediaVolumeContext = createContext22({
-  setMediaMuted: () => {
+  setPlayerMuted: () => {
     throw new Error("default");
   },
   setMediaVolume: () => {
@@ -8013,12 +8128,12 @@ var useMediaVolumeState = () => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
-var useMediaMutedState = () => {
-  const { mediaMuted } = useContext27(MediaVolumeContext);
-  const { setMediaMuted } = useContext27(SetMediaVolumeContext);
+var usePlayerMutedState = () => {
+  const { playerMuted } = useContext27(MediaVolumeContext);
+  const { setPlayerMuted } = useContext27(SetMediaVolumeContext);
   return useMemo26(() => {
-    return [mediaMuted, setMediaMuted];
-  }, [mediaMuted, setMediaMuted]);
+    return [playerMuted, setPlayerMuted];
+  }, [playerMuted, setPlayerMuted]);
 };
 
 // src/volume-safeguard.ts
@@ -8069,7 +8184,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     throw new Error("typecheck error");
   }
   const [mediaVolume] = useMediaVolumeState();
-  const [mediaMuted] = useMediaMutedState();
+  const [playerMuted] = usePlayerMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   if (!src) {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
@@ -8090,7 +8205,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   });
   const propsToPass = useMemo27(() => {
     return {
-      muted: muted || mediaMuted || userPreferredVolume <= 0,
+      muted: muted || playerMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
       loop: _remotionInternalNativeLoopPassed,
       crossOrigin: crossOriginValue,
@@ -8098,7 +8213,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     };
   }, [
     _remotionInternalNativeLoopPassed,
-    mediaMuted,
+    playerMuted,
     muted,
     nativeProps,
     preloadedSrc,
@@ -8521,6 +8636,15 @@ var solidSchema = {
     description: "Height",
     hiddenFromList: false
   },
+  pixelDensity: {
+    type: "number",
+    min: 1,
+    max: 3,
+    step: 0.1,
+    default: 1,
+    description: "Pixel density",
+    hiddenFromList: false
+  },
   ...transformSchema
 };
 var SolidInner = ({
@@ -8637,6 +8761,7 @@ var SolidOuter = forwardRef8(({
   style,
   name,
   from,
+  trimBefore,
   freeze,
   hidden,
   showInTimeline,
@@ -8651,6 +8776,7 @@ var SolidOuter = forwardRef8(({
   return /* @__PURE__ */ jsx24(Sequence, {
     layout: "none",
     from,
+    trimBefore,
     freeze,
     hidden,
     showInTimeline,
@@ -8676,6 +8802,7 @@ var SolidOuter = forwardRef8(({
 });
 var Solid = withInteractivitySchema({
   Component: SolidOuter,
+  componentName: "<Solid>",
   componentIdentity: "dev.remotion.remotion.Solid",
   schema: solidSchema,
   supportsEffects: true
@@ -8818,10 +8945,6 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const offscreen2d = offscreen.getContext("2d");
-      if (!offscreen2d) {
-        throw new Error("Failed to acquire 2D context for <HtmlInCanvas> offscreen canvas");
-      }
       const handle = delayRender("onPaint");
       if (!initializedRef.current) {
         initializedRef.current = true;
@@ -9006,10 +9129,20 @@ var HtmlInCanvasInner = forwardRef9(({
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
 var htmlInCanvasSchema = {
   ...baseSchema,
+  pixelDensity: {
+    type: "number",
+    min: 1,
+    max: 3,
+    step: 0.1,
+    default: 1,
+    description: "Pixel density",
+    hiddenFromList: false
+  },
   ...transformSchema
 };
 var HtmlInCanvasWrapped = withInteractivitySchema({
   Component: HtmlInCanvasInner,
+  componentName: "<HtmlInCanvas>",
   componentIdentity: "dev.remotion.remotion.HtmlInCanvas",
   schema: htmlInCanvasSchema,
   supportsEffects: true
@@ -9338,6 +9471,7 @@ var CanvasImageInner = forwardRef10(({
   delayRenderTimeoutInMilliseconds,
   durationInFrames,
   from,
+  trimBefore,
   freeze,
   hidden,
   name,
@@ -9359,6 +9493,7 @@ var CanvasImageInner = forwardRef10(({
   return /* @__PURE__ */ jsx26(Sequence, {
     layout: "none",
     from: from ?? 0,
+    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
     freeze,
     hidden,
@@ -9393,6 +9528,7 @@ var CanvasImageInner = forwardRef10(({
 });
 var CanvasImage = withInteractivitySchema({
   Component: CanvasImageInner,
+  componentName: "<CanvasImage>",
   componentIdentity: "dev.remotion.remotion.CanvasImage",
   schema: canvasImageSchema,
   supportsEffects: true
@@ -9631,6 +9767,7 @@ var NativeImgInner = ({
   showInTimeline,
   src,
   from,
+  trimBefore,
   durationInFrames,
   freeze,
   controls,
@@ -9643,6 +9780,7 @@ var NativeImgInner = ({
   return /* @__PURE__ */ jsx28(Sequence, {
     layout: "none",
     from: from ?? 0,
+    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
     freeze,
     _remotionInternalStack: stack,
@@ -9716,6 +9854,7 @@ var ImgInner = ({
   showInTimeline,
   src,
   from,
+  trimBefore,
   durationInFrames,
   freeze,
   controls,
@@ -9741,6 +9880,7 @@ var ImgInner = ({
       showInTimeline,
       src,
       from,
+      trimBefore,
       durationInFrames,
       freeze,
       controls,
@@ -9783,6 +9923,7 @@ var ImgInner = ({
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     from,
+    trimBefore,
     durationInFrames,
     freeze,
     hidden,
@@ -9797,6 +9938,7 @@ var ImgInner = ({
 };
 var Img = withInteractivitySchema({
   Component: ImgInner,
+  componentName: "<Img>",
   componentIdentity: "dev.remotion.remotion.Img",
   schema: imgSchema,
   supportsEffects: true
@@ -9807,7 +9949,8 @@ import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useR
 import { jsx as jsx29 } from "react/jsx-runtime";
 var interactiveElementSchema = {
   ...baseSchema,
-  ...transformSchema
+  ...transformSchema,
+  ...textSchema
 };
 var setRef = (ref, value) => {
   if (typeof ref === "function") {
@@ -9821,6 +9964,7 @@ var makeInteractiveElement = (tag, displayName) => {
     const {
       durationInFrames,
       from,
+      trimBefore,
       freeze,
       hidden,
       name,
@@ -9837,6 +9981,7 @@ var makeInteractiveElement = (tag, displayName) => {
     return /* @__PURE__ */ jsx29(Sequence, {
       layout: "none",
       from: from ?? 0,
+      trimBefore,
       durationInFrames: durationInFrames ?? Infinity,
       freeze,
       hidden,
@@ -9855,6 +10000,7 @@ var makeInteractiveElement = (tag, displayName) => {
   Inner.displayName = displayName;
   const Wrapped = withInteractivitySchema({
     Component: Inner,
+    componentName: displayName,
     componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
     schema: interactiveElementSchema,
     supportsEffects: false
@@ -9866,6 +10012,7 @@ var makeInteractiveElement = (tag, displayName) => {
 var Interactive = {
   baseSchema,
   transformSchema,
+  textSchema,
   premountSchema,
   sequenceSchema,
   withSchema: withInteractivitySchema,
@@ -10848,7 +10995,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
   const [mediaVolume] = useMediaVolumeState();
-  const [mediaMuted] = useMediaMutedState();
+  const [playerMuted] = usePlayerMutedState();
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
     volume,
@@ -11004,7 +11151,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   return /* @__PURE__ */ jsx34("video", {
     ...nativeProps,
     ref: videoRef,
-    muted: muted || mediaMuted || userPreferredVolume <= 0,
+    muted: muted || playerMuted || userPreferredVolume <= 0,
     playsInline: true,
     src: actualSrc,
     loop: _remotionInternalNativeLoopPassed,
@@ -11340,6 +11487,7 @@ var Internals = {
   sequenceStyleSchema,
   sequenceVisualStyleSchema,
   sequencePremountSchema,
+  textSchema,
   transformSchema,
   premountSchema,
   flattenActiveSchema,
@@ -11349,7 +11497,7 @@ var Internals = {
   useVideo,
   getRoot,
   useMediaVolumeState,
-  useMediaMutedState,
+  usePlayerMutedState,
   useMediaInTimeline,
   useLazyComponent,
   truthy,
@@ -11555,6 +11703,7 @@ var SeriesInner = (props2) => {
 };
 var Series = Object.assign(withInteractivitySchema({
   Component: SeriesInner,
+  componentName: "<Series>",
   componentIdentity: "dev.remotion.remotion.Series",
   schema: sequenceSchemaDefaultLayoutNone,
   supportsEffects: false