@remotion/promo-pages 4.0.321 → 4.0.323

package/dist/components/homepage/Demo/index.js

@@ -1,95 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Player } from '@remotion/player';
-import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-import { PALETTE } from '../layout/colors';
-import { useColorMode } from '../layout/use-color-mode';
-import { SectionTitle } from '../VideoAppsTitle';
-import { getDataAndProps, HomepageVideoComp, } from './Comp';
-import { DemoError } from './DemoError';
-import { RenderButton } from './DemoRender';
-import { DownloadNudge } from './DownloadNudge';
-import { DragAndDropNudge } from './DragAndDropNudge';
-import { PlayerControls } from './PlayerControls';
-import { ThemeNudge } from './ThemeNudge';
-const style = {
-    width: '100%',
-    aspectRatio: '640 / 360',
-    borderBottom: `2px solid ${PALETTE.BOX_STROKE}`,
-    touchAction: 'none', // prevent page from scrolling when dragging children on mobile
-};
-const playerWrapper = {
-    border: `2px solid ${PALETTE.BOX_STROKE}`,
-    borderBottom: `4px solid ${PALETTE.BOX_STROKE}`,
-    borderRadius: 8,
-    width: '100%',
-    overflow: 'hidden',
-};
-export const Demo = () => {
-    const { colorMode } = useColorMode();
-    const [data, setData] = useState(null);
-    const ref = useRef(null);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    const [cardOrder, setCardOrder] = useState([0, 1, 2, 3]);
-    const [emojiIndex, setEmojiIndex] = useState(0);
-    const [error, setError] = useState(false);
-    useEffect(() => {
-        getDataAndProps()
-            .then((d) => {
-            setData(d);
-        })
-            .catch((err) => {
-            // eslint-disable-next-line no-console
-            console.log(err);
-            setError(true);
-        });
-    }, []);
-    useEffect(() => {
-        const { current: playerRef } = ref;
-        if (!playerRef || !data) {
-            return;
-        }
-        const onFullscreenChange = () => {
-            setIsFullscreen(playerRef.isFullscreen());
-        };
-        playerRef.addEventListener('fullscreenchange', onFullscreenChange);
-        return () => {
-            playerRef.removeEventListener('fullscreenchange', onFullscreenChange);
-        };
-    }, [data]);
-    const updateCardOrder = useCallback((newCardOrder) => {
-        setCardOrder(newCardOrder);
-    }, []);
-    const props = useMemo(() => {
-        var _a, _b;
-        return {
-            theme: colorMode,
-            onToggle: () => {
-                var _a;
-                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.toggle();
-            },
-            cardOrder,
-            updateCardOrder,
-            location: (_a = data === null || data === void 0 ? void 0 : data.location) !== null && _a !== void 0 ? _a : null,
-            trending: (_b = data === null || data === void 0 ? void 0 : data.trending) !== null && _b !== void 0 ? _b : null,
-            onClickLeft: () => {
-                setEmojiIndex((e) => e - 1);
-            },
-            onClickRight: () => {
-                setEmojiIndex((e) => e + 1);
-            },
-            emojiIndex,
-        };
-    }, [cardOrder, emojiIndex, colorMode, data, updateCardOrder]);
-    const onError = useCallback(() => {
-        setError(true);
-    }, []);
-    return (_jsxs("div", { children: [_jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Demo" }), _jsxs("div", { style: { height: 140, position: 'relative' }, children: [_jsx(DragAndDropNudge, {}), _jsx(ThemeNudge, {})] }), _jsxs("div", { style: playerWrapper, children: [_jsx(Player, { ref: ref, component: HomepageVideoComp, compositionWidth: 640, compositionHeight: 360, durationInFrames: 120, fps: 30, autoPlay: true, controls: isFullscreen, clickToPlay: false, style: style, initiallyMuted: true, inputProps: props, loop: true }), _jsx(PlayerControls, { playerRef: ref, durationInFrames: 120, fps: 30, children: _jsx(RenderButton, { onError: onError, renderData: data
-                                ? {
-                                    cardOrder,
-                                    emojiIndex,
-                                    location: data.location,
-                                    theme: colorMode,
-                                    trending: data.trending,
-                                }
-                                : null }) })] }), error ? _jsx(DemoError, {}) : null, _jsx(DownloadNudge, {})] }));
-};

