@remotion/promo-pages 4.0.370 → 4.0.371

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.
Files changed (205) hide show
  1. package/dist/Homepage.js +6257 -3165
  2. package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/Homepage.js +6257 -3165
  3. package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/design.js +13314 -0
  4. package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/homepage/Pricing.js +13422 -402
  5. package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/template-modal-content.css +32 -0
  6. package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/template-modal-content.js +15290 -0
  7. package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/templates.css +43 -0
  8. package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/templates.js +14501 -0
  9. package/dist/design.js +13314 -0
  10. package/dist/homepage/Pricing.js +13422 -402
  11. package/dist/tailwind.css +151 -76
  12. package/dist/template-modal-content.css +32 -0
  13. package/dist/template-modal-content.js +15290 -0
  14. package/dist/templates.css +43 -0
  15. package/dist/templates.js +14501 -0
  16. package/package.json +13 -12
  17. package/public/img/freelancers/andrei.png +0 -0
  18. package/dist/cn.d.ts +0 -2
  19. package/dist/cn.js +0 -5
  20. package/dist/components/Homepage.d.ts +0 -6
  21. package/dist/components/Homepage.js +0 -21
  22. package/dist/components/TeamPicture.d.ts +0 -1
  23. package/dist/components/TeamPicture.js +0 -4
  24. package/dist/components/homepage/BackgroundAnimation.d.ts +0 -2
  25. package/dist/components/homepage/BackgroundAnimation.js +0 -66
  26. package/dist/components/homepage/ChooseTemplate.d.ts +0 -2
  27. package/dist/components/homepage/ChooseTemplate.js +0 -27
  28. package/dist/components/homepage/CommunityStats.d.ts +0 -3
  29. package/dist/components/homepage/CommunityStats.js +0 -6
  30. package/dist/components/homepage/CommunityStatsItems.d.ts +0 -7
  31. package/dist/components/homepage/CommunityStatsItems.js +0 -58
  32. package/dist/components/homepage/Counter.d.ts +0 -9
  33. package/dist/components/homepage/Counter.js +0 -55
  34. package/dist/components/homepage/Demo/Card.d.ts +0 -15
  35. package/dist/components/homepage/Demo/Card.js +0 -174
  36. package/dist/components/homepage/Demo/Cards.d.ts +0 -15
  37. package/dist/components/homepage/Demo/Cards.js +0 -57
  38. package/dist/components/homepage/Demo/Comp.d.ts +0 -38
  39. package/dist/components/homepage/Demo/Comp.js +0 -71
  40. package/dist/components/homepage/Demo/CurrentCountry.d.ts +0 -9
  41. package/dist/components/homepage/Demo/CurrentCountry.js +0 -48
  42. package/dist/components/homepage/Demo/DemoError.d.ts +0 -2
  43. package/dist/components/homepage/Demo/DemoError.js +0 -10
  44. package/dist/components/homepage/Demo/DemoErrorIcon.d.ts +0 -2
  45. package/dist/components/homepage/Demo/DemoErrorIcon.js +0 -16
  46. package/dist/components/homepage/Demo/DemoRender.d.ts +0 -102
  47. package/dist/components/homepage/Demo/DemoRender.js +0 -95
  48. package/dist/components/homepage/Demo/DigitWheel.d.ts +0 -9
  49. package/dist/components/homepage/Demo/DigitWheel.js +0 -94
  50. package/dist/components/homepage/Demo/DisplayedEmoji.d.ts +0 -5
  51. package/dist/components/homepage/Demo/DisplayedEmoji.js +0 -64
  52. package/dist/components/homepage/Demo/DoneCheckmark.d.ts +0 -2
  53. package/dist/components/homepage/Demo/DoneCheckmark.js +0 -20
  54. package/dist/components/homepage/Demo/DownloadNudge.d.ts +0 -2
  55. package/dist/components/homepage/Demo/DownloadNudge.js +0 -27
  56. package/dist/components/homepage/Demo/DragAndDropNudge.d.ts +0 -3
  57. package/dist/components/homepage/Demo/DragAndDropNudge.js +0 -26
  58. package/dist/components/homepage/Demo/EmojiCard.d.ts +0 -10
  59. package/dist/components/homepage/Demo/EmojiCard.js +0 -120
  60. package/dist/components/homepage/Demo/Minus.d.ts +0 -5
  61. package/dist/components/homepage/Demo/Minus.js +0 -11
  62. package/dist/components/homepage/Demo/PlayPauseButton.d.ts +0 -5
  63. package/dist/components/homepage/Demo/PlayPauseButton.js +0 -47
  64. package/dist/components/homepage/Demo/PlayerControls.d.ts +0 -8
  65. package/dist/components/homepage/Demo/PlayerControls.js +0 -15
  66. package/dist/components/homepage/Demo/PlayerSeekBar.d.ts +0 -11
  67. package/dist/components/homepage/Demo/PlayerSeekBar.js +0 -216
  68. package/dist/components/homepage/Demo/PlayerVolume.d.ts +0 -5
  69. package/dist/components/homepage/Demo/PlayerVolume.js +0 -53
  70. package/dist/components/homepage/Demo/Progress.d.ts +0 -4
  71. package/dist/components/homepage/Demo/Progress.js +0 -14
  72. package/dist/components/homepage/Demo/Spinner.d.ts +0 -5
  73. package/dist/components/homepage/Demo/Spinner.js +0 -37
  74. package/dist/components/homepage/Demo/Switcher.d.ts +0 -6
  75. package/dist/components/homepage/Demo/Switcher.js +0 -25
  76. package/dist/components/homepage/Demo/Temperature.d.ts +0 -6
  77. package/dist/components/homepage/Demo/Temperature.js +0 -21
  78. package/dist/components/homepage/Demo/TemperatureNumber.d.ts +0 -5
  79. package/dist/components/homepage/Demo/TemperatureNumber.js +0 -36
  80. package/dist/components/homepage/Demo/ThemeNudge.d.ts +0 -3
  81. package/dist/components/homepage/Demo/ThemeNudge.js +0 -35
  82. package/dist/components/homepage/Demo/TimeDisplay.d.ts +0 -6
  83. package/dist/components/homepage/Demo/TimeDisplay.js +0 -27
  84. package/dist/components/homepage/Demo/TrendingRepos.d.ts +0 -6
  85. package/dist/components/homepage/Demo/TrendingRepos.js +0 -65
  86. package/dist/components/homepage/Demo/icons.d.ts +0 -10
  87. package/dist/components/homepage/Demo/icons.js +0 -22
  88. package/dist/components/homepage/Demo/index.d.ts +0 -2
  89. package/dist/components/homepage/Demo/index.js +0 -95
  90. package/dist/components/homepage/Demo/math.d.ts +0 -10
  91. package/dist/components/homepage/Demo/math.js +0 -29
  92. package/dist/components/homepage/Demo/types.d.ts +0 -6
  93. package/dist/components/homepage/Demo/types.js +0 -0
  94. package/dist/components/homepage/EditorStarterSection.d.ts +0 -3
  95. package/dist/components/homepage/EditorStarterSection.js +0 -8
  96. package/dist/components/homepage/EvaluateRemotion.d.ts +0 -3
  97. package/dist/components/homepage/EvaluateRemotion.js +0 -38
  98. package/dist/components/homepage/FreePricing.d.ts +0 -4
  99. package/dist/components/homepage/FreePricing.js +0 -69
  100. package/dist/components/homepage/GetStartedStrip.d.ts +0 -2
  101. package/dist/components/homepage/GetStartedStrip.js +0 -14
  102. package/dist/components/homepage/GitHubButton.d.ts +0 -2
  103. package/dist/components/homepage/GitHubButton.js +0 -7
  104. package/dist/components/homepage/IconForTemplate.d.ts +0 -6
  105. package/dist/components/homepage/IconForTemplate.js +0 -98
  106. package/dist/components/homepage/IfYouKnowReact.d.ts +0 -3
  107. package/dist/components/homepage/IfYouKnowReact.js +0 -23
  108. package/dist/components/homepage/InfoTooltip.d.ts +0 -6
  109. package/dist/components/homepage/InfoTooltip.js +0 -6
  110. package/dist/components/homepage/MoreTemplatesButton.d.ts +0 -2
  111. package/dist/components/homepage/MoreTemplatesButton.js +0 -10
  112. package/dist/components/homepage/MoreVideoPowerSection.d.ts +0 -2
  113. package/dist/components/homepage/MoreVideoPowerSection.js +0 -16
  114. package/dist/components/homepage/MuxVideo.d.ts +0 -7
  115. package/dist/components/homepage/MuxVideo.js +0 -45
  116. package/dist/components/homepage/NewsletterButton.d.ts +0 -2
  117. package/dist/components/homepage/NewsletterButton.js +0 -39
  118. package/dist/components/homepage/ParameterizeAndEdit.d.ts +0 -2
  119. package/dist/components/homepage/ParameterizeAndEdit.js +0 -22
  120. package/dist/components/homepage/Pricing.d.ts +0 -2
  121. package/dist/components/homepage/Pricing.js +0 -15
  122. package/dist/components/homepage/PricingBulletPoint.d.ts +0 -6
  123. package/dist/components/homepage/PricingBulletPoint.js +0 -19
  124. package/dist/components/homepage/RealMp4Videos.d.ts +0 -2
  125. package/dist/components/homepage/RealMp4Videos.js +0 -41
  126. package/dist/components/homepage/Spacer.d.ts +0 -2
  127. package/dist/components/homepage/Spacer.js +0 -4
  128. package/dist/components/homepage/TemplateIcon.d.ts +0 -5
  129. package/dist/components/homepage/TemplateIcon.js +0 -24
  130. package/dist/components/homepage/TextInput.d.ts +0 -7
  131. package/dist/components/homepage/TextInput.js +0 -34
  132. package/dist/components/homepage/TrustedByBanner.d.ts +0 -2
  133. package/dist/components/homepage/TrustedByBanner.js +0 -27
  134. package/dist/components/homepage/VideoApps.d.ts +0 -4
  135. package/dist/components/homepage/VideoApps.js +0 -72
  136. package/dist/components/homepage/VideoAppsShowcase.d.ts +0 -3
  137. package/dist/components/homepage/VideoAppsShowcase.js +0 -133
  138. package/dist/components/homepage/VideoAppsTitle.d.ts +0 -4
  139. package/dist/components/homepage/VideoAppsTitle.js +0 -4
  140. package/dist/components/homepage/VideoPlayerWithControls.d.ts +0 -20
  141. package/dist/components/homepage/VideoPlayerWithControls.js +0 -105
  142. package/dist/components/homepage/WriteInReact.d.ts +0 -2
  143. package/dist/components/homepage/WriteInReact.js +0 -10
  144. package/dist/components/homepage/YouAreHere.d.ts +0 -2
  145. package/dist/components/homepage/YouAreHere.js +0 -23
  146. package/dist/components/homepage/layout/Button.d.ts +0 -19
  147. package/dist/components/homepage/layout/Button.js +0 -29
  148. package/dist/components/homepage/layout/colors.d.ts +0 -13
  149. package/dist/components/homepage/layout/colors.js +0 -14
  150. package/dist/components/homepage/layout/use-color-mode.d.ts +0 -21
  151. package/dist/components/homepage/layout/use-color-mode.js +0 -22
  152. package/dist/components/homepage/layout/use-el-size.d.ts +0 -5
  153. package/dist/components/homepage/layout/use-el-size.js +0 -40
  154. package/dist/components/homepage/layout/use-mobile-layout.d.ts +0 -1
  155. package/dist/components/homepage/layout/use-mobile-layout.js +0 -6
  156. package/dist/components/icons/blank.d.ts +0 -3
  157. package/dist/components/icons/blank.js +0 -4
  158. package/dist/components/icons/clone.d.ts +0 -2
  159. package/dist/components/icons/clone.js +0 -2
  160. package/dist/components/icons/code-hike.d.ts +0 -3
  161. package/dist/components/icons/code-hike.js +0 -4
  162. package/dist/components/icons/cubes.d.ts +0 -3
  163. package/dist/components/icons/cubes.js +0 -4
  164. package/dist/components/icons/js.d.ts +0 -3
  165. package/dist/components/icons/js.js +0 -4
  166. package/dist/components/icons/music.d.ts +0 -2
  167. package/dist/components/icons/music.js +0 -4
  168. package/dist/components/icons/next.d.ts +0 -4
  169. package/dist/components/icons/next.js +0 -4
  170. package/dist/components/icons/overlay.d.ts +0 -3
  171. package/dist/components/icons/overlay.js +0 -4
  172. package/dist/components/icons/recorder.d.ts +0 -3
  173. package/dist/components/icons/recorder.js +0 -4
  174. package/dist/components/icons/remix.d.ts +0 -3
  175. package/dist/components/icons/remix.js +0 -4
  176. package/dist/components/icons/skia.d.ts +0 -3
  177. package/dist/components/icons/skia.js +0 -4
  178. package/dist/components/icons/stargazer.d.ts +0 -3
  179. package/dist/components/icons/stargazer.js +0 -4
  180. package/dist/components/icons/still.d.ts +0 -3
  181. package/dist/components/icons/still.js +0 -4
  182. package/dist/components/icons/tailwind.d.ts +0 -3
  183. package/dist/components/icons/tailwind.js +0 -4
  184. package/dist/components/icons/tiktok.d.ts +0 -3
  185. package/dist/components/icons/tiktok.js +0 -4
  186. package/dist/components/icons/ts.d.ts +0 -3
  187. package/dist/components/icons/ts.js +0 -4
  188. package/dist/components/icons/tts.d.ts +0 -3
  189. package/dist/components/icons/tts.js +0 -4
  190. package/dist/components/icons/undo.d.ts +0 -3
  191. package/dist/components/icons/undo.js +0 -2
  192. package/dist/components/icons/waveform.d.ts +0 -3
  193. package/dist/components/icons/waveform.js +0 -4
  194. package/dist/components/team/TeamCards.d.ts +0 -6
  195. package/dist/components/team/TeamCards.js +0 -19
  196. package/dist/components/team/TitleTeamCards.d.ts +0 -2
  197. package/dist/components/team/TitleTeamCards.js +0 -6
  198. package/dist/components/team.d.ts +0 -3
  199. package/dist/components/team.js +0 -14
  200. package/dist/main.d.ts +0 -1
  201. package/dist/main.js +0 -6
  202. package/dist/team.d.ts +0 -1
  203. package/public/img/media-parser.png +0 -0
  204. package/public/img/recorder.png +0 -0
  205. 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,9 +0,0 @@
1
- import React from 'react';
2
- export declare const CurrentCountry: React.FC<{
3
- readonly theme: 'dark' | 'light';
4
- readonly countryPaths: {
5
- d: string;
6
- class: string;
7
- }[] | null;
8
- readonly countryLabel: string | null;
9
- }>;
@@ -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,2 +0,0 @@
1
- import React from 'react';
2
- export declare const DemoError: React.FC;
@@ -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,2 +0,0 @@
1
- import React from 'react';
2
- export declare const DemoErrorIcon: React.FC;
@@ -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,5 +0,0 @@
1
- import type { EmojiName } from '@remotion/animated-emoji';
2
- import React from 'react';
3
- export declare const DisplayedEmoji: React.FC<{
4
- readonly emoji: EmojiName;
5
- }>;
@@ -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,2 +0,0 @@
1
- import React from 'react';
2
- export declare const DoneCheckmark: React.FC;
@@ -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,2 +0,0 @@
1
- import React from 'react';
2
- export declare const DownloadNudge: React.FC;
@@ -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
- };
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- export declare const Icon: React.FC;
3
- export declare const DragAndDropNudge: React.FC;