@revideo/create 0.5.10-alpha.1094 → 0.5.10

package/examples/youtube-shorts/package.json

@@ -10,21 +10,21 @@
   },
   "dependencies": {
     "@deepgram/sdk": "^3.3.1",
-    "@revideo/2d": "0.5.3",
-    "@revideo/cli": "0.5.3",
-    "@revideo/core": "0.5.3",
-    "@revideo/ffmpeg": "0.5.3",
-    "@revideo/renderer": "0.5.3",
-    "@revideo/vite-plugin": "0.5.3",
+    "@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",
     "express": "^4.19.2",
     "openai": "^4.40.2",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@revideo/ui": "0.5.3",
+    "@revideo/ui": "0.5.10",
     "@types/uuid": "^9.0.8",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }
-}
+}

package/examples/youtube-shorts/src/get-assets.ts

@@ -0,0 +1,34 @@
+require('dotenv').config();
+
+import { getVideoScript, generateAudio, getWordTimestamps, dalleGenerate, getImagePromptFromScript } from './utils';
+import { v4 as uuidv4 } from 'uuid';
+import * as fs from 'fs';
+
+async function createAssets(topic: string, voiceName: string){
+    const jobId = uuidv4();
+
+    console.log("Generating assets...")
+    const script = await getVideoScript(topic);
+    console.log("script", script);
+
+    await generateAudio(script, voiceName, `./public/${jobId}-audio.wav`);
+    const words = await getWordTimestamps(`./public/${jobId}-audio.wav`);
+
+    console.log("Generating images...")
+    const imagePromises = Array.from({ length: 5 }).map(async (_, index) => {
+        const imagePrompt = await getImagePromptFromScript(script);
+        await dalleGenerate(imagePrompt, `./public/${jobId}-image-${index}.png`);
+        return `/${jobId}-image-${index}.png`;
+    });
+
+    const imageFileNames = await Promise.all(imagePromises);
+    const metadata = {
+      audioUrl: `${jobId}-audio.wav`,
+      images: imageFileNames,
+      words: words
+    };
+  
+    await fs.promises.writeFile(`./public/${jobId}-metadata.json`, JSON.stringify(metadata, null, 2));
+}
+
+createAssets("The moon landing", "Sarah")

package/examples/youtube-shorts/src/render.ts

@@ -1,43 +1,12 @@
-require('dotenv').config();
-
 import {renderVideo} from '@revideo/renderer';
 import metadata from './metadata.json';