package/dist/components/homepage/Demo/math.d.ts

@@ -1,10 +0,0 @@
-export type Position = {
-    x: number;
-    y: number;
-};
-export declare const paddingAndMargin = 20;
-export declare const cardHeight: number;
-export declare const cardWidth: number;
-export declare const getPositionForIndex: (index: number) => Position;
-export declare const getInitialPositions: () => Position[];
-export declare const getIndexFromPosition: (clientX: number, clientY: number) => 0 | 1 | 3 | 2 | undefined;

package/dist/components/homepage/Demo/math.js

@@ -1,29 +0,0 @@
-export const paddingAndMargin = 20;
-const height = 360;
-const width = 640;
-export const cardHeight = (height - paddingAndMargin * 3) / 2;
-export const cardWidth = (width - paddingAndMargin * 3) / 2;
-export const getPositionForIndex = (index) => {
-    const x = index % 2 === 0 ? paddingAndMargin : cardWidth + paddingAndMargin * 2;
-    const y = index < 2 ? paddingAndMargin : cardHeight + paddingAndMargin * 2;
-    return { x, y };
-};
-export const getInitialPositions = () => {
-    return new Array(4).fill(true).map((_, i) => getPositionForIndex(i));
-};
-export const getIndexFromPosition = (clientX, clientY) => {
-    const left = clientX < cardWidth / 2 + paddingAndMargin;
-    const top = clientY < cardHeight / 2 + paddingAndMargin;
-    if (left && top) {
-        return 0;
-    }
-    if (!left && top) {
-        return 1;
-    }
-    if (left && !top) {
-        return 2;
-    }
-    if (!left && !top) {
-        return 3;
-    }
-};

package/dist/components/homepage/Demo/types.d.ts

@@ -1,6 +0,0 @@
-export type Location = {
-    country: string;
-    city: string;
-    latitude: number | string;
-    longitude: number | string;
-};

package/dist/components/homepage/EvaluateRemotion.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const EvaluateRemotionSection: React.FC;
-export default EvaluateRemotionSection;

