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

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

@@ -1,129 +0,0 @@
-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

@@ -1,157 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -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>
-	);
-};