remotion 4.0.347 → 4.0.348

package/bundle.ts

@@ -39,7 +39,13 @@ const noReactOutput = await build({
 	external: ['remotion', 'react', 'react-dom'],
 });
 const [noReactFile] = noReactOutput.outputs;
-await Bun.write('dist/esm/no-react.mjs', await noReactFile.text());
+const noReactText = await noReactFile.text();
+
+if (noReactText.includes('createContext')) {
+	throw new Error('remotion/no-react.mjs should not import React');
+}
+
+await Bun.write('dist/esm/no-react.mjs', noReactText);
 
 export {};
 

package/dist/cjs/CompositionManager.d.ts

@@ -70,6 +70,16 @@ export type AudioOrVideoAsset = {
     audioStartFrame: number;
     audioStreamIndex: number;
 };
+export type InlineAudioAsset = {
+    type: 'inline-audio';
+    id: string;
+    audio: number[];
+    frame: number;
+    sampleRate: number;
+    numberOfChannels: number;
+    timestamp: number;
+    duration: number;
+};
 type DiscriminatedArtifact = {
     contentType: 'binary';
     content: string;
@@ -86,7 +96,7 @@ export type ArtifactAsset = {
     frame: number;
     downloadBehavior: DownloadBehavior | null;
 } & DiscriminatedArtifact;
-export type TRenderAsset = AudioOrVideoAsset | ArtifactAsset;
+export type TRenderAsset = AudioOrVideoAsset | ArtifactAsset | InlineAudioAsset;
 export declare const compositionsRef: React.RefObject<{
     getCompositions: () => AnyComposition[];
 } | null>;

package/dist/cjs/audio/AudioForPreview.js

@@ -14,6 +14,7 @@ const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");
 const volume_position_state_js_1 = require("../volume-position-state.js");
 const volume_prop_js_1 = require("../volume-prop.js");
+const volume_safeguard_js_1 = require("../volume-safeguard.js");
 const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
 const AudioForDevelopmentForwardRefFunction = (props, ref) => {
@@ -46,6 +47,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         volume,
         mediaVolume,
     });
