@remotion/promo-pages 4.0.363 → 4.0.365

package/dist/Homepage.js

@@ -745,7 +745,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.363", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.365", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1674,12 +1674,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
     if (!sequenceContext) {
       return null;
     }
+    if (!isActive) {
+      return sequenceContext;
+    }
     return {
       ...sequenceContext,
       relativeFrom: 0,
       cumulatedFrom: 0
     };
-  }, [sequenceContext]);
+  }, [sequenceContext, isActive]);
   return /* @__PURE__ */ jsx72(TimelineContext.Provider, {
     value: timelineValue,
     children: /* @__PURE__ */ jsx72(SequenceContext.Provider, {
@@ -2717,7 +2720,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       throw new TypeError(`trimAfter must be a positive number, instead got ${trimAfter}.`);
     }
   }
-  if (trimAfter < trimBefore) {
+  if (trimAfter <= trimBefore) {
     throw new TypeError("trimAfter prop must be greater than trimBefore prop.");
   }
 }, validateMediaTrimProps = ({
@@ -5033,27 +5036,21 @@ Check that all your Remotion packages are on the same version. If your dependenc
           onImageFrame?.(current);
         }
         unblock();
-        requestAnimationFrame(() => {
-          continueRender2(newHandle);
-        });
+        continueRender2(newHandle);
       };
       if (!imageRef.current) {
         onComplete();
         return;
       }
       current.src = actualSrc;
-      if (current.complete) {
-        onComplete();
-      } else {
-        current.decode().then(onComplete).catch((err) => {
-          console.warn(err);
-          if (current.complete) {
-            onComplete();
-          } else {
-            current.addEventListener("load", onComplete);
-          }
-        });
-      }
+      current.decode().then(onComplete).catch((err) => {
+        console.warn(err);
+        if (current.complete) {
+          onComplete();
+        } else {
+          current.addEventListener("load", onComplete);
+        }
+      });
       return () => {
         unmounted = true;
         current.removeEventListener("load", onComplete);
@@ -5081,7 +5078,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     ...props2,
     ref: imageRef,
     crossOrigin: crossOriginValue,
-    onError: didGetError
+    onError: didGetError,
+    decoding: "sync"
   });
 }, Img, compositionsRef, CompositionManagerProvider = ({
   children,
@@ -6832,12 +6830,12 @@ var init_esm = __esm(() => {
     warn,
     error
   };
-  if (typeof window !== "undefined") {
-    window.remotion_renderReady = false;
-  }
   handles = [];
   if (typeof window !== "undefined") {
-    window.remotion_delayRenderTimeouts = {};
+    window.remotion_renderReady = false;
+    if (!window.remotion_delayRenderTimeouts) {
+      window.remotion_delayRenderTimeouts = {};
+    }
   }
   Canvas = React9.forwardRef(CanvasRefForwardingFunction);
   AnimatedImage = forwardRef3(({
@@ -7121,7 +7119,8 @@ var init_esm = __esm(() => {
     getInputPropsOverride,
     setInputPropsOverride,
     useVideoEnabled,
-    useAudioEnabled
+    useAudioEnabled,
+    useIsPlayerBuffering
   };
   PERCENTAGE = NUMBER + "%";
   IsInsideSeriesContext = createContext20(false);
@@ -12434,9 +12433,9 @@ function truthy2(value) {
 }
 if (typeof window !== "undefined") {
   window.remotion_renderReady = false;
-}
-if (typeof window !== "undefined") {
-  window.remotion_delayRenderTimeouts = {};
+  if (!window.remotion_delayRenderTimeouts) {
+    window.remotion_delayRenderTimeouts = {};
+  }
 }
 var DELAY_RENDER_CALLSTACK_TOKEN2 = "The delayRender was called:";
 var DELAY_RENDER_RETRIES_LEFT2 = "Retries left: ";

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/Homepage.js

@@ -745,7 +745,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.363", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.365", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1674,12 +1674,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
     if (!sequenceContext) {
       return null;
     }
+    if (!isActive) {
+      return sequenceContext;
+    }
     return {
       ...sequenceContext,
       relativeFrom: 0,
       cumulatedFrom: 0
     };
-  }, [sequenceContext]);
+  }, [sequenceContext, isActive]);
   return /* @__PURE__ */ jsx72(TimelineContext.Provider, {
     value: timelineValue,
     children: /* @__PURE__ */ jsx72(SequenceContext.Provider, {
@@ -2717,7 +2720,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       throw new TypeError(`trimAfter must be a positive number, instead got ${trimAfter}.`);
     }
   }
-  if (trimAfter < trimBefore) {
+  if (trimAfter <= trimBefore) {
     throw new TypeError("trimAfter prop must be greater than trimBefore prop.");
   }
 }, validateMediaTrimProps = ({
@@ -5033,27 +5036,21 @@ Check that all your Remotion packages are on the same version. If your dependenc
           onImageFrame?.(current);
         }
         unblock();
-        requestAnimationFrame(() => {
-          continueRender2(newHandle);
-        });
+        continueRender2(newHandle);
       };
       if (!imageRef.current) {
         onComplete();
         return;
       }
       current.src = actualSrc;
-      if (current.complete) {
-        onComplete();
-      } else {
-        current.decode().then(onComplete).catch((err) => {
-          console.warn(err);
-          if (current.complete) {
-            onComplete();
-          } else {
-            current.addEventListener("load", onComplete);
-          }
-        });
-      }
+      current.decode().then(onComplete).catch((err) => {
+        console.warn(err);
+        if (current.complete) {
+          onComplete();
+        } else {
+          current.addEventListener("load", onComplete);
+        }
+      });
       return () => {
         unmounted = true;
         current.removeEventListener("load", onComplete);
@@ -5081,7 +5078,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     ...props2,
     ref: imageRef,
     crossOrigin: crossOriginValue,
-    onError: didGetError
+    onError: didGetError,
+    decoding: "sync"
   });
 }, Img, compositionsRef, CompositionManagerProvider = ({
   children,
@@ -6832,12 +6830,12 @@ var init_esm = __esm(() => {
     warn,
     error
   };
-  if (typeof window !== "undefined") {
-    window.remotion_renderReady = false;
-  }
   handles = [];
   if (typeof window !== "undefined") {
-    window.remotion_delayRenderTimeouts = {};
+    window.remotion_renderReady = false;
+    if (!window.remotion_delayRenderTimeouts) {
+      window.remotion_delayRenderTimeouts = {};
+    }
   }
   Canvas = React9.forwardRef(CanvasRefForwardingFunction);
   AnimatedImage = forwardRef3(({
@@ -7121,7 +7119,8 @@ var init_esm = __esm(() => {
     getInputPropsOverride,
     setInputPropsOverride,
     useVideoEnabled,
-    useAudioEnabled
+    useAudioEnabled,
+    useIsPlayerBuffering
   };
   PERCENTAGE = NUMBER + "%";
   IsInsideSeriesContext = createContext20(false);
@@ -12434,9 +12433,9 @@ function truthy2(value) {
 }
 if (typeof window !== "undefined") {
   window.remotion_renderReady = false;
-}
-if (typeof window !== "undefined") {
-  window.remotion_delayRenderTimeouts = {};
+  if (!window.remotion_delayRenderTimeouts) {
+    window.remotion_delayRenderTimeouts = {};
+  }
 }
 var DELAY_RENDER_CALLSTACK_TOKEN2 = "The delayRender was called:";
 var DELAY_RENDER_RETRIES_LEFT2 = "Retries left: ";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/promo-pages",
-	"version": "4.0.363",
+	"version": "4.0.365",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -11,21 +11,21 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@remotion/animated-emoji": "4.0.363",
-		"@remotion/lambda": "4.0.363",
-		"@remotion/lottie": "4.0.363",
-		"@remotion/paths": "4.0.363",
-		"@remotion/player": "4.0.363",
-		"@remotion/shapes": "4.0.363",
-		"create-video": "4.0.363",
+		"@remotion/animated-emoji": "4.0.365",
+		"@remotion/lambda": "4.0.365",
+		"@remotion/lottie": "4.0.365",
+		"@remotion/paths": "4.0.365",
+		"@remotion/player": "4.0.365",
+		"@remotion/shapes": "4.0.365",
+		"create-video": "4.0.365",
 		"hls.js": "1.5.19",
 		"polished": "4.3.1",
-		"remotion": "4.0.363",
+		"remotion": "4.0.365",
 		"zod": "3.22.3",
 		"bun-plugin-tailwind": "0.0.15"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.363",
+		"@remotion/eslint-config-internal": "4.0.365",
 		"@eslint/eslintrc": "3.1.0",
 		"@types/react": "19.0.0",
 		"@types/react-dom": "19.0.0",

package/.turbo/turbo-lint.log

@@ -1,15 +0,0 @@
-
-$ tsc && eslint src
-=============
-
-WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.
-
-You may find that it works just fine, or you may not.
-
-SUPPORTED TYPESCRIPT VERSIONS: >=4.7.4 <5.7.0
-
-YOUR TYPESCRIPT VERSION: 5.8.2
-
-Please only submit bug reports when using the officially supported version.
-
-=============

package/.turbo/turbo-make.log

@@ -1,5 +0,0 @@
-
-$ bun --env-file=../.env.bundle bundle.ts
-≈ tailwindcss v4.1.1
-
-Done in 27ms

package/bundle.ts

@@ -1,54 +0,0 @@
-import {$, build} from 'bun';
-
-import {NoReactInternals} from 'remotion/no-react';
-
-if (process.env.NODE_ENV !== 'production') {
-	throw new Error('This script must be run using NODE_ENV=production');
-}
-
-const nodeVersion =
-	await $`node -e "console.log(typeof structuredClone)"`.text();
-if (nodeVersion.trim() === 'undefined') {
-	if (NoReactInternals.ENABLE_V5_BREAKING_CHANGES) {
-		throw new Error(
-			'Error: You are using Node.js without structuredClone. Please upgrade to Node.js 17 or newer.',
-		);
-	} else {
-		console.log(
-			'Node does not have structuredClone. Passing because we are not building the site.',
-		);
-		process.exit(0);
-	}
-}
-
-await $`bunx tailwindcss -i src/index.css -o dist/tailwind.css`;
-
-const result = await build({
-	entrypoints: [
-		'./src/components/Homepage.tsx',
-		'./src/components/homepage/Pricing.tsx',
-		'./src/components/team.tsx',
-	],
-	outdir: 'dist',
-	format: 'esm',
-	external: [
-		'react',
-		'react/jsx-runtime',
-		'react-dom',
-		'lottie-web',
-		'hls.js',
-		'plyr',
-		'zod',
-	],
-});
-
-if (!result.success) {
-	console.log(result.logs.join('\n'));
-	process.exit(1);
-}
-
-for (const output of result.outputs) {
-	await Bun.write('dist/' + output.path, await output.text());
-}
-
-export {};

package/eslint.config.mjs

@@ -1,7 +0,0 @@
-import {remotionFlatConfig} from '@remotion/eslint-config-internal';
-
-const config = remotionFlatConfig({react: true});
-
-export default {
-	...config,
-};

package/server.ts

@@ -1,26 +0,0 @@
-import {serve} from 'bun';
-import homepage from './homepage.html';
-import team from './team.html';
-
-const server = serve({
-	routes: {
-		'/': homepage,
-		'/about': team,
-	},
-	development: true,
-	async fetch(req) {
-		try {
-			const url = new URL(req.url);
-			const file = Bun.file(`./public${url.pathname}`);
-			const exists = await file.exists();
-			if (!exists) {
-				return new Response('Not Found', {status: 404});
-			}
-			return new Response(file);
-		} catch (e) {
-			return new Response('Server Error', {status: 500});
-		}
-	},
-});
-
-console.log(`Listening on ${server.url}`);

package/src/cn.ts

@@ -1,6 +0,0 @@
-import {clsx, type ClassValue} from 'clsx';
-import {twMerge} from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}

package/src/components/Homepage.tsx

@@ -1,87 +0,0 @@
-'use client';
-
-import React from 'react';
-import {BackgroundAnimation} from './homepage/BackgroundAnimation';
-import CommunityStats from './homepage/CommunityStats';
-import {Demo} from './homepage/Demo';
-import EditorStarterSection from './homepage/EditorStarterSection';
-import EvaluateRemotionSection from './homepage/EvaluateRemotion';
-import {IfYouKnowReact} from './homepage/IfYouKnowReact';
-import type {ColorMode} from './homepage/layout/use-color-mode';
-import {ColorModeProvider} from './homepage/layout/use-color-mode';
-import {MoreVideoPowerSection} from './homepage/MoreVideoPowerSection';
-import {NewsletterButton} from './homepage/NewsletterButton';
-import {ParameterizeAndEdit} from './homepage/ParameterizeAndEdit';
-import {Pricing} from './homepage/Pricing';
-import {RealMP4Videos} from './homepage/RealMp4Videos';
-import TrustedByBanner from './homepage/TrustedByBanner';
-import VideoAppsShowcase from './homepage/VideoAppsShowcase';
-import {SectionTitle} from './homepage/VideoAppsTitle';
-import {WriteInReact} from './homepage/WriteInReact';
-
-export const NewLanding: React.FC<{
-	readonly colorMode: ColorMode;
-	readonly setColorMode: (colorMode: ColorMode) => void;
-}> = ({colorMode, setColorMode}) => {
-	return (
-		<ColorModeProvider colorMode={colorMode} setColorMode={setColorMode}>
-			<div className="bg-[var(--background)] relative">
-				<div style={{overflow: 'hidden'}}>
-					<div>
-						<BackgroundAnimation />
-					</div>
-					<br />
-					<br />
-					<br />
-					<br />
-					<div className="max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative">
-						<WriteInReact />
-						<br />
-						<IfYouKnowReact />
-						<ParameterizeAndEdit />
-						<RealMP4Videos />
-						<br />
-						<br />
-						<br />
-						<VideoAppsShowcase />
-						<br />
-						<br />
-						<Demo />
-						<br />
-						<br />
-						<br />
-						<SectionTitle>Pricing</SectionTitle>
-						<Pricing />
-						<TrustedByBanner />
-						<br />
-						<EvaluateRemotionSection />
-						<br />
-						<br />
-						<br />
-						<CommunityStats />
-						<br />
-						<br />
-						<br />
-						<EditorStarterSection />
-						<br />
-						<br />
-						<br />
-
-						<SectionTitle>Even more power to developers</SectionTitle>
-						<div className={'fontbrand text-center mb-10 -mt-4'}>
-							Innovative video products that you might enjoy.
-						</div>
-						<MoreVideoPowerSection />
-						<br />
-						<br />
-						<br />
-						<NewsletterButton />
-						<br />
-						<br />
-						<br />
-					</div>
-				</div>
-			</div>
-		</ColorModeProvider>
-	);
-};

package/src/components/TeamPicture.tsx

@@ -1,11 +0,0 @@
-export const TeamPicture = () => {
-	return (
-		<div className="border-effect overflow-hidden mb-10 lg:mb-4">
-			<img
-				src="/img/team/team.jpeg"
-				style={{aspectRatio: '1024 / 616'}}
-				className="w-full mb-0 float-left "
-			/>
-		</div>
-	);
-};

package/src/components/homepage/BackgroundAnimation.tsx

@@ -1,108 +0,0 @@
-'use client';
-
-import {getLength} from '@remotion/paths';
-import React, {useEffect} from 'react';
-
-const rx = 0.2;
-const ry = 0.45;
-
-function ellipseToPath(cx: number, cy: number): string {
-	let output = 'M' + (cx - rx).toString() + ',' + cy.toString();
-	output +=
-		'a' +
-		rx.toString() +
-		',' +
-		ry.toString() +
-		' 0 1,0 ' +
-		(2 * rx).toString() +
-		',0';
-	output +=
-		'a' +
-		rx.toString() +
-		',' +
-		ry.toString() +
-		' 0 1,0 ' +
-		(-2 * rx).toString() +
-		',0';
-	return output;
-}
-
-const strokeWidth = 0.035;
-
-export const BackgroundAnimation: React.FC = () => {
-	const d = ellipseToPath(0.5, 0.5);
-	const length = getLength(d);
-
-	const css = `
-    @keyframes bganimation {
-      from {
-        stroke-dashoffset: 0
-      }
-    
-      to {
-        stroke-dashoffset: ${length};
-      }
-    }  
-  `;
-
-	useEffect(() => {
-		const _style = document.createElement('style');
-		_style.innerHTML = css;
-		document.head.appendChild(_style);
-	}, [css]);
-
-	return (
-		<div className=" w-full h-full min-w-0 m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none">
-			<svg
-				className="translate-y-[-30%] lg:translate-y-[-50%]"
-				viewBox="0 0 1 1"
-				style={{
-					width: '100%',
-					position: 'absolute',
-				}}
-			>
-				<path
-					d={d}
-					fill="none"
-					stroke="var(--ifm-color-primary)"
-					strokeLinecap="round"
-					className="stroke-[0.04] lg:stroke-[0.035]"
-					style={{
-						transformOrigin: 'center center',
-						transform: `rotate(120deg)`,
-						animation: `bganimation 20s linear infinite`,
-						strokeDasharray: `${length * 0.2} ${length * 0.8}`,
-					}}
-				/>
-				<path
-					d={d}
-					fill="none"
-					stroke="var(--ifm-color-primary)"
-					strokeLinecap="round"
-					strokeWidth={strokeWidth}
-					className="stroke-[0.04] lg:stroke-[0.035]"
-					style={{
-						transformOrigin: 'center center',
-						transform: `rotate(0deg)`,
-						animation: `bganimation 20s linear infinite`,
-						strokeDasharray: `${length * 0.2} ${length * 0.8}`,
-					}}
-				/>
-				<path
-					d={d}
-					fill="none"
-					stroke="var(--ifm-color-primary)"
-					strokeLinecap="round"
-					strokeWidth={strokeWidth}
-					className="stroke-[0.04] lg:stroke-[0.035]"
-					style={{
-						transformOrigin: 'center center',
-						transform: `rotate(240deg)`,
-						animation: `bganimation 20s linear infinite`,
-						strokeDasharray: `${length * 0.2} ${length * 0.8}`,
-					}}
-				/>
-			</svg>
-		</div>
-	);
-};

package/src/components/homepage/ChooseTemplate.tsx

@@ -1,57 +0,0 @@
-import {CreateVideoInternals} from 'create-video';
-import React from 'react';
-
-import {IconForTemplate} from './IconForTemplate';
-import {MoreTemplatesButton} from './MoreTemplatesButton';
-import {TemplateIcon} from './TemplateIcon';
-
-export const ChooseTemplate: React.FC = () => {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
-			<div
-				style={{
-					position: 'relative',
-					textAlign: 'center',
-				}}
-			>
-				<div
-					className="no-scroll-bar"
-					style={{
-						backgroundColor: 'var(--plain-button)',
-						display: 'inline-flex',
-						flexDirection: 'row',
-						justifyContent: 'space-around',
-						boxShadow: '0 0 4px 0px var(--ifm-color-emphasis-200)',
-						borderRadius: 50,
-						alignItems: 'center',
-						padding: 8,
-						width: '100%',
-						maxWidth: '550px',
-					}}
-				>
-					{CreateVideoInternals.FEATURED_TEMPLATES.filter(
-						(f) => f.featuredOnHomePage,
-					).map((template) => {
-						return (
-							<a
-								key={template.cliId}
-								className="text-inherit no-underline"
-								href={`/templates/${template.cliId}`}
-							>
-								<TemplateIcon label={template.featuredOnHomePage!}>
-									<IconForTemplate scale={0.7} template={template} />
-								</TemplateIcon>
-							</a>
-						);
-					})}
-					<MoreTemplatesButton />
-				</div>
-			</div>
-		</div>
-	);
-};