package/dist/components/homepage/EvaluateRemotion.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Adjustments to the EvaluateRemotionSection.tsx to separate the flex box into two boxes
-// with specified alignment and positioning requirements.
-import { useEffect, useState } from 'react';
-import { BlueButton } from './layout/Button';
-const EvaluateRemotionSection = () => {
-    const [dailyAvatars, setDailyAvatars] = useState([]);
-    useEffect(() => {
-        const avatars = [
-            '/img/freelancers/alex.jpeg',
-            '/img/freelancers/antoine.jpeg',
-            '/img/freelancers/ayush.png',
-            '/img/freelancers/benjamin.jpeg',
-            '/img/freelancers/florent.jpeg',
-            '/img/freelancers/karel.jpeg',
-            '/img/freelancers/lorenzo.jpeg',
-            '/img/freelancers/mickael.jpeg',
-            '/img/freelancers/mohit.jpeg',
-            '/img/freelancers/pramod.jpg',
-            '/img/freelancers/pranav.jpg',
-            '/img/freelancers/rahul.png',
-            '/img/freelancers/ray.jpeg',
-            '/img/freelancers/stephen.png',
-            '/img/freelancers/umungo.png',
-            '/img/freelancers/yehor.jpeg',
-            '/img/freelancers/andrei.png',
-            // Add more avatar paths here
-        ];
-        const selectedAvatars = [];
-        for (let i = 0; i < 3; i++) {
-            const index = Math.floor(Math.random() * avatars.length);
-            selectedAvatars.push(avatars[index]);
-            avatars.splice(index, 1); // Remove selected avatar to avoid duplicates
-        }
-        setDailyAvatars(selectedAvatars);
-    }, []);
-    return (_jsxs("div", { className: "flex flex-col lg:flex-row gap-2", children: [_jsxs("div", { className: 'card flex-1 flex flex-col', children: [_jsx("div", { className: 'fontbrand text-2xl font-bold', children: "Evaluate Remotion for your company" }), _jsx("p", { className: 'text-muted fontbrand leading-snug', children: "Book a 20 minute call with us to get all your questions answered." }), _jsx("div", { className: "flex-1" }), _jsx("a", { target: "_blank", href: "https://cal.com/remotion/evaluate", style: { textDecoration: 'none' }, children: _jsx(BlueButton, { size: "sm", loading: false, children: "Schedule a call" }) })] }), _jsxs("div", { className: 'card flex-1 flex flex-col', children: [_jsx("div", { className: 'fontbrand text-2xl font-bold', children: "Get help for your projects" }), _jsx("p", { className: 'text-muted fontbrand leading-snug', children: "Contact our experts for help and work." }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: 'flex flex-row justify-between', children: [_jsx("a", { href: "/experts", style: { textDecoration: 'none' }, children: _jsx(BlueButton, { size: "sm", loading: false, children: "Remotion Experts" }) }), _jsx("div", { className: 'flex justify-end items-end gap-3', children: dailyAvatars.map((avatar) => (_jsx("div", { className: 'w-12 h-12 rounded-full bg-muted bg-cover bg-center -ml-5 border-2 border-black', style: { backgroundImage: `url(${avatar})` } }, avatar))) })] })] })] }));
-};
-export default EvaluateRemotionSection;

package/dist/components/homepage/FreePricing.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const FreePricing: React.FC;
-export declare const EnterpriseLicense: React.FC;
-export declare const CompanyPricing: React.FC;

package/dist/components/homepage/FreePricing.js

