@remotion/promo-pages 4.0.484 → 4.0.486
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 +498 -291
- package/dist/components/homepage/CommunityStatsItems.js +2 -2
- package/dist/components/homepage/GetStartedStrip.js +1 -1
- package/dist/components/homepage/GitHubButton.js +1 -1
- package/dist/components/homepage/Pricing.d.ts +3 -1
- package/dist/components/homepage/Pricing.js +6 -2
- package/dist/components/prompts/PromptsGallery.js +1 -1
- package/dist/components/prompts/PromptsSubmit.js +3 -169
- package/dist/design.js +203 -138
- package/dist/experts.js +110 -45
- package/dist/homepage/Pricing.js +212 -141
- package/dist/prompts/PromptsGallery.js +207 -142
- package/dist/prompts/PromptsShow.js +205 -140
- package/dist/prompts/PromptsSubmit.js +203 -138
- package/dist/team.js +203 -138
- package/dist/template-modal-content.js +212 -147
- package/dist/templates.js +203 -138
- package/package.json +17 -17
|
@@ -26,11 +26,11 @@ export const InstallsPerMonth = () => {
|
|
|
26
26
|
}, children: [_jsx(StatItemContent, { content: "3M+", width: "100px", fontSize: "2.5rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.6367 2.47534C12.5488 2.44116 12.4512 2.44116 12.3584 2.47534L3.10547 5.98608L12.5 9.67749L21.8945 5.98608L12.6367 2.47534ZM2.34375 18.4519C2.34375 18.613 2.44629 18.7595 2.59766 18.8181L11.3281 22.1287V11.738L2.34375 8.20776V18.4519ZM13.6719 22.1287L22.4023 18.8181C22.5537 18.7595 22.6562 18.613 22.6562 18.4519V8.20776L13.6719 11.738V22.1287ZM11.5283 0.287842C12.1533 0.048584 12.8418 0.048584 13.4668 0.287842L23.2324 3.9939C24.2969 4.39429 25 5.40991 25 6.54761V18.4519C25 19.5896 24.2969 20.6052 23.2373 21.0105L13.4717 24.7166C12.8467 24.9558 12.1582 24.9558 11.5332 24.7166L1.76758 21.0105C0.703125 20.6052 0 19.5896 0 18.4519V6.54761C0 5.40991 0.703125 4.39429 1.7627 3.98901L11.5283 0.282959V0.287842Z", fill: "var(--text-color)" }) }), width: "50px" })] }), _jsx(StatItemContent, { content: "installs", width: "75%", fontSize: "1.0rem", fontWeight: "bold" })] }));
|
|
27
27
|
};
|
|
28
28
|
export const PagesOfDocs = () => {
|
|
29
|
-
return (_jsxs(Pill, { className: "flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "28", height: "40", viewBox: "0 0 18 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 3.60938C0 1.61602 1.58304 0 3.53571 0H17.0357H18V0.984375V15.4219V16.4062H17.0357H16.7143V19.0312H17.0357H18V21H17.0357H3.21429C1.43839 21 0 19.5316 0 17.7188C0 17.608 0.00401786 17.4973 0.0160714 17.3906H0V3.60938ZM3.21429 16.4062C2.50312 16.4062 1.92857 16.9928 1.92857 17.7188C1.92857 18.4447 2.50312 19.0312 3.21429 19.0312H14.7857V16.4062H3.21429ZM1.92857 14.7123C2.32232 14.5359 2.75625 14.4375 3.21429 14.4375H16.0714V1.96875H3.53571C2.64777 1.96875 1.92857 2.70293 1.92857 3.60938V14.7123ZM6.10714 4.59375H13.1786H14.1429V6.5625H13.1786H6.10714H5.14286V4.59375H6.10714ZM6.10714 7.875H13.1786H14.1429V9.84375H13.1786H6.10714H5.14286V7.875H6.10714Z", fill: "var(--text-color)" }) }), width: "
|
|
29
|
+
return (_jsxs(Pill, { className: "flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "28", height: "40", viewBox: "0 0 18 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 3.60938C0 1.61602 1.58304 0 3.53571 0H17.0357H18V0.984375V15.4219V16.4062H17.0357H16.7143V19.0312H17.0357H18V21H17.0357H3.21429C1.43839 21 0 19.5316 0 17.7188C0 17.608 0.00401786 17.4973 0.0160714 17.3906H0V3.60938ZM3.21429 16.4062C2.50312 16.4062 1.92857 16.9928 1.92857 17.7188C1.92857 18.4447 2.50312 19.0312 3.21429 19.0312H14.7857V16.4062H3.21429ZM1.92857 14.7123C2.32232 14.5359 2.75625 14.4375 3.21429 14.4375H16.0714V1.96875H3.53571C2.64777 1.96875 1.92857 2.70293 1.92857 3.60938V14.7123ZM6.10714 4.59375H13.1786H14.1429V6.5625H13.1786H6.10714H5.14286V4.59375H6.10714ZM6.10714 7.875H13.1786H14.1429V9.84375H13.1786H6.10714H5.14286V7.875H6.10714Z", fill: "var(--text-color)" }) }), width: "32px" }), _jsx(StatItemContent, { content: "1000", width: "112px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "pages of docs", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
|
|
30
30
|
};
|
|
31
31
|
export const TemplatesAndExamples = () => (_jsxs(Pill, { className: "w-[30%] flex items-center flex-row", children: [_jsx(StatItemContent, { content: "35", width: "60px", fontSize: "2.7rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: "templates & examples", width: "135px", fontSize: "1.35rem", fontWeight: "bold" })] }));
|
|
32
32
|
export const GitHubStars = () => {
|
|
33
|
-
return (_jsxs(Pill, { className: "w-[30%] flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 26 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.9951 0C13.4424 0 13.8507 0.24375 14.0451 0.632812L17.3799 7.25625L24.8271 8.31562C25.2646 8.37656 25.6292 8.67188 25.7653 9.07969C25.9014 9.4875 25.7896 9.92812 25.4785 10.2281L20.0778 15.3937L21.3514 22.6875C21.4243 23.1094 21.2444 23.5359 20.8799 23.7891C20.5153 24.0422 20.0389 24.0703 19.65 23.8688L12.9903 20.4375L6.34027 23.8641C5.94652 24.0656 5.47014 24.0375 5.11041 23.7844C4.75069 23.5312 4.56597 23.1047 4.63889 22.6828L5.9125 15.3891L0.511803 10.2281C0.195831 9.92812 0.0888863 9.48281 0.224997 9.07969C0.361108 8.67656 0.725692 8.38125 1.16319 8.31562L8.61041 7.25625L11.9451 0.632812C12.1444 0.24375 12.5479 0 12.9951 0ZM12.9951 3.70312L10.4431 8.775C10.2729 9.10781 9.94722 9.34219 9.56319 9.39844L3.8125 10.2141L7.98819 14.2031C8.25555 14.4609 8.38194 14.8266 8.31875 15.1875L7.33194 20.7984L12.4458 18.1641C12.791 17.9859 13.2042 17.9859 13.5444 18.1641L18.6583 20.7984L17.6764 15.1922C17.6132 14.8313 17.7347 14.4656 18.0069 14.2078L22.1826 10.2188L16.4319 9.39844C16.0528 9.34219 15.7222 9.1125 15.5521 8.775L12.9951 3.70312Z", fill: "var(--text-color)" }) }), width: "45px" }), _jsx(StatItemContent, { content: "
|
|
33
|
+
return (_jsxs(Pill, { className: "w-[30%] flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 26 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.9951 0C13.4424 0 13.8507 0.24375 14.0451 0.632812L17.3799 7.25625L24.8271 8.31562C25.2646 8.37656 25.6292 8.67188 25.7653 9.07969C25.9014 9.4875 25.7896 9.92812 25.4785 10.2281L20.0778 15.3937L21.3514 22.6875C21.4243 23.1094 21.2444 23.5359 20.8799 23.7891C20.5153 24.0422 20.0389 24.0703 19.65 23.8688L12.9903 20.4375L6.34027 23.8641C5.94652 24.0656 5.47014 24.0375 5.11041 23.7844C4.75069 23.5312 4.56597 23.1047 4.63889 22.6828L5.9125 15.3891L0.511803 10.2281C0.195831 9.92812 0.0888863 9.48281 0.224997 9.07969C0.361108 8.67656 0.725692 8.38125 1.16319 8.31562L8.61041 7.25625L11.9451 0.632812C12.1444 0.24375 12.5479 0 12.9951 0ZM12.9951 3.70312L10.4431 8.775C10.2729 9.10781 9.94722 9.34219 9.56319 9.39844L3.8125 10.2141L7.98819 14.2031C8.25555 14.4609 8.38194 14.8266 8.31875 15.1875L7.33194 20.7984L12.4458 18.1641C12.791 17.9859 13.2042 17.9859 13.5444 18.1641L18.6583 20.7984L17.6764 15.1922C17.6132 14.8313 17.7347 14.4656 18.0069 14.2078L22.1826 10.2188L16.4319 9.39844C16.0528 9.34219 15.7222 9.1125 15.5521 8.775L12.9951 3.70312Z", fill: "var(--text-color)" }) }), width: "45px" }), _jsx(StatItemContent, { content: "52K", width: "80px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "GitHub stars", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
|
|
34
34
|
};
|
|
35
35
|
export const DiscordMembers = () => {
|
|
36
36
|
return (_jsx(Pill, { className: 'w-[30%]', children: _jsxs("div", { style: {
|
|
@@ -10,5 +10,5 @@ export const GetStarted = () => {
|
|
|
10
10
|
}, className: "absolute z-0 top-[-10px] font-mono text-sm text-center w-full", children: "Copied!" }, clicked)) : null, _jsx(Button, { className: "bg-[#333] text-white rounded-lg px-4 font-mono hover:[#444] cursor-pointer w-full", onClick: () => {
|
|
11
11
|
navigator.clipboard.writeText('npx create-video@latest');
|
|
12
12
|
setClicked(Date.now());
|
|
13
|
-
}, title: "Click to copy", children: "$ npx create-video@latest" })] }) }), _jsx("div", { style: { width: 10, height: 10 } }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx(Button, { href: "/docs", className: "w-full", children: "Docs" }) }), _jsx("div", { className: "w-2 h-2" }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx(Button, { href: "https://remotion.dev/discord", target: "_blank", className: "w-full", children: "Discord" }) }), _jsx("div", { className: "w-2 h-2" }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx(Button, { href: "https://github.com/remotion-dev/remotion", target: "_blank", className: "w-full", children: _jsx(GithubButton, {}) }) })
|
|
13
|
+
}, title: "Click to copy", children: "$ npx create-video@latest" })] }) }), _jsx("div", { style: { width: 10, height: 10 } }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx(Button, { href: "/docs", className: "w-full", children: "Docs" }) }), _jsx("div", { className: "w-2 h-2" }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx(Button, { href: "https://remotion.dev/discord", target: "_blank", className: "w-full", children: "Discord" }) }), _jsx("div", { className: "w-2 h-2" }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx(Button, { href: "https://github.com/remotion-dev/remotion", target: "_blank", className: "w-full", children: _jsx(GithubButton, {}) }) })] }));
|
|
14
14
|
};
|
|
@@ -3,5 +3,5 @@ const GithubIcon = () => {
|
|
|
3
3
|
return (_jsx("svg", { viewBox: "0 0 496 512", style: { height: 24, marginRight: 8 }, children: _jsx("path", { fill: "currentColor", d: "M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" }) }));
|
|
4
4
|
};
|
|
5
5
|
export const GithubButton = () => {
|
|
6
|
-
return (_jsxs("div", { className: "flex flex-row items-center text-base", children: [_jsx(GithubIcon, {}), " ", _jsx("span", { children: "GitHub" }), ' ', _jsx("div", { className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center", children: '
|
|
6
|
+
return (_jsxs("div", { className: "flex flex-row items-center text-base", children: [_jsx(GithubIcon, {}), " ", _jsx("span", { children: "GitHub" }), ' ', _jsx("div", { className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center", children: '52k' })] }));
|
|
7
7
|
};
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from 'react';
|
|
2
3
|
import { CompanyPricing, EnterpriseLicense, FreePricing } from './FreePricing';
|
|
3
|
-
export const Pricing = () => {
|
|
4
|
+
export const Pricing = ({ faqHref = '/pricing#faq' }) => {
|
|
5
|
+
const faqLinkTarget = useMemo(() => {
|
|
6
|
+
return faqHref.startsWith('http') ? '_blank' : undefined;
|
|
7
|
+
}, [faqHref]);
|
|
4
8
|
return (_jsxs("div", { style: {
|
|
5
9
|
display: 'flex',
|
|
6
10
|
flexDirection: 'column',
|
|
@@ -11,5 +15,5 @@ export const Pricing = () => {
|
|
|
11
15
|
display: 'flex',
|
|
12
16
|
}, children: _jsxs("div", { style: {
|
|
13
17
|
fontFamily: 'GTPlanar',
|
|
14
|
-
}, children: ["See our", ' ', _jsx("a", { target:
|
|
18
|
+
}, children: ["See our", ' ', _jsx("a", { target: faqLinkTarget, className: "bluelink", href: faqHref, children: "FAQ" }), ' ', "and", ' ', _jsx("a", { target: "_blank", className: "bluelink", href: "https://www.remotion.pro/terms", children: "Terms and Conditions" }), ' ', "for more details."] }) })] }));
|
|
15
19
|
};
|
|
@@ -56,5 +56,5 @@ const Pagination = ({ currentPage, totalPages }) => {
|
|
|
56
56
|
: 'text-muted-foreground hover:text-text'}`, children: page }, page))) }), currentPage < totalPages ? (_jsx("a", { href: getPageUrl(currentPage + 1), className: "text-muted-foreground hover:text-text no-underline hover:no-underline", children: "Next \u2192" })) : (_jsx("span", { className: "text-gray-300 cursor-not-allowed", children: "Next \u2192" }))] }));
|
|
57
57
|
};
|
|
58
58
|
export const PromptsGalleryPage = ({ promptSubmissions, currentPage, totalPages }) => {
|
|
59
|
-
return (_jsx(Page, { className: "flex-col", children: _jsxs("div", { className: "m-auto max-w-[1200px] w-full px-4 py-12", children: [_jsxs("div", { className: "mb-8", children: [_jsx("h1", { className: "text-3xl font-brand font-black", children: "Prompt Showcase" }), _jsxs("p", { className: "font-brand text-muted-foreground mt-4 max-w-[700px]", children: ["See what the community has built using", ' ', _jsx("a", { href: "/docs/ai/skills", className: "underline hover:text-text underline-offset-4", children: "Remotion Skills" }), ' ', "and
|
|
59
|
+
return (_jsx(Page, { className: "flex-col", children: _jsxs("div", { className: "m-auto max-w-[1200px] w-full px-4 py-12", children: [_jsxs("div", { className: "mb-8", children: [_jsx("h1", { className: "text-3xl font-brand font-black", children: "Prompt Showcase" }), _jsxs("p", { className: "font-brand text-muted-foreground mt-4 max-w-[700px]", children: ["See what the community has built using", ' ', _jsx("a", { href: "/docs/ai/skills", className: "underline hover:text-text underline-offset-4", children: "Remotion Skills" }), ' ', "and coding agents like Claude Code, Codex, or OpenCode."] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs(Button, { href: "/docs/ai/coding-agents", className: "font-brand rounded-full bg-[#D97757] flex items-center text-white", children: [_jsx("svg", { width: "20", height: "20", viewBox: "0 0 149 149", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { marginRight: 8 }, children: _jsx("path", { d: "M29.05 98.54L58.19 82.19L58.68 80.77L58.19 79.98H56.77L51.9 79.68L35.25 79.23L20.81 78.63L6.82 77.88L3.3 77.13L0 72.78L0.340004 70.61L3.3 68.62L7.54 68.99L16.91 69.63L30.97 70.6L41.17 71.2L56.28 72.77H58.68L59.02 71.8L58.2 71.2L57.56 70.6L43.01 60.74L27.26 50.32L19.01 44.32L14.55 41.28L12.3 38.43L11.33 32.21L15.38 27.75L20.82 28.12L22.21 28.49L27.72 32.73L39.49 41.84L54.86 53.16L57.11 55.03L58.01 54.39L58.12 53.94L57.11 52.25L48.75 37.14L39.83 21.77L35.86 15.4L34.81 11.58C34.44 10.01 34.17 8.69 34.17 7.08L38.78 0.820007L41.33 0L47.48 0.820007L50.07 3.07001L53.89 11.81L60.08 25.57L69.68 44.28L72.49 49.83L73.99 54.97L74.55 56.54H75.52V55.64L76.31 45.1L77.77 32.16L79.19 15.51L79.68 10.82L82 5.2L86.61 2.16L90.21 3.88L93.17 8.12L92.76 10.86L91 22.3L87.55 40.22L85.3 52.22H86.61L88.11 50.72L94.18 42.66L104.38 29.91L108.88 24.85L114.13 19.26L117.5 16.6H123.87L128.56 23.57L126.46 30.77L119.9 39.09L114.46 46.14L106.66 56.64L101.79 65.04L102.24 65.71L103.4 65.6L121.02 61.85L130.54 60.13L141.9 58.18L147.04 60.58L147.6 63.02L145.58 68.01L133.43 71.01L119.18 73.86L97.96 78.88L97.7 79.07L98 79.44L107.56 80.34L111.65 80.56H121.66L140.3 81.95L145.17 85.17L148.09 89.11L147.6 92.11L140.1 95.93L129.98 93.53L106.36 87.91L98.26 85.89H97.14V86.56L103.89 93.16L116.26 104.33L131.75 118.73L132.54 122.29L130.55 125.1L128.45 124.8L114.84 114.56L109.59 109.95L97.7 99.94H96.91V100.99L99.65 105L114.12 126.75L114.87 133.42L113.82 135.59L110.07 136.9L105.95 136.15L97.48 124.26L88.74 110.87L81.69 98.87L80.83 99.36L76.67 144.17L74.72 146.46L70.22 148.18L66.47 145.33L64.48 140.72L66.47 131.61L68.87 119.72L70.82 110.27L72.58 98.53L73.63 94.63L73.56 94.37L72.7 94.48L63.85 106.63L50.39 124.82L39.74 136.22L37.19 137.23L32.77 134.94L33.18 130.85L35.65 127.21L50.39 108.46L59.28 96.84L65.02 90.13L64.98 89.16H64.64L25.49 114.58L18.52 115.48L15.52 112.67L15.89 108.06L17.31 106.56L29.08 98.46L29.04 98.5L29.05 98.54Z", fill: "#fff" }) }), _jsx("div", { className: "text-sm", children: "Create your own video" })] }) }), _jsx("div", { className: "h-12" }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: promptSubmissions.map((p) => (_jsx(PromptSubmissionCard, { promptSubmission: p }, p.id))) }), _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages })] }) }));
|
|
60
60
|
};
|
|
@@ -1,173 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
2
|
-
import { Button
|
|
3
|
-
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
4
|
-
import { REMOTION_PRO_ORIGIN } from './config';
|
|
5
|
-
import { MuxPlayer } from './MuxPlayer';
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from '@remotion/design';
|
|
6
3
|
import { NewBackButton } from './NewBackButton';
|
|
7
4
|
import { Page } from './Page';
|
|
8
5
|
export const PromptsSubmitPage = () => {
|
|
9
|
-
|
|
10
|
-
const [prompt, setPrompt] = useState('');
|
|
11
|
-
const [toolUsed, setToolUsed] = useState('');
|
|
12
|
-
const [modelUsed, setModelUsed] = useState('');
|
|
13
|
-
const [usernameType, setUsernameType] = useState('github');
|
|
14
|
-
const [username, setUsername] = useState('');
|
|
15
|
-
const [uploadState, setUploadState] = useState({ type: 'idle' });
|
|
16
|
-
const [submitStatus, setSubmitStatus] = useState({
|
|
17
|
-
type: 'idle',
|
|
18
|
-
});
|
|
19
|
-
const [isDragging, setIsDragging] = useState(false);
|
|
20
|
-
const pollRef = useRef(null);
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
return () => {
|
|
23
|
-
if (pollRef.current)
|
|
24
|
-
clearInterval(pollRef.current);
|
|
25
|
-
};
|
|
26
|
-
}, []);
|
|
27
|
-
const fileInputRef = useRef(null);
|
|
28
|
-
const startUpload = useCallback(async (file) => {
|
|
29
|
-
setUploadState({ type: 'uploading', progress: 0 });
|
|
30
|
-
try {
|
|
31
|
-
const res = await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/upload`, {
|
|
32
|
-
method: 'POST',
|
|
33
|
-
headers: { 'content-type': 'application/json' },
|
|
34
|
-
});
|
|
35
|
-
const { id, url } = await res.json();
|
|
36
|
-
const { createUpload } = await import('@mux/upchunk');
|
|
37
|
-
const upload = createUpload({ endpoint: url, file });
|
|
38
|
-
upload.on('progress', (p) => {
|
|
39
|
-
setUploadState({ type: 'uploading', progress: p.detail });
|
|
40
|
-
});
|
|
41
|
-
upload.on('success', () => {
|
|
42
|
-
setUploadState({ type: 'processing' });
|
|
43
|
-
pollRef.current = setInterval(async () => {
|
|
44
|
-
try {
|
|
45
|
-
const statusRes = await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/upload/${id}`);
|
|
46
|
-
if (!statusRes.ok) {
|
|
47
|
-
throw new Error(`Failed to fetch upload status: ${statusRes.status}`);
|
|
48
|
-
}
|
|
49
|
-
const data = await statusRes.json();
|
|
50
|
-
if (data.status === 'asset_created' &&
|
|
51
|
-
data.playback_id &&
|
|
52
|
-
data.asset_status === 'ready') {
|
|
53
|
-
if (pollRef.current)
|
|
54
|
-
clearInterval(pollRef.current);
|
|
55
|
-
setUploadState({
|
|
56
|
-
type: 'ready',
|
|
57
|
-
muxAssetId: data.asset_id,
|
|
58
|
-
muxPlaybackId: data.playback_id,
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
catch (error) {
|
|
63
|
-
// eslint-disable-next-line no-console
|
|
64
|
-
console.error('Error while polling upload status', error);
|
|
65
|
-
}
|
|
66
|
-
}, 2000);
|
|
67
|
-
});
|
|
68
|
-
upload.on('error', (err) => {
|
|
69
|
-
setUploadState({
|
|
70
|
-
type: 'error',
|
|
71
|
-
message: err.detail.message,
|
|
72
|
-
});
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
catch (err) {
|
|
76
|
-
setUploadState({
|
|
77
|
-
type: 'error',
|
|
78
|
-
message: err instanceof Error ? err.message : 'Upload failed',
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
}, []);
|
|
82
|
-
const onFileSelect = useCallback((e) => {
|
|
83
|
-
var _a;
|
|
84
|
-
const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
|
|
85
|
-
if (!file)
|
|
86
|
-
return;
|
|
87
|
-
startUpload(file);
|
|
88
|
-
}, [startUpload]);
|
|
89
|
-
const onDrop = useCallback((e) => {
|
|
90
|
-
var _a, _b;
|
|
91
|
-
e.preventDefault();
|
|
92
|
-
setIsDragging(false);
|
|
93
|
-
if (uploadState.type !== 'idle')
|
|
94
|
-
return;
|
|
95
|
-
const file = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
|
|
96
|
-
if (!file)
|
|
97
|
-
return;
|
|
98
|
-
if (!file.type.startsWith('video/'))
|
|
99
|
-
return;
|
|
100
|
-
startUpload(file);
|
|
101
|
-
}, [startUpload, uploadState.type]);
|
|
102
|
-
const onDragOver = useCallback((e) => {
|
|
103
|
-
e.preventDefault();
|
|
104
|
-
}, []);
|
|
105
|
-
const onDragEnter = useCallback(() => {
|
|
106
|
-
if (uploadState.type === 'idle') {
|
|
107
|
-
setIsDragging(true);
|
|
108
|
-
}
|
|
109
|
-
}, [uploadState.type]);
|
|
110
|
-
const onDragLeave = useCallback((e) => {
|
|
111
|
-
if (e.currentTarget === e.target) {
|
|
112
|
-
setIsDragging(false);
|
|
113
|
-
}
|
|
114
|
-
}, []);
|
|
115
|
-
const submitPossible = title.length > 0 &&
|
|
116
|
-
title.length <= 80 &&
|
|
117
|
-
prompt.length > 0 &&
|
|
118
|
-
usernameType &&
|
|
119
|
-
username.length > 0 &&
|
|
120
|
-
uploadState.type === 'ready' &&
|
|
121
|
-
(submitStatus.type === 'idle' || submitStatus.type === 'error');
|
|
122
|
-
const submit = useCallback(async () => {
|
|
123
|
-
if (!submitPossible || uploadState.type !== 'ready')
|
|
124
|
-
return;
|
|
125
|
-
setSubmitStatus({ type: 'submitting' });
|
|
126
|
-
try {
|
|
127
|
-
const res = await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/submit`, {
|
|
128
|
-
method: 'POST',
|
|
129
|
-
headers: { 'content-type': 'application/json' },
|
|
130
|
-
body: JSON.stringify({
|
|
131
|
-
muxAssetId: uploadState.muxAssetId,
|
|
132
|
-
muxPlaybackId: uploadState.muxPlaybackId,
|
|
133
|
-
title,
|
|
134
|
-
prompt,
|
|
135
|
-
toolUsed: toolUsed || undefined,
|
|
136
|
-
modelUsed: modelUsed || undefined,
|
|
137
|
-
githubUsername: usernameType === 'github' ? username : undefined,
|
|
138
|
-
xUsername: usernameType === 'x' ? username : undefined,
|
|
139
|
-
}),
|
|
140
|
-
});
|
|
141
|
-
if (!res.ok) {
|
|
142
|
-
const submissionData = await res.json();
|
|
143
|
-
throw new Error(submissionData.error || 'Submission failed');
|
|
144
|
-
}
|
|
145
|
-
const data = await res.json();
|
|
146
|
-
setSubmitStatus({ type: 'done', slug: data.slug });
|
|
147
|
-
}
|
|
148
|
-
catch (err) {
|
|
149
|
-
setSubmitStatus({ type: 'error', err: err });
|
|
150
|
-
}
|
|
151
|
-
}, [
|
|
152
|
-
submitPossible,
|
|
153
|
-
uploadState,
|
|
154
|
-
title,
|
|
155
|
-
prompt,
|
|
156
|
-
usernameType,
|
|
157
|
-
username,
|
|
158
|
-
toolUsed,
|
|
159
|
-
modelUsed,
|
|
160
|
-
]);
|
|
161
|
-
if (submitStatus.type === 'done') {
|
|
162
|
-
return (_jsx(Page, { className: "flex-col", children: _jsx("div", { className: "m-auto max-w-[800px] w-full", children: _jsxs("div", { className: "mx-4 px-8 py-8 mt-12 pt-8", children: [_jsx("h1", { className: "text-3xl font-brand font-black", children: "Submission received!" }), _jsxs("div", { className: "mt-4 text-muted-foreground font-brand", children: ["Thanks for submitting your prompt! Your prompt submission is pending review.", _jsx("br", {}), " Once approved, it will appear on the", ' ', _jsx("a", { href: "/prompts", className: "underline", children: "prompts showcase" }), "."] }), _jsx("div", { className: "mt-4 text-muted-foreground font-brand", children: "Note that this showcase is curated - we may reject submissions if they are repetitive or not up to our quality standards. In that case, we will not give notification or reason." }), _jsx(Button, { onClick: () => {
|
|
163
|
-
window.location.href = '/prompts';
|
|
164
|
-
}, className: "font-brand rounded-full mt-4", children: "Back to gallery" })] }) }) }));
|
|
165
|
-
}
|
|
166
|
-
return (_jsx(Page, { className: "flex-col", children: _jsx("div", { className: "m-auto max-w-[800px] w-full", children: _jsxs("div", { className: "mx-4 px-8 py-8 pt-8", children: [_jsx(NewBackButton, { text: "Back to gallery", link: "/prompts" }), _jsx("h1", { className: "text-3xl font-brand font-black", children: "Share your video" }), _jsxs("p", { className: "text-muted-foreground text-sm font-brand", children: ["Share a video you made with Remotion to be featured in the", ' ', _jsx("a", { href: "/prompts", className: "underline hover:text-text underline-offset-4", children: "Prompt Showcase." })] }), _jsx("p", { className: "text-muted-foreground text-sm font-brand", children: "Note that this showcase is curated - we may reject submissions if they are repetitive or not up to our quality standards. In that case, we will not give notification or reason." }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Title *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "A short title for your prompt (max 80 characters)." }), _jsx(Input, { name: "title", placeholder: "Newspaper highlighting animation", className: "font-brand mt-3", value: title, maxLength: 80, onChange: (e) => setTitle(e.target.value) }), _jsxs("p", { className: "text-muted-foreground text-xs mt-1 mb-0 font-brand", children: [title.length, "/80"] }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Video *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Upload a video showing the result of your prompt." }), _jsx("input", { ref: fileInputRef, type: "file", accept: "video/*", onChange: onFileSelect, className: "hidden" }), _jsxs("div", { onDrop: onDrop, onDragOver: onDragOver, onDragEnter: onDragEnter, onDragLeave: onDragLeave, className: `flex flex-col items-center py-12 mt-3 rounded-lg border-2 border-dashed transition-colors ${isDragging
|
|
167
|
-
? 'border-brand bg-brand/10'
|
|
168
|
-
: 'border-muted-foreground/25'}`, children: [uploadState.type === 'idle' &&
|
|
169
|
-
(isDragging ? (_jsx("div", { className: "font-brand text-sm text-brand font-medium", children: "Drop your video here" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { className: "font-brand rounded-full", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Choose video file" }), _jsx("div", { className: "font-brand text-sm mt-3 text-muted-foreground", children: "or drag and drop a video file here" })] }))), uploadState.type === 'uploading' && (_jsxs("div", { className: "text-muted-foreground font-brand font-medium text-sm", children: ["Uploading ", Math.round(uploadState.progress), "%"] })), uploadState.type === 'processing' && (_jsx("div", { className: "text-muted-foreground font-brand font-medium text-sm", children: "Processing video..." })), uploadState.type === 'ready' && (_jsxs("div", { className: "w-full flex flex-col items-center px-4 gap-4", children: [_jsx(MuxPlayer, { playbackId: uploadState.muxPlaybackId, title: title || 'Preview' }), _jsx("button", { type: "button", className: "font-brand text-sm text-muted-foreground hover:text-foreground transition-colors", onClick: () => setUploadState({ type: 'idle' }), children: "Remove video" })] })), uploadState.type === 'error' && (_jsx("div", { className: "text-red-500 font-brand font-medium text-sm", children: uploadState.message }))] }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Prompt(s) *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "The prompts you used to generate this video. Separate multiple prompts with an empty line." }), _jsx(Textarea, { name: "prompt", className: "font-brand mt-3", placeholder: "Enter your full prompt here", value: prompt, onChange: (e) => setPrompt(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Tool used" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Which tool did you use to generate this video? (e.g. Claude Code, Cursor, Codex)" }), _jsx(Input, { name: "toolUsed", placeholder: "Claude Code", className: "font-brand mt-3", value: toolUsed, onChange: (e) => setToolUsed(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Model used" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Which AI model did you use? (e.g. Opus 4.7, GPT-5.5)" }), _jsx(Input, { name: "modelUsed", placeholder: "Opus 4.7", className: "font-brand mt-3", value: modelUsed, onChange: (e) => setModelUsed(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "How should we credit you? *" }), _jsxs(Tabs, { defaultValue: "github", className: "mt-3", onValueChange: (value) => {
|
|
170
|
-
setUsernameType(value);
|
|
171
|
-
setUsername('');
|
|
172
|
-
}, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "github", children: "GitHub" }), _jsx(TabsTrigger, { value: "x", children: "X (Twitter)" })] }), _jsx(TabsContent, { value: "github", children: _jsx(Input, { name: "username", className: "font-brand", placeholder: "Your GitHub username", value: usernameType === 'github' ? username : '', onChange: (e) => setUsername(e.target.value) }) }), _jsx(TabsContent, { value: "x", children: _jsx(Input, { name: "username", className: "font-brand", placeholder: "Your X username (without @)", value: usernameType === 'x' ? username : '', onChange: (e) => setUsername(e.target.value) }) })] }), _jsx("div", { className: "h-8" }), _jsx(Button, { onClick: submit, disabled: !submitPossible, type: "submit", className: "font-brand rounded-full w-full bg-brand text-white", children: "Submit" }), submitStatus.type === 'error' && (_jsxs("p", { className: "text-red-500 mt-4 text-sm font-brand", children: ["An error occurred: ", submitStatus.err.message] }))] }) }) }));
|
|
6
|
+
return (_jsx(Page, { className: "flex-col", children: _jsx("div", { className: "m-auto max-w-[800px] w-full", children: _jsxs("div", { className: "mx-4 px-8 py-8 pt-8", children: [_jsx(NewBackButton, { text: "Back to gallery", link: "/prompts" }), _jsx("h1", { className: "text-3xl font-brand font-black", children: "Share your video" }), _jsx("p", { className: "text-muted-foreground text-sm font-brand", children: "Submissions are currently disabled while we work on something better!" }), _jsx(Button, { href: "/prompts", className: "font-brand rounded-full mt-4", children: "Back to gallery" })] }) }) }));
|
|
173
7
|
};
|