+    (0, volume_safeguard_js_1.warnAboutTooHighVolume)(userPreferredVolume);
     const crossOriginValue = (0, get_cross_origin_value_js_1.getCrossOriginValue)({
         crossOrigin,
         requestsVideoFrame: false,

package/dist/cjs/audio/AudioForRendering.js

@@ -11,6 +11,7 @@ const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
 const volume_prop_js_1 = require("../volume-prop.js");
+const volume_safeguard_js_1 = require("../volume-safeguard.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
 const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const audioRef = (0, react_1.useRef)(null);
@@ -37,6 +38,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         frame: volumePropFrame,
         mediaVolume: 1,
     });
+    (0, volume_safeguard_js_1.warnAboutTooHighVolume)(volume);
     (0, react_1.useImperativeHandle)(ref, () => {
         return audioRef.current;
     }, []);

package/dist/cjs/delay-render.d.ts

@@ -1,4 +1,4 @@
-import type { RemotionEnvironment } from './get-remotion-environment.js';
+import type { RemotionEnvironment } from './remotion-environment-context.js';
 export declare const DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
 export declare const DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
 export declare const DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";

package/dist/cjs/get-remotion-environment.d.ts

@@ -1,10 +1,2 @@
-import React from 'react';
-export type RemotionEnvironment = {
-    isStudio: boolean;
-    isRendering: boolean;
-    isClientSideRendering: boolean;
-    isPlayer: boolean;
-    isReadOnlyStudio: boolean;
-};
+import type { RemotionEnvironment } from './remotion-environment-context';
 export declare const getRemotionEnvironment: () => RemotionEnvironment;
-export declare const RemotionEnvironmentContext: React.Context<RemotionEnvironment | null>;

package/dist/cjs/get-remotion-environment.js

@@ -1,10 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemotionEnvironmentContext = exports.getRemotionEnvironment = void 0;
-const react_1 = __importDefault(require("react"));
+exports.getRemotionEnvironment = void 0;
 // Avoid VITE obfuscation
 function getNodeEnvString() {
     return ['NOD', 'E_EN', 'V'].join('');
@@ -37,4 +33,3 @@ const getRemotionEnvironment = () => {
     };
 };
 exports.getRemotionEnvironment = getRemotionEnvironment;
-exports.RemotionEnvironmentContext = react_1.default.createContext(null);

package/dist/cjs/internals.d.ts

@@ -2,9 +2,9 @@ import { type CompProps } from './Composition.js';
 import type { TCompMetadata, TComposition, TRenderAsset, TSequence } from './CompositionManager.js';
 import type { CompositionManagerContext } from './CompositionManagerContext.js';
 import * as CSSUtils from './default-css.js';
-import type { RemotionEnvironment } from './get-remotion-environment.js';
 import type { SerializedJSONWithCustomFields } from './input-props-serialization.js';
 import type { LoggingContextValue } from './log-level-context.js';
+import type { RemotionEnvironment } from './remotion-environment-context.js';
 import type { SetTimelineContextValue, TimelineContextValue } from './timeline-position-state.js';
 import * as TimelinePosition from './timeline-position-state.js';
 import { truthy } from './truthy.js';
@@ -264,5 +264,6 @@ export declare const Internals: {
         toggleFolder: (folderName: string, parentName: string | null) => void;
     } | null>;
     readonly RemotionEnvironmentContext: import("react").Context<RemotionEnvironment | null>;
+    readonly warnAboutTooHighVolume: (volume: number) => void;
 };
 export type { CompositionManagerContext, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -56,6 +56,7 @@ const portal_node_js_1 = require("./portal-node.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const prefetch_js_1 = require("./prefetch.js");
 const register_root_js_1 = require("./register-root.js");
+const remotion_environment_context_js_1 = require("./remotion-environment-context.js");
 const RemotionRoot_js_1 = require("./RemotionRoot.js");
 const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
 const resolve_video_config_js_1 = require("./resolve-video-config.js");
@@ -79,6 +80,7 @@ const video_fragment_js_1 = require("./video/video-fragment.js");
 const VideoForPreview_js_1 = require("./video/VideoForPreview.js");
 const volume_position_state_js_1 = require("./volume-position-state.js");
 const volume_prop_js_1 = require("./volume-prop.js");
+const volume_safeguard_js_1 = require("./volume-safeguard.js");
 const watch_static_file_js_1 = require("./watch-static-file.js");
 const wrap_remotion_context_js_1 = require("./wrap-remotion-context.js");
 // needs to be in core package so gets deduplicated in studio
@@ -161,5 +163,6 @@ exports.Internals = {
     playbackLogging: playback_logging_js_1.playbackLogging,
     timeValueRef: EditorProps_js_1.timeValueRef,
     compositionSelectorRef,
-    RemotionEnvironmentContext: get_remotion_environment_js_1.RemotionEnvironmentContext,
+    RemotionEnvironmentContext: remotion_environment_context_js_1.RemotionEnvironmentContext,
+    warnAboutTooHighVolume: volume_safeguard_js_1.warnAboutTooHighVolume,
 };

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

@@ -1,4 +1,4 @@
-export type { ArtifactAsset, AudioOrVideoAsset, TRenderAsset, } from './CompositionManager';
+export type { ArtifactAsset, AudioOrVideoAsset, InlineAudioAsset, TRenderAsset, } from './CompositionManager';
 export { DownloadBehavior } from './download-behavior';
 export { EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, } from './interpolate';
 export { random, RandomSeed } from './random.js';

package/dist/cjs/remotion-environment-context.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type RemotionEnvironment = {
+    isStudio: boolean;
+    isRendering: boolean;
+    isClientSideRendering: boolean;
+    isPlayer: boolean;
+    isReadOnlyStudio: boolean;
+};
+export declare const RemotionEnvironmentContext: React.Context<RemotionEnvironment | null>;

package/dist/cjs/remotion-environment-context.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemotionEnvironmentContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.RemotionEnvironmentContext = react_1.default.createContext(null);

package/dist/cjs/use-remotion-environment.d.ts

@@ -1,4 +1,4 @@
-import { type RemotionEnvironment } from './get-remotion-environment';
+import type { RemotionEnvironment } from './remotion-environment-context';
 /**
  * @description A React hook that provides information about the current Remotion Environment. This is the preferred way to access environment information in React components as it will support future scoped contexts.
  * @see [Documentation](https://remotion.dev/docs/use-remotion-environment)

package/dist/cjs/use-remotion-environment.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRemotionEnvironment = void 0;
 const react_1 = require("react");
 const get_remotion_environment_1 = require("./get-remotion-environment");
+const remotion_environment_context_1 = require("./remotion-environment-context");
 /**
  * @description A React hook that provides information about the current Remotion Environment. This is the preferred way to access environment information in React components as it will support future scoped contexts.
  * @see [Documentation](https://remotion.dev/docs/use-remotion-environment)
  */
 const useRemotionEnvironment = () => {
-    const context = (0, react_1.useContext)(get_remotion_environment_1.RemotionEnvironmentContext);
+    const context = (0, react_1.useContext)(remotion_environment_context_1.RemotionEnvironmentContext);
     const [env] = (0, react_1.useState)(() => (0, get_remotion_environment_1.getRemotionEnvironment)());
     return context !== null && context !== void 0 ? context : env;
 };

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

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.347';
+exports.VERSION = '4.0.348';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -17,6 +17,7 @@ const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
 const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
+const volume_safeguard_js_1 = require("../volume-safeguard.js");
 const get_current_time_js_1 = require("./get-current-time.js");
 const offthread_video_source_js_1 = require("./offthread-video-source.js");
 const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneMapped = true, toneFrequency, name, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, onVideoFrame, 
@@ -49,6 +50,7 @@ crossOrigin, audioStreamIndex, ...props }) => {
         frame: volumePropsFrame,
         mediaVolume: 1,
     });
