@revideo/create 0.5.8-beta.1082 → 0.5.9-alpha.1086

package/examples/rive-explanation-video/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "rive-explanation-docs",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "serve": "vite",
+    "build": "tsc && vite build",
+    "render": "tsc && node dist/render.js"
+  },
+  "dependencies": {
+    "@lezer/javascript": "^1.4.17",
+    "@revideo/2d": "^0.5.2",
+    "@revideo/core": "^0.5.2",
+    "@revideo/ffmpeg": "^0.5.2",
+    "@revideo/renderer": "^0.5.2",
+    "@revideo/vite-plugin": "^0.5.2"
+  },
+  "devDependencies": {
+    "@revideo/cli": "^0.5.2",
+    "@revideo/ui": "^0.5.2",
+    "typescript": "5.5.4",
+    "vite": "^4.5"
+  }
+}

package/examples/rive-explanation-video/src/global.css

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

package/examples/rive-explanation-video/src/project.meta

@@ -0,0 +1,31 @@
+{
+  "version": 0,
+  "shared": {
+    "background": "rgb(255,255,255)",
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1920,
+      "y": 1080
+    },
+    "audioOffset": 0
+  },
+  "preview": {
+    "fps": 30,
+    "resolutionScale": 1
+  },
+  "rendering": {
+    "fps": 30,
+    "resolutionScale": 1,
+    "colorSpace": "srgb",
+    "exporter": {
+      "name": "@revideo/core/wasm",
+      "options": {
+        "fastStart": true,
+        "includeAudio": true
+      }
+    }
+  }
+}

package/examples/rive-explanation-video/src/project.ts

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

package/examples/rive-explanation-video/src/render.ts

@@ -0,0 +1,15 @@
+import {renderVideo} from '@revideo/renderer';
+
+async function render() {
+  console.log('Rendering video...');
+
+  // This is the main function that renders the video
+  const file = await renderVideo({
+    projectFile: './src/project.ts',
+    settings: {logProgress: true},
+  });
+
+  console.log(`Rendered video to ${file}`);
+}
+
+render();

package/examples/rive-explanation-video/src/revideo.d.ts

@@ -0,0 +1 @@
+/// <reference types="@revideo/core/project" />

package/examples/rive-explanation-video/src/scenes/example.meta

@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 4079423384
+}

package/examples/rive-explanation-video/src/scenes/example.tsx

