@revideo/create 0.5.11-alpha.1102 → 0.5.11-alpha.1104

package/examples/saas-template/app/actions.tsx

@@ -0,0 +1,114 @@
+'use server';
+
+import pLimit from 'p-limit';
+
+const PER_PAGE = 30;
+
+interface ReturnType {
+	stargazerTimes: number[];
+	status: 'success' | 'rate-limit' | 'error';
+}
+
+async function getStargazerTimesForPage(
+	repo: `${string}/${string}`,
+	page: number,
+	headers: HeadersInit,
+): Promise<ReturnType> {
+	const response = await fetch(
+		`https://api.github.com/repos/${repo}/stargazers?page=${page}&per_page=${PER_PAGE}`,
+		{
+			headers: {
+				// eslint-disable-next-line @typescript-eslint/naming-convention
+				Accept: 'application/vnd.github.v3.star+json',
+				...headers,
+			},
+		},
+	);
+
+	if (response.status === 403) {
+		return {stargazerTimes: [], status: 'rate-limit'};
+	}
+
+	if (!response.ok) {
+		return {stargazerTimes: [], status: 'error'};
+	}
+
+	const data = await response.json();
+	const dates: Date[] = data.map((stargazer: any) => new Date(stargazer.starred_at));
+	const msTimes = dates.map((date) => date.getTime());
+
+	return {
+		stargazerTimes: msTimes,
+		status: 'success',
+	};
+}
+
+const limit = pLimit(10);
+
+async function getTimes(
+	repo: `${string}/${string}`,
+	totalPages: number,
+	headers: HeadersInit,
+): Promise<ReturnType> {
+	const stargazerPromises: Promise<ReturnType>[] = [];
+
+	// Fetch all pages in parallel
+	for (let page = 1; page <= totalPages; page++) {
+		stargazerPromises.push(limit(() => getStargazerTimesForPage(repo, page, headers)));
+	}
+
+	const stargazerTimes = await Promise.all(stargazerPromises);
+
+	// In case of failure, return the first error
+	const objectsThatFailed = stargazerTimes.filter(({status}) => status !== 'success');
+	if (stargazerTimes.some(({status}) => status !== 'success')) {
+		return {
+			stargazerTimes: [],
+			status: objectsThatFailed[0].status,
+		};
+	}
+
+	const stargazerMs = stargazerTimes.map(({stargazerTimes}) => stargazerTimes).flat();
+	const sortedMs = stargazerMs.sort((a, b) => a - b);
+
+	const firstMs = sortedMs[0];
+	const relativeMs = sortedMs.map((ms) => ms - firstMs);
+
+	return {
+		stargazerTimes: relativeMs,
+		status: 'success',
+	};
+}
+
+export async function getGithubRepositoryInfo(
+	repoName: `${string}/${string}`,
+	key?: string,
+): Promise<ReturnType & {repoImage: string}> {
+	const headers: HeadersInit = {};
+
+	if (key) {
+		headers.Authorization = `token ${key}`;
+	}
+
+	const response = await fetch(`https://api.github.com/repos/${repoName}`, {
+		headers,
+	});
+
+	if (response.status === 403) {
+		return {stargazerTimes: [], repoImage: '', status: 'rate-limit'};
+	}
+
+	if (!response.ok) {
+		return {stargazerTimes: [], repoImage: '', status: 'error'};
+	}
+
+	const responseParsed = await response.json();
+	const pages = Math.ceil(responseParsed.stargazers_count / PER_PAGE);
+	const info = await getTimes(repoName, pages, headers);
+
+	return {
+		stargazerTimes: info.stargazerTimes,
+		repoImage: responseParsed.owner.avatar_url,
+		status: info.status,
+	};
+}

package/examples/saas-template/app/api/render/route.ts

@@ -0,0 +1,23 @@
+const RENDER_URL = 'http://localhost:4000/render';
+
+async function getResponse(body: string) {
+	return await fetch(RENDER_URL, {
+		method: 'POST',
+		headers: {
+			// eslint-disable-next-line @typescript-eslint/naming-convention
+			'Content-Type': 'application/json',
+		},
+		body,
+	});
+}
+
+export async function POST(request: Request) {
+	const body = await request.json();
+
+	const response = await getResponse(JSON.stringify(body));
+	if (!response.ok) {
+		return new Response('Failed to render', {status: 500});
+	}
+
+	return new Response(response.body, {status: 200});
+}

package/examples/saas-template/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/examples/saas-template/app/layout.tsx

