@remotion/promo-pages 4.0.306 → 4.0.310

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

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-export const Switcher = ({ type, theme, onTap }) => {
-    const onPointerDown = useCallback((e) => {
-        e.stopPropagation();
-        onTap();
-    }, [onTap]);
-    const switcherSize = 40;
-    return (_jsx("div", { onPointerDown: onPointerDown, style: {
-            height: switcherSize,
-            width: switcherSize,
-            borderRadius: switcherSize / 2,
-            position: 'absolute',
-            marginLeft: -switcherSize / 2,
-            top: '50%',
-            left: type === 'left' ? 0 : '100%',
-            marginTop: -switcherSize / 2,
-            backgroundColor: theme === 'dark' ? '#222' : '#fafafa',
-            color: theme === 'dark' ? 'white' : '#222',
-            cursor: 'pointer',
-            justifyContent: 'center',
-            alignItems: 'center',
-            display: 'flex',
-        }, children: _jsxs("svg", { style: { height: switcherSize / 2 }, viewBox: "0 0 320 512", children: [type === 'left' ? (_jsx("path", { fill: "currentcolor", d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" })) : null, type === 'right' ? (_jsx("path", { fill: "currentcolor", d: "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" })) : null] }) }));
-};

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

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const Temperature: React.FC<{
-    readonly theme: 'dark' | 'light';
-    readonly city: string | null;
-    readonly temperatureInCelsius: number | null;
-}>;

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

@@ -1,21 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { AbsoluteFill } from 'remotion';
-import { TemperatureNumber } from './TemperatureNumber';
-export const Temperature = ({ theme, city, temperatureInCelsius }) => {
-    if (temperatureInCelsius === null) {
-        return null;
-    }
-    return (_jsx(AbsoluteFill, { children: _jsxs(AbsoluteFill, { style: {
-                alignItems: 'center',
-                justifyContent: 'center',
-                paddingLeft: 20,
-                paddingRight: 20,
-            }, children: [_jsxs("div", { style: {
-                        color: '#0b84f3',
-                        fontFamily: 'GTPlanar',
-                        fontWeight: '500',
-                        fontSize: 13,
-                        textAlign: 'center',
-                        marginTop: 5,
-                    }, children: ["Temperature in ", city] }), _jsx(TemperatureNumber, { theme: theme, temperatureInCelsius: temperatureInCelsius })] }) }));
-};

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const TemperatureNumber: React.FC<{
-    readonly theme: 'dark' | 'light';
-    readonly temperatureInCelsius: number;
-}>;

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

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Wheel } from './DigitWheel';
-export const TemperatureNumber = ({ theme, temperatureInCelsius }) => {
-    const temperatureInFahrenheit = (temperatureInCelsius * 9) / 5 + 32;
-    const celsiusDegree = Math.abs(temperatureInCelsius);
-    const fahrenheitDegree = Math.abs(temperatureInFahrenheit);
-    const paddedCelsiusDegree = String(celsiusDegree)
-        .padStart(fahrenheitDegree.toFixed(0).length, '0')
-        .split('');
-    const paddedFahrenheitDegree = fahrenheitDegree
-        .toFixed(0)
-        .padStart(paddedCelsiusDegree.length, '0')
-        .split('');
-    return (_jsxs("div", { style: {
-            lineHeight: 1.1,
-            fontFamily: 'GTPlanar',
-            textAlign: 'center',
-            fontWeight: 'bold',
-            fontSize: 60,
-            color: theme === 'dark' ? 'white' : 'black',
-            fontVariantNumeric: 'tabular-nums',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-        }, children: [paddedCelsiusDegree.map((digit, i) => (_jsx(Wheel
-            // eslint-disable-next-line react/no-array-index-key
-            , { delay: i * 4, renderDigit: (_i) => 9 - _i, digits: [
-                    Number(paddedFahrenheitDegree[i]),
-                    Number(digit),
-                    Number(paddedFahrenheitDegree[i]),
-                ], isNegative: [
-                    temperatureInFahrenheit < 0,
-                    temperatureInCelsius < 0,
-                    temperatureInFahrenheit < 0,
-                ], isLeadingDigit: i === 0 }, i))), _jsx("div", { style: { width: 8 } }), "\u00B0", _jsx(Wheel, { delay: paddedCelsiusDegree.length * 4 - 2, digits: [0, 1, 0], renderDigit: (_i) => _i % 2 === 0 ? 'C' : _jsx("span", { style: { marginLeft: -5 }, children: "F" }), isLeadingDigit: false, isNegative: [false, false, false] })] }));
-};

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

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

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

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { FONTS } from '../layout/colors';
-import { useColorMode } from '../layout/use-color-mode';
-const origWidth = 21;
-const scale = 0.4;
-export const Icon = () => {
-    return (_jsx("svg", { style: {
-            width: origWidth * scale,
-        }, viewBox: "0 0 21 161", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5 5C23 59.5 14.5 120.5 5.00005 156", stroke: "currentColor", strokeWidth: "8", strokeLinecap: "round" }) }));
-};
-export const ThemeNudge = () => {
-    const { colorMode, setColorMode } = useColorMode();
-    const toggleTheme = React.useCallback((e) => {
-        e.preventDefault();
-        setColorMode(colorMode === 'dark' ? 'light' : 'dark');
-    }, [colorMode, setColorMode]);
-    return (_jsx("div", { style: {
-            flexDirection: 'row',
-            display: 'flex',
-            justifyContent: 'flex-start',
-            paddingBottom: 5,
-            textAlign: 'right',
-            position: 'absolute',
-            right: 0,
-        }, children: _jsxs("div", { children: [_jsxs("div", { style: {
-                        fontFamily: FONTS.GTPLANAR,
-                        fontSize: 15,
-                        width: 280,
-                        paddingBottom: 8,
-                        marginLeft: -15,
-                        textWrap: 'balance',
-                        marginTop: 5,
-                    }, children: [_jsxs("a", { href: "#", onClick: toggleTheme, className: "bluelink", children: ["Switch to ", colorMode === 'dark' ? 'light' : 'dark', " mode"] }), ' ', "and see the video adjust!", ' '] }), _jsx(Icon, {})] }) }));
-};

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

@@ -1,6 +0,0 @@
-import type { PlayerRef } from '@remotion/player';
-import React from 'react';
-export declare const TimeDisplay: React.FC<{
-    readonly fps: number;
-    readonly playerRef: React.RefObject<PlayerRef | null>;
-}>;

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

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
-const formatTime = (timeInSeconds) => {
-    const minutes = Math.floor(timeInSeconds / 60);
-    const seconds = Math.floor(timeInSeconds - minutes * 60);
-    return `${String(minutes)}:${String(seconds).padStart(2, '0')}`;
-};
-export const TimeDisplay = ({ fps, playerRef }) => {
-    const [time, setTime] = React.useState(0);
-    useEffect(() => {
-        const { current } = playerRef;
-        if (!current) {
-            return;
-        }
-        const onTimeUpdate = () => {
-            setTime(current.getCurrentFrame());
-        };
-        current.addEventListener('frameupdate', onTimeUpdate);
-        return () => {
-            current.removeEventListener('frameupdate', onTimeUpdate);
-        };
-    }, [playerRef]);
-    return (_jsx("div", { style: {
-            fontSize: 16,
-            fontVariantNumeric: 'tabular-nums',
-        }, children: _jsx("span", { children: formatTime(time / fps) }) }));
-};

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { RemoteData } from './Comp';
-export declare const TrendingRepos: React.FC<{
-    readonly theme: 'dark' | 'light';
-    readonly trending: RemoteData | null;
-}>;

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

@@ -1,65 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from 'remotion';
-const TrendingRepoItem = ({ repo, theme, number }) => {
-    const frame = useCurrentFrame();
-    const { fps } = useVideoConfig();
-    const progress = spring({
-        fps,
-        frame,
-        config: {
-            damping: 200,
-        },
-        delay: number * 10 + 20,
-    });
-    const item = useMemo(() => {
-        return {
-            lineHeight: 1.1,
-            fontFamily: 'GTPlanar',
-            fontWeight: '500',
-            color: theme === 'dark' ? 'white' : 'black',
-            fontFeatureSettings: "'ss03' 1",
-            opacity: progress,
-        };
-    }, [progress, theme]);
-    return (_jsxs("div", { style: item, children: [number, ". ", repo] }));
-};
-export const TrendingRepos = ({ theme, trending }) => {
-    const fill = theme === 'light' ? '#666' : '#999';
-    const frame = useCurrentFrame();
-    const { fps } = useVideoConfig();
-    const progress1 = spring({
-        fps,
-        frame,
-        config: {
-            damping: 200,
-        },
-        delay: 0,
-    });
-    if (trending === null) {
-        return null;
-    }
-    return (_jsx(AbsoluteFill, { children: _jsx(AbsoluteFill, { style: {
-                justifyContent: 'center',
-                paddingLeft: 20,
-                paddingRight: 20,
-            }, children: _jsxs("div", { children: [_jsx("div", { style: {
-                            color: fill,
-                            fontFamily: 'GTPlanar',
-                            fontWeight: '500',
-                            fontSize: 12,
-                            opacity: progress1,
-                        }, children: new Intl.DateTimeFormat('en-US', {
-                            weekday: 'long',
-                            month: 'long',
-                            day: 'numeric',
-                        }).format(new Date(trending.date)) }), _jsx("div", { style: {
-                            color: '#0b84f3',
-                            fontFamily: 'GTPlanar',
-                            fontWeight: '500',
-                            fontSize: 16,
-                            marginBottom: 15,
-                            opacity: progress1,
-                            lineHeight: 1,
-                        }, children: "Trending repositories" }), _jsx(TrendingRepoItem, { number: 1, repo: trending.repos[0], theme: theme }), _jsx(TrendingRepoItem, { number: 2, repo: trending.repos[1], theme: theme }), _jsx(TrendingRepoItem, { number: 3, repo: trending.repos[2], theme: theme })] }) }) }));
-};

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

@@ -1,10 +0,0 @@
-import type { SVGProps } from 'react';
-import React from 'react';
-export declare const IconLeft: React.FC<SVGProps<SVGSVGElement>>;
-export declare const IconRight: React.FC<SVGProps<SVGSVGElement>>;
-export declare const CancelIcon: React.FC<SVGProps<SVGSVGElement>>;
-export declare const PausedIcon: React.FC<SVGProps<SVGSVGElement>>;
-export declare const PlayingIcon: React.FC<SVGProps<SVGSVGElement>>;
-export declare const FullscreenIcon: React.FC<SVGProps<SVGSVGElement>>;
-export declare const NotMutedIcon: React.FC<SVGProps<SVGSVGElement>>;
-export declare const IsMutedIcon: React.FC<SVGProps<SVGSVGElement>>;

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

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { RED } from '../layout/colors';
-export const IconLeft = (props) => (_jsx("svg", { viewBox: "0 0 320 512", ...props, children: _jsx("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" }) }));
-export const IconRight = (props) => (_jsx("svg", { viewBox: "0 0 320 512", ...props, children: _jsx("path", { fill: "currentColor", d: "M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" }) }));
-export const CancelIcon = (props) => {
-    return (_jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "times", className: "svg-inline--fa fa-times fa-w-11", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 352 512", ...props, children: _jsx("path", { fill: "currentColor", d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" }) }));
-};
-export const PausedIcon = (props) => {
-    return (_jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "play", className: "svg-inline--fa fa-play fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: _jsx("path", { fill: "currentColor", d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" }) }));
-};
-export const PlayingIcon = (props) => {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", fill: "currentColor", ...props, children: _jsx("path", { d: "M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z" }) }));
-};
-export const FullscreenIcon = (props) => {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", fill: "currentColor", ...props, children: _jsx("path", { d: "M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z" }) }));
-};
-export const NotMutedIcon = (props) => {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, viewBox: "0 0 640 512", fill: "currentColor", children: _jsx("path", { d: "M32 160l0 192 128 0L304 480l48 0 0-448-48 0L160 160 32 160zM441.6 332.8C464.9 315.3 480 287.4 480 256s-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l28.8 38.4zm57.6 76.8c46.6-35 76.8-90.8 76.8-153.6s-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2s-22.6 88.9-57.6 115.2l28.8 38.4z" }) }));
-};
-export const IsMutedIcon = (props) => {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, viewBox: "0 0 640 512", fill: RED, children: _jsx("path", { d: "M48.4 14.8L29.4 .1 0 38l19 14.7L591.5 497.2l19 14.7L639.9 474l-19-14.7-95.1-73.8C557 351.3 576 305.9 576 256c0-62.8-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2c0 38.8-15.3 74-40.3 99.9l-38.2-29.7C468.3 308.7 480 283.7 480 256c0-31.4-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l5.9 7.9L352 250.5 352 32l-48 0L195.2 128.7 48.4 14.8zM352 373.3L81.2 160 32 160l0 192 128 0L304 480l48 0 0-106.7z" }) }));
-};

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

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

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 | 2 | 3 | 1 | 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/Editor.d.ts

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