@@ -1,75 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useMemo } from 'react';
-import { cn } from '../../cn';
-import { Counter } from './Counter';
-import { InfoTooltip } from './InfoTooltip';
-import { PricingBulletPoint } from './PricingBulletPoint';
-const Container = ({ children, }) => {
-    return (_jsx("div", { className: 'flex flex-col border-effect rounded-xl p-5 bg-pane', children: children }));
-};
-const Title = ({ children }) => {
-    return (_jsx("div", { className: "text-4xl font-bold leading-none fontbrand mt-2 mb-5", children: children }));
-};
-const Audience = ({ children }) => {
-    return _jsx("div", { className: 'fontbrand text-lg leading-none', children: children });
-};
-const BottomInfo = ({ children, className, ...props }) => {
-    return (_jsx("div", { className: cn(className, 'text-[var(--subtitle)] fontbrand text-sm'), ...props, children: children }));
-};
-const PriceTag = ({ children }) => {
-    return (_jsx("div", { className: 'fontbrand text-2xl font-bold min-w-[80px] w-auto text-right shrink-0 ml-4', children: children }));
-};
-const SmallPriceTag = ({ children }) => {
-    return (_jsx("div", { className: 'fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0', children: children }));
-};
-export const FreePricing = () => {
-    return (_jsxs(Container, { children: [_jsx(Audience, { children: "For individuals and companies of up to 3 people" }), _jsx(Title, { children: "Free License" }), _jsx(PricingBulletPoint, { text: "Unlimited videos", checked: true }), _jsx(PricingBulletPoint, { text: "Commercial use allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Self-hosted cloud rendering allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Must upgrade when your team grows", checked: false })] }));
-};
-const textUnitWrapper = {
-    display: 'flex',
-    flexDirection: 'column',
-};
-export const EnterpriseLicense = () => {
-    return (_jsxs(Container, { children: [_jsx(Audience, { children: "For advanced needs" }), _jsx(Title, { children: "Enterprise License" }), _jsx(PricingBulletPoint, { text: "Everything in Company License", checked: true }), _jsx(PricingBulletPoint, { text: "Custom terms, billing and pricing", checked: true }), _jsx(PricingBulletPoint, { text: "Compliance forms", checked: true }), _jsx(PricingBulletPoint, { text: "Prioritized feature requests", checked: true }), _jsx(PricingBulletPoint, { text: "Private Slack or Discord", checked: true }), _jsx(PricingBulletPoint, { text: "Monthly consulting session", checked: true }), _jsx("div", { style: { height: 30 } }), _jsx("div", { className: 'flex flex-row justify-end', children: _jsxs("div", { style: {
-                        ...textUnitWrapper,
-                        alignItems: 'flex-end',
-                    }, children: [_jsx(PriceTag, { children: _jsx("a", { className: 'cursor-pointer no-underline text-inherit hover:text-brand', target: '_blank', href: "https://www.remotion.pro/contact", children: "Contact us" }) }), _jsx("div", { className: 'text-[var(--subtitle)] fontbrand text-sm', children: "Starting at $500 per month" })] }) })] }));
-};
-const SEAT_PRICE = 25;
-const RENDER_UNIT_PRICE = 10;
-const WEBCODECS_UNIT_PRICE = 10;
-const icon = {
-    height: 16,
-    marginLeft: 4,
-};
-export const CompanyPricing = () => {
-    const [devSeatCount, setDevSeatCount] = React.useState(1);
-    const [cloudRenders, setCloudRenders] = React.useState(1000);
-    const [creations, setCreations] = React.useState(1000);
-    const formatPrice = useCallback((price) => {
-        const formatter = new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: 'USD',
-            maximumFractionDigits: 0,
-        });
-        return formatter.format(price);
-    }, []);
-    const totalPrice = useMemo(() => {
-        return Math.max(100, devSeatCount * SEAT_PRICE +
-            (cloudRenders / 1000) * RENDER_UNIT_PRICE +
-            (creations / 1000) * WEBCODECS_UNIT_PRICE);
-    }, [cloudRenders, devSeatCount, creations]);
-    const totalPriceString = useMemo(() => {
-        return formatPrice(totalPrice);
-    }, [formatPrice, totalPrice]);
-    return (_jsxs(Container, { children: [_jsx(Audience, { children: "For collaborations and companies of 4+ people" }), _jsx(Title, { children: "Company License" }), _jsx(PricingBulletPoint, { text: "Commercial use allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Self-hosted cloud rendering allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Prioritized Support", checked: true }), _jsx(PricingBulletPoint, { text: "$250 Mux credits", checked: true, children: _jsx(InfoTooltip, { text: "Credits for Mux.com. Applies only to new Mux customers." }) }), _jsx("div", { style: { height: 30 } }), _jsxs("div", { className: 'flex flex-col md:flex-row md:items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "Developer Seats" }), _jsx("div", { className: 'text-muted fontbrand text-sm', children: "Number of developers working with Remotion" })] }), _jsx("div", { style: { flex: 3 }, className: "hidden md:block" }), _jsxs("div", { className: "flex flex-row items-center justify-between mt-3 md:mt-0", children: [_jsx(Counter, { count: devSeatCount, setCount: setDevSeatCount, minCount: 1 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
-                                        maximumFractionDigits: 0,
-                                    }).format(SEAT_PRICE * devSeatCount)] })] })] }), _jsx("div", { style: { height: 14 } }), _jsxs("div", { className: 'flex flex-col md:flex-row md:items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "Server renders" }), _jsx("div", { className: 'text-muted fontbrand text-sm', children: _jsx("a", { href: "https://www.remotion.dev/docs/compare-ssr", className: "underline underline-offset-4 text-inherit", children: "Renders per month (self-hosted)" }) })] }), _jsx("div", { style: { flex: 3 }, className: "hidden md:block" }), _jsxs("div", { className: "flex flex-row items-center justify-between mt-3 md:mt-0", children: [_jsx(Counter, { count: cloudRenders, setCount: setCloudRenders, minCount: 0, step: 1000 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
-                                        maximumFractionDigits: 0,
-                                    }).format((cloudRenders / 1000) * RENDER_UNIT_PRICE)] })] })] }), _jsx("div", { style: { height: 14 } }), _jsxs("div", { className: 'flex flex-col md:flex-row md:items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "WebCodecs video creations" }), _jsx("div", { className: 'text-muted fontbrand text-sm', children: _jsx("a", { className: "underline underline-offset-4 text-inherit", href: "https://remotion.dev/webcodecs", children: "Client-side video creations per month" }) })] }), _jsx("div", { style: { flex: 3 }, className: "hidden md:block" }), _jsxs("div", { className: "flex flex-row items-center justify-between mt-3 md:mt-0", children: [_jsx(Counter, { count: creations, setCount: setCreations, minCount: 0, step: 1000 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
-                                        maximumFractionDigits: 0,
-                                    }).format((creations / 1000) * WEBCODECS_UNIT_PRICE)] })] })] }), _jsx("div", { style: { height: 20 } }), _jsx("div", { className: 'flex flex-row justify-end', children: _jsxs("div", { style: { ...textUnitWrapper, alignItems: 'flex-end' }, children: [_jsxs(PriceTag, { children: [totalPriceString, "/mo"] }), _jsx(BottomInfo, { "data-visible": totalPrice <= 100, className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity", children: "The minimum is $100 per month" })] }) }), _jsx("div", { className: 'flex flex-row justify-end mt-4', children: _jsx("div", { style: {
-                        ...textUnitWrapper,
-                        alignItems: 'flex-end',
-                    }, children: _jsxs("a", { href: "https://remotion.pro/dashboard", className: "font-brand text-brand flex flex-row items-center gap-1 no-underline", children: ["Buy now", ' ', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("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" }) })] }) }) })] }));
-};

