remotion 3.3.36 → 3.3.38

package/dist/Composition.js

@@ -34,9 +34,11 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
     const video = (0, use_video_1.useVideo)();
     const lazy = (0, use_lazy_component_1.useLazyComponent)(compProps);
     const nonce = (0, nonce_1.useNonce)();
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const canUseComposition = (0, react_1.useContext)(internals_1.Internals.CanUseRemotionHooks);
     if (canUseComposition) {
-        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+        if (environment === 'player-development' ||
+            environment === 'player-production') {
             throw new Error('<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.');
         }
         throw new Error('<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.');
@@ -81,16 +83,12 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
         nonce,
         parentName,
     ]);
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'preview' &&
-        video &&
-        video.component === lazy) {
+    if (environment === 'preview' && video && video.component === lazy) {
         const Comp = lazy;
         const inputProps = (0, input_props_1.getInputProps)();
         return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.ClipComposition, { children: (0, jsx_runtime_1.jsx)(CanUseRemotionHooks_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }) }), (0, portal_node_1.portalNode)());
     }
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering' &&
-        video &&
-        video.component === lazy) {
+    if (environment === 'rendering' && video && video.component === lazy) {
         const Comp = lazy;
         const inputProps = (0, input_props_1.getInputProps)();
         return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }), (0, portal_node_1.portalNode)());

package/dist/Img.js

@@ -8,6 +8,7 @@ const get_environment_1 = require("./get-environment");
 const prefetch_1 = require("./prefetch");
 const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
     const imageRef = (0, react_1.useRef)(null);
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     (0, react_1.useImperativeHandle)(ref, () => {
         return imageRef.current;
     }, []);
@@ -22,7 +23,7 @@ const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
         }
     }, [onError]);
     // If image source switches, make new handle
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if (environment === 'rendering') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             if (process.env.NODE_ENV === 'test') {

package/dist/Sequence.js

@@ -20,6 +20,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
     const nonce = (0, nonce_1.useNonce)();
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     if (layout !== 'absolute-fill' && layout !== 'none') {
         throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
     }
@@ -71,7 +72,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
     }, [children, name]);
     (0, react_1.useEffect)(() => {
         var _a;
-        if ((0, get_environment_1.getRemotionEnvironment)() !== 'preview') {
+        if (environment !== 'preview') {
             return;
         }
         registerSequence({
@@ -103,6 +104,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         showInTimeline,
         nonce,
         showLoopTimesInTimeline,
+        environment,
     ]);
     const endThreshold = cumulatedFrom + from + durationInFrames - 1;
     const content = absoluteFrame < cumulatedFrom + from

package/dist/audio/Audio.js

@@ -19,6 +19,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     const { startFrom, endAt, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_1.useVideoConfig)();
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const { durations, setDurations } = (0, react_1.useContext)(duration_state_1.DurationsContext);
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
@@ -43,7 +44,7 @@ const AudioRefForwardingFunction = (props, ref) => {
         return ((0, jsx_runtime_1.jsx)(Sequence_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.Audio, { ...otherProps, ref: ref }) }));
     }
     (0, validate_media_props_1.validateMediaProps)(props, 'Audio');
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if (environment === 'rendering') {
         return ((0, jsx_runtime_1.jsx)(AudioForRendering_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onError: onError }));
     }
     return ((0, jsx_runtime_1.jsx)(AudioForDevelopment_1.AudioForDevelopment, { shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration }));

package/dist/audio/AudioForRendering.js

