@remotion/promo-pages 4.0.364 → 4.0.365

package/src/components/homepage/IfYouKnowReact.tsx

@@ -1,68 +0,0 @@
-import React, {useEffect, useState} from 'react';
-
-export const isWebkit = () => {
-	if (typeof window === 'undefined') {
-		return false;
-	}
-
-	const isSafariUserAgent = Boolean(
-		navigator.userAgent.match(/Version\/[\d.]+.*Safari/),
-	);
-
-	const isChrome = Boolean(navigator.userAgent.match(/CriOS\//));
-	return isSafariUserAgent || isChrome;
-};
-
-const icon: React.CSSProperties = {
-	height: 16,
-	marginLeft: 10,
-};
-
-export const IfYouKnowReact: React.FC = () => {
-	const [vid, setVid] = useState('/img/compose.webm');
-
-	useEffect(() => {
-		if (isWebkit()) {
-			setVid('/img/compose.mp4');
-		}
-	}, []);
-
-	return (
-		<div className="flex flex-col lg:flex-row text-left justify-start lg:justify-end items-start lg:mb-0 gap-6 mt-8">
-			<video
-				src={vid}
-				muted
-				autoPlay
-				playsInline
-				loop
-				className="w-[500px] cursor-default! relative lg:-translate-x-8 -mb-40 lg:mt-0 lg:mb-0"
-			/>
-			<div>
-				<h2 className="text-4xl fontbrand pt-20">
-					<span className="text-brand">Compose</span> with code
-				</h2>
-				<p className="leading-relaxed font-brand">
-					Use React, a powerful frontend technology, to create sophisticated
-					videos with code.
-				</p>
-				<div className="h-4" />
-				<a
-					className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
-					href="/docs/the-fundamentals"
-				>
-					Learn Remotion{' '}
-					<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>
-	);
-};

package/src/components/homepage/InfoTooltip.tsx

@@ -1,25 +0,0 @@
-import React, {useState} from 'react';
-
-interface InfoTooltipProps {
-	readonly text: string;
-}
-
-export const InfoTooltip: React.FC<InfoTooltipProps> = ({text}) => {
-	const [isVisible, setIsVisible] = useState(false);
-
-	return (
-		<span
-			className="relative inline-block ml-1 text-gray-600 cursor-default"
-			onMouseEnter={() => setIsVisible(true)}
-			onMouseLeave={() => setIsVisible(false)}
-		>
-			<span style={{fontSize: '1rem'}}>ⓘ</span>
-			{isVisible && (
-				<span className="absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white p-2 rounded text-xs whitespace-nowrap z-10 cursor-default">
-					{text}
-					<span className="absolute top-full left-1/2 transform -translate-x-1/2 border-5 border-solid border-gray-800 border-t-transparent border-r-transparent border-b-transparent border-l-transparent cursor-default" />
-				</span>
-			)}
-		</span>
-	);
-};

package/src/components/homepage/MoreTemplatesButton.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import {useMobileLayout} from './layout/use-mobile-layout';
-
-const icon: React.CSSProperties = {
-	height: 16,
-	marginLeft: 10,
-};
-
-export const MoreTemplatesButton: React.FC = () => {
-	const mobileLayout = useMobileLayout();
-
-	return (
-		<a href="/templates" className="no-underline text-inherit">
-			<div className="right-0 border-2 rounded-full text-inherit px-4 py-2 fontbrand font-semibold text-sm flex flex-row items-center">
-				{mobileLayout ? 'Templates' : 'Find a template'}
-				<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>
-			</div>
-		</a>
-	);
-};

package/src/components/homepage/MoreVideoPowerSection.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-
-const StepTitle: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return (
-		<div className="text-left text-xl font-semibold fontbrand">{children}</div>
-	);
-};
-
-const Subtitle: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return (
-		<div className="text-left text-base fontbrand text-[var(--subtitle)]">
-			{children}
-		</div>
-	);
-};
-
-const Pane: React.FC<{
-	readonly children: React.ReactNode;
-	readonly className?: string;
-}> = ({children, className}) => {
-	return (
-		<div
-			className={`border-effect bg-pane flex-1 flex flex-col ${className || ''}`}
-		>
-			{children}
-		</div>
-	);
-};
-
-const FeatureCard: React.FC<{
-	readonly title: string;
-	readonly subtitle: string;
-	readonly image: string;
-	readonly link: string;
-}> = ({title, subtitle, image, link}) => {
-	return (
-		<a
-			href={link}
-			className="group lg:border-r-2 border-b lg:border-b-0 border-[var(--border)] cursor-pointer hover:bg-[var(--hover)] transition-colors no-underline text-inherit"
-		>
-			<div className="relative">
-				<img src={image} alt={title} className="w-full h-auto" />
-			</div>
-			<div className="p-4">
-				<div className="flex items-center gap-2">
-					<StepTitle>{title}</StepTitle>
-					<svg
-						width="16"
-						viewBox="0 0 448 512"
-						fill="currentColor"
-						className="opacity-0 group-hover:opacity-100 transition-opacity"
-					>
-						<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
-					</svg>
-				</div>
-				<Subtitle>{subtitle}</Subtitle>
-				<br />
-				<div className="flex-1" />
-			</div>
-		</a>
-	);
-};
-
-export const MoreVideoPowerSection: React.FC = () => {
-	return (
-		<div className="w-full">
-			<Pane className="overflow-hidden">
-				<div className="grid grid-cols-1 lg:grid-cols-3 h-full">
-					<FeatureCard
-						title="Media Parser"
-						subtitle="A new multimedia library for the web"
-						image="/img/media-parser.png"
-						link="/media-parser"
-					/>
-					<FeatureCard
-						title="WebCodecs"
-						subtitle="Read, process, transform and create videos on the frontend"
-						image="/img/webcodecs.png"
-						link="/webcodecs"
-					/>
-					<FeatureCard
-						title="Recorder"
-						subtitle="Produce engaging screencasts end-to-end in JavaScript"
-						image="/img/recorder.png"
-						link="/recorder"
-					/>
-				</div>
-			</Pane>
-		</div>
-	);
-};

