@remotion/promo-pages 4.0.458 → 4.0.459

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

@@ -0,0 +1,174 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { AbsoluteFill, spring } from 'remotion';
+import { cardHeight, cardWidth, getIndexFromPosition, getInitialPositions, getPositionForIndex, } from './math';
+import { Switcher } from './Switcher';
+const arePositionsEqual = (a, b) => {
+    return a.every((pos, i) => {
+        return pos.x === b[i].x && pos.y === b[i].y;
+    });
+};
+export const Card = ({ positions, shouldBePositions, index, refsToUse, onUpdate, content, indices, theme, withSwitcher, onClickLeft, onClickRight, }) => {
+    const refToUse = refsToUse[index];
+    const stopPrevious = useRef([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    let newIndices = [...indices];
+    const applyPositions = useCallback((except) => {
+        let stopped = false;
+        stopPrevious.current.forEach((s) => {
+            s();
+        });
+        stopPrevious.current.push(() => {
+            stopped = true;
+        });
+        positions.current.forEach((_, i) => {
+            const shouldBe = shouldBePositions.current[i];
+            const ref = refsToUse[i].current;
+            if (!ref) {
+                return;
+            }
+            if (except === null) {
+                ref.style.pointerEvents = 'none';
+            }
+            if (i === except) {
+                ref.style.left = getPositionForIndex(i).x + 'px';
+                ref.style.top = getPositionForIndex(i).y + 'px';
+                return;
+            }
+            let animationI = 1;
+            const duration = 20;
+            const releasePositionX = positions.current[i].x;
+            const releasePositionY = positions.current[i].y;
+            const finishAnimation = () => {
+                refsToUse.forEach((r) => {
+                    r.current.style.zIndex = '1';
+                    r.current.style.scale = '1';
+                    r.current.style.opacity = '1';
+                });
+                if (i === 0) {
+                    setTimeout(() => {
+                        onUpdate([...newIndices]);
+                    }, 200);
+                }
+            };
+            if (releasePositionX === shouldBe.x &&
+                releasePositionY === shouldBe.y &&
+                animationI === duration &&
+                except === null) {
+                finishAnimation();
+                return;
+            }
+            const update = () => {
+                if (stopped) {
+                    return;
+                }
+                const progress = spring({
+                    fps: 60,
+                    frame: animationI,
+                    config: {
+                        damping: 200,
+                    },
+                    durationInFrames: duration,
+                    durationRestThreshold: 0.001,
+                });
+                const newX = progress * (shouldBe.x - releasePositionX) + releasePositionX;
+                const newY = progress * (shouldBe.y - releasePositionY) + releasePositionY;
+                ref.style.left = `${newX}px`;
+                ref.style.top = `${newY}px`;
+                positions.current[i] = {
+                    x: newX,
+                    y: newY,
+                };
+                animationI++;
+                if (animationI === duration && except === null) {
+                    finishAnimation();
+                    return;
+                }
+                requestAnimationFrame(update);
+            };
+            update();
+        });
+    }, [newIndices, onUpdate, positions, refsToUse, shouldBePositions]);
+    const onPointerDown = useCallback((e) => {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const cardLeft = refToUse.current.offsetLeft;
+        const cardTop = refToUse.current.offsetTop;
+        const startX = e.clientX;
+        const startY = e.clientY;
+        if (e.button === 2) {
+            return;
+        }
+        let translateX = 0;
+        let translateY = 0;
+        refToUse.current.style.scale = '1.05';
+        refToUse.current.style.cursor = 'grabbing';
+        const onMove = (evt) => {
+            refsToUse.forEach((r) => {
+                if (r !== refToUse) {
+                    r.current.style.opacity = '0';
+                }
+            });
+            const scale = refToUse.current.getBoundingClientRect().width / cardWidth;
+            translateX = (evt.clientX - startX) * (1 / scale);
+            translateY = (evt.clientY - startY) * (1 / scale);
+            const position = getIndexFromPosition(cardLeft + translateX, cardTop + translateY);
+            if (position === undefined) {
+                throw new Error('pos');
+            }
+            if (position === index) {
+                if (!arePositionsEqual(getInitialPositions(), shouldBePositions.current)) {
+                    shouldBePositions.current = getInitialPositions();
+                    applyPositions(index);
+                }
+            }
+            else {
+                const newPos = getInitialPositions();
+                newPos[position] = getPositionForIndex(index);
+                newPos[index] = getPositionForIndex(position);
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                newIndices = [...indices];
+                const prevIndexPosition = newIndices[position];
+                newIndices[position] = newIndices[index];
+                newIndices[index] = prevIndexPosition;
+                if (!arePositionsEqual(newPos, shouldBePositions.current)) {
+                    shouldBePositions.current = newPos;
+                    applyPositions(index);
+                }
+            }
+            refToUse.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px)`;
+            refToUse.current.style.zIndex = '2';
+        };
+        refToUse.current.addEventListener('pointerup', () => {
+            positions.current[index] = {
+                x: cardLeft + translateX,
+                y: cardTop + translateY,
+            };
+            refToUse.current.style.left = `${cardLeft + translateX}px`;
+            refToUse.current.style.top = `${cardTop + translateY}px`;
+            refToUse.current.style.transform = `translateX(0px) translateY(0px)`;
+            refToUse.current.style.cursor = 'grab';
+            refToUse.current.removeEventListener('pointermove', onMove);
+            applyPositions(null);
+        }, { once: true });
+        refToUse.current.addEventListener('pointermove', onMove);
+    }, [applyPositions, index, positions, refToUse, shouldBePositions]);
+    const onPointerUp = useCallback((e) => {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+    }, []);
+    const { x, y } = getPositionForIndex(index);
+    const color = theme === 'light' ? ' #EAEAEA' : '#333';
+    return (_jsx("div", { ref: refToUse, className: 'transition-opacity duration-200', onPointerDown: onPointerDown, onPointerUp: onPointerUp, style: {
+            width: cardWidth,
+            height: cardHeight,
+            position: 'absolute',
+            left: x,
+            top: y,
+            userSelect: 'none',
+            border: `1px solid ${color}`,
+            borderRadius: 13,
+            cursor: 'grab',
+        }, children: _jsxs(AbsoluteFill, { style: {
+                backgroundColor: color,
+                borderRadius: 12,
+            }, className: 'transition-opacity duration-200', children: [content, withSwitcher ? (_jsxs(_Fragment, { children: [_jsx(Switcher, { onTap: onClickLeft, type: "left", theme: theme }), _jsx(Switcher, { onTap: onClickRight, type: "right", theme: theme })] })) : null] }) }));
+};

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

@@ -0,0 +1,15 @@
+import type { EmojiName } from '@remotion/animated-emoji';
+import React from 'react';
+import type { RemoteData } from './Comp';
+import type { Location } from './types';
+export declare const Cards: React.FC<{
+    readonly onUpdate: (newIndices: number[]) => void;
+    readonly indices: number[];
+    readonly theme: 'dark' | 'light';
+    readonly location: Location | null;
+    readonly trending: RemoteData | null;
+    readonly onToggle: () => void;
+    readonly onLeft: () => void;
+    readonly onRight: () => void;
+    readonly emojiName: EmojiName;
+}>;

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef, useCallback, useEffect, useRef, useState, } from 'react';
+import { AbsoluteFill, useRemotionEnvironment } from 'remotion';
+import { Card } from './Card';
+import { CurrentCountry } from './CurrentCountry';
+import { EmojiCard } from './EmojiCard';
+import { getInitialPositions } from './math';
+import { Temperature } from './Temperature';
+import { TrendingRepos } from './TrendingRepos';
+export const Cards = ({ onUpdate, indices, theme, onToggle, onLeft: onLeftPress, onRight: onRightPress, emojiName, location, trending, }) => {
+    const container = useRef(null);
+    const [refs] = useState(() => {
+        return new Array(4).fill(true).map(() => {
+            return createRef();
+        });
+    });
+    const positions = useRef(getInitialPositions());
+    const shouldBePositions = useRef(getInitialPositions());
+    const { isRendering } = useRemotionEnvironment();
+    useEffect(() => {
+        const { current } = container;
+        if (!current) {
+            return;
+        }
+        const onClick = (e) => {
+            if (e.target !== current) {
+                return;
+            }
+            onToggle();
+        };
+        current.addEventListener('click', onClick);
+        return () => {
+            current.removeEventListener('click', onClick);
+        };
+    }, [onToggle]);
+    const ref = useRef(null);
+    const onLeft = useCallback(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.onRight();
+        onRightPress();
+    }, [onRightPress]);
+    const onRight = useCallback(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.onLeft();
+        onLeftPress();
+    }, [onLeftPress]);
+    return (_jsx(AbsoluteFill, { ref: container, children: new Array(4).fill(true).map((_, i) => {
+            var _a, _b, _c;
+            const index = indices[i];
+            const content = index === 0 ? (_jsx(TrendingRepos, { trending: trending, theme: theme })) : index === 1 ? (_jsx(Temperature, { city: (location === null || location === void 0 ? void 0 : location.city) ? decodeURIComponent(location === null || location === void 0 ? void 0 : location.city) : null, theme: theme, temperatureInCelsius: (_a = trending === null || trending === void 0 ? void 0 : trending.temperatureInCelsius) !== null && _a !== void 0 ? _a : null })) : index === 2 ? (_jsx(CurrentCountry, { countryPaths: (_b = trending === null || trending === void 0 ? void 0 : trending.countryPaths) !== null && _b !== void 0 ? _b : null, countryLabel: (_c = trending === null || trending === void 0 ? void 0 : trending.countryLabel) !== null && _c !== void 0 ? _c : null, theme: theme })) : (_jsx(EmojiCard, { ref: ref, emojiIndex: emojiName }));
+            return (_jsx(Card
+            // eslint-disable-next-line react/no-array-index-key
+            , { onUpdate: onUpdate, 
+                // @ts-expect-error
+                refsToUse: refs, index: i, content: content, positions: positions, shouldBePositions: shouldBePositions, indices: indices, theme: theme, withSwitcher: index === 3 && !isRendering, onClickLeft: onLeft, onClickRight: onRight }, i));
+        }) }));
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { type CalculateMetadataFunction } from 'remotion';
+import type { Location } from './types';
+export type RemoteData = {
+    repos: string[];
+    date: string | number;
+    temperatureInCelsius: number;
+    countryLabel: string;
+    countryPaths: {
+        d: string;
+        class: string;
+    }[];
+};
+export type LocationAndTrending = {
+    readonly location: Location | null;
+    readonly trending: RemoteData | null;
+};
+export declare const getDataAndProps: () => Promise<{
+    trending: {
+        repos: any;
+        date: any;
+        temperatureInCelsius: number;
+        countryLabel: any;
+        countryPaths: any;
+    };
+    location: Location;
+}>;
+export declare const calculateMetadata: CalculateMetadataFunction<DemoPlayerProps>;
+export type DemoPlayerProps = {
+    readonly onToggle: () => void;
+    readonly cardOrder: number[];
+    readonly updateCardOrder: (newCardOrder: number[]) => void;
+    readonly theme: 'dark' | 'light';
+    readonly onClickLeft: () => void;
+    readonly onClickRight: () => void;
+    readonly emojiIndex: number;
+} & LocationAndTrending;
+export declare const HomepageVideoComp: React.FC<DemoPlayerProps>;

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

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Audio } from '@remotion/media';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { AbsoluteFill, prefetch, staticFile, } from 'remotion';
+import { Cards } from './Cards';
+export const getDataAndProps = async () => {
+    const location = (await fetch('https://bugs-five.vercel.app/api/location').then((res) => res.json()));
+    const trending = await fetch(`https://bugs.remotion.dev/trending?lat=${location.latitude}&lng=${location.longitude}&country=${location.country}`)
+        .then((res) => res.json())
+        .then((data) => {
+        return {
+            repos: data.trending.repos.slice(0, 3),
+            date: data.trending.dateFetched,
+            temperatureInCelsius: Math.round(data.temperature),
+            countryLabel: data.countryLabel,
+            countryPaths: data.countryPaths,
+        };
+    });
+    return { trending, location };
+};
+export const calculateMetadata = ({ props, }) => {
+    return {
+        durationInFrames: 120,
+        fps: 30,
+        height: 360,
+        width: 640,
+        props: {
+            ...props,
+        },
+    };
+};
+const fireAudio = staticFile('fire.mp3');
+const partyHornAudio = staticFile('partyhorn.mp3');
+const sadAudio = staticFile('sad.mp3');
+export const HomepageVideoComp = ({ theme, onToggle, cardOrder, updateCardOrder, location, trending, emojiIndex, onClickLeft, onClickRight, }) => {
+    const [rerenders, setRerenders] = useState(0);
+    const onUpdate = useCallback((newIndices) => {
+        setRerenders(rerenders + 1);
+        updateCardOrder(newIndices);
+    }, [rerenders, updateCardOrder]);
+    const emoji = useMemo(() => {
+        if ((emojiIndex + 10000 * 3) % 3 === 1) {
+            return 'melting';
+        }
+        if ((emojiIndex + 10000 * 3) % 3 === 2) {
+            return 'fire';
+        }
+        return 'partying-face';
+    }, [emojiIndex]);
+    const audioSrc = useMemo(() => {
+        if (emoji === 'fire') {
+            return fireAudio;
+        }
+        if (emoji === 'partying-face') {
+            return partyHornAudio;
+        }
+        return sadAudio;
+    }, [emoji]);
+    useEffect(() => {
+        const a = prefetch(fireAudio);
+        const b = prefetch(partyHornAudio);
+        const c = prefetch(sadAudio);
+        return () => {
+            a.free();
+            b.free();
+            c.free();
+        };
+    }, []);
+    return (_jsxs(AbsoluteFill, { style: {
+            backgroundColor: theme === 'dark' ? '#222' : '#fafafa',
+        }, children: [_jsx(Cards, { onUpdate: onUpdate, indices: cardOrder, theme: theme, location: location, trending: trending, onToggle: onToggle, onLeft: onClickLeft, onRight: onClickRight, emojiName: emoji }, rerenders), audioSrc ? _jsx(Audio, { src: audioSrc }) : null] }));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const CurrentCountry: React.FC<{
+    readonly theme: 'dark' | 'light';
+    readonly countryPaths: {
+        d: string;
+        class: string;
+    }[] | null;
+    readonly countryLabel: string | null;
+}>;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getBoundingBox, resetPath } from '@remotion/paths';
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig, } from 'remotion';
+export const CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
+    const { fps } = useVideoConfig();
+    const frame = useCurrentFrame();
+    if (!countryPaths) {
+        return null;
+    }
+    const joined = countryPaths.map((p) => p.d).join(' ');
+    const reset = resetPath(joined);
+    const boundingBox = getBoundingBox(reset);
+    const progress = spring({
+        fps,
+        frame,
+        delay: 10,
+    });
+    return (_jsxs(AbsoluteFill, { style: { overflow: 'hidden' }, children: [_jsx(AbsoluteFill, { style: {
+                    transform: `scale(${progress})`,
+                }, children: _jsx("svg", { viewBox: boundingBox.viewBox, style: {
+                        scale: '0.8',
+                    }, children: _jsx("path", { fill: theme === 'light' ? '#bbb' : '#222', d: reset }) }) }), _jsxs(AbsoluteFill, { style: {
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: [_jsx("div", { style: {
+                            color: '#0b84f3',
+                            fontFamily: 'GTPlanar',
+                            fontWeight: '500',
+                            fontSize: 13,
+                            textAlign: 'center',
+                            marginTop: -10,
+                            width: '100%',
+                            paddingLeft: 20,
+                            paddingRight: 20,
+                            transform: 'translateX(' + interpolate(progress, [0, 1], [-100, 0]) + '%)',
+                        }, children: "Your country" }), _jsx("div", { style: {
+                            lineHeight: 1.1,
+                            fontFamily: 'GTPlanar',
+                            textAlign: 'center',
+                            fontWeight: '500',
+                            fontSize: 30,
+                            color: theme === 'dark' ? 'white' : 'black',
+                            width: '100%',
+                            paddingLeft: 20,
+                            paddingRight: 20,
+                            transform: 'translateX(' + interpolate(progress, [0, 1], [100, 0]) + '%)',
+                        }, children: countryLabel })] })] }));
+};

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FONTS, RED } from '../layout/colors';
+export const DemoError = () => {
+    return (_jsx("div", { style: {
+            color: RED,
+            fontFamily: FONTS.GTPLANAR,
+            position: 'absolute',
+            paddingTop: 15,
+        }, children: "Sorry, we limit the amount of renders possible per day on this page. Come back tomorrow!" }));
+};

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

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

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RED } from '../layout/colors';
+export const DemoErrorIcon = () => {
+    return (_jsx("div", { style: {
+            height: 26,
+            width: 26,
+            borderRadius: 13,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            animation: 'jump 0.2s ease-out',
+        }, children: _jsx("svg", { style: {
+                flexShrink: 0,
+                width: 26,
+            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: _jsx("path", { fill: RED, d: "M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zM256 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" }) }) }));
+};

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

@@ -0,0 +1,33 @@
+import type { PlayerRef } from '@remotion/player';
+import React from 'react';
+import { z } from 'zod';
+declare const data: z.ZodObject<{
+    trending: z.ZodObject<{
+        repos: z.ZodArray<z.ZodString>;
+        date: z.ZodUnion<[z.ZodString, z.ZodNumber]>;
+        temperatureInCelsius: z.ZodNumber;
+        countryLabel: z.ZodString;
+        countryPaths: z.ZodArray<z.ZodObject<{
+            d: z.ZodString;
+            class: z.ZodString;
+        }, z.core.$strip>>;
+    }, z.core.$strip>;
+    location: z.ZodObject<{
+        country: z.ZodString;
+        city: z.ZodString;
+        latitude: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
+        longitude: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
+    }, z.core.$strip>;
+    emojiIndex: z.ZodNumber;
+    theme: z.ZodEnum<{
+        light: "light";
+        dark: "dark";
+    }>;
+    cardOrder: z.ZodArray<z.ZodNumber>;
+}, z.core.$strip>;
+export declare const RenderButton: React.FC<{
+    readonly renderData: z.infer<typeof data> | null;
+    readonly onError: () => void;
+    readonly playerRef: React.RefObject<PlayerRef | null>;
+}>;
+export {};

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderMediaOnWeb } from '@remotion/web-renderer';
+import React, { useCallback } from 'react';
+import { z } from 'zod';
+import { PALETTE } from '../layout/colors';
+import { HomepageVideoComp } from './Comp';
+import { DemoErrorIcon } from './DemoErrorIcon';
+import { DoneCheckmark } from './DoneCheckmark';
+import { Progress } from './Progress';
+import { Spinner } from './Spinner';
+const countryPath = z.object({
+    d: z.string(),
+    class: z.string(),
+});
+const remoteData = z.object({
+    repos: z.array(z.string()),
+    date: z.string().or(z.number()),
+    temperatureInCelsius: z.number(),
+    countryLabel: z.string(),
+    countryPaths: z.array(countryPath),
+});
+const location = z.object({
+    country: z.string(),
+    city: z.string(),
+    latitude: z.number().or(z.string()),
+    longitude: z.number().or(z.string()),
+});
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const data = z.object({
+    trending: remoteData,
+    location,
+    emojiIndex: z.number(),
+    theme: z.enum(['light', 'dark']),
+    cardOrder: z.array(z.number()),
+});
+const style = {
+    appearance: 'none',
+    border: 'none',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    width: 55,
+    height: 50,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+export const RenderButton = ({ renderData, onError, playerRef }) => {
+    const [state, setState] = React.useState({
+        type: 'idle',
+    });
+    const triggerRender = useCallback(async () => {
+        if (renderData === null) {
+            return;
+        }
+        try {
+            setState({ type: 'invoking' });
+            const durationInFrames = 120;
+            const inputProps = {
+                ...renderData,
+                onToggle: () => { },
+                updateCardOrder: () => { },
+                onClickLeft: () => { },
+                onClickRight: () => { },
+            };
+            playerRef.current.pause();
+            const { getBlob } = await renderMediaOnWeb({
+                composition: {
+                    component: HomepageVideoComp,
+                    durationInFrames,
+                    fps: 30,
+                    width: 640,
+                    height: 360,
+                    id: 'homepage-demo',
+                    defaultProps: inputProps,
+                },
+                muted: typeof AudioEncoder === 'undefined',
+                scale: 1,
+                inputProps,
+                onProgress: ({ progress }) => {
+                    setState({
+                        type: 'progress',
+                        progress,
+                    });
+                },
+            });
+            const blob = await getBlob();
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'remotion.dev.mp4';
+            a.click();
+            URL.revokeObjectURL(url);
+            setState({ type: 'done' });
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+            setState({ type: 'error' });
+            onError();
+        }
+    }, [onError, renderData, playerRef]);
+    return (_jsx("button", { type: "button", onClick: triggerRender, style: style, disabled: !renderData || state.type !== 'idle', children: state.type === 'error' ? (_jsx(DemoErrorIcon, {})) : state.type === 'done' ? (_jsx(DoneCheckmark, {})) : state.type === 'progress' ? (_jsx(Progress, { progress: state.progress })) : state.type === 'invoking' ? (_jsx(Spinner, { size: 20, duration: 1 })) : (_jsx("svg", { style: {
+                width: 18,
+                opacity: renderData ? 1 : 0.5,
+            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", children: _jsx("path", { fill: PALETTE.TEXT_COLOR, d: "M214.6 342.6L192 365.3l-22.6-22.6-128-128L18.7 192 64 146.7l22.6 22.6L160 242.7 160 64l0-32 64 0 0 32 0 178.7 73.4-73.4L320 146.7 365.3 192l-22.6 22.6-128 128zM32 416l320 0 32 0 0 64-32 0L32 480 0 480l0-64 32 0z" }) })) }));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const NUM_WIDTH = 36;
+export declare const Wheel: React.FC<{
+    readonly delay: number;
+    readonly digits: number[];
+    readonly renderDigit: (i: number) => React.ReactNode;
+    readonly isLeadingDigit: boolean;
+    readonly isNegative: boolean[];
+}>;