@revideo/create 0.5.10-alpha.1087 → 0.5.10

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

@@ -10,18 +10,18 @@
   },
   "dependencies": {
     "@deepgram/sdk": "^3.3.0",
-    "@revideo/2d": "0.4.5",
-    "@revideo/cli": "^0.4.6",
-    "@revideo/core": "0.4.5",
-    "@revideo/ffmpeg": "0.4.5",
-    "@revideo/renderer": "0.4.5",
-    "@revideo/vite-plugin": "0.4.5",
+    "@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"
   },
   "devDependencies": {
-    "@revideo/ui": "0.4.5",
+    "@revideo/ui": "0.5.10",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }
-}
+}

package/examples/avatar-with-background/src/scenes/example.tsx

@@ -17,6 +17,7 @@ export default makeScene2D(function* (view) {
         play={true}
         width={'100%'}
         ref={avatarRef}
+        decoder={"slow"} // we need to use the slow decoder to support transparency
       />
     </>,
   );

package/examples/default/package.json

@@ -9,16 +9,16 @@
     "render": "tsc && node dist/render.js"
   },
   "dependencies": {
-    "@revideo/core": "^0.5.9",
-    "@revideo/2d": "^0.5.9",
-    "@revideo/renderer": "^0.5.9",
-    "@revideo/vite-plugin": "^0.5.9",
-    "@revideo/ffmpeg": "^0.5.9"
+    "@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"
   },
   "devDependencies": {
-    "@revideo/ui": "^0.5.9",
-    "@revideo/cli": "^0.5.9",
+    "@revideo/ui": "0.5.10",
+    "@revideo/cli": "0.5.10",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }
-}
+}

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

@@ -9,15 +9,15 @@
     "render": "tsc && node dist/render.js"
   },
   "dependencies": {
-    "@revideo/core": "^0.4.5",
-    "@revideo/2d": "^0.4.5",
-    "@revideo/renderer": "^0.4.5",
-    "@revideo/vite-plugin": "^0.4.5",
-    "@revideo/ffmpeg": "^0.4.5"
+    "@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"
   },
   "devDependencies": {
-    "@revideo/ui": "^0.4.5",
-    "@revideo/cli": "^0.4.5",
+    "@revideo/ui": "0.5.10",
+    "@revideo/cli": "0.5.10",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }

package/examples/github-stars-celebration/src/scenes/example.tsx

@@ -29,13 +29,13 @@ export default makeScene2D(function* (view) {
 
   yield* rocketRef().position([1000, -600], 2, easeInCubic);
 
-  view.add(
+  yield view.add(
     <Txt fontFamily={"Lexend"} fill="white" ref={txtRef} textAlign={"center"} fontSize={60}></Txt>
   )
 
   yield* txtRef().text("Thank you for 1,000 Github stars!", 2);
 
-  view.add(
+  yield view.add(
     <Img
       width={'1%'}
       ref={logoRef}

package/examples/google-cloud-run-parallelized/render-orchestrator/package.json

@@ -1,22 +1,22 @@
 {
-    "name": "google-cloud-run",
-    "private": true,
-    "version": "0.0.0",
-    "scripts": {
-        "start": "tsc && node dist/index.js"
-    },
-    "dependencies": {
-        "@google-cloud/storage": "^7.11.0",
-        "@revideo/2d": "0.4.6",
-        "@revideo/core": "0.4.6",
-        "@revideo/ffmpeg": "0.4.6",
-        "express": "^4.19.2",
-        "uuid": "^9.0.1"
-    },
-    "devDependencies": {
-        "@types/express": "^4.17.21",
-        "@types/uuid": "^9.0.8",
-        "typescript": "^5.4.5",
-        "vite": "^4.5"
-    }
-}
+  "name": "google-cloud-run",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "tsc && node dist/index.js"
+  },
+  "dependencies": {
+    "@google-cloud/storage": "^7.11.0",
+    "@revideo/2d": "0.5.10",
+    "@revideo/core": "0.5.10",
+    "@revideo/ffmpeg": "0.5.10",
+    "express": "^4.19.2",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/uuid": "^9.0.8",
+    "typescript": "^5.4.5",
+    "vite": "^4.5"
+  }
+}

package/examples/google-cloud-run-parallelized/render-worker/package.json

@@ -12,13 +12,13 @@
     "@ffprobe-installer/ffprobe": "^2.1.2",
     "@google-cloud/functions-framework": "^3.4.0",
     "@google-cloud/storage": "^7.11.0",
-    "@revideo/2d": "0.4.6",
-    "@revideo/cli": "^0.4.6",
-    "@revideo/core": "0.4.6",
-    "@revideo/ffmpeg": "0.4.6",
-    "@revideo/renderer": "0.4.6",
-    "@revideo/ui": "0.4.6",
-    "@revideo/vite-plugin": "0.4.6",
+    "@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/ui": "0.5.10",
+    "@revideo/vite-plugin": "0.5.10",
     "@types/express": "^4.17.21",
     "@types/uuid": "^9.0.8",
     "express": "^4.19.2",
@@ -27,4 +27,4 @@
     "uuid": "^9.0.1",
     "vite": "^4.5"
   }
-}
+}

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

