remotion 4.0.318 → 4.0.320

package/dist/cjs/audio/Audio.js

@@ -22,7 +22,7 @@ const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
     const audioContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioContext);
-    const { startFrom, endAt, name, stack, pauseWhenBuffering, showInTimeline, ...otherProps } = props;
+    const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
@@ -49,23 +49,28 @@ const AudioRefForwardingFunction = (props, ref) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);
     const durationFetched = (_a = durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)]) !== null && _a !== void 0 ? _a : durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)];
+    (0, validate_start_from_props_js_1.validateMediaTrimProps)({ startFrom, endAt, trimBefore, trimAfter });
+    const { trimBeforeValue, trimAfterValue } = (0, validate_start_from_props_js_1.resolveTrimProps)({
+        startFrom,
+        endAt,
+        trimBefore,
+        trimAfter,
+    });
     if (loop && durationFetched !== undefined) {
         if (!Number.isFinite(durationFetched)) {
             return ((0, jsx_runtime_1.jsx)(exports.Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
         }
         const duration = durationFetched * fps;
         return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_loop_js_1.calculateLoopDuration)({
-                endAt,
+                endAt: trimAfterValue !== null && trimAfterValue !== void 0 ? trimAfterValue : endAt,
                 mediaDuration: duration,
                 playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
-                startFrom,
+                startFrom: trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : startFrom,
             }), children: (0, jsx_runtime_1.jsx)(exports.Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
     }
-    if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
-        (0, validate_start_from_props_js_1.validateStartFromProps)(startFrom, endAt);
-        const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
-        const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, name: name, children: (0, jsx_runtime_1.jsx)(exports.Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
+    if (typeof trimBeforeValue !== 'undefined' ||
+        typeof trimAfterValue !== 'undefined') {
+        return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: (0, jsx_runtime_1.jsx)(exports.Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)(props, 'Audio');
     if (environment.isRendering) {

package/dist/cjs/audio/props.d.ts

@@ -1,8 +1,22 @@
 import type { VolumeProp } from '../volume-prop.js';
 import type { LoopVolumeCurveBehavior } from './use-audio-frame.js';
 export type RemotionMainAudioProps = {
+    /**
+     * @deprecated `startFrom` was renamed to `trimBefore`
+     */
     startFrom?: number;
+    /**
+     * @deprecated `endAt` was renamed to `trimAfter`
+     */
     endAt?: number;
+    /**
+     * Trim of the audio from the left (start) in frames.
+     */
+    trimBefore?: number;
+    /**
+     * Trim of the audio from the right (end) in frames.
+     */
+    trimAfter?: number;
 };
 export type NativeAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce' | 'onResize' | 'onResizeCapture'>;
 export type RemotionAudioProps = NativeAudioProps & {

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

@@ -1 +1,17 @@
 export declare const validateStartFromProps: (startFrom: number | undefined, endAt: number | undefined) => void;
+export declare const validateTrimProps: (trimBefore: number | undefined, trimAfter: number | undefined) => void;
+export declare const validateMediaTrimProps: ({ startFrom, endAt, trimBefore, trimAfter, }: {
+    startFrom: number | undefined;
+    endAt: number | undefined;
+    trimBefore: number | undefined;
+    trimAfter: number | undefined;
+}) => void;
+export declare const resolveTrimProps: ({ startFrom, endAt, trimBefore, trimAfter, }: {
+    startFrom: number | undefined;
+    endAt: number | undefined;
+    trimBefore: number | undefined;
+    trimAfter: number | undefined;
+}) => {
+    trimBeforeValue: number | undefined;
+    trimAfterValue: number | undefined;
+};

package/dist/cjs/validate-start-from-props.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateStartFromProps = void 0;
+exports.resolveTrimProps = exports.validateMediaTrimProps = exports.validateTrimProps = exports.validateStartFromProps = void 0;
 const validateStartFromProps = (startFrom, endAt) => {
     if (typeof startFrom !== 'undefined') {
         if (typeof startFrom !== 'number') {
@@ -29,3 +29,58 @@ const validateStartFromProps = (startFrom, endAt) => {
     }
 };
 exports.validateStartFromProps = validateStartFromProps;
+const validateTrimProps = (trimBefore, trimAfter) => {
+    if (typeof trimBefore !== 'undefined') {
+        if (typeof trimBefore !== 'number') {
+            throw new TypeError(`type of trimBefore prop must be a number, instead got type ${typeof trimBefore}.`);
+        }
+        if (isNaN(trimBefore) || trimBefore === Infinity) {
+            throw new TypeError('trimBefore prop can not be NaN or Infinity.');
+        }
+        if (trimBefore < 0) {
+            throw new TypeError(`trimBefore must be greater than equal to 0 instead got ${trimBefore}.`);
+        }
+    }
+    if (typeof trimAfter !== 'undefined') {
+        if (typeof trimAfter !== 'number') {
+            throw new TypeError(`type of trimAfter prop must be a number, instead got type ${typeof trimAfter}.`);
+        }
+        if (isNaN(trimAfter)) {
+            throw new TypeError('trimAfter prop can not be NaN.');
+        }
+        if (trimAfter <= 0) {
+            throw new TypeError(`trimAfter must be a positive number, instead got ${trimAfter}.`);
+        }
+    }
+    if (trimAfter < trimBefore) {
+        throw new TypeError('trimAfter prop must be greater than trimBefore prop.');
+    }
+};
+exports.validateTrimProps = validateTrimProps;
+const validateMediaTrimProps = ({ startFrom, endAt, trimBefore, trimAfter, }) => {
+    // Check for conflicting props
+    if (typeof startFrom !== 'undefined' && typeof trimBefore !== 'undefined') {
+        throw new TypeError('Cannot use both startFrom and trimBefore props. Use trimBefore instead as startFrom is deprecated.');
+    }
+    if (typeof endAt !== 'undefined' && typeof trimAfter !== 'undefined') {
+        throw new TypeError('Cannot use both endAt and trimAfter props. Use trimAfter instead as endAt is deprecated.');
+    }
+    // Validate using the appropriate validation function
+    const hasNewProps = typeof trimBefore !== 'undefined' || typeof trimAfter !== 'undefined';
+    const hasOldProps = typeof startFrom !== 'undefined' || typeof endAt !== 'undefined';
+    if (hasNewProps) {
+        (0, exports.validateTrimProps)(trimBefore, trimAfter);
+    }
+    else if (hasOldProps) {
+        (0, exports.validateStartFromProps)(startFrom, endAt);
+    }
+};
+exports.validateMediaTrimProps = validateMediaTrimProps;
+const resolveTrimProps = ({ startFrom, endAt, trimBefore, trimAfter, }) => {
+    var _a, _b;
+    // Use new props if available, otherwise fall back to old props
+    const trimBeforeValue = (_a = trimBefore !== null && trimBefore !== void 0 ? trimBefore : startFrom) !== null && _a !== void 0 ? _a : undefined;
+    const trimAfterValue = (_b = trimAfter !== null && trimAfter !== void 0 ? trimAfter : endAt) !== null && _b !== void 0 ? _b : undefined;
+    return { trimBeforeValue, trimAfterValue };
+};
+exports.resolveTrimProps = resolveTrimProps;

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

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.318';
+exports.VERSION = '4.0.320';

package/dist/cjs/video/OffthreadVideo.js

@@ -16,7 +16,7 @@ const VideoForPreview_js_1 = require("./VideoForPreview.js");
 const OffthreadVideo = (props) => {
     // Should only destruct `startFrom` and `endAt` from props,
     // rest gets drilled down
-    const { startFrom, endAt, name, pauseWhenBuffering, stack, showInTimeline, ...otherProps } = props;
+    const { startFrom, endAt, trimBefore, trimAfter, name, pauseWhenBuffering, stack, showInTimeline, ...otherProps } = props;
     const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
     const onDuration = (0, react_1.useCallback)(() => undefined, []);
     if (typeof props.src !== 'string') {
@@ -25,11 +25,16 @@ const OffthreadVideo = (props) => {
     if (props.imageFormat) {
         throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
     }
-    if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
-        (0, validate_start_from_props_js_1.validateStartFromProps)(startFrom, endAt);
-        const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
-        const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, name: name, children: (0, jsx_runtime_1.jsx)(exports.OffthreadVideo, { pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps }) }));
+    (0, validate_start_from_props_js_1.validateMediaTrimProps)({ startFrom, endAt, trimBefore, trimAfter });
+    const { trimBeforeValue, trimAfterValue } = (0, validate_start_from_props_js_1.resolveTrimProps)({
+        startFrom,
+        endAt,
+        trimBefore,
+        trimAfter,
+    });
+    if (typeof trimBeforeValue !== 'undefined' ||
+        typeof trimAfterValue !== 'undefined') {
+        return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: (0, jsx_runtime_1.jsx)(exports.OffthreadVideo, { pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
     if (environment.isRendering) {

package/dist/cjs/video/Video.js

@@ -19,7 +19,7 @@ const VideoForRendering_js_1 = require("./VideoForRendering.js");
 const duration_state_js_1 = require("./duration-state.js");
 const VideoForwardingFunction = (props, ref) => {
     var _a, _b;
-    const { startFrom, endAt, name, pauseWhenBuffering, stack, _remotionInternalNativeLoopPassed, showInTimeline, onAutoPlayError, ...otherProps } = props;
+    const { startFrom, endAt, trimBefore, trimAfter, name, pauseWhenBuffering, stack, _remotionInternalNativeLoopPassed, showInTimeline, onAutoPlayError, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
@@ -36,23 +36,28 @@ const VideoForwardingFunction = (props, ref) => {
     }, [setDurations]);
     const onVideoFrame = (0, react_1.useCallback)(() => { }, []);
     const durationFetched = (_a = durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)]) !== null && _a !== void 0 ? _a : durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)];
+    (0, validate_start_from_props_js_1.validateMediaTrimProps)({ startFrom, endAt, trimBefore, trimAfter });
+    const { trimBeforeValue, trimAfterValue } = (0, validate_start_from_props_js_1.resolveTrimProps)({
+        startFrom,
+        endAt,
+        trimBefore,
+        trimAfter,
+    });
     if (loop && durationFetched !== undefined) {
         if (!Number.isFinite(durationFetched)) {
             return ((0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
         }
         const mediaDuration = durationFetched * fps;
         return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { durationInFrames: (0, calculate_loop_js_1.calculateLoopDuration)({
-                endAt,
+                endAt: trimAfterValue !== null && trimAfterValue !== void 0 ? trimAfterValue : undefined,
                 mediaDuration,
                 playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
-                startFrom,
+                startFrom: trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : undefined,
             }), layout: "none", name: name, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
     }
-    if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
-        (0, validate_start_from_props_js_1.validateStartFromProps)(startFrom, endAt);
-        const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
-        const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, name: name, children: (0, jsx_runtime_1.jsx)(exports.Video, { pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
+    if (typeof trimBeforeValue !== 'undefined' ||
+        typeof trimAfterValue !== 'undefined') {
+        return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: (0, jsx_runtime_1.jsx)(exports.Video, { pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
     if (environment.isRendering) {

package/dist/cjs/video/props.d.ts

@@ -2,8 +2,22 @@ import type React from 'react';
 import type { LoopVolumeCurveBehavior } from '../audio/use-audio-frame.js';
 import type { VolumeProp } from '../volume-prop.js';
 export type RemotionMainVideoProps = {
+    /**
+     * @deprecated `startFrom` was renamed to `trimBefore`
+     */
     startFrom?: number;
+    /**
+     * @deprecated `endAt` was renamed to `trimAfter`
+     */
     endAt?: number;
+    /**
+     * Trim of th e video from the left (start) in frames.
+     */
+    trimBefore?: number;
+    /**
+     * Trim of the video from the right (end) in frames.
+     */
+    trimAfter?: number;
     /**
      * @deprecated Only for internal `transparent` use
      */

package/dist/esm/index.mjs

@@ -104,7 +104,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.318";
+var VERSION = "4.0.320";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -2515,6 +2515,63 @@ var validateStartFromProps = (startFrom, endAt) => {
     throw new TypeError("endAt prop must be greater than startFrom prop.");
   }
 };
+var validateTrimProps = (trimBefore, trimAfter) => {
+  if (typeof trimBefore !== "undefined") {
+    if (typeof trimBefore !== "number") {
+      throw new TypeError(`type of trimBefore prop must be a number, instead got type ${typeof trimBefore}.`);
+    }
+    if (isNaN(trimBefore) || trimBefore === Infinity) {
+      throw new TypeError("trimBefore prop can not be NaN or Infinity.");
+    }
+    if (trimBefore < 0) {
+      throw new TypeError(`trimBefore must be greater than equal to 0 instead got ${trimBefore}.`);
+    }
+  }
+  if (typeof trimAfter !== "undefined") {
+    if (typeof trimAfter !== "number") {
+      throw new TypeError(`type of trimAfter prop must be a number, instead got type ${typeof trimAfter}.`);
+    }
+    if (isNaN(trimAfter)) {
+      throw new TypeError("trimAfter prop can not be NaN.");
+    }
+    if (trimAfter <= 0) {
+      throw new TypeError(`trimAfter must be a positive number, instead got ${trimAfter}.`);
+    }
+  }
+  if (trimAfter < trimBefore) {
+    throw new TypeError("trimAfter prop must be greater than trimBefore prop.");
+  }
+};
+var validateMediaTrimProps = ({
+  startFrom,
+  endAt,
+  trimBefore,
+  trimAfter
+}) => {
+  if (typeof startFrom !== "undefined" && typeof trimBefore !== "undefined") {
+    throw new TypeError("Cannot use both startFrom and trimBefore props. Use trimBefore instead as startFrom is deprecated.");
+  }
+  if (typeof endAt !== "undefined" && typeof trimAfter !== "undefined") {
+    throw new TypeError("Cannot use both endAt and trimAfter props. Use trimAfter instead as endAt is deprecated.");
+  }
+  const hasNewProps = typeof trimBefore !== "undefined" || typeof trimAfter !== "undefined";
+  const hasOldProps = typeof startFrom !== "undefined" || typeof endAt !== "undefined";
+  if (hasNewProps) {
+    validateTrimProps(trimBefore, trimAfter);
+  } else if (hasOldProps) {
+    validateStartFromProps(startFrom, endAt);
+  }
+};
+var resolveTrimProps = ({
+  startFrom,
+  endAt,
+  trimBefore,
+  trimAfter
+}) => {
+  const trimBeforeValue = trimBefore ?? startFrom ?? undefined;
+  const trimAfterValue = trimAfter ?? endAt ?? undefined;
+  return { trimBeforeValue, trimAfterValue };
+};
 
 // src/video/duration-state.tsx
 import { createContext as createContext13, useMemo as useMemo12, useReducer } from "react";
@@ -4573,6 +4630,8 @@ var AudioRefForwardingFunction = (props, ref) => {
   const {
     startFrom,
     endAt,
+    trimBefore,
+    trimAfter,
     name,
     stack,
     pauseWhenBuffering,
@@ -4600,6 +4659,13 @@ var AudioRefForwardingFunction = (props, ref) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
+  validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
+  const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
+    startFrom,
+    endAt,
+    trimBefore,
+    trimAfter
+  });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
       return /* @__PURE__ */ jsx19(Audio, {
@@ -4612,10 +4678,10 @@ var AudioRefForwardingFunction = (props, ref) => {
     return /* @__PURE__ */ jsx19(Loop, {
       layout: "none",
       durationInFrames: calculateLoopDuration({
-        endAt,
+        endAt: trimAfterValue ?? endAt,
         mediaDuration: duration,
         playbackRate: props.playbackRate ?? 1,
-        startFrom
+        startFrom: trimBeforeValue ?? startFrom
       }),
       children: /* @__PURE__ */ jsx19(Audio, {
         ...propsOtherThanLoop,
@@ -4624,15 +4690,12 @@ var AudioRefForwardingFunction = (props, ref) => {
       })
     });
   }
-  if (typeof startFrom !== "undefined" || typeof endAt !== "undefined") {
-    validateStartFromProps(startFrom, endAt);
-    const startFromFrameNo = startFrom ?? 0;
-    const endAtFrameNo = endAt ?? Infinity;
+  if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
     return /* @__PURE__ */ jsx19(Sequence, {
       layout: "none",
-      from: 0 - startFromFrameNo,
+      from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
-      durationInFrames: endAtFrameNo,
+      durationInFrames: trimAfterValue,
       name,
       children: /* @__PURE__ */ jsx19(Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
@@ -7282,6 +7345,8 @@ var OffthreadVideo = (props2) => {
   const {
     startFrom,
     endAt,
+    trimBefore,
+    trimAfter,
     name,
     pauseWhenBuffering,
     stack,
@@ -7298,15 +7363,19 @@ var OffthreadVideo = (props2) => {
   if (props2.imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  if (typeof startFrom !== "undefined" || typeof endAt !== "undefined") {
-    validateStartFromProps(startFrom, endAt);
-    const startFromFrameNo = startFrom ?? 0;
-    const endAtFrameNo = endAt ?? Infinity;
+  validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
+  const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
+    startFrom,
+    endAt,
+    trimBefore,
+    trimAfter
+  });
+  if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
     return /* @__PURE__ */ jsx32(Sequence, {
       layout: "none",
-      from: 0 - startFromFrameNo,
+      from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
-      durationInFrames: endAtFrameNo,
+      durationInFrames: trimAfterValue,
       name,
       children: /* @__PURE__ */ jsx32(OffthreadVideo, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
@@ -7686,6 +7755,8 @@ var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
     endAt,
+    trimBefore,
+    trimAfter,
     name,
     pauseWhenBuffering,
     stack,
@@ -7710,6 +7781,13 @@ var VideoForwardingFunction = (props2, ref) => {
   }, [setDurations]);
   const onVideoFrame = useCallback16(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
+  validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
+  const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
+    startFrom,
+    endAt,
+    trimBefore,
+    trimAfter
+  });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
       return /* @__PURE__ */ jsx34(Video, {
@@ -7721,10 +7799,10 @@ var VideoForwardingFunction = (props2, ref) => {
     const mediaDuration = durationFetched * fps;
     return /* @__PURE__ */ jsx34(Loop, {
       durationInFrames: calculateLoopDuration({
-        endAt,
+        endAt: trimAfterValue ?? undefined,
         mediaDuration,
         playbackRate: props2.playbackRate ?? 1,
-        startFrom
+        startFrom: trimBeforeValue ?? undefined
       }),
       layout: "none",
       name,
@@ -7735,15 +7813,12 @@ var VideoForwardingFunction = (props2, ref) => {
       })
     });
   }
-  if (typeof startFrom !== "undefined" || typeof endAt !== "undefined") {
-    validateStartFromProps(startFrom, endAt);
-    const startFromFrameNo = startFrom ?? 0;
-    const endAtFrameNo = endAt ?? Infinity;
+  if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
     return /* @__PURE__ */ jsx34(Sequence, {
       layout: "none",
-      from: 0 - startFromFrameNo,
+      from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
-      durationInFrames: endAtFrameNo,
+      durationInFrames: trimAfterValue,
       name,
       children: /* @__PURE__ */ jsx34(Video, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.318";
+var VERSION = "4.0.320";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
   },
   "name": "remotion",
-  "version": "4.0.318",
+  "version": "4.0.320",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.318"
+    "@remotion/eslint-config-internal": "4.0.320"
   },
   "keywords": [
     "remotion",
@@ -73,7 +73,7 @@
   },
   "homepage": "https://www.remotion.dev/docs/remotion",
   "scripts": {
-    "formatting": "prettier src --check",
+    "formatting": "prettier --experimental-cli src --check",
     "lint": "eslint src",
     "test": "bun test src/test",
     "make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"