package/dist/components/homepage/GetStartedStrip.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const GetStarted: React.FC;

package/dist/components/homepage/GetStartedStrip.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { GithubButton } from './GitHubButton';
-import { PlainButton } from './layout/Button';
-export const GetStarted = () => {
-    const [clicked, setClicked] = useState(null);
-    return (_jsxs("div", { className: "flex flex-col lg:flex-row items-center justify-center text-center w-full", children: [_jsx("div", { className: "w-full lg:w-auto", children: _jsxs("div", { className: "flex flex-row w-full ", children: [clicked ? (_jsx("div", { style: {
-                                animation: 'click 0.7s linear',
-                                animationFillMode: 'forwards',
-                            }, className: "absolute z-0 top-0 font-mono text-sm text-center w-full", children: "Copied!" }, clicked)) : null, _jsx("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", children: "$ npx create-video@latest" })] }) }), _jsx("div", { className: "w-2 h-2" }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx("a", { className: 'no-underline w-full block', href: "https://www.youtube.com/watch?v=deg8bOoziaE", target: "_blank", children: _jsx(PlainButton, { size: "sm", loading: false, className: "w-full", children: "Watch demo" }) }) }), _jsx("div", { style: { width: 10, height: 10 } }), _jsx("a", { className: 'no-underline w-full lg:w-auto', href: "/docs", children: _jsx(PlainButton, { size: "sm", loading: false, className: "w-full", children: "Docs" }) }), _jsx("div", { className: "w-2 h-2" }), _jsx("a", { className: "no-underline w-full lg:w-auto", href: "https://remotion.dev/discord", target: "_blank", children: _jsx(PlainButton, { size: "sm", loading: false, className: "w-full", children: "Discord" }) }), _jsx("div", { className: "w-2 h-2" }), _jsx("a", { className: "no-underline w-full lg:w-auto", href: "https://github.com/remotion-dev/remotion", target: "_blank", children: _jsx(PlainButton, { size: "sm", loading: false, className: "w-full", children: _jsx(GithubButton, {}) }) })] }));
-};

