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

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

package/src/components/homepage/EvaluateRemotion.tsx

@@ -1,92 +0,0 @@
-// Adjustments to the EvaluateRemotionSection.tsx to separate the flex box into two boxes
-// with specified alignment and positioning requirements.
-
-import React, {useEffect, useState} from 'react';
-import {BlueButton} from './layout/Button';
-
-const EvaluateRemotionSection: React.FC = () => {
-	const [dailyAvatars, setDailyAvatars] = useState<string[]>([]);
-
-	useEffect(() => {
-		const avatars = [
-			'/img/freelancers/alex.jpeg',
-			'/img/freelancers/antoine.jpeg',
-			'/img/freelancers/ayush.png',
-			'/img/freelancers/benjamin.jpeg',
-			'/img/freelancers/florent.jpeg',
-			'/img/freelancers/karel.jpeg',
-			'/img/freelancers/lorenzo.jpeg',
-			'/img/freelancers/mickael.jpeg',
-			'/img/freelancers/mohit.jpeg',
-			'/img/freelancers/pramod.jpg',
-			'/img/freelancers/pranav.jpg',
-			'/img/freelancers/rahul.png',
-			'/img/freelancers/ray.jpeg',
-			'/img/freelancers/stephen.png',
-			'/img/freelancers/umungo.png',
-			'/img/freelancers/yehor.jpeg',
-			// Add more avatar paths here
-		];
-
-		const selectedAvatars: string[] = [];
-		for (let i = 0; i < 3; i++) {
-			const index = Math.floor(Math.random() * avatars.length);
-			selectedAvatars.push(avatars[index]);
-			avatars.splice(index, 1); // Remove selected avatar to avoid duplicates
-		}
-
-		setDailyAvatars(selectedAvatars);
-	}, []);
-
-	return (
-		<div className="flex flex-col lg:flex-row gap-2">
-			<div className={'card flex-1 flex flex-col'}>
-				<div className={'fontbrand text-2xl font-bold'}>
-					Evaluate Remotion for your company
-				</div>
-				<p className={'text-muted fontbrand leading-snug'}>
-					Book a 20 minute call with us to get all your questions answered.
-				</p>
-				<div className="flex-1" />
-				<a
-					target="_blank"
-					href="https://cal.com/remotion/evaluate"
-					style={{textDecoration: 'none'}}
-				>
-					<BlueButton size="sm" loading={false}>
-						Schedule a call
-					</BlueButton>
-				</a>
-			</div>
-			<div className={'card flex-1 flex flex-col'}>
-				<div className={'fontbrand text-2xl font-bold'}>
-					Get help for your projects
-				</div>
-				<p className={'text-muted fontbrand leading-snug'}>
-					Contact our experts for help and work.
-				</p>
-				<div className="flex-1" />
-				<div className={'flex flex-row justify-between'}>
-					<a href="/experts" style={{textDecoration: 'none'}}>
-						<BlueButton size="sm" loading={false}>
-							Remotion Experts
-						</BlueButton>
-					</a>
-					<div className={'flex justify-end items-end gap-3'}>
-						{dailyAvatars.map((avatar) => (
-							<div
-								key={avatar}
-								className={
-									'w-12 h-12 rounded-full bg-muted bg-cover bg-center -ml-5 border-2 border-black'
-								}
-								style={{backgroundImage: `url(${avatar})`}}
-							/>
-						))}
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default EvaluateRemotionSection;

package/src/components/homepage/FreePricing.tsx

@@ -1,295 +0,0 @@
-import React, {useCallback, useMemo} from 'react';
-import {cn} from '../../cn';
-import {Counter} from './Counter';
-import {InfoTooltip} from './InfoTooltip';
-import {PricingBulletPoint} from './PricingBulletPoint';
-
-const Container: React.FC<{readonly children: React.ReactNode}> = ({
-	children,
-}) => {
-	return (
-		<div className={'flex flex-col border-effect rounded-xl p-5 bg-pane'}>
-			{children}
-		</div>
-	);
-};
-
-const Title: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return (
-		<div className="text-4xl font-bold leading-none fontbrand mt-2 mb-5">
-			{children}
-		</div>
-	);
-};
-
-const Audience: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return <div className={'fontbrand text-lg leading-none'}>{children}</div>;
-};
-
-const BottomInfo: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-	children,
-	className,
-	...props
-}) => {
-	return (
-		<div
-			className={cn(className, 'text-[var(--subtitle)] fontbrand text-sm')}
-			{...props}
-		>
-			{children}
-		</div>
-	);
-};
-
-const PriceTag: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return (
-		<div
-			className={
-				'fontbrand text-2xl font-bold min-w-[80px] w-auto text-right shrink-0 ml-4'
-			}
-		>
-			{children}
-		</div>
-	);
-};
-
-const SmallPriceTag: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return (
-		<div
-			className={
-				'fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0 ml-4'
-			}
-		>
-			{children}
-		</div>
-	);
-};
-
-export const FreePricing: React.FC = () => {
-	return (
-		<Container>
-			<Audience>For individuals and companies of up to 3 people</Audience>
-			<Title>Free License</Title>
-			<PricingBulletPoint text="Unlimited videos" checked />
-			<PricingBulletPoint text="Commercial use allowed" checked />
-			<PricingBulletPoint text="Self-hosted cloud rendering allowed" checked />
-			<PricingBulletPoint
-				text="Must upgrade when your team grows"
-				checked={false}
-			/>
-		</Container>
-	);
-};
-
-const textUnitWrapper: React.CSSProperties = {
-	display: 'flex',
-	flexDirection: 'column',
-};
-
-export const EnterpriseLicense: React.FC = () => {
-	return (
-		<Container>
-			<Audience>For advanced needs</Audience>
-			<Title>Enterprise License</Title>
-			<PricingBulletPoint text="Everything in Company License" checked />
-			<PricingBulletPoint text="Custom terms, billing and pricing" checked />
-			<PricingBulletPoint text="Compliance forms" checked />
-			<PricingBulletPoint text="Prioritized feature requests" checked />
-			<PricingBulletPoint text="Private support channel" checked />
-			<PricingBulletPoint text="Monthly consulting session" checked />
-			<div style={{height: 30}} />
-			<div className={'flex flex-row justify-end'}>
-				<div
-					style={{
-						...textUnitWrapper,
-						alignItems: 'flex-end',
-					}}
-				>
-					<PriceTag>
-						<a
-							className={
-								'cursor-pointer no-underline text-inherit hover:text-brand'
-							}
-							target={'_blank'}
-							href="https://www.remotion.pro/contact"
-						>
-							Contact us
-						</a>
-					</PriceTag>
-					<div className={'text-[var(--subtitle)] fontbrand text-sm'}>
-						Starting at $500 per month
-					</div>
-				</div>
-			</div>
-		</Container>
-	);
-};
-
-const SEAT_PRICE = 25;
-const RENDER_UNIT_PRICE = 10;
-const WEBCODECS_UNIT_PRICE = 10;
-
-export const CompanyPricing: React.FC = () => {
-	const [devSeatCount, setDevSeatCount] = React.useState(1);
-	const [cloudUnitCount, setCloudUnitCount] = React.useState(1);
-	const [webcodecsUnits, setWebcodecsUnits] = React.useState(1);
-
-	const formatPrice = useCallback((price: number) => {
-		const formatter = new Intl.NumberFormat('en-US', {
-			style: 'currency',
-			currency: 'USD',
-			maximumFractionDigits: 0,
-		});
-		return formatter.format(price);
-	}, []);
-
-	const totalPrice = useMemo(() => {
-		return Math.max(
-			100,
-			devSeatCount * SEAT_PRICE +
-				cloudUnitCount * RENDER_UNIT_PRICE +
-				webcodecsUnits * WEBCODECS_UNIT_PRICE,
-		);
-	}, [cloudUnitCount, devSeatCount, webcodecsUnits]);
-
-	const totalPriceString = useMemo(() => {
-		return formatPrice(totalPrice);
-	}, [formatPrice, totalPrice]);
-
-	const rendersPerMonth = useMemo(() => {
-		const formatter = new Intl.NumberFormat('en-US', {
-			maximumFractionDigits: 0,
-		});
-		return formatter.format(cloudUnitCount * 1000);
-	}, [cloudUnitCount]);
-
-	const conversionsPerMonth = useMemo(() => {
-		const formatter = new Intl.NumberFormat('en-US', {
-			maximumFractionDigits: 0,
-		});
-		return formatter.format(webcodecsUnits * 1000);
-	}, [webcodecsUnits]);
-
-	return (
-		<Container>
-			<Audience>For collaborations and companies of 4+ people</Audience>
-			<Title>Company License</Title>
-			<PricingBulletPoint text="Commercial use allowed" checked />
-			<PricingBulletPoint text="Self-hosted cloud rendering allowed" checked />
-			<PricingBulletPoint text="Prioritized Support" checked />
-			<PricingBulletPoint
-				text={
-					<span>
-						<a
-							href="https://remotion.dev/recorder"
-							className="underline underline-offset-4 text-inherit"
-						>
-							Remotion Recorder
-						</a>{' '}
-						included
-					</span>
-				}
-				checked
-			/>
-			<PricingBulletPoint text="$250 Mux credits" checked>
-				<InfoTooltip text="Credits for Mux.com. Applies only to new Mux customers." />
-			</PricingBulletPoint>
-			<div style={{height: 30}} />
-			<div className={'flex flex-row items-center'}>
-				<div style={textUnitWrapper}>
-					<div className={'fontbrand font-bold text-lg'}>Developer Seats</div>
-					<div className={'text-muted fontbrand text-sm'}>
-						Number of developers working with Remotion
-					</div>
-				</div>
-				<div style={{flex: 3}} />
-				<Counter count={devSeatCount} setCount={setDevSeatCount} minCount={1} />
-				<SmallPriceTag>
-					$
-					{new Intl.NumberFormat('en-US', {
-						maximumFractionDigits: 0,
-					}).format(SEAT_PRICE * devSeatCount)}
-				</SmallPriceTag>
-			</div>
-			<div style={{height: 14}} />
-			<div className={'flex flex-row items-center'}>
-				<div style={textUnitWrapper}>
-					<div className={'fontbrand font-bold text-lg'}>
-						Cloud Rendering Units
-					</div>
-					<div className={'text-muted fontbrand text-sm'}>
-						Allows for {rendersPerMonth}{' '}
-						<a
-							href="https://www.remotion.dev/docs/compare-ssr"
-							className="underline underline-offset-4 text-inherit"
-						>
-							self-hosted renders per month
-						</a>{' '}
-						each
-					</div>
-				</div>
-				<div style={{flex: 3}} />
-				<Counter
-					count={cloudUnitCount}
-					setCount={setCloudUnitCount}
-					minCount={0}
-				/>
-				<SmallPriceTag>
-					$
-					{new Intl.NumberFormat('en-US', {
-						maximumFractionDigits: 0,
-					}).format(RENDER_UNIT_PRICE * cloudUnitCount)}
-				</SmallPriceTag>
-			</div>
-			<div style={{height: 14}} />
-			<div className={'flex flex-row items-center'}>
-				<div style={textUnitWrapper}>
-					<div className={'fontbrand font-bold text-lg'}>
-						WebCodecs Conversion Units
-					</div>
-					<div className={'text-muted fontbrand text-sm'}>
-						Allows for{' '}
-						<a
-							className="underline underline-offset-4 text-inherit"
-							href="https://remotion.dev/webcodecs"
-						>
-							{conversionsPerMonth} client-side video conversions{' '}
-						</a>
-					</div>
-				</div>
-				<div style={{flex: 3}} />
-				<Counter
-					count={webcodecsUnits}
-					setCount={setWebcodecsUnits}
-					minCount={0}
-				/>
-				<SmallPriceTag>
-					$
-					{new Intl.NumberFormat('en-US', {
-						maximumFractionDigits: 0,
-					}).format(RENDER_UNIT_PRICE * webcodecsUnits)}
-				</SmallPriceTag>
-			</div>
-			<div style={{height: 20}} />
-			<div className={'flex flex-row justify-end'}>
-				<div style={{...textUnitWrapper, alignItems: 'flex-end'}}>
-					<PriceTag>{totalPriceString}/mo</PriceTag>
-					<BottomInfo
-						data-visible={totalPrice <= 100}
-						className="opacity-0 data-[visible=true]:opacity-100 transition-opacity"
-					>
-						The minimum is $100 per month
-					</BottomInfo>
-				</div>
-			</div>
-		</Container>
-	);
-};