package/src/components/homepage/MuxVideo.tsx

@@ -1,68 +0,0 @@
-import Hls from 'hls.js';
-import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
-import {VideoPlayerWithControls} from './VideoPlayerWithControls';
-
-const getVideoToPlayUrl = (muxId: string) => {
-	return `https://stream.mux.com/${muxId}.m3u8`;
-};
-
-const MuxVideoForward: React.ForwardRefRenderFunction<
-	HTMLVideoElement,
-	React.DetailedHTMLProps<
-		React.VideoHTMLAttributes<HTMLVideoElement>,
-		HTMLVideoElement
-	> & {
-		readonly muxId: string;
-	}
-> = ({muxId, ...props}, ref) => {
-	const videoRef = useRef<HTMLVideoElement>(null);
-	const vidUrl = getVideoToPlayUrl(muxId);
-
-	useImperativeHandle(ref, () => videoRef.current!, []);
-
-	useEffect(() => {
-		let hls: Hls;
-		if (videoRef.current) {
-			const {current} = videoRef;
-			if (current.canPlayType('application/vnd.apple.mpegurl')) {
-				// Some browers (safari and ie edge) support HLS natively
-				current.src = vidUrl;
-			} else if (Hls.isSupported()) {
-				// This will run in all other modern browsers
-				hls = new Hls();
-				hls.loadSource(vidUrl);
-				hls.attachMedia(current);
-			} else {
-				// eslint-disable-next-line no-console
-				console.error("This is a legacy browser that doesn't support MSE");
-			}
-		}
-
-		return () => {
-			if (hls) {
-				hls.destroy();
-			}
-		};
-	}, [vidUrl, videoRef]);
-
-	return <video ref={videoRef} {...props} />;
-};
-
-export const MuxVideo = forwardRef(MuxVideoForward);
-
-export const NewMuxVideo: React.FC<{
-	readonly muxId: string;
-}> = ({muxId}) => {
-	return (
-		<VideoPlayerWithControls
-			playbackId={muxId}
-			poster={'https://image.mux.com/' + muxId + '/thumbnail.png?time=1'}
-			onError={(error) => {
-				// eslint-disable-next-line no-console
-				console.log(error);
-			}}
-			onLoaded={() => undefined}
-			onSize={() => undefined}
-		/>
-	);
-};

package/src/components/homepage/NewsletterButton.tsx

