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

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

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

@@ -1,83 +0,0 @@
-import type {CallbackListener, PlayerRef} from '@remotion/player';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {PALETTE} from '../layout/colors';
-import {IsMutedIcon, NotMutedIcon} from './icons';
-
-export const PlayerVolume: React.FC<{
-	readonly playerRef: React.RefObject<PlayerRef | null>;
-}> = ({playerRef}) => {
-	const [muted, setIsMuted] = useState(
-		() => playerRef.current?.isMuted() ?? true,
-	);
-
-	const [isHovered, setIsHovered] = useState(false);
-	const timerRef = useRef<Timer | null>(null);
-
-	useEffect(() => {
-		const {current} = playerRef;
-
-		if (!current) {
-			return;
-		}
-
-		const onMutedChange: CallbackListener<'mutechange'> = (e) => {
-			setIsMuted(e.detail.isMuted);
-		};
-
-		current.addEventListener('mutechange', onMutedChange);
-
-		return () => {
-			current.removeEventListener('mutechange', onMutedChange);
-		};
-	}, [playerRef]);
-
-	useEffect(() => {
-		if (isHovered) {
-			document.body.style.userSelect = 'none';
-		} else {
-			document.body.style.userSelect = 'auto';
-		}
-	}, [isHovered]);
-
-	const onClick = useCallback(() => {
-		if (timerRef.current !== null) {
-			clearTimeout(timerRef.current);
-			timerRef.current = null;
-		}
-
-		if (playerRef.current!.isMuted()) {
-			playerRef.current!.unmute();
-		} else {
-			playerRef.current!.mute();
-		}
-	}, [playerRef]);
-
-	return (
-		<div
-			className={'relative cursor-pointer block pl-4 pr-4 h-full'}
-			onMouseEnter={() => setIsHovered(true)}
-		>
-			<button
-				type="button"
-				onClick={onClick}
-				style={{
-					background: 'transparent',
-					border: 0,
-					cursor: 'pointer',
-					padding: 0,
-					display: 'flex',
-					height: 50,
-					justifyContent: 'center',
-					alignItems: 'center',
-					color: PALETTE.TEXT_COLOR,
-				}}
-			>
-				{muted ? (
-					<IsMutedIcon style={{height: 20}} />
-				) : (
-					<NotMutedIcon style={{height: 20}} />
-				)}
-			</button>
-		</div>
-	);
-};

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

@@ -1,38 +0,0 @@
-import {makeCircle, makePie} from '@remotion/shapes';
-import React from 'react';
-import {PALETTE} from '../layout/colors';
-
-export const Progress: React.FC<{
-	readonly progress: number;
-}> = ({progress}) => {
-	const inner = makeCircle({
-		radius: 10,
-	});
-
-	const outer = makePie({
-		progress,
-		closePath: false,
-		radius: 10,
-	});
-
-	return (
-		<svg
-			viewBox={`0 0 ${inner.width} ${inner.height}`}
-			style={{overflow: 'visible', height: 22}}
-		>
-			<path
-				d={inner.path}
-				stroke={PALETTE.BORDER_COLOR}
-				strokeWidth={4}
-				fill="transparent"
-			/>
-			<path
-				d={outer.path}
-				stroke={PALETTE.BRAND}
-				strokeWidth={4}
-				fill="transparent"
-				strokeLinecap="round"
-			/>
-		</svg>
-	);
-};

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

@@ -1,60 +0,0 @@
-import React, {useMemo} from 'react';
-import {PALETTE} from '../layout/colors';
-
-const viewBox = 100;
-const lines = 8;
-const className = '__remotion_spinner_line';
-const remotionSpinnerAnimation = '__remotion_spinner_animation';
-
-// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
-const translated =
-	'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
-
-export const Spinner: React.FC<{
-	readonly size: number;
-	readonly duration: number;
-}> = ({size, duration}) => {
-	const style = useMemo(() => {
-		return {
-			width: size,
-			height: size,
-		};
-	}, [size]);
-
-	return (
-		<>
-			<style type="text/css">{`
-				@keyframes ${remotionSpinnerAnimation} {
-          0% {
-            opacity: 1;
-          }
-          100% {
-            opacity: 0.15;
-          }
-        }
-        
-        .${className} {
-            animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
-        }        
-			`}</style>
-			<svg style={style} viewBox={`0 0 ${viewBox} ${viewBox}`}>
-				{new Array(lines).fill(true).map((_, index) => {
-					return (
-						<path
-							// eslint-disable-next-line react/no-array-index-key
-							key={index}
-							className={className}
-							style={{
-								rotate: `${(index * Math.PI * 2) / lines}rad`,
-								transformOrigin: 'center center',
-								animationDelay: `${index * (duration / lines) - duration}s`,
-							}}
-							d={translated}
-							fill={PALETTE.TEXT_COLOR}
-						/>
-					);
-				})}
-			</svg>
-		</>
-	);
-};

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

@@ -1,54 +0,0 @@
-import React, {useCallback} from 'react';
-
-export const Switcher: React.FC<{
-	readonly type: 'left' | 'right';
-	readonly theme: 'dark' | 'light';
-	readonly onTap: () => void;
-}> = ({type, theme, onTap}) => {
-	const onPointerDown = useCallback(
-		(e: React.PointerEvent<HTMLDivElement>) => {
-			e.stopPropagation();
-			onTap();
-		},
-		[onTap],
-	);
-
-	const switcherSize = 40;
-
-	return (
-		<div
-			onPointerDown={onPointerDown}
-			style={{
-				height: switcherSize,
-				width: switcherSize,
-				borderRadius: switcherSize / 2,
-				position: 'absolute',
-				marginLeft: -switcherSize / 2,
-				top: '50%',
-				left: type === 'left' ? 0 : '100%',
-				marginTop: -switcherSize / 2,
-				backgroundColor: theme === 'dark' ? '#222' : '#fafafa',
-				color: theme === 'dark' ? 'white' : '#222',
-				cursor: 'pointer',
-				justifyContent: 'center',
-				alignItems: 'center',
-				display: 'flex',
-			}}
-		>
-			<svg style={{height: switcherSize / 2}} viewBox="0 0 320 512">
-				{type === 'left' ? (
-					<path
-						fill="currentcolor"
-						d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
-					/>
-				) : null}
-				{type === 'right' ? (
-					<path
-						fill="currentcolor"
-						d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
-					/>
-				) : null}
-			</svg>
-		</div>
-	);
-};

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

@@ -1,44 +0,0 @@
-import React from 'react';
-import {AbsoluteFill} from 'remotion';
-import {TemperatureNumber} from './TemperatureNumber';
-
-export const Temperature: React.FC<{
-	readonly theme: 'dark' | 'light';
-	readonly city: string | null;
-	readonly temperatureInCelsius: number | null;
-}> = ({theme, city, temperatureInCelsius}) => {
-	if (temperatureInCelsius === null) {
-		return null;
-	}
-
-	return (
-		<AbsoluteFill>
-			<AbsoluteFill
-				style={{
-					alignItems: 'center',
-					justifyContent: 'center',
-					paddingLeft: 20,
-					paddingRight: 20,
-				}}
-			>
-				<div
-					style={{
-						color: '#0b84f3',
-						fontFamily: 'GTPlanar',
-						fontWeight: '500',
-						fontSize: 13,
-						textAlign: 'center',
-						marginTop: 5,
-					}}
-				>
-					Temperature in {city}
-				</div>
-
-				<TemperatureNumber
-					theme={theme}
-					temperatureInCelsius={temperatureInCelsius}
-				/>
-			</AbsoluteFill>
-		</AbsoluteFill>
-	);
-};