@remotion/promo-pages 4.0.378 → 4.0.380

package/dist/Homepage.js

@@ -198,7 +198,7 @@ import {
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import React26 from "react";
-import { useEffect as useEffect17, useMemo as useMemo27, useState as useState18 } from "react";
+import { useContext as useContext32, useEffect as useEffect17, useMemo as useMemo27, useState as useState18 } from "react";
 import { createContext as createContext19, useContext as useContext31, useMemo as useMemo26 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { jsx as jsx28 } from "react/jsx-runtime";
@@ -206,7 +206,7 @@ import React28, { createContext as createContext20 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
-  useContext as useContext32,
+  useContext as useContext33,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo28,
@@ -215,7 +215,7 @@ import {
 import { jsx as jsx29 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef9,
-  useContext as useContext33,
+  useContext as useContext34,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo29,
@@ -233,10 +233,10 @@ import React34, { createContext as createContext21 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import React36 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext35 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext36 } from "react";
 import {
   forwardRef as forwardRef11,
-  useContext as useContext34,
+  useContext as useContext35,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle11,
   useLayoutEffect as useLayoutEffect11,
@@ -756,7 +756,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.378", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.380", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -3061,14 +3061,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return false;
   }
   return true;
-}, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint }) => {
+}, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint, component }) => {
   const audios = useRef5([]);
   const [initialNumberOfAudioTags] = useState11(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.");
   }
-  const compositionManager = useContext16(CompositionManager);
-  const component = compositionManager.compositions.find((c) => compositionManager.canvasContent?.type === "composition" ? c.id === compositionManager.canvasContent.compositionId : null);
   const logLevel = useLogLevel();
   const audioContext = useSingletonAudioContext(logLevel, audioLatencyHint);
   const refs = useMemo15(() => {
@@ -5432,6 +5430,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const logging = useMemo27(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
+  const compositionManager = useContext32(CompositionManager);
+  const composition = useMemo27(() => {
+    return compositionManager.compositions.find((c2) => compositionManager.canvasContent?.type === "composition" ? c2.id === compositionManager.canvasContent.compositionId : false);
+  }, [compositionManager.compositions, compositionManager.canvasContent]);
   return /* @__PURE__ */ jsx28(LogLevelContext.Provider, {
     value: logging,
     children: /* @__PURE__ */ jsx28(NonceContext.Provider, {
@@ -5449,6 +5451,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
                   children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
                     numberOfAudioTags,
                     audioLatencyHint,
+                    component: composition?.component ?? null,
                     children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
                       children: /* @__PURE__ */ jsx28(BufferingProvider, {
                         children
@@ -5532,9 +5535,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext32(SequenceContext);
+  const sequenceContext = useContext33(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext32(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -5735,7 +5738,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, [onVideoFrame, ref]);
 }, VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext33(SharedAudioContext);
+  const context = useContext34(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -5783,8 +5786,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext33(SequenceContext);
-  const { hidden } = useContext33(SequenceVisibilityToggleContext);
+  const parentSequence = useContext34(SequenceContext);
+  const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState20(() => String(Math.random()));
@@ -6463,13 +6466,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef17(null);
-  const sequenceContext = useContext34(SequenceContext);
+  const sequenceContext = useContext35(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
   const id = useMemo32(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -6668,7 +6671,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext35(DurationsContext);
+  const { durations, setDurations } = useContext36(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -20525,13 +20528,13 @@ import { jsx as jsx50, jsxs as jsxs14 } from "react/jsx-runtime";
 import { jsx as jsx213, jsxs as jsxs24, Fragment as Fragment6 } from "react/jsx-runtime";
 import React41 from "react";
 import { useContext as useContext210, useEffect as useEffect210, useState as useState35 } from "react";
-import { useContext as useContext40, useEffect as useEffect37 } from "react";
+import { useContext as useContext41, useEffect as useEffect37 } from "react";
 import { jsx as jsx310 } from "react/jsx-runtime";
 import { useCallback as useCallback27, useRef as useRef32 } from "react";
 import { useEffect as useEffect38, useState as useState210 } from "react";
 import { useContext as useContext42, useEffect as useEffect62, useRef as useRef42 } from "react";
 import { useEffect as useEffect42 } from "react";
-import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo42, useRef as useRef24, useState as useState36 } from "react";
+import { useCallback as useCallback28, useContext as useContext38, useMemo as useMemo42, useRef as useRef24, useState as useState36 } from "react";
 import { useEffect as useEffect52, useRef as useRef33 } from "react";
 import { useCallback as useCallback32, useEffect as useEffect72, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -21667,7 +21670,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext40(Internals.BufferingContextReact);
+  const bufferManager = useContext41(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -21750,20 +21753,20 @@ var usePlayer = () => {
   const playStart = useRef24(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
-  const audioContext = useContext37(Internals.SharedAudioContext);
-  const { audioAndVideoTags } = useContext37(Internals.TimelineContext);
+  const audioContext = useContext38(Internals.SharedAudioContext);
+  const { audioAndVideoTags } = useContext38(Internals.TimelineContext);
   const frameRef = useRef24(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
-  const emitter = useContext37(PlayerEventEmitterContext);
+  const emitter = useContext38(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
   const isFirstFrame = frame === 0;
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext37(Internals.BufferingContextReact);
+  const bufferingContext = useContext38(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -24032,6 +24035,7 @@ var SharedPlayerContexts = ({
                     children: /* @__PURE__ */ jsx133(Internals.SharedAudioContextProvider, {
                       numberOfAudioTags: numberOfSharedAudioTags,
                       audioLatencyHint,
+                      component,
                       children: /* @__PURE__ */ jsx133(Internals.BufferingProvider, {
                         children
                       })
@@ -25357,7 +25361,7 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
-import React43, { useContext as useContext41, useMemo as useMemo44 } from "react";
+import React43, { useContext as useContext43, useMemo as useMemo44 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var Context = React43.createContext(undefined);
 var ColorModeProvider = ({
@@ -25374,7 +25378,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext41(Context);
+  const context = useContext43(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/Homepage.js

@@ -198,7 +198,7 @@ import {
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import React26 from "react";
-import { useEffect as useEffect17, useMemo as useMemo27, useState as useState18 } from "react";
+import { useContext as useContext32, useEffect as useEffect17, useMemo as useMemo27, useState as useState18 } from "react";
 import { createContext as createContext19, useContext as useContext31, useMemo as useMemo26 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { jsx as jsx28 } from "react/jsx-runtime";
@@ -206,7 +206,7 @@ import React28, { createContext as createContext20 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
-  useContext as useContext32,
+  useContext as useContext33,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo28,
@@ -215,7 +215,7 @@ import {
 import { jsx as jsx29 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef9,
-  useContext as useContext33,
+  useContext as useContext34,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo29,
@@ -233,10 +233,10 @@ import React34, { createContext as createContext21 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import React36 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext35 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext36 } from "react";
 import {
   forwardRef as forwardRef11,
-  useContext as useContext34,
+  useContext as useContext35,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle11,
   useLayoutEffect as useLayoutEffect11,
@@ -756,7 +756,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.378", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.380", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -3061,14 +3061,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return false;
   }
   return true;
-}, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint }) => {
+}, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint, component }) => {
   const audios = useRef5([]);
   const [initialNumberOfAudioTags] = useState11(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.");
   }
-  const compositionManager = useContext16(CompositionManager);
-  const component = compositionManager.compositions.find((c) => compositionManager.canvasContent?.type === "composition" ? c.id === compositionManager.canvasContent.compositionId : null);
   const logLevel = useLogLevel();
   const audioContext = useSingletonAudioContext(logLevel, audioLatencyHint);
   const refs = useMemo15(() => {
@@ -5432,6 +5430,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const logging = useMemo27(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
+  const compositionManager = useContext32(CompositionManager);
+  const composition = useMemo27(() => {
+    return compositionManager.compositions.find((c2) => compositionManager.canvasContent?.type === "composition" ? c2.id === compositionManager.canvasContent.compositionId : false);
+  }, [compositionManager.compositions, compositionManager.canvasContent]);
   return /* @__PURE__ */ jsx28(LogLevelContext.Provider, {
     value: logging,
     children: /* @__PURE__ */ jsx28(NonceContext.Provider, {
@@ -5449,6 +5451,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
                   children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
                     numberOfAudioTags,
                     audioLatencyHint,
+                    component: composition?.component ?? null,
                     children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
                       children: /* @__PURE__ */ jsx28(BufferingProvider, {
                         children
@@ -5532,9 +5535,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext32(SequenceContext);
+  const sequenceContext = useContext33(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext32(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -5735,7 +5738,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, [onVideoFrame, ref]);
 }, VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext33(SharedAudioContext);
+  const context = useContext34(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -5783,8 +5786,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext33(SequenceContext);
-  const { hidden } = useContext33(SequenceVisibilityToggleContext);
+  const parentSequence = useContext34(SequenceContext);
+  const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState20(() => String(Math.random()));
@@ -6463,13 +6466,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef17(null);
-  const sequenceContext = useContext34(SequenceContext);
+  const sequenceContext = useContext35(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
   const id = useMemo32(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -6668,7 +6671,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext35(DurationsContext);
+  const { durations, setDurations } = useContext36(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -20525,13 +20528,13 @@ import { jsx as jsx50, jsxs as jsxs14 } from "react/jsx-runtime";
 import { jsx as jsx213, jsxs as jsxs24, Fragment as Fragment6 } from "react/jsx-runtime";
 import React41 from "react";
 import { useContext as useContext210, useEffect as useEffect210, useState as useState35 } from "react";
-import { useContext as useContext40, useEffect as useEffect37 } from "react";
+import { useContext as useContext41, useEffect as useEffect37 } from "react";
 import { jsx as jsx310 } from "react/jsx-runtime";
 import { useCallback as useCallback27, useRef as useRef32 } from "react";
 import { useEffect as useEffect38, useState as useState210 } from "react";
 import { useContext as useContext42, useEffect as useEffect62, useRef as useRef42 } from "react";
 import { useEffect as useEffect42 } from "react";
-import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo42, useRef as useRef24, useState as useState36 } from "react";
+import { useCallback as useCallback28, useContext as useContext38, useMemo as useMemo42, useRef as useRef24, useState as useState36 } from "react";
 import { useEffect as useEffect52, useRef as useRef33 } from "react";
 import { useCallback as useCallback32, useEffect as useEffect72, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -21667,7 +21670,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext40(Internals.BufferingContextReact);
+  const bufferManager = useContext41(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -21750,20 +21753,20 @@ var usePlayer = () => {
   const playStart = useRef24(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
-  const audioContext = useContext37(Internals.SharedAudioContext);
-  const { audioAndVideoTags } = useContext37(Internals.TimelineContext);
+  const audioContext = useContext38(Internals.SharedAudioContext);
+  const { audioAndVideoTags } = useContext38(Internals.TimelineContext);
   const frameRef = useRef24(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
-  const emitter = useContext37(PlayerEventEmitterContext);
+  const emitter = useContext38(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
   const isFirstFrame = frame === 0;
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext37(Internals.BufferingContextReact);
+  const bufferingContext = useContext38(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -24032,6 +24035,7 @@ var SharedPlayerContexts = ({
                     children: /* @__PURE__ */ jsx133(Internals.SharedAudioContextProvider, {
                       numberOfAudioTags: numberOfSharedAudioTags,
                       audioLatencyHint,
+                      component,
                       children: /* @__PURE__ */ jsx133(Internals.BufferingProvider, {
                         children
                       })
@@ -25357,7 +25361,7 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
-import React43, { useContext as useContext41, useMemo as useMemo44 } from "react";
+import React43, { useContext as useContext43, useMemo as useMemo44 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var Context = React43.createContext(undefined);
 var ColorModeProvider = ({
@@ -25374,7 +25378,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext41(Context);
+  const context = useContext43(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/design.js

@@ -198,7 +198,7 @@ import {
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import React26 from "react";
-import { useEffect as useEffect17, useMemo as useMemo27, useState as useState18 } from "react";
+import { useContext as useContext32, useEffect as useEffect17, useMemo as useMemo27, useState as useState18 } from "react";
 import { createContext as createContext19, useContext as useContext31, useMemo as useMemo26 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { jsx as jsx28 } from "react/jsx-runtime";
@@ -206,7 +206,7 @@ import React28, { createContext as createContext20 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
-  useContext as useContext32,
+  useContext as useContext33,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo28,
@@ -215,7 +215,7 @@ import {
 import { jsx as jsx29 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef9,
-  useContext as useContext33,
+  useContext as useContext34,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo29,
@@ -233,10 +233,10 @@ import React34, { createContext as createContext21 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import React36 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext35 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext36 } from "react";
 import {
   forwardRef as forwardRef11,
-  useContext as useContext34,
+  useContext as useContext35,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle11,
   useLayoutEffect as useLayoutEffect11,
@@ -756,7 +756,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.378", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.380", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -3061,14 +3061,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return false;
   }
   return true;
-}, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint }) => {
+}, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint, component }) => {
   const audios = useRef5([]);
   const [initialNumberOfAudioTags] = useState11(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.");
   }
-  const compositionManager = useContext16(CompositionManager);
-  const component = compositionManager.compositions.find((c) => compositionManager.canvasContent?.type === "composition" ? c.id === compositionManager.canvasContent.compositionId : null);
   const logLevel = useLogLevel();
   const audioContext = useSingletonAudioContext(logLevel, audioLatencyHint);
   const refs = useMemo15(() => {
@@ -5432,6 +5430,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const logging = useMemo27(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
+  const compositionManager = useContext32(CompositionManager);
+  const composition = useMemo27(() => {
+    return compositionManager.compositions.find((c2) => compositionManager.canvasContent?.type === "composition" ? c2.id === compositionManager.canvasContent.compositionId : false);
+  }, [compositionManager.compositions, compositionManager.canvasContent]);
   return /* @__PURE__ */ jsx28(LogLevelContext.Provider, {
     value: logging,
     children: /* @__PURE__ */ jsx28(NonceContext.Provider, {
@@ -5449,6 +5451,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
                   children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
                     numberOfAudioTags,
                     audioLatencyHint,
+                    component: composition?.component ?? null,
                     children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
                       children: /* @__PURE__ */ jsx28(BufferingProvider, {
                         children
@@ -5532,9 +5535,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext32(SequenceContext);
+  const sequenceContext = useContext33(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext32(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -5735,7 +5738,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, [onVideoFrame, ref]);
 }, VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext33(SharedAudioContext);
+  const context = useContext34(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -5783,8 +5786,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext33(SequenceContext);
-  const { hidden } = useContext33(SequenceVisibilityToggleContext);
+  const parentSequence = useContext34(SequenceContext);
+  const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState20(() => String(Math.random()));
@@ -6463,13 +6466,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef17(null);
-  const sequenceContext = useContext34(SequenceContext);
+  const sequenceContext = useContext35(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
   const id = useMemo32(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -6668,7 +6671,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext35(DurationsContext);
+  const { durations, setDurations } = useContext36(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }