@remotion/promo-pages 4.0.305 → 4.0.306

package/.turbo/turbo-make.log

@@ -1,8 +1,8 @@
 
 
-> @remotion/promo-pages@4.0.305 make /Users/jonathanburger/remotion/packages/promo-pages
+> @remotion/promo-pages@4.0.306 make /Users/jonathanburger/remotion/packages/promo-pages
 > bun --env-file=../.env.bundle bundle.ts
 
 ≈ tailwindcss v4.1.1
 
-Done in 33ms
+Done in 35ms

package/dist/Homepage.js

@@ -5236,7 +5236,7 @@ var useIsPlayer = () => {
 function truthy(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.305";
+var VERSION = "4.0.306";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -7488,9 +7488,6 @@ var getCrossOriginValue = ({
   if (requestsVideoFrame) {
     return "anonymous";
   }
-  if (!getRemotionEnvironment().isRendering) {
-    return "anonymous";
-  }
   return;
 };
 var LogLevelContext = createContext14({
@@ -7991,7 +7988,8 @@ var useVolume = ({
   mediaRef,
   volume,
   logLevel,
-  source
+  source,
+  shouldUseWebAudioApi
 }) => {
   const audioStuffRef = useRef6(null);
   const currentVolumeRef = useRef6(volume);
@@ -8008,6 +8006,9 @@ var useVolume = ({
     if (!mediaRef.current) {
       return;
     }
+    if (!shouldUseWebAudioApi) {
+      return;
+    }
     if (mediaRef.current.playbackRate !== 1 && isSafari()) {
       warnSafariOnce(logLevel);
       return;
@@ -8030,7 +8031,7 @@ var useVolume = ({
       gainNode.disconnect();
       source.get().disconnect();
     };
-  }, [logLevel, mediaRef, audioContext, source]);
+  }, [logLevel, mediaRef, audioContext, source, shouldUseWebAudioApi]);
   if (audioStuffRef.current) {
     const valueToSet = volume;
     if (!isApproximatelyTheSame(audioStuffRef.current.gainNode.gain.value, valueToSet)) {
@@ -8038,7 +8039,9 @@ var useVolume = ({
       Log.trace(logLevel, `Setting gain to ${valueToSet} for ${mediaRef.current?.src}`);
     }
   }
-  if (mediaRef.current && isSafari() && mediaRef.current?.playbackRate !== 1 && !isApproximatelyTheSame(volume, mediaRef.current?.volume)) {
+  const safariCase = isSafari() && mediaRef.current && mediaRef.current?.playbackRate !== 1;
+  const shouldUseTraditionalVolume = safariCase || !shouldUseWebAudioApi;
+  if (shouldUseTraditionalVolume && mediaRef.current && !isApproximatelyTheSame(volume, mediaRef.current?.volume)) {
     mediaRef.current.volume = Math.min(volume, 1);
   }
   return audioStuffRef;
@@ -9095,6 +9098,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     toneFrequency,
+    useWebAudioApi,
     ...nativeProps
   } = props;
   const _propsValid = true;
@@ -9117,11 +9121,16 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume,
     mediaVolume
   });
+  const crossOriginValue = getCrossOriginValue({
+    crossOrigin,
+    requestsVideoFrame: false
+  });
   const propsToPass = useMemo20(() => {
     return {
       muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
       src: preloadedSrc,
       loop: _remotionInternalNativeLoopPassed,
+      crossOrigin: crossOriginValue,
       ...nativeProps
     };
   }, [
@@ -9131,7 +9140,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     muted,
     nativeProps,
     preloadedSrc,
-    userPreferredVolume
+    userPreferredVolume,
+    crossOriginValue
   ]);
   const id = useMemo20(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
@@ -9176,7 +9186,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     logLevel,
     mediaRef: audioRef,
     source: mediaElementSourceNode,
-    volume: userPreferredVolume
+    volume: userPreferredVolume,
+    shouldUseWebAudioApi: useWebAudioApi ?? false
   });
   useImperativeHandle5(ref, () => {
     return audioRef.current;
@@ -9203,10 +9214,6 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   if (initialShouldPreMountAudioElements) {
     return null;
   }
-  const crossOriginValue = getCrossOriginValue({
-    crossOrigin,
-    requestsVideoFrame: false
-  });
   return /* @__PURE__ */ jsx17("audio", {
     ref: audioRef,
     preload: "metadata",
@@ -10887,6 +10894,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     allowAmplificationDuringRender,
+    useWebAudioApi,
     ...nativeProps
   } = props2;
   const _propsValid = true;
@@ -10941,7 +10949,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     logLevel,
     mediaRef: videoRef,
     volume: userPreferredVolume,
-    source: sharedSource
+    source: sharedSource,
+    shouldUseWebAudioApi: useWebAudioApi ?? false
   });
   const actualFrom = parentSequence ? parentSequence.relativeFrom : 0;
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, durationInFrames) : durationInFrames;
@@ -21367,6 +21376,7 @@ var NewLanding = ({ colorMode, setColorMode }) => {
     children: /* @__PURE__ */ jsx131("div", {
       className: "bg-[var(--background)] relative",
       children: /* @__PURE__ */ jsxs58("div", {
+        style: { overflow: "hidden" },
         children: [
           /* @__PURE__ */ jsx131("div", {
             children: /* @__PURE__ */ jsx131(BackgroundAnimation, {})

package/dist/components/Homepage.js

@@ -16,5 +16,5 @@ import VideoAppsShowcase from './homepage/VideoAppsShowcase';
 import { SectionTitle, VideoAppsTitle } from './homepage/VideoAppsTitle';
 import { WriteInReact } from './homepage/WriteInReact';
 export const NewLanding = ({ colorMode, setColorMode }) => {
-    return (_jsx(ColorModeProvider, { colorMode: colorMode, setColorMode: setColorMode, children: _jsx("div", { className: "bg-[var(--background)] relative", children: _jsxs("div", { children: [_jsx("div", { children: _jsx(BackgroundAnimation, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { className: "max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative", children: [_jsx(WriteInReact, {}), _jsx("br", {}), _jsx(IfYouKnowReact, {}), _jsx(RealMP4Videos, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(LightningFastEditor, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(VideoAppsTitle, {}), _jsx(VideoApps, { active: "remotion" }), _jsx("br", {}), _jsx("br", {}), _jsx(VideoAppsShowcase, {}), _jsx("br", {}), _jsx("br", {}), _jsx(Demo, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Pricing" }), _jsx(Pricing, {}), _jsx(TrustedByBanner, {}), _jsx("br", {}), _jsx(EvaluateRemotionSection, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(CommunityStats, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
+    return (_jsx(ColorModeProvider, { colorMode: colorMode, setColorMode: setColorMode, children: _jsx("div", { className: "bg-[var(--background)] relative", children: _jsxs("div", { style: { overflow: 'hidden' }, children: [_jsx("div", { children: _jsx(BackgroundAnimation, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { className: "max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative", children: [_jsx(WriteInReact, {}), _jsx("br", {}), _jsx(IfYouKnowReact, {}), _jsx(RealMP4Videos, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(LightningFastEditor, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(VideoAppsTitle, {}), _jsx(VideoApps, { active: "remotion" }), _jsx("br", {}), _jsx("br", {}), _jsx(VideoAppsShowcase, {}), _jsx("br", {}), _jsx("br", {}), _jsx(Demo, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Pricing" }), _jsx(Pricing, {}), _jsx(TrustedByBanner, {}), _jsx("br", {}), _jsx(EvaluateRemotionSection, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(CommunityStats, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/promo-pages",
-  "version": "4.0.305",
+  "version": "4.0.306",
   "publishConfig": {
     "access": "public"
   },
@@ -10,14 +10,14 @@
     "polished": "4.3.1",
     "zod": "3.22.3",
     "bun-plugin-tailwind": "0.0.15",
-    "@remotion/lottie": "4.0.305",
-    "@remotion/animated-emoji": "4.0.305",
-    "@remotion/paths": "4.0.305",
-    "@remotion/shapes": "4.0.305",
-    "remotion": "4.0.305",
-    "@remotion/lambda": "4.0.305",
-    "create-video": "4.0.305",
-    "@remotion/player": "4.0.305"
+    "@remotion/animated-emoji": "4.0.306",
+    "@remotion/paths": "4.0.306",
+    "@remotion/player": "4.0.306",
+    "remotion": "4.0.306",
+    "create-video": "4.0.306",
+    "@remotion/shapes": "4.0.306",
+    "@remotion/lambda": "4.0.306",
+    "@remotion/lottie": "4.0.306"
   },
   "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.305"
+    "@remotion/eslint-config-internal": "4.0.306"
   },
   "repository": {
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"

package/src/components/Homepage.tsx

@@ -25,7 +25,7 @@ export const NewLanding: React.FC<{
 	return (
 		<ColorModeProvider colorMode={colorMode} setColorMode={setColorMode}>
 			<div className="bg-[var(--background)] relative">
-				<div>
+				<div style={{overflow: 'hidden'}}>
 					<div>
 						<BackgroundAnimation />
 					</div>