@remotion/promo-pages 4.0.364 → 4.0.365

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

package/src/components/homepage/WriteInReact.tsx

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

@@ -1,30 +0,0 @@
-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/layout/Button.tsx

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

package/src/components/homepage/layout/colors.ts

@@ -1,17 +0,0 @@
-import {darken, transparentize} from 'polished';
-
-export const PALETTE = {
-	BOX_STROKE: 'var(--box-stroke)',
-	TEXT_COLOR: 'var(--text-color)',
-	BORDER_COLOR: 'var(--border-color)',
-	BRAND: 'var(--ifm-color-primary)',
-};
-
-export const FONTS = {
-	GTPLANAR: 'GTPlanar',
-};
-
-export const UNDERLAY_BLUE = transparentize(0.85, '#42e9f5');
-export const RED = '#e74c3c';
-export const UNDERLAY_RED = transparentize(0.9, RED);
-export const BLUE_TEXT = darken(0.3, '#42e9f5');

package/src/components/homepage/layout/use-color-mode.tsx

@@ -1,44 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, {useContext, useMemo, type ReactNode} from 'react';
-
-type ContextValue = {
-	/** Current color mode. */
-	readonly colorMode: ColorMode;
-	/** Set new color mode. */
-	readonly setColorMode: (colorMode: ColorMode) => void;
-};
-
-const Context = React.createContext<ContextValue | undefined>(undefined);
-
-export type ColorMode = 'light' | 'dark';
-
-export const ColorModeProvider = ({
-	children,
-	colorMode,
-	setColorMode,
-}: {
-	readonly children: React.ReactNode;
-	readonly setColorMode: (colorMode: ColorMode) => void;
-	readonly colorMode: ColorMode;
-}): ReactNode => {
-	const value: ContextValue = useMemo(() => {
-		return {colorMode, setColorMode};
-	}, [colorMode, setColorMode]);
-
-	return <Context.Provider value={value}>{children}</Context.Provider>;
-};
-
-export function useColorMode(): ContextValue {
-	const context = useContext(Context);
-	if (context === null || context === undefined) {
-		throw new Error('ColorModeProvider');
-	}
-
-	return context;
-}