@@ -9,15 +9,15 @@
     "render": "tsc && node dist/render.js"
   },
   "dependencies": {
-    "@revideo/core": "0.4.5",
-    "@revideo/2d": "0.4.5",
-    "@revideo/renderer": "0.4.5",
-    "@revideo/vite-plugin": "0.4.5",
-    "@revideo/ffmpeg": "0.4.5"
+    "@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"
   },
   "devDependencies": {
-    "@revideo/ui": "0.4.5",
-    "@revideo/cli": "^0.4.5",
+    "@revideo/ui": "0.5.10",
+    "@revideo/cli": "0.5.10",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }

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

@@ -9,15 +9,15 @@
     "render": "tsc && node dist/render.js"
   },
   "dependencies": {
-    "@revideo/core": "0.4.5",
-    "@revideo/2d": "0.4.5",
-    "@revideo/renderer": "0.4.5",
-    "@revideo/vite-plugin": "0.4.5",
-    "@revideo/ffmpeg": "0.4.5"
+    "@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"
   },
   "devDependencies": {
-    "@revideo/ui": "0.4.5",
-    "@revideo/cli": "^0.4.5",
+    "@revideo/ui": "0.5.10",
+    "@revideo/cli": "0.5.10",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }

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

@@ -0,0 +1,27 @@
+# Minimal Drag-and-Drop Example
+
+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.
+
+## 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/minimal-drag-drop/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/minimal-drag-drop/next/app/globals.css

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

package/examples/minimal-drag-drop/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>
+	);
+}

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

