@remotion/promo-pages 4.0.363 → 4.0.365

package/src/components/homepage/GetStartedStrip.tsx

@@ -1,77 +0,0 @@
-import React, {useState} from 'react';
-import {GithubButton} from './GitHubButton';
-import {PlainButton} from './layout/Button';
-
-export const GetStarted: React.FC = () => {
-	const [clicked, setClicked] = useState<number | null>(null);
-
-	return (
-		<div className="flex flex-col lg:flex-row items-center justify-center text-center w-full">
-			<div className="w-full lg:w-auto">
-				<div className="flex flex-row w-full ">
-					{clicked ? (
-						<div
-							key={clicked}
-							style={{
-								animation: 'click 0.7s linear',
-								animationFillMode: 'forwards',
-							}}
-							className="absolute z-0 top-0 font-mono text-sm text-center w-full"
-						>
-							Copied!
-						</div>
-					) : null}
-					<div
-						className="bg-[#333] text-white rounded-lg px-4 font-mono hover:[#444] cursor-pointer justify-center items-center flex flex-1 min-h-12"
-						onClick={() => {
-							navigator.clipboard.writeText('npx create-video@latest');
-
-							setClicked(Date.now());
-						}}
-						title="Click to copy"
-					>
-						$ npx create-video@latest
-					</div>
-				</div>
-			</div>
-			<div className="w-2 h-2" />
-			<div className="w-full lg:w-auto">
-				<a
-					className={'no-underline w-full block'}
-					href="https://www.youtube.com/watch?v=deg8bOoziaE"
-					target="_blank"
-				>
-					<PlainButton size="sm" loading={false} className="w-full">
-						Watch demo
-					</PlainButton>
-				</a>
-			</div>
-			<div style={{width: 10, height: 10}} />
-			<a className={'no-underline w-full lg:w-auto'} href="/docs">
-				<PlainButton size="sm" loading={false} className="w-full">
-					Docs
-				</PlainButton>
-			</a>
-			<div className="w-2 h-2" />
-			<a
-				className="no-underline w-full lg:w-auto"
-				href="https://remotion.dev/discord"
-				target="_blank"
-			>
-				<PlainButton size="sm" loading={false} className="w-full">
-					Discord
-				</PlainButton>
-			</a>
-			<div className="w-2 h-2" />
-			<a
-				className="no-underline w-full lg:w-auto"
-				href="https://github.com/remotion-dev/remotion"
-				target="_blank"
-			>
-				<PlainButton size="sm" loading={false} className="w-full">
-					<GithubButton />
-				</PlainButton>
-			</a>
-		</div>
-	);
-};

package/src/components/homepage/GitHubButton.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-const GithubIcon: React.FC = () => {
-	return (
-		<svg viewBox="0 0 496 512" style={{height: 24, marginRight: 8}}>
-			<path
-				fill="currentColor"
-				d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-			/>
-		</svg>
-	);
-};
-
-export const GithubButton: React.FC = () => {
-	return (
-		<div className="flex flex-row items-center text-base">
-			<GithubIcon /> <span>GitHub</span>{' '}
-			<div className="text-xs inline-block ml-2 leading-none mt-[3px] self-center">
-				{'24k'}
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/IconForTemplate.tsx

@@ -1,170 +0,0 @@
-import type {Template} from 'create-video';
-import React from 'react';
-import {Blank} from '../icons/blank';
-import {CodeHike} from '../icons/code-hike';
-import {Cubes} from '../icons/cubes';
-import {JSIcon} from '../icons/js';
-import {MusicIcon} from '../icons/music';
-import {NextIcon} from '../icons/next';
-import {OverlayIcon} from '../icons/overlay';
-import {Recorder} from '../icons/recorder';
-import {ReactRouterIcon} from '../icons/remix';
-import {SkiaIcon} from '../icons/skia';
-import {Stargazer} from '../icons/stargazer';
-import {StillIcon} from '../icons/still';
-import {TikTok} from '../icons/tiktok';
-import {TypeScriptIcon} from '../icons/ts';
-import {TTSIcon} from '../icons/tts';
-import {Waveform} from '../icons/waveform';
-
-export const IconForTemplate: React.FC<{
-	readonly template: Template;
-	readonly scale: number;
-}> = ({template, scale = 1}) => {
-	if (template.cliId === 'hello-world') {
-		return (
-			<TypeScriptIcon
-				style={{
-					height: scale * 48,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'blank') {
-		return (
-			<Blank
-				style={{
-					height: scale * 36,
-					overflow: 'visible',
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'javascript') {
-		return (
-			<JSIcon
-				style={{
-					height: scale * 40,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'three') {
-		return (
-			<Cubes
-				style={{
-					height: scale * 36,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'still') {
-		return (
-			<StillIcon
-				style={{
-					height: scale * 36,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'audiogram') {
-		return (
-			<Waveform
-				style={{
-					height: scale * 36,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'tts') {
-		return (
-			<TTSIcon
-				style={{
-					height: scale * 36,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'google-tts') {
-		return (
-			<TTSIcon
-				style={{
-					height: scale * 36,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'skia') {
-		return (
-			<SkiaIcon
-				style={{
-					height: scale * 32,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'music-visualization') {
-		return (
-			<MusicIcon
-				style={{
-					height: scale * 32,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'react-router') {
-		return (
-			<ReactRouterIcon
-				style={{
-					height: scale * 32,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'overlay') {
-		return <OverlayIcon style={{height: scale * 42}} />;
-	}
-
-	if (template.cliId === 'recorder') {
-		return <Recorder style={{height: scale * 36}} />;
-	}
-
-	if (
-		template.cliId === 'next' ||
-		template.cliId === 'next-tailwind' ||
-		template.cliId === 'next-pages-dir'
-	) {
-		return <NextIcon style={{height: scale * 36}} />;
-	}
-
-	if (template.cliId === 'stargazer') {
-		return <Stargazer style={{height: scale * 36}} />;
-	}
-
-	if (template.cliId === 'tiktok') {
-		return <TikTok style={{height: scale * 36}} />;
-	}
-
-	if (template.cliId === 'code-hike') {
-		return <CodeHike style={{height: scale * 36}} />;
-	}
-
-	return (
-		<Blank
-			style={{
-				height: scale * 40,
-			}}
-		/>
-	);
-};

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