@remotion/player 3.2.2 → 3.2.6

package/dist/Player.js

@@ -13,7 +13,6 @@ const player_css_classname_1 = require("./player-css-classname");
 const PlayerUI_1 = __importDefault(require("./PlayerUI"));
 const validate_playbackrate_1 = require("./utils/validate-playbackrate");
 const volume_persistance_1 = require("./volume-persistance");
-remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`, '#fff'));
 const componentOrNullIfLazy = (props) => {
     if ('component' in props) {
         return props.component;
@@ -179,6 +178,10 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
+    (0, react_1.useLayoutEffect)(() => {
+        // Inject CSS only on client, and also only after the Player has hydrated
+        remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`, '#fff'));
+    }, []);
     return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                                             ? clickToPlay
                                             : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined }) }) }) }) }) }) }) }) }));

package/dist/PlayerSeekBar.js

@@ -34,6 +34,13 @@ const barBackground = {
     width: '100%',
     borderRadius: BAR_HEIGHT / 2,
 };
+const findBodyInWhichDivIsLocated = (div) => {
+    let current = div;
+    while (current.parentElement) {
+        current = current.parentElement;
+    }
+    return current;
+};
 const PlayerSeekBar = ({ durationInFrames }) => {
     const containerRef = (0, react_1.useRef)(null);
     const barHovered = (0, use_hover_state_1.useHoverState)(containerRef);
@@ -87,11 +94,12 @@ const PlayerSeekBar = ({ durationInFrames }) => {
         if (!dragging.dragging) {
             return;
         }
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
+        const body = findBodyInWhichDivIsLocated(containerRef.current);
+        body.addEventListener('pointermove', onPointerMove);
+        body.addEventListener('pointerup', onPointerUp);
         return () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
+            body.removeEventListener('pointermove', onPointerMove);
+            body.removeEventListener('pointerup', onPointerUp);
         };
     }, [dragging.dragging, onPointerMove, onPointerUp]);
     const knobStyle = (0, react_1.useMemo)(() => {

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CallbackListener, EventTypes } from './event-emitter';
 import { PlayerEmitter } from './event-emitter';
 export { ErrorFallback, Player } from './Player';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/player",
-	"version": "3.2.2",
+	"version": "3.2.6",
 	"description": "Remotion Player",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -28,7 +28,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "3.2.2"
+		"remotion": "3.2.6"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -63,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8e5f2d05adf7ddd3824ea734fa888b4b4761f364"
+	"gitHead": "9ecc20c6e7cea22c6a011b60d618ae42349ea19d"
 }