@@ -0,0 +1,25 @@
+import type {Metadata} from 'next';
+import {Inter} from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({subsets: ['latin']});
+
+export const metadata: Metadata = {
+	title: 'Create Next App',
+	description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return (
+		<html lang="en">
+			<head>
+				<link rel="stylesheet" href="http://localhost:4000/player/project.css" />
+			</head>
+			<body className={inter.className}>{children}</body>
+		</html>
+	);
+}

package/examples/saas-template/app/page.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import {Player} from '@revideo/player-react';
+import {getGithubRepositoryInfo} from './actions';
+import {useState} from 'react';
+import {LoaderCircle} from 'lucide-react';
+import {parseStream} from '../utils/parse';
+import project from '@/revideo/project';
+
+function Button({
+	children,
+	loading,
+	onClick,
+}: {
+	children: React.ReactNode;
+	loading: boolean;
+	onClick: () => void;
+}) {
+	return (
+		<button
+			className="text-sm flex items-center gap-x-2 rounded-md p-2 bg-gray-200 text-gray-700 hover:bg-gray-300"
+			onClick={() => onClick()}
+			disabled={loading}
+		>
+			{loading && <LoaderCircle className="animate-spin h-4 w-4 text-gray-700" />}
+			{children}
+		</button>
+	);
+}
+
+function RenderComponent({
+	stargazerTimes,
+	repoName,
+	repoImage,
+}: {
+	stargazerTimes: number[];
+	repoName: string;
+	repoImage: string | null | undefined;
+}) {
+	const [renderLoading, setRenderLoading] = useState(false);
+	const [progress, setProgress] = useState(0);
+	const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+
+	/**
+	 * Render the video.
+	 */
+	async function render() {
+		setRenderLoading(true);
+		const res = await fetch('/api/render', {
+			method: 'POST',
+			headers: {
+				// eslint-disable-next-line @typescript-eslint/naming-convention
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				variables: {
+					data: stargazerTimes.length ? stargazerTimes : undefined,
+					repoName: repoName || undefined,
+					repoImage: repoImage || undefined,
+				},
+				streamProgress: true,
+			}),
+		}).catch((e) => console.log(e));
+
+		if (!res) {
+			alert('Failed to render video.');
+			return;
+		}
+
+		const downloadUrl = await parseStream(res.body!.getReader(), (p) => setProgress(p));
+		setRenderLoading(false);
+		setDownloadUrl(downloadUrl);
+	}
+
+	return (
+		<div className="flex gap-x-4">
+			{/* Progress bar */}
+			<div className="text-sm flex-1 bg-gray-100 rounded-md overflow-hidden">
+				<div
+					className="text-gray-600 bg-gray-400 h-full flex items-center px-4 transition-all transition-200"
+					style={{
+						width: `${Math.round(progress * 100)}%`,
+					}}
+				>
+					{Math.round(progress * 100)}%
+				</div>
+			</div>
+			{downloadUrl ? (
+				<a
+					href={downloadUrl}
+					download
+					className="text-sm flex items-center gap-x-2 rounded-md p-2 bg-green-200 text-gray-700 hover:bg-gray-300"
+				>
+					Download video
+				</a>
+			) : (
+				<Button onClick={() => render()} loading={renderLoading}>
+					Render video
+				</Button>
+			)}
+		</div>
+	);
+}
+
+export default function Home() {
+	const [repoName, setRepoName] = useState<string>('');
+	const [repoImage, setRepoImage] = useState<string | null>();
+	const [stargazerTimes, setStargazerTimes] = useState<number[]>([]);
+
+	const [githubLoading, setGithubLoading] = useState(false);
+	const [needsKey, setNeedsKey] = useState(false);
+	const [key, setKey] = useState('');
+	const [error, setError] = useState<string | null>();
+
+	/**
+	 * Get information about the repository from Github.
+	 */
+	async function fetchInformation(repoName: `${string}/${string}`, key: string) {
+		setGithubLoading(true);
+		const response = await getGithubRepositoryInfo(repoName, key ?? undefined);
+		setGithubLoading(false);
+
+		if (response.status === 'rate-limit') {
+			setNeedsKey(true);
+			return;
+		}
+
+		if (response.status === 'error') {
+			setError('Failed to fetch repository information from Github.');
+			return;
+		}
+
+		setStargazerTimes(response.stargazerTimes);
+		setRepoImage(response.repoImage);
+	}
+
+	return (
+		<>
+			<div className="m-auto p-12 max-w-7xl flex flex-col gap-y-4">
+				<div>
+					<div className="text-sm text-gray-700 mb-2">Repository</div>
+					<div className="flex gap-x-4 text-sm">
+						<input
+							className="flex-1 rounded-md p-2 bg-gray-200 focus:outline-none placeholder:text-gray-400"
+							placeholder="redotvideo/revideo"
+							value={repoName}
+							onChange={(e) => setRepoName(e.target.value)}
+						/>
+						{!needsKey && (
+							<Button
+								loading={githubLoading}
+								onClick={() => fetchInformation(repoName as `${string}/${string}`, key)}
+							>
+								Fetch information
+							</Button>
+						)}
+					</div>
+				</div>
+				{needsKey && (
+					<div>
+						<div className="text-sm text-blue-600 mb-2">
+							You hit the Github API rate-limit. Please provide your own key. Requests to Github are
+							made directly and the key stays on your device.
+						</div>
+						<div className="flex gap-x-4 text-sm">
+							<input
+								className="flex-1 rounded-md p-2 bg-gray-200 focus:outline-none placeholder:text-gray-400"
+								placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+								value={key}
+								onChange={(e) => setKey(e.target.value)}
+							/>
+							<Button
+								loading={githubLoading}
+								onClick={() => fetchInformation(repoName as `${string}/${string}`, key)}
+							>
+								Fetch information
+							</Button>
+						</div>
+					</div>
+				)}
+				{error && <div className="text-sm text-red-600">{error}</div>}
+				<div>
+					<div className="rounded-lg overflow-hidden">
+						{/* You can find the scene code inside revideo/src/scenes/example.tsx */}
+						<Player
+							project={project}
+							controls={true}
+							variables={{
+								data: stargazerTimes.length > 0 ? stargazerTimes : undefined,
+								repoName: repoName ? repoName : undefined,
+								repoImage: repoImage ? repoImage : undefined,
+							}}
+						/>
+					</div>
+				</div>
+				<RenderComponent
+					stargazerTimes={stargazerTimes}
+					repoName={repoName}
+					repoImage={repoImage}
+				/>
+			</div>
+		</>
+	);
+}

