@revideo/create 0.5.11-beta.1106 → 0.10.1-alpha.1114

package/examples/avatar-with-background/package.json

@@ -1,26 +1,19 @@
 {
-  "name": "avatar-with-background",
+  "name": "revideo-app",
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "start": "vite",
-    "serve": "vite",
-    "build": "tsc && vite build",
+    "start": "revideo editor --projectFile ./src/project.tsx",
     "render": "tsc && node dist/render.js"
   },
   "dependencies": {
-    "@deepgram/sdk": "^3.3.0",
-    "@revideo/2d": "0.5.10",
-    "@revideo/cli": "0.5.10",
-    "@revideo/core": "0.5.10",
-    "@revideo/ffmpeg": "0.5.10",
-    "@revideo/renderer": "0.5.10",
-    "@revideo/vite-plugin": "0.5.10",
-    "dotenv": "^16.4.5",
-    "openai": "^4.39.0"
+    "@revideo/core": "0.10.1",
+    "@revideo/2d": "0.10.1",
+    "@revideo/renderer": "0.10.1"
   },
   "devDependencies": {
-    "@revideo/ui": "0.5.10",
+    "@revideo/ui": "0.10.1",
+    "@revideo/cli": "0.10.1",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }

package/examples/avatar-with-background/src/{scenes/example.tsx → project.tsx}

@@ -1,7 +1,10 @@
-import { Img, Video, makeScene2D } from '@revideo/2d';
-import { waitFor, createRef, useScene } from '@revideo/core'
+import {Img, makeScene2D, Video} from '@revideo/2d';
+import {useScene, createRef, waitFor, makeProject, Vector2} from '@revideo/core';
 
-export default makeScene2D(function* (view) {
+/**
+ * The Revideo scene
+ */
+const scene = makeScene2D('scene', function* (view) {
   const avatarRef = createRef<Video>();
   const backgroundRef = createRef<Img>();
 
@@ -26,3 +29,16 @@ export default makeScene2D(function* (view) {
 
   yield* waitFor(avatarRef().getDuration());
 });
+
+/**
+ * The final revideo project
+ */
+export default makeProject({
+  scenes: [scene],
+  settings: {
+    // Example settings:
+    shared: {
+      size: {x: 1080, y: 1080},
+    },
+  },
+});

package/examples/avatar-with-background/src/render.ts

@@ -3,12 +3,13 @@ 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 }
+    projectFile: './src/project.tsx',
+    settings: {logProgress: true},
   });
 
   console.log(`Rendered video to ${file}`);
 }
 
-render();
+render();

package/examples/avatar-with-background/tsconfig.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "noEmit": false,
     "outDir": "dist",
-    "module": "CommonJS"
+    "module": "CommonJS",
+    "skipLibCheck": true
   }
 }

package/examples/default/package.json

@@ -7,14 +7,14 @@
     "render": "tsc && node dist/render.js"
   },
   "dependencies": {
-    "@revideo/core": "0.6.0",
-    "@revideo/2d": "0.6.0",
-    "@revideo/renderer": "0.6.0"
+    "@revideo/core": "0.10.1",
+    "@revideo/2d": "0.10.1",
+    "@revideo/renderer": "0.10.1"
   },
   "devDependencies": {
-    "@revideo/ui": "0.6.0",
-    "@revideo/cli": "0.6.0",
+    "@revideo/ui": "0.10.1",
+    "@revideo/cli": "0.10.1",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }
-}
+}

package/examples/default/src/project.tsx

@@ -1,4 +1,4 @@
-import {makeProject, Vector2} from '@revideo/core';
+import {makeProject} from '@revideo/core';
 
 import {Audio, Img, makeScene2D, Video} from '@revideo/2d';
 import {all, chain, createRef, waitFor} from '@revideo/core';
@@ -50,7 +50,7 @@ export default makeProject({
   settings: {
     // Example settings:
     shared: {
-      size: new Vector2(1920, 1080),
+      size: {x: 1920, y: 1080},
     },
   },
 });

package/examples/github-stars-celebration/package.json

