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

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

@@ -1,198 +0,0 @@
-import type {EmojiName} from '@remotion/animated-emoji';
-import React, {
-	forwardRef,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useRef,
-} from 'react';
-import {AbsoluteFill, getRemotionEnvironment} from 'remotion';
-import {DisplayedEmoji} from './DisplayedEmoji';
-
-export type EmojiCardRef = {
-	onLeft: () => void;
-	onRight: () => void;
-};
-
-type Transforms = [number, number, number];
-
-type Anim = {
-	ref1: HTMLDivElement;
-	ref2: HTMLDivElement;
-	ref3: HTMLDivElement;
-	transforms: Transforms;
-};
-
-const applyTransforms = ({ref1, ref2, ref3, transforms}: Anim) => {
-	ref1.style.transform = `translateX(${transforms[0]}%)`;
-	ref2.style.transform = `translateX(${transforms[1]}%)`;
-	ref3.style.transform = `translateX(${transforms[2]}%)`;
-};
-
-const waitForRaq = async () => {
-	await new Promise((resolve) => {
-		requestAnimationFrame(resolve);
-	});
-};
-
-const moveLeft = async ({ref1, ref2, ref3, transforms}: Anim) => {
-	for (let i = 0; i < 20; i++) {
-		for (const idx in transforms) {
-			transforms[idx] -= 5;
-			if (transforms[idx] <= -200) {
-				transforms[idx] += 300;
-			}
-		}
-
-		applyTransforms({ref1, ref2, ref3, transforms});
-		await waitForRaq();
-	}
-};
-
-const moveRight = async ({ref1, ref2, ref3, transforms}: Anim) => {
-	for (let i = 0; i < 20; i++) {
-		for (const idx in transforms) {
-			transforms[idx] += 5;
-			if (transforms[idx] >= 100) {
-				transforms[idx] -= 300;
-			}
-		}
-
-		applyTransforms({ref1, ref2, ref3, transforms});
-		await waitForRaq();
-	}
-};
-
-const emojiStyle: React.CSSProperties = {
-	width: '100%',
-	position: 'absolute',
-	top: 'calc(50% - 50px)',
-};
-
-export type EmojiCardProps = {
-	readonly emojiIndex: EmojiName;
-};
-
-const EmojiCardRefFn: React.ForwardRefRenderFunction<
-	EmojiCardRef,
-	EmojiCardProps
-> = ({emojiIndex}, ref) => {
-	const ref1 = useRef<HTMLDivElement>(null);
-	const ref2 = useRef<HTMLDivElement>(null);
-	const ref3 = useRef<HTMLDivElement>(null);
-	const transforms = useRef<Transforms>([-100, 0, 100]);
-
-	const onLeft = useCallback(() => {
-		if (!ref1.current || !ref2.current || !ref3.current) {
-			return;
-		}
-
-		moveLeft({
-			ref1: ref1.current,
-			ref2: ref2.current,
-			ref3: ref3.current,
-			transforms: transforms.current,
-		});
-	}, []);
-
-	const onRight = useCallback(() => {
-		if (!ref1.current || !ref2.current || !ref3.current) {
-			return;
-		}
-
-		moveRight({
-			ref1: ref1.current,
-			ref2: ref2.current,
-			ref3: ref3.current,
-			transforms: transforms.current,
-		});
-	}, []);
-
-	useEffect(() => {
-		if (!ref1.current || !ref2.current || !ref3.current) {
-			return;
-		}
-
-		applyTransforms({
-			ref1: ref1.current,
-			ref2: ref2.current,
-			ref3: ref3.current,
-			transforms: transforms.current,
-		});
-	}, []);
-
-	useImperativeHandle(ref, () => {
-		return {
-			onLeft,
-			onRight,
-		};
-	}, [onLeft, onRight]);
-
-	useEffect(() => {
-		if (!ref1.current || !ref2.current || !ref3.current) {
-			return;
-		}
-
-		applyTransforms({
-			ref1: ref1.current,
-			ref2: ref2.current,
-			ref3: ref3.current,
-			transforms: transforms.current,
-		});
-	}, []);
-
-	return (
-		<AbsoluteFill
-			style={{
-				justifyContent: 'center',
-				alignItems: 'center',
-				overflow: 'hidden',
-			}}
-		>
-			<div
-				style={{
-					color: '#0b84f3',
-					fontFamily: 'GTPlanar',
-					fontWeight: '500',
-					fontSize: 13,
-					textAlign: 'center',
-					position: 'absolute',
-					marginTop: -90,
-				}}
-			>
-				Choose an emoji
-			</div>
-			<div
-				style={{
-					position: 'absolute',
-					width: '100%',
-					display: 'flex',
-					whiteSpace: 'nowrap',
-					height: '100%',
-				}}
-			>
-				{getRemotionEnvironment().isRendering ? (
-					<div style={emojiStyle}>
-						<DisplayedEmoji emoji={emojiIndex} />
-					</div>
-				) : (
-					<>
-						<div ref={ref1} style={emojiStyle}>
-							<DisplayedEmoji emoji={'melting'} />
-						</div>
-						<div ref={ref2} style={emojiStyle}>
-							<DisplayedEmoji emoji={'partying-face'} />
-						</div>
-						<div ref={ref3} style={emojiStyle}>
-							<DisplayedEmoji emoji={'fire'} />
-						</div>
-					</>
-				)}
-			</div>
-		</AbsoluteFill>
-	);
-};
-
-export const EmojiCard = forwardRef<EmojiCardRef, EmojiCardProps>(
-	EmojiCardRefFn,
-);

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

