@remotion/promo-pages 4.0.321 → 4.0.323

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

@@ -1,216 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { interpolate } from 'remotion';
-import { useElementSize } from '../layout/use-el-size';
-const getFrameFromX = (clientX, durationInFrames, width) => {
-    const pos = clientX;
-    const frame = Math.round(interpolate(pos, [0, width], [0, durationInFrames - 1], {
-        extrapolateLeft: 'clamp',
-        extrapolateRight: 'clamp',
-    }));
-    return frame;
-};
-const BAR_HEIGHT = 5;
-const KNOB_SIZE = 12;
-const VERTICAL_PADDING = 4;
-const containerStyle = {
-    userSelect: 'none',
-    WebkitUserSelect: 'none',
-    paddingTop: VERTICAL_PADDING,
-    paddingBottom: VERTICAL_PADDING,
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-    position: 'relative',
-    touchAction: 'none',
-    flex: 1,
-};
-const barBackground = {
-    height: BAR_HEIGHT,
-    backgroundColor: 'rgba(0, 0, 0, 0.25)',
-    width: '100%',
-    borderRadius: BAR_HEIGHT / 2,
-};
-const findBodyInWhichDivIsLocated = (div) => {
-    let current = div;
-    while (current.parentElement) {
-        current = current.parentElement;
-    }
-    return current;
-};
-export const useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
-    const [hovered, setHovered] = useState(false);
-    useEffect(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        let hoverTimeout;
-        const addHoverTimeout = () => {
-            if (hideControlsWhenPointerDoesntMove) {
-                clearTimeout(hoverTimeout);
-                hoverTimeout = setTimeout(() => {
-                    setHovered(false);
-                }, hideControlsWhenPointerDoesntMove === true
-                    ? 3000
-                    : hideControlsWhenPointerDoesntMove);
-            }
-        };
-        const onHover = () => {
-            setHovered(true);
-            addHoverTimeout();
-        };
-        const onLeave = () => {
-            setHovered(false);
-            clearTimeout(hoverTimeout);
-        };
-        const onMove = () => {
-            setHovered(true);
-            addHoverTimeout();
-        };
-        current.addEventListener('mouseenter', onHover);
-        current.addEventListener('mouseleave', onLeave);
-        current.addEventListener('mousemove', onMove);
-        return () => {
-            current.removeEventListener('mouseenter', onHover);
-            current.removeEventListener('mouseleave', onLeave);
-            current.removeEventListener('mousemove', onMove);
-            clearTimeout(hoverTimeout);
-        };
-    }, [hideControlsWhenPointerDoesntMove, ref]);
-    return hovered;
-};
-export const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame, playerRef, }) => {
-    var _a;
-    const containerRef = useRef(null);
-    const barHovered = useHoverState(containerRef, false);
-    const size = useElementSize(containerRef.current);
-    const [playing, setPlaying] = useState(false);
-    const [frame, setFrame] = useState(0);
-    useEffect(() => {
-        const { current } = playerRef;
-        if (!current) {
-            return;
-        }
-        const onFrameUpdate = () => {
-            setFrame(playerRef.current.getCurrentFrame());
-        };
-        current.addEventListener('frameupdate', onFrameUpdate);
-        return () => {
-            current.removeEventListener('frameupdate', onFrameUpdate);
-        };
-    }, [playerRef]);
-    useEffect(() => {
-        const { current } = playerRef;
-        if (!current) {
-            return;
-        }
-        const onPlay = () => {
-            setPlaying(true);
-        };
-        const onPause = () => {
-            setPlaying(false);
-        };
-        current.addEventListener('play', onPlay);
-        current.addEventListener('pause', onPause);
-        return () => {
-            current.removeEventListener('play', onPlay);
-            current.removeEventListener('pause', onPause);
-        };
-    }, [playerRef]);
-    const [dragging, setDragging] = useState({
-        dragging: false,
-    });
-    const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
-    const onPointerDown = useCallback((e) => {
-        var _a;
-        if (e.button !== 0) {
-            return;
-        }
-        const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
-        const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, width);
-        playerRef.current.pause();
-        playerRef.current.seekTo(_frame);
-        setDragging({
-            dragging: true,
-            wasPlaying: playing,
-        });
-        onSeekStart();
-    }, [durationInFrames, width, playerRef, playing, onSeekStart]);
-    const onPointerMove = useCallback((e) => {
-        var _a;
-        if (!size) {
-            throw new Error('Player has no size');
-        }
-        if (!dragging.dragging) {
-            return;
-        }
-        const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
-        const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
-        playerRef.current.seekTo(_frame);
-    }, [dragging.dragging, durationInFrames, playerRef, size]);
-    const onPointerUp = useCallback(() => {
-        setDragging({
-            dragging: false,
-        });
-        if (!dragging.dragging) {
-            return;
-        }
-        if (dragging.wasPlaying) {
-            playerRef.current.play();
-        }
-        else {
-            playerRef.current.pause();
-        }
-        onSeekEnd();
-    }, [dragging, onSeekEnd, playerRef]);
-    useEffect(() => {
-        if (!dragging.dragging) {
-            return;
-        }
-        const body = findBodyInWhichDivIsLocated(containerRef.current);
-        body.addEventListener('pointermove', onPointerMove);
-        body.addEventListener('pointerup', onPointerUp);
-        return () => {
-            body.removeEventListener('pointermove', onPointerMove);
-            body.removeEventListener('pointerup', onPointerUp);
-        };
-    }, [dragging.dragging, onPointerMove, onPointerUp]);
-    const knobStyle = useMemo(() => {
-        return {
-            height: KNOB_SIZE,
-            width: KNOB_SIZE,
-            borderRadius: KNOB_SIZE / 2,
-            position: 'absolute',
-            top: VERTICAL_PADDING - KNOB_SIZE / 2 + 5 / 2,
-            backgroundColor: 'var(--ifm-font-color-base)',
-            left: Math.max(0, (frame / Math.max(1, durationInFrames - 1)) * width - KNOB_SIZE / 2),
-            outline: '2px solid var(--ifm-background-color)',
-            opacity: Number(barHovered),
-            transition: 'opacity 0.s ease',
-        };
-    }, [barHovered, durationInFrames, frame, width]);
-    const fillStyle = useMemo(() => {
-        return {
-            height: BAR_HEIGHT,
-            backgroundColor: 'var(--ifm-font-color-base)',
-            width: ((frame - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) / (durationInFrames - 1)) * 100 + '%',
-            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
-            borderRadius: BAR_HEIGHT / 2,
-        };
-    }, [durationInFrames, frame, inFrame]);
-    const active = useMemo(() => {
-        return {
-            height: BAR_HEIGHT,
-            backgroundColor: 'var(--ifm-font-color-base)',
-            opacity: 0.2,
-            width: (((outFrame !== null && outFrame !== void 0 ? outFrame : durationInFrames - 1) - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) /
-                (durationInFrames - 1)) *
-                100 +
-                '%',
-            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
-            borderRadius: BAR_HEIGHT / 2,
-            position: 'absolute',
-        };
-    }, [durationInFrames, inFrame, outFrame]);
-    return (_jsxs("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [_jsxs("div", { style: barBackground, children: [_jsx("div", { style: active }), _jsx("div", { style: fillStyle })] }), _jsx("div", { style: knobStyle })] }));
-};

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

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

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

@@ -1,53 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { PALETTE } from '../layout/colors';
-import { IsMutedIcon, NotMutedIcon } from './icons';
-export const PlayerVolume = ({ playerRef }) => {
-    const [muted, setIsMuted] = useState(() => { var _a, _b; return (_b = (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.isMuted()) !== null && _b !== void 0 ? _b : true; });
-    const [isHovered, setIsHovered] = useState(false);
-    const timerRef = useRef(null);
-    useEffect(() => {
-        const { current } = playerRef;
-        if (!current) {
-            return;
-        }
-        const onMutedChange = (e) => {
-            setIsMuted(e.detail.isMuted);
-        };
-        current.addEventListener('mutechange', onMutedChange);
-        return () => {
-            current.removeEventListener('mutechange', onMutedChange);
-        };
-    }, [playerRef]);
-    useEffect(() => {
-        if (isHovered) {
-            document.body.style.userSelect = 'none';
-        }
-        else {
-            document.body.style.userSelect = 'auto';
-        }
-    }, [isHovered]);
-    const onClick = useCallback(() => {
-        if (timerRef.current !== null) {
-            clearTimeout(timerRef.current);
-            timerRef.current = null;
-        }
-        if (playerRef.current.isMuted()) {
-            playerRef.current.unmute();
-        }
-        else {
-            playerRef.current.mute();
-        }
-    }, [playerRef]);
-    return (_jsx("div", { className: 'relative cursor-pointer block pl-4 pr-4 h-full', onMouseEnter: () => setIsHovered(true), children: _jsx("button", { type: "button", onClick: onClick, style: {
-                background: 'transparent',
-                border: 0,
-                cursor: 'pointer',
-                padding: 0,
-                display: 'flex',
-                height: 50,
-                justifyContent: 'center',
-                alignItems: 'center',
-                color: PALETTE.TEXT_COLOR,
-            }, children: muted ? (_jsx(IsMutedIcon, { style: { height: 20 } })) : (_jsx(NotMutedIcon, { style: { height: 20 } })) }) }));
-};

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

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const Progress: React.FC<{
-    readonly progress: number;
-}>;

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

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { makeCircle, makePie } from '@remotion/shapes';
-import { PALETTE } from '../layout/colors';
-export const Progress = ({ progress }) => {
-    const inner = makeCircle({
-        radius: 10,
-    });
-    const outer = makePie({
-        progress,
-        closePath: false,
-        radius: 10,
-    });
-    return (_jsxs("svg", { viewBox: `0 0 ${inner.width} ${inner.height}`, style: { overflow: 'visible', height: 22 }, children: [_jsx("path", { d: inner.path, stroke: PALETTE.BORDER_COLOR, strokeWidth: 4, fill: "transparent" }), _jsx("path", { d: outer.path, stroke: PALETTE.BRAND, strokeWidth: 4, fill: "transparent", strokeLinecap: "round" })] }));
-};

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const Spinner: React.FC<{
-    readonly size: number;
-    readonly duration: number;
-}>;

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

@@ -1,37 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { PALETTE } from '../layout/colors';
-const viewBox = 100;
-const lines = 8;
-const className = '__remotion_spinner_line';
-const remotionSpinnerAnimation = '__remotion_spinner_animation';
-// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
-const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
-export const Spinner = ({ size, duration }) => {
-    const style = useMemo(() => {
-        return {
-            width: size,
-            height: size,
-        };
-    }, [size]);
-    return (_jsxs(_Fragment, { children: [_jsx("style", { type: "text/css", children: `
-				@keyframes ${remotionSpinnerAnimation} {
-          0% {
-            opacity: 1;
-          }
-          100% {
-            opacity: 0.15;
-          }
-        }
-        
-        .${className} {
-            animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
-        }        
-			` }), _jsx("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
-                    return (_jsx("path", { className: className, style: {
-                            rotate: `${(index * Math.PI * 2) / lines}rad`,
-                            transformOrigin: 'center center',
-                            animationDelay: `${index * (duration / lines) - duration}s`,
-                        }, d: translated, fill: PALETTE.TEXT_COLOR }, index));
-                }) })] }));
-};

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

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const Switcher: React.FC<{
-    readonly type: 'left' | 'right';
-    readonly theme: 'dark' | 'light';
-    readonly onTap: () => void;
-}>;

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;