@remotion/promo-pages 4.0.458 → 4.0.459

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

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig, } from 'remotion';
+import { Minus } from './Minus';
+const DURATION = 25;
+const items = 10;
+export const NUM_WIDTH = 36;
+export const Wheel = ({ delay, digits, renderDigit, isLeadingDigit, isNegative }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const singleDur = DURATION;
+    const progressesMaker = (springConfig, durationInFrames) => new Array(digits.length - 1).fill(true).map((_, i) => {
+        const current = digits[i];
+        const next = digits[i + 1];
+        if (current === next) {
+            return 1;
+        }
+        return spring({
+            fps,
+            frame,
+            config: springConfig,
+            durationInFrames,
+            delay: i * 50 + delay,
+        });
+    });
+    const progresses = progressesMaker({
+        mass: 0.7,
+        damping: 12,
+    }, singleDur);
+    const softProgresses = progressesMaker({
+        damping: 200,
+    }, singleDur / 2);
+    const rotations = digits.map((d) => 1 / items + d / 10);
+    const offsets = rotations.map((r, i) => {
+        const next = rotations[i + 1];
+        if (next === undefined) {
+            return 0;
+        }
+        return next - r;
+    });
+    const opacity = isLeadingDigit
+        ? interpolate(softProgresses.reduce((a, b) => a + b, 0), new Array(digits.length).fill(true).map((_, i) => i), digits.map((digit) => (digit === 0 ? 0 : 1)))
+        : 1;
+    const minusSignOpacity = isLeadingDigit
+        ? interpolate(softProgresses.reduce((a, b) => a + b, 0), new Array(digits.length).fill(true).map((_, i) => i), isNegative.map((negative) => (negative ? 1 : 0)))
+        : 1;
+    const minusSignMarginLeft = interpolate(minusSignOpacity, [0, 1], [10, 0]);
+    const shiftLeft = isLeadingDigit
+        ? interpolate(softProgresses.reduce((a, b) => a + b, 0), new Array(digits.length).fill(true).map((_, i) => i), digits.map((digit) => (digit === 0 ? -40 : 0)))
+        : 1;
+    const rotation = progresses
+        .map((p, i) => {
+        return p * offsets[i];
+    })
+        .reduce((a, b) => a + b, 0) + rotations[0];
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            width: NUM_WIDTH,
+            display: 'inline-block',
+            height: 80,
+            marginLeft: shiftLeft,
+        }, children: [isLeadingDigit ? (_jsx(Minus, { minusSignOpacity: minusSignOpacity, leftOffset: shiftLeft + minusSignMarginLeft })) : null, _jsx(AbsoluteFill, { style: {
+                    perspective: 5000,
+                    maskImage: `linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%)`,
+                    WebkitMaskImage: `linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%)`,
+                }, children: new Array(items).fill(true).map((_, i) => {
+                    const index = i / items + rotation;
+                    const z = Math.cos(index * -Math.PI * 2) * 120;
+                    const y = Math.sin(index * Math.PI * 2) * -120;
+                    const r = interpolate(index, [0, 1], [0, Math.PI * 2]);
+                    return (_jsx(AbsoluteFill
+                    // eslint-disable-next-line react/no-array-index-key
+                    , { style: {
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            fontSize: 60,
+                            fontVariationSettings: `"wght" 400`,
+                            transform: `translateZ(${z}px) translateY(${y}px) rotateX(${r}deg)`,
+                            backfaceVisibility: 'hidden',
+                            perspective: 1000,
+                        }, children: _jsx("div", { style: {
+                                transform: `rotateX(-${r}rad)`,
+                                backfaceVisibility: 'hidden',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                opacity,
+                            }, children: _jsx("div", { style: {
+                                    lineHeight: 1,
+                                    display: 'inline',
+                                    fontFeatureSettings: "'ss03' on",
+                                }, children: renderDigit(i) }) }) }, i));
+                }) })] }));
+};

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