@@ -1,23 +1,19 @@
 {
-  "name": "github-stars-celebration",
+  "name": "revideo-app",
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "start": "vite",
-    "serve": "vite",
-    "build": "tsc && vite build",
+    "start": "revideo editor --projectFile ./src/project.tsx",
     "render": "tsc && node dist/render.js"
   },
   "dependencies": {
-    "@revideo/core": "0.5.10",
-    "@revideo/2d": "0.5.10",
-    "@revideo/renderer": "0.5.10",
-    "@revideo/vite-plugin": "0.5.10",
-    "@revideo/ffmpeg": "0.5.10"
+    "@revideo/core": "0.10.1",
+    "@revideo/2d": "0.10.1",
+    "@revideo/renderer": "0.10.1"
   },
   "devDependencies": {
-    "@revideo/ui": "0.5.10",
-    "@revideo/cli": "0.5.10",
+    "@revideo/ui": "0.10.1",
+    "@revideo/cli": "0.10.1",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }

package/examples/github-stars-celebration/src/{scenes/example.tsx → project.tsx}

@@ -1,12 +1,19 @@
-import {Audio, Img, Txt, makeScene2D} from '@revideo/2d';
-import {all, useScene, createRef, waitFor, easeInExpo, easeInCubic} from '@revideo/core';
+import {makeProject} from '@revideo/core';
 
