remotion 4.0.0-alpha.185 → 4.0.0-alpha.217

package/dist/cjs/Composition.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType, PropsWithChildren } from 'react';
 import React from 'react';
-import { z } from 'zod';
+import type { z } from 'zod';
 import type { PropsIfHasProps } from './props-if-has-props.js';
 declare type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
 export declare type CompProps<Props> = {

package/dist/cjs/Composition.js

@@ -4,7 +4,6 @@ exports.ClipComposition = exports.Composition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
-const zod_1 = require("zod");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
@@ -76,7 +75,7 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
             defaultProps: defaultProps,
             nonce,
             parentFolderName: parentName,
-            schema: schema !== null && schema !== void 0 ? schema : zod_1.z.any(),
+            schema: schema !== null && schema !== void 0 ? schema : null,
         });
         return () => {
             unregisterComposition(id);

package/dist/cjs/CompositionManager.d.ts

@@ -13,7 +13,7 @@ export declare type TComposition<Schema extends z.ZodTypeAny, Props> = {
     parentFolderName: string | null;
     component: LazyExoticComponent<ComponentType<Props>>;
     nonce: number;
-    schema: Schema;
+    schema: Schema | null;
 } & PropsIfHasProps<Schema, Props>;
 export declare type AnyComposition = TComposition<z.ZodTypeAny, unknown>;
 export declare type TCompMetadata<Schema extends z.ZodTypeAny, Props> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
@@ -83,5 +83,6 @@ export declare const compositionsRef: React.RefObject<{
 }>;
 export declare const CompositionManagerProvider: React.FC<{
     children: React.ReactNode;
+    numberOfAudioTags: number;
 }>;
 export {};

package/dist/cjs/CompositionManager.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionManagerProvider = exports.compositionsRef = exports.CompositionManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 exports.CompositionManager = (0, react_1.createContext)({
     compositions: [],
     registerComposition: () => undefined,
@@ -45,7 +46,8 @@ exports.CompositionManager = (0, react_1.createContext)({
     currentCompositionMetadata: null,
 });
 exports.compositionsRef = react_1.default.createRef();
-const CompositionManagerProvider = ({ children }) => {
+const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
+    var _a;
     // Wontfix, expected to have
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [compositions, setCompositions] = (0, react_1.useState)([]);
@@ -159,6 +161,7 @@ const CompositionManagerProvider = ({ children }) => {
         unregisterFolder,
         currentCompositionMetadata,
     ]);
-    return ((0, jsx_runtime_1.jsx)(exports.CompositionManager.Provider, { value: contextValue, children: children }));
+    const composition = (_a = compositions.find((c) => c.id === currentComposition)) === null || _a === void 0 ? void 0 : _a.component;
+    return ((0, jsx_runtime_1.jsx)(exports.CompositionManager.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: composition !== null && composition !== void 0 ? composition : null, children: children }) }));
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/Img.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Img = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const cancel_render_js_1 = require("./cancel-render.js");
 const delay_render_js_1 = require("./delay-render.js");
 const prefetch_js_1 = require("./prefetch.js");
 function exponentialBackoff(errorCount) {
@@ -53,7 +54,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
             retryIn(backoff);
             return;
         }
-        console.error('Error loading image with src:', (_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src, e, 'Handle the event using the onError() prop to make this message disappear.');
+        (0, cancel_render_js_1.cancelRender)('Error loading image with src: ' + ((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
     }, [maxRetries, onError, retryIn]);
     (0, react_1.useLayoutEffect)(() => {
         if (process.env.NODE_ENV === 'test') {

package/dist/cjs/RemotionRoot.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemotionRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
 const delay_render_js_1 = require("./delay-render.js");
 const EditorProps_js_1 = require("./EditorProps.js");
@@ -68,10 +67,6 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
             }
         }
     }, []);
-    return ((0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider
-                                    // In the preview, which is mostly played on Desktop, we opt out of the autoplay policy fix as described in https://github.com/remotion-dev/remotion/pull/554, as it mostly applies to mobile.
-                                    , { 
-                                        // In the preview, which is mostly played on Desktop, we opt out of the autoplay policy fix as described in https://github.com/remotion-dev/remotion/pull/554, as it mostly applies to mobile.
-                                        numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: children }) }) }) }) }) }) }) }));
 };
 exports.RemotionRoot = RemotionRoot;

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