+    (0, volume_safeguard_js_1.warnAboutTooHighVolume)(volume);
     (0, react_1.useEffect)(() => {
         var _a;
         if (!src) {

package/dist/cjs/video/VideoForPreview.js

@@ -19,6 +19,7 @@ const use_video_config_js_1 = require("../use-video-config.js");
 const version_js_1 = require("../version.js");
 const volume_position_state_js_1 = require("../volume-position-state.js");
 const volume_prop_js_1 = require("../volume-prop.js");
+const volume_safeguard_js_1 = require("../volume-safeguard.js");
 const emit_video_frame_js_1 = require("./emit-video-frame.js");
 const video_fragment_js_1 = require("./video-fragment.js");
 const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
@@ -62,6 +63,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         volume,
         mediaVolume,
     });
+    (0, volume_safeguard_js_1.warnAboutTooHighVolume)(userPreferredVolume);
     (0, use_media_in_timeline_js_1.useMediaInTimeline)({
         mediaRef: videoRef,
         volume,

package/dist/cjs/video/VideoForRendering.js

@@ -16,6 +16,7 @@ const use_delay_render_js_1 = require("../use-delay-render.js");
 const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
 const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
+const volume_safeguard_js_1 = require("../volume-safeguard.js");
 const get_current_time_js_1 = require("./get-current-time.js");
 const seek_until_right_js_1 = require("./seek-until-right.js");
 const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, audioStreamIndex, ...props }, ref) => {
@@ -50,6 +51,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         frame: volumePropsFrame,
         mediaVolume: 1,
     });
