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

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

@@ -1,68 +0,0 @@
-import React from 'react';
-import {Wheel} from './DigitWheel';
-
-export const TemperatureNumber: React.FC<{
-	readonly theme: 'dark' | 'light';
-	readonly temperatureInCelsius: number;
-}> = ({theme, temperatureInCelsius}) => {
-	const temperatureInFahrenheit = (temperatureInCelsius * 9) / 5 + 32;
-
-	const celsiusDegree = Math.abs(temperatureInCelsius);
-	const fahrenheitDegree = Math.abs(temperatureInFahrenheit);
-
-	const paddedCelsiusDegree = String(celsiusDegree)
-		.padStart(fahrenheitDegree.toFixed(0).length, '0')
-		.split('');
-	const paddedFahrenheitDegree = fahrenheitDegree
-		.toFixed(0)
-		.padStart(paddedCelsiusDegree.length, '0')
-		.split('');
-
-	return (
-		<div
-			style={{
-				lineHeight: 1.1,
-				fontFamily: 'GTPlanar',
-				textAlign: 'center',
-				fontWeight: 'bold',
-				fontSize: 60,
-				color: theme === 'dark' ? 'white' : 'black',
-				fontVariantNumeric: 'tabular-nums',
-				display: 'flex',
-				flexDirection: 'row',
-				alignItems: 'center',
-			}}
-		>
-			{paddedCelsiusDegree.map((digit, i) => (
-				<Wheel
-					// eslint-disable-next-line react/no-array-index-key
-					key={i}
-					delay={i * 4}
-					renderDigit={(_i) => 9 - _i}
-					digits={[
-						Number(paddedFahrenheitDegree[i]),
-						Number(digit),
-						Number(paddedFahrenheitDegree[i]),
-					]}
-					isNegative={[
-						temperatureInFahrenheit < 0,
-						temperatureInCelsius < 0,
-						temperatureInFahrenheit < 0,
-					]}
-					isLeadingDigit={i === 0}
-				/>
-			))}
-			<div style={{width: 8}} />
-			°
-			<Wheel
-				delay={paddedCelsiusDegree.length * 4 - 2}
-				digits={[0, 1, 0]}
-				renderDigit={(_i) =>
-					_i % 2 === 0 ? 'C' : <span style={{marginLeft: -5}}>F</span>
-				}
-				isLeadingDigit={false}
-				isNegative={[false, false, false]}
-			/>
-		</div>
-	);
-};

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

@@ -1,72 +0,0 @@
-import React from 'react';
-import {FONTS} from '../layout/colors';
-import {useColorMode} from '../layout/use-color-mode';
-
-const origWidth = 21;
-const scale = 0.4;
-
-export const Icon: React.FC = () => {
-	return (
-		<svg
-			style={{
-				width: origWidth * scale,
-			}}
-			viewBox="0 0 21 161"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M5 5C23 59.5 14.5 120.5 5.00005 156"
-				stroke="currentColor"
-				strokeWidth="8"
-				strokeLinecap="round"
-			/>
-		</svg>
-	);
-};
-
-export const ThemeNudge: React.FC = () => {
-	const {colorMode, setColorMode} = useColorMode();
-
-	const toggleTheme: React.MouseEventHandler = React.useCallback(
-		(e) => {
-			e.preventDefault();
-			setColorMode(colorMode === 'dark' ? 'light' : 'dark');
-		},
-		[colorMode, setColorMode],
-	);
-
-	return (
-		<div
-			style={{
-				flexDirection: 'row',
-				display: 'flex',
-				justifyContent: 'flex-start',
-				paddingBottom: 5,
-				textAlign: 'right',
-				position: 'absolute',
-				right: 0,
-			}}
-		>
-			<div>
-				<div
-					style={{
-						fontFamily: FONTS.GTPLANAR,
-						fontSize: 15,
-						width: 280,
-						paddingBottom: 8,
-						marginLeft: -15,
-						textWrap: 'balance',
-						marginTop: 5,
-					}}
-				>
-					<a href="#" onClick={toggleTheme} className="bluelink">
-						Switch to {colorMode === 'dark' ? 'light' : 'dark'} mode
-					</a>{' '}
-					and see the video adjust!{' '}
-				</div>
-				<Icon />
-			</div>
-		</div>
-	);
-};

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