package/dist/components/homepage/Editor.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-export const LightningFastEditor = () => {
-    const ref = useRef(null);
-    const videoRef = useRef(null);
-    const [isIntersecting, setIsIntersecting] = useState(false);
-    const callback = useCallback((data) => {
-        var _a, _b;
-        const { isIntersecting: intersecting } = data[0];
-        setIsIntersecting(intersecting);
-        if (intersecting) {
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-        }
-        else {
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
-        }
-    }, []);
-    useEffect(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        const observer = new IntersectionObserver(callback, {
-            root: null,
-            threshold: 0.2,
-        });
-        observer.observe(current);
-        return () => observer.unobserve(current);
-    }, [callback]);
-    return (_jsxs("div", { ref: ref, className: 'flex flex-col-reverse lg:flex-row justify-start lg:justify-end lg:text-right items-start lg:items-center', children: [_jsx("div", { children: _jsx("video", { src: "/img/player-demo.mp4", autoPlay: true, muted: true, playsInline: true, loop: true, style: {
-                        animationPlayState: isIntersecting ? 'running' : 'paused',
-                        width: 500,
-                        maxWidth: '100%',
-                        borderRadius: 7,
-                        overflow: 'hidden',
-                    } }) }), _jsxs("div", { style: { flex: 1 }, children: [_jsxs("h2", { className: 'fontbrand text-4xl', children: ["Fast and ", _jsx("br", {}), " ", _jsx("span", { className: "text-brand", children: "delightful" }), " editing"] }), _jsxs("p", { className: "leading-relaxed", children: ["Preview your video in the browser. ", _jsx("br", {}), "Fast refresh while the video is playing. ", _jsx("br", {}), "Scrub through the timeline to get every frame perfect."] })] })] }));
-};

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,80 +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 ml-4', 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 support channel", 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;
-export const CompanyPricing = () => {
-    const [devSeatCount, setDevSeatCount] = React.useState(1);
-    const [cloudUnitCount, setCloudUnitCount] = React.useState(1);
-    const [webcodecsUnits, setWebcodecsUnits] = React.useState(1);
-    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 +
-            cloudUnitCount * RENDER_UNIT_PRICE +
-            webcodecsUnits * WEBCODECS_UNIT_PRICE);
-    }, [cloudUnitCount, devSeatCount, webcodecsUnits]);
-    const totalPriceString = useMemo(() => {
-        return formatPrice(totalPrice);
-    }, [formatPrice, totalPrice]);
-    const rendersPerMonth = useMemo(() => {
-        const formatter = new Intl.NumberFormat('en-US', {
-            maximumFractionDigits: 0,
-        });
-        return formatter.format(cloudUnitCount * 1000);
-    }, [cloudUnitCount]);
-    const conversionsPerMonth = useMemo(() => {
-        const formatter = new Intl.NumberFormat('en-US', {
-            maximumFractionDigits: 0,
-        });
-        return formatter.format(webcodecsUnits * 1000);
-    }, [webcodecsUnits]);
-    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: _jsxs("span", { children: [_jsx("a", { href: "https://remotion.dev/recorder", className: "underline underline-offset-4 text-inherit", children: "Remotion Recorder" }), ' ', "included"] }), 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-row 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 } }), _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-row items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "Cloud Rendering Units" }), _jsxs("div", { className: 'text-muted fontbrand text-sm', children: ["Allows for ", rendersPerMonth, ' ', _jsx("a", { href: "https://www.remotion.dev/docs/compare-ssr", className: "underline underline-offset-4 text-inherit", children: "self-hosted renders per month" }), ' ', "each"] })] }), _jsx("div", { style: { flex: 3 } }), _jsx(Counter, { count: cloudUnitCount, setCount: setCloudUnitCount, minCount: 0 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
-                                maximumFractionDigits: 0,
-                            }).format(RENDER_UNIT_PRICE * cloudUnitCount)] })] }), _jsx("div", { style: { height: 14 } }), _jsxs("div", { className: 'flex flex-row items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "WebCodecs Conversion Units" }), _jsxs("div", { className: 'text-muted fontbrand text-sm', children: ["Allows for", ' ', _jsxs("a", { className: "underline underline-offset-4 text-inherit", href: "https://remotion.dev/webcodecs", children: [conversionsPerMonth, " client-side video conversions", ' '] })] })] }), _jsx("div", { style: { flex: 3 } }), _jsx(Counter, { count: webcodecsUnits, setCount: setWebcodecsUnits, minCount: 0 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
-                                maximumFractionDigits: 0,
-                            }).format(RENDER_UNIT_PRICE * webcodecsUnits)] })] }), _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" })] }) })] }));
-};

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

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