@remotion/promo-pages 4.0.369 → 4.0.371

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 480 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 400 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/EditorStarterSection.d.ts

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

package/dist/components/homepage/EditorStarterSection.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BlueButton, ClearButton } from './layout/Button';
-import { MuxVideo } from './MuxVideo';
-import { SectionTitle } from './VideoAppsTitle';
-const EditorStarterSection = () => {
-    return (_jsxs("div", { children: [_jsx(SectionTitle, { children: "Build your own video editor" }), _jsx("br", {}), _jsx("div", { className: 'card flex p-0 overflow-hidden', children: _jsxs("div", { className: 'flex-1 flex flex-col lg:flex-row justify-center', children: [_jsx("div", { className: 'w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee]', children: _jsx(MuxVideo, { muxId: 'YIvIidbcAc7009B00Wr7gIbGyq67YGNlytGvMXwdsLRtc', className: 'absolute left-0 top-0 w-full h-full object-cover object-top rounded-sm rounded-tr-none rounded-br-none', loop: true, autoPlay: true, playsInline: true, muted: true }) }), _jsxs("div", { className: 'p-6 flex-1 flex flex-col h-full', children: [_jsx("div", { className: "text-4xl font-bold fontbrand mt-0", children: "Editor Starter" }), _jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: "A comprehensive template that includes everything you need to create custom video editing applications with React and TypeScript." }), _jsx("div", { className: "h-5" }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("a", { href: "https://www.remotion.pro/editor-starter?ref=remotion.dev", target: "_blank", className: "no-underline", children: _jsx(BlueButton, { size: "sm", loading: false, children: "Purchase" }) }), _jsx("a", { href: "https://editor-starter.remotion.dev?ref=remotion.dev", target: "_blank", className: "no-underline", children: _jsx(ClearButton, { size: "sm", loading: false, children: "Demo" }) }), ' ', _jsx("a", { href: "https://remotion.dev/editor-starter", className: "no-underline", children: _jsx(ClearButton, { size: "sm", loading: false, children: "Docs" }) })] }), _jsx("br", {})] })] }) })] }));
-};
-export default EditorStarterSection;

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,38 +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/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,69 +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: "Private Slack or Discord", checked: true }), _jsx(PricingBulletPoint, { text: "Monthly consulting session", 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: _jsxs("span", { children: [_jsx("a", { href: "https://www.remotion.dev/editor-starter", className: "underline underline-offset-4 text-inherit", children: "Editor Starter" }), ' ', "included"] }), 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 icon = {
-    height: 16,
-    marginLeft: 4,
-};
-export const CompanyPricing = () => {
-    const [devSeatCount, setDevSeatCount] = React.useState(1);
-    const [cloudRenders, setCloudRenders] = 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);
-    }, [cloudRenders, devSeatCount]);
-    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: "Video renders" }), _jsx("div", { className: 'text-muted fontbrand text-sm', children: _jsx("a", { href: "https://www.remotion.dev/docs/render", 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 } }), _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: '24k' })] }));
-};

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