-import { getVideoScript, generateAudio, getWordTimestamps, dalleGenerate, getImagePromptFromScript } from './utils';
-import { v4 as uuidv4 } from 'uuid';
-import * as fs from 'fs';
-
-async function createVideo(topic: string, voiceName: string){
-    const jobId = uuidv4();
-
-    console.log("Generating assets...")
-    const script = await getVideoScript(topic);
-    console.log("script", script);
-
-    await generateAudio(script, voiceName, `./public/${jobId}-audio.wav`);
-    const words = await getWordTimestamps(`./public/${jobId}-audio.wav`);
-
-    console.log("Generating images...")
-    const imagePromises = Array.from({ length: 5 }).map(async (_, index) => {
-        const imagePrompt = await getImagePromptFromScript(script);
-        await dalleGenerate(imagePrompt, `./public/${jobId}-image-${index}.png`);
-        return `/${jobId}-image-${index}.png`;
-    });
-
-    const imageFileNames = await Promise.all(imagePromises);
-    const metadata = {
-      audioUrl: `${jobId}-audio.wav`,
-      images: imageFileNames,
-      words: words
-    };
-  
-    await fs.promises.writeFile(`./public/${jobId}-metadata.json`, JSON.stringify(metadata, null, 2));
 
-    console.log("Assets generated! Rendering video...")
+async function render(){
     await renderVideo({
       projectFile: './src/project.ts',
-      variables: metadata
+      variables: metadata,
+      settings: {logProgress: true}
     });
-    console.log("Render finished");
 }
 
-createVideo("The moon landing", "Sarah");
+render();

package/examples/youtube-shorts/src/scenes/example.tsx

@@ -1,4 +1,4 @@
-import {Audio, Img, makeScene2D, Txt, View2D, Rect} from '@revideo/2d';
+import {Audio, Img, makeScene2D, Txt, Rect, Layout} from '@revideo/2d';
 import {all, createRef, waitFor, useScene, Reference, createSignal} from '@revideo/core';
 
 interface Word {
@@ -49,8 +49,19 @@ export default makeScene2D(function* (view) {
 
   const duration = words[words.length-1].end + 0.5;
 
+  const imageContainer = createRef<Layout>();
+  const textContainer = createRef<Layout>();
+
   yield view.add(
     <>
+      <Layout
+        size={"100%"}
+        ref={imageContainer}
+      />
+      <Layout
+        size={"100%"}
+        ref={textContainer}
+      />
       <Audio
         src={audioUrl}
         play={true}
@@ -64,19 +75,19 @@ export default makeScene2D(function* (view) {
   );
 
   yield* all(
-    displayImages(view, images, duration),
+    displayImages(imageContainer, images, duration),
     displayWords(
-      view,
+      textContainer,
       words,
       textSettings
     )
   )
 });
 
-function* displayImages(view: View2D, images: string[], totalDuration: number){
+function* displayImages(container: Reference<Layout>, images: string[], totalDuration: number){
   for(const img of images){
     const ref = createRef<Img>();
-    view.add(<Img 
+    container().add(<Img 
       src={img}
       size={["100%", "100%"]}
       ref={ref}
@@ -87,7 +98,7 @@ function* displayImages(view: View2D, images: string[], totalDuration: number){
   }
 }
 
-function* displayWords(view: View2D, words: Word[], settings: captionSettings){
+function* displayWords(container: Reference<Layout>, words: Word[], settings: captionSettings){
   let waitBefore = words[0].start;
 
   for (let i = 0; i < words.length; i += settings.numSimultaneousWords) {
@@ -101,7 +112,7 @@ function* displayWords(view: View2D, words: Word[], settings: captionSettings){
 
     if(settings.stream){
       let nextWordStart = 0;
-      yield view.add(<Txt width={`${settings.textBoxWidthInPercent}%`} textWrap={true} zIndex={2} textAlign={settings.textAlign} ref={textRef}/>);
+      yield container().add(<Txt width={`${settings.textBoxWidthInPercent}%`} textWrap={true} zIndex={2} textAlign={settings.textAlign} ref={textRef}/>);
 
       for(let j = 0; j < currentBatch.length; j++){
         const word = currentBatch[j];
@@ -130,7 +141,7 @@ function* displayWords(view: View2D, words: Word[], settings: captionSettings){
           </Txt>
         );
         textRef().add(<Txt fontSize={settings.fontSize}>{optionalSpace}</Txt>);
-        view.add(<Rect fill={settings.currentWordBackgroundColor} zIndex={1} size={wordRef().size} position={wordRef().position} radius={10} padding={10} ref={backgroundRef} />);
+        container().add(<Rect fill={settings.currentWordBackgroundColor} zIndex={1} size={wordRef().size} position={wordRef().position} radius={10} padding={10} ref={backgroundRef} />);
         yield* all(waitFor(word.end-word.start), opacitySignal(1, Math.min((word.end-word.start)*0.5, 0.1)));
         wordRef().fill(settings.textColor);
         backgroundRef().remove();
@@ -139,7 +150,7 @@ function* displayWords(view: View2D, words: Word[], settings: captionSettings){
       textRef().remove();
 
     } else {
-      yield view.add(<Txt width={`${settings.textBoxWidthInPercent}%`} textAlign={settings.textAlign} ref={textRef} textWrap={true} zIndex={2}/>);
+      yield container().add(<Txt width={`${settings.textBoxWidthInPercent}%`} textAlign={settings.textAlign} ref={textRef} textWrap={true} zIndex={2}/>);
 
       const wordRefs = [];
       const opacitySignal = createSignal(settings.fadeInAnimation ? 0.5 : 1);
@@ -177,7 +188,7 @@ function* displayWords(view: View2D, words: Word[], settings: captionSettings){
 
       yield* all(
         opacitySignal(1, Math.min(0.1, (currentBatch[0].end-currentBatch[0].start)*0.5)),
-        highlightCurrentWord(view, currentBatch, wordRefs, settings.currentWordColor, settings.currentWordBackgroundColor),
+        highlightCurrentWord(container, currentBatch, wordRefs, settings.currentWordColor, settings.currentWordBackgroundColor),
         waitFor(currentBatch[currentBatch.length-1].end - currentBatch[0].start + waitAfter), 
       );
       textRef().remove();
@@ -186,7 +197,7 @@ function* displayWords(view: View2D, words: Word[], settings: captionSettings){
   }
 }
 
-function* highlightCurrentWord(view: View2D, currentBatch: Word[], wordRefs: Reference<Txt>[], wordColor: string, backgroundColor: string){
+function* highlightCurrentWord(container: Reference<Layout>, currentBatch: Word[], wordRefs: Reference<Txt>[], wordColor: string, backgroundColor: string){
   let nextWordStart = 0;
 
   for(let i = 0; i < currentBatch.length; i++){
@@ -194,14 +205,16 @@ function* highlightCurrentWord(view: View2D, currentBatch: Word[], wordRefs: Ref
     const word = currentBatch[i];
     const originalColor = wordRefs[i]().fill();
     nextWordStart = currentBatch[i+1]?.start - word.end || 0;
+    wordRefs[i]().text(wordRefs[i]().text());
     wordRefs[i]().fill(wordColor);
 
     const backgroundRef = createRef<Rect>();
     if(backgroundColor){
-      view.add(<Rect fill={backgroundColor} zIndex={1} size={wordRefs[i]().size} position={wordRefs[i]().position} radius={10} padding={10} ref={backgroundRef} />);
+      container().add(<Rect fill={backgroundColor} zIndex={1} size={wordRefs[i]().size} position={wordRefs[i]().position} radius={10} padding={10} ref={backgroundRef} />);
     }
 
     yield* waitFor(word.end-word.start);
+    wordRefs[i]().text(wordRefs[i]().text());
     wordRefs[i]().fill(originalColor);
 
     if(backgroundColor){

package/index.js

@@ -47,6 +47,13 @@ const templates = [
     description: 'A collection of templates for marketing videos.',
     startcommands: 'readme',
   },
+  {
+    value: 'minimal-drag-drop',
+    title: 'Drag and Drop Example',
+    description:
+      'A minimal example of an editor with drag-and-drop editing functionality.',
+    startcommands: 'next',
+  },
   {
     value: 'parallelized-aws-lambda',
     title: 'Parallelized AWS Lambda',
@@ -219,7 +226,7 @@ async function run() {
   if (selectedTemplate.startcommands === 'default') {
     console.log(installCommand);
     console.log(`  ${boldManager} start`);
-  } else if (selectedTemplate.startCommands === 'next') {
+  } else if (selectedTemplate.startcommands === 'next') {
     console.log(kleur.blue('\n√ Start the NextJS server:'));
     console.log(`  ${kleur.bold('cd')} next`);
     console.log(installCommand);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revideo/create",
-  "version": "0.5.10-alpha.1094+c5b6e235",
+  "version": "0.5.10",
   "description": "Quickly scaffold revideo projects",
   "main": "index.js",
   "author": "revideo",
@@ -20,17 +20,17 @@
     "url": "https://github.com/havenhq/revideo.git"
   },
   "devDependencies": {
-    "@revideo/2d": "^0.5.10-alpha.1094+c5b6e235",
-    "@revideo/core": "^0.5.10-alpha.1094+c5b6e235",
-    "@revideo/ffmpeg": "^0.5.10-alpha.1094+c5b6e235",
-    "@revideo/renderer": "^0.5.10-alpha.1094+c5b6e235",
-    "@revideo/ui": "^0.5.10-alpha.1094+c5b6e235",
-    "@revideo/vite-plugin": "^0.5.10-alpha.1094+c5b6e235"
+    "@revideo/2d": "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"
   },
   "dependencies": {
-    "@revideo/telemetry": "^0.5.10-alpha.1094+c5b6e235",
+    "@revideo/telemetry": "0.5.10",
     "minimist": "^1.2.8",
     "prompts": "^2.4.2"
   },
-  "gitHead": "c5b6e2350e4f757b7e8f86da9110c7fad737181a"
+  "gitHead": "56d48446d0f2dd2146bf594516b880b38a6e36a9"
 }