@remotion/promo-pages 4.0.370 → 4.0.372
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Homepage.js +11668 -3759
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/Homepage.js +11668 -3759
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/design.js +18150 -0
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/homepage/Pricing.js +18229 -412
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/template-modal-content.css +32 -0
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/template-modal-content.js +20096 -0
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/templates.css +43 -0
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/templates.js +19305 -0
- package/dist/design.js +18150 -0
- package/dist/homepage/Pricing.js +18229 -412
- package/dist/tailwind.css +508 -55
- package/dist/template-modal-content.css +32 -0
- package/dist/template-modal-content.js +20096 -0
- package/dist/templates.css +43 -0
- package/dist/templates.js +19305 -0
- package/package.json +13 -12
- package/public/img/freelancers/andrei.png +0 -0
- package/dist/cn.d.ts +0 -2
- package/dist/cn.js +0 -5
- package/dist/components/Homepage.d.ts +0 -6
- package/dist/components/Homepage.js +0 -21
- package/dist/components/TeamPicture.d.ts +0 -1
- package/dist/components/TeamPicture.js +0 -4
- package/dist/components/homepage/BackgroundAnimation.d.ts +0 -2
- package/dist/components/homepage/BackgroundAnimation.js +0 -66
- package/dist/components/homepage/ChooseTemplate.d.ts +0 -2
- package/dist/components/homepage/ChooseTemplate.js +0 -27
- package/dist/components/homepage/CommunityStats.d.ts +0 -3
- package/dist/components/homepage/CommunityStats.js +0 -6
- package/dist/components/homepage/CommunityStatsItems.d.ts +0 -7
- package/dist/components/homepage/CommunityStatsItems.js +0 -58
- package/dist/components/homepage/Counter.d.ts +0 -9
- package/dist/components/homepage/Counter.js +0 -55
- package/dist/components/homepage/Demo/Card.d.ts +0 -15
- package/dist/components/homepage/Demo/Card.js +0 -174
- package/dist/components/homepage/Demo/Cards.d.ts +0 -15
- package/dist/components/homepage/Demo/Cards.js +0 -57
- package/dist/components/homepage/Demo/Comp.d.ts +0 -38
- package/dist/components/homepage/Demo/Comp.js +0 -71
- package/dist/components/homepage/Demo/CurrentCountry.d.ts +0 -9
- package/dist/components/homepage/Demo/CurrentCountry.js +0 -48
- package/dist/components/homepage/Demo/DemoError.d.ts +0 -2
- package/dist/components/homepage/Demo/DemoError.js +0 -10
- package/dist/components/homepage/Demo/DemoErrorIcon.d.ts +0 -2
- package/dist/components/homepage/Demo/DemoErrorIcon.js +0 -16
- package/dist/components/homepage/Demo/DemoRender.d.ts +0 -102
- package/dist/components/homepage/Demo/DemoRender.js +0 -95
- package/dist/components/homepage/Demo/DigitWheel.d.ts +0 -9
- package/dist/components/homepage/Demo/DigitWheel.js +0 -94
- package/dist/components/homepage/Demo/DisplayedEmoji.d.ts +0 -5
- package/dist/components/homepage/Demo/DisplayedEmoji.js +0 -64
- package/dist/components/homepage/Demo/DoneCheckmark.d.ts +0 -2
- package/dist/components/homepage/Demo/DoneCheckmark.js +0 -20
- package/dist/components/homepage/Demo/DownloadNudge.d.ts +0 -2
- package/dist/components/homepage/Demo/DownloadNudge.js +0 -27
- package/dist/components/homepage/Demo/DragAndDropNudge.d.ts +0 -3
- package/dist/components/homepage/Demo/DragAndDropNudge.js +0 -26
- package/dist/components/homepage/Demo/EmojiCard.d.ts +0 -10
- package/dist/components/homepage/Demo/EmojiCard.js +0 -120
- package/dist/components/homepage/Demo/Minus.d.ts +0 -5
- package/dist/components/homepage/Demo/Minus.js +0 -11
- package/dist/components/homepage/Demo/PlayPauseButton.d.ts +0 -5
- package/dist/components/homepage/Demo/PlayPauseButton.js +0 -47
- package/dist/components/homepage/Demo/PlayerControls.d.ts +0 -8
- package/dist/components/homepage/Demo/PlayerControls.js +0 -15
- package/dist/components/homepage/Demo/PlayerSeekBar.d.ts +0 -11
- package/dist/components/homepage/Demo/PlayerSeekBar.js +0 -216
- package/dist/components/homepage/Demo/PlayerVolume.d.ts +0 -5
- package/dist/components/homepage/Demo/PlayerVolume.js +0 -53
- package/dist/components/homepage/Demo/Progress.d.ts +0 -4
- package/dist/components/homepage/Demo/Progress.js +0 -14
- package/dist/components/homepage/Demo/Spinner.d.ts +0 -5
- package/dist/components/homepage/Demo/Spinner.js +0 -37
- package/dist/components/homepage/Demo/Switcher.d.ts +0 -6
- package/dist/components/homepage/Demo/Switcher.js +0 -25
- package/dist/components/homepage/Demo/Temperature.d.ts +0 -6
- package/dist/components/homepage/Demo/Temperature.js +0 -21
- package/dist/components/homepage/Demo/TemperatureNumber.d.ts +0 -5
- package/dist/components/homepage/Demo/TemperatureNumber.js +0 -36
- package/dist/components/homepage/Demo/ThemeNudge.d.ts +0 -3
- package/dist/components/homepage/Demo/ThemeNudge.js +0 -35
- package/dist/components/homepage/Demo/TimeDisplay.d.ts +0 -6
- package/dist/components/homepage/Demo/TimeDisplay.js +0 -27
- package/dist/components/homepage/Demo/TrendingRepos.d.ts +0 -6
- package/dist/components/homepage/Demo/TrendingRepos.js +0 -65
- package/dist/components/homepage/Demo/icons.d.ts +0 -10
- package/dist/components/homepage/Demo/icons.js +0 -22
- package/dist/components/homepage/Demo/index.d.ts +0 -2
- package/dist/components/homepage/Demo/index.js +0 -95
- package/dist/components/homepage/Demo/math.d.ts +0 -10
- package/dist/components/homepage/Demo/math.js +0 -29
- package/dist/components/homepage/Demo/types.d.ts +0 -6
- package/dist/components/homepage/Demo/types.js +0 -0
- package/dist/components/homepage/EditorStarterSection.d.ts +0 -3
- package/dist/components/homepage/EditorStarterSection.js +0 -8
- package/dist/components/homepage/EvaluateRemotion.d.ts +0 -3
- package/dist/components/homepage/EvaluateRemotion.js +0 -38
- package/dist/components/homepage/FreePricing.d.ts +0 -4
- package/dist/components/homepage/FreePricing.js +0 -69
- package/dist/components/homepage/GetStartedStrip.d.ts +0 -2
- package/dist/components/homepage/GetStartedStrip.js +0 -14
- package/dist/components/homepage/GitHubButton.d.ts +0 -2
- package/dist/components/homepage/GitHubButton.js +0 -7
- package/dist/components/homepage/IconForTemplate.d.ts +0 -6
- package/dist/components/homepage/IconForTemplate.js +0 -98
- package/dist/components/homepage/IfYouKnowReact.d.ts +0 -3
- package/dist/components/homepage/IfYouKnowReact.js +0 -23
- package/dist/components/homepage/InfoTooltip.d.ts +0 -6
- package/dist/components/homepage/InfoTooltip.js +0 -6
- package/dist/components/homepage/MoreTemplatesButton.d.ts +0 -2
- package/dist/components/homepage/MoreTemplatesButton.js +0 -10
- package/dist/components/homepage/MoreVideoPowerSection.d.ts +0 -2
- package/dist/components/homepage/MoreVideoPowerSection.js +0 -16
- package/dist/components/homepage/MuxVideo.d.ts +0 -7
- package/dist/components/homepage/MuxVideo.js +0 -45
- package/dist/components/homepage/NewsletterButton.d.ts +0 -2
- package/dist/components/homepage/NewsletterButton.js +0 -39
- package/dist/components/homepage/ParameterizeAndEdit.d.ts +0 -2
- package/dist/components/homepage/ParameterizeAndEdit.js +0 -22
- package/dist/components/homepage/Pricing.d.ts +0 -2
- package/dist/components/homepage/Pricing.js +0 -15
- package/dist/components/homepage/PricingBulletPoint.d.ts +0 -6
- package/dist/components/homepage/PricingBulletPoint.js +0 -19
- package/dist/components/homepage/RealMp4Videos.d.ts +0 -2
- package/dist/components/homepage/RealMp4Videos.js +0 -41
- package/dist/components/homepage/Spacer.d.ts +0 -2
- package/dist/components/homepage/Spacer.js +0 -4
- package/dist/components/homepage/TemplateIcon.d.ts +0 -5
- package/dist/components/homepage/TemplateIcon.js +0 -24
- package/dist/components/homepage/TextInput.d.ts +0 -7
- package/dist/components/homepage/TextInput.js +0 -34
- package/dist/components/homepage/TrustedByBanner.d.ts +0 -2
- package/dist/components/homepage/TrustedByBanner.js +0 -27
- package/dist/components/homepage/VideoApps.d.ts +0 -4
- package/dist/components/homepage/VideoApps.js +0 -72
- package/dist/components/homepage/VideoAppsShowcase.d.ts +0 -3
- package/dist/components/homepage/VideoAppsShowcase.js +0 -133
- package/dist/components/homepage/VideoAppsTitle.d.ts +0 -4
- package/dist/components/homepage/VideoAppsTitle.js +0 -4
- package/dist/components/homepage/VideoPlayerWithControls.d.ts +0 -20
- package/dist/components/homepage/VideoPlayerWithControls.js +0 -105
- package/dist/components/homepage/WriteInReact.d.ts +0 -2
- package/dist/components/homepage/WriteInReact.js +0 -10
- package/dist/components/homepage/YouAreHere.d.ts +0 -2
- package/dist/components/homepage/YouAreHere.js +0 -23
- package/dist/components/homepage/layout/Button.d.ts +0 -19
- package/dist/components/homepage/layout/Button.js +0 -29
- package/dist/components/homepage/layout/colors.d.ts +0 -13
- package/dist/components/homepage/layout/colors.js +0 -14
- package/dist/components/homepage/layout/use-color-mode.d.ts +0 -21
- package/dist/components/homepage/layout/use-color-mode.js +0 -22
- package/dist/components/homepage/layout/use-el-size.d.ts +0 -5
- package/dist/components/homepage/layout/use-el-size.js +0 -40
- package/dist/components/homepage/layout/use-mobile-layout.d.ts +0 -1
- package/dist/components/homepage/layout/use-mobile-layout.js +0 -6
- package/dist/components/icons/blank.d.ts +0 -3
- package/dist/components/icons/blank.js +0 -4
- package/dist/components/icons/clone.d.ts +0 -2
- package/dist/components/icons/clone.js +0 -2
- package/dist/components/icons/code-hike.d.ts +0 -3
- package/dist/components/icons/code-hike.js +0 -4
- package/dist/components/icons/cubes.d.ts +0 -3
- package/dist/components/icons/cubes.js +0 -4
- package/dist/components/icons/js.d.ts +0 -3
- package/dist/components/icons/js.js +0 -4
- package/dist/components/icons/music.d.ts +0 -2
- package/dist/components/icons/music.js +0 -4
- package/dist/components/icons/next.d.ts +0 -4
- package/dist/components/icons/next.js +0 -4
- package/dist/components/icons/overlay.d.ts +0 -3
- package/dist/components/icons/overlay.js +0 -4
- package/dist/components/icons/recorder.d.ts +0 -3
- package/dist/components/icons/recorder.js +0 -4
- package/dist/components/icons/remix.d.ts +0 -3
- package/dist/components/icons/remix.js +0 -4
- package/dist/components/icons/skia.d.ts +0 -3
- package/dist/components/icons/skia.js +0 -4
- package/dist/components/icons/stargazer.d.ts +0 -3
- package/dist/components/icons/stargazer.js +0 -4
- package/dist/components/icons/still.d.ts +0 -3
- package/dist/components/icons/still.js +0 -4
- package/dist/components/icons/tailwind.d.ts +0 -3
- package/dist/components/icons/tailwind.js +0 -4
- package/dist/components/icons/tiktok.d.ts +0 -3
- package/dist/components/icons/tiktok.js +0 -4
- package/dist/components/icons/ts.d.ts +0 -3
- package/dist/components/icons/ts.js +0 -4
- package/dist/components/icons/tts.d.ts +0 -3
- package/dist/components/icons/tts.js +0 -4
- package/dist/components/icons/undo.d.ts +0 -3
- package/dist/components/icons/undo.js +0 -2
- package/dist/components/icons/waveform.d.ts +0 -3
- package/dist/components/icons/waveform.js +0 -4
- package/dist/components/team/TeamCards.d.ts +0 -6
- package/dist/components/team/TeamCards.js +0 -19
- package/dist/components/team/TitleTeamCards.d.ts +0 -2
- package/dist/components/team/TitleTeamCards.js +0 -6
- package/dist/components/team.d.ts +0 -3
- package/dist/components/team.js +0 -14
- package/dist/main.d.ts +0 -1
- package/dist/main.js +0 -6
- package/dist/team.d.ts +0 -1
- package/public/img/media-parser.png +0 -0
- package/public/img/recorder.png +0 -0
- package/public/img/webcodecs.png +0 -0
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type CalculateMetadataFunction } from 'remotion';
|
|
3
|
-
import type { Location } from './types';
|
|
4
|
-
export type RemoteData = {
|
|
5
|
-
repos: string[];
|
|
6
|
-
date: string | number;
|
|
7
|
-
temperatureInCelsius: number;
|
|
8
|
-
countryLabel: string;
|
|
9
|
-
countryPaths: {
|
|
10
|
-
d: string;
|
|
11
|
-
class: string;
|
|
12
|
-
}[];
|
|
13
|
-
};
|
|
14
|
-
export type LocationAndTrending = {
|
|
15
|
-
readonly location: Location | null;
|
|
16
|
-
readonly trending: RemoteData | null;
|
|
17
|
-
};
|
|
18
|
-
export declare const getDataAndProps: () => Promise<{
|
|
19
|
-
trending: {
|
|
20
|
-
repos: any;
|
|
21
|
-
date: any;
|
|
22
|
-
temperatureInCelsius: number;
|
|
23
|
-
countryLabel: any;
|
|
24
|
-
countryPaths: any;
|
|
25
|
-
};
|
|
26
|
-
location: Location;
|
|
27
|
-
}>;
|
|
28
|
-
export declare const calculateMetadata: CalculateMetadataFunction<DemoPlayerProps>;
|
|
29
|
-
export type DemoPlayerProps = {
|
|
30
|
-
readonly onToggle: () => void;
|
|
31
|
-
readonly cardOrder: number[];
|
|
32
|
-
readonly updateCardOrder: (newCardOrder: number[]) => void;
|
|
33
|
-
readonly theme: 'dark' | 'light';
|
|
34
|
-
readonly onClickLeft: () => void;
|
|
35
|
-
readonly onClickRight: () => void;
|
|
36
|
-
readonly emojiIndex: number;
|
|
37
|
-
} & LocationAndTrending;
|
|
38
|
-
export declare const HomepageVideoComp: React.FC<DemoPlayerProps>;
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
3
|
-
import { AbsoluteFill, Html5Audio, prefetch, staticFile, } from 'remotion';
|
|
4
|
-
import { Cards } from './Cards';
|
|
5
|
-
export const getDataAndProps = async () => {
|
|
6
|
-
const location = (await fetch('https://bugs-git-homepage-player-remotion.vercel.app/api/location').then((res) => res.json()));
|
|
7
|
-
const trending = await fetch(`https://bugs.remotion.dev/trending?lat=${location.latitude}&lng=${location.longitude}&country=${location.country}`)
|
|
8
|
-
.then((res) => res.json())
|
|
9
|
-
.then((data) => {
|
|
10
|
-
return {
|
|
11
|
-
repos: data.trending.repos.slice(0, 3),
|
|
12
|
-
date: data.trending.dateFetched,
|
|
13
|
-
temperatureInCelsius: Math.round(data.temperature),
|
|
14
|
-
countryLabel: data.countryLabel,
|
|
15
|
-
countryPaths: data.countryPaths,
|
|
16
|
-
};
|
|
17
|
-
});
|
|
18
|
-
return { trending, location };
|
|
19
|
-
};
|
|
20
|
-
export const calculateMetadata = ({ props, }) => {
|
|
21
|
-
return {
|
|
22
|
-
durationInFrames: 120,
|
|
23
|
-
fps: 30,
|
|
24
|
-
height: 360,
|
|
25
|
-
width: 640,
|
|
26
|
-
props: {
|
|
27
|
-
...props,
|
|
28
|
-
},
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
|
-
const fireAudio = staticFile('fire.mp3');
|
|
32
|
-
const partyHornAudio = staticFile('partyhorn.mp3');
|
|
33
|
-
const sadAudio = staticFile('sad.mp3');
|
|
34
|
-
export const HomepageVideoComp = ({ theme, onToggle, cardOrder, updateCardOrder, location, trending, emojiIndex, onClickLeft, onClickRight, }) => {
|
|
35
|
-
const [rerenders, setRerenders] = useState(0);
|
|
36
|
-
const onUpdate = useCallback((newIndices) => {
|
|
37
|
-
setRerenders(rerenders + 1);
|
|
38
|
-
updateCardOrder(newIndices);
|
|
39
|
-
}, [rerenders, updateCardOrder]);
|
|
40
|
-
const emoji = useMemo(() => {
|
|
41
|
-
if ((emojiIndex + 10000 * 3) % 3 === 1) {
|
|
42
|
-
return 'melting';
|
|
43
|
-
}
|
|
44
|
-
if ((emojiIndex + 10000 * 3) % 3 === 2) {
|
|
45
|
-
return 'fire';
|
|
46
|
-
}
|
|
47
|
-
return 'partying-face';
|
|
48
|
-
}, [emojiIndex]);
|
|
49
|
-
const audioSrc = useMemo(() => {
|
|
50
|
-
if (emoji === 'fire') {
|
|
51
|
-
return fireAudio;
|
|
52
|
-
}
|
|
53
|
-
if (emoji === 'partying-face') {
|
|
54
|
-
return partyHornAudio;
|
|
55
|
-
}
|
|
56
|
-
return sadAudio;
|
|
57
|
-
}, [emoji]);
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
const a = prefetch(fireAudio);
|
|
60
|
-
const b = prefetch(partyHornAudio);
|
|
61
|
-
const c = prefetch(sadAudio);
|
|
62
|
-
return () => {
|
|
63
|
-
a.free();
|
|
64
|
-
b.free();
|
|
65
|
-
c.free();
|
|
66
|
-
};
|
|
67
|
-
}, []);
|
|
68
|
-
return (_jsxs(AbsoluteFill, { style: {
|
|
69
|
-
backgroundColor: theme === 'dark' ? '#222' : '#fafafa',
|
|
70
|
-
}, children: [_jsx(Cards, { onUpdate: onUpdate, indices: cardOrder, theme: theme, location: location, trending: trending, onToggle: onToggle, onLeft: onClickLeft, onRight: onClickRight, emojiName: emoji }, rerenders), audioSrc ? _jsx(Html5Audio, { src: audioSrc }) : null] }));
|
|
71
|
-
};
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { getBoundingBox, resetPath } from '@remotion/paths';
|
|
3
|
-
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig, } from 'remotion';
|
|
4
|
-
export const CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
|
|
5
|
-
const { fps } = useVideoConfig();
|
|
6
|
-
const frame = useCurrentFrame();
|
|
7
|
-
if (!countryPaths) {
|
|
8
|
-
return null;
|
|
9
|
-
}
|
|
10
|
-
const joined = countryPaths.map((p) => p.d).join(' ');
|
|
11
|
-
const reset = resetPath(joined);
|
|
12
|
-
const boundingBox = getBoundingBox(reset);
|
|
13
|
-
const progress = spring({
|
|
14
|
-
fps,
|
|
15
|
-
frame,
|
|
16
|
-
delay: 10,
|
|
17
|
-
});
|
|
18
|
-
return (_jsxs(AbsoluteFill, { style: { overflow: 'hidden' }, children: [_jsx(AbsoluteFill, { style: {
|
|
19
|
-
transform: `scale(${progress})`,
|
|
20
|
-
}, children: _jsx("svg", { viewBox: boundingBox.viewBox, style: {
|
|
21
|
-
scale: '0.8',
|
|
22
|
-
}, children: _jsx("path", { fill: theme === 'light' ? '#bbb' : '#222', d: reset }) }) }), _jsxs(AbsoluteFill, { style: {
|
|
23
|
-
alignItems: 'center',
|
|
24
|
-
justifyContent: 'center',
|
|
25
|
-
}, children: [_jsx("div", { style: {
|
|
26
|
-
color: '#0b84f3',
|
|
27
|
-
fontFamily: 'GTPlanar',
|
|
28
|
-
fontWeight: '500',
|
|
29
|
-
fontSize: 13,
|
|
30
|
-
textAlign: 'center',
|
|
31
|
-
marginTop: -10,
|
|
32
|
-
width: '100%',
|
|
33
|
-
paddingLeft: 20,
|
|
34
|
-
paddingRight: 20,
|
|
35
|
-
transform: 'translateX(' + interpolate(progress, [0, 1], [-100, 0]) + '%)',
|
|
36
|
-
}, children: "Your country" }), _jsx("div", { style: {
|
|
37
|
-
lineHeight: 1.1,
|
|
38
|
-
fontFamily: 'GTPlanar',
|
|
39
|
-
textAlign: 'center',
|
|
40
|
-
fontWeight: '500',
|
|
41
|
-
fontSize: 30,
|
|
42
|
-
color: theme === 'dark' ? 'white' : 'black',
|
|
43
|
-
width: '100%',
|
|
44
|
-
paddingLeft: 20,
|
|
45
|
-
paddingRight: 20,
|
|
46
|
-
transform: 'translateX(' + interpolate(progress, [0, 1], [100, 0]) + '%)',
|
|
47
|
-
}, children: countryLabel })] })] }));
|
|
48
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { FONTS, RED } from '../layout/colors';
|
|
3
|
-
export const DemoError = () => {
|
|
4
|
-
return (_jsx("div", { style: {
|
|
5
|
-
color: RED,
|
|
6
|
-
fontFamily: FONTS.GTPLANAR,
|
|
7
|
-
position: 'absolute',
|
|
8
|
-
paddingTop: 15,
|
|
9
|
-
}, children: "Sorry, we limit the amount of renders possible per day on this page. Come back tomorrow!" }));
|
|
10
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { RED } from '../layout/colors';
|
|
3
|
-
export const DemoErrorIcon = () => {
|
|
4
|
-
return (_jsx("div", { style: {
|
|
5
|
-
height: 26,
|
|
6
|
-
width: 26,
|
|
7
|
-
borderRadius: 13,
|
|
8
|
-
display: 'flex',
|
|
9
|
-
alignItems: 'center',
|
|
10
|
-
justifyContent: 'center',
|
|
11
|
-
animation: 'jump 0.2s ease-out',
|
|
12
|
-
}, children: _jsx("svg", { style: {
|
|
13
|
-
flexShrink: 0,
|
|
14
|
-
width: 26,
|
|
15
|
-
}, 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" }) }) }));
|
|
16
|
-
};
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { z } from 'zod';
|
|
3
|
-
declare const data: z.ZodObject<{
|
|
4
|
-
trending: z.ZodObject<{
|
|
5
|
-
repos: z.ZodArray<z.ZodString, "many">;
|
|
6
|
-
date: z.ZodUnion<[z.ZodString, z.ZodNumber]>;
|
|
7
|
-
temperatureInCelsius: z.ZodNumber;
|
|
8
|
-
countryLabel: z.ZodString;
|
|
9
|
-
countryPaths: z.ZodArray<z.ZodObject<{
|
|
10
|
-
d: z.ZodString;
|
|
11
|
-
class: z.ZodString;
|
|
12
|
-
}, "strip", z.ZodTypeAny, {
|
|
13
|
-
d: string;
|
|
14
|
-
class: string;
|
|
15
|
-
}, {
|
|
16
|
-
d: string;
|
|
17
|
-
class: string;
|
|
18
|
-
}>, "many">;
|
|
19
|
-
}, "strip", z.ZodTypeAny, {
|
|
20
|
-
countryPaths: {
|
|
21
|
-
d: string;
|
|
22
|
-
class: string;
|
|
23
|
-
}[];
|
|
24
|
-
countryLabel: string;
|
|
25
|
-
temperatureInCelsius: number;
|
|
26
|
-
date: string | number;
|
|
27
|
-
repos: string[];
|
|
28
|
-
}, {
|
|
29
|
-
countryPaths: {
|
|
30
|
-
d: string;
|
|
31
|
-
class: string;
|
|
32
|
-
}[];
|
|
33
|
-
countryLabel: string;
|
|
34
|
-
temperatureInCelsius: number;
|
|
35
|
-
date: string | number;
|
|
36
|
-
repos: string[];
|
|
37
|
-
}>;
|
|
38
|
-
location: z.ZodObject<{
|
|
39
|
-
country: z.ZodString;
|
|
40
|
-
city: z.ZodString;
|
|
41
|
-
latitude: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
|
|
42
|
-
longitude: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
|
|
43
|
-
}, "strip", z.ZodTypeAny, {
|
|
44
|
-
city: string;
|
|
45
|
-
country: string;
|
|
46
|
-
latitude: string | number;
|
|
47
|
-
longitude: string | number;
|
|
48
|
-
}, {
|
|
49
|
-
city: string;
|
|
50
|
-
country: string;
|
|
51
|
-
latitude: string | number;
|
|
52
|
-
longitude: string | number;
|
|
53
|
-
}>;
|
|
54
|
-
emojiIndex: z.ZodNumber;
|
|
55
|
-
theme: z.ZodEnum<["light", "dark"]>;
|
|
56
|
-
cardOrder: z.ZodArray<z.ZodNumber, "many">;
|
|
57
|
-
}, "strip", z.ZodTypeAny, {
|
|
58
|
-
theme: "light" | "dark";
|
|
59
|
-
emojiIndex: number;
|
|
60
|
-
trending: {
|
|
61
|
-
countryPaths: {
|
|
62
|
-
d: string;
|
|
63
|
-
class: string;
|
|
64
|
-
}[];
|
|
65
|
-
countryLabel: string;
|
|
66
|
-
temperatureInCelsius: number;
|
|
67
|
-
date: string | number;
|
|
68
|
-
repos: string[];
|
|
69
|
-
};
|
|
70
|
-
location: {
|
|
71
|
-
city: string;
|
|
72
|
-
country: string;
|
|
73
|
-
latitude: string | number;
|
|
74
|
-
longitude: string | number;
|
|
75
|
-
};
|
|
76
|
-
cardOrder: number[];
|
|
77
|
-
}, {
|
|
78
|
-
theme: "light" | "dark";
|
|
79
|
-
emojiIndex: number;
|
|
80
|
-
trending: {
|
|
81
|
-
countryPaths: {
|
|
82
|
-
d: string;
|
|
83
|
-
class: string;
|
|
84
|
-
}[];
|
|
85
|
-
countryLabel: string;
|
|
86
|
-
temperatureInCelsius: number;
|
|
87
|
-
date: string | number;
|
|
88
|
-
repos: string[];
|
|
89
|
-
};
|
|
90
|
-
location: {
|
|
91
|
-
city: string;
|
|
92
|
-
country: string;
|
|
93
|
-
latitude: string | number;
|
|
94
|
-
longitude: string | number;
|
|
95
|
-
};
|
|
96
|
-
cardOrder: number[];
|
|
97
|
-
}>;
|
|
98
|
-
export declare const RenderButton: React.FC<{
|
|
99
|
-
readonly renderData: z.infer<typeof data> | null;
|
|
100
|
-
readonly onError: () => void;
|
|
101
|
-
}>;
|
|
102
|
-
export {};
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import React, { useCallback } from 'react';
|
|
3
|
-
import { z } from 'zod';
|
|
4
|
-
import { PALETTE } from '../layout/colors';
|
|
5
|
-
import { DemoErrorIcon } from './DemoErrorIcon';
|
|
6
|
-
import { DoneCheckmark } from './DoneCheckmark';
|
|
7
|
-
import { Progress } from './Progress';
|
|
8
|
-
import { Spinner } from './Spinner';
|
|
9
|
-
const countryPath = z.object({
|
|
10
|
-
d: z.string(),
|
|
11
|
-
class: z.string(),
|
|
12
|
-
});
|
|
13
|
-
const remoteData = z.object({
|
|
14
|
-
repos: z.array(z.string()),
|
|
15
|
-
date: z.string().or(z.number()),
|
|
16
|
-
temperatureInCelsius: z.number(),
|
|
17
|
-
countryLabel: z.string(),
|
|
18
|
-
countryPaths: z.array(countryPath),
|
|
19
|
-
});
|
|
20
|
-
const location = z.object({
|
|
21
|
-
country: z.string(),
|
|
22
|
-
city: z.string(),
|
|
23
|
-
latitude: z.number().or(z.string()),
|
|
24
|
-
longitude: z.number().or(z.string()),
|
|
25
|
-
});
|
|
26
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
27
|
-
const data = z.object({
|
|
28
|
-
trending: remoteData,
|
|
29
|
-
location,
|
|
30
|
-
emojiIndex: z.number(),
|
|
31
|
-
theme: z.enum(['light', 'dark']),
|
|
32
|
-
cardOrder: z.array(z.number()),
|
|
33
|
-
});
|
|
34
|
-
const style = {
|
|
35
|
-
appearance: 'none',
|
|
36
|
-
border: 'none',
|
|
37
|
-
outline: 'none',
|
|
38
|
-
backgroundColor: 'transparent',
|
|
39
|
-
cursor: 'pointer',
|
|
40
|
-
width: 55,
|
|
41
|
-
height: 50,
|
|
42
|
-
display: 'flex',
|
|
43
|
-
alignItems: 'center',
|
|
44
|
-
justifyContent: 'center',
|
|
45
|
-
};
|
|
46
|
-
export const RenderButton = ({ renderData, onError }) => {
|
|
47
|
-
const [state, setState] = React.useState({
|
|
48
|
-
type: 'idle',
|
|
49
|
-
});
|
|
50
|
-
const triggerRender = useCallback(async () => {
|
|
51
|
-
if (renderData === null) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
try {
|
|
55
|
-
setState({ type: 'invoking' });
|
|
56
|
-
const { renderId, bucketName } = await (await fetch('https://bugs.remotion.dev/render', {
|
|
57
|
-
method: 'post',
|
|
58
|
-
headers: { 'content-type': 'application/json' },
|
|
59
|
-
body: JSON.stringify(renderData),
|
|
60
|
-
})).json();
|
|
61
|
-
setState({ type: 'progress', progress: 0 });
|
|
62
|
-
let done = false;
|
|
63
|
-
while (!done) {
|
|
64
|
-
const progress = (await (await fetch('https://bugs.remotion.dev/progress', {
|
|
65
|
-
method: 'post',
|
|
66
|
-
headers: { 'content-type': 'application/json' },
|
|
67
|
-
body: JSON.stringify({ renderId, bucketName }),
|
|
68
|
-
})).json());
|
|
69
|
-
setState({
|
|
70
|
-
type: 'progress',
|
|
71
|
-
progress: progress.overallProgress,
|
|
72
|
-
});
|
|
73
|
-
if (progress.outputFile) {
|
|
74
|
-
done = true;
|
|
75
|
-
const a = document.createElement('a');
|
|
76
|
-
a.href = progress.outputFile;
|
|
77
|
-
a.download = 'remotion.dev.mp4';
|
|
78
|
-
a.click();
|
|
79
|
-
setState({ type: 'done' });
|
|
80
|
-
}
|
|
81
|
-
if (progress.fatalErrorEncountered) {
|
|
82
|
-
done = true;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
catch (_a) {
|
|
87
|
-
setState({ type: 'error' });
|
|
88
|
-
onError();
|
|
89
|
-
}
|
|
90
|
-
}, [onError, renderData]);
|
|
91
|
-
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: {
|
|
92
|
-
width: 18,
|
|
93
|
-
opacity: renderData ? 1 : 0.5,
|
|
94
|
-
}, 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" }) })) }));
|
|
95
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare const NUM_WIDTH = 36;
|
|
3
|
-
export declare const Wheel: React.FC<{
|
|
4
|
-
readonly delay: number;
|
|
5
|
-
readonly digits: number[];
|
|
6
|
-
readonly renderDigit: (i: number) => React.ReactNode;
|
|
7
|
-
readonly isLeadingDigit: boolean;
|
|
8
|
-
readonly isNegative: boolean[];
|
|
9
|
-
}>;
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig, } from 'remotion';
|
|
3
|
-
import { Minus } from './Minus';
|
|
4
|
-
const DURATION = 25;
|
|
5
|
-
const items = 10;
|
|
6
|
-
export const NUM_WIDTH = 36;
|
|
7
|
-
export const Wheel = ({ delay, digits, renderDigit, isLeadingDigit, isNegative }) => {
|
|
8
|
-
const frame = useCurrentFrame();
|
|
9
|
-
const { fps } = useVideoConfig();
|
|
10
|
-
const singleDur = DURATION;
|
|
11
|
-
const progressesMaker = (springConfig, durationInFrames) => new Array(digits.length - 1).fill(true).map((_, i) => {
|
|
12
|
-
const current = digits[i];
|
|
13
|
-
const next = digits[i + 1];
|
|
14
|
-
if (current === next) {
|
|
15
|
-
return 1;
|
|
16
|
-
}
|
|
17
|
-
return spring({
|
|
18
|
-
fps,
|
|
19
|
-
frame,
|
|
20
|
-
config: springConfig,
|
|
21
|
-
durationInFrames,
|
|
22
|
-
delay: i * 50 + delay,
|
|
23
|
-
});
|
|
24
|
-
});
|
|
25
|
-
const progresses = progressesMaker({
|
|
26
|
-
mass: 0.7,
|
|
27
|
-
damping: 12,
|
|
28
|
-
}, singleDur);
|
|
29
|
-
const softProgresses = progressesMaker({
|
|
30
|
-
damping: 200,
|
|
31
|
-
}, singleDur / 2);
|
|
32
|
-
const rotations = digits.map((d) => 1 / items + d / 10);
|
|
33
|
-
const offsets = rotations.map((r, i) => {
|
|
34
|
-
const next = rotations[i + 1];
|
|
35
|
-
if (next === undefined) {
|
|
36
|
-
return 0;
|
|
37
|
-
}
|
|
38
|
-
return next - r;
|
|
39
|
-
});
|
|
40
|
-
const opacity = isLeadingDigit
|
|
41
|
-
? interpolate(softProgresses.reduce((a, b) => a + b, 0), new Array(digits.length).fill(true).map((_, i) => i), digits.map((digit) => (digit === 0 ? 0 : 1)))
|
|
42
|
-
: 1;
|
|
43
|
-
const minusSignOpacity = isLeadingDigit
|
|
44
|
-
? interpolate(softProgresses.reduce((a, b) => a + b, 0), new Array(digits.length).fill(true).map((_, i) => i), isNegative.map((negative) => (negative ? 1 : 0)))
|
|
45
|
-
: 1;
|
|
46
|
-
const minusSignMarginLeft = interpolate(minusSignOpacity, [0, 1], [10, 0]);
|
|
47
|
-
const shiftLeft = isLeadingDigit
|
|
48
|
-
? interpolate(softProgresses.reduce((a, b) => a + b, 0), new Array(digits.length).fill(true).map((_, i) => i), digits.map((digit) => (digit === 0 ? -40 : 0)))
|
|
49
|
-
: 1;
|
|
50
|
-
const rotation = progresses
|
|
51
|
-
.map((p, i) => {
|
|
52
|
-
return p * offsets[i];
|
|
53
|
-
})
|
|
54
|
-
.reduce((a, b) => a + b, 0) + rotations[0];
|
|
55
|
-
return (_jsxs("div", { style: {
|
|
56
|
-
position: 'relative',
|
|
57
|
-
width: NUM_WIDTH,
|
|
58
|
-
display: 'inline-block',
|
|
59
|
-
height: 80,
|
|
60
|
-
marginLeft: shiftLeft,
|
|
61
|
-
}, children: [isLeadingDigit ? (_jsx(Minus, { minusSignOpacity: minusSignOpacity, leftOffset: shiftLeft + minusSignMarginLeft })) : null, _jsx(AbsoluteFill, { style: {
|
|
62
|
-
perspective: 5000,
|
|
63
|
-
maskImage: `linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%)`,
|
|
64
|
-
WebkitMaskImage: `linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%)`,
|
|
65
|
-
}, children: new Array(items).fill(true).map((_, i) => {
|
|
66
|
-
const index = i / items + rotation;
|
|
67
|
-
const z = Math.cos(index * -Math.PI * 2) * 120;
|
|
68
|
-
const y = Math.sin(index * Math.PI * 2) * -120;
|
|
69
|
-
const r = interpolate(index, [0, 1], [0, Math.PI * 2]);
|
|
70
|
-
return (_jsx(AbsoluteFill
|
|
71
|
-
// eslint-disable-next-line react/no-array-index-key
|
|
72
|
-
, { style: {
|
|
73
|
-
justifyContent: 'center',
|
|
74
|
-
alignItems: 'center',
|
|
75
|
-
fontSize: 60,
|
|
76
|
-
fontVariationSettings: `"wght" 400`,
|
|
77
|
-
transform: `translateZ(${z}px) translateY(${y}px) rotateX(${r}deg)`,
|
|
78
|
-
backfaceVisibility: 'hidden',
|
|
79
|
-
perspective: 1000,
|
|
80
|
-
}, children: _jsx("div", { style: {
|
|
81
|
-
transform: `rotateX(-${r}rad)`,
|
|
82
|
-
backfaceVisibility: 'hidden',
|
|
83
|
-
display: 'flex',
|
|
84
|
-
flexDirection: 'row',
|
|
85
|
-
alignItems: 'center',
|
|
86
|
-
justifyContent: 'center',
|
|
87
|
-
opacity,
|
|
88
|
-
}, children: _jsx("div", { style: {
|
|
89
|
-
lineHeight: 1,
|
|
90
|
-
display: 'inline',
|
|
91
|
-
fontFeatureSettings: "'ss03' on",
|
|
92
|
-
}, children: renderDigit(i) }) }) }, i));
|
|
93
|
-
}) })] }));
|
|
94
|
-
};
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useMemo, useState } from 'react';
|
|
3
|
-
import { cancelRender, useDelayRender, useVideoConfig } from 'remotion';
|
|
4
|
-
export const DisplayedEmoji = ({ emoji }) => {
|
|
5
|
-
const [data, setData] = useState(null);
|
|
6
|
-
const { durationInFrames, fps } = useVideoConfig();
|
|
7
|
-
const [browser, setBrowser] = useState(typeof document !== 'undefined');
|
|
8
|
-
const { delayRender, continueRender } = useDelayRender();
|
|
9
|
-
const src = useMemo(() => {
|
|
10
|
-
if (emoji === 'melting') {
|
|
11
|
-
return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json';
|
|
12
|
-
}
|
|
13
|
-
if (emoji === 'partying-face') {
|
|
14
|
-
return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f973/lottie.json';
|
|
15
|
-
}
|
|
16
|
-
if (emoji === 'fire') {
|
|
17
|
-
return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f525/lottie.json';
|
|
18
|
-
}
|
|
19
|
-
throw new Error('Unknown emoji');
|
|
20
|
-
}, [emoji]);
|
|
21
|
-
const [handle] = useState(() => delayRender());
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
Promise.all([
|
|
24
|
-
fetch(src).then((res) => res.json()),
|
|
25
|
-
import('@remotion/lottie').then(({ Lottie, getLottieMetadata }) => ({
|
|
26
|
-
Lottie,
|
|
27
|
-
getLottieMetadata,
|
|
28
|
-
})),
|
|
29
|
-
])
|
|
30
|
-
.then(([json, { Lottie, getLottieMetadata }]) => {
|
|
31
|
-
var _a;
|
|
32
|
-
setData({
|
|
33
|
-
Lottie,
|
|
34
|
-
duration: (_a = getLottieMetadata(json)) === null || _a === void 0 ? void 0 : _a.durationInSeconds,
|
|
35
|
-
data: json,
|
|
36
|
-
});
|
|
37
|
-
continueRender(handle);
|
|
38
|
-
})
|
|
39
|
-
.catch((err) => {
|
|
40
|
-
cancelRender(err);
|
|
41
|
-
});
|
|
42
|
-
}, [handle, src, continueRender]);
|
|
43
|
-
useEffect(() => {
|
|
44
|
-
if (typeof document !== 'undefined') {
|
|
45
|
-
setBrowser(true);
|
|
46
|
-
}
|
|
47
|
-
}, []);
|
|
48
|
-
if (!browser) {
|
|
49
|
-
return null;
|
|
50
|
-
}
|
|
51
|
-
if (!data) {
|
|
52
|
-
return null;
|
|
53
|
-
}
|
|
54
|
-
const animDurtion = data.duration;
|
|
55
|
-
const ratio = durationInFrames / fps / animDurtion;
|
|
56
|
-
const closestInteger = ratio;
|
|
57
|
-
const closestRatio = closestInteger / ratio;
|
|
58
|
-
return (_jsx(data.Lottie, { style: {
|
|
59
|
-
height: 100,
|
|
60
|
-
width: '100%',
|
|
61
|
-
display: 'flex',
|
|
62
|
-
justifyContent: 'center',
|
|
63
|
-
}, loop: true, animationData: data.data, playbackRate: closestRatio }));
|
|
64
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { PALETTE } from '../layout/colors';
|
|
3
|
-
export const DoneCheckmark = () => {
|
|
4
|
-
return (_jsx("div", { style: {
|
|
5
|
-
backgroundColor: PALETTE.BRAND,
|
|
6
|
-
height: 26,
|
|
7
|
-
width: 26,
|
|
8
|
-
borderRadius: 13,
|
|
9
|
-
display: 'flex',
|
|
10
|
-
alignItems: 'center',
|
|
11
|
-
justifyContent: 'center',
|
|
12
|
-
animation: 'jump 0.2s ease-out',
|
|
13
|
-
}, children: _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
|
|
14
|
-
flexShrink: 0,
|
|
15
|
-
width: 26,
|
|
16
|
-
}, 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: {
|
|
17
|
-
transform: 'scale(1.2)',
|
|
18
|
-
transformOrigin: 'center',
|
|
19
|
-
} })] }) }));
|
|
20
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { FONTS } from '../layout/colors';
|
|
3
|
-
const origWidth = 77;
|
|
4
|
-
const scale = 0.4;
|
|
5
|
-
const Icon = () => {
|
|
6
|
-
return (_jsx("svg", { style: {
|
|
7
|
-
width: origWidth * scale,
|
|
8
|
-
}, 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" }) }));
|
|
9
|
-
};
|
|
10
|
-
export const DownloadNudge = () => {
|
|
11
|
-
return (_jsx("div", { style: {
|
|
12
|
-
position: 'relative',
|
|
13
|
-
flexDirection: 'row',
|
|
14
|
-
display: 'flex',
|
|
15
|
-
justifyContent: 'flex-end',
|
|
16
|
-
textAlign: 'right',
|
|
17
|
-
paddingRight: 22,
|
|
18
|
-
paddingTop: 20,
|
|
19
|
-
}, children: _jsxs("div", { children: [_jsx(Icon, {}), _jsxs("div", { style: {
|
|
20
|
-
fontFamily: FONTS.GTPLANAR,
|
|
21
|
-
fontSize: 15,
|
|
22
|
-
width: 280,
|
|
23
|
-
position: 'absolute',
|
|
24
|
-
right: 70,
|
|
25
|
-
top: 60,
|
|
26
|
-
}, children: ["Export the video using", _jsx("br", {}), ' ', _jsx("a", { href: "/lambda", className: "bluelink", children: "Remotion Lambda" }), "."] })] }) }));
|
|
27
|
-
};
|