@remotion/promo-pages 4.0.260 → 5.0.0-canary.3

package/src/components/homepage/Demo/DemoRender.tsx

@@ -1,166 +0,0 @@
-import type {EnhancedErrorInfo} from '@remotion/lambda';
-import React, {useCallback} from 'react';
-import {z} from 'zod';
-import {PALETTE} from '../layout/colors';
-import {DemoErrorIcon} from './DemoErrorIcon';
-import {DoneCheckmark} from './DoneCheckmark';
-import {Progress} from './Progress';
-import {Spinner} from './Spinner';
-
-const countryPath = z.object({
-	d: z.string(),
-	class: z.string(),
-});
-
-const remoteData = z.object({
-	repos: z.array(z.string()),
-	date: z.string().or(z.number()),
-	temperatureInCelsius: z.number(),
-	countryLabel: z.string(),
-	countryPaths: z.array(countryPath),
-});
-
-const location = z.object({
-	country: z.string(),
-	city: z.string(),
-	latitude: z.number().or(z.string()),
-	longitude: z.number().or(z.string()),
-});
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const data = z.object({
-	trending: remoteData,
-	location,
-	emojiIndex: z.number(),
-	theme: z.enum(['light', 'dark']),
-	cardOrder: z.array(z.number()),
-});
-
-type State =
-	| {
-			type: 'idle';
-	  }
-	| {
-			type: 'invoking';
-	  }
-	| {
-			type: 'progress';
-			progress: number;
-	  }
-	| {
-			type: 'done';
-	  }
-	| {
-			type: 'error';
-	  };
-
-const style: React.CSSProperties = {
-	appearance: 'none',
-	border: 'none',
-	outline: 'none',
-	backgroundColor: 'transparent',
-	cursor: 'pointer',
-	width: 55,
-	height: 50,
-	display: 'flex',
-	alignItems: 'center',
-	justifyContent: 'center',
-};
-
-export const RenderButton: React.FC<{
-	readonly renderData: z.infer<typeof data> | null;
-	readonly onError: () => void;
-}> = ({renderData, onError}) => {
-	const [state, setState] = React.useState<State>({
-		type: 'idle',
-	});
-
-	const triggerRender = useCallback(async () => {
-		if (renderData === null) {
-			return;
-		}
-
-		try {
-			setState({type: 'invoking'});
-
-			const {renderId, bucketName} = await (
-				await fetch('https://bugs.remotion.dev/render', {
-					method: 'post',
-					headers: {'content-type': 'application/json'},
-					body: JSON.stringify(renderData),
-				})
-			).json();
-			setState({type: 'progress', progress: 0});
-
-			let done = false;
-
-			while (!done) {
-				const progress = (await (
-					await fetch('https://bugs.remotion.dev/progress', {
-						method: 'post',
-						headers: {'content-type': 'application/json'},
-						body: JSON.stringify({renderId, bucketName}),
-					})
-				).json()) as {
-					overallProgress: number;
-					outputFile: string | null;
-					errors: EnhancedErrorInfo[];
-					fatalErrorEncountered: boolean;
-				};
-				setState({
-					type: 'progress',
-					progress: progress.overallProgress,
-				});
-
-				if (progress.outputFile) {
-					done = true;
-					const a = document.createElement('a');
-					a.href = progress.outputFile;
-					a.download = 'remotion.dev.mp4';
-					a.click();
-					setState({type: 'done'});
-				}
-
-				if (progress.fatalErrorEncountered) {
-					done = true;
-				}
-			}
-		} catch {
-			setState({type: 'error'});
-			onError();
-		}
-	}, [onError, renderData]);
-
-	return (
-		<button
-			type="button"
-			onClick={triggerRender}
-			style={style}
-			disabled={!renderData || state.type !== 'idle'}
-		>
-			{state.type === 'error' ? (
-				<DemoErrorIcon />
-			) : state.type === 'done' ? (
-				<DoneCheckmark />
-			) : state.type === 'progress' ? (
-				<Progress progress={state.progress} />
-			) : state.type === 'invoking' ? (
-				<Spinner size={20} duration={1} />
-			) : (
-				<svg
-					style={{
-						width: 18,
-						opacity: renderData ? 1 : 0.5,
-					}}
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 384 512"
-				>
-					<path
-						fill={PALETTE.TEXT_COLOR}
-						d="M214.6 342.6L192 365.3l-22.6-22.6-128-128L18.7 192 64 146.7l22.6 22.6L160 242.7 160 64l0-32 64 0 0 32 0 178.7 73.4-73.4L320 146.7 365.3 192l-22.6 22.6-128 128zM32 416l320 0 32 0 0 64-32 0L32 480 0 480l0-64 32 0z"
-					/>
-				</svg>
-			)}
-		</button>
-	);
-};

