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

package/src/components/homepage/VideoAppsShowcase.tsx

@@ -0,0 +1,276 @@
+import React, {useEffect, useRef, useState} from 'react';
+
+import {BlueButton} from './layout/Button';
+import {MuxVideo} from './MuxVideo';
+import {SectionTitle} from './VideoAppsTitle';
+
+const tabs = [
+	'Music visualization',
+	'Captions',
+	'Screencast',
+	'Year in review',
+];
+
+const videoApps = [
+	{
+		title: 'Banger.Show',
+		description:
+			'The all-in-one 3D visual creation tool for ambitious artists. Seamlessly craft visuals that match your sound and propel your brand forward.',
+		link: 'https://banger.show?ref=remotion',
+		videoWidth: 1080,
+		videoHeight: 1080,
+		muxId: 'riYdneJ2zu1Vqiayoe1qAZXcSIRq0201tHgSBbh9JbtlU',
+		buttonText: 'Banger.Show website',
+	},
+	{
+		title: 'Submagic',
+		description:
+			'A video editor for creating short-form content fast. Designed for creators, teams and agencies, it accelerates video editing with AI-powered features such as descriptions, zooms, sound effects and music.',
+		additionalInfo: '',
+		link: 'https://www.submagic.co/?ref=remotion',
+		videoWidth: 540,
+		videoHeight: 1080,
+		muxId: 'pxqGEjlBBntnXrEe4v00pYUBw3FPgUPKumfhSym00Vs004',
+		buttonText: 'Submagic website',
+	},
+	{
+		title: 'Remotion Recorder',
+		description:
+			'The Remotion Recorder is a video production tool built entirely in JavaScript. Create high-quality videos that feel native on each platform while only editing them once.',
+
+		link: 'https://www.remotion.pro/recorder',
+		videoWidth: 1080,
+		videoHeight: 1080,
+		muxId: 'pHlwqDZFUH00Aubo9M001ty3gZ6YW8z689XTd9R479ayE',
+		buttonText: 'More infos',
+	},
+	{
+		title: 'GitHub Unwrapped',
+		description:
+			'Your coding year in review. Get a personalized video of your GitHub activity.',
+		additionalInfo:
+			'Uncover your go-to language, peak productivity hours, and track your GitHub impact – all in one video.',
+		link: 'https://githubunwrapped.com/',
+		videoWidth: 1080,
+		videoHeight: 1080,
+		muxId: 'OwQFvqomOR00q6yj5SWwaA7DBg01NaCPKcOvczoZqCty00',
+		buttonText: 'GitHub Unwrapped website',
+	},
+];
+
+const VideoAppsShowcase: React.FC = () => {
+	const [activeTab, setActiveTab] = useState(0);
+	const [isMuted, setIsMuted] = useState(true);
+	const videoRef = useRef<HTMLVideoElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0].isIntersecting) {
+					if (videoRef.current && videoRef.current.paused) {
+						videoRef.current.muted = true; // Ensure video is muted before autoplay
+						setIsMuted(true); // Update state to reflect muted status
+						videoRef.current
+							.play()
+							.then(() => {})
+							.catch((error) => {
+								// eslint-disable-next-line no-console
+								console.error('Playback error:', error);
+							});
+					}
+				} else if (videoRef.current && !videoRef.current.paused) {
+					videoRef.current.pause();
+				}
+			},
+			{threshold: 0.5},
+		);
+
+		const currentContainer = containerRef.current;
+		if (currentContainer) {
+			observer.observe(currentContainer);
+		}
+
+		return () => {
+			if (currentContainer) {
+				observer.unobserve(currentContainer);
+			}
+		};
+	}, []);
+
+	useEffect(() => {
+		const video = videoRef.current;
+		if (video) {
+			video.pause();
+			video.currentTime = 0;
+			video.load();
+
+			// Check if the video is visible and play it if it is
+			const observer = new IntersectionObserver(
+				(entries) => {
+					if (entries[0].isIntersecting) {
+						// Introduce a delay before playing the video
+						if (video) {
+							video.muted = true; // Ensure video is muted before autoplay
+							setIsMuted(true); // Update state to reflect muted status
+							video
+								.play()
+								.then(() => {})
+								.catch((error) => {
+									// eslint-disable-next-line no-console
+									console.error('Playback error:', error);
+								});
+						}
+					}
+				},
+				{threshold: 0.5},
+			);
+
+			observer.observe(video);
+
+			return () => {
+				observer.disconnect();
+				video.muted = false; // Unmute the video when it's no longer visible
+				if (video) {
+					video.pause();
+					video.currentTime = 0;
+					video.load();
+				}
+			};
+		}
+	}, [activeTab]);
+
+	const handlePlayPause = () => {
+		if (videoRef.current) {
+			if (videoRef.current.paused) {
+				const playPromise = videoRef.current.play();
+
+				if (playPromise !== undefined) {
+					playPromise
+						.then(() => {
+							// Playback started successfully
+						})
+						.catch((error) => {
+							// Auto-play was prevented or there was an error
+							// eslint-disable-next-line no-console
+							console.error('Playback error:', error);
+						});
+				}
+			} else {
+				videoRef.current.pause();
+			}
+		}
+	};
+
+	const handleMuteToggle = () => {
+		if (videoRef.current) {
+			const newMutedState = !videoRef.current.muted;
+			videoRef.current.muted = newMutedState;
+			setIsMuted(newMutedState);
+		}
+	};
+
+	return (
+		<div ref={containerRef}>
+			<SectionTitle>Use Cases</SectionTitle>
+			<div className={'flex justify-center mb-4'}>
+				{tabs.map((tab, index) => (
+					<button
+						key={tab}
+						type="button"
+						data-active={index === activeTab}
+						className={`bg-transparent border-none mx-3 my-4 cursor-pointer text-base fontbrand font-bold transition-colors text-muted data-[active=true]:text-brand`}
+						onClick={() => setActiveTab(index)}
+					>
+						{tab}
+					</button>
+				))}
+			</div>
+			<div className={'card flex p-0 overflow-hidden'}>
+				<div className={'flex-1 flex flex-col lg:flex-row justify-center'}>
+					<div
+						className={
+							'w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee]'
+						}
+						onClick={handlePlayPause}
+					>
+						<MuxVideo
+							ref={videoRef}
+							muxId={videoApps[activeTab].muxId}
+							className={
+								'absolute left-0 top-0 w-full h-full object-contain rounded-lg rounded-tr-none rounded-br-none'
+							}
+							loop
+							playsInline
+							muted={isMuted}
+						/>
+
+						{isMuted && (
+							<button
+								type="button"
+								className={
+									'absolute bottom-2.5 right-2.5 bg-white text-black rounded-full w-8 h-8 flex justify-center items-center text-base cursor-pointer transition-colors border-2 border-black border-solid'
+								}
+								onClick={(e) => {
+									e.stopPropagation();
+									handleMuteToggle();
+								}}
+							>
+								<svg style={{width: 24}} viewBox="0 0 576 512">
+									<path
+										fill="black"
+										d="M0 160L0 352l128 0L272 480l48 0 0-448-48 0L128 160 0 160zm441 23l-17-17L390.1 200l17 17 39 39-39 39-17 17L424 345.9l17-17 39-39 39 39 17 17L569.9 312l-17-17-39-39 39-39 17-17L536 166.1l-17 17-39 39-39-39z"
+									/>
+								</svg>
+							</button>
+						)}
+					</div>
+					<div className={'pl-4 flex-1 lg:pl-4 flex flex-col h-full pt-8 pb-6'}>
+						<div className="text-4xl font-bold fontbrand">
+							{videoApps[activeTab].title}
+						</div>
+						<div className="text-muted mt-4 text-base fontbrand">
+							{videoApps[activeTab].description}
+						</div>
+						{videoApps[activeTab].additionalInfo ? (
+							<div className="text-muted mt-4 text-base fontbrand">
+								{videoApps[activeTab].additionalInfo}
+							</div>
+						) : null}
+						<div className="h-5" />
+						<a
+							target="_blank"
+							href={videoApps[activeTab].link}
+							style={{textDecoration: 'none'}}
+						>
+							<BlueButton loading={false} size="sm">
+								{videoApps[activeTab].buttonText}
+							</BlueButton>
+						</a>
+					</div>
+				</div>
+			</div>
+			<div
+				style={{
+					marginTop: '1rem',
+					justifyContent: 'center',
+					display: 'flex',
+				}}
+			>
+				<div
+					style={{
+						fontFamily: 'GTPlanar',
+					}}
+				>
+					For more examples see our{' '}
+					<a href="/showcase" className="bluelink">
+						Showcase page
+					</a>
+					.
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default VideoAppsShowcase;

package/src/components/homepage/VideoAppsTitle.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const VideoAppsTitle: React.FC = () => {
+	return (
+		<div className={'text-center'}>
+			<h2 className={'fontbrand text-4xl'}>
+				Build video <span className={'fontbrand'}>apps</span>
+			</h2>
+			<p>
+				Use our suite of tools to build apps that lets others create videos.
+			</p>
+		</div>
+	);
+};
+
+export const SectionTitle: React.FC<{readonly children: React.ReactNode}> = ({
+	children,
+}) => {
+	return (
+		<div className={'text-center'}>
+			<h2 className={'fontbrand text-4xl'}>{children}</h2>
+		</div>
+	);
+};

package/src/components/homepage/VideoPlayerWithControls.tsx

@@ -0,0 +1,188 @@
+/* eslint-disable no-console */
+/* eslint-disable react/require-default-props */
+import Hls from 'hls.js';
+import type Plyr from 'plyr';
+import 'plyr/dist/plyr.css';
+import type {MutableRefObject} from 'react';
+import {forwardRef, useCallback, useEffect, useRef, useState} from 'react';
+import './video-player.css';
+
+export interface HTMLVideoElementWithPlyr extends HTMLVideoElement {
+	plyr: Plyr;
+}
+
+const useCombinedRefs = function (
+	...refs: (
+		| ((instance: HTMLVideoElementWithPlyr | null) => void)
+		| MutableRefObject<HTMLVideoElementWithPlyr | null>
+		| null
+	)[]
+): MutableRefObject<HTMLVideoElementWithPlyr | null> {
+	const targetRef = useRef(null);
+
+	useEffect(() => {
+		refs.forEach((ref) => {
+			if (!ref) return;
+
+			if (typeof ref === 'function') {
+				ref(targetRef.current);
+			} else {
+				ref.current = targetRef.current;
+			}
+		});
+	}, [refs]);
+
+	return targetRef;
+};
+
+/*
+ * We need to set the width/height of the player depending on what the dimensions of
+ * the underlying video source is.
+ *
+ * On most platforms we know the dimensions on 'loadedmetadata'
+ * On Desktop Safari we don't know the dimensions until 'canplay'
+ *
+ * At first, I tried to get the dimensions of the video from these callbacks, that worked
+ * great except for on moble Safari. On Mobile Safari none of those callbacks fire until
+ * there is some user interaction :(
+ *
+ * BUT! There is a brilliant hack here. We can create a `display: none` `img` element in the
+ * DOM, load up the poster image.
+ *
+ * Since the poster image will have the same dimensions of the video, now we know if the video
+ * is vertical and now we can style the proper width/height so the layout doesn't have a sudden
+ * jump or resize.
+ *
+ */
+
+type Props = {
+	readonly playbackId: string;
+	readonly poster: string;
+	readonly currentTime?: number;
+	readonly onLoaded: () => void;
+	readonly onError: (error: ErrorEvent) => void;
+	readonly onSize: (dim: {width: number; height: number}) => void;
+	readonly autoPlay?: boolean;
+};
+
+type SizedEvent = {
+	target: {
+		width: number;
+		height: number;
+	};
+};
+
+export const VideoPlayerWithControls = forwardRef<
+	HTMLVideoElementWithPlyr,
+	Props
+>(
+	(
+		{playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay},
+		ref,
+	) => {
+		const videoRef = useRef<HTMLVideoElementWithPlyr>(null);
+		const metaRef = useCombinedRefs(ref, videoRef);
+		const playerRef = useRef<Plyr | null>(null);
+		const [playerInitTime] = useState(Date.now());
+
+		const videoError = useCallback(
+			(event: ErrorEvent) => onError(event),
+			[onError],
+		);
+
+		const onImageLoad = useCallback(
+			(event: SizedEvent) => {
+				const [w, h] = [event.target.width, event.target.height];
+				if (w && h) {
+					onSize({width: w, height: h});
+					onLoaded();
+				} else {
+					onLoaded();
+
+					console.error('Error getting img dimensions', event);
+				}
+			},
+			[onLoaded, onSize],
+		);
+
+		/*
+		 * See comment above -- we're loading the poster image just so we can grab the dimensions
+		 * which determines styles for the player
+		 */
+		useEffect(() => {
+			const img = new Image();
+			img.onload = (evt) => onImageLoad(evt as unknown as SizedEvent);
+			img.src = poster;
+		}, [onImageLoad, poster]);
+
+		useEffect(() => {
+			const video = videoRef.current;
+			const src = `https://stream.mux.com/${playbackId}.m3u8`;
+			let hls: Hls | null;
+			hls = null;
+			if (video) {
+				video.addEventListener('error', videoError);
+				const Plyr = require('plyr');
+				playerRef.current = new Plyr(video, {
+					previewThumbnails: {
+						enabled: true,
+						src: `https://image.mux.com/${playbackId}/storyboard.vtt`,
+					},
+					storage: {enabled: false},
+					fullscreen: {
+						iosNative: true,
+					},
+					captions: {active: true, language: 'auto', update: true},
+				});
+
+				if (video.canPlayType('application/vnd.apple.mpegurl')) {
+					// This will run in safari, where HLS is supported natively
+					video.src = src;
+				} else if (Hls.isSupported()) {
+					// This will run in all other modern browsers
+					hls = new Hls();
+					hls.loadSource(src);
+					hls.attachMedia(video);
+					hls.on(Hls.Events.ERROR, (_event, data) => {
+						if (data.fatal) {
+							videoError(new ErrorEvent('HLS.js fatal error'));
+						}
+					});
+				} else {
+					console.error(
+						'This is an old browser that does not support MSE https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API',
+					);
+				}
+			}
+
+			return () => {
+				if (video) {
+					video.removeEventListener('error', videoError);
+				}
+
+				if (hls) {
+					hls.destroy();
+				}
+			};
+		}, [playbackId, playerInitTime, videoError, videoRef]);
+
+		useEffect(() => {
+			const video = videoRef.current;
+			if (currentTime && video) {
+				video.currentTime = currentTime;
+			}
+		}, [currentTime]);
+
+		return (
+			<div className="video-container">
+				<video
+					ref={metaRef}
+					autoPlay={autoPlay}
+					poster={poster}
+					controls
+					playsInline
+				/>
+			</div>
+		);
+	},
+);

package/src/components/homepage/WriteInReact.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {ChooseTemplate} from './ChooseTemplate';
+import {GetStarted} from './GetStartedStrip';
+
+export const WriteInReact: React.FC = () => {
+	return (
+		<div>
+			<h1
+				className="text-5xl lg:text-[5em] text-center fontbrand font-black leading-none "
+				style={{
+					textShadow: '0 5px 30px var(--background)',
+				}}
+			>
+				Make videos programmatically.
+			</h1>
+			<p
+				style={{
+					textShadow: '0 5px 30px var(--background)',
+				}}
+				className="font-medium text-center text-lg"
+			>
+				Create real MP4 videos with React. <br />
+				Parametrize content, render server-side and build applications.
+			</p>
+			<br />
+			<div>
+				<GetStarted />
+			</div>
+			<br />
+			<br />
+			<ChooseTemplate />
+		</div>
+	);
+};

package/src/components/homepage/YouAreHere.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const container: React.CSSProperties = {
+	width: '100%',
+	display: 'inline-flex',
+	justifyContent: 'center',
+	position: 'relative',
+};
+
+const label: React.CSSProperties = {
+	backgroundColor: 'var(--ifm-color-primary)',
+	fontWeight: 'bold',
+	color: 'white',
+	paddingLeft: 8,
+	paddingRight: 8,
+	paddingTop: 4,
+	paddingBottom: 4,
+	borderRadius: 6,
+	fontSize: 13,
+	position: 'absolute',
+	marginTop: -25,
+};
+
+export const YouAreHere: React.FC = () => {
+	return (
+		<div style={container}>
+			<div style={label}>YOU ARE HERE</div>
+		</div>
+	);
+};

package/src/components/homepage/custom.css

@@ -0,0 +1,57 @@
+:root {
+	--ifm-color-primary: #0b84f3;
+	--ifm-color-primary-dark: #0a77db;
+	--ifm-color-primary-darker: #0970cf;
+	--ifm-color-primary-darkest: #085caa;
+	--ifm-color-primary-light: #2290f5;
+	--ifm-color-primary-lighter: #2f96f6;
+	--ifm-color-primary-lightest: #53a9f7;
+	--ifm-code-font-size: 100%;
+	--ifm-font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
+		Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica,
+		Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+	--ifm-font-size-base: 16px;
+	--ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+		'Liberation Mono', 'Courier New', monospace;
+	--ifm-pre-line-height:       
+;
+}
+
+[data-theme='light'] {
+	--background: #f8fafc;
+	--footer-background: #fcfcfc;
+	--footer-border: #eaeaea;
+	--text-color: #000;
+	--blue-button-color: #084696;
+	--blue-underlay: var(--ifm-color-primary);
+	--plain-button: #fff;
+	--blue-underlay-hover: #d5e5fd;
+	--light-text-color: #777;
+	--subtitle: #666;
+	--clear-hover: rgba(0, 0, 0, 0.04);
+	--border-color: rgb(234, 234, 234);
+	--box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+	--ifm-out-of-focus: #eaeaea;
+	--box-stroke: #000;
+	--ifm-background-surface-color: #fff;
+	--ifm-color-emphasis-200: #ebedf0;
+}
+[data-theme='dark'] {
+	--background: #18191a;
+	--footer-background: #1f1f1f;
+	--footer-border: #2f2f2f;
+	--text-color: #fff;
+	--plain-button: var(--blue-underlay);
+	--blue-underlay: #424243;
+	--blue-underlay-hover: #5b5c5e;
+	--clear-hover: rgba(255, 255, 255, 0.06);
+	--blue-button-color: white;
+	--light-text-color: #aaa;
+	--subtitle: #8d8d8d;
+	--border-color: rgb(42, 42, 42);
+	--box-shadow: 0 1px 8px rgba(255, 255, 255, 0.2);
+	--ifm-out-of-focus: #505050;
+	--box-stroke: gray;
+	--ifm-background-surface-color: #242526;
+	--ifm-color-emphasis-200: #444950;
+}

package/src/components/homepage/layout/Button.tsx

@@ -0,0 +1,93 @@
+import {opacify} from 'polished';
+import type {ButtonHTMLAttributes, DetailedHTMLProps} from 'react';
+import React from 'react';
+import {cn} from '../../../cn';
+import {RED, UNDERLAY_RED} from './colors';
+
+type ExtraProps = {
+	readonly size: Size;
+	readonly background: string;
+	readonly hoverColor?: string;
+	readonly color: string;
+	readonly loading: boolean;
+};
+
+type Size = 'sm' | 'bg';
+
+type Props = DetailedHTMLProps<
+	ButtonHTMLAttributes<HTMLButtonElement>,
+	HTMLButtonElement
+> &
+	ExtraProps;
+type MandatoryProps = Omit<ExtraProps, 'background' | 'color' | 'hoverColor'>;
+type PrestyledProps = DetailedHTMLProps<
+	ButtonHTMLAttributes<HTMLButtonElement>,
+	HTMLButtonElement
+> &
+	MandatoryProps;
+
+export const Button: React.FC<Props> = (props) => {
+	const {children, loading, hoverColor, color, size, className, ...other} =
+		props;
+	const actualDisabled = other.disabled || loading;
+
+	return (
+		<button
+			type="button"
+			className={cn(
+				'text-base rounded-lg font-bold appearance-none border-2 border-solid border-black border-b-4 font-sans flex flex-row items-center justify-center ',
+				className,
+			)}
+			disabled={actualDisabled}
+			{...other}
+			style={{
+				...(props.style ?? {}),
+				padding:
+					props.style?.padding ??
+					(props.size === 'sm' ? '10px 16px' : '16px 22px'),
+				color: props.color,
+				cursor: props.disabled ? 'default' : 'pointer',
+				backgroundColor: props.background,
+				opacity: props.disabled ? 0.7 : 1,
+			}}
+		>
+			{children}
+		</button>
+	);
+};
+
+export const BlueButton: React.FC<PrestyledProps> = (props) => {
+	return <Button {...props} background="var(--blue-underlay)" color="white" />;
+};
+
+export const PlainButton: React.FC<PrestyledProps> = (props) => {
+	return (
+		<Button
+			{...props}
+			background="var(--plain-button)"
+			color="var(--text-color)"
+		/>
+	);
+};
+
+export const RedButton: React.FC<PrestyledProps> = (props) => {
+	return (
+		<Button
+			{...props}
+			background={UNDERLAY_RED}
+			hoverColor={opacify(0.1, UNDERLAY_RED)}
+			color={RED}
+		/>
+	);
+};
+
+export const ClearButton: React.FC<PrestyledProps> = (props) => {
+	return (
+		<Button
+			{...props}
+			background="transparent"
+			color="var(--text-color)"
+			hoverColor="var(--clear-hover)"
+		/>
+	);
+};