@@ -1,43 +0,0 @@
-import type {PlayerRef} from '@remotion/player';
-import React, {useEffect} from 'react';
-
-const formatTime = (timeInSeconds: number) => {
-	const minutes = Math.floor(timeInSeconds / 60);
-	const seconds = Math.floor(timeInSeconds - minutes * 60);
-	return `${String(minutes)}:${String(seconds).padStart(2, '0')}`;
-};
-
-export const TimeDisplay: React.FC<{
-	readonly fps: number;
-	readonly playerRef: React.RefObject<PlayerRef | null>;
-}> = ({fps, playerRef}) => {
-	const [time, setTime] = React.useState(0);
-
-	useEffect(() => {
-		const {current} = playerRef;
-		if (!current) {
-			return;
-		}
-
-		const onTimeUpdate = () => {
-			setTime(current.getCurrentFrame());
-		};
-
-		current.addEventListener('frameupdate', onTimeUpdate);
-
-		return () => {
-			current.removeEventListener('frameupdate', onTimeUpdate);
-		};
-	}, [playerRef]);
-
-	return (
-		<div
-			style={{
-				fontSize: 16,
-				fontVariantNumeric: 'tabular-nums',
-			}}
-		>
-			<span>{formatTime(time / fps)}</span>
-		</div>
-	);
-};

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

@@ -1,106 +0,0 @@
-import React, {useMemo} from 'react';
-import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
-import type {RemoteData} from './Comp';
-
-const TrendingRepoItem: React.FC<{
-	readonly repo: string;
-	readonly theme: 'dark' | 'light';
-	readonly number: number;
-}> = ({repo, theme, number}) => {
-	const frame = useCurrentFrame();
-	const {fps} = useVideoConfig();
-
-	const progress = spring({
-		fps,
-		frame,
-		config: {
-			damping: 200,
-		},
-		delay: number * 10 + 20,
-	});
-
-	const item: React.CSSProperties = useMemo(() => {
-		return {
-			lineHeight: 1.1,
-			fontFamily: 'GTPlanar',
-			fontWeight: '500',
-			color: theme === 'dark' ? 'white' : 'black',
-			fontFeatureSettings: "'ss03' 1",
-			opacity: progress,
-		};
-	}, [progress, theme]);
-
-	return (
-		<div style={item}>
-			{number}. {repo}
-		</div>
-	);
-};
-
-export const TrendingRepos: React.FC<{
-	readonly theme: 'dark' | 'light';
-	readonly trending: RemoteData | null;
-}> = ({theme, trending}) => {
-	const fill = theme === 'light' ? '#666' : '#999';
-	const frame = useCurrentFrame();
-	const {fps} = useVideoConfig();
-
-	const progress1 = spring({
-		fps,
-		frame,
-		config: {
-			damping: 200,
-		},
-		delay: 0,
-	});
-
-	if (trending === null) {
-		return null;
-	}
-
-	return (
-		<AbsoluteFill>
-			<AbsoluteFill
-				style={{
-					justifyContent: 'center',
-					paddingLeft: 20,
-					paddingRight: 20,
-				}}
-			>
-				<div>
-					<div
-						style={{
-							color: fill,
-							fontFamily: 'GTPlanar',
-							fontWeight: '500',
-							fontSize: 12,
-							opacity: progress1,
-						}}
-					>
-						{new Intl.DateTimeFormat('en-US', {
-							weekday: 'long',
-							month: 'long',
-							day: 'numeric',
-						}).format(new Date(trending.date))}
-					</div>
-					<div
-						style={{
-							color: '#0b84f3',
-							fontFamily: 'GTPlanar',
-							fontWeight: '500',
-							fontSize: 16,
-							marginBottom: 15,
-							opacity: progress1,
-							lineHeight: 1,
-						}}
-					>
-						Trending repositories
-					</div>
-					<TrendingRepoItem number={1} repo={trending.repos[0]} theme={theme} />
-					<TrendingRepoItem number={2} repo={trending.repos[1]} theme={theme} />
-					<TrendingRepoItem number={3} repo={trending.repos[2]} theme={theme} />
-				</div>
-			</AbsoluteFill>
-		</AbsoluteFill>
-	);
-};

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

