@remotion/promo-pages 4.0.458 → 4.0.459

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

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

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

@@ -0,0 +1,53 @@
+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', onPointerEnter: () => 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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