@@ -1,21 +0,0 @@
-import React from 'react';
-
-export const Minus: React.FC<{
-	readonly leftOffset: number;
-	readonly minusSignOpacity: number;
-}> = ({leftOffset, minusSignOpacity}) => {
-	return (
-		<div
-			style={{
-				position: 'relative',
-				marginLeft: -40 - leftOffset,
-				marginTop: 5,
-				width: 40,
-				opacity: minusSignOpacity,
-				textAlign: 'right',
-			}}
-		>
-			-
-		</div>
-	);
-};

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

@@ -1,66 +0,0 @@
-import type {PlayerRef} from '@remotion/player';
-import React, {useCallback, useEffect} from 'react';
-import {PALETTE} from '../layout/colors';
-import {PausedIcon, PlayingIcon} from './icons';
-
-const playerButtonStyle: React.CSSProperties = {
-	appearance: 'none',
-	border: 'none',
-	borderRadius: 0,
-	background: 'none',
-	display: 'flex',
-	justifyContent: 'center',
-	alignItems: 'center',
-	paddingRight: 20,
-	paddingLeft: 20,
-	cursor: 'pointer',
-	height: 50,
-	color: PALETTE.TEXT_COLOR,
-};
-
-export const PlayPauseButton: React.FC<{
-	readonly playerRef: React.RefObject<PlayerRef | null>;
-}> = ({playerRef}) => {
-	const [playing, setPlaying] = React.useState(true);
-
-	useEffect(() => {
-		const {current} = playerRef;
-		if (!current) {
-			return;
-		}
-
-		const onPlay = () => {
-			setPlaying(true);
-		};
-
-		const onPause = () => {
-			setPlaying(false);
-		};
-
-		current.addEventListener('play', onPlay);
-		current.addEventListener('pause', onPause);
-
-		return () => {
-			current.removeEventListener('play', onPlay);
-			current.removeEventListener('pause', onPause);
-		};
-	}, [playerRef]);
-
-	const onToggle = useCallback(() => {
-		playerRef.current?.toggle();
-	}, [playerRef]);
-
-	const playPauseIconStyle: React.CSSProperties = {
-		width: 15,
-	};
-
-	return (
-		<button type="button" style={playerButtonStyle} onClick={onToggle}>
-			{playing ? (
-				<PlayingIcon style={playPauseIconStyle} />
-			) : (
-				<PausedIcon style={playPauseIconStyle} />
-			)}
-		</button>
-	);
-};

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

@@ -1,48 +0,0 @@
-import type {PlayerRef} from '@remotion/player';
-import React from 'react';
-import {PALETTE} from '../layout/colors';
-import {PlayerSeekBar} from './PlayerSeekBar';
-import {PlayerVolume} from './PlayerVolume';
-import {PlayPauseButton} from './PlayPauseButton';
-import {TimeDisplay} from './TimeDisplay';
-
-const Separator: React.FC = () => {
-	return (
-		<div
-			style={{
-				borderRight: `2px solid ${PALETTE.BOX_STROKE}`,
-				height: 50,
-			}}
-		/>
-	);
-};
-
-export const PlayerControls: React.FC<{
-	readonly playerRef: React.RefObject<PlayerRef | null>;
-	readonly durationInFrames: number;
-	readonly fps: number;
-	readonly children: React.ReactNode;
-}> = ({playerRef, durationInFrames, fps, children}) => {
-	return (
-		<div className={'flex flex-row items-center bg-pane'}>
-			<PlayPauseButton playerRef={playerRef} />
-			<Separator />
-			<PlayerVolume playerRef={playerRef} />
-			<Separator />
-			<div style={{width: 15}} />
-			<TimeDisplay playerRef={playerRef} fps={fps} />
-			<div style={{width: 15}} />
-			<PlayerSeekBar
-				durationInFrames={durationInFrames}
-				playerRef={playerRef}
-				inFrame={null}
-				outFrame={null}
-				onSeekEnd={() => undefined}
-				onSeekStart={() => undefined}
-			/>
-			<div style={{width: 20}} />
-			<Separator />
-			{children}
-		</div>
-	);
-};

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