package/src/components/homepage/Demo/DigitWheel.tsx

@@ -1,179 +0,0 @@
-import React from 'react';
-import type {SpringConfig} from 'remotion';
-import {
-	AbsoluteFill,
-	interpolate,
-	spring,
-	useCurrentFrame,
-	useVideoConfig,
-} from 'remotion';
-import {Minus} from './Minus';
-
-const DURATION = 25;
-
-const items = 10;
-
-export const NUM_WIDTH = 36;
-
-export const Wheel: React.FC<{
-	readonly delay: number;
-	readonly digits: number[];
-	readonly renderDigit: (i: number) => React.ReactNode;
-	readonly isLeadingDigit: boolean;
-	readonly isNegative: boolean[];
-}> = ({delay, digits, renderDigit, isLeadingDigit, isNegative}) => {
-	const frame = useCurrentFrame();
-	const {fps} = useVideoConfig();
-
-	const singleDur = DURATION;
-
-	const progressesMaker = (
-		springConfig: Partial<SpringConfig>,
-		durationInFrames: number,
-	) =>
-		new Array(digits.length - 1).fill(true).map((_, i) => {
-			const current = digits[i];
-			const next = digits[i + 1];
-			if (current === next) {
-				return 1;
-			}
-
-			return spring({
-				fps,
-				frame,
-				config: springConfig,
-				durationInFrames,
-				delay: i * 50 + delay,
-			});
-		});
-
-	const progresses = progressesMaker(
-		{
-			mass: 0.7,
-			damping: 12,
-		},
-		singleDur,
-	);
-	const softProgresses = progressesMaker(
-		{
-			damping: 200,
-		},
-		singleDur / 2,
-	);
-
-	const rotations = digits.map((d) => 1 / items + d / 10);
-
-	const offsets = rotations.map((r, i) => {
-		const next = rotations[i + 1];
-		if (next === undefined) {
-			return 0;
-		}
-
-		return next - r;
-	});
-
-	const opacity = isLeadingDigit
-		? interpolate(
-				softProgresses.reduce((a, b) => a + b, 0),
-				new Array(digits.length).fill(true).map((_, i) => i),
-				digits.map((digit) => (digit === 0 ? 0 : 1)),
-			)
-		: 1;
-
-	const minusSignOpacity = isLeadingDigit
-		? interpolate(
-				softProgresses.reduce((a, b) => a + b, 0),
-				new Array(digits.length).fill(true).map((_, i) => i),
-				isNegative.map((negative) => (negative ? 1 : 0)),
-			)
-		: 1;
-
-	const minusSignMarginLeft = interpolate(minusSignOpacity, [0, 1], [10, 0]);
-
-	const shiftLeft = isLeadingDigit
-		? interpolate(
-				softProgresses.reduce((a, b) => a + b, 0),
-				new Array(digits.length).fill(true).map((_, i) => i),
-				digits.map((digit) => (digit === 0 ? -40 : 0)),
-			)
-		: 1;
-
-	const rotation =
-		progresses
-			.map((p, i) => {
-				return p * offsets[i];
-			})
-			.reduce((a, b) => a + b, 0) + rotations[0];
-
-	return (
-		<div
-			style={{
-				position: 'relative',
-				width: NUM_WIDTH,
-				display: 'inline-block',
-				height: 80,
-				marginLeft: shiftLeft,
-			}}
-		>
-			{isLeadingDigit ? (
-				<Minus
-					minusSignOpacity={minusSignOpacity}
-					leftOffset={shiftLeft + minusSignMarginLeft}
-				/>
-			) : null}
-			<AbsoluteFill
-				style={{
-					perspective: 5000,
-					maskImage: `linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%)`,
-					WebkitMaskImage: `linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%)`,
-				}}
-			>
-				{new Array(items).fill(true).map((_, i) => {
-					const index = i / items + rotation;
-
-					const z = Math.cos(index * -Math.PI * 2) * 120;
-					const y = Math.sin(index * Math.PI * 2) * -120;
-					const r = interpolate(index, [0, 1], [0, Math.PI * 2]);
-
-					return (
-						<AbsoluteFill
-							// eslint-disable-next-line react/no-array-index-key
-							key={i}
-							style={{
-								justifyContent: 'center',
-								alignItems: 'center',
-								fontSize: 60,
-								fontVariationSettings: `"wght" 400`,
-								transform: `translateZ(${z}px) translateY(${y}px) rotateX(${r}deg)`,
-								backfaceVisibility: 'hidden',
-								perspective: 1000,
-							}}
-						>
-							<div
-								style={{
-									transform: `rotateX(-${r}rad)`,
-									backfaceVisibility: 'hidden',
-									display: 'flex',
-									flexDirection: 'row',
-									alignItems: 'center',
-									justifyContent: 'center',
-									opacity,
-								}}
-							>
-								<div
-									style={{
-										lineHeight: 1,
-										display: 'inline',
-										fontFeatureSettings: "'ss03' on",
-									}}
-								>
-									{renderDigit(i)}
-								</div>
-							</div>
-						</AbsoluteFill>
-					);
-				})}
-			</AbsoluteFill>
-		</div>
-	);
-};