@@ -0,0 +1,277 @@
+'use client';
+
+import {Player} from '@revideo/player-react';
+import {useState, useEffect} 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';
+
+
+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>
+	);
+}
+
+export default function Home() {
+	const [nodes, setNodes] = useState<Map<string, any>>(new Map([
+		['txt', { text: "Text 1", x: 0, y: 0 }]
+	  ]));
+	const [draggingNode, setDraggingNode] = useState<Shape | null>(null);
+	const [dragOffset, setDragOffset] = useState<{ x: number, y: number } | null>(null);
+	const [playerRect, setPlayerRect] = useState<DOMRect | null>(null);
+	const [corePlayer, setCorePlayer] = useState<CorePlayer | null>(null);
+	const [transformMatrix, setTransformMatrix] = useState<DOMMatrix | null>(null);
+
+	const [renderLoading, setRenderLoading] = useState(false);
+	const [progress, setProgress] = useState(0);
+	const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+
+	const [playing, setPlaying] = useState<boolean>(false);
+	const [dimensions, setDimensions] = useState<{x: number, y: number}>({ x: 1920, y: 1080 });
+	const [selectedNode, setSelectedNode] = useState<{
+		key: string;
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+	  } | null>(null);
+	
+	useEffect(() => {
+	  if (playerRect) {
+		setTransformMatrix(createTransformationMatrix(playerRect, dimensions));
+	  }
+	}, [playerRect, dimensions]);
+  
+	const handlePlayerReady = (player: CorePlayer) => {
+		setCorePlayer(player);
+	};
+
+	const addTextNode = () => {
+		setNodes(prevNodes => {
+		  const newNodes = new Map(prevNodes);
+		  const newKey = `txt_${newNodes.size+1}`;
+		  newNodes.set(newKey, { text: `Text ${newNodes.size+1}`, x: 0, y: 0 });
+		  return newNodes;
+		});
+	  };
+
+	const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+		if (playerRect && transformMatrix) {
+			const { x: playerX, y: playerY } = transformPoint(
+			event.clientX,
+			event.clientY,
+			transformMatrix
+			);
+
+			let hitNode = (corePlayer?.playback.currentScene as Scene2D).getNodeByPosition(playerX, playerY) as Shape;
+			while (hitNode) {
+				// We want to avoid getting TxtLeaf nodes, but only their parent Txt nodes
+				if (nodes.has(hitNode.key)) {
+					setDraggingNode(hitNode);
+					const node = nodes.get(hitNode.key);
+					setDragOffset({ x: playerX - node.x, y: playerY - node.y });
+
+					const position = hitNode.position();
+					const { x, y } = transformPoint(position.x+dimensions.x/2, position.y+dimensions.y/2, transformMatrix.inverse());
+
+					setSelectedNode({
+					key: hitNode.key,
+					x: x,
+					y: y,
+					width: selectedNode?.width || hitNode.width() / transformMatrix.a,
+					height: selectedNode?.height || hitNode.height() / transformMatrix.d
+					});
+					return;
+				}
+			hitNode = hitNode.parent() as Shape;
+			}
+			setSelectedNode(null);
+		};
+	}
+
+	const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+		if (draggingNode && playerRect && transformMatrix) {
+			const { x: playerX, y: playerY } = transformPoint(
+				event.clientX,
+				event.clientY,
+				transformMatrix
+			);
+		
+			setNodes(prevNodes => {
+				const newNodes = new Map(prevNodes);
+				const node = newNodes.get(draggingNode.key);
+				if (node && dragOffset) {
+					node.x = playerX - dragOffset.x;
+					node.y = playerY - dragOffset.y;
+
+					const { x, y } = transformPoint(node.x+dimensions.x/2, node.y+dimensions.y/2, transformMatrix.inverse());
+					setSelectedNode({
+					key: draggingNode.key,
+					x: x,
+					y: y,
+					width: selectedNode?.width || draggingNode.width() / transformMatrix.a,
+					height: selectedNode?.height || draggingNode.height() / transformMatrix.d,
+					});
+
+				}
+				return newNodes;
+			});
+		}
+	};  
+	  
+	function createTransformationMatrix(
+		playerRect: DOMRect,
+		dimensions: { x: number; y: number }
+	  ): DOMMatrix {
+		const scaleX = dimensions.x / playerRect.width;
+		const scaleY = dimensions.y / playerRect.height;
+	  
+		const matrix = new DOMMatrix();
+		matrix.scaleSelf(scaleX, scaleY);
+		matrix.translateSelf(-playerRect.left, -playerRect.top);
+
+		return matrix;
+	  }
+	  
+	function transformPoint(
+		x: number,
+		y: number,
+		matrix: DOMMatrix
+	  ): { x: number; y: number } {
+		const point = new DOMPoint(x, y);
+		const transformedPoint = point.matrixTransform(matrix);
+		return { x: transformedPoint.x, y: transformedPoint.y };
+	  }
+
+	/**
+	 * Render the video.
+	 */
+	async function render() {
+		setRenderLoading(true);
+		const res = await fetch('/api/render', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				variables: {
+					nodes: Object.fromEntries(nodes)
+				},
+				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="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%]'>
+						<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 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
+								loading={false}
+								onClick={() => {
+									setPlaying(!playing);
+									setSelectedNode(null);
+								}}
+							>
+								{playing ? "Pause" : "Play"}
+						</Button>
+
+						<Button onClick={addTextNode} loading={false}>
+							Add Text
+						</Button>
+
+						<Button onClick={() => render()} loading={renderLoading}>
+							Render video
+						</Button>
+						</>
+					)}
+				</div>
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/examples/minimal-drag-drop/next/next.config.mjs

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