@@ -1,114 +0,0 @@
-import type {SVGProps} from 'react';
-import React from 'react';
-import {RED} from '../layout/colors';
-
-export const IconLeft: React.FC<SVGProps<SVGSVGElement>> = (props) => (
-	<svg viewBox="0 0 320 512" {...props}>
-		<path
-			fill="currentColor"
-			d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"
-		/>
-	</svg>
-);
-export const IconRight: React.FC<SVGProps<SVGSVGElement>> = (props) => (
-	<svg viewBox="0 0 320 512" {...props}>
-		<path
-			fill="currentColor"
-			d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
-		/>
-	</svg>
-);
-
-export const CancelIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg
-			aria-hidden="true"
-			focusable="false"
-			data-prefix="fas"
-			data-icon="times"
-			className="svg-inline--fa fa-times fa-w-11"
-			role="img"
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 352 512"
-			{...props}
-		>
-			<path
-				fill="currentColor"
-				d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-			/>
-		</svg>
-	);
-};
-
-export const PausedIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg
-			aria-hidden="true"
-			focusable="false"
-			data-prefix="fas"
-			data-icon="play"
-			className="svg-inline--fa fa-play fa-w-14"
-			role="img"
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 448 512"
-			{...props}
-		>
-			<path
-				fill="currentColor"
-				d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
-			/>
-		</svg>
-	);
-};
-
-export const PlayingIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 320 512"
-			fill="currentColor"
-			{...props}
-		>
-			<path d="M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z" />
-		</svg>
-	);
-};
-
-export const FullscreenIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 448 512"
-			fill="currentColor"
-			{...props}
-		>
-			<path d="M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z" />
-		</svg>
-	);
-};
-
-export const NotMutedIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-			viewBox="0 0 640 512"
-			fill="currentColor"
-		>
-			<path d="M32 160l0 192 128 0L304 480l48 0 0-448-48 0L160 160 32 160zM441.6 332.8C464.9 315.3 480 287.4 480 256s-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l28.8 38.4zm57.6 76.8c46.6-35 76.8-90.8 76.8-153.6s-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2s-22.6 88.9-57.6 115.2l28.8 38.4z" />
-		</svg>
-	);
-};
-
-export const IsMutedIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-			viewBox="0 0 640 512"
-			fill={RED}
-		>
-			<path d="M48.4 14.8L29.4 .1 0 38l19 14.7L591.5 497.2l19 14.7L639.9 474l-19-14.7-95.1-73.8C557 351.3 576 305.9 576 256c0-62.8-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2c0 38.8-15.3 74-40.3 99.9l-38.2-29.7C468.3 308.7 480 283.7 480 256c0-31.4-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l5.9 7.9L352 250.5 352 32l-48 0L195.2 128.7 48.4 14.8zM352 373.3L81.2 160 32 160l0 192 128 0L304 480l48 0 0-106.7z" />
-		</svg>
-	);
-};

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

