@remotion/player 4.0.321 → 4.0.323

package/dist/cjs/PlayerUI.js

@@ -338,13 +338,12 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     }, [config, layout, overflowVisible, scale]);
     const containerStyle = (0, react_1.useMemo)(() => {
         return (0, calculate_scale_js_1.calculateContainerStyle)({
-            canvasSize,
             config,
             layout,
             scale,
             overflowVisible,
         });
-    }, [canvasSize, config, layout, overflowVisible, scale]);
+    }, [config, layout, overflowVisible, scale]);
     const playerPause = player.pause;
     const playerDispatchError = player.emitter.dispatchError;
     const onError = (0, react_1.useCallback)((error) => {

package/dist/cjs/ThumbnailUI.js

@@ -93,13 +93,12 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
     }, [config, layout, overflowVisible, scale]);
     const containerStyle = (0, react_1.useMemo)(() => {
         return (0, calculate_scale_js_1.calculateContainerStyle)({
-            canvasSize,
             config,
             layout,
             scale,
             overflowVisible,
         });
-    }, [canvasSize, config, layout, overflowVisible, scale]);
+    }, [config, layout, overflowVisible, scale]);
     const onError = (0, react_1.useCallback)((error) => {
         // Pay attention to `this context`
         thumbnail.emitter.dispatchError(error);

package/dist/cjs/calculate-scale.d.ts

@@ -20,9 +20,8 @@ export declare const calculateOuterStyle: ({ config, style, canvasSize, overflow
     overflowVisible: boolean;
     layout: Layout | null;
 }) => React.CSSProperties;
-export declare const calculateContainerStyle: ({ config, canvasSize, layout, scale, overflowVisible, }: {
+export declare const calculateContainerStyle: ({ config, layout, scale, overflowVisible, }: {
     config: VideoConfig | null;
-    canvasSize: Size | null;
     layout: Layout | null;
     scale: number;
     overflowVisible: boolean;
@@ -38,9 +37,18 @@ export declare const calculateOuter: ({ layout, scale, config, overflowVisible,
     readonly display?: undefined;
     readonly flexDirection?: undefined;
     readonly position?: undefined;
+    readonly overflow?: undefined;
+    readonly left?: undefined;
+    readonly top?: undefined;
+} | {
+    readonly width: number;
+    readonly height: number;
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly position: "absolute";
+    readonly overflow: "hidden" | "visible";
     readonly left?: undefined;
     readonly top?: undefined;
-    readonly overflow?: undefined;
 } | {
     readonly width: number;
     readonly height: number;

package/dist/cjs/calculate-scale.js

@@ -45,10 +45,20 @@ const calculateOuterStyle = ({ config, style, canvasSize, overflowVisible, layou
     };
 };
 exports.calculateOuterStyle = calculateOuterStyle;
-const calculateContainerStyle = ({ config, canvasSize, layout, scale, overflowVisible, }) => {
-    if (!config || !canvasSize || !layout) {
+const calculateContainerStyle = ({ config, layout, scale, overflowVisible, }) => {
+    if (!config) {
         return {};
     }
+    if (!layout) {
+        return {
+            position: 'absolute',
+            width: config.width,
+            height: config.height,
+            display: 'flex',
+            transform: `scale(${scale})`,
+            overflow: overflowVisible ? 'visible' : 'hidden',
+        };
+    }
     return {
         position: 'absolute',
         width: config.width,
@@ -62,9 +72,19 @@ const calculateContainerStyle = ({ config, canvasSize, layout, scale, overflowVi
 };
 exports.calculateContainerStyle = calculateContainerStyle;
 const calculateOuter = ({ layout, scale, config, overflowVisible, }) => {
-    if (!layout || !config) {
+    if (!config) {
         return {};
     }
+    if (!layout) {
+        return {
+            width: config.width * scale,
+            height: config.height * scale,
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'absolute',
+            overflow: overflowVisible ? 'visible' : 'hidden',
+        };
+    }
     const { centerX, centerY } = layout;
     return {
         width: config.width * scale,

package/dist/cjs/error-boundary.d.ts

@@ -15,5 +15,5 @@ export declare class ErrorBoundary extends React.Component<{
         hasError: Error;
     };
     componentDidCatch(error: Error): void;
-    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }

package/dist/cjs/use-player.js

@@ -4,7 +4,6 @@ exports.usePlayer = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const emitter_context_js_1 = require("./emitter-context.js");
-const use_frame_imperative_js_1 = require("./use-frame-imperative.js");
 const usePlayer = () => {
     var _a;
     const [playing, setPlaying, imperativePlaying] = remotion_1.Internals.Timeline.usePlayingState();
@@ -136,7 +135,6 @@ const usePlayer = () => {
             };
         });
     }, [videoId, imperativePlaying, lastFrame, setFrame]);
-    const getCurrentFrame = (0, use_frame_imperative_js_1.useFrameImperative)();
     const toggle = (0, react_1.useCallback)((e) => {
         if (imperativePlaying.current) {
             pause();
@@ -156,12 +154,11 @@ const usePlayer = () => {
             pause,
             seek,
             isFirstFrame,
-            getCurrentFrame,
+            getCurrentFrame: () => frameRef.current,
             isPlaying: () => imperativePlaying.current,
             isBuffering: () => buffering.current,
             pauseAndReturnToPlayStart,
             hasPlayed,
-            remotionInternal_currentFrameRef: frameRef,
             toggle,
         };
     }, [
@@ -169,7 +166,6 @@ const usePlayer = () => {
         emitter,
         frameBack,
         frameForward,
-        getCurrentFrame,
         hasPlayed,
         imperativePlaying,
         isFirstFrame,

package/dist/esm/index.mjs

@@ -269,14 +269,23 @@ var calculateOuterStyle = ({
 };
 var calculateContainerStyle = ({
   config,
-  canvasSize,
   layout,
   scale,
   overflowVisible
 }) => {
-  if (!config || !canvasSize || !layout) {
+  if (!config) {
     return {};
   }
+  if (!layout) {
+    return {
+      position: "absolute",
+      width: config.width,
+      height: config.height,
+      display: "flex",
+      transform: `scale(${scale})`,
+      overflow: overflowVisible ? "visible" : "hidden"
+    };
+  }
   return {
     position: "absolute",
     width: config.width,
@@ -294,9 +303,19 @@ var calculateOuter = ({
   config,
   overflowVisible
 }) => {
-  if (!layout || !config) {
+  if (!config) {
     return {};
   }
+  if (!layout) {
+    return {
+      width: config.width * scale,
+      height: config.height * scale,
+      display: "flex",
+      flexDirection: "column",
+      position: "absolute",
+      overflow: overflowVisible ? "visible" : "hidden"
+    };
+  }
   const { centerX, centerY } = layout;
   return {
     width: config.width * scale,
@@ -661,7 +680,6 @@ var usePlayer = () => {
       };
     });
   }, [videoId, imperativePlaying, lastFrame, setFrame]);
-  const getCurrentFrame = useFrameImperative();
   const toggle = useCallback2((e) => {
     if (imperativePlaying.current) {
       pause();
@@ -680,12 +698,11 @@ var usePlayer = () => {
       pause,
       seek,
       isFirstFrame,
-      getCurrentFrame,
+      getCurrentFrame: () => frameRef.current,
       isPlaying: () => imperativePlaying.current,
       isBuffering: () => buffering.current,
       pauseAndReturnToPlayStart,
       hasPlayed,
-      remotionInternal_currentFrameRef: frameRef,
       toggle
     };
   }, [
@@ -693,7 +710,6 @@ var usePlayer = () => {
     emitter,
     frameBack,
     frameForward,
-    getCurrentFrame,
     hasPlayed,
     imperativePlaying,
     isFirstFrame,
@@ -2652,13 +2668,12 @@ var PlayerUI = ({
   }, [config, layout, overflowVisible, scale]);
   const containerStyle3 = useMemo12(() => {
     return calculateContainerStyle({
-      canvasSize,
       config,
       layout,
       scale,
       overflowVisible
     });
-  }, [canvasSize, config, layout, overflowVisible, scale]);
+  }, [config, layout, overflowVisible, scale]);
   const playerPause = player.pause;
   const playerDispatchError = player.emitter.dispatchError;
   const onError = useCallback11((error) => {
@@ -3403,13 +3418,12 @@ var ThumbnailUI = ({
   }, [config, layout, overflowVisible, scale]);
   const containerStyle3 = useMemo16(() => {
     return calculateContainerStyle({
-      canvasSize,
       config,
       layout,
       scale,
       overflowVisible
     });
-  }, [canvasSize, config, layout, overflowVisible, scale]);
+  }, [config, layout, overflowVisible, scale]);
   const onError = useCallback13((error) => {
     thumbnail.emitter.dispatchError(error);
   }, [thumbnail.emitter]);

package/package.json

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