@@ -0,0 +1,218 @@
+import { waitFor, createRef, all, Reference, chain } from '@revideo/core';
+import {
+  Img, 
+  makeScene2D,
+  Rive,
+  Txt,
+  Layout,
+  LezerHighlighter, Code, word, lines, Rect,
+  View2D
+} from '@revideo/2d';
+import {parser} from '@lezer/javascript';
+import {tags} from '@lezer/highlight';
+import {HighlightStyle} from '@codemirror/language';
+
+const MyStyle = HighlightStyle.define([
+    {
+      tag: tags.comment,
+      color: '#8E908C',
+    },
+    {
+      tag: [tags.variableName, tags.self, tags.propertyName, tags.attributeName, tags.regexp],
+      color: '#C82829',
+    },
+    {
+      tag: [tags.number, tags.bool, tags.null],
+      color: '#F5871F',
+    },
+    {
+      tag: [tags.className, tags.typeName, tags.definition(tags.typeName)],
+      color: '#C99E00',
+    },
+    {
+      tag: [tags.string, tags.special(tags.brace)],
+      color: '#718C00',
+    },
+    {
+      tag: tags.operator,
+      color: '#3E999F',
+    },
+    {
+      tag: [tags.definition(tags.propertyName), tags.function(tags.variableName)],
+      color: '#4271AE',
+    },
+    {
+      tag: tags.keyword,
+      color: '#8959A8',
+    },
+    {
+      tag: tags.derefOperator,
+      color: '#4D4D4C',
+    },
+    {
+      tag: tags.bracket,
+      color: "grey"
+    },
+    {
+      tag: tags.separator,
+      color: "grey"
+    },
+    {
+      tag: tags.punctuation,
+      color: "grey"
+    },
+    {
+      tag: tags.typeOperator,
+      color: "grey"
+    }
+  ]);
+
+Code.defaultHighlighter = new LezerHighlighter(
+  parser.configure({
+    dialect: 'jsx ts',
+  }),
+  MyStyle
+);
+  
+
+export default makeScene2D(function* (view) {
+
+    const textRef = createRef<Txt>();
+    view.add(
+      <Txt fontFamily={"Lexend"} fontSize={100} fontWeight={600} ref={textRef}/>
+    );
+  
+    yield* all(textRef().text("Rive Animations in Revideo", 1.25))
+    yield* all(
+        textRef().scale(0.75, 0.75),
+        textRef().position.y(-400, 0.75)
+    )
+    yield* waitFor(0.25);
+
+    const codeRef= createRef<Code>();
+    const videoBoxRef = createRef<Layout>();
+    view.add(<Layout opacity={0} position={[550, 100]} size={[600, 600]} ref={videoBoxRef} />);
+    view.add(
+      <Code
+      ref={codeRef}
+      textAlign={"left"}
+      fontSize={35}
+      x={-400}
+      y={100}
+      opacity={0}
+      fontFamily={'JetBrains Mono, monospace'}
+      code={
+  `export default makeScene2D(function* (view){
+    yield view.add(
+        <Img 
+          src={"/sf.png"} 
+          size={["100%", "100%"]} 
+        />
+    );
+
+});
+  `
+  }/>);
+
+  videoBoxRef().add(
+    <Img 
+      src={"https://revideo-example-assets.s3.amazonaws.com/sf.png"} 
+      size={[videoBoxRef().width(), videoBoxRef().height()]} 
+    />
+  );
+
+  yield* all(
+    codeRef().opacity(1, 0.75),
+    videoBoxRef().opacity(1, 0.75)
+  );
+  yield* waitFor(0.5);
+
+  const riveRef = createRef<Rive>();
+  videoBoxRef().add(
+      <Rive
+        src={"https://revideo-example-assets.s3.amazonaws.com/emoji.riv"}
+        animationId={1}
+        size={[600, 600]} 
+        opacity={0}
+        ref={riveRef}
+      />
+  );
+  yield* all(codeRef().code.insert([8, 0],
+    `\n   yield view.add(
+        <Rive
+          src={"/emoji.riv"}
+          animationId={1}
+          size={[600, 600]} 
+        />
+    );\n`, 1),
+    riveRef().opacity(1, 1)
+  );
+
+  yield* waitFor(1);
+
+  yield* codeRef().selection(lines(11, 13), 1),
+  yield replaceRive(videoBoxRef, riveRef)
+  yield* all(
+    codeRef().code.replace(word(11, 17, 5), "dog", 2),
+    codeRef().code.replace(word(13, 17, 3), "900", 2),
+  );
+
+  yield* codeRef().selection(lines(0, 17), 1);
+
+  yield* waitFor(1);
+  yield* all(
+    codeRef().opacity(0, 1),
+    videoBoxRef().opacity(0, 1),
+    textRef().opacity(0, 1)
+  );
+
+  yield* waitFor(0.5);
+  yield* logoAnimation(view);
+});
+
+function* replaceRive(box: Reference<Layout>, rive: Reference<Rive>){
+  yield* rive().opacity(0, 1);
+  rive().remove();
+
+  const riveRef = createRef<Rive>();
+  box().add(
+      <Rive
+        src={"https://revideo-example-assets.s3.amazonaws.com/dog.riv"}
+        size={[1000, 600]} 
+        opacity={0}
+        animationId={1}
+        ref={riveRef}
+      />
+  );
+
+  yield* riveRef().opacity(1, 1);
+  yield* waitFor(5);
+}
+
+function* logoAnimation(view: View2D){
+  const block1 = createRef<Rect>()
+  const block2 = createRef<Rect>()
+  const block3 = createRef<Rect>()
+  const blocks = createRef<Layout>();
+  const logoText = createRef<Txt>();
+  view.add(
+    <>
+    <Layout ref={blocks} x={-600}>
+      <Rect fill={"#151515"} height={60} y={-80} x={-620} width={180} radius={9.3} ref={block1} />
+      <Rect fill={"#151515"} height={60} width={180} x={-540} radius={9.3} ref={block2} />
+      <Rect fill={"#151515"} height={60} width={180} x={-460} y={80} radius={9.3} ref={block3} />
+      <Txt ref={logoText} fontFamily={"Lexend"} x={53+757.5} y={20} fontSize={300} letterSpacing={-4} fontWeight={700} text={""}/>
+    </Layout>
+    </>
+  );
+  
+  yield* all(
+    block1().position.x(-80, 0.5),
+    chain(waitFor(0.1), block2().position.x(0, 0.4)),
+    chain(waitFor(0.2), block3().position.x(80, 0.3)),
+  )
+
+  yield* logoText().text("revideo", 1);
+
+  yield* waitFor(1);
+}

package/examples/rive-explanation-video/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@revideo/2d/tsconfig.project.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "dist",
+    "module": "CommonJS"
+  }
+}

package/examples/rive-explanation-video/vite.config.ts

@@ -0,0 +1,8 @@
+import {defineConfig} from 'vite';
+import motionCanvas from '@revideo/vite-plugin';
+
+export default defineConfig({
+  plugins: [
+    motionCanvas(),
+  ],
+});

package/examples/saas-template/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"semi": true,
+	"singleQuote": true,
+	"quoteProps": "as-needed",
+	"trailingComma": "all",
+	"bracketSpacing": false,
+	"printWidth": 100
+}

package/examples/saas-template/README.md

@@ -0,0 +1,28 @@
+# Revideo Next.js Template
+
+This is the [Revideo](https://github.com/redotvideo/revideo) NextJS starter
+project bootstrapped with `npm init @revideo@latest`.
+
+## Getting Started
+
+First, install the dependencies both in the next/ and the revideo/ directories:
+
+```bash
+(cd next && npm install) &&
+(cd revideo && npm install)
+```
+
+Then, serve the Revideo project using the CLI:
+
+```bash
+(cd revideo && npx revideo serve)
+```
+
+Now you can start your NextJS app using the following command:
+
+```bash
+(cd next && npm run dev)
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result. Happy developing!

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

@@ -0,0 +1,113 @@
+'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: {
+				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/next/app/api/render/route.ts

@@ -0,0 +1,22 @@
+const RENDER_URL = 'http://localhost:4000/render';
+
+async function getResponse(body: string) {
+	return await fetch(RENDER_URL, {
+		method: 'POST',
+		headers: {
+			'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/next/app/globals.css

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

package/examples/saas-template/next/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>
+	);
+}