package/examples/saas-template/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package/examples/saas-template/package.json

@@ -0,0 +1,40 @@
+{
+	"name": "next",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint",
+		"revideo:serve": "revideo serve --projectFile ./revideo/project.ts",
+		"revideo:editor": "revideo editor --projectFile ./revideo/project.ts"
+	},
+	"dependencies": {
+		"@radix-ui/react-navigation-menu": "^1.1.4",
+		"@revideo/2d": "^0.6.0",
+		"@revideo/core": "^0.6.0",
+		"@revideo/player-react": "^0.6.0",
+		"class-variance-authority": "^0.7.0",
+		"lucide-react": "^0.378.0",
+		"next": "^14.2.13",
+		"p-limit": "^3",
+		"react": "^18",
+		"react-dom": "^18",
+		"tailwind-merge": "^2.3.0",
+		"tailwindcss-animate": "^1.0.7"
+	},
+	"devDependencies": {
+		"@revideo/cli": "^0.6.0",
+		"@revideo/ui": "^0.6.0",
+		"@types/node": "^20",
+		"@types/react": "^18",
+		"@types/react-dom": "^18",
+		"autoprefixer": "^10.4.19",
+		"eslint": "^8",
+		"eslint-config-next": "14.2.3",
+		"postcss": "^8",
+		"tailwindcss": "^3.4.3",
+		"typescript": "^5"
+	}
+}

package/examples/saas-template/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

package/examples/saas-template/revideo/global.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

package/examples/saas-template/revideo/project.ts

@@ -0,0 +1,9 @@
+import {makeProject} from '@revideo/core';
+
+import './global.css';
+
+import example from './scene';
+
+export default makeProject({
+	scenes: [example],
+});

package/examples/saas-template/revideo/scene.tsx