@@ -9,4 +9,4 @@ export declare const Audio: React.ForwardRefExoticComponent<Pick<Omit<React.Deta
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;
     allowAmplificationDuringRender?: boolean | undefined;
-} & RemotionMainAudioProps, "id" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "src" | "volume" | "playbackRate" | "allowAmplificationDuringRender" | "crossOrigin" | "controlsList" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "acceptableTimeShiftInSeconds" | keyof RemotionMainAudioProps> & React.RefAttributes<HTMLAudioElement>>;
+} & RemotionMainAudioProps, "id" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "volume" | "allowAmplificationDuringRender" | "controlsList" | "crossOrigin" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "playbackRate" | "acceptableTimeShiftInSeconds" | keyof RemotionMainAudioProps> & React.RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -1,3 +1,4 @@
+import type { ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
 import type { RemotionAudioProps } from './props.js';
 /**
@@ -32,6 +33,7 @@ export declare const SharedAudioContext: React.Context<SharedContext | null>;
 export declare const SharedAudioContextProvider: React.FC<{
     numberOfAudioTags: number;
     children: React.ReactNode;
+    component: LazyExoticComponent<ComponentType<unknown>> | null;
 }>;
 export declare const useSharedAudio: (aud: RemotionAudioProps, audioId: string) => AudioElem;
 export {};

package/dist/cjs/audio/shared-audio-tags.js

@@ -59,7 +59,7 @@ const didPropChange = (key, newProp, prevProp) => {
     return true;
 };
 exports.SharedAudioContext = (0, react_1.createContext)(null);
-const SharedAudioContextProvider = ({ children, numberOfAudioTags }) => {
+const SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) => {
     const audios = (0, react_1.useRef)([]);
     const [initialNumberOfAudioTags] = (0, react_1.useState)(numberOfAudioTags);
     if (numberOfAudioTags !== initialNumberOfAudioTags) {
@@ -176,6 +176,22 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags }) => {
         unregisterAudio,
         updateAudio,
     ]);
+    // Fixing a bug: In React, if a component is unmounted using useInsertionEffect, then
+    // the cleanup function does sometimes not work properly. That is why when we
+    // are changing the composition, we reset the audio state.
+    // TODO: Possibly this does not save the problem completely, since the
+    // if an audio tag that is inside a sequence will also not be removed
+    // from the shared audios.
+    const resetAudio = (0, react_1.useCallback)(() => {
+        takenAudios.current = new Array(numberOfAudioTags).fill(false);
+        audios.current = [];
+        rerenderAudios();
+    }, [numberOfAudioTags, rerenderAudios]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            resetAudio();
+        };
+    }, [component, resetAudio]);
     return ((0, jsx_runtime_1.jsxs)(exports.SharedAudioContext.Provider, { value: value, children: [refs.map(({ id, ref }) => {
                 return (0, jsx_runtime_1.jsx)("audio", { ref: ref, src: EMPTY_AUDIO }, id);
             }), children] }));

package/dist/cjs/config.d.ts

@@ -139,6 +139,11 @@ declare global {
              * Default: 'swangle' in Lambda, null elsewhere.
              */
             readonly setChromiumOpenGlRenderer: (renderer: 'swangle' | 'angle' | 'egl' | 'swiftshader') => void;
+            /**
+             * Set the user agent for Chrome. Only works during rendering.
+             * Default:
+             */
+            readonly setChromiumUserAgent: (userAgent: string | null) => void;
         };
         /**
          * @deprecated New flat config format: You can now replace `Config.Rendering.` with `Config.`

package/dist/cjs/index.d.ts

@@ -46,7 +46,6 @@ export declare type BundleState = {
     compositionWidth: number;
     compositionFps: number;
 };
-export { z } from 'zod';
 export * from './AbsoluteFill.js';
 export * from './audio/index.js';
 export { cancelRender } from './cancel-render.js';
@@ -79,7 +78,6 @@ export * from './use-video-config.js';
 export * from './version.js';
 export * from './video-config.js';
 export * from './video/index.js';
-export { zColor } from './z-color.js';
 export declare const Experimental: {
     /**
      * @description This is a special component that will cause Remotion to only partially capture the frame of the video.

package/dist/cjs/index.js

@@ -14,15 +14,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Config = exports.Experimental = exports.zColor = exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.random = exports.prefetch = exports.Loop = exports.interpolate = exports.interpolateColors = exports.getStaticFiles = exports.delayRender = exports.continueRender = exports.getInputProps = exports.cancelRender = exports.z = void 0;
+exports.Config = exports.Experimental = exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.random = exports.prefetch = exports.Loop = exports.interpolate = exports.interpolateColors = exports.getStaticFiles = exports.delayRender = exports.continueRender = exports.getInputProps = exports.cancelRender = void 0;
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
 const is_player_js_1 = require("./is-player.js");
 const multiple_versions_warning_js_1 = require("./multiple-versions-warning.js");
 const Null_js_1 = require("./Null.js");
 (0, multiple_versions_warning_js_1.checkMultipleRemotionVersions)();
-var zod_1 = require("zod");
-Object.defineProperty(exports, "z", { enumerable: true, get: function () { return zod_1.z; } });
 __exportStar(require("./AbsoluteFill.js"), exports);
 __exportStar(require("./audio/index.js"), exports);
 var cancel_render_js_1 = require("./cancel-render.js");
@@ -67,8 +65,6 @@ __exportStar(require("./use-video-config.js"), exports);
 __exportStar(require("./version.js"), exports);
 __exportStar(require("./video-config.js"), exports);
 __exportStar(require("./video/index.js"), exports);
-var z_color_js_1 = require("./z-color.js");
-Object.defineProperty(exports, "zColor", { enumerable: true, get: function () { return z_color_js_1.zColor; } });
 exports.Experimental = {
     /**
      * @description This is a special component that will cause Remotion to only partially capture the frame of the video.

package/dist/cjs/internals.d.ts

@@ -3,6 +3,7 @@ import type { CompProps } from './Composition.js';
 import type { CompositionManagerContext, TAsset, TCompMetadata, TComposition, TSequence } from './CompositionManager.js';
 import * as CSSUtils from './default-css.js';
 import type { RemotionEnvironment } from './get-environment.js';
+import { processColor } from './interpolate-colors.js';
 import type { SetTimelineContextValue, TimelineContextValue } from './timeline-position-state.js';
 import * as TimelinePosition from './timeline-position-state.js';
 import { truthy } from './truthy.js';
@@ -28,7 +29,7 @@ export declare const Internals: {
         parentFolderName: string | null;
         component: import("react").LazyExoticComponent<import("react").ComponentType<unknown>>;
         nonce: number;
-        schema: import("zod").ZodTypeAny;
+        schema: import("zod").ZodTypeAny | null;
     } | null;
     getRoot: () => import("react").FC<{}> | null;
     useMediaVolumeState: () => readonly [number, (u: number) => void];
@@ -72,6 +73,7 @@ export declare const Internals: {
     SharedAudioContextProvider: import("react").FC<{
         numberOfAudioTags: number;
         children: import("react").ReactNode;
+        component: import("react").LazyExoticComponent<import("react").ComponentType<unknown>> | null;
     }>;
     invalidCompositionErrorMessage: string;
     isCompositionIdValid: (id: string) => RegExpMatchArray | null;
@@ -108,12 +110,6 @@ export declare const Internals: {
     }>;
     EditorPropsContext: import("react").Context<import("./EditorProps.js").EditorPropsContextType>;
     usePreload: (src: string) => string;
-    REMOTION_COLOR_BRAND: string;
-    parseColor: (value: string) => {
-        a: number;
-        r: number;
-        g: number;
-        b: number;
-    };
+    processColor: typeof processColor;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, };

package/dist/cjs/internals.js

@@ -32,6 +32,7 @@ const delay_render_js_1 = require("./delay-render.js");
 const EditorProps_js_1 = require("./EditorProps.js");
 const get_environment_js_1 = require("./get-environment.js");
 const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
+const interpolate_colors_js_1 = require("./interpolate-colors.js");
 const is_player_js_1 = require("./is-player.js");
 const portal_node_js_1 = require("./portal-node.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
@@ -54,7 +55,6 @@ const validate_offthreadvideo_image_format_js_1 = require("./validation/validate
 const duration_state_js_1 = require("./video/duration-state.js");
 const volume_position_state_js_1 = require("./volume-position-state.js");
 const wrap_remotion_context_js_1 = require("./wrap-remotion-context.js");
-const z_color_js_1 = require("./z-color.js");
 const Timeline = TimelinePosition;
 // Mark them as Internals so use don't assume this is public
 // API and are less likely to use it
@@ -102,6 +102,5 @@ exports.Internals = {
     EditorPropsProvider: EditorProps_js_1.EditorPropsProvider,
     EditorPropsContext: EditorProps_js_1.EditorPropsContext,
     usePreload: prefetch_js_1.usePreload,
-    REMOTION_COLOR_BRAND: z_color_js_1.REMOTION_COLOR_BRAND,
-    parseColor: z_color_js_1.parseColor,
+    processColor: interpolate_colors_js_1.processColor,
 };

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

@@ -10,5 +10,5 @@ export declare const useVideo: () => {
     parentFolderName: string | null;
     component: import("react").LazyExoticComponent<import("react").ComponentType<unknown>>;
     nonce: number;
-    schema: import("zod").ZodTypeAny;
+    schema: import("zod").ZodTypeAny | null;
 } | null;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.0-alpha.185+1b8f0e746";
+export declare const VERSION = "4.0.0-alpha.217+27eff7599";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '4.0.0-alpha.185+1b8f0e746';
+exports.VERSION = '4.0.0-alpha.217+27eff7599';

package/dist/cjs/video/get-current-time.js

@@ -13,19 +13,20 @@ const getMediaTime = ({ fps, frame, src, playbackRate, startFrom, mediaType, })
         playbackRate,
         startFrom,
     });
-    if (src.endsWith('webm')) {
-        // For WebM videos, we need to add a little bit of shift to get the right frame.
-        const msPerFrame = 1000 / fps;
-        const msShift = msPerFrame / 2;
-        return (expectedFrame * msPerFrame + msShift) / 1000;
-    }
-    if (mediaType === 'video') {
+    const isChrome = typeof window !== 'undefined' &&
+        window.navigator.userAgent.match(/Chrome\/([0-9]+)/);
+    if (isChrome &&
+        Number(isChrome[1]) < 112 &&
+        mediaType === 'video' &&
+        src.endsWith('.mp4')) {
         // In Chrome, for MP4s, if 30fps, the first frame is still displayed at 0.033333
         // even though after that it increases by 0.033333333 each.
         // So frame = 0 in Remotion is like frame = 1 for the browser
         return (expectedFrame + 1) / fps;
     }
-    // For audio, we don't do any shift correction
-    return expectedFrame / fps;
+    // For WebM videos, we need to add a little bit of shift to get the right frame.
+    const msPerFrame = 1000 / fps;
+    const msShift = msPerFrame / 2;
+    return (expectedFrame * msPerFrame + msShift) / 1000;
 };
 exports.getMediaTime = getMediaTime;