@remotion/player 4.0.322 → 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/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,
@@ -2649,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) => {
@@ -3400,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.322",
+  "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.322"
+    "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.322"
+    "@remotion/eslint-config-internal": "4.0.323"
   },
   "keywords": [
     "remotion",