package/dist/components/homepage/GitHubButton.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const GithubButton: React.FC;

package/dist/components/homepage/GitHubButton.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GithubIcon = () => {
-    return (_jsx("svg", { viewBox: "0 0 496 512", style: { height: 24, marginRight: 8 }, children: _jsx("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" }) }));
-};
-export const GithubButton = () => {
-    return (_jsxs("div", { className: "flex flex-row items-center text-base", children: [_jsx(GithubIcon, {}), " ", _jsx("span", { children: "GitHub" }), ' ', _jsx("div", { className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center", children: '22k' })] }));
-};

package/dist/components/homepage/IconForTemplate.d.ts

@@ -1,6 +0,0 @@
-import type { Template } from 'create-video';
-import React from 'react';
-export declare const IconForTemplate: React.FC<{
-    readonly template: Template;
-    readonly scale: number;
-}>;

package/dist/components/homepage/IconForTemplate.js

@@ -1,98 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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 = ({ template, scale = 1 }) => {
-    if (template.cliId === 'hello-world') {
-        return (_jsx(TypeScriptIcon, { style: {
-                height: scale * 48,
-            } }));
-    }
-    if (template.cliId === 'blank') {
-        return (_jsx(Blank, { style: {
-                height: scale * 36,
-                overflow: 'visible',
-            } }));
-    }
-    if (template.cliId === 'javascript') {
-        return (_jsx(JSIcon, { style: {
-                height: scale * 40,
-            } }));
-    }
-    if (template.cliId === 'three') {
-        return (_jsx(Cubes, { style: {
-                height: scale * 36,
-            } }));
-    }
-    if (template.cliId === 'still') {
-        return (_jsx(StillIcon, { style: {
-                height: scale * 36,
-            } }));
-    }
-    if (template.cliId === 'audiogram') {
-        return (_jsx(Waveform, { style: {
-                height: scale * 36,
-            } }));
-    }
-    if (template.cliId === 'tts') {
-        return (_jsx(TTSIcon, { style: {
-                height: scale * 36,
-            } }));
-    }
-    if (template.cliId === 'google-tts') {
-        return (_jsx(TTSIcon, { style: {
-                height: scale * 36,
-            } }));
-    }
-    if (template.cliId === 'skia') {
-        return (_jsx(SkiaIcon, { style: {
-                height: scale * 32,
-            } }));
-    }
-    if (template.cliId === 'music-visualization') {
-        return (_jsx(MusicIcon, { style: {
-                height: scale * 32,
-            } }));
-    }
-    if (template.cliId === 'react-router') {
-        return (_jsx(ReactRouterIcon, { style: {
-                height: scale * 32,
-            } }));
-    }
-    if (template.cliId === 'overlay') {
-        return _jsx(OverlayIcon, { style: { height: scale * 42 } });
-    }
-    if (template.cliId === 'recorder') {
-        return _jsx(Recorder, { style: { height: scale * 36 } });
-    }
-    if (template.cliId === 'next' ||
-        template.cliId === 'next-tailwind' ||
-        template.cliId === 'next-pages-dir') {
-        return _jsx(NextIcon, { style: { height: scale * 36 } });
-    }
-    if (template.cliId === 'stargazer') {
-        return _jsx(Stargazer, { style: { height: scale * 36 } });
-    }
-    if (template.cliId === 'tiktok') {
-        return _jsx(TikTok, { style: { height: scale * 36 } });
-    }
-    if (template.cliId === 'code-hike') {
-        return _jsx(CodeHike, { style: { height: scale * 36 } });
-    }
-    return (_jsx(Blank, { style: {
-            height: scale * 40,
-        } }));
-};

package/dist/components/homepage/IfYouKnowReact.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const isWebkit: () => boolean;
-export declare const IfYouKnowReact: React.FC;

package/dist/components/homepage/IfYouKnowReact.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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 = {
-    height: 16,
-    marginLeft: 10,
-};
-export const IfYouKnowReact = () => {
-    const [vid, setVid] = useState('/img/compose.webm');
-    useEffect(() => {
-        if (isWebkit()) {
-            setVid('/img/compose.mp4');
-        }
-    }, []);
-    return (_jsxs("div", { className: "flex flex-col lg:flex-row text-left justify-start lg:justify-end items-start lg:mb-0 gap-6 mt-8", children: [_jsx("video", { src: vid, muted: true, autoPlay: true, playsInline: true, loop: true, className: "w-[500px] cursor-default! relative lg:-translate-x-8 -mb-40 lg:mt-0 lg:mb-0" }), _jsxs("div", { children: [_jsxs("h2", { className: "text-4xl fontbrand pt-20", children: [_jsx("span", { className: "text-brand", children: "Compose" }), " with code"] }), _jsx("p", { className: "leading-relaxed font-brand", children: "Use React, a powerful frontend technology, to create sophisticated videos with code." }), _jsx("div", { className: "h-4" }), _jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/docs/the-fundamentals", children: ["Learn Remotion", ' ', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("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" }) })] })] })] }));
-};

package/dist/components/homepage/InfoTooltip.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface InfoTooltipProps {
-    readonly text: string;
-}
-export declare const InfoTooltip: React.FC<InfoTooltipProps>;
-export {};

package/dist/components/homepage/InfoTooltip.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-export const InfoTooltip = ({ text }) => {
-    const [isVisible, setIsVisible] = useState(false);
-    return (_jsxs("span", { className: "relative inline-block ml-1 text-gray-600 cursor-default", onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), children: [_jsx("span", { style: { fontSize: '1rem' }, children: "\u24D8" }), isVisible && (_jsxs("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", children: [text, _jsx("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" })] }))] }));
-};

package/dist/components/homepage/MoreTemplatesButton.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const MoreTemplatesButton: React.FC;

package/dist/components/homepage/MoreTemplatesButton.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMobileLayout } from './layout/use-mobile-layout';
-const icon = {
-    height: 16,
-    marginLeft: 10,
-};
-export const MoreTemplatesButton = () => {
-    const mobileLayout = useMobileLayout();
-    return (_jsx("a", { href: "/templates", className: "no-underline text-inherit", children: _jsxs("div", { className: "right-0 border-2 rounded-full text-inherit px-4 py-2 fontbrand font-semibold text-sm flex flex-row items-center", children: [mobileLayout ? 'Templates' : 'Find a template', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("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" }) })] }) }));
-};

package/dist/components/homepage/MoreVideoPowerSection.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const MoreVideoPowerSection: React.FC;

package/dist/components/homepage/MoreVideoPowerSection.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StepTitle = ({ children }) => {
-    return (_jsx("div", { className: "text-left text-xl font-semibold fontbrand", children: children }));
-};
-const Subtitle = ({ children }) => {
-    return (_jsx("div", { className: "text-left text-base fontbrand text-[var(--subtitle)]", children: children }));
-};
-const Pane = ({ children, className }) => {
-    return (_jsx("div", { className: `border-effect bg-pane flex-1 flex flex-col ${className || ''}`, children: children }));
-};
-const FeatureCard = ({ title, subtitle, image, link }) => {
-    return (_jsxs("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", children: [_jsx("div", { className: "relative", children: _jsx("img", { src: image, alt: title, className: "w-full h-auto" }) }), _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StepTitle, { children: title }), _jsx("svg", { width: "16", viewBox: "0 0 448 512", fill: "currentColor", className: "opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx("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" }) })] }), _jsx(Subtitle, { children: subtitle }), _jsx("br", {}), _jsx("div", { className: "flex-1" })] })] }));
-};
-export const MoreVideoPowerSection = () => {
-    return (_jsx("div", { className: "w-full", children: _jsx(Pane, { className: "overflow-hidden", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 h-full", children: [_jsx(FeatureCard, { title: "Media Parser", subtitle: "A new multimedia library for the web", image: "/img/media-parser.png", link: "/media-parser" }), _jsx(FeatureCard, { title: "WebCodecs", subtitle: "Read, process, transform and create videos on the frontend", image: "/img/webcodecs.png", link: "/webcodecs" }), _jsx(FeatureCard, { title: "Recorder", subtitle: "Produce engaging screencasts end-to-end in JavaScript", image: "/img/recorder.png", link: "/recorder" })] }) }) }));
-};

package/dist/components/homepage/MuxVideo.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare const MuxVideo: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLVideoElement> & React.VideoHTMLAttributes<HTMLVideoElement> & {
-    readonly muxId: string;
-}, "ref"> & React.RefAttributes<HTMLVideoElement>>;
-export declare const NewMuxVideo: React.FC<{
-    readonly muxId: string;
-}>;

package/dist/components/homepage/MuxVideo.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Hls from 'hls.js';
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import { VideoPlayerWithControls } from './VideoPlayerWithControls';
-const getVideoToPlayUrl = (muxId) => {
-    return `https://stream.mux.com/${muxId}.m3u8`;
-};
-const MuxVideoForward = ({ muxId, ...props }, ref) => {
-    const videoRef = useRef(null);
-    const vidUrl = getVideoToPlayUrl(muxId);
-    useImperativeHandle(ref, () => videoRef.current, []);
-    useEffect(() => {
-        let 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 _jsx("video", { ref: videoRef, ...props });
-};
-export const MuxVideo = forwardRef(MuxVideoForward);
-export const NewMuxVideo = ({ muxId }) => {
-    return (_jsx(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/dist/components/homepage/NewsletterButton.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const NewsletterButton: React.FC<{}>;

package/dist/components/homepage/NewsletterButton.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { BlueButton } from './layout/Button';
-import { Spacer } from './Spacer';
-import { SectionTitle } from './VideoAppsTitle';
-export const NewsletterButton = () => {
-    const [email, setEmail] = useState('');
-    const [submitting, setSubmitting] = useState(false);
-    const [subscribed, setSubscribed] = useState(false);
-    const handleSubmit = useCallback(async (e) => {
-        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 (_a) {
-            // eslint-disable-next-line no-alert
-            alert('Something went wrong. Please try again later.');
-        }
-    }, [email]);
-    return (_jsx("div", { children: _jsx("div", { className: "flex flex-col", children: _jsx("div", { className: 'w-full', children: _jsxs("div", { className: 'flex flex-col flex-1', children: [_jsx(SectionTitle, { children: "Newsletter" }), _jsxs("form", { onSubmit: handleSubmit, style: {
-                                width: '100%',
-                            }, children: [_jsxs("div", { className: 'fontbrand text-center mb-10 -mt-4', children: ["Read about new features and noteworthy updates we have made on Remotion once in a while.", ' '] }), _jsx("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: true, placeholder: "animator@gmail.com" }), _jsx(Spacer, {}), _jsx(Spacer, {}), _jsx("div", { children: _jsx(BlueButton, { type: "submit", className: "w-full", loading: submitting, disabled: submitting || subscribed, size: "sm", children: subscribed ? 'Subscribed!' : 'Subscribe' }) })] })] }) }) }) }));
-};

package/dist/components/homepage/ParameterizeAndEdit.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ParameterizeAndEdit: React.FC;