@@ -0,0 +1,5 @@
+import type { EmojiName } from '@remotion/animated-emoji';
+import React from 'react';
+export declare const DisplayedEmoji: React.FC<{
+    readonly emoji: EmojiName;
+}>;

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getLottieMetadata, Lottie, } from '@remotion/lottie';
+import { useEffect, useMemo, useState } from 'react';
+import { useDelayRender, useVideoConfig } from 'remotion';
+export const DisplayedEmoji = ({ emoji }) => {
+    const [data, setData] = useState(null);
+    const { durationInFrames, fps } = useVideoConfig();
+    const [browser, setBrowser] = useState(typeof document !== 'undefined');
+    const { delayRender, continueRender, cancelRender } = useDelayRender();
+    const src = useMemo(() => {
+        if (emoji === 'melting') {
+            return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json';
+        }
+        if (emoji === 'partying-face') {
+            return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f973/lottie.json';
+        }
+        if (emoji === 'fire') {
+            return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f525/lottie.json';
+        }
+        throw new Error('Unknown emoji');
+    }, [emoji]);
+    const [handle] = useState(() => delayRender('Loading emojis!'));
+    useEffect(() => {
+        fetch(src)
+            .then((res) => res.json())
+            .then((json) => {
+            var _a;
+            setData({
+                duration: (_a = getLottieMetadata(json)) === null || _a === void 0 ? void 0 : _a.durationInSeconds,
+                data: json,
+            });
+            continueRender(handle);
+        })
+            .catch((err) => {
+            cancelRender(err);
+        });
+    }, [handle, src, continueRender, cancelRender]);
+    useEffect(() => {
+        if (typeof document !== 'undefined') {
+            setBrowser(true);
+        }
+    }, []);
+    if (!browser) {
+        return null;
+    }
+    if (!data) {
+        return null;
+    }
+    const animDurtion = data.duration;
+    const ratio = durationInFrames / fps / animDurtion;
+    const closestInteger = ratio;
+    const closestRatio = closestInteger / ratio;
+    return (_jsx(Lottie, { style: {
+            height: 100,
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+        }, loop: true, animationData: data.data, playbackRate: closestRatio }));
+};

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PALETTE } from '../layout/colors';
+export const DoneCheckmark = () => {
+    return (_jsx("div", { style: {
+            backgroundColor: PALETTE.BRAND,
+            height: 26,
+            width: 26,
+            borderRadius: 13,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            animation: 'jump 0.2s ease-out',
+        }, children: _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
+                flexShrink: 0,
+                width: 26,
+            }, children: [_jsx("circle", { cx: "10", cy: "10", r: "10", fill: "#0B84F3" }), _jsx("path", { d: "M14.7908 7.20505C15.0697 7.47844 15.0697 7.92243 14.7908 8.19583L9.07711 13.795C8.79813 14.0683 8.34505 14.0683 8.06606 13.795L5.20924 10.9954C4.93025 10.722 4.93025 10.278 5.20924 10.0046C5.48823 9.73121 5.9413 9.73121 6.22029 10.0046L8.5727 12.3077L13.7819 7.20505C14.0609 6.93165 14.514 6.93165 14.793 7.20505H14.7908Z", fill: "white", style: {
+                        transform: 'scale(1.2)',
+                        transformOrigin: 'center',
+                    } })] }) }));
+};

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

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

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FONTS } from '../layout/colors';
+const origWidth = 77;
+const scale = 0.4;
+const Icon = () => {
+    return (_jsx("svg", { style: {
+            width: origWidth * scale,
+        }, viewBox: "0 0 77 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5 154.5C51 121 79 81 69 5", stroke: "currentColor", strokeWidth: "8", strokeLinecap: "round" }) }));
+};
+export const DownloadNudge = () => {
+    return (_jsx("div", { style: {
+            position: 'relative',
+            flexDirection: 'row',
+            display: 'flex',
+            justifyContent: 'flex-end',
+            textAlign: 'right',
+            paddingRight: 22,
+            paddingTop: 20,
+        }, children: _jsxs("div", { children: [_jsx(Icon, {}), _jsx("div", { style: {
+                        fontFamily: FONTS.GTPLANAR,
+                        fontSize: 15,
+                        width: 280,
+                        position: 'absolute',
+                        right: 70,
+                        top: 70,
+                    }, children: "Export the video!" })] }) }));
+};

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

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

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FONTS, PALETTE } from '../layout/colors';
+const origWidth = 37;
+const scale = 0.4;
+export const Icon = () => {
+    return (_jsx("svg", { style: {
+            width: origWidth * scale,
+            overflow: 'visible',
+        }, viewBox: "0 0 37 59", fill: "none", children: _jsx("path", { d: "M5.00003 5C5.00002 36.5 16 44 32.0002 54", stroke: PALETTE.TEXT_COLOR, strokeWidth: "8", strokeLinecap: "round" }) }));
+};
+export const DragAndDropNudge = () => {
+    return (_jsx("div", { style: {
+            position: 'absolute',
+            flexDirection: 'row',
+            display: 'flex',
+            justifyContent: 'flex-start',
+            paddingBottom: 5,
+            marginTop: 50,
+        }, className: 'ml-4 lg:-ml-5', children: _jsxs("div", { children: [_jsx("div", { style: {
+                        fontFamily: FONTS.GTPLANAR,
+                        fontSize: 15,
+                        width: 280,
+                        paddingBottom: 8,
+                        textWrap: 'balance',
+                    }, className: '-ml-3 lg:-ml-5', children: "Drag and drop the cards to reorder them." }), _jsx(Icon, {})] }) }));
+};

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