@@ -1,325 +0,0 @@
-import type {PlayerRef} from '@remotion/player';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {interpolate} from 'remotion';
-import {useElementSize} from '../layout/use-el-size';
-
-const getFrameFromX = (
-	clientX: number,
-	durationInFrames: number,
-	width: number,
-) => {
-	const pos = clientX;
-	const frame = Math.round(
-		interpolate(pos, [0, width], [0, durationInFrames - 1], {
-			extrapolateLeft: 'clamp',
-			extrapolateRight: 'clamp',
-		}),
-	);
-	return frame;
-};
-
-const BAR_HEIGHT = 5;
-const KNOB_SIZE = 12;
-const VERTICAL_PADDING = 4;
-
-const containerStyle: React.CSSProperties = {
-	userSelect: 'none',
-	WebkitUserSelect: 'none',
-	paddingTop: VERTICAL_PADDING,
-	paddingBottom: VERTICAL_PADDING,
-	boxSizing: 'border-box',
-	cursor: 'pointer',
-	position: 'relative',
-	touchAction: 'none',
-	flex: 1,
-};
-
-const barBackground: React.CSSProperties = {
-	height: BAR_HEIGHT,
-	backgroundColor: 'rgba(0, 0, 0, 0.25)',
-	width: '100%',
-	borderRadius: BAR_HEIGHT / 2,
-};
-
-const findBodyInWhichDivIsLocated = (div: HTMLElement) => {
-	let current = div;
-
-	while (current.parentElement) {
-		current = current.parentElement;
-	}
-
-	return current;
-};
-
-export const useHoverState = (
-	ref: React.RefObject<HTMLDivElement | null>,
-	hideControlsWhenPointerDoesntMove: boolean | number,
-) => {
-	const [hovered, setHovered] = useState(false);
-
-	useEffect(() => {
-		const {current} = ref;
-		if (!current) {
-			return;
-		}
-
-		let hoverTimeout: Timer;
-		const addHoverTimeout = () => {
-			if (hideControlsWhenPointerDoesntMove) {
-				clearTimeout(hoverTimeout);
-				hoverTimeout = setTimeout(
-					() => {
-						setHovered(false);
-					},
-					hideControlsWhenPointerDoesntMove === true
-						? 3000
-						: hideControlsWhenPointerDoesntMove,
-				);
-			}
-		};
-
-		const onHover = () => {
-			setHovered(true);
-			addHoverTimeout();
-		};
-
-		const onLeave = () => {
-			setHovered(false);
-			clearTimeout(hoverTimeout);
-		};
-
-		const onMove = () => {
-			setHovered(true);
-			addHoverTimeout();
-		};
-
-		current.addEventListener('mouseenter', onHover);
-		current.addEventListener('mouseleave', onLeave);
-		current.addEventListener('mousemove', onMove);
-
-		return () => {
-			current.removeEventListener('mouseenter', onHover);
-			current.removeEventListener('mouseleave', onLeave);
-			current.removeEventListener('mousemove', onMove);
-			clearTimeout(hoverTimeout);
-		};
-	}, [hideControlsWhenPointerDoesntMove, ref]);
-	return hovered;
-};
-
-export const PlayerSeekBar: React.FC<{
-	readonly durationInFrames: number;
-	readonly onSeekStart: () => void;
-	readonly onSeekEnd: () => void;
-	readonly inFrame: number | null;
-	readonly outFrame: number | null;
-	readonly playerRef: React.RefObject<PlayerRef | null>;
-}> = ({
-	durationInFrames,
-	onSeekEnd,
-	onSeekStart,
-	inFrame,
-	outFrame,
-	playerRef,
-}) => {
-	const containerRef = useRef<HTMLDivElement>(null);
-	const barHovered = useHoverState(containerRef, false);
-	const size = useElementSize(containerRef.current);
-	const [playing, setPlaying] = useState(false);
-
-	const [frame, setFrame] = useState(0);
-
-	useEffect(() => {
-		const {current} = playerRef;
-		if (!current) {
-			return;
-		}
-
-		const onFrameUpdate = () => {
-			setFrame(playerRef.current!.getCurrentFrame());
-		};
-
-		current.addEventListener('frameupdate', onFrameUpdate);
-
-		return () => {
-			current.removeEventListener('frameupdate', onFrameUpdate);
-		};
-	}, [playerRef]);
-
-	useEffect(() => {
-		const {current} = playerRef;
-		if (!current) {
-			return;
-		}
-
-		const onPlay = () => {
-			setPlaying(true);
-		};
-
-		const onPause = () => {
-			setPlaying(false);
-		};
-
-		current.addEventListener('play', onPlay);
-		current.addEventListener('pause', onPause);
-
-		return () => {
-			current.removeEventListener('play', onPlay);
-			current.removeEventListener('pause', onPause);
-		};
-	}, [playerRef]);
-
-	const [dragging, setDragging] = useState<
-		| {
-				dragging: false;
-		  }
-		| {
-				dragging: true;
-				wasPlaying: boolean;
-		  }
-	>({
-		dragging: false,
-	});
-
-	const width = size?.width ?? 0;
-
-	const onPointerDown = useCallback(
-		(e: React.PointerEvent<HTMLDivElement>) => {
-			if (e.button !== 0) {
-				return;
-			}
-
-			const posLeft = containerRef.current?.getBoundingClientRect()
-				.left as number;
-
-			const _frame = getFrameFromX(
-				e.clientX - posLeft,
-				durationInFrames,
-				width,
-			);
-			playerRef.current!.pause();
-			playerRef.current!.seekTo(_frame);
-			setDragging({
-				dragging: true,
-				wasPlaying: playing,
-			});
-			onSeekStart();
-		},
-		[durationInFrames, width, playerRef, playing, onSeekStart],
-	);
-
-	const onPointerMove = useCallback(
-		(e: PointerEvent) => {
-			if (!size) {
-				throw new Error('Player has no size');
-			}
-
-			if (!dragging.dragging) {
-				return;
-			}
-
-			const posLeft = containerRef.current?.getBoundingClientRect()
-				.left as number;
-
-			const _frame = getFrameFromX(
-				e.clientX - posLeft,
-				durationInFrames,
-				size.width,
-			);
-			playerRef.current!.seekTo(_frame);
-		},
-		[dragging.dragging, durationInFrames, playerRef, size],
-	);
-
-	const onPointerUp = useCallback(() => {
-		setDragging({
-			dragging: false,
-		});
-		if (!dragging.dragging) {
-			return;
-		}
-
-		if (dragging.wasPlaying) {
-			playerRef.current!.play();
-		} else {
-			playerRef.current!.pause();
-		}
-
-		onSeekEnd();
-	}, [dragging, onSeekEnd, playerRef]);
-
-	useEffect(() => {
-		if (!dragging.dragging) {
-			return;
-		}
-
-		const body = findBodyInWhichDivIsLocated(
-			containerRef.current as HTMLElement,
-		);
-
-		body.addEventListener('pointermove', onPointerMove);
-		body.addEventListener('pointerup', onPointerUp);
-		return () => {
-			body.removeEventListener('pointermove', onPointerMove);
-			body.removeEventListener('pointerup', onPointerUp);
-		};
-	}, [dragging.dragging, onPointerMove, onPointerUp]);
-
-	const knobStyle: React.CSSProperties = useMemo(() => {
-		return {
-			height: KNOB_SIZE,
-			width: KNOB_SIZE,
-			borderRadius: KNOB_SIZE / 2,
-			position: 'absolute',
-			top: VERTICAL_PADDING - KNOB_SIZE / 2 + 5 / 2,
-			backgroundColor: 'var(--ifm-font-color-base)',
-			left: Math.max(
-				0,
-				(frame / Math.max(1, durationInFrames - 1)) * width - KNOB_SIZE / 2,
-			),
-			outline: '2px solid var(--ifm-background-color)',
-			opacity: Number(barHovered),
-			transition: 'opacity 0.s ease',
-		};
-	}, [barHovered, durationInFrames, frame, width]);
-
-	const fillStyle: React.CSSProperties = useMemo(() => {
-		return {
-			height: BAR_HEIGHT,
-			backgroundColor: 'var(--ifm-font-color-base)',
-			width: ((frame - (inFrame ?? 0)) / (durationInFrames - 1)) * 100 + '%',
-			marginLeft: ((inFrame ?? 0) / (durationInFrames - 1)) * 100 + '%',
-			borderRadius: BAR_HEIGHT / 2,
-		};
-	}, [durationInFrames, frame, inFrame]);
-
-	const active: React.CSSProperties = useMemo(() => {
-		return {
-			height: BAR_HEIGHT,
-			backgroundColor: 'var(--ifm-font-color-base)',
-			opacity: 0.2,
-			width:
-				(((outFrame ?? durationInFrames - 1) - (inFrame ?? 0)) /
-					(durationInFrames - 1)) *
-					100 +
-				'%',
-			marginLeft: ((inFrame ?? 0) / (durationInFrames - 1)) * 100 + '%',
-			borderRadius: BAR_HEIGHT / 2,
-			position: 'absolute',
-		};
-	}, [durationInFrames, inFrame, outFrame]);
-
-	return (
-		<div
-			ref={containerRef}
-			onPointerDown={onPointerDown}
-			style={containerStyle}
-		>
-			<div style={barBackground}>
-				<div style={active} />
-				<div style={fillStyle} />
-			</div>
-			<div style={knobStyle} />
-		</div>
-	);
-};