@@ -20,6 +20,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const frame = (0, use_current_frame_1.useCurrentFrame)();
     const sequenceContext = (0, react_1.useContext)(Sequence_1.SequenceContext);
     const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
     const id = (0, react_1.useMemo)(() => {
@@ -77,7 +78,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     ]);
     const { src, onDuration } = props;
     // If audio source switches, make new handle
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if (environment === 'rendering') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             if (process.env.NODE_ENV === 'test') {

package/dist/get-environment.d.ts

@@ -1,2 +1,3 @@
 export declare type RemotionEnvironment = 'preview' | 'rendering' | 'player-development' | 'player-production';
 export declare const getRemotionEnvironment: () => RemotionEnvironment;
+export declare const useRemotionEnvironment: () => RemotionEnvironment;

package/dist/get-environment.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRemotionEnvironment = void 0;
+exports.useRemotionEnvironment = exports.getRemotionEnvironment = void 0;
+const is_player_1 = require("./is-player");
 const getRemotionEnvironment = () => {
     if (process.env.NODE_ENV === 'production') {
         if (typeof window !== 'undefined' && window.remotion_isPlayer) {
@@ -20,3 +21,14 @@ const getRemotionEnvironment = () => {
     return 'preview';
 };
 exports.getRemotionEnvironment = getRemotionEnvironment;
+const useRemotionEnvironment = () => {
+    const isPlayer = (0, is_player_1.useIsPlayer)();
+    if (isPlayer) {
+        if (process.env.NODE_ENV === 'production') {
+            return 'player-production';
+        }
+        return 'player-development';
+    }
+    return (0, exports.getRemotionEnvironment)();
+};
+exports.useRemotionEnvironment = useRemotionEnvironment;

package/dist/index.d.ts

@@ -85,4 +85,5 @@ export declare const Experimental: {
         y: number;
     }>;
     Null: import("react").FC<{}>;
+    useIsPlayer: () => boolean;
 };

package/dist/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Experimental = exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.random = exports.prefetch = exports.Loop = exports.interpolateColors = exports.getStaticFiles = exports.getInputProps = exports.Config = void 0;
 require("./asset-types");
 const Clipper_1 = require("./Clipper");
+const is_player_1 = require("./is-player");
 const multiple_versions_warning_1 = require("./multiple-versions-warning");
 const Null_1 = require("./Null");
 (0, multiple_versions_warning_1.checkMultipleRemotionVersions)();
@@ -64,4 +65,5 @@ __exportStar(require("./video-config"), exports);
 exports.Experimental = {
     Clipper: Clipper_1.Clipper,
     Null: Null_1.Null,
+    useIsPlayer: is_player_1.useIsPlayer,
 };

package/dist/internals.d.ts

@@ -86,6 +86,11 @@ export declare const Internals: {
     DurationsContextProvider: import("react").FC<{
         children: import("react").ReactNode;
     }>;
+    IsPlayerContextProvider: import("react").FC<{
+        children?: import("react").ReactNode;
+    }>;
+    useIsPlayer: () => boolean;
+    useRemotionEnvironment: () => RemotionEnvironment;
 };
 declare type WebpackConfiguration = Configuration;
 declare type WebpackOverrideFn = (currentConfiguration: WebpackConfiguration) => WebpackConfiguration;

package/dist/internals.js

@@ -32,6 +32,7 @@ const CSSUtils = __importStar(require("./default-css"));
 const delay_render_1 = require("./delay-render");
 const get_environment_1 = require("./get-environment");
 const get_preview_dom_element_1 = require("./get-preview-dom-element");
+const is_player_1 = require("./is-player");
 const portal_node_1 = require("./portal-node");
 const prefetch_state_1 = require("./prefetch-state");
 const register_root_1 = require("./register-root");
@@ -92,4 +93,7 @@ exports.Internals = {
     enableLegacyRemotionConfig: config_1.enableLegacyRemotionConfig,
     PrefetchProvider: prefetch_state_1.PrefetchProvider,
     DurationsContextProvider: duration_state_1.DurationsContextProvider,
+    IsPlayerContextProvider: is_player_1.IsPlayerContextProvider,
+    useIsPlayer: is_player_1.useIsPlayer,
+    useRemotionEnvironment: get_environment_1.useRemotionEnvironment,
 };

package/dist/is-player.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+export declare const IsPlayerContextProvider: React.FC<PropsWithChildren>;
+export declare const useIsPlayer: () => boolean;

package/dist/is-player.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsPlayer = exports.IsPlayerContextProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const IsPlayerContext = (0, react_1.createContext)(false);
+const IsPlayerContextProvider = ({ children, }) => {
+    return (0, jsx_runtime_1.jsx)(IsPlayerContext.Provider, { value: true, children: children });
+};
+exports.IsPlayerContextProvider = IsPlayerContextProvider;
+const useIsPlayer = () => {
+    return (0, react_1.useContext)(IsPlayerContext);
+};
+exports.useIsPlayer = useIsPlayer;

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

@@ -37,6 +37,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
         : videoConfig.durationInFrames;
     const doesVolumeChange = typeof volume === 'function';
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const volumes = (0, react_1.useMemo)(() => {
         if (typeof volume === 'number') {
             return volume;
@@ -66,8 +67,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         if (!src) {
             throw new Error('No src passed');
         }
-        if ((0, get_environment_1.getRemotionEnvironment)() !== 'preview' &&
-            process.env.NODE_ENV !== 'test') {
+        if (environment !== 'preview' && process.env.NODE_ENV !== 'test') {
             return;
         }
         registerSequence({
@@ -107,6 +107,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         mediaType,
         startsAt,
         playbackRate,
+        environment,
     ]);
     (0, react_1.useEffect)(() => {
         const tag = {

package/dist/use-video-config.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVideoConfig = void 0;
 const react_1 = require("react");
 const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
+const is_player_1 = require("./is-player");
 const use_unsafe_video_config_1 = require("./use-unsafe-video-config");
 /**
  * Get some info about the context of the video that you are making.
@@ -12,8 +13,10 @@ const use_unsafe_video_config_1 = require("./use-unsafe-video-config");
 const useVideoConfig = () => {
     const videoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
     const context = (0, react_1.useContext)(CanUseRemotionHooks_1.CanUseRemotionHooks);
+    const isPlayer = (0, is_player_1.useIsPlayer)();
     if (!videoConfig) {
-        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+        if ((typeof window !== 'undefined' && window.remotion_isPlayer) ||
+            isPlayer) {
             throw new Error('No video config found. You are probably calling useVideoConfig() from outside the component passed to <Player />. See https://www.remotion.dev/docs/player/examples for how to set up the Player correctly.');
         }
         throw new Error('No video config found. You are probably calling useVideoConfig() from a component which has not been registered as a <Composition />. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions for more information.');

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.3.36";
+export declare const VERSION = "3.3.38";

package/dist/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '3.3.36';
+exports.VERSION = '3.3.38';

package/dist/video/OffthreadVideo.js

@@ -12,6 +12,7 @@ const OffthreadVideoForRendering_1 = require("./OffthreadVideoForRendering");
 const VideoForDevelopment_1 = require("./VideoForDevelopment");
 const OffthreadVideo = (props) => {
     const { startFrom, endAt, ...otherProps } = props;
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const onDuration = (0, react_1.useCallback)(() => undefined, []);
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<OffthreadVideo>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
@@ -24,7 +25,7 @@ const OffthreadVideo = (props) => {
     }
     (0, validate_media_props_1.validateMediaProps)(props, 'Video');
     (0, validate_offthreadvideo_image_format_1.validateOffthreadVideoImageFormat)(props.imageFormat);
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if (environment === 'rendering') {
         return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_1.OffthreadVideoForRendering, { ...otherProps });
     }
     return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_1.VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));

package/dist/video/Video.js

@@ -17,6 +17,7 @@ const VideoForwardingFunction = (props, ref) => {
     const { startFrom, endAt, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_1.useVideoConfig)();
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const { durations, setDurations } = (0, react_1.useContext)(duration_state_1.DurationsContext);
     if (typeof ref === 'string') {
         throw new Error('string refs are not supported');
@@ -40,7 +41,7 @@ const VideoForwardingFunction = (props, ref) => {
         return ((0, jsx_runtime_1.jsx)(Sequence_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...otherProps, ref: ref }) }));
     }
     (0, validate_media_props_1.validateMediaProps)(props, 'Video');
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if (environment === 'rendering') {
         return ((0, jsx_runtime_1.jsx)(VideoForRendering_1.VideoForRendering, { onDuration: onDuration, ...otherProps, ref: ref }));
     }
     return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_1.VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration }));

package/dist/video/VideoForRendering.js

@@ -25,6 +25,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
     const videoRef = (0, react_1.useRef)(null);
     const sequenceContext = (0, react_1.useContext)(Sequence_1.SequenceContext);
     const mediaStartsAt = (0, use_audio_frame_1.useMediaStartsAt)();
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
@@ -169,7 +170,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
     ]);
     const { src } = props;
     // If video source switches, make new handle
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if (environment === 'rendering') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             if (process.env.NODE_ENV === 'test') {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "remotion",
-	"version": "3.3.36",
+	"version": "3.3.38",
 	"description": "Render videos in React",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -65,5 +65,5 @@
 			]
 		}
 	},
-	"gitHead": "623bf1e883e7b26b9d02458037c930ccbe8857e4"
+	"gitHead": "ac58695e452e58deb5c010f09bcc94d036930e6c"
 }