-export default makeScene2D(function* (view) {
+import {Img, makeScene2D, Txt} from '@revideo/2d';
+import {all, useScene, createRef, easeInCubic} from '@revideo/core';
+import './global.css';
+
+/**
+ * The Revideo scene
+ */
+const scene = makeScene2D('scene', function* (view) {
   const rocketRef = createRef<Img>();
   const earthRef = createRef<Img>();
   const txtRef = createRef<Txt>();
   const logoRef = createRef<Img>();
 
+  view.fill("#000000")
 
   yield view.add(
     <>
@@ -46,6 +53,19 @@ export default makeScene2D(function* (view) {
     />,
   );
 
-
   yield* all(txtRef().position.y(150, 2), logoRef().width("30%", 2));
 });
+
+
+/**
+ * The final revideo project
+ */
+export default makeProject({
+  scenes: [scene],
+  settings: {
+    // Example settings:
+    shared: {
+      size: {x: 1920, y: 1080},
+    },
+  },
+});

package/examples/github-stars-celebration/src/render.ts

@@ -5,7 +5,7 @@ async function render() {
 
   // This is the main function that renders the video
   const file = await renderVideo({
-    projectFile: './src/project.ts',
+    projectFile: './src/project.tsx',
     settings: {logProgress: true},
   });
 

package/examples/github-stars-celebration/tsconfig.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "noEmit": false,
     "outDir": "dist",
-    "module": "CommonJS"
+    "module": "CommonJS",
+    "skipLibCheck": true
   }
 }

package/examples/marketing-templates/marketing-template/README.md

@@ -0,0 +1,19 @@
+# Revideo Minimal Starter Template
+
+This is a minimal Revideo starter project. It can be bootstrapped using
+`npm init @revideo@latest` and selecting the minimal template.
+
+It includes a simple scene with a background video, music and the Revideo logo.
+You can get started by editing the `project.tsx` file in the `src` folder.
+
+You can run the Revideo editor using `npm start` and render the final video
+using `npm run render`.
+
+If you want to see what's possible with Revideo, check out the other templates
+in the [Revideo Examples repository](https://github.com/redotvideo/examples), or
+the [Revideo documentation](https://docs.re.video).
+
+If you want to include your Revideo project in a website, you can use the
+Next.js template. It can be found in the Revideo Examples repository or
+bootstrapped using `npm init @revideo@latest` and selecting the Next.js
+template.

package/examples/marketing-templates/marketing-template/package.json

@@ -1,23 +1,19 @@
 {
-  "name": "veed-template",
+  "name": "revideo-app",
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "start": "vite",
-    "serve": "vite",
-    "build": "tsc && vite build",
+    "start": "revideo editor --projectFile ./src/project.tsx",
     "render": "tsc && node dist/render.js"
   },
   "dependencies": {
-    "@revideo/core": "0.5.10",
-    "@revideo/2d": "0.5.10",
-    "@revideo/renderer": "0.5.10",
-    "@revideo/vite-plugin": "0.5.10",
-    "@revideo/ffmpeg": "0.5.10"
+    "@revideo/core": "0.10.1",
+    "@revideo/2d": "0.10.1",
+    "@revideo/renderer": "0.10.1"
   },
   "devDependencies": {
-    "@revideo/ui": "0.5.10",
-    "@revideo/cli": "0.5.10",
+    "@revideo/ui": "0.10.1",
+    "@revideo/cli": "0.10.1",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }

package/examples/marketing-templates/marketing-template/src/{scenes/example.tsx → project.tsx}

@@ -1,7 +1,12 @@
-import {Grid, Img, Rect, Txt, View2D, makeScene2D} from '@revideo/2d';
-import {all, chain, useScene, createRef, waitFor} from '@revideo/core';
+import {makeProject} from '@revideo/core';
 
-export default makeScene2D(function* (view) {
+import {Grid, Rect, Img, makeScene2D, View2D, Txt} from '@revideo/2d';
+import {all, useScene, createRef, waitFor} from '@revideo/core';
+
+/**
+ * The Revideo scene
+ */
+const scene = makeScene2D('scene', function* (view) {
   const logoRef = createRef<Img>();
   const grid = createRef<Grid>();
   const headingRef = createRef<Txt>()
@@ -49,6 +54,7 @@ export default makeScene2D(function* (view) {
   yield* waitFor(1);
 });
 
+
 function* addItems(view: View2D, texts: string[]){
   let yPos = 0;
   for(let i=0; i< texts.length; i++){
@@ -65,3 +71,17 @@ function* addItems(view: View2D, texts: string[]){
   }
 
 }
+
+
+/**
+ * The final revideo project
+ */
+export default makeProject({
+  scenes: [scene],
+  settings: {
+    // Example settings:
+    shared: {
+      size: {x: 1920, y: 1080},
+    },
+  },
+});

package/examples/marketing-templates/marketing-template/src/render.ts

@@ -5,7 +5,7 @@ async function render() {
 
   // This is the main function that renders the video
   const file = await renderVideo({
-    projectFile: "./src/project.ts",
+    projectFile: './src/project.tsx',
     settings: {logProgress: true},
   });
 

package/examples/marketing-templates/marketing-template/tsconfig.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "noEmit": false,
     "outDir": "dist",
-    "module": "CommonJS"
+    "module": "CommonJS",
+    "skipLibCheck": true
   }
 }

package/examples/marketing-templates/multiple-videos-in-one/README.md

@@ -0,0 +1,19 @@
+# Revideo Minimal Starter Template
+
+This is a minimal Revideo starter project. It can be bootstrapped using
+`npm init @revideo@latest` and selecting the minimal template.
+
+It includes a simple scene with a background video, music and the Revideo logo.
+You can get started by editing the `project.tsx` file in the `src` folder.
+
+You can run the Revideo editor using `npm start` and render the final video
+using `npm run render`.
+
+If you want to see what's possible with Revideo, check out the other templates
+in the [Revideo Examples repository](https://github.com/redotvideo/examples), or
+the [Revideo documentation](https://docs.re.video).
+
+If you want to include your Revideo project in a website, you can use the
+Next.js template. It can be found in the Revideo Examples repository or
+bootstrapped using `npm init @revideo@latest` and selecting the Next.js
+template.

package/examples/marketing-templates/multiple-videos-in-one/package.json

@@ -1,23 +1,19 @@
 {
-  "name": "veed-template",
+  "name": "revideo-app",
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "start": "vite",
-    "serve": "vite",
-    "build": "tsc && vite build",
+    "start": "revideo editor --projectFile ./src/project.tsx",
     "render": "tsc && node dist/render.js"
   },
   "dependencies": {
-    "@revideo/core": "0.5.10",
-    "@revideo/2d": "0.5.10",
-    "@revideo/renderer": "0.5.10",
-    "@revideo/vite-plugin": "0.5.10",
-    "@revideo/ffmpeg": "0.5.10"
+    "@revideo/core": "0.10.1",
+    "@revideo/2d": "0.10.1",
+    "@revideo/renderer": "0.10.1"
   },
   "devDependencies": {
-    "@revideo/ui": "0.5.10",
-    "@revideo/cli": "0.5.10",
+    "@revideo/ui": "0.10.1",
+    "@revideo/cli": "0.10.1",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }

package/examples/marketing-templates/multiple-videos-in-one/src/{scenes/example.tsx → project.tsx}

@@ -1,7 +1,12 @@
-import {Grid, Img, Rect, Txt, View2D, makeScene2D} from '@revideo/2d';
-import {all, chain, useScene, createRef, waitFor, Reference} from '@revideo/core';
+import {makeProject, Vector2} from '@revideo/core';
 
-export default makeScene2D(function* (view) {
+import {Txt, Rect, View2D, Grid, makeScene2D} from '@revideo/2d';
+import {all, useScene, Reference, createRef, waitFor} from '@revideo/core';
+
+/**
+ * The Revideo scene
+ */
+const scene = makeScene2D('scene', function* (view) {
 
 
   const backgroundRef = createRef<Rect>();
@@ -120,3 +125,16 @@ function* addItems(background: Reference<Rect>, backgroundColor: string, texts:
   }
 
 }
+
+/**
+ * The final revideo project
+ */
+export default makeProject({
+  scenes: [scene],
+  settings: {
+    // Example settings:
+    shared: {
+      size: new Vector2(1920, 1080),
+    },
+  },
+});

package/examples/marketing-templates/multiple-videos-in-one/src/render.ts

@@ -5,7 +5,7 @@ async function render() {
 
   // This is the main function that renders the video
   const file = await renderVideo({
-    projectFile: './src/project.ts',
+    projectFile: './src/project.tsx',
     settings: {logProgress: true},
   });
 

package/examples/marketing-templates/multiple-videos-in-one/tsconfig.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "noEmit": false,
     "outDir": "dist",
-    "module": "CommonJS"
+    "module": "CommonJS",
+    "skipLibCheck": true
   }
 }

package/examples/minimal-drag-drop/README.md

@@ -1,29 +1,25 @@
-# Minimal Drag-and-Drop Example
+# Revideo Next.js Template
 
-This is an adapted version of the [Revideo](https://github.com/redotvideo/revideo) [NextJS SaaS template](https://github.com/redotvideo/examples/saas-template), demonstrating how you can build drag-and-drop editing functionality with Revideo.
-
-https://github.com/user-attachments/assets/347cea86-a849-4938-9143-892134bc3276
+This is a [Revideo](https://github.com/redotvideo/revideo) NextJS project that implements basic drag-and-drop functionality.
 
 ## Getting Started
 
-First, install the dependencies both in the next/ and the revideo/ directories:
+First, install the dependencies:
 
 ```bash
-(cd next && npm install) &&
-(cd revideo && npm install)
+npm install
 ```
 
-Then, serve the Revideo project using the CLI:
-
-```bash
-(cd revideo && npx revideo serve)
-```
+This project comes with the following commands:
 
-Now you can start your NextJS app using the following command:
+- `npm run dev` - Start the Next.js development server
+- `npm run build` - Build the Next.js project
+- `npm run start` - Start the Next.js production server
+- `npm run revideo:serve` - Start the Revideo render api (required for the render button on the Next.js page to work)
+- `npm run revideo:editor` - Start the Revideo editor, which you can use to inspect and preview your Revideo code
 
-```bash
-(cd next && npm run dev)
-```
+## Building with Revideo
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the
-result. Happy developing!
+If you want to see what's possible with Revideo, check out the other templates
+in the [Revideo Examples repository](https://github.com/redotvideo/examples), or
+the [Revideo documentation](https://docs.re.video).

package/examples/minimal-drag-drop/{next/app → app}/page.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import {Player} from '@revideo/player-react';
-import {useState, useEffect} from 'react';
+import {useState, useEffect, useRef} from 'react';
 import {LoaderCircle} from 'lucide-react';
 import { parseStream } from '../utils/parse';
 import {Player as CorePlayer} from '@revideo/core';
 import {Scene2D, Shape} from '@revideo/2d';
+import project from '@/revideo/project';
 
 
 function Button({
@@ -53,7 +54,10 @@ export default function Home() {
 		height: number;
 	  } | null>(null);
 	
+	  const playerContainerRef = useRef<HTMLDivElement>(null);
+	
 	useEffect(() => {
+		console.log("changing", "playerrect", "dimensions", playerRect, dimensions);
 	  if (playerRect) {
 		setTransformMatrix(createTransformationMatrix(playerRect, dimensions));
 	  }
@@ -73,6 +77,9 @@ export default function Home() {
 	  };
 
 	const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+		console.log("hiiii")
+		console.log("playerrect", playerRect);
+		console.log("transformmatrix", transformMatrix);
 		if (playerRect && transformMatrix) {
 			const { x: playerX, y: playerY } = transformPoint(
 			event.clientX,
@@ -80,10 +87,16 @@ export default function Home() {
 			transformMatrix
 			);
 
+			console.log("AHHH")
+
+			console.log("pos", playerX, playerY);
+
 			let hitNode = (corePlayer?.playback.currentScene as Scene2D).getNodeByPosition(playerX, playerY) as Shape;
 			while (hitNode) {
+				console.log("joo");
 				// We want to avoid getting TxtLeaf nodes, but only their parent Txt nodes
 				if (nodes.has(hitNode.key)) {
+					console.log("jaaa", hitNode.key);
 					setDraggingNode(hitNode);
 					const node = nodes.get(hitNode.key);
 					setDragOffset({ x: playerX - node.x, y: playerY - node.y });
@@ -190,45 +203,44 @@ export default function Home() {
 
 	return (
 		<>
-			<div className="m-auto p-12 max-w-6xl flex flex-col gap-y-4">
-				<div 
-					className="rounded-lg overflow-hidden w-[100%] py-20 bg-gray-100 flex items-center justify-center"
-					onPointerDown={handlePointerDown}
-					onPointerMove={handlePointerMove}
-					onPointerUp={() => {
-						setDraggingNode(null);
-						setDragOffset(null);
+		  <div className="m-auto p-12 max-w-6xl flex flex-col gap-y-4">
+			<div 
+			  className="rounded-lg overflow-hidden w-[100%] py-20 bg-gray-100 flex items-center justify-center"
+			  onPointerDown={handlePointerDown}
+			  onPointerMove={handlePointerMove}
+			  onPointerUp={() => {
+				setDraggingNode(null);
+				setDragOffset(null);
+			  }}
+			>
+			  <div className='w-[80%] h-[80%]' ref={playerContainerRef}>
+				<Player
+				  project={project}
+				  controls={false}
+				  playing={playing}
+				  width={dimensions.x}
+				  height={dimensions.y}
+				  variables={{
+					nodes: Object.fromEntries(nodes),
+				  }}
+				  onPlayerReady={handlePlayerReady}
+				  onPlayerResize={(rect: DOMRect) => {
+					setPlayerRect(rect);
+				  }}
+				/>
+				{(selectedNode && playerRect) && (
+				  <div
+					className="absolute border-2 border-[#5bbad5] pointer-events-none"
+					style={{
+					  left: `${selectedNode.x-selectedNode.width/2}px`,
+					  top: `${selectedNode.y-selectedNode.height/2}px`,
+					  width: `${selectedNode.width}px`,
+					  height: `${selectedNode.height}px`,
 					}}
-					>
-					<div className='w-[80%] h-[80%]'>
-						<Player
-						src="http://localhost:4000/player/"
-						controls={false}
-						playing={playing}
-						width={dimensions.x}
-						height={dimensions.y}
-						variables={{
-							nodes: Object.fromEntries(nodes),
-						}}
-						onPlayerReady={handlePlayerReady}
-						onPlayerResize={(rect: DOMRect) => {
-							setPlayerRect(rect);
-						  }}
-						/>
-						{(selectedNode && playerRect) && (
-							<div
-							className="absolute border-2 border-[#5bbad5] pointer-events-none"
-							style={{
-								left: `${selectedNode.x-selectedNode.width/2}px`,
-								top: `${selectedNode.y-selectedNode.height/2}px`,
-								width: `${selectedNode.width}px`,
-								height: `${selectedNode.height}px`,
-							}}
-							/>
-						)}
-
-					</div>
-				</div>
+				  />
+				)}
+			  </div>
+			</div>
 				<div className="flex gap-x-4">
 					{/* Progress bar */}
 					<div className="text-sm flex-1 bg-gray-100 rounded-md overflow-hidden">

package/examples/minimal-drag-drop/{next/next-env.d.ts → next-env.d.ts}

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.