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

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

@@ -0,0 +1,129 @@
+import type {EmojiName} from '@remotion/animated-emoji';
+import React, {
+	createRef,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
+import {AbsoluteFill, getRemotionEnvironment} from 'remotion';
+import {Card} from './Card';
+import type {RemoteData} from './Comp';
+import {CurrentCountry} from './CurrentCountry';
+import {EmojiCard, type EmojiCardRef} from './EmojiCard';
+import {getInitialPositions} from './math';
+import {Temperature} from './Temperature';
+import {TrendingRepos} from './TrendingRepos';
+import type {Location} from './types';
+
+export const Cards: React.FC<{
+	readonly onUpdate: (newIndices: number[]) => void;
+	readonly indices: number[];
+	readonly theme: 'dark' | 'light';
+	readonly location: Location | null;
+	readonly trending: RemoteData | null;
+	readonly onToggle: () => void;
+	readonly onLeft: () => void;
+	readonly onRight: () => void;
+	readonly emojiName: EmojiName;
+}> = ({
+	onUpdate,
+	indices,
+	theme,
+	onToggle,
+	onLeft: onLeftPress,
+	onRight: onRightPress,
+	emojiName,
+	location,
+	trending,
+}) => {
+	const container = useRef<HTMLDivElement>(null);
+
+	const [refs] = useState(() => {
+		return new Array(4).fill(true).map(() => {
+			return createRef<HTMLDivElement>();
+		});
+	});
+
+	const positions = useRef(getInitialPositions());
+	const shouldBePositions = useRef(getInitialPositions());
+	const {isRendering} = getRemotionEnvironment();
+
+	useEffect(() => {
+		const {current} = container;
+		if (!current) {
+			return;
+		}
+
+		const onClick = (e: MouseEvent) => {
+			if (e.target !== current) {
+				return;
+			}
+
+			onToggle();
+		};
+
+		current.addEventListener('click', onClick);
+
+		return () => {
+			current.removeEventListener('click', onClick);
+		};
+	}, [onToggle]);
+
+	const ref = useRef<EmojiCardRef>(null);
+
+	const onLeft = useCallback(() => {
+		ref.current?.onRight();
+		onRightPress();
+	}, [onRightPress]);
+
+	const onRight = useCallback(() => {
+		ref.current?.onLeft();
+		onLeftPress();
+	}, [onLeftPress]);
+
+	return (
+		<AbsoluteFill ref={container}>
+			{new Array(4).fill(true).map((_, i) => {
+				const index = indices[i];
+				const content =
+					index === 0 ? (
+						<TrendingRepos trending={trending} theme={theme} />
+					) : index === 1 ? (
+						<Temperature
+							city={location?.city ?? null}
+							theme={theme}
+							temperatureInCelsius={trending?.temperatureInCelsius ?? null}
+						/>
+					) : index === 2 ? (
+						<CurrentCountry
+							countryPaths={trending?.countryPaths ?? null}
+							countryLabel={trending?.countryLabel ?? null}
+							theme={theme}
+						/>
+					) : (
+						<EmojiCard ref={ref} emojiIndex={emojiName} />
+					);
+
+				return (
+					<Card
+						// eslint-disable-next-line react/no-array-index-key
+						key={i}
+						onUpdate={onUpdate}
+						// @ts-expect-error
+						refsToUse={refs}
+						index={i}
+						content={content}
+						positions={positions}
+						shouldBePositions={shouldBePositions}
+						indices={indices}
+						theme={theme}
+						withSwitcher={index === 3 && !isRendering}
+						onClickLeft={onLeft}
+						onClickRight={onRight}
+					/>
+				);
+			})}
+		</AbsoluteFill>
+	);
+};

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

@@ -0,0 +1,157 @@
+import type {EmojiName} from '@remotion/animated-emoji';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {
+	AbsoluteFill,
+	Audio,
+	prefetch,
+	staticFile,
+	type CalculateMetadataFunction,
+} from 'remotion';
+import {Cards} from './Cards';
+import type {Location} from './types';
+
+export type RemoteData = {
+	repos: string[];
+	date: string | number;
+	temperatureInCelsius: number;
+	countryLabel: string;
+	countryPaths: {
+		d: string;
+		class: string;
+	}[];
+};
+
+export type LocationAndTrending = {
+	readonly location: Location | null;
+	readonly trending: RemoteData | null;
+};
+
+export const getDataAndProps = async () => {
+	const location = (await fetch(
+		'https://bugs-git-homepage-player-remotion.vercel.app/api/location',
+	).then((res) => res.json())) as Location;
+
+	const trending = await fetch(
+		`https://bugs.remotion.dev/trending?lat=${location.latitude}&lng=${location.longitude}&country=${location.country}`,
+	)
+		.then((res) => res.json())
+		.then((data) => {
+			return {
+				repos: data.trending.repos.slice(0, 3),
+				date: data.trending.dateFetched,
+				temperatureInCelsius: Math.round(data.temperature),
+				countryLabel: data.countryLabel,
+				countryPaths: data.countryPaths,
+			};
+		});
+
+	return {trending, location};
+};
+
+export const calculateMetadata: CalculateMetadataFunction<DemoPlayerProps> = ({
+	props,
+}) => {
+	return {
+		durationInFrames: 120,
+		fps: 30,
+		height: 360,
+		width: 640,
+		props: {
+			...props,
+		},
+	};
+};
+
+export type DemoPlayerProps = {
+	readonly onToggle: () => void;
+	readonly cardOrder: number[];
+	readonly updateCardOrder: (newCardOrder: number[]) => void;
+	readonly theme: 'dark' | 'light';
+	readonly onClickLeft: () => void;
+	readonly onClickRight: () => void;
+	readonly emojiIndex: number;
+} & LocationAndTrending;
+
+const fireAudio = staticFile('fire.mp3');
+const partyHornAudio = staticFile('partyhorn.mp3');
+const sadAudio = staticFile('sad.mp3');
+
+export const HomepageVideoComp: React.FC<DemoPlayerProps> = ({
+	theme,
+	onToggle,
+	cardOrder,
+	updateCardOrder,
+	location,
+	trending,
+	emojiIndex,
+	onClickLeft,
+	onClickRight,
+}) => {
+	const [rerenders, setRerenders] = useState(0);
+
+	const onUpdate = useCallback(
+		(newIndices: number[]) => {
+			setRerenders(rerenders + 1);
+			updateCardOrder(newIndices);
+		},
+		[rerenders, updateCardOrder],
+	);
+
+	const emoji = useMemo((): EmojiName => {
+		if ((emojiIndex + 10000 * 3) % 3 === 1) {
+			return 'melting';
+		}
+
+		if ((emojiIndex + 10000 * 3) % 3 === 2) {
+			return 'fire';
+		}
+
+		return 'partying-face';
+	}, [emojiIndex]);
+
+	const audioSrc = useMemo(() => {
+		if (emoji === 'fire') {
+			return fireAudio;
+		}
+
+		if (emoji === 'partying-face') {
+			return partyHornAudio;
+		}
+
+		return sadAudio;
+	}, [emoji]);
+
+	useEffect(() => {
+		const a = prefetch(fireAudio);
+		const b = prefetch(partyHornAudio);
+		const c = prefetch(sadAudio);
+
+		return () => {
+			a.free();
+			b.free();
+			c.free();
+		};
+	}, []);
+
+	return (
+		<AbsoluteFill
+			style={{
+				backgroundColor: theme === 'dark' ? '#222' : '#fafafa',
+			}}
+		>
+			<Cards
+				key={rerenders}
+				onUpdate={onUpdate}
+				indices={cardOrder}
+				theme={theme}
+				location={location}
+				trending={trending}
+				onToggle={onToggle}
+				onLeft={onClickLeft}
+				onRight={onClickRight}
+				emojiName={emoji}
+			/>
+			{audioSrc ? <Audio src={audioSrc} /> : null}
+		</AbsoluteFill>
+	);
+};

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

@@ -0,0 +1,97 @@
+import {getBoundingBox, resetPath} from '@remotion/paths';
+import React from 'react';
+import {
+	AbsoluteFill,
+	interpolate,
+	spring,
+	useCurrentFrame,
+	useVideoConfig,
+} from 'remotion';
+
+export const CurrentCountry: React.FC<{
+	readonly theme: 'dark' | 'light';
+	readonly countryPaths:
+		| {
+				d: string;
+				class: string;
+		  }[]
+		| null;
+	readonly countryLabel: string | null;
+}> = ({theme, countryPaths, countryLabel}) => {
+	const {fps} = useVideoConfig();
+	const frame = useCurrentFrame();
+
+	if (!countryPaths) {
+		return null;
+	}
+
+	const joined = countryPaths.map((p) => p.d).join(' ');
+	const reset = resetPath(joined);
+	const boundingBox = getBoundingBox(reset);
+
+	const progress = spring({
+		fps,
+		frame,
+		delay: 10,
+	});
+
+	return (
+		<AbsoluteFill style={{overflow: 'hidden'}}>
+			<AbsoluteFill
+				style={{
+					transform: `scale(${progress})`,
+				}}
+			>
+				<svg
+					viewBox={boundingBox.viewBox}
+					style={{
+						scale: '0.8',
+					}}
+				>
+					<path fill={theme === 'light' ? '#bbb' : '#222'} d={reset} />
+				</svg>
+			</AbsoluteFill>
+			<AbsoluteFill
+				style={{
+					alignItems: 'center',
+					justifyContent: 'center',
+				}}
+			>
+				<div
+					style={{
+						color: '#0b84f3',
+						fontFamily: 'GTPlanar',
+						fontWeight: '500',
+						fontSize: 13,
+						textAlign: 'center',
+						marginTop: -10,
+						width: '100%',
+						paddingLeft: 20,
+						paddingRight: 20,
+						transform:
+							'translateX(' + interpolate(progress, [0, 1], [-100, 0]) + '%)',
+					}}
+				>
+					Your country
+				</div>
+				<div
+					style={{
+						lineHeight: 1.1,
+						fontFamily: 'GTPlanar',
+						textAlign: 'center',
+						fontWeight: '500',
+						fontSize: 30,
+						color: theme === 'dark' ? 'white' : 'black',
+						width: '100%',
+						paddingLeft: 20,
+						paddingRight: 20,
+						transform:
+							'translateX(' + interpolate(progress, [0, 1], [100, 0]) + '%)',
+					}}
+				>
+					{countryLabel}
+				</div>
+			</AbsoluteFill>
+		</AbsoluteFill>
+	);
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import {FONTS, RED} from '../layout/colors';
+
+export const DemoError: React.FC = () => {
+	return (
+		<div
+			style={{
+				color: RED,
+				fontFamily: FONTS.GTPLANAR,
+				position: 'absolute',
+				paddingTop: 15,
+			}}
+		>
+			Sorry, we limit the amount of renders possible per day on this page. Come
+			back tomorrow!
+		</div>
+	);
+};

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import {RED} from '../layout/colors';
+
+export const DemoErrorIcon: React.FC = () => {
+	return (
+		<div
+			style={{
+				height: 26,
+				width: 26,
+				borderRadius: 13,
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				animation: 'jump 0.2s ease-out',
+			}}
+		>
+			<svg
+				style={{
+					flexShrink: 0,
+					width: 26,
+				}}
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 512 512"
+			>
+				<path
+					fill={RED}
+					d="M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zM256 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+				/>
+			</svg>
+		</div>
+	);
+};

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

@@ -0,0 +1,166 @@
+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>
+	);
+};