@@ -1,158 +0,0 @@
-import type {PlayerRef} from '@remotion/player';
-import {Player} from '@remotion/player';
-import React, {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-	type CSSProperties,
-} from 'react';
-
-import {PALETTE} from '../layout/colors';
-import {useColorMode} from '../layout/use-color-mode';
-import {SectionTitle} from '../VideoAppsTitle';
-import {
-	getDataAndProps,
-	HomepageVideoComp,
-	type DemoPlayerProps,
-	type LocationAndTrending,
-	type RemoteData,
-} from './Comp';
-import {DemoError} from './DemoError';
-import {RenderButton} from './DemoRender';
-import {DownloadNudge} from './DownloadNudge';
-import {DragAndDropNudge} from './DragAndDropNudge';
-import {PlayerControls} from './PlayerControls';
-import {ThemeNudge} from './ThemeNudge';
-import type {Location} from './types';
-
-const style: React.CSSProperties = {
-	width: '100%',
-	aspectRatio: '640 / 360',
-	borderBottom: `2px solid ${PALETTE.BOX_STROKE}`,
-	touchAction: 'none', // prevent page from scrolling when dragging children on mobile
-};
-
-const playerWrapper: CSSProperties = {
-	border: `2px solid ${PALETTE.BOX_STROKE}`,
-	borderBottom: `4px solid ${PALETTE.BOX_STROKE}`,
-	borderRadius: 8,
-	width: '100%',
-	overflow: 'hidden',
-};
-
-export const Demo: React.FC = () => {
-	const {colorMode} = useColorMode();
-	const [data, setData] = useState<LocationAndTrending | null>(null);
-	const ref = useRef<PlayerRef>(null);
-
-	const [isFullscreen, setIsFullscreen] = useState(false);
-	const [cardOrder, setCardOrder] = useState([0, 1, 2, 3]);
-	const [emojiIndex, setEmojiIndex] = useState<number>(0);
-	const [error, setError] = useState(false);
-
-	useEffect(() => {
-		getDataAndProps()
-			.then((d) => {
-				setData(d);
-			})
-			.catch((err) => {
-				// eslint-disable-next-line no-console
-				console.log(err);
-				setError(true);
-			});
-	}, []);
-
-	useEffect(() => {
-		const {current: playerRef} = ref;
-		if (!playerRef || !data) {
-			return;
-		}
-
-		const onFullscreenChange = () => {
-			setIsFullscreen(playerRef.isFullscreen());
-		};
-
-		playerRef.addEventListener('fullscreenchange', onFullscreenChange);
-
-		return () => {
-			playerRef.removeEventListener('fullscreenchange', onFullscreenChange);
-		};
-	}, [data]);
-
-	const updateCardOrder = useCallback((newCardOrder: number[]) => {
-		setCardOrder(newCardOrder);
-	}, []);
-
-	const props: DemoPlayerProps = useMemo(() => {
-		return {
-			theme: colorMode,
-			onToggle: () => {
-				ref.current?.toggle();
-			},
-			cardOrder,
-			updateCardOrder,
-			location: data?.location ?? null,
-			trending: data?.trending ?? null,
-			onClickLeft: () => {
-				setEmojiIndex((e) => e - 1);
-			},
-			onClickRight: () => {
-				setEmojiIndex((e) => e + 1);
-			},
-			emojiIndex,
-		};
-	}, [cardOrder, emojiIndex, colorMode, data, updateCardOrder]);
-
-	const onError = useCallback(() => {
-		setError(true);
-	}, []);
-
-	return (
-		<div>
-			<br />
-			<br />
-			<SectionTitle>Demo</SectionTitle>
-			<div style={{height: 140, position: 'relative'}}>
-				<DragAndDropNudge />
-				<ThemeNudge />
-			</div>
-			<div style={playerWrapper}>
-				<Player
-					ref={ref}
-					component={HomepageVideoComp}
-					compositionWidth={640}
-					compositionHeight={360}
-					durationInFrames={120}
-					fps={30}
-					autoPlay
-					controls={isFullscreen}
-					clickToPlay={false}
-					style={style}
-					initiallyMuted
-					inputProps={props}
-					loop
-				/>
-				<PlayerControls playerRef={ref} durationInFrames={120} fps={30}>
-					<RenderButton
-						onError={onError}
-						renderData={
-							data
-								? {
-										cardOrder,
-										emojiIndex,
-										location: data.location as Location,
-										theme: colorMode,
-										trending: data.trending as RemoteData,
-									}
-								: null
-						}
-					/>
-				</PlayerControls>
-			</div>
-			{error ? <DemoError /> : null}
-			<DownloadNudge />
-		</div>
-	);
-};