+    (0, volume_safeguard_js_1.warnAboutTooHighVolume)(volume);
     (0, react_1.useEffect)(() => {
         var _a;
         if (!props.src) {

package/dist/cjs/volume-safeguard.d.ts

@@ -0,0 +1 @@
+export declare const warnAboutTooHighVolume: (volume: number) => void;

package/dist/cjs/volume-safeguard.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.warnAboutTooHighVolume = void 0;
+const warnAboutTooHighVolume = (volume) => {
+    if (volume >= 100) {
+        throw new Error(`Volume was set to ${volume}, but regular volume is 1, not 100. Did you forget to divide by 100? Set a volume of less than 100 to dismiss this error.`);
+    }
+};
+exports.warnAboutTooHighVolume = warnAboutTooHighVolume;

package/dist/esm/index.mjs

@@ -33,10 +33,9 @@ var Clipper = () => {
 };
 
 // src/enable-sequence-stack-traces.ts
-import React2 from "react";
+import React from "react";
 
 // src/get-remotion-environment.ts
-import React from "react";
 function getNodeEnvString() {
   return ["NOD", "E_EN", "V"].join("");
 }
@@ -56,10 +55,9 @@ var getRemotionEnvironment = () => {
     isClientSideRendering: false
   };
 };
-var RemotionEnvironmentContext = React.createContext(null);
 
 // src/enable-sequence-stack-traces.ts
-var originalCreateElement = React2.createElement;
+var originalCreateElement = React.createElement;
 var componentsToAddStacksTo = [];
 var enableSequenceStackTraces = () => {
   if (!getRemotionEnvironment().isStudio) {
@@ -78,7 +76,7 @@ var enableSequenceStackTraces = () => {
       return Reflect.apply(target, thisArg, argArray);
     }
   });
-  React2.createElement = proxy;
+  React.createElement = proxy;
 };
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
@@ -107,7 +105,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.347";
+var VERSION = "4.0.348";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -253,9 +251,9 @@ import { createContext as createContext3 } from "react";
 var SequenceContext = createContext3(null);
 
 // src/SequenceManager.tsx
-import React4, { useCallback, useMemo as useMemo2, useState } from "react";
+import React3, { useCallback, useMemo as useMemo2, useState } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var SequenceManager = React4.createContext({
+var SequenceManager = React3.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -264,7 +262,7 @@ var SequenceManager = React4.createContext({
   },
   sequences: []
 });
-var SequenceVisibilityToggleContext = React4.createContext({
+var SequenceVisibilityToggleContext = React3.createContext({
   hidden: {},
   setHidden: () => {
     throw new Error("SequenceVisibilityToggle not initialized");
@@ -343,6 +341,12 @@ import { createContext as createContext8, useContext as useContext6, useMemo as
 
 // src/use-remotion-environment.ts
 import { useContext as useContext3, useState as useState3 } from "react";
+
+// src/remotion-environment-context.ts
+import React4 from "react";
+var RemotionEnvironmentContext = React4.createContext(null);
+
+// src/use-remotion-environment.ts
 var useRemotionEnvironment = () => {
   const context = useContext3(RemotionEnvironmentContext);
   const [env] = useState3(() => getRemotionEnvironment());
@@ -4451,6 +4455,13 @@ var useMediaMutedState = () => {
   }, [mediaMuted, setMediaMuted]);
 };
 
+// src/volume-safeguard.ts
+var warnAboutTooHighVolume = (volume) => {
+  if (volume >= 100) {
+    throw new Error(`Volume was set to ${volume}, but regular volume is 1, not 100. Did you forget to divide by 100? Set a volume of less than 100 to dismiss this error.`);
+  }
+};
+
 // src/audio/AudioForPreview.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
 var AudioForDevelopmentForwardRefFunction = (props, ref) => {
@@ -4506,6 +4517,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume,
     mediaVolume
   });
+  warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
     requestsVideoFrame: false
@@ -4663,6 +4675,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     frame: volumePropFrame,
     mediaVolume: 1
   });
+  warnAboutTooHighVolume(volume);
   useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, []);
@@ -6131,6 +6144,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     volume,
     mediaVolume
   });
+  warnAboutTooHighVolume(userPreferredVolume);
   useMediaInTimeline({
     mediaRef: videoRef,
     volume,
@@ -6468,7 +6482,8 @@ var Internals = {
   playbackLogging,
   timeValueRef,
   compositionSelectorRef,
-  RemotionEnvironmentContext
+  RemotionEnvironmentContext,
+  warnAboutTooHighVolume
 };
 // src/interpolate-colors.ts
 var NUMBER = "[-+]?\\d*\\.?\\d+";
@@ -7356,6 +7371,7 @@ var OffthreadVideoForRendering = ({
     frame: volumePropsFrame,
     mediaVolume: 1
   });
+  warnAboutTooHighVolume(volume);
   useEffect20(() => {
     if (!src) {
       throw new Error("No src passed");
@@ -7768,6 +7784,7 @@ var VideoForRenderingForwardFunction = ({
     frame: volumePropsFrame,
     mediaVolume: 1
   });
+  warnAboutTooHighVolume(volume);
   useEffect21(() => {
     if (!props2.src) {
       throw new Error("No src passed");

package/dist/esm/no-react.mjs

@@ -131,10 +131,6 @@ var random = (seed, dummy) => {
   }
   throw new Error("random() argument must be a number or a string");
 };
-// src/get-remotion-environment.ts
-import React from "react";
-var RemotionEnvironmentContext = React.createContext(null);
-
 // src/truthy.ts
 function truthy(value) {
   return Boolean(value);

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.347";
+var VERSION = "4.0.348";
 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.347",
+  "version": "4.0.348",
   "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.347"
+    "@remotion/eslint-config-internal": "4.0.348"
   },
   "keywords": [
     "video",

package/dist/cjs/video/use-audio-channel-index.d.ts

@@ -1,4 +0,0 @@
-export declare const useAudioChannelIndex: ({ ref, audioChannelIndex, }: {
-    ref: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>;
-    audioChannelIndex: number;
-}) => void;

package/dist/cjs/video/use-audio-channel-index.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAudioChannelIndex = void 0;
-const react_1 = require("react");
-const useAudioChannelIndex = ({ ref, audioChannelIndex, }) => {
-    (0, react_1.useEffect)(() => {
-        var _a;
-        // @ts-expect-error
-        const audioChannels = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.audioTracks;
-        console.log({ audioChannels, audioChannelIndex });
-    }, [ref, audioChannelIndex]);
-};
-exports.useAudioChannelIndex = useAudioChannelIndex;