@@ -0,0 +1,179 @@
+/** @jsxImportSource @revideo/2d/lib */
+import {Gradient, Img, Layout, Line, Rect, Spline, Txt, makeScene2D} from '@revideo/2d';
+import {all, createRef, useScene, Vector2, waitFor} from '@revideo/core';
+
+/**
+ * Some example data to use in the scene when no data is provided
+ */
+const exampleData = [
+	0, 105826000, 265664000, 265671000, 265684000, 265689000, 265694000, 335596000, 414108000,
+	416767000, 425249000, 674375000, 964912000, 1177339000, 1186686000, 1213498000, 1214781000,
+	1214895000, 1219921000, 1221668000, 1222281000, 1222410000, 1222433000, 1227527000, 1228300000,
+	1230497000, 1230501000, 1231234000, 1231239000, 1231314000, 1232727000, 1233520000, 1234669000,
+	1236349000, 1236806000, 1237795000, 1245092000, 1251533000, 1254263000, 1262147000, 1262899000,
+	1264370000, 1267519000, 1268870000, 1271198000, 1271847000, 1274347000, 1276515000, 1276671000,
+	1279966000, 1280551000, 1283338000, 1283777000, 1285088000, 1286336000, 1286728000, 1293071000,
+	1293863000, 1294963000, 1295005000, 1301398000, 1303551000, 1312541000, 1317615000, 1321096000,
+	1323718000, 1337789000, 1343521000, 1344711000, 1346543000, 1371003000, 1389862000, 1494428000,
+	1525657000, 1533978000, 1591597000, 1654009000, 1738062000, 1817754000, 1860276000, 1883450000,
+	1883998000, 1891635000, 1930667000, 2055652000, 2201181000, 2216214000, 2246708000, 2324529000,
+	2366960000, 2366996000, 2391904000, 2479357000, 2596772000, 2601046000, 2615944000, 2637502000,
+	2689660000, 2733368000, 2737046000, 2812890000, 2863564000, 2955232000, 2955857000, 2961163000,
+	2983003000, 2984020000, 2987437000, 2990281000, 2996230000, 3007072000, 3007175000, 3013062000,
+	3016417000, 3018616000, 3019154000, 3026357000, 3029804000, 3036897000, 3037202000, 3037298000,
+	3037737000, 3038639000, 3039016000, 3039322000, 3042145000, 3042529000, 3043490000, 3044558000,
+	3046472000, 3047534000, 3048199000, 3048524000, 3048862000, 3051935000, 3058895000, 3065009000,
+	3072790000, 3074109000, 3075041000, 3079153000, 3079875000, 3080083000, 3099026000, 3099874000,
+	3103039000, 3109664000, 3112885000, 3127743000, 3134934000, 3140075000, 3173641000, 3173788000,
+	3176205000, 3176720000, 3178996000, 3183882000, 3184287000, 3186716000, 3191153000, 3196320000,
+	3196620000, 3198638000, 3213076000, 3234269000, 3263068000, 3270668000, 3278896000, 3284646000,
+	3290556000, 3294331000, 3297742000, 3332896000, 3344044000, 3368767000, 3378844000, 3398863000,
+	3434188000, 3435264000, 3435696000, 3435803000, 3442071000, 3517995000, 3519849000, 3554474000,
+	3558289000, 3611948000, 3616675000, 3618144000, 3622775000, 3635577000, 3640600000, 3669592000,
+	3679346000, 3698749000, 3715355000, 3729047000, 3759434000, 3787838000, 3801028000, 3817911000,
+	3878742000, 3983973000, 4006119000, 4067980000, 4087451000, 4101992000, 4200703000, 4212009000,
+	4212143000, 4212882000, 4213748000, 4213977000, 4214180000, 4214445000, 4220193000, 4220422000,
+	4222468000, 4236874000, 4258899000, 4326288000, 4334389000, 4401276000, 4416803000, 4421444000,
+	4437462000, 4501703000, 4556531000, 4598409000, 4690540000, 4736772000, 4742561000, 4803793000,
+	4834054000, 4866127000, 4868886000, 4873958000, 4891455000, 4921352000, 4941837000, 4953890000,
+	4956018000, 4979428000, 4985123000, 5062420000, 5108308000, 5333539000, 5459835000, 5461002000,
+	5521826000, 5584695000, 5586217000, 5598497000, 5604962000, 5625413000, 5636146000, 5637453000,
+	5682023000, 5718405000, 5722303000, 5760543000, 5769209000, 5772790000, 5880569000, 6110458000,
+	6135651000, 6185575000, 6202790000, 6232205000, 6284650000, 6297771000, 6392835000, 6401789000,
+	6480914000, 6566872000, 6643031000, 6695443000, 6696088000, 6710689000, 6712966000, 6727715000,
+	6733098000, 6783253000, 6805478000, 6875821000, 6904033000, 6971558000, 6972735000,
+];
+
+const exampleRepoName = 'redotvideo/revideo';
+const exampleRepoImage = 'https://avatars.githubusercontent.com/u/133898679';
+
+export default makeScene2D('main', function* (view) {
+	// Get variables
+	const repoName = useScene().variables.get('repoName', exampleRepoName);
+	const repoImage = useScene().variables.get('repoImage', exampleRepoImage);
+	const data = useScene().variables.get('data', exampleData);
+
+	const max = Math.max(...data());
+	const videoLength = 5; // seconds
+	const totalValues = data().length;
+
+	// Black background
+	view.fill('#000000');
+
+	// Calculate coordinates for each timestamp
+	const linePoints = data().map((ms, i) => {
+		const x = (ms / max) * view.width();
+		const xShifted = x - view.width() / 2;
+
+		const y = ((-i / totalValues) * view.height()) / 2;
+		const yShifted = y + view.height() / 4;
+
+		return new Vector2(xShifted, yShifted);
+	});
+
+	// Coordinates of the bottom corners
+	const bottomCorners = [
+		new Vector2(view.width() / 2, view.height() / 2),
+		new Vector2(-view.width() / 2, view.height() / 2),
+	];
+
+	// Background gradient
+	const gradient = new Gradient({
+		type: 'linear',
+		from: [0, 0],
+		to: [0, view.height()],
+		stops: [
+			{offset: 0, color: '#000000'},
+			{offset: 1, color: 'green'},
+		],
+	});
+
+	// Refs, used to animate elements
+	const outerLayoutRef = createRef<Layout>();
+	const innerLayoutRef = createRef<Layout>();
+	const rectRef = createRef<Rect>();
+
+	// Add elements to the view
+	yield view.add(
+		<>
+			<>
+				<Line points={linePoints} lineWidth={30} stroke={'#3EAC45'} />
+				<Spline points={[...linePoints, ...bottomCorners]} fill={gradient} />
+				<Rect
+					ref={rectRef}
+					x={view.width() / 2}
+					y={0}
+					width={view.width() * 2}
+					height={view.height()}
+					fill={'#000000'}
+				/>
+			</>
+			<Layout
+				ref={outerLayoutRef}
+				layout
+				alignItems={'center'}
+				gap={40}
+				x={-870}
+				y={-400}
+				offset={[-1, 0]}
+			>
+				<Img
+					src={repoImage()}
+					width={100}
+					height={100}
+					stroke={'#555555'}
+					lineWidth={8}
+					strokeFirst={true}
+					radius={10}
+				/>
+				<Layout ref={innerLayoutRef} direction={'column'}>
+					<Txt
+						fontFamily={'Roboto'}
+						text={repoName()}
+						fill={'#ffffff'}
+						x={-520}
+						y={-395}
+						fontSize={50}
+						fontWeight={600}
+					/>
+				</Layout>
+			</Layout>
+		</>,
+	);
+
+	// Resize the rectangle to reveal the scene
+	yield* rectRef().width(0, videoLength);
+
+	// Make rectangle transparent and cover the scene again
+	rectRef().fill('#00000000');
+	rectRef().width(view.width() * 2);
+
+	// Cover the scene while the Layout block
+	// is centered
+	yield* all(
+		rectRef().fill('#000000', 2),
+		outerLayoutRef().x(0, 2),
+		outerLayoutRef().y(-50, 2),
+		outerLayoutRef().offset([0, 0], 2),
+	);
+
+	// Add text with the total number of stars
+	const starTextRef = createRef<Txt>();
+	innerLayoutRef().add(
+		<Txt
+			fontFamily={'Roboto'}
+			ref={starTextRef}
+			text={`${totalValues} stars`}
+			fill={'#000000'}
+			x={0}
+			y={0}
+			fontSize={40}
+			fontWeight={500}
+			marginBottom={-45}
+		/>,
+	);
+	yield* all(starTextRef().fill('#ffffff', 2), starTextRef().margin(0, 2));
+
+	// Wait for 2 seconds
+	yield* waitFor(2);
+});