package/src/components/homepage/Demo/math.ts

@@ -1,43 +0,0 @@
-export type Position = {
-	x: number;
-	y: number;
-};
-
-export const paddingAndMargin = 20;
-const height = 360;
-const width = 640;
-export const cardHeight = (height - paddingAndMargin * 3) / 2;
-export const cardWidth = (width - paddingAndMargin * 3) / 2;
-
-export const getPositionForIndex = (index: number): Position => {
-	const x =
-		index % 2 === 0 ? paddingAndMargin : cardWidth + paddingAndMargin * 2;
-	const y = index < 2 ? paddingAndMargin : cardHeight + paddingAndMargin * 2;
-
-	return {x, y};
-};
-
-export const getInitialPositions = () => {
-	return new Array(4).fill(true).map((_, i) => getPositionForIndex(i));
-};
-
-export const getIndexFromPosition = (clientX: number, clientY: number) => {
-	const left = clientX < cardWidth / 2 + paddingAndMargin;
-	const top = clientY < cardHeight / 2 + paddingAndMargin;
-
-	if (left && top) {
-		return 0;
-	}
-
-	if (!left && top) {
-		return 1;
-	}
-
-	if (left && !top) {
-		return 2;
-	}
-
-	if (!left && !top) {
-		return 3;
-	}
-};

package/src/components/homepage/Demo/types.ts

@@ -1,6 +0,0 @@
-export type Location = {
-	country: string;
-	city: string;
-	latitude: number | string;
-	longitude: number | string;
-};

package/src/components/homepage/Editor.tsx

@@ -1,67 +0,0 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-
-export const LightningFastEditor: React.FC = () => {
-	const ref = useRef<HTMLDivElement>(null);
-	const videoRef = useRef<HTMLVideoElement>(null);
-	const [isIntersecting, setIsIntersecting] = useState(false);
-
-	const callback: IntersectionObserverCallback = useCallback((data) => {
-		const {isIntersecting: intersecting} = data[0];
-		setIsIntersecting(intersecting);
-		if (intersecting) {
-			videoRef.current?.play();
-		} else {
-			videoRef.current?.pause();
-		}
-	}, []);
-
-	useEffect(() => {
-		const {current} = ref;
-		if (!current) {
-			return;
-		}
-
-		const observer = new IntersectionObserver(callback, {
-			root: null,
-			threshold: 0.2,
-		});
-		observer.observe(current);
-
-		return () => observer.unobserve(current);
-	}, [callback]);
-	return (
-		<div
-			ref={ref}
-			className={
-				'flex flex-col-reverse lg:flex-row justify-start lg:justify-end lg:text-right items-start lg:items-center'
-			}
-		>
-			<div>
-				<video
-					src="/img/player-demo.mp4"
-					autoPlay
-					muted
-					playsInline
-					loop
-					style={{
-						animationPlayState: isIntersecting ? 'running' : 'paused',
-						width: 500,
-						maxWidth: '100%',
-						borderRadius: 7,
-						overflow: 'hidden',
-					}}
-				/>
-			</div>
-			<div style={{flex: 1}}>
-				<h2 className={'fontbrand text-4xl'}>
-					Fast and <br /> <span className="text-brand">delightful</span> editing
-				</h2>
-				<p className="leading-relaxed">
-					Preview your video in the browser. <br />
-					Fast refresh while the video is playing. <br />
-					Scrub through the timeline to get every frame perfect.
-				</p>
-			</div>
-		</div>
-	);
-};