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

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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,325 @@
+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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,44 @@
+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>
+	);
+};