package/src/components/homepage/Demo/DisplayedEmoji.tsx

@@ -1,81 +0,0 @@
-import type {EmojiName} from '@remotion/animated-emoji';
-import type {Lottie, LottieAnimationData} from '@remotion/lottie';
-import React, {useEffect, useMemo, useState} from 'react';
-import {
-	cancelRender,
-	continueRender,
-	delayRender,
-	useVideoConfig,
-} from 'remotion';
-
-type Data = {
-	Lottie: typeof Lottie;
-	duration: number;
-	data: LottieAnimationData;
-};
-
-export const DisplayedEmoji: React.FC<{
-	readonly emoji: EmojiName;
-}> = ({emoji}) => {
-	const [data, setData] = useState<Data | null>(null);
-	const {durationInFrames, fps} = useVideoConfig();
-
-	const src = useMemo(() => {
-		if (emoji === 'melting') {
-			return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json';
-		}
-
-		if (emoji === 'partying-face') {
-			return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f973/lottie.json';
-		}
-
-		if (emoji === 'fire') {
-			return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f525/lottie.json';
-		}
-
-		throw new Error('Unknown emoji');
-	}, [emoji]);
-
-	const [handle] = useState(() => delayRender());
-
-	useEffect(() => {
-		Promise.all([
-			import('@remotion/lottie'),
-			fetch(src).then((res) => res.json()),
-		])
-			.then(([{Lottie, getLottieMetadata}, json]) => {
-				setData({
-					Lottie,
-					duration: getLottieMetadata(json)?.durationInSeconds as number,
-					data: json,
-				});
-				continueRender(handle);
-			})
-			.catch((err) => {
-				cancelRender(err);
-			});
-	}, [handle, src]);
-
-	if (!data) {
-		return null;
-	}
-
-	const animDurtion = data.duration;
-	const ratio = durationInFrames / fps / animDurtion;
-	const closestInteger = ratio;
-	const closestRatio = closestInteger / ratio;
-
-	return (
-		<data.Lottie
-			style={{
-				height: 100,
-				width: '100%',
-				display: 'flex',
-				justifyContent: 'center',
-			}}
-			loop
-			animationData={data.data}
-			playbackRate={closestRatio}
-		/>
-	);
-};

