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

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

@@ -1,273 +0,0 @@
-import React, {useCallback, useRef} from 'react';
-import {AbsoluteFill, spring} from 'remotion';
-import {
-	cardHeight,
-	cardWidth,
-	getIndexFromPosition,
-	getInitialPositions,
-	getPositionForIndex,
-	type Position,
-} from './math';
-import {Switcher} from './Switcher';
-
-const arePositionsEqual = (a: Position[], b: Position[]) => {
-	return a.every((pos, i) => {
-		return pos.x === b[i].x && pos.y === b[i].y;
-	});
-};
-
-export const Card: React.FC<{
-	readonly index: number;
-	readonly refsToUse: React.MutableRefObject<HTMLDivElement>[];
-	readonly onUpdate: (newIndices: number[]) => void;
-	readonly content: React.ReactNode;
-	readonly positions: React.MutableRefObject<Position[]>;
-	readonly shouldBePositions: React.MutableRefObject<Position[]>;
-	readonly indices: number[];
-	readonly theme: 'dark' | 'light';
-	readonly withSwitcher: boolean;
-	readonly onClickLeft: () => void;
-	readonly onClickRight: () => void;
-}> = ({
-	positions,
-	shouldBePositions,
-	index,
-	refsToUse,
-	onUpdate,
-	content,
-	indices,
-	theme,
-	withSwitcher,
-	onClickLeft,
-	onClickRight,
-}) => {
-	const refToUse = refsToUse[index];
-	const stopPrevious = useRef<(() => void)[]>([]);
-
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	let newIndices = [...indices];
-
-	const applyPositions = useCallback(
-		(except: number | null) => {
-			let stopped = false;
-			stopPrevious.current.forEach((s) => {
-				s();
-			});
-			stopPrevious.current.push(() => {
-				stopped = true;
-			});
-			positions.current.forEach((_, i) => {
-				const shouldBe = shouldBePositions.current[i];
-				const ref = refsToUse[i].current;
-				if (!ref) {
-					return;
-				}
-
-				if (except === null) {
-					ref.style.pointerEvents = 'none';
-				}
-
-				if (i === except) {
-					ref.style.left = getPositionForIndex(i).x + 'px';
-					ref.style.top = getPositionForIndex(i).y + 'px';
-					return;
-				}
-
-				let animationI = 1;
-				const duration = 20;
-
-				const releasePositionX = positions.current[i].x;
-				const releasePositionY = positions.current[i].y;
-
-				const finishAnimation = () => {
-					refsToUse.forEach((r) => {
-						r.current.style.zIndex = '1';
-						r.current.style.scale = '1';
-						r.current.style.opacity = '1';
-					});
-					if (i === 0) {
-						setTimeout(() => {
-							onUpdate([...newIndices]);
-						}, 200);
-					}
-				};
-
-				if (
-					releasePositionX === shouldBe.x &&
-					releasePositionY === shouldBe.y &&
-					animationI === duration &&
-					except === null
-				) {
-					finishAnimation();
-					return;
-				}
-
-				const update = () => {
-					if (stopped) {
-						return;
-					}
-
-					const progress = spring({
-						fps: 60,
-						frame: animationI,
-						config: {
-							damping: 200,
-						},
-						durationInFrames: duration,
-						durationRestThreshold: 0.001,
-					});
-					const newX =
-						progress * (shouldBe.x - releasePositionX) + releasePositionX;
-					const newY =
-						progress * (shouldBe.y - releasePositionY) + releasePositionY;
-					ref.style.left = `${newX}px`;
-					ref.style.top = `${newY}px`;
-					positions.current[i] = {
-						x: newX,
-						y: newY,
-					};
-					animationI++;
-					if (animationI === duration && except === null) {
-						finishAnimation();
-
-						return;
-					}
-
-					requestAnimationFrame(update);
-				};
-
-				update();
-			});
-		},
-		[newIndices, onUpdate, positions, refsToUse, shouldBePositions],
-	);
-
-	const onPointerDown = useCallback(
-		(e: React.PointerEvent<HTMLDivElement>) => {
-			e.currentTarget.setPointerCapture(e.pointerId);
-			const cardLeft = refToUse.current.offsetLeft;
-			const cardTop = refToUse.current.offsetTop;
-			const startX = e.clientX;
-			const startY = e.clientY;
-
-			if (e.button === 2) {
-				return;
-			}
-
-			let translateX = 0;
-			let translateY = 0;
-			refToUse.current.style.scale = '1.05';
-			refToUse.current.style.cursor = 'grabbing';
-
-			const onMove = (evt: PointerEvent) => {
-				refsToUse.forEach((r) => {
-					if (r !== refToUse) {
-						r.current.style.opacity = '0';
-					}
-				});
-				const scale =
-					refToUse.current.getBoundingClientRect().width / cardWidth;
-
-				translateX = (evt.clientX - startX) * (1 / scale);
-				translateY = (evt.clientY - startY) * (1 / scale);
-
-				const position = getIndexFromPosition(
-					cardLeft + translateX,
-					cardTop + translateY,
-				);
-				if (position === undefined) {
-					throw new Error('pos');
-				}
-
-				if (position === index) {
-					if (
-						!arePositionsEqual(getInitialPositions(), shouldBePositions.current)
-					) {
-						shouldBePositions.current = getInitialPositions();
-						applyPositions(index);
-					}
-				} else {
-					const newPos = getInitialPositions();
-					newPos[position] = getPositionForIndex(index);
-					newPos[index] = getPositionForIndex(position);
-					// eslint-disable-next-line react-hooks/exhaustive-deps
-					newIndices = [...indices];
-					const prevIndexPosition = newIndices[position];
-					newIndices[position] = newIndices[index];
-					newIndices[index] = prevIndexPosition;
-
-					if (!arePositionsEqual(newPos, shouldBePositions.current)) {
-						shouldBePositions.current = newPos;
-						applyPositions(index);
-					}
-				}
-
-				refToUse.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px)`;
-				refToUse.current.style.zIndex = '2';
-			};
-
-			refToUse.current.addEventListener(
-				'pointerup',
-				() => {
-					positions.current[index] = {
-						x: cardLeft + translateX,
-						y: cardTop + translateY,
-					};
-					refToUse.current.style.left = `${cardLeft + translateX}px`;
-					refToUse.current.style.top = `${cardTop + translateY}px`;
-					refToUse.current.style.transform = `translateX(0px) translateY(0px)`;
-					refToUse.current.style.cursor = 'grab';
-
-					refToUse.current.removeEventListener('pointermove', onMove);
-					applyPositions(null);
-				},
-				{once: true},
-			);
-
-			refToUse.current.addEventListener('pointermove', onMove);
-		},
-		[applyPositions, index, positions, refToUse, shouldBePositions],
-	);
-
-	const onPointerUp = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-		e.currentTarget.releasePointerCapture(e.pointerId);
-	}, []);
-
-	const {x, y} = getPositionForIndex(index);
-	const color = theme === 'light' ? ' #EAEAEA' : '#333';
-	return (
-		<div
-			ref={refToUse}
-			className={'transition-opacity duration-200'}
-			onPointerDown={onPointerDown}
-			onPointerUp={onPointerUp}
-			style={{
-				width: cardWidth,
-				height: cardHeight,
-				position: 'absolute',
-				left: x,
-				top: y,
-				userSelect: 'none',
-				border: `1px solid ${color}`,
-				borderRadius: 13,
-				cursor: 'grab',
-			}}
-		>
-			<AbsoluteFill
-				style={{
-					backgroundColor: color,
-					borderRadius: 12,
-				}}
-				className={'transition-opacity duration-200'}
-			>
-				{content}
-				{withSwitcher ? (
-					<>
-						<Switcher onTap={onClickLeft} type="left" theme={theme} />
-						<Switcher onTap={onClickRight} type="right" theme={theme} />
-					</>
-				) : null}
-			</AbsoluteFill>
-		</div>
-	);
-};

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