@remotion/promo-pages 4.0.363 → 4.0.365

package/src/components/homepage/VideoApps.tsx

@@ -1,231 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import {BlueButton} from './layout/Button';
-import {useColorMode} from './layout/use-color-mode';
-import {Spacer} from './Spacer';
-import {YouAreHere} from './YouAreHere';
-
-const row: React.CSSProperties = {
-	display: 'flex',
-	flexDirection: 'row',
-};
-
-const flex: React.CSSProperties = {
-	flex: 1,
-};
-
-const list: React.CSSProperties = {
-	listStyleType: 'none',
-	textAlign: 'center',
-	paddingLeft: 0,
-	display: 'flex',
-	flexDirection: 'column',
-	alignItems: 'center',
-};
-
-const hr: React.CSSProperties = {
-	width: 20,
-	textAlign: 'center',
-	borderTop: 0,
-	marginTop: 10,
-	marginBottom: 10,
-};
-
-const docsButton: React.CSSProperties = {
-	textDecoration: 'none',
-};
-
-const StepTitle: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return (
-		<div className="text-center text-xl font-semibold fontbrand mt-2">
-			{children}
-		</div>
-	);
-};
-
-const Subtitle: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return (
-		<div className="text-center text-base fontbrand text-[var(--subtitle)]">
-			{children}
-		</div>
-	);
-};
-
-const Pane: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return (
-		<div className="border-effect bg-pane flex-1 p-3 rounded-lg min-h-[500px] flex flex-col text-center">
-			{children}
-		</div>
-	);
-};
-
-export const VideoApps: React.FC<{
-	readonly active: 'remotion' | 'player' | 'lambda';
-}> = ({active}) => {
-	const {colorMode} = useColorMode();
-
-	const [src, setSrc] = useState('/img/player-example.png');
-	const [src2, setSrc2] = useState('/img/player-example-dark.png');
-
-	useEffect(() => {
-		if (colorMode === 'dark') {
-			setSrc('/img/player-example-dark.png');
-		} else {
-			setSrc('/img/player-example.png');
-		}
-	}, [colorMode]);
-	useEffect(() => {
-		setSrc2(
-			colorMode === 'dark' ? '/img/cluster-dark.png' : '/img/cluster.png',
-		);
-	}, [colorMode]);
-
-	return (
-		<div className="w-full">
-			<div className={'flex flex-col lg:flex-row gap-2'}>
-				<Pane>
-					{active === 'remotion' ? <YouAreHere /> : null}
-					<StepTitle>Remotion</StepTitle>
-					<Subtitle>Make videos programmatically</Subtitle>
-					<br />
-					<div
-						style={{
-							display: 'flex',
-							justifyContent: 'center',
-							alignItems: 'center',
-							flex: 1,
-						}}
-					>
-						<img className="max-w-[300px]" src="/img/writeinreact.png" />
-					</div>
-					<ul style={list}>
-						<li>Use the Web to create graphics</li>
-						<hr style={hr} />
-						<li>Consume user input and APIs</li>
-						<hr style={hr} />
-						<li>Render real MP4 videos</li>
-					</ul>
-					<div style={row}>
-						{active === 'remotion' ? null : (
-							<>
-								<div style={flex}>
-									<a style={docsButton} href="/">
-										<BlueButton loading={false} size="sm">
-											Learn more
-										</BlueButton>
-									</a>
-								</div>
-								<Spacer />
-								<Spacer />
-							</>
-						)}
-						<div style={flex}>
-							<a style={docsButton} href="/docs">
-								<BlueButton className="w-full" loading={false} size="sm">
-									Read docs
-								</BlueButton>
-							</a>
-						</div>
-					</div>
-				</Pane>
-				<Pane>
-					{active === 'player' ? <YouAreHere /> : null}
-					<StepTitle>Remotion Player</StepTitle>
-					<Subtitle>Embeddable interactive videos</Subtitle>
-					<br />
-
-					<div
-						style={{
-							display: 'flex',
-							justifyContent: 'center',
-							alignItems: 'center',
-							flex: 1,
-						}}
-					>
-						<img className="max-w-[300px]" src={src} />
-					</div>
-					<ul style={list}>
-						<li>Preview videos in the browser</li>
-						<hr style={hr} />
-						<li>React to user input</li>
-						<hr style={hr} />
-						<li>Customize look and behavior</li>
-					</ul>
-					<div style={row}>
-						{active === 'player' ? null : (
-							<>
-								<div style={flex}>
-									<a style={docsButton} href="/player">
-										<BlueButton className="w-full" loading={false} size="sm">
-											Learn more
-										</BlueButton>
-									</a>
-								</div>
-								<Spacer />
-								<Spacer />
-							</>
-						)}
-						<div style={flex}>
-							<a style={docsButton} href="/docs/player">
-								<BlueButton className="w-full" loading={false} size="sm">
-									Read docs
-								</BlueButton>
-							</a>
-						</div>
-					</div>
-				</Pane>
-				<Pane>
-					{active === 'lambda' ? <YouAreHere /> : null}
-					<StepTitle>Remotion Lambda</StepTitle>
-					<Subtitle>Render at scale</Subtitle>
-					<br />
-					<div
-						style={{
-							display: 'flex',
-							justifyContent: 'center',
-							alignItems: 'center',
-							flex: 1,
-						}}
-					>
-						<img className="max-w-[300px]" src={src2} />
-					</div>
-					<div className="flex-1" />
-					<ul style={list}>
-						<li>Render videos in the cloud</li>
-						<hr style={hr} />
-						<li>Scale according to your volume</li>
-						<hr style={hr} />
-						<li>Fast because distributed</li>
-					</ul>
-					<div style={row}>
-						{active === 'lambda' ? null : (
-							<>
-								<div style={flex}>
-									<a style={docsButton} href="/lambda">
-										<BlueButton className="w-full" loading={false} size="sm">
-											Learn more
-										</BlueButton>
-									</a>
-								</div>
-								<Spacer />
-								<Spacer />
-							</>
-						)}
-						<div style={flex}>
-							<a style={docsButton} href="/docs/lambda">
-								<BlueButton className="w-full" loading={false} size="sm">
-									Read docs
-								</BlueButton>
-							</a>
-						</div>
-					</div>
-				</Pane>
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/VideoAppsShowcase.tsx

@@ -1,270 +0,0 @@
-import React, {useEffect, useRef, useState} from 'react';
-
-import {IsMutedIcon, NotMutedIcon, PausedIcon, PlayingIcon} from './Demo/icons';
-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: 'Kg02XHfkR6x8400BtO4Ica54XlSPimmmTRpqDHHUaeACk',
-		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.dev/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 icon: React.CSSProperties = {
-	height: 16,
-	marginLeft: 10,
-};
-
-const VideoAppsShowcase: React.FC = () => {
-	const [activeTab, setActiveTab] = useState(0);
-	const [isMuted, setIsMuted] = useState(true);
-	const [isPlaying, setIsPlaying] = useState(false);
-	const videoRef = useRef<HTMLVideoElement>(null);
-	const containerRef = useRef<HTMLDivElement>(null);
-
-	// Remove the intersection observer autoplay logic
-	useEffect(() => {
-		const video = videoRef.current;
-		if (video) {
-			video.pause();
-			setIsPlaying(false);
-			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(() => {
-							setIsPlaying(true);
-						})
-						.catch((error) => {
-							// eslint-disable-next-line no-console
-							console.error('Playback error:', error);
-							setIsPlaying(false);
-						});
-				}
-			} else {
-				videoRef.current.pause();
-				setIsPlaying(false);
-			}
-		}
-	};
-
-	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={
-					'grid justify-center grid-flow-col grid-rows-1 gap-2.5 justify-self-center mb-4 w-[90vw] md:w-auto -mt-4'
-				}
-			>
-				{tabs.map((tab, index) => (
-					<button
-						key={tab}
-						type="button"
-						data-active={index === activeTab}
-						className={`bg-transparent border-none m-0 p-0 lg: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] cursor-pointer'
-						}
-						onClick={handlePlayPause}
-					>
-						<MuxVideo
-							ref={videoRef}
-							muxId={videoApps[activeTab].muxId}
-							className={
-								'absolute left-0 top-0 w-full h-full object-contain rounded-sm rounded-tr-none rounded-br-none'
-							}
-							loop
-							playsInline
-							muted={isMuted}
-						/>
-
-						{/* Play/Pause Button - bottom left corner */}
-						<button
-							type="button"
-							className={
-								'absolute bottom-2.5 left-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();
-								handlePlayPause();
-							}}
-						>
-							{isPlaying ? (
-								<PlayingIcon
-									style={{
-										width: 12,
-										height: 20,
-										marginLeft: '2px',
-										marginTop: '1px',
-									}}
-								/>
-							) : (
-								<PausedIcon
-									style={{
-										width: 14,
-										height: 16,
-										marginLeft: '2px',
-										marginTop: '0.5px',
-									}}
-								/>
-							)}
-						</button>
-
-						{/* Mute/Unmute Button - bottom right corner */}
-						<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();
-							}}
-						>
-							{isMuted ? (
-								<IsMutedIcon
-									style={{
-										width: 16,
-										height: 16,
-										marginTop: '1px',
-									}}
-								/>
-							) : (
-								<NotMutedIcon
-									style={{
-										width: 16,
-										height: 16,
-										marginTop: '1px',
-									}}
-								/>
-							)}
-						</button>
-					</div>
-					<div className={'p-6 flex-1 flex flex-col h-full'}>
-						<div className="text-4xl font-bold fontbrand mt-0">
-							{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
-							className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
-							href={videoApps[activeTab].link}
-						>
-							{videoApps[activeTab].buttonText}
-							<svg
-								style={icon}
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 448 512"
-							>
-								<path
-									fill="currentColor"
-									d="M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
-								/>
-							</svg>
-						</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

@@ -1,11 +0,0 @@
-import React from 'react';
-
-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

@@ -1,189 +0,0 @@
-/* eslint-disable no-console */
-/* eslint-disable react/require-default-props */
-import Hls from 'hls.js';
-import type Plyr from 'plyr';
-// eslint-disable-next-line no-restricted-imports
-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>
-		);
-	},
-);