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

package/examples/saas-template/utils/parse.ts

@@ -0,0 +1,35 @@
+export async function parseStream(
+	reader: ReadableStreamDefaultReader<Uint8Array>,
+	updateProgress: (progress: number) => void,
+) {
+	while (true) {
+		const {done, value} = await reader.read();
+
+		const decoded = new TextDecoder('utf-8').decode(value);
+		const split = decoded.split('\n');
+
+		if (done) {
+			break;
+		}
+
+		const event = split[0].slice(6).trim();
+		const data = split[1].slice(6).trim();
+
+		if (event === 'progress') {
+			const parsed = JSON.parse(data);
+			updateProgress(parsed.progress);
+		}
+
+		if (event === 'completed') {
+			const parsed = JSON.parse(data);
+			return parsed.downloadLink as string;
+		}
+
+		if (event === 'error') {
+			console.error(data);
+			break;
+		}
+	}
+
+	return '';
+}

package/examples/stitching-videos/README.md

@@ -0,0 +1,7 @@
+# Stitching Together Videos
+
+This is a very simple example demonstrating how you can stitch together multiple videos into one. It also includes a transition animation between the videos.
+
+
+https://github.com/redotvideo/revideo-examples/assets/122226645/6ec23514-e699-4a17-a9a5-02e7e14b207e
+

package/examples/stitching-videos/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "stitching-videos",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "serve": "vite",
+    "build": "tsc && vite build",
+    "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"
+  },
+  "devDependencies": {
+    "@revideo/ui": "0.5.10",
+    "typescript": "5.5.4",
+    "vite": "^4.5"
+  }
+}

package/examples/stitching-videos/src/project.meta

@@ -0,0 +1,28 @@
+{
+  "version": 0,
+  "shared": {
+    "background": "rgb(0,0,0)",
+    "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": {}
+    }
+  }
+}

package/examples/stitching-videos/src/project.ts

@@ -0,0 +1,20 @@
+import {makeProject} from '@revideo/core';
+import example from './scenes/example?scene';
+
+export default makeProject({
+  scenes: [example],
+  variables: {
+    videos: [
+      {
+        src: "https://revideo-example-assets.s3.amazonaws.com/beach-3.mp4",
+        start: 1,
+        duration: 6
+      },
+      {
+        src: "https://revideo-example-assets.s3.amazonaws.com/beach-2.mp4",
+        start: 2,
+        duration: 10
+      }
+    ]
+  }
+});

package/examples/stitching-videos/src/render.ts

@@ -0,0 +1,27 @@
+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',
+    variables: {
+      videos: [
+        {
+          src: "https://revideo-example-assets.s3.amazonaws.com/beach-3.mp4",
+          start: 1,
+          duration: 6
+        },
+        {
+          src: "https://revideo-example-assets.s3.amazonaws.com/beach-2.mp4",
+          start: 2,
+          duration: 10
+        }
+      ]},
+      settings: {logProgress: true}
+    });
+
+  console.log(`Rendered video to ${file}`);
+}
+
+render();

package/examples/stitching-videos/src/revideo.d.ts

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

package/examples/stitching-videos/src/scenes/example.tsx

@@ -0,0 +1,30 @@
+import { makeScene2D, Video } from '@revideo/2d';
+import {createRef, waitFor, useScene} from '@revideo/core';
+
+interface VideoObject {
+  src: string;
+  start: number;
+  duration: number;
+}
+
+export default makeScene2D(function* (view) {
+  const videos: VideoObject[] = useScene().variables.get('videos', [])();
+
+  for(const vid of videos){
+    const videoRef = createRef<Video>();
+    yield view.add(<Video src={vid.src} time={vid.start} play={true} opacity={0} ref={videoRef} />)
+    
+    if(view.width() / view.height() > videoRef().width() / videoRef().height()){
+      videoRef().width("100%");
+    } else {
+      videoRef().height("100%");
+    }
+
+    // this is a fade-out / fade-in transition - the fade-out and in take 0.3 seconds each; just set the opacity of the video tag to 1 and only use yield* waitFor(vid.duration);
+    yield* videoRef().opacity(1,0.3);
+    yield* waitFor(vid.duration-0.6);
+    yield* videoRef().opacity(0,0.3);
+    videoRef().pause();
+    videoRef().remove();
+  }
+});

package/examples/stitching-videos/tsconfig.json

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

package/examples/stitching-videos/vite.config.ts

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

package/examples/three-js-example/README.md

@@ -0,0 +1,8 @@
+# 3D Animations with Three JS
+
+This example project demonstrates how you can build render 3d animations with [three.js](https://threejs.org/) Revideo.
+
+The animation itself in this project is not very complex - its main purpose is to demonstrate how you can use three.js together with Revideo and make use of concepts such as [tweening](https://docs.re.video/tweening/) in 3D.
+
+https://github.com/user-attachments/assets/41af8137-e16a-43b3-a3e1-01b9cc9b700b
+