package/src/components/homepage/Demo/DoneCheckmark.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import {PALETTE} from '../layout/colors';
-
-export const DoneCheckmark: React.FC = () => {
-	return (
-		<div
-			style={{
-				backgroundColor: PALETTE.BRAND,
-				height: 26,
-				width: 26,
-				borderRadius: 13,
-				display: 'flex',
-				alignItems: 'center',
-				justifyContent: 'center',
-				animation: 'jump 0.2s ease-out',
-			}}
-		>
-			<svg
-				viewBox="0 0 20 20"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				style={{
-					flexShrink: 0,
-					width: 26,
-				}}
-			>
-				<circle cx="10" cy="10" r="10" fill="#0B84F3" />
-				<path
-					d="M14.7908 7.20505C15.0697 7.47844 15.0697 7.92243 14.7908 8.19583L9.07711 13.795C8.79813 14.0683 8.34505 14.0683 8.06606 13.795L5.20924 10.9954C4.93025 10.722 4.93025 10.278 5.20924 10.0046C5.48823 9.73121 5.9413 9.73121 6.22029 10.0046L8.5727 12.3077L13.7819 7.20505C14.0609 6.93165 14.514 6.93165 14.793 7.20505H14.7908Z"
-					fill="white"
-					style={{
-						transform: 'scale(1.2)',
-						transformOrigin: 'center',
-					}}
-				/>
-			</svg>
-		</div>
-	);
-};

package/src/components/homepage/Demo/DownloadNudge.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import {FONTS} from '../layout/colors';
-
-const origWidth = 77;
-const scale = 0.4;
-
-const Icon: React.FC = () => {
-	return (
-		<svg
-			style={{
-				width: origWidth * scale,
-			}}
-			viewBox="0 0 77 160"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M5 154.5C51 121 79 81 69 5"
-				stroke="currentColor"
-				strokeWidth="8"
-				strokeLinecap="round"
-			/>
-		</svg>
-	);
-};
-
-export const DownloadNudge: React.FC = () => {
-	return (
-		<div
-			style={{
-				position: 'relative',
-				flexDirection: 'row',
-				display: 'flex',
-				justifyContent: 'flex-end',
-				textAlign: 'right',
-				paddingRight: 22,
-				paddingTop: 20,
-			}}
-		>
-			<div>
-				<Icon />
-				<div
-					style={{
-						fontFamily: FONTS.GTPLANAR,
-						fontSize: 15,
-						width: 280,
-						position: 'absolute',
-						right: 70,
-						top: 60,
-					}}
-				>
-					Export the video using
-					<br />{' '}
-					<a href="/lambda" className="bluelink">
-						Remotion Lambda
-					</a>
-					.
-				</div>
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/Demo/DragAndDropNudge.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import {FONTS, PALETTE} from '../layout/colors';
-
-const origWidth = 37;
-const scale = 0.4;
-
-export const Icon: React.FC = () => {
-	return (
-		<svg
-			style={{
-				width: origWidth * scale,
-				overflow: 'visible',
-			}}
-			viewBox="0 0 37 59"
-			fill="none"
-		>
-			<path
-				d="M5.00003 5C5.00002 36.5 16 44 32.0002 54"
-				stroke={PALETTE.TEXT_COLOR}
-				strokeWidth="8"
-				strokeLinecap="round"
-			/>
-		</svg>
-	);
-};
-
-export const DragAndDropNudge: React.FC = () => {
-	return (
-		<div
-			style={{
-				position: 'absolute',
-				flexDirection: 'row',
-				display: 'flex',
-				justifyContent: 'flex-start',
-				paddingBottom: 5,
-				marginTop: 50,
-			}}
-			className={'ml-4 lg:-ml-5'}
-		>
-			<div>
-				<div
-					style={{
-						fontFamily: FONTS.GTPLANAR,
-						fontSize: 15,
-						width: 280,
-						paddingBottom: 8,
-						textWrap: 'balance',
-					}}
-					className={'-ml-3 lg:-ml-5'}
-				>
-					Drag and drop the cards to reorder them.
-				</div>
-				<Icon />
-			</div>
-		</div>
-	);
-};