@@ -0,0 +1,10 @@
+import type { EmojiName } from '@remotion/animated-emoji';
+import React from 'react';
+export type EmojiCardRef = {
+    onLeft: () => void;
+    onRight: () => void;
+};
+export type EmojiCardProps = {
+    readonly emojiIndex: EmojiName;
+};
+export declare const EmojiCard: React.ForwardRefExoticComponent<EmojiCardProps & React.RefAttributes<EmojiCardRef>>;

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

@@ -0,0 +1,120 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
+import { AbsoluteFill, useRemotionEnvironment } from 'remotion';
+import { DisplayedEmoji } from './DisplayedEmoji';
+const applyTransforms = ({ ref1, ref2, ref3, transforms }) => {
+    ref1.style.transform = `translateX(${transforms[0]}%)`;
+    ref2.style.transform = `translateX(${transforms[1]}%)`;
+    ref3.style.transform = `translateX(${transforms[2]}%)`;
+};
+const waitForRaq = async () => {
+    await new Promise((resolve) => {
+        requestAnimationFrame(resolve);
+    });
+};
+const moveLeft = async ({ ref1, ref2, ref3, transforms }) => {
+    for (let i = 0; i < 20; i++) {
+        for (const idx in transforms) {
+            transforms[idx] -= 5;
+            if (transforms[idx] <= -200) {
+                transforms[idx] += 300;
+            }
+        }
+        applyTransforms({ ref1, ref2, ref3, transforms });
+        await waitForRaq();
+    }
+};
+const moveRight = async ({ ref1, ref2, ref3, transforms }) => {
+    for (let i = 0; i < 20; i++) {
+        for (const idx in transforms) {
+            transforms[idx] += 5;
+            if (transforms[idx] >= 100) {
+                transforms[idx] -= 300;
+            }
+        }
+        applyTransforms({ ref1, ref2, ref3, transforms });
+        await waitForRaq();
+    }
+};
+const emojiStyle = {
+    width: '100%',
+    position: 'absolute',
+    top: 'calc(50% - 50px)',
+};
+const EmojiCardRefFn = ({ emojiIndex }, ref) => {
+    const ref1 = useRef(null);
+    const ref2 = useRef(null);
+    const ref3 = useRef(null);
+    const transforms = useRef([-100, 0, 100]);
+    const onLeft = useCallback(() => {
+        if (!ref1.current || !ref2.current || !ref3.current) {
+            return;
+        }
+        moveLeft({
+            ref1: ref1.current,
+            ref2: ref2.current,
+            ref3: ref3.current,
+            transforms: transforms.current,
+        });
+    }, []);
+    const onRight = useCallback(() => {
+        if (!ref1.current || !ref2.current || !ref3.current) {
+            return;
+        }
+        moveRight({
+            ref1: ref1.current,
+            ref2: ref2.current,
+            ref3: ref3.current,
+            transforms: transforms.current,
+        });
+    }, []);
+    useEffect(() => {
+        if (!ref1.current || !ref2.current || !ref3.current) {
+            return;
+        }
+        applyTransforms({
+            ref1: ref1.current,
+            ref2: ref2.current,
+            ref3: ref3.current,
+            transforms: transforms.current,
+        });
+    }, []);
+    useImperativeHandle(ref, () => {
+        return {
+            onLeft,
+            onRight,
+        };
+    }, [onLeft, onRight]);
+    useEffect(() => {
+        if (!ref1.current || !ref2.current || !ref3.current) {
+            return;
+        }
+        applyTransforms({
+            ref1: ref1.current,
+            ref2: ref2.current,
+            ref3: ref3.current,
+            transforms: transforms.current,
+        });
+    }, []);
+    const env = useRemotionEnvironment();
+    return (_jsxs(AbsoluteFill, { style: {
+            justifyContent: 'center',
+            alignItems: 'center',
+            overflow: 'hidden',
+        }, children: [_jsx("div", { style: {
+                    color: '#0b84f3',
+                    fontFamily: 'GTPlanar',
+                    fontWeight: '500',
+                    fontSize: 13,
+                    textAlign: 'center',
+                    position: 'absolute',
+                    marginTop: -90,
+                }, children: "Choose an emoji" }), _jsx("div", { style: {
+                    position: 'absolute',
+                    width: '100%',
+                    display: 'flex',
+                    whiteSpace: 'nowrap',
+                    height: '100%',
+                }, children: env.isRendering ? (_jsx("div", { style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: emojiIndex }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref1, style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: 'melting' }) }), _jsx("div", { ref: ref2, style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: 'partying-face' }) }), _jsx("div", { ref: ref3, style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: 'fire' }) })] })) })] }));
+};
+export const EmojiCard = forwardRef(EmojiCardRefFn);

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

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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Minus = ({ leftOffset, minusSignOpacity }) => {
+    return (_jsx("div", { style: {
+            position: 'relative',
+            marginLeft: -40 - leftOffset,
+            marginTop: 5,
+            width: 40,
+            opacity: minusSignOpacity,
+            textAlign: 'right',
+        }, children: "-" }));
+};

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

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

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useEffect } from 'react';
+import { PALETTE } from '../layout/colors';
+import { PausedIcon, PlayingIcon } from './icons';
+const playerButtonStyle = {
+    appearance: 'none',
+    border: 'none',
+    borderRadius: 0,
+    background: 'none',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: 20,
+    paddingLeft: 20,
+    cursor: 'pointer',
+    height: 50,
+    color: PALETTE.TEXT_COLOR,
+};
+export const PlayPauseButton = ({ playerRef }) => {
+    const [playing, setPlaying] = React.useState(true);
+    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 onToggle = useCallback(() => {
+        var _a;
+        (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
+    }, [playerRef]);
+    const playPauseIconStyle = {
+        width: 15,
+    };
+    return (_jsx("button", { type: "button", style: playerButtonStyle, onClick: onToggle, children: playing ? (_jsx(PlayingIcon, { style: playPauseIconStyle })) : (_jsx(PausedIcon, { style: playPauseIconStyle })) }));
+};

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

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

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PALETTE } from '../layout/colors';
+import { PlayerSeekBar } from './PlayerSeekBar';
+import { PlayerVolume } from './PlayerVolume';
+import { PlayPauseButton } from './PlayPauseButton';
+import { TimeDisplay } from './TimeDisplay';
+const Separator = () => {
+    return (_jsx("div", { style: {
+            borderRight: `2px solid ${PALETTE.BOX_STROKE}`,
+            height: 50,
+        } }));
+};
+export const PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
+    return (_jsxs("div", { className: 'flex flex-row items-center bg-pane', children: [_jsx(PlayPauseButton, { playerRef: playerRef }), _jsx(Separator, {}), _jsx(PlayerVolume, { playerRef: playerRef }), _jsx(Separator, {}), _jsx("div", { style: { width: 15 } }), _jsx(TimeDisplay, { playerRef: playerRef, fps: fps }), _jsx("div", { style: { width: 15 } }), _jsx(PlayerSeekBar, { durationInFrames: durationInFrames, playerRef: playerRef, inFrame: null, outFrame: null, onSeekEnd: () => undefined, onSeekStart: () => undefined }), _jsx("div", { style: { width: 20 } }), _jsx(Separator, {}), children] }));
+};

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

@@ -0,0 +1,11 @@
+import type { PlayerRef } from '@remotion/player';
+import React from 'react';
+export declare const useHoverState: (ref: React.RefObject<HTMLDivElement | null>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
+export declare const PlayerSeekBar: React.FC<{
+    readonly durationInFrames: number;
+    readonly onSeekStart: () => void;
+    readonly onSeekEnd: () => void;
+    readonly inFrame: number | null;
+    readonly outFrame: number | null;
+    readonly playerRef: React.RefObject<PlayerRef | null>;
+}>;