@remotion/promo-pages 4.0.341 → 4.0.344

package/.turbo/turbo-make.log

@@ -1,8 +1,8 @@
 
 
-> @remotion/promo-pages@4.0.341 make /Users/jonathanburger/remotion/packages/promo-pages
+> @remotion/promo-pages@4.0.344 make /Users/jonathanburger/remotion/packages/promo-pages
 > bun --env-file=../.env.bundle bundle.ts
 
 ≈ tailwindcss v4.1.1
 
-Done in 30ms
+Done in 39ms

package/dist/Homepage.js

@@ -27,7 +27,7 @@ import {
   useContext as useContext10,
   useEffect as useEffect3,
   useMemo as useMemo9,
-  useState as useState4
+  useState as useState5
 } from "react";
 import { forwardRef, useMemo as useMemo2 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -36,6 +36,7 @@ import React32, { useCallback as useCallback2, useMemo as useMemo22, useState as
 import { jsx as jsx32 } from "react/jsx-runtime";
 import { createContext as createContext4, useContext as useContext2, useEffect as useEffect2, useRef, useState as useState22 } from "react";
 import { createContext as createContext8, useContext as useContext5, useMemo as useMemo6 } from "react";
+import { useState as useState3 } from "react";
 import { useContext as useContext4, useMemo as useMemo5 } from "react";
 import { createContext as createContext5 } from "react";
 import {
@@ -46,7 +47,7 @@ import {
   useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo4,
-  useState as useState3
+  useState as useState4
 } from "react";
 import React42, {
   createContext as createContext6,
@@ -70,25 +71,25 @@ import {
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect,
   useRef as useRef3,
-  useState as useState5
+  useState as useState6
 } from "react";
 import React8, { useCallback as useCallback4, useImperativeHandle as useImperativeHandle3, useRef as useRef2 } from "react";
 import { jsx as jsx92 } from "react/jsx-runtime";
 import { jsx as jsx102 } from "react/jsx-runtime";
-import { useContext as useContext11, useEffect as useEffect5, useState as useState7 } from "react";
+import { useContext as useContext11, useEffect as useEffect5, useState as useState8 } from "react";
 import {
   createContext as createContext10,
   useCallback as useCallback5,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo10,
-  useState as useState6
+  useState as useState7
 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 import { forwardRef as forwardRef6, useCallback as useCallback10, useContext as useContext24 } from "react";
 import React9, { createContext as createContext11, useMemo as useMemo11 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import { useContext as useContext12 } from "react";
-import { createContext as createContext12, useEffect as useEffect6, useState as useState8 } from "react";
+import { createContext as createContext12, useEffect as useEffect6, useState as useState9 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { createContext as createContext13, useMemo as useMemo12, useReducer } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
@@ -99,7 +100,7 @@ import {
   useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo20,
   useRef as useRef11,
-  useState as useState13
+  useState as useState14
 } from "react";
 import { createContext as createContext14 } from "react";
 import * as React12 from "react";
@@ -112,12 +113,12 @@ import React13, {
   useEffect as useEffect7,
   useMemo as useMemo14,
   useRef as useRef4,
-  useState as useState9
+  useState as useState10
 } from "react";
 import { useMemo as useMemo13 } from "react";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 import { useRef as useRef5 } from "react";
-import { useContext as useContext17, useEffect as useEffect8, useMemo as useMemo15, useState as useState10 } from "react";
+import { useContext as useContext17, useEffect as useEffect8, useMemo as useMemo15, useState as useState11 } from "react";
 import { useContext as useContext16 } from "react";
 import {
   useCallback as useCallback9,
@@ -135,11 +136,11 @@ import React14, {
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo16,
   useRef as useRef7,
-  useState as useState11
+  useState as useState12
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import React15 from "react";
-import { useEffect as useEffect10, useState as useState12 } from "react";
+import { useEffect as useEffect10, useState as useState13 } from "react";
 import { useEffect as useEffect11, useRef as useRef9 } from "react";
 import { createContext as createContext16, useContext as useContext21, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
@@ -161,7 +162,7 @@ import { jsx as jsx20 } from "react/jsx-runtime";
 import { jsx as jsx21, jsxs as jsxs22 } from "react/jsx-runtime";
 import React19, { useMemo as useMemo23 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
-import { forwardRef as forwardRef7, useCallback as useCallback11, useState as useState14 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback11, useState as useState15 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef8,
@@ -178,7 +179,7 @@ import React23, {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo24,
   useRef as useRef14,
-  useState as useState15
+  useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
@@ -186,7 +187,7 @@ import {
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo25,
   useRef as useRef15,
-  useState as useState16
+  useState as useState17
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import React25, { createContext as createContext18 } from "react";
@@ -197,7 +198,7 @@ import {
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo26,
   useRef as useRef16,
-  useState as useState17
+  useState as useState18
 } from "react";
 import { useEffect as useEffect18 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
@@ -209,18 +210,19 @@ import React29, { createContext as createContext19 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React31 from "react";
-import { useCallback as useCallback15 } from "react";
+import { useCallback as useCallback14 } from "react";
+import { useCallback as useCallback16 } from "react";
 import {
-  useCallback as useCallback14,
+  useCallback as useCallback15,
   useContext as useContext29,
   useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo29,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx322 } from "react/jsx-runtime";
-import { forwardRef as forwardRef12, useCallback as useCallback16, useContext as useContext31 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext31 } from "react";
 import {
   forwardRef as forwardRef11,
   useContext as useContext30,
@@ -735,7 +737,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.341", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.344", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -893,7 +895,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     setNonce(context.getNonce);
   }, [context]);
   return nonce;
-}, exports_timeline_position_state, CompositionManager, CompositionSetters, EditorPropsContext, editorPropsProviderRef, timeValueRef, EditorPropsProvider = ({ children }) => {
+}, exports_timeline_position_state, useRemotionEnvironment = () => {
+  const [env] = useState3(() => getRemotionEnvironment());
+  return env;
+}, CompositionManager, CompositionSetters, EditorPropsContext, editorPropsProviderRef, timeValueRef, EditorPropsProvider = ({ children }) => {
   const [props, setProps] = React42.useState({});
   const updateProps = useCallback22(({
     defaultProps,
@@ -1058,7 +1063,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     defaultProps,
     props: originalProps,
     abortSignal: signal,
-    compositionId
+    compositionId,
+    isRendering: getRemotionEnvironment().isRendering
   }) : null;
   if (calculatedProm !== null && typeof calculatedProm === "object" && "then" in calculatedProm) {
     return calculatedProm.then((c) => {
@@ -1140,7 +1146,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }, ResolveCompositionContext, resolveCompositionsRef, needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
 }, PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally", ResolveCompositionConfig = ({ children }) => {
-  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState3(null);
+  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState4(null);
   const { compositions, canvasContent, currentCompositionMetadata } = useContext3(CompositionManager);
   const { fastRefreshes, manualRefreshes } = useContext3(NonceContext);
   if (manualRefreshes) {}
@@ -1149,10 +1155,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [canvasContent, compositions]);
   const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
   const { props: allEditorProps } = useContext3(EditorPropsContext);
+  const env = useRemotionEnvironment();
   const inputProps = useMemo4(() => {
-    return typeof window === "undefined" || getRemotionEnvironment().isPlayer ? {} : getInputProps() ?? {};
-  }, []);
-  const [resolvedConfigs, setResolvedConfigs] = useState3({});
+    return typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {};
+  }, [env.isPlayer]);
+  const [resolvedConfigs, setResolvedConfigs] = useState4({});
   const selectedEditorProps = useMemo4(() => {
     return selectedComposition ? allEditorProps[selectedComposition.id] ?? {} : {};
   }, [allEditorProps, selectedComposition]);
@@ -1399,6 +1406,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const selectedEditorProps = useMemo4(() => {
     return composition ? allEditorProps[composition.id] ?? {} : {};
   }, [allEditorProps, composition]);
+  const env = useRemotionEnvironment();
   return useMemo4(() => {
     if (!composition) {
       return null;
@@ -1433,7 +1441,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
           props: {
             ...composition.defaultProps ?? {},
             ...selectedEditorProps ?? {},
-            ...typeof window === "undefined" || getRemotionEnvironment().isPlayer ? {} : getInputProps() ?? {}
+            ...typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {}
           },
           defaultCodec: null,
           defaultOutName: null,
@@ -1446,7 +1454,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return null;
     }
     return context[composition.id];
-  }, [composition, context, currentCompositionMetadata, selectedEditorProps]);
+  }, [
+    composition,
+    context,
+    currentCompositionMetadata,
+    selectedEditorProps,
+    env.isPlayer
+  ]);
 }, useVideo = () => {
   const { canvasContent, compositions, currentCompositionMetadata } = useContext4(CompositionManager);
   const selected = compositions.find((c) => {
@@ -1495,10 +1509,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }, useTimelinePosition = () => {
   const videoConfig = useVideo();
   const state = useContext5(TimelineContext);
+  const env = useRemotionEnvironment();
   if (!videoConfig) {
     return typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0;
   }
-  const unclamped = state.frame[videoConfig.id] ?? (getRemotionEnvironment().isPlayer ? 0 : getFrameForComposition(videoConfig.id));
+  const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext5(SetTimelineContext);
@@ -1569,8 +1584,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return videoConfig;
 }, useCurrentFrame = () => {
   const canUseRemotionHooks = useContext8(CanUseRemotionHooks);
+  const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
-    if (getRemotionEnvironment().isPlayer) {
+    if (env.isPlayer) {
       throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
     }
     throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
@@ -1643,7 +1659,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState4(() => String(Math.random()));
+  const [id] = useState5(() => String(Math.random()));
   const parentSequence = useContext10(SequenceContext);
   const { rootId } = useContext10(TimelineContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
@@ -1704,8 +1720,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const timelineClipName = useMemo9(() => {
     return name ?? "";
   }, [name]);
+  const env = useRemotionEnvironment();
   useEffect3(() => {
-    if (!getRemotionEnvironment().isStudio) {
+    if (!env.isStudio) {
       return;
     }
     registerSequence({
@@ -1742,7 +1759,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     loopDisplay,
     stack,
     premountDisplay,
-    postmountDisplay
+    postmountDisplay,
+    env.isStudio
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -1822,7 +1840,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     })
   });
 }, PremountedPostmountedSequence, SequenceRefForwardingFunction = (props, ref) => {
-  if (props.layout !== "none" && !getRemotionEnvironment().isRendering) {
+  const env = useRemotionEnvironment();
+  if (props.layout !== "none" && !env.isRendering) {
     if (props.premountFor || props.postmountFor) {
       return /* @__PURE__ */ jsx82(PremountedPostmountedSequence, {
         ...props,
@@ -1861,14 +1880,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return logLevels.indexOf(level);
 }, isEqualOrBelowLogLevel = (currentLevel, level) => {
   return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
-}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRender = (label, options) => {
+}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = (environment, label, options) => {
   if (typeof label !== "string" && typeof label !== "undefined") {
     throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
   }
   const handle = Math.random();
   handles.push(handle);
   const called = Error().stack?.replace(/^Error/g, "") ?? "";
-  if (getRemotionEnvironment().isRendering) {
+  if (environment.isRendering) {
     const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof window === "undefined" ? defaultTimeout : window.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
     if (typeof window !== "undefined") {
       const retriesLeft = (options?.retries ?? 0) - (window.remotion_attempt - 1);
@@ -1894,7 +1913,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     window.remotion_renderReady = false;
   }
   return handle;
-}, continueRender = (handle) => {
+}, delayRender = (label, options) => {
+  return delayRenderInternal(getRemotionEnvironment(), label, options);
+}, continueRenderInternal = (handle, environment) => {
   if (typeof handle === "undefined") {
     throw new TypeError("The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.");
   }
@@ -1903,7 +1924,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   handles = handles.filter((h) => {
     if (h === handle) {
-      if (getRemotionEnvironment().isRendering) {
+      if (environment.isRendering) {
         if (!window.remotion_delayRenderTimeouts[handle]) {
           return false;
         }
@@ -1924,6 +1945,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (handles.length === 0 && typeof window !== "undefined") {
     window.remotion_renderReady = true;
   }
+}, continueRender = (handle) => {
+  continueRenderInternal(handle, getRemotionEnvironment());
 }, calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -2186,7 +2209,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   validateContent(artifact.content);
 }, RenderAssetManager, RenderAssetManagerProvider = ({ children }) => {
-  const [renderAssets, setRenderAssets] = useState6([]);
+  const [renderAssets, setRenderAssets] = useState7([]);
   const registerRenderAsset = useCallback5((renderAsset) => {
     validateRenderAsset(renderAsset);
     setRenderAssets((assets) => {
@@ -2219,9 +2242,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, ArtifactThumbnail, Artifact = ({ filename, content, downloadBehavior }) => {
   const { registerRenderAsset, unregisterRenderAsset } = useContext11(RenderAssetManager);
-  const [env] = useState7(() => getRemotionEnvironment());
+  const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
-  const [id] = useState7(() => {
+  const [id] = useState8(() => {
     return String(Math.random());
   });
   useEffect5(() => {
@@ -2357,7 +2380,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   preloads = updater(preloads);
   updaters.forEach((u) => u());
 }, PrefetchProvider = ({ children }) => {
-  const [_preloads, _setPreloads] = useState8(() => preloads);
+  const [_preloads, _setPreloads] = useState9(() => preloads);
   useEffect6(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
@@ -2712,7 +2735,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   onAutoPlayError,
   logLevel,
   mountTime,
-  reason
+  reason,
+  isPlayer
 }) => {
   const { current } = mediaRef;
   if (!current) {
@@ -2757,7 +2781,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         return;
       }
       console.log(`The video will be muted and we'll retry playing it.`);
-      if (mediaType === "video" && getRemotionEnvironment().isPlayer) {
+      if (mediaType === "video" && isPlayer) {
         console.log("Use onAutoPlayError() to handle this error yourself.");
       }
       current.muted = true;
@@ -2827,7 +2851,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return true;
 }, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audioLatencyHint }) => {
   const audios = useRef4([]);
-  const [initialNumberOfAudioTags] = useState9(numberOfAudioTags);
+  const [initialNumberOfAudioTags] = useState10(numberOfAudioTags);
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
   }
@@ -2933,6 +2957,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
   }, [rerenderAudios]);
   const mountTime = useMountTime();
+  const env = useRemotionEnvironment();
   const playAllAudios = useCallback6(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a) => a.el === ref.ref);
@@ -2945,11 +2970,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
         onAutoPlayError: null,
         logLevel,
         mountTime,
-        reason: "playing all audios"
+        reason: "playing all audios",
+        isPlayer: env.isPlayer
       });
     });
     audioContext?.resume();
-  }, [audioContext, logLevel, mountTime, refs]);
+  }, [audioContext, logLevel, mountTime, refs, env.isPlayer]);
   const value = useMemo14(() => {
     return {
       registerAudio,
@@ -2996,7 +3022,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   premounting
 }) => {
   const ctx = useContext14(SharedAudioContext);
-  const [elem] = useState9(() => {
+  const [elem] = useState10(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio({ aud, audioId, premounting });
     }
@@ -3272,7 +3298,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { imperativePlaying } = useContext17(TimelineContext);
   const startsAt = useMediaStartsAt();
   const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
-  const [initialVolume] = useState10(() => volume);
+  const [initialVolume] = useState11(() => volume);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const nonce = useNonce();
@@ -3295,6 +3321,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
   }, [initialVolume, mediaType, src, volume]);
+  const env = useRemotionEnvironment();
   useEffect8(() => {
     if (!mediaRef.current) {
       return;
@@ -3302,7 +3329,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     if (!src) {
       throw new Error("No src passed");
     }
-    if (!getRemotionEnvironment().isStudio && window.process?.env?.NODE_ENV !== "test") {
+    if (!env.isStudio && window.process?.env?.NODE_ENV !== "test") {
       return;
     }
     if (!showInTimeline) {
@@ -3352,7 +3379,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     stack,
     showInTimeline,
     premountDisplay,
-    postmountDisplay
+    postmountDisplay,
+    env.isStudio
   ]);
   useEffect8(() => {
     const tag = {
@@ -3370,7 +3398,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
           onAutoPlayError,
           logLevel,
           mountTime,
-          reason
+          reason,
+          isPlayer: env.isPlayer
         });
       }
     };
@@ -3388,12 +3417,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
     isPremounting,
     isPostmounting,
     logLevel,
-    mountTime
+    mountTime,
+    env.isPlayer
   ]);
 }, useBufferManager = (logLevel, mountTime) => {
-  const [blocks, setBlocks] = useState11([]);
-  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState11([]);
-  const [onResumeCallbacks, setOnResumeCallbacks] = useState11([]);
+  const [blocks, setBlocks] = useState12([]);
+  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState12([]);
+  const [onResumeCallbacks, setOnResumeCallbacks] = useState12([]);
   const buffering = useRef7(false);
   const addBlock = useCallback7((block) => {
     setBlocks((b) => [...b, block]);
@@ -3460,7 +3490,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     children
   });
 }, useIsPlayerBuffering = (bufferManager) => {
-  const [isBuffering, setIsBuffering] = useState11(bufferManager.buffering.current);
+  const [isBuffering, setIsBuffering] = useState12(bufferManager.buffering.current);
   useEffect9(() => {
     const onBuffer = () => {
       setIsBuffering(true);
@@ -3623,7 +3653,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   src
 }) => {
   const buffer = useBufferState();
-  const [isBuffering, setIsBuffering] = useState12(false);
+  const [isBuffering, setIsBuffering] = useState13(false);
   useEffect10(() => {
     let cleanupFns = [];
     const { current } = element;
@@ -3976,6 +4006,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     playing,
     isPostmounting
   ]);
+  const env = useRemotionEnvironment();
   useLayoutEffect5(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
@@ -4019,7 +4050,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
             onAutoPlayError,
             logLevel,
             mountTime,
-            reason: "player is playing but media tag is paused, and just seeked"
+            reason: "player is playing but media tag is paused, and just seeked",
+            isPlayer: env.isPlayer
           });
         }
       }
@@ -4066,7 +4098,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
         onAutoPlayError,
         logLevel,
         mountTime,
-        reason: `player is playing and ${reason}`
+        reason: `player is playing and ${reason}`,
+        isPlayer: env.isPlayer
       });
       if (!isVariableFpsVideo && playbackRate > 0) {
         bufferUntilFirstFrame(shouldBeTime);
@@ -4093,7 +4126,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     isPostmounting,
     pauseWhenBuffering,
     mountTime,
-    mediaTagCurrentTime
+    mediaTagCurrentTime,
+    env.isPlayer
   ]);
 }, MediaVolumeContext, SetMediaVolumeContext, useMediaVolumeState = () => {
   const { mediaVolume } = useContext21(MediaVolumeContext);
@@ -4108,7 +4142,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
 }, AudioForDevelopmentForwardRefFunction = (props, ref) => {
-  const [initialShouldPreMountAudioElements] = useState13(props.shouldPreMountAudioTags);
+  const [initialShouldPreMountAudioElements] = useState14(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
     throw new Error("Cannot change the behavior for pre-mounting audio tags dynamically.");
   }
@@ -4153,7 +4187,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const preloadedSrc = usePreload(src);
   const sequenceContext = useContext22(SequenceContext);
-  const [timelineId] = useState13(() => String(Math.random()));
+  const [timelineId] = useState14(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
@@ -4408,7 +4442,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   } = props;
   const { loop, ...propsOtherThanLoop } = props;
   const { fps } = useVideoConfig();
-  const environment = getRemotionEnvironment();
+  const environment = useRemotionEnvironment();
   const { durations, setDurations } = useContext24(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
@@ -4631,7 +4665,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
   const nonce = useNonce();
   const isPlayer = useIsPlayer();
-  const environment = getRemotionEnvironment();
+  const environment = useRemotionEnvironment();
   const canUseComposition = useContext26(CanUseRemotionHooks);
   if (canUseComposition) {
     if (isPlayer) {
@@ -4731,7 +4765,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   delayRenderTimeoutInMilliseconds,
   ...props2
 }, ref) => {
-  const [handle] = useState14(() => delayRender(`Loading <IFrame> with source ${props2.src}`, {
+  const [handle] = useState15(() => delayRender(`Loading <IFrame> with source ${props2.src}`, {
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
@@ -4901,10 +4935,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
   currentCompositionMetadata,
   audioLatencyHint
 }) => {
-  const [compositions, setCompositions] = useState15([]);
+  const [compositions, setCompositions] = useState16([]);
   const currentcompositionsRef = useRef14(compositions);
-  const [folders, setFolders] = useState15([]);
-  const [canvasContent, setCanvasContent] = useState15(null);
+  const [folders, setFolders] = useState16([]);
+  const [canvasContent, setCanvasContent] = useState16(null);
   const updateCompositions = useCallback13((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
@@ -5068,13 +5102,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   currentCompositionMetadata,
   audioLatencyHint
 }) => {
-  const [remotionRootId] = useState16(() => String(random(null)));
-  const [frame, setFrame] = useState16(() => getInitialFrameState());
-  const [playing, setPlaying] = useState16(false);
+  const [remotionRootId] = useState17(() => String(random(null)));
+  const [frame, setFrame] = useState17(() => getInitialFrameState());
+  const [playing, setPlaying] = useState17(false);
   const imperativePlaying = useRef15(false);
-  const [fastRefreshes, setFastRefreshes] = useState16(0);
-  const [manualRefreshes, setManualRefreshes] = useState16(0);
-  const [playbackRate, setPlaybackRate] = useState16(1);
+  const [fastRefreshes, setFastRefreshes] = useState17(0);
+  const [manualRefreshes, setManualRefreshes] = useState17(0);
+  const [playbackRate, setPlaybackRate] = useState17(1);
   const audioAndVideoTags = useRef15([]);
   if (typeof window !== "undefined") {
     useLayoutEffect8(() => {
@@ -5295,7 +5329,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { hidden } = useContext28(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState17(() => String(Math.random()));
+  const [timelineId] = useState18(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -5355,7 +5389,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useState17(() => playbackLogging({
+  useState18(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -5817,7 +5851,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const videoRef = useRef17(null);
   const sequenceContext = useContext30(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const environment = getRemotionEnvironment();
+  const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
@@ -6008,7 +6042,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   } = props2;
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
-  const environment = getRemotionEnvironment();
+  const environment = useRemotionEnvironment();
   const { durations, setDurations } = useContext31(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
@@ -6017,10 +6051,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback16((src, durationInSeconds) => {
+  const onDuration = useCallback17((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback16(() => {}, []);
+  const onVideoFrame = useCallback17(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -6277,8 +6311,8 @@ var init_esm = __esm(() => {
       };
     }, []);
     const resolvedSrc = resolveAnimatedImageSource(src);
-    const [imageDecoder, setImageDecoder] = useState5(null);
-    const [decodeHandle] = useState5(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+    const [imageDecoder, setImageDecoder] = useState6(null);
+    const [decodeHandle] = useState6(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
     const frame = useCurrentFrame();
     const { fps } = useVideoConfig();
     const currentTime = frame / playbackRate / fps;
@@ -6292,7 +6326,7 @@ var init_esm = __esm(() => {
       }
       return c;
     }, []);
-    const [initialLoopBehavior] = useState5(() => loopBehavior);
+    const [initialLoopBehavior] = useState6(() => loopBehavior);
     useEffect4(() => {
       const controller = new AbortController;
       decodeImage({
@@ -6580,7 +6614,7 @@ __export(exports_esm, {
   Lottie: () => Lottie
 });
 import lottie from "lottie-web";
-import { useEffect as useEffect26, useRef as useRef21, useState as useState21 } from "react";
+import { useEffect as useEffect26, useRef as useRef21, useState as useState24 } from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -6650,7 +6684,7 @@ var getLottieMetadata = (animationData) => {
   const containerRef = useRef21(null);
   const onAnimationLoadedRef = useRef21(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
-  const [handle] = useState21(() => delayRender("Waiting for Lottie animation to load"));
+  const [handle] = useState24(() => delayRender("Waiting for Lottie animation to load"));
   useEffect26(() => {
     return () => {
       continueRender(handle);
@@ -11705,10 +11739,10 @@ init_esm();
 import { jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs23, Fragment } from "react/jsx-runtime";
 import React5 from "react";
-import { useContext as useContext210, useEffect as useEffect23, useState as useState19 } from "react";
+import { useContext as useContext210, useEffect as useEffect23, useState as useState20 } from "react";
 import { useContext as useContext32, useEffect as useEffect24 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
-import { useCallback as useCallback17, useRef as useRef18 } from "react";
+import { useCallback as useCallback18, useRef as useRef18 } from "react";
 import { useEffect as useEffect32, useState as useState23 } from "react";
 import { useContext as useContext42, useEffect as useEffect62, useRef as useRef42 } from "react";
 import { useEffect as useEffect42 } from "react";
@@ -12859,7 +12893,7 @@ var useBufferStateEmitter = (emitter) => {
   }, [bufferManager, emitter]);
 };
 var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
-  const [emitter] = useState19(() => new PlayerEmitter);
+  const [emitter] = useState20(() => new PlayerEmitter);
   const bufferManager = useContext210(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
@@ -15748,11 +15782,11 @@ var Thumbnail = forward2(ThumbnailFn);
 
 // src/components/homepage/Demo/index.tsx
 import {
-  useCallback as useCallback33,
+  useCallback as useCallback35,
   useEffect as useEffect38,
   useMemo as useMemo41,
   useRef as useRef28,
-  useState as useState31
+  useState as useState33
 } from "react";
 
 // ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/extends.js
@@ -16527,21 +16561,21 @@ function useColorMode() {
 
 // src/components/homepage/Demo/Comp.tsx
 init_esm();
-import { useCallback as useCallback26, useEffect as useEffect30, useMemo as useMemo36, useState as useState27 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect30, useMemo as useMemo36, useState as useState28 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 init_esm();
 import {
   createRef as createRef4,
-  useCallback as useCallback24,
+  useCallback as useCallback26,
   useEffect as useEffect29,
   useRef as useRef25,
-  useState as useState26
+  useState as useState27
 } from "react";
 
 // src/components/homepage/Demo/Card.tsx
 init_esm();
-import { useCallback as useCallback20, useRef as useRef20 } from "react";
+import { useCallback as useCallback21, useRef as useRef20 } from "react";
 
 // src/components/homepage/Demo/math.ts
 var paddingAndMargin = 20;
@@ -16575,10 +16609,10 @@ var getIndexFromPosition = (clientX, clientY) => {
 };
 
 // src/components/homepage/Demo/Switcher.tsx
-import { useCallback as useCallback19 } from "react";
+import { useCallback as useCallback20 } from "react";
 import { jsx as jsx38, jsxs as jsxs11 } from "react/jsx-runtime";
 var Switcher = ({ type, theme, onTap }) => {
-  const onPointerDown = useCallback19((e) => {
+  const onPointerDown = useCallback20((e) => {
     e.stopPropagation();
     onTap();
   }, [onTap]);
@@ -16641,7 +16675,7 @@ var Card = ({
   const refToUse = refsToUse[index];
   const stopPrevious = useRef20([]);
   let newIndices = [...indices];
-  const applyPositions = useCallback20((except) => {
+  const applyPositions = useCallback21((except) => {
     let stopped = false;
     stopPrevious.current.forEach((s) => {
       s();
@@ -16714,7 +16748,7 @@ var Card = ({
       update();
     });
   }, [newIndices, onUpdate, positions, refsToUse, shouldBePositions]);
-  const onPointerDown = useCallback20((e) => {
+  const onPointerDown = useCallback21((e) => {
     e.currentTarget.setPointerCapture(e.pointerId);
     const cardLeft = refToUse.current.offsetLeft;
     const cardTop = refToUse.current.offsetTop;
@@ -16775,7 +16809,7 @@ var Card = ({
     }, { once: true });
     refToUse.current.addEventListener("pointermove", onMove);
   }, [applyPositions, index, positions, refToUse, shouldBePositions]);
-  const onPointerUp = useCallback20((e) => {
+  const onPointerUp = useCallback21((e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
   }, []);
   const { x, y } = getPositionForIndex(index);
@@ -16904,7 +16938,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 init_esm();
 import {
   forwardRef as forwardRef15,
-  useCallback as useCallback21,
+  useCallback as useCallback24,
   useEffect as useEffect28,
   useImperativeHandle as useImperativeHandle13,
   useRef as useRef23
@@ -16912,12 +16946,12 @@ import {
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
 init_esm();
-import { useEffect as useEffect27, useMemo as useMemo34, useState as useState24 } from "react";
+import { useEffect as useEffect27, useMemo as useMemo34, useState as useState26 } from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
-  const [data, setData] = useState24(null);
+  const [data, setData] = useState26(null);
   const { durationInFrames, fps } = useVideoConfig();
-  const [browser, setBrowser] = useState24(typeof document !== "undefined");
+  const [browser, setBrowser] = useState26(typeof document !== "undefined");
   const src = useMemo34(() => {
     if (emoji === "melting") {
       return "https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json";
@@ -16930,7 +16964,7 @@ var DisplayedEmoji = ({ emoji }) => {
     }
     throw new Error("Unknown emoji");
   }, [emoji]);
-  const [handle] = useState24(() => delayRender());
+  const [handle] = useState26(() => delayRender());
   useEffect27(() => {
     Promise.all([
       fetch(src).then((res) => res.json()),
@@ -17023,7 +17057,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
   const ref2 = useRef23(null);
   const ref3 = useRef23(null);
   const transforms = useRef23([-100, 0, 100]);
-  const onLeft = useCallback21(() => {
+  const onLeft = useCallback24(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -17034,7 +17068,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  const onRight = useCallback21(() => {
+  const onRight = useCallback24(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -17073,6 +17107,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
+  const env = useRemotionEnvironment();
   return /* @__PURE__ */ jsxs14(AbsoluteFill, {
     style: {
       justifyContent: "center",
@@ -17100,7 +17135,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
           whiteSpace: "nowrap",
           height: "100%"
         },
-        children: getRemotionEnvironment().isRendering ? /* @__PURE__ */ jsx46("div", {
+        children: env.isRendering ? /* @__PURE__ */ jsx46("div", {
           style: emojiStyle,
           children: /* @__PURE__ */ jsx46(DisplayedEmoji, {
             emoji: emojiIndex
@@ -17475,14 +17510,14 @@ var Cards = ({
   trending
 }) => {
   const container4 = useRef25(null);
-  const [refs] = useState26(() => {
+  const [refs] = useState27(() => {
     return new Array(4).fill(true).map(() => {
       return createRef4();
     });
   });
   const positions = useRef25(getInitialPositions());
   const shouldBePositions = useRef25(getInitialPositions());
-  const { isRendering } = getRemotionEnvironment();
+  const { isRendering } = useRemotionEnvironment();
   useEffect29(() => {
     const { current } = container4;
     if (!current) {
@@ -17500,11 +17535,11 @@ var Cards = ({
     };
   }, [onToggle]);
   const ref = useRef25(null);
-  const onLeft = useCallback24(() => {
+  const onLeft = useCallback26(() => {
     ref.current?.onRight();
     onRightPress();
   }, [onRightPress]);
-  const onRight = useCallback24(() => {
+  const onRight = useCallback26(() => {
     ref.current?.onLeft();
     onLeftPress();
   }, [onLeftPress]);
@@ -17573,8 +17608,8 @@ var HomepageVideoComp = ({
   onClickLeft,
   onClickRight
 }) => {
-  const [rerenders, setRerenders] = useState27(0);
-  const onUpdate = useCallback26((newIndices) => {
+  const [rerenders, setRerenders] = useState28(0);
+  const onUpdate = useCallback27((newIndices) => {
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
@@ -17644,7 +17679,7 @@ var DemoError = () => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import React34, { useCallback as useCallback27 } from "react";
+import React34, { useCallback as useCallback28 } from "react";
 import { z } from "zod";
 
 // src/components/homepage/Demo/DemoErrorIcon.tsx
@@ -18003,7 +18038,7 @@ var RenderButton = ({ renderData, onError }) => {
   const [state, setState] = React34.useState({
     type: "idle"
   });
-  const triggerRender = useCallback27(async () => {
+  const triggerRender = useCallback28(async () => {
     if (renderData === null) {
       return;
     }
@@ -18180,12 +18215,12 @@ var DragAndDropNudge = () => {
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
 init_esm();
-import { useCallback as useCallback29, useEffect as useEffect33, useMemo as useMemo40, useRef as useRef26, useState as useState29 } from "react";
+import { useCallback as useCallback30, useEffect as useEffect33, useMemo as useMemo40, useRef as useRef26, useState as useState30 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback28, useEffect as useEffect31, useMemo as useMemo39, useState as useState28 } from "react";
+import { useCallback as useCallback29, useEffect as useEffect31, useMemo as useMemo39, useState as useState29 } from "react";
 var useElementSize2 = (ref) => {
-  const [size, setSize] = useState28(null);
+  const [size, setSize] = useState29(null);
   const observer = useMemo39(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -18197,7 +18232,7 @@ var useElementSize2 = (ref) => {
       });
     });
   }, []);
-  const updateSize = useCallback28(() => {
+  const updateSize = useCallback29(() => {
     if (ref === null) {
       return;
     }
@@ -18262,7 +18297,7 @@ var findBodyInWhichDivIsLocated2 = (div) => {
   return current;
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
-  const [hovered, setHovered] = useState29(false);
+  const [hovered, setHovered] = useState30(false);
   useEffect33(() => {
     const { current } = ref;
     if (!current) {
@@ -18312,8 +18347,8 @@ var PlayerSeekBar2 = ({
   const containerRef = useRef26(null);
   const barHovered = useHoverState2(containerRef, false);
   const size = useElementSize2(containerRef.current);
-  const [playing, setPlaying] = useState29(false);
-  const [frame, setFrame] = useState29(0);
+  const [playing, setPlaying] = useState30(false);
+  const [frame, setFrame] = useState30(0);
   useEffect33(() => {
     const { current } = playerRef;
     if (!current) {
@@ -18345,11 +18380,11 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const [dragging, setDragging] = useState29({
+  const [dragging, setDragging] = useState30({
     dragging: false
   });
   const width2 = size?.width ?? 0;
-  const onPointerDown = useCallback29((e) => {
+  const onPointerDown = useCallback30((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -18363,7 +18398,7 @@ var PlayerSeekBar2 = ({
     });
     onSeekStart();
   }, [durationInFrames, width2, playerRef, playing, onSeekStart]);
-  const onPointerMove = useCallback29((e) => {
+  const onPointerMove = useCallback30((e) => {
     if (!size) {
       throw new Error("Player has no size");
     }
@@ -18374,7 +18409,7 @@ var PlayerSeekBar2 = ({
     const _frame = getFrameFromX2(e.clientX - posLeft, durationInFrames, size.width);
     playerRef.current.seekTo(_frame);
   }, [dragging.dragging, durationInFrames, playerRef, size]);
-  const onPointerUp = useCallback29(() => {
+  const onPointerUp = useCallback30(() => {
     setDragging({
       dragging: false
     });
@@ -18458,7 +18493,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback30, useEffect as useEffect35, useRef as useRef27, useState as useState30 } from "react";
+import { useCallback as useCallback31, useEffect as useEffect35, useRef as useRef27, useState as useState31 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx71 } from "react/jsx-runtime";
@@ -18516,8 +18551,8 @@ var IsMutedIcon = (props) => {
 // src/components/homepage/Demo/PlayerVolume.tsx
 import { jsx as jsx75 } from "react/jsx-runtime";
 var PlayerVolume = ({ playerRef }) => {
-  const [muted, setIsMuted] = useState30(() => playerRef.current?.isMuted() ?? true);
-  const [isHovered, setIsHovered] = useState30(false);
+  const [muted, setIsMuted] = useState31(() => playerRef.current?.isMuted() ?? true);
+  const [isHovered, setIsHovered] = useState31(false);
   const timerRef = useRef27(null);
   useEffect35(() => {
     const { current } = playerRef;
@@ -18539,7 +18574,7 @@ var PlayerVolume = ({ playerRef }) => {
       document.body.style.userSelect = "auto";
     }
   }, [isHovered]);
-  const onClick = useCallback30(() => {
+  const onClick = useCallback31(() => {
     if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
@@ -18577,7 +18612,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React38, { useCallback as useCallback31, useEffect as useEffect36 } from "react";
+import React38, { useCallback as useCallback33, useEffect as useEffect36 } from "react";
 import { jsx as jsx77 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -18613,7 +18648,7 @@ var PlayPauseButton = ({ playerRef }) => {
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const onToggle = useCallback31(() => {
+  const onToggle = useCallback33(() => {
     playerRef.current?.toggle();
   }, [playerRef]);
   const playPauseIconStyle = {
@@ -18806,12 +18841,12 @@ var playerWrapper = {
 };
 var Demo = () => {
   const { colorMode } = useColorMode();
-  const [data2, setData] = useState31(null);
+  const [data2, setData] = useState33(null);
   const ref = useRef28(null);
-  const [isFullscreen, setIsFullscreen] = useState31(false);
-  const [cardOrder, setCardOrder] = useState31([0, 1, 2, 3]);
-  const [emojiIndex, setEmojiIndex] = useState31(0);
-  const [error, setError] = useState31(false);
+  const [isFullscreen, setIsFullscreen] = useState33(false);
+  const [cardOrder, setCardOrder] = useState33([0, 1, 2, 3]);
+  const [emojiIndex, setEmojiIndex] = useState33(0);
+  const [error, setError] = useState33(false);
   useEffect38(() => {
     getDataAndProps().then((d) => {
       setData(d);
@@ -18833,7 +18868,7 @@ var Demo = () => {
       playerRef.removeEventListener("fullscreenchange", onFullscreenChange);
     };
   }, [data2]);
-  const updateCardOrder = useCallback33((newCardOrder) => {
+  const updateCardOrder = useCallback35((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
   const props = useMemo41(() => {
@@ -18855,7 +18890,7 @@ var Demo = () => {
       emojiIndex
     };
   }, [cardOrder, emojiIndex, colorMode, data2, updateCardOrder]);
-  const onError = useCallback33(() => {
+  const onError = useCallback35(() => {
     setError(true);
   }, []);
   return /* @__PURE__ */ jsxs33("div", {
@@ -18964,7 +18999,7 @@ import { forwardRef as forwardRef17, useEffect as useEffect40, useImperativeHand
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef16, useCallback as useCallback35, useEffect as useEffect39, useRef as useRef29, useState as useState33 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback36, useEffect as useEffect39, useRef as useRef29, useState as useState35 } from "react";
 import { jsx as jsx87 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef29(null);
@@ -18985,9 +19020,9 @@ var VideoPlayerWithControls = forwardRef16(({ playbackId, poster, currentTime, o
   const videoRef = useRef29(null);
   const metaRef = useCombinedRefs(ref, videoRef);
   const playerRef = useRef29(null);
-  const [playerInitTime] = useState33(Date.now());
-  const videoError = useCallback35((event) => onError(event), [onError]);
-  const onImageLoad = useCallback35((event) => {
+  const [playerInitTime] = useState35(Date.now());
+  const videoError = useCallback36((event) => onError(event), [onError]);
+  const onImageLoad = useCallback36((event) => {
     const [w, h] = [event.target.width, event.target.height];
     if (w && h) {
       onSize({ width: w, height: h });
@@ -19185,10 +19220,10 @@ var EditorStarterSection = () => {
 var EditorStarterSection_default = EditorStarterSection;
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect41, useState as useState35 } from "react";
+import { useEffect as useEffect41, useState as useState36 } from "react";
 import { jsx as jsx90, jsxs as jsxs36 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
-  const [dailyAvatars, setDailyAvatars] = useState35([]);
+  const [dailyAvatars, setDailyAvatars] = useState36([]);
   useEffect41(() => {
     const avatars = [
       "/img/freelancers/alex.jpeg",
@@ -19288,7 +19323,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect43, useState as useState36 } from "react";
+import { useEffect as useEffect43, useState as useState37 } from "react";
 import { jsx as jsx91, jsxs as jsxs37 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -19303,7 +19338,7 @@ var icon2 = {
   marginLeft: 10
 };
 var IfYouKnowReact = () => {
-  const [vid, setVid] = useState36("/img/compose.webm");
+  const [vid, setVid] = useState37("/img/compose.webm");
   useEffect43(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
@@ -19460,7 +19495,7 @@ var MoreVideoPowerSection = () => {
 };
 
 // src/components/homepage/NewsletterButton.tsx
-import { useCallback as useCallback36, useState as useState37 } from "react";
+import { useCallback as useCallback37, useState as useState38 } from "react";
 
 // src/components/homepage/Spacer.tsx
 import { jsx as jsx97 } from "react/jsx-runtime";
@@ -19473,10 +19508,10 @@ var Spacer = () => {
 // src/components/homepage/NewsletterButton.tsx
 import { jsx as jsx98, jsxs as jsxs39 } from "react/jsx-runtime";
 var NewsletterButton = () => {
-  const [email, setEmail] = useState37("");
-  const [submitting, setSubmitting] = useState37(false);
-  const [subscribed, setSubscribed] = useState37(false);
-  const handleSubmit = useCallback36(async (e) => {
+  const [email, setEmail] = useState38("");
+  const [submitting, setSubmitting] = useState38(false);
+  const [subscribed, setSubscribed] = useState38(false);
+  const handleSubmit = useCallback37(async (e) => {
     try {
       setSubmitting(true);
       e.preventDefault();
@@ -19553,7 +19588,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect45, useRef as useRef31, useState as useState38 } from "react";
+import { useEffect as useEffect45, useRef as useRef31, useState as useState39 } from "react";
 import { jsx as jsx99, jsxs as jsxs40 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
@@ -19561,7 +19596,7 @@ var icon3 = {
 };
 var ParameterizeAndEdit = () => {
   const ref = useRef31(null);
-  const [vid, setVid] = useState38("/img/editing-vp9-chrome.webm");
+  const [vid, setVid] = useState39("/img/editing-vp9-chrome.webm");
   useEffect45(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
@@ -19676,7 +19711,7 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect46, useRef as useRef33, useState as useState39 } from "react";
+import { useEffect as useEffect46, useRef as useRef33, useState as useState40 } from "react";
 import { jsx as jsx100, jsxs as jsxs41 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -19685,7 +19720,7 @@ var icon4 = {
 var RealMP4Videos = () => {
   const ref = useRef33(null);
   const videoRef = useRef33(null);
-  const [vid, setVid] = useState39("/img/render-progress.webm");
+  const [vid, setVid] = useState40("/img/render-progress.webm");
   useEffect46(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
@@ -19985,7 +20020,7 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useEffect as useEffect47, useRef as useRef35, useState as useState40 } from "react";
+import { useEffect as useEffect47, useRef as useRef35, useState as useState41 } from "react";
 import { jsx as jsx104, jsxs as jsxs45 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -20038,9 +20073,9 @@ var icon5 = {
   marginLeft: 10
 };
 var VideoAppsShowcase = () => {
-  const [activeTab, setActiveTab] = useState40(0);
-  const [isMuted, setIsMuted] = useState40(true);
-  const [isPlaying, setIsPlaying] = useState40(false);
+  const [activeTab, setActiveTab] = useState41(0);
+  const [isMuted, setIsMuted] = useState41(true);
+  const [isPlaying, setIsPlaying] = useState41(false);
   const videoRef = useRef35(null);
   const containerRef = useRef35(null);
   useEffect47(() => {
@@ -21323,7 +21358,7 @@ var ChooseTemplate = () => {
 };
 
 // src/components/homepage/GetStartedStrip.tsx
-import { useState as useState41 } from "react";
+import { useState as useState43 } from "react";
 
 // src/components/homepage/GitHubButton.tsx
 import { jsx as jsx130, jsxs as jsxs56 } from "react/jsx-runtime";
@@ -21358,7 +21393,7 @@ var GithubButton = () => {
 // src/components/homepage/GetStartedStrip.tsx
 import { jsx as jsx131, jsxs as jsxs57 } from "react/jsx-runtime";
 var GetStarted = () => {
-  const [clicked, setClicked] = useState41(null);
+  const [clicked, setClicked] = useState43(null);
   return /* @__PURE__ */ jsxs57("div", {
     className: "flex flex-col lg:flex-row items-center justify-center text-center w-full",
     children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/promo-pages",
-  "version": "4.0.341",
+  "version": "4.0.344",
   "publishConfig": {
     "access": "public"
   },
@@ -10,14 +10,14 @@
     "polished": "4.3.1",
     "zod": "3.22.3",
     "bun-plugin-tailwind": "0.0.15",
-    "@remotion/animated-emoji": "4.0.341",
-    "@remotion/player": "4.0.341",
-    "@remotion/lambda": "4.0.341",
-    "@remotion/shapes": "4.0.341",
-    "@remotion/lottie": "4.0.341",
-    "@remotion/paths": "4.0.341",
-    "create-video": "4.0.341",
-    "remotion": "4.0.341"
+    "@remotion/animated-emoji": "4.0.344",
+    "@remotion/lottie": "4.0.344",
+    "@remotion/lambda": "4.0.344",
+    "@remotion/player": "4.0.344",
+    "@remotion/shapes": "4.0.344",
+    "create-video": "4.0.344",
+    "@remotion/paths": "4.0.344",
+    "remotion": "4.0.344"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.1.0",
@@ -34,7 +34,7 @@
     "tailwind-merge": "2.5.2",
     "bun-plugin-tailwind": "0.0.13",
     "clsx": "2.1.1",
-    "@remotion/eslint-config-internal": "4.0.341"
+    "@remotion/eslint-config-internal": "4.0.344"
   },
   "repository": {
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"

package/src/components/homepage/Demo/Cards.tsx

@@ -6,7 +6,7 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
-import {AbsoluteFill, getRemotionEnvironment} from 'remotion';
+import {AbsoluteFill, useRemotionEnvironment} from 'remotion';
 import {Card} from './Card';
 import type {RemoteData} from './Comp';
 import {CurrentCountry} from './CurrentCountry';
@@ -47,7 +47,7 @@ export const Cards: React.FC<{
 
 	const positions = useRef(getInitialPositions());
 	const shouldBePositions = useRef(getInitialPositions());
-	const {isRendering} = getRemotionEnvironment();
+	const {isRendering} = useRemotionEnvironment();
 
 	useEffect(() => {
 		const {current} = container;

package/src/components/homepage/Demo/EmojiCard.tsx

@@ -6,7 +6,7 @@ import React, {
 	useImperativeHandle,
 	useRef,
 } from 'react';
-import {AbsoluteFill, getRemotionEnvironment} from 'remotion';
+import {AbsoluteFill, useRemotionEnvironment} from 'remotion';
 import {DisplayedEmoji} from './DisplayedEmoji';
 
 export type EmojiCardRef = {
@@ -141,6 +141,8 @@ const EmojiCardRefFn: React.ForwardRefRenderFunction<
 		});
 	}, []);
 
+	const env = useRemotionEnvironment();
+
 	return (
 		<AbsoluteFill
 			style={{
@@ -171,7 +173,7 @@ const EmojiCardRefFn: React.ForwardRefRenderFunction<
 					height: '100%',
 				}}
 			>
-				{getRemotionEnvironment().isRendering ? (
+				{env.isRendering ? (
 					<div style={emojiStyle}>
 						<DisplayedEmoji emoji={emojiIndex} />
 					</div>