@@ -1,89 +0,0 @@
-import React, {useCallback, useState} from 'react';
-import {BlueButton} from './layout/Button';
-import {Spacer} from './Spacer';
-import {SectionTitle} from './VideoAppsTitle';
-
-export const NewsletterButton: React.FC<{}> = () => {
-	const [email, setEmail] = useState('');
-	const [submitting, setSubmitting] = useState(false);
-	const [subscribed, setSubscribed] = useState(false);
-
-	const handleSubmit = useCallback(
-		async (e: React.FormEvent<HTMLFormElement>) => {
-			try {
-				setSubmitting(true);
-				e.preventDefault();
-
-				const response = await fetch(
-					'https://www.remotion.pro/api/newsletter',
-					{
-						method: 'POST',
-						body: JSON.stringify({email}),
-						headers: {
-							'content-type': 'application/json',
-						},
-					},
-				);
-				const json = await response.json();
-				if (json.success) {
-					setSubscribed(true);
-				} else {
-					// eslint-disable-next-line no-alert
-					alert('Something went wrong. Please try again later.');
-				}
-
-				setSubmitting(false);
-			} catch {
-				// eslint-disable-next-line no-alert
-				alert('Something went wrong. Please try again later.');
-			}
-		},
-		[email],
-	);
-
-	return (
-		<div>
-			<div className="flex flex-col">
-				<div className={'w-full'}>
-					<div className={'flex flex-col flex-1'}>
-						<SectionTitle>Newsletter</SectionTitle>
-						<form
-							onSubmit={handleSubmit}
-							style={{
-								width: '100%',
-							}}
-						>
-							<div className={'fontbrand text-center mb-10 -mt-4'}>
-								Read about new features and noteworthy updates we have made on
-								Remotion once in a while.{' '}
-							</div>
-
-							<input
-								className="w-full dark:bg-[#121212] rounded-lg border-effect border-black outline-none px-3 py-3 fontbrand text-lg box-border focus:border-brand"
-								disabled={submitting}
-								value={email}
-								onChange={(e) => setEmail(e.target.value)}
-								type={'email'}
-								required
-								placeholder="animator@gmail.com"
-							/>
-							<Spacer />
-							<Spacer />
-							<div>
-								<BlueButton
-									type="submit"
-									className="w-full"
-									loading={submitting}
-									disabled={submitting || subscribed}
-									size="sm"
-								>
-									{subscribed ? 'Subscribed!' : 'Subscribe'}
-								</BlueButton>
-							</div>
-						</form>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/ParameterizeAndEdit.tsx

@@ -1,106 +0,0 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {isWebkit} from './IfYouKnowReact';
-
-const icon: React.CSSProperties = {
-	height: 16,
-	marginLeft: 10,
-};
-
-export const ParameterizeAndEdit: React.FC = () => {
-	const ref = useRef<HTMLDivElement>(null);
-	const [vid, setVid] = useState('/img/editing-vp9-chrome.webm');
-
-	useEffect(() => {
-		if (isWebkit()) {
-			setVid('/img/editing-safari.mp4');
-		}
-	}, []);
-
-	return (
-		<div
-			ref={ref}
-			className={
-				'flex flex-col lg:flex-row justify-start lg:justify-end items-start gap-6 mt-20 lg:mt-0'
-			}
-		>
-			<div>
-				<video
-					src={vid}
-					autoPlay
-					muted
-					playsInline
-					loop
-					style={{
-						width: 500,
-						maxWidth: '100%',
-						borderRadius: 7,
-						overflow: 'hidden',
-					}}
-				/>
-			</div>
-			<div style={{flex: 1}} className="font-brand pt-4">
-				<h2 className={'fontbrand text-4xl'}>
-					Edit <span className="text-brand">dynamically</span>
-				</h2>
-				<p className="leading-relaxed">
-					Parameterize your video by passing data.
-					<br />
-					Or embed it into your app and build an interface around it.
-				</p>
-				<div className="h-4" />
-				<div className="leading-6">
-					<a
-						className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
-						href="/docs/studio"
-					>
-						Remotion Studio{' '}
-						<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>
-					<br />
-					<a
-						className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
-						href="/player"
-					>
-						Remotion Player{' '}
-						<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>
-					<br />
-					<a
-						className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
-						href="/docs/editor-starter"
-					>
-						Remotion Editor Starter{' '}
-						<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>
-	);
-};

package/src/components/homepage/Pricing.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import {CompanyPricing, EnterpriseLicense, FreePricing} from './FreePricing';
-
-export const Pricing: React.FC = () => {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				gap: 20,
-				marginBottom: 40,
-			}}
-		>
-			<FreePricing />
-			<CompanyPricing />
-			<EnterpriseLicense />
-			<div
-				style={{
-					justifyContent: 'center',
-					display: 'flex',
-				}}
-			>
-				<div
-					style={{
-						fontFamily: 'GTPlanar',
-					}}
-				>
-					See our{' '}
-					<a
-						target="_blank"
-						className="bluelink"
-						href="https://remotion.pro/faq"
-					>
-						FAQ
-					</a>{' '}
-					and{' '}
-					<a
-						target="_blank"
-						className="bluelink"
-						href="https://www.remotion.pro/terms"
-					>
-						Terms and Conditions
-					</a>{' '}
-					for more details.
-				</div>
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/PricingBulletPoint.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-
-const container: React.CSSProperties = {
-	display: 'flex',
-	flexDirection: 'row',
-	alignItems: 'center',
-	gap: '10px',
-};
-
-const greyCircle: React.CSSProperties = {
-	width: 20,
-	height: 20,
-	borderRadius: 10,
-	backgroundColor: 'var(--footer-border)',
-};
-
-export const PricingBulletPoint: React.FC<{
-	readonly text: React.ReactNode;
-	readonly checked: boolean;
-	readonly children?: React.ReactNode;
-}> = ({text, checked, children}) => {
-	const checkmarkSVG = (
-		<svg
-			width="20"
-			height="20"
-			viewBox="0 0 20 20"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			style={{
-				flexShrink: 0,
-			}}
-		>
-			<circle cx="10" cy="10" r="10" fill="#0B84F3" />
-			<path
-				d="M14.7908 7.20505C15.0697 7.47844 15.0697 7.92243 14.7908 8.19583L9.07711 13.795C8.79813 14.0683 8.34505 14.0683 8.06606 13.795L5.20924 10.9954C4.93025 10.722 4.93025 10.278 5.20924 10.0046C5.48823 9.73121 5.9413 9.73121 6.22029 10.0046L8.5727 12.3077L13.7819 7.20505C14.0609 6.93165 14.514 6.93165 14.793 7.20505H14.7908Z"
-				fill="white"
-			/>
-		</svg>
-	);
-
-	return (
-		<div style={container}>
-			{checked ? checkmarkSVG : <div style={greyCircle} />}
-			<div className={'fontbrand text-lg	'}>
-				{text}
-				{children}
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/RealMp4Videos.tsx

@@ -1,108 +0,0 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {isWebkit} from './IfYouKnowReact';
-
-const icon: React.CSSProperties = {
-	height: 16,
-	marginLeft: 10,
-};
-
-export const RealMP4Videos: React.FC = () => {
-	const ref = useRef<HTMLDivElement>(null);
-	const videoRef = useRef<HTMLVideoElement>(null);
-
-	const [vid, setVid] = useState('/img/render-progress.webm');
-
-	useEffect(() => {
-		if (isWebkit()) {
-			setVid('/img/render-progress.mp4');
-		}
-	}, []);
-
-	useEffect(() => {
-		const {current} = ref;
-		if (!current) {
-			return;
-		}
-
-		const callback = (data: IntersectionObserverEntry[]) => {
-			if (data[0].isIntersecting) {
-				videoRef.current?.play();
-			}
-		};
-
-		const observer = new IntersectionObserver(callback, {
-			root: null,
-			threshold: 0.5,
-		});
-		observer.observe(current);
-
-		return () => observer.unobserve(current);
-	}, []);
-
-	return (
-		<div ref={ref} className={'flex flex-col lg:flex-row mt-40 lg:mt-30 gap-6'}>
-			<div className="flex w-[500px] justify-start lg:justify-start items-end">
-				<video
-					ref={videoRef}
-					src={vid}
-					muted
-					autoPlay
-					playsInline
-					loop
-					style={{
-						width: 400,
-						maxWidth: '100%',
-						borderRadius: 7,
-						overflow: 'hidden',
-					}}
-					className="w-[550px] cursor-default! relative lg:translate-x-8 -mt-20 lg:mt-0"
-				/>
-			</div>{' '}
-			<div className="font-brand">
-				<h2 className="text-4xl fontbrand">
-					<span className={'text-brand'}>Scalable</span> rendering
-				</h2>
-				<p className="leading-relaxed">
-					Render the video .mp4 or other formats. <br />
-					Locally, on the server or serverless.
-				</p>{' '}
-				<div className="h-4" />
-				<div className="leading-6">
-					<a
-						className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
-						href="/docs/render"
-					>
-						Render options{' '}
-						<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>
-					<br />
-					<a
-						className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
-						href="/lambda"
-					>
-						Remotion Lambda{' '}
-						<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>
-	);
-};

package/src/components/homepage/Spacer.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export const Spacer: React.FC = () => {
-	return <div style={{width: 4, height: 4}} />;
-};