@remotion/promo-pages 4.0.322 → 4.0.324

package/.turbo/turbo-make.log

@@ -1,8 +1,8 @@
 
 
-> @remotion/promo-pages@4.0.322 make /Users/jonathanburger/remotion/packages/promo-pages
+> @remotion/promo-pages@4.0.324 make /Users/jonathanburger/remotion/packages/promo-pages
 > bun --env-file=../.env.bundle bundle.ts
 
 ≈ tailwindcss v4.1.1
 
-Done in 108ms
+Done in 109ms

package/dist/Homepage.js

@@ -735,7 +735,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.322", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.324", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -3127,39 +3127,41 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
   const { audioContext } = sharedAudioContext;
-  useLayoutEffect3(() => {
-    if (!audioContext) {
-      return;
-    }
-    if (!mediaRef.current) {
-      return;
-    }
-    if (!shouldUseWebAudioApi) {
-      return;
-    }
-    if (mediaRef.current.playbackRate !== 1 && isSafari()) {
-      warnSafariOnce(logLevel);
-      return;
-    }
-    if (!source) {
-      return;
-    }
-    const gainNode = new GainNode(audioContext, {
-      gain: currentVolumeRef.current
-    });
-    source.attemptToConnect();
-    source.get().connect(gainNode);
-    gainNode.connect(audioContext.destination);
-    audioStuffRef.current = {
-      gainNode
-    };
-    Log.trace(logLevel, `Starting to amplify ${mediaRef.current?.src}. Gain = ${currentVolumeRef.current}, playbackRate = ${mediaRef.current?.playbackRate}`);
-    return () => {
-      audioStuffRef.current = null;
-      gainNode.disconnect();
-      source.get().disconnect();
-    };
-  }, [logLevel, mediaRef, audioContext, source, shouldUseWebAudioApi]);
+  if (typeof window !== "undefined") {
+    useLayoutEffect3(() => {
+      if (!audioContext) {
+        return;
+      }
+      if (!mediaRef.current) {
+        return;
+      }
+      if (!shouldUseWebAudioApi) {
+        return;
+      }
+      if (mediaRef.current.playbackRate !== 1 && isSafari()) {
+        warnSafariOnce(logLevel);
+        return;
+      }
+      if (!source) {
+        return;
+      }
+      const gainNode = new GainNode(audioContext, {
+        gain: currentVolumeRef.current
+      });
+      source.attemptToConnect();
+      source.get().connect(gainNode);
+      gainNode.connect(audioContext.destination);
+      audioStuffRef.current = {
+        gainNode
+      };
+      Log.trace(logLevel, `Starting to amplify ${mediaRef.current?.src}. Gain = ${currentVolumeRef.current}, playbackRate = ${mediaRef.current?.playbackRate}`);
+      return () => {
+        audioStuffRef.current = null;
+        gainNode.disconnect();
+        source.get().disconnect();
+      };
+    }, [logLevel, mediaRef, audioContext, source, shouldUseWebAudioApi]);
+  }
   if (audioStuffRef.current) {
     const valueToSet = volume;
     if (!isApproximatelyTheSame(audioStuffRef.current.gainNode.gain.value, valueToSet)) {
@@ -3402,17 +3404,19 @@ Check that all your Remotion packages are on the same version. If your dependenc
       });
     }
   }, [blocks]);