package/examples/saas-template/tailwind.config.ts

@@ -0,0 +1,30 @@
+/* eslint-disable naming-convention */
+import type {Config} from 'tailwindcss';
+
+const config: Config = {
+	content: [
+		'./pages/**/*.{js,ts,jsx,tsx,mdx}',
+		'./components/**/*.{js,ts,jsx,tsx,mdx}',
+		'./app/**/*.{js,ts,jsx,tsx,mdx}',
+	],
+	theme: {
+		extend: {
+			colors: {
+				gray: {
+					50: '#FAFAFA',
+					100: '#F3F3F3',
+					200: '#E5E5E5',
+					300: '#C7C7C7',
+					400: '#ACACAC',
+					500: '#808080',
+					600: '#5F5F5F',
+					700: '#4E4E4E',
+					800: '#373737',
+					900: '#2A2A2A',
+					950: '#151515',
+				},
+			},
+		},
+	},
+};
+export default config;

package/examples/saas-template/tsconfig.json

@@ -0,0 +1,27 @@
+{
+	"compilerOptions": {
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"target": "es2015",
+		"jsx": "preserve",
+		"incremental": true,
+		"plugins": [
+			{
+				"name": "next"
+			}
+		],
+		"paths": {
+			"@/*": ["./*"]
+		}
+	},
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+	"exclude": ["node_modules"]
+}