@remotion/player 4.0.390 → 4.0.392

package/dist/cjs/use-buffer-state-emitter.js

@@ -8,7 +8,7 @@ const useBufferStateEmitter = (emitter) => {
     if (!bufferManager) {
         throw new Error('BufferingContextReact not found');
     }
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const clear1 = bufferManager.listenForBuffering(() => {
             bufferManager.buffering.current = true;
             emitter.dispatchWaiting({});

package/dist/esm/index.mjs

@@ -335,7 +335,7 @@ var PlayerEventEmitterContext = React.createContext(undefined);
 var ThumbnailEmitterContext = React.createContext(undefined);
 
 // src/EmitterProvider.tsx
-import { useContext as useContext2, useEffect as useEffect2, useState } from "react";
+import { useContext as useContext2, useEffect, useState } from "react";
 import { Internals as Internals3 } from "remotion";
 
 // src/event-emitter.ts
@@ -452,14 +452,14 @@ class ThumbnailEmitter {
 }
 
 // src/use-buffer-state-emitter.ts
-import { useContext, useEffect } from "react";
+import { useContext, useLayoutEffect } from "react";
 import { Internals as Internals2 } from "remotion";
 var useBufferStateEmitter = (emitter) => {
   const bufferManager = useContext(Internals2.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect(() => {
+  useLayoutEffect(() => {
     const clear1 = bufferManager.listenForBuffering(() => {
       bufferManager.buffering.current = true;
       emitter.dispatchWaiting({});
@@ -483,7 +483,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect2(() => {
+  useEffect(() => {
     if (currentPlaybackRate) {
       emitter.dispatchRateChange(currentPlaybackRate);
     }
@@ -509,10 +509,10 @@ var useFrameImperative = () => {
 };
 
 // src/use-hover-state.ts
-import { useEffect as useEffect3, useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState2(false);
-  useEffect3(() => {
+  useEffect2(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -552,11 +552,11 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 
 // src/use-playback.ts
-import { useContext as useContext4, useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useContext as useContext4, useEffect as useEffect5, useRef as useRef4 } from "react";
 import { Internals as Internals6 } from "remotion";
 
 // src/browser-mediasession.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect3 } from "react";
 
 // src/use-player.ts
 import { useCallback as useCallback2, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3 } from "react";
@@ -731,7 +731,7 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek } = usePlayer();
-  useEffect4(() => {
+  useEffect3(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -744,7 +744,7 @@ var useBrowserMediaSession = ({
       navigator.mediaSession.playbackState = "paused";
     }
   }, [browserMediaControlsBehavior.mode, playing]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -774,7 +774,7 @@ var useBrowserMediaSession = ({
     playbackRate,
     videoConfig
   ]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -864,7 +864,7 @@ var calculateNextFrame = ({
 };
 
 // src/is-backgrounded.ts
-import { useEffect as useEffect5, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
 var getIsBackgrounded = () => {
   if (typeof document === "undefined") {
     return false;
@@ -873,7 +873,7 @@ var getIsBackgrounded = () => {
 };
 var useIsBackgrounded = () => {
   const isBackgrounded = useRef3(getIsBackgrounded());
-  useEffect5(() => {
+  useEffect4(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
     };
@@ -910,7 +910,7 @@ var usePlayback = ({
     playbackRate,
     videoConfig: config
   });
-  useEffect6(() => {
+  useEffect5(() => {
     if (!config) {
       return;
     }
@@ -1011,7 +1011,7 @@ var usePlayback = ({
     getCurrentFrame,
     context
   ]);
-  useEffect6(() => {
+  useEffect5(() => {
     const interval = setInterval(() => {
       if (lastTimeUpdateEvent.current === getCurrentFrame()) {
         return;
@@ -1021,13 +1021,13 @@ var usePlayback = ({
     }, 250);
     return () => clearInterval(interval);
   }, [emitter, getCurrentFrame]);
-  useEffect6(() => {
+  useEffect5(() => {
     emitter.dispatchFrameUpdate({ frame });
   }, [emitter, frame]);
 };
 
 // src/utils/use-element-size.ts
-import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
 var elementSizeHooks = [];
 var updateAllElementsSizes = () => {
   for (const listener of elementSizeHooks) {
@@ -1112,7 +1112,7 @@ var useElementSize = (ref, options) => {
       };
     });
   }, [ref]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!observer) {
       return;
     }
@@ -1126,7 +1126,7 @@ var useElementSize = (ref, options) => {
       }
     };
   }, [observer, ref, updateSize]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!options.triggerOnWindowResize) {
       return;
     }
@@ -1135,7 +1135,7 @@ var useElementSize = (ref, options) => {
       window.removeEventListener("resize", updateSize);
     };
   }, [options.triggerOnWindowResize, updateSize]);
-  useEffect7(() => {
+  useEffect6(() => {
     elementSizeHooks.push(updateSize);
     return () => {
       elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
@@ -1152,9 +1152,9 @@ var useElementSize = (ref, options) => {
 // src/Player.tsx
 import {
   forwardRef as forwardRef2,
-  useEffect as useEffect14,
+  useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect,
+  useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo14,
   useRef as useRef11,
   useState as useState13
@@ -1167,7 +1167,7 @@ import React10, {
   forwardRef,
   useCallback as useCallback11,
   useContext as useContext6,
-  useEffect as useEffect13,
+  useEffect as useEffect12,
   useImperativeHandle,
   useMemo as useMemo12,
   useRef as useRef10,
@@ -1176,7 +1176,7 @@ import React10, {
 import { Internals as Internals11 } from "remotion";
 
 // src/PlayerControls.tsx
-import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef8, useState as useState10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useMemo as useMemo9, useRef as useRef8, useState as useState10 } from "react";
 
 // src/DefaultPlayPauseButton.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -1400,18 +1400,18 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 import {
   useCallback as useCallback6,
   useContext as useContext5,
-  useEffect as useEffect9,
+  useEffect as useEffect8,
   useMemo as useMemo5,
   useState as useState8
 } from "react";
 import { Internals as Internals8 } from "remotion";
 
 // src/utils/use-component-visible.ts
-import { useEffect as useEffect8, useRef as useRef6, useState as useState7 } from "react";
+import { useEffect as useEffect7, useRef as useRef6, useState as useState7 } from "react";
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
   const ref = useRef6(null);
-  useEffect8(() => {
+  useEffect7(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         setIsComponentVisible(false);
@@ -1498,7 +1498,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
   const { setPlaybackRate, playbackRate } = useContext5(Internals8.TimelineContext);
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
-  useEffect9(() => {
+  useEffect8(() => {
     const listener = (e) => {
       e.preventDefault();
       if (e.key === "ArrowUp") {
@@ -1630,7 +1630,7 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef7, useState as useState9 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef7, useState as useState9 } from "react";
 import { Internals as Internals9, interpolate } from "remotion";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
@@ -1719,7 +1719,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, pause, play]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -1994,17 +1994,17 @@ var Controls = ({
       opacity: Number(shouldShow)
     };
   }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (playButtonRef.current && spaceKeyToPlayOrPause) {
       playButtonRef.current.focus({
         preventScroll: true
       });
     }
   }, [playing, spaceKeyToPlayOrPause]);
-  useEffect11(() => {
+  useEffect10(() => {
     setSupportsFullscreen((typeof document !== "undefined" && (document.fullscreenEnabled || document.webkitFullscreenEnabled)) ?? false);
   }, []);
-  useEffect11(() => {
+  useEffect10(() => {
     if (shouldShowInitially === false) {
       return;
     }
@@ -2174,7 +2174,7 @@ class ErrorBoundary extends React8.Component {
 }
 
 // src/license-blacklist.tsx
-import React9, { useEffect as useEffect12 } from "react";
+import React9, { useEffect as useEffect11 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var getHashOfDomain = async () => {
   if (typeof window === "undefined") {
@@ -2210,7 +2210,7 @@ var DOMAIN_BLACKLIST = [
 var ran = false;
 var RenderWarningIfBlacklist = () => {
   const [unlicensed, setUnlicensed] = React9.useState(false);
-  useEffect12(() => {
+  useEffect11(() => {
     if (ran) {
       return;
     }
@@ -2221,7 +2221,7 @@ var RenderWarningIfBlacklist = () => {
       }
     }).catch(() => {});
   }, []);
-  useEffect12(() => {
+  useEffect11(() => {
     if (!unlicensed) {
       return;
     }
@@ -2436,13 +2436,13 @@ var PlayerUI = ({
     getCurrentFrame: player.getCurrentFrame,
     browserMediaControlsBehavior
   });
-  useEffect13(() => {
+  useEffect12(() => {
     if (hasPausedToResume && !player.playing) {
       setHasPausedToResume(false);
       player.play();
     }
   }, [hasPausedToResume, player]);
-  useEffect13(() => {
+  useEffect12(() => {
     const { current } = container;
     if (!current) {
       return;
@@ -2484,7 +2484,7 @@ var PlayerUI = ({
       document.exitFullscreen();
     }
   }, []);
-  useEffect13(() => {
+  useEffect12(() => {
     const { current } = container;
     if (!current) {
       return;
@@ -2522,7 +2522,7 @@ var PlayerUI = ({
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
   const initialScaleIgnored = useRef10(false);
-  useEffect13(() => {
+  useEffect12(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
       return;
@@ -2531,17 +2531,17 @@ var PlayerUI = ({
   }, [player.emitter, scale]);
   const { setMediaVolume, setMediaMuted } = useContext6(Internals11.SetMediaVolumeContext);
   const { mediaMuted, mediaVolume } = useContext6(Internals11.MediaVolumeContext);
-  useEffect13(() => {
+  useEffect12(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
   const isMuted = mediaMuted || mediaVolume === 0;
-  useEffect13(() => {
+  useEffect12(() => {
     player.emitter.dispatchMuteChange({
       isMuted
     });
   }, [player.emitter, isMuted]);
   const [showBufferIndicator, setShowBufferState] = useState11(false);
-  useEffect13(() => {
+  useEffect12(() => {
     let timeout = null;
     let stopped = false;
     const onBuffer = () => {
@@ -2713,7 +2713,7 @@ var PlayerUI = ({
     }
   }, [exitFullscreen, isFullscreen, requestFullscreen]);
   const { handlePointerDown, handleDoubleClick } = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
-  useEffect13(() => {
+  useEffect12(() => {
     if (shouldAutoplay) {
       player.play();
       setShouldAutoPlay(false);
@@ -3245,7 +3245,7 @@ var PlayerFn = ({
     throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
   }
   validatePlaybackRate(currentPlaybackRate);
-  useEffect14(() => {
+  useEffect13(() => {
     setCurrentPlaybackRate(playbackRate);
   }, [playbackRate]);
   useImperativeHandle2(ref, () => rootRef.current, []);
@@ -3277,7 +3277,7 @@ var PlayerFn = ({
     };
   }, [setFrame]);
   if (typeof window !== "undefined") {
-    useLayoutEffect(() => {
+    useLayoutEffect2(() => {
       Internals15.CSSUtils.injectCSS(Internals15.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
     }, [overrideInternalClassName]);
   }
@@ -3356,7 +3356,7 @@ var Player = forward(PlayerFn);
 import {
   forwardRef as forwardRef4,
   useImperativeHandle as useImperativeHandle4,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo17,
   useRef as useRef13,
   useState as useState14
@@ -3532,7 +3532,7 @@ var ThumbnailFn = ({
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
-    useLayoutEffect2(() => {
+    useLayoutEffect3(() => {
       window.remotion_isPlayer = true;
     }, []);
   }

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.390",
+	"version": "4.0.392",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.390"
+		"remotion": "4.0.392"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -49,7 +49,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.96.1",
 		"zod": "3.22.3",
-		"@remotion/eslint-config-internal": "4.0.390",
+		"@remotion/eslint-config-internal": "4.0.392",
 		"eslint": "9.19.0"
 	},
 	"keywords": [