-  useLayoutEffect4(() => {
-    if (blocks.length === 0) {
-      onResumeCallbacks.forEach((c) => c());
-      playbackLogging({
-        logLevel,
-        message: "Player is exiting buffer state",
-        mountTime,
-        tag: "player"
-      });
-    }
-  }, [blocks]);
+  if (typeof window !== "undefined") {
+    useLayoutEffect4(() => {
+      if (blocks.length === 0) {
+        onResumeCallbacks.forEach((c) => c());
+        playbackLogging({
+          logLevel,
+          message: "Player is exiting buffer state",
+          mountTime,
+          tag: "player"
+        });
+      }
+    }, [blocks]);
+  }
   return useMemo16(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
@@ -8076,7 +8080,7 @@ var Counter = ({
         children: [
           /* @__PURE__ */ jsx("button", {
             type: "button",
-            className: "border-0 border-l-2 border-l-solid border-b-2 flex-1 border-text",
+            className: "border-0 border-l-2 border-l-solid border-b-2 flex-1 border-text border-b-[var(--box-stroke)] border-l-[var(--box-stroke)]",
             style: {
               ...buttonContainer
             },
@@ -8087,7 +8091,7 @@ var Counter = ({
           }),
           /* @__PURE__ */ jsx("button", {
             type: "button",
-            className: "border-0 border-l-2 border-l-solid flex-1 border-text",
+            className: "border-0 border-l-2 border-l-solid flex-1 border-text  border-l-[var(--box-stroke)]",
             style: {
               ...buttonContainer
             },
@@ -12537,14 +12541,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,
@@ -12562,9 +12575,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,
@@ -13255,8 +13278,8 @@ var useElementSize = (ref, options) => {
         setSize(null);
         return;
       }
-      const probableCssParentScale = contentRect.width === 0 || contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
-      const width = options.shouldApplyCssTransforms ? newSize[0].width : newSize[0].width * (1 / probableCssParentScale);
+      const probableCssParentScale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
+      const width = options.shouldApplyCssTransforms && probableCssParentScale > 0 ? newSize[0].width : newSize[0].width * (1 / probableCssParentScale);
       const height = options.shouldApplyCssTransforms ? newSize[0].height : newSize[0].height * (1 / probableCssParentScale);
       setSize((prevState) => {
         const isSame = prevState && prevState.width === width && prevState.height === height && prevState.left === newSize[0].x && prevState.top === newSize[0].y && prevState.windowSize.height === window.innerHeight && prevState.windowSize.width === window.innerWidth;
@@ -14751,13 +14774,12 @@ var PlayerUI = ({
   }, [config, layout, overflowVisible, scale]);
   const containerStyle3 = useMemo122(() => {
     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 = useCallback112((error) => {
@@ -15450,13 +15472,12 @@ var ThumbnailUI = ({
   }, [config, layout, overflowVisible, scale]);
   const containerStyle3 = useMemo162(() => {
     return calculateContainerStyle({
-      canvasSize,
       config,
       layout,
       scale,
       overflowVisible
     });
-  }, [canvasSize, config, layout, overflowVisible, scale]);
+  }, [config, layout, overflowVisible, scale]);
   const onError = useCallback132((error) => {
     thumbnail.emitter.dispatchError(error);
   }, [thumbnail.emitter]);

package/dist/homepage/Pricing.js

@@ -1435,7 +1435,7 @@ var Counter = ({
         children: [
           /* @__PURE__ */ jsx("button", {
             type: "button",
-            className: "border-0 border-l-2 border-l-solid border-b-2 flex-1 border-text",
+            className: "border-0 border-l-2 border-l-solid border-b-2 flex-1 border-text border-b-[var(--box-stroke)] border-l-[var(--box-stroke)]",
             style: {
               ...buttonContainer
             },
@@ -1446,7 +1446,7 @@ var Counter = ({
           }),
           /* @__PURE__ */ jsx("button", {
             type: "button",
-            className: "border-0 border-l-2 border-l-solid flex-1 border-text",
+            className: "border-0 border-l-2 border-l-solid flex-1 border-text  border-l-[var(--box-stroke)]",
             style: {
               ...buttonContainer
             },

package/dist/tailwind.css

@@ -523,9 +523,15 @@
   .border-r-transparent {
     border-right-color: transparent;
   }
+  .border-b-\[var\(--box-stroke\)\] {
+    border-bottom-color: var(--box-stroke);
+  }
   .border-b-transparent {
     border-bottom-color: transparent;
   }
+  .border-l-\[var\(--box-stroke\)\] {
+    border-left-color: var(--box-stroke);
+  }
   .border-l-transparent {
     border-left-color: transparent;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/promo-pages",
-  "version": "4.0.322",
+  "version": "4.0.324",
   "publishConfig": {
     "access": "public"
   },
@@ -10,14 +10,14 @@
     "polished": "4.3.1",
     "zod": "3.22.3",
     "bun-plugin-tailwind": "0.0.15",
-    "@remotion/animated-emoji": "4.0.322",
-    "@remotion/lambda": "4.0.322",
-    "@remotion/lottie": "4.0.322",
-    "@remotion/paths": "4.0.322",
-    "@remotion/player": "4.0.322",
-    "@remotion/shapes": "4.0.322",
-    "remotion": "4.0.322",
-    "create-video": "4.0.322"
+    "@remotion/animated-emoji": "4.0.324",
+    "@remotion/lottie": "4.0.324",
+    "@remotion/shapes": "4.0.324",
+    "@remotion/player": "4.0.324",
+    "create-video": "4.0.324",
+    "remotion": "4.0.324",
+    "@remotion/lambda": "4.0.324",
+    "@remotion/paths": "4.0.324"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.1.0",
@@ -34,7 +34,7 @@
     "tailwind-merge": "2.5.2",
     "bun-plugin-tailwind": "0.0.13",
     "clsx": "2.1.1",
-    "@remotion/eslint-config-internal": "4.0.322"
+    "@remotion/eslint-config-internal": "4.0.324"
   },
   "repository": {
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"

package/src/components/homepage/Counter.tsx

@@ -83,7 +83,7 @@ export const Counter: React.FC<CounterProps> = ({
 
 					const inputValue = parseInt(e.target.value, 10);
 					const validValue = Math.max(inputValue, minCount);
-					
+
 					// For steps > 1, round to the nearest valid step
 					if (step > 1) {
 						const roundedValue = Math.round(validValue / step) * step;
@@ -96,7 +96,7 @@ export const Counter: React.FC<CounterProps> = ({
 			<div className="flex flex-col ml-3 h-full">
 				<button
 					type="button"
-					className="border-0 border-l-2 border-l-solid border-b-2 flex-1 border-text"
+					className="border-0 border-l-2 border-l-solid border-b-2 flex-1 border-text border-b-[var(--box-stroke)] border-l-[var(--box-stroke)]"
 					style={{
 						...buttonContainer,
 					}}
@@ -106,7 +106,7 @@ export const Counter: React.FC<CounterProps> = ({
 				</button>
 				<button
 					type="button"
-					className="border-0 border-l-2 border-l-solid flex-1 border-text"
+					className="border-0 border-l-2 border-l-solid flex-1 border-text  border-l-[var(--box-stroke)]"
 					style={{
 						...buttonContainer,
 					}}