@revideo/create 0.5.11-beta.1106 → 0.10.0

package/examples/minimal-drag-drop/{next/package.json → package.json}

@@ -6,15 +6,18 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "revideo:serve": "revideo serve --projectFile ./revideo/project.ts",
+    "revideo:editor": "revideo editor --projectFile ./revideo/project.ts"
   },
   "dependencies": {
     "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@revideo/player-react": "0.5.10",
-    "@revideo/2d": "0.5.10",
+    "@revideo/2d": "0.10.0",
+    "@revideo/core": "0.10.0",
+    "@revideo/player-react": "0.10.0",
     "class-variance-authority": "^0.7.0",
     "lucide-react": "^0.378.0",
-    "next": "14.2.3",
+    "next": "^14.2.13",
     "p-limit": "^3",
     "react": "^18",
     "react-dom": "^18",
@@ -22,6 +25,8 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@revideo/cli": "0.10.0",
+    "@revideo/ui": "0.10.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

package/examples/minimal-drag-drop/revideo/project.tsx

@@ -0,0 +1,54 @@
+/** @jsxImportSource @revideo/2d/lib */
+
+import {
+    createRef,
+    Reference,
+	  makeProject,
+    useScene,
+  	waitFor,
+} from '@revideo/core';
+import {Video, Txt, makeScene2D} from '@revideo/2d';
+
+import './global.css';
+
+const scene = makeScene2D("scene", function* (view) {
+  const nodesObj = useScene().variables.get("nodes", {})() as Record<string, any>;
+  const nodes = new Map(Object.entries(nodesObj));
+
+  yield view.add(
+    <Video
+      src="https://revideo-example-assets.s3.amazonaws.com/stars.mp4"
+      size={"100%"}
+      key={'data-video'}
+      play={true}
+    />
+  );
+
+  const refs: Array<Reference<Txt>> = [];
+  if (nodes.size > 0) {
+    for (const [key, node] of nodes) {
+      const ref = createRef<Txt>();
+      yield view.add(
+        <Txt
+          key={key}
+          text={node.text}
+          fontSize={100}
+          fontWeight={800}
+          fontFamily={"Roboto"}
+          fill={"white"}
+          x={() => node.x}
+          y={() => node.y}
+          ref={ref}
+        />
+      )
+      refs.push(ref);
+    }
+  }
+
+  yield* waitFor(5);
+});
+
+
+export default makeProject({
+	scenes: [scene],
+});

package/examples/parallelized-aws-lambda/Dockerfile

@@ -10,8 +10,6 @@
 
    ENV ROLLUP_CACHE=/tmp/rollup_cache
 
-   RUN npm run build
-
    ENV FFMPEG_PATH=/var/task/node_modules/@ffmpeg-installer/linux-x64/ffmpeg
 
    ENV HOME=/tmp

package/examples/parallelized-aws-lambda/README.md

@@ -18,129 +18,357 @@ The handler that gets executed when the lambda function is invoked can be found
 
 ## Getting Started
 
-To deploy the example project to AWS Lambda, clone this repository and make sure that you have the AWS CLI and Docker installed. Then, follow these steps: 
+Here's how you can set up your example project on AWS Lambda:
 
-### Create a public AWS bucket
+### Assign Permissions
 
-First, create a bucket:
+We will first create users and roles to obtain the neccessary permissions for creating, managing and running lambda functions:
 
+#### 1. Create role policy
+
+- Go to [AWS account IAM Policies section](https://console.aws.amazon.com/iamv2/home?#/policies). Now click on **"Create Policy"** and then click on **"JSON"**
+- Paste the following JSON into the Policy field:
+```json
+{
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Sid": "0",
+      "Effect": "Allow",
+      "Action": [
+        "s3:ListAllMyBuckets"
+      ],
+      "Resource": [
+        "*"
+      ]
+    },
+    {
+      "Sid": "1",
+      "Effect": "Allow",
+      "Action": [
+        "s3:CreateBucket",
+        "s3:ListBucket",
+        "s3:PutBucketAcl",
+        "s3:GetObject",
+        "s3:DeleteObject",
+        "s3:PutObjectAcl",
+        "s3:PutObject",
+        "s3:GetBucketLocation"
+      ],
+      "Resource": [
+        "arn:aws:s3:::revideo-*"
+      ]
+    },
+    {
+      "Sid": "2",
+      "Effect": "Allow",
+      "Action": [
+        "lambda:InvokeFunction"
+      ],
+      "Resource": [
+        "arn:aws:lambda:*:*:function:revideo-*"
+      ]
+    },
+    {
+      "Sid": "3",
+      "Effect": "Allow",
+      "Action": [
+        "logs:CreateLogGroup"
+      ],
+      "Resource": [
+        "arn:aws:logs:*:*:log-group:/aws/lambda-insights"
+      ]
+    },
+    {
+      "Sid": "4",
+      "Effect": "Allow",
+      "Action": [
+        "logs:CreateLogStream",
+        "logs:PutLogEvents"
+      ],
+      "Resource": [
+        "arn:aws:logs:*:*:log-group:/aws/lambda/revideo-*",
+        "arn:aws:logs:*:*:log-group:/aws/lambda-insights:*"
+      ]
+    },
+    {
+        "Sid": "CreateLambdaLogGroup",
+        "Effect": "Allow",
+        "Action": [
+            "logs:CreateLogGroup"
+        ],
+        "Resource": [
+            "arn:aws:logs:*:*:log-group:/aws/lambda/revideo-*"
+        ]
+    },
+    {
+        "Sid": "ECRAccess",
+        "Effect": "Allow",
+        "Action": [
+            "ecr:GetAuthorizationToken",
+            "ecr:BatchCheckLayerAvailability",
+            "ecr:GetDownloadUrlForLayer",
+            "ecr:BatchGetImage",
+            "ecr:InitiateLayerUpload",
+            "ecr:GetRepositoryPolicy",
+            "ecr:SetRepositoryPolicy"
+        ],
+        "Resource": "*"
+    }
+  ]
+}
 ```
-aws s3api create-bucket --bucket your-bucket-name --region your-region
+- Click next. On the tags page, you don't need to fill in anything. Click next again.
+- Give the policy **exactly** the name `revideo-lambda-policy` in the "Policy Name" field. No other changes are needed.
+
+
+#### 2. Create a role
+
+- Go to [AWS account IAM Roles section](https://console.aws.amazon.com/iamv2/home#/roles). Now click "Create role", and under "Use Cases", select "Lambda". Now click next.
+- Under "Permissions policies", filter for `revideo-lambda-policy` and click the checkbox to assign this policy. Click next.
+- In the final step, name the role `revideo-lambda-role` **exactly**. Don't change anything else.
+- Click "Create role" to confirm. Note down the arn of the role as you will need it later.
+
+#### 3. Create a user
+
+- Go to [AWS account IAM Users section](https://console.aws.amazon.com/iamv2/home#/users). Now click **"Add users"** and enter a username for your user, such as `revideo-user`.
+- **Don't check** the "Enable console access" option. You don't need it.
+- Click "Next", and click "Next" again on the next page. You should now be at the Review and Create" step.
+- Click "Create user".
+
+#### 4. Create an access key for the user
+
+- Go to [AWS account IAM Users section](https://console.aws.amazon.com/iamv2/home#/users)
+- Click on the name of the user that was created in step 3 (`revideo-user`).
+- Navigate to the "Security Credentials" tab, and scroll down to the "Access Keys" section.
+- Click the "Create access key" button.
+- Select "Application running on an AWS compute service".
+- Ignore warnings that might appear and check the "I understand the recommendations..." checkbox.
+- Click "Next".
+- Click "Create access key".
+
+Note down your access key id and secret access key as you will need them later.
+
+#### 5. Add permissions to your user
+
+- Go to [AWS account IAM Users section](https://console.aws.amazon.com/iamv2/home#/users)
+- Select the user you just created.
+- Click "Add inline policy" under the "Add Permissions" dropdown in the "Permissions policies" panel.
+- Click the tab "JSON".
+- Paste the following policy into the text field:
+```json
+{
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Sid": "HandleQuotas",
+      "Effect": "Allow",
+      "Action": [
+        "servicequotas:GetServiceQuota",
+        "servicequotas:GetAWSDefaultServiceQuota",
+        "servicequotas:RequestServiceQuotaIncrease",
+        "servicequotas:ListRequestedServiceQuotaChangeHistoryByQuota"
+      ],
+      "Resource": [
+        "*"
+      ]
+    },
+    {
+      "Sid": "PermissionValidation",
+      "Effect": "Allow",
+      "Action": [
+        "iam:SimulatePrincipalPolicy"
+      ],
+      "Resource": [
+        "*"
+      ]
+    },
+    {
+      "Sid": "LambdaInvokation",
+      "Effect": "Allow",
+      "Action": [
+        "iam:PassRole"
+      ],
+      "Resource": [
+        "arn:aws:iam::*:role/revideo-lambda-role"
+      ]
+    },
+    {
+      "Sid": "Storage",
+      "Effect": "Allow",
+      "Action": [
+        "s3:GetObject",
+        "s3:DeleteObject",
+        "s3:PutObjectAcl",
+        "s3:PutObject",
+        "s3:CreateBucket",
+        "s3:ListBucket",
+        "s3:GetBucketLocation",
+        "s3:PutBucketAcl",
+        "s3:DeleteBucket",
+        "s3:PutBucketOwnershipControls",
+        "s3:PutBucketPublicAccessBlock",
+        "s3:PutLifecycleConfiguration"
+      ],
+      "Resource": [
+        "arn:aws:s3:::revideo-*"
+      ]
+    },
+    {
+      "Sid": "BucketListing",
+      "Effect": "Allow",
+      "Action": [
+        "s3:ListAllMyBuckets"
+      ],
+      "Resource": [
+        "*"
+      ]
+    },
+    {
+      "Sid": "FunctionListing",
+      "Effect": "Allow",
+      "Action": [
+        "lambda:ListFunctions",
+        "lambda:GetFunction"
+      ],
+      "Resource": [
+        "*"
+      ]
+    },
+    {
+      "Sid": "FunctionManagement",
+      "Effect": "Allow",
+      "Action": [
+        "lambda:InvokeAsync",
+        "lambda:InvokeFunction",
+        "lambda:CreateFunction",
+        "lambda:UpdateFunctionCode",
+        "lambda:DeleteFunction",
+        "lambda:PutFunctionEventInvokeConfig",
+        "lambda:PutRuntimeManagementConfig",
+        "lambda:TagResource"
+      ],
+      "Resource": [
+        "arn:aws:lambda:*:*:function:revideo-*"
+      ]
+    },
+    {
+      "Sid": "LogsRetention",
+      "Effect": "Allow",
+      "Action": [
+        "logs:CreateLogGroup",
+        "logs:PutRetentionPolicy"
+      ],
+      "Resource": [
+        "arn:aws:logs:*:*:log-group:/aws/lambda/revideo-*"
+      ]
+    },
+    {
+        "Sid": "ECRPermissions",
+        "Effect": "Allow",
+		"Action": [
+				"ecr:GetAuthorizationToken",
+				"ecr:BatchCheckLayerAvailability",
+				"ecr:GetDownloadUrlForLayer",
+				"ecr:GetRepositoryPolicy",
+				"ecr:DescribeRepositories",
+				"ecr:ListImages",
+				"ecr:DescribeImages",
+				"ecr:BatchGetImage",
+				"ecr:InitiateLayerUpload",
+				"ecr:UploadLayerPart",
+				"ecr:CompleteLayerUpload",
+				"ecr:PutImage",
+				"ecr:SetRepositoryPolicy"
+		],
+        "Resource": "*"
+    }
+  ]
+}
 ```
 
-Now apply a bucket policy that makes the bucket public and lets your user write to it:
+- Click "Review policy".
+- Give the policy a name. For example `revideo-user-policy`, but it can be anything.
+- Click "Create policy" to confirm.
+
+### Deploy your Lambda Function
+
+We assume that you've cloned or donwloaded the parallelized lambda example and are now in the root directory of the project.
+
+We will now set up the AWS resources you need to deploy your project. To do so, first make sure that the AWS CLI is operated by the user we just granted the neccessary permissions by setting the credentials from bullet point 4 of the previous section:
 
 ```
-aws s3api put-bucket-policy --bucket your-bucket-name --policy file://policy.json
+export AWS_ACCESS_KEY_ID=<your-access-key-id>
+export AWS_SECRET_ACCESS_KEY=<your-secret-access-key>
+export AWS_DEFAULT_REGION=<your-aws-region>
 ```
 
-Here, `policy.json` refers to a file that contains the configuration below - note that `<your-user-arn>` should be replaced with the ARN of your user:
+#### Create A Bucket
+
+First, create a bucket to store your renders as well as the partial renders that get merged:
+
+- Head to the [S3 Dashboard](https://eu-central-1.console.aws.amazon.com/s3) and make sure that you're in the region you want your bucket to be in.
+- Click "Create Bucket".
+- Give the bucket a name that starts with "revideo-", untick "Block all Public Access" and acknowledge the warning by ticking its box
+- Confirm by clicking "Create Bucket"
+- Click onto your Bucket and head to the tab "Permissions"
+
+Now paste the following into the "Bucket Policy" field:
 
 ```json
 {
     "Version": "2012-10-17",
     "Statement": [
         {
-            "Sid": "AddPerm",
+            "Sid": "PublicReadGetObject",
             "Effect": "Allow",
             "Principal": "*",
             "Action": "s3:GetObject",
-            "Resource": "arn:aws:s3:::your-bucket-name/*"
+            "Resource": "arn:aws:s3:::<your-bucket-name>/*"
         },
-                {
+        {
             "Sid": "AllowUserToWriteObjects",
             "Effect": "Allow",
             "Principal": {
                 "AWS": "<your-user-arn>"
             },
             "Action": "s3:PutObject",
-            "Resource": "arn:aws:s3:::your-bucket-name/*"
+            "Resource": "arn:aws:s3:::<your-bucket-name>/*"
         }
-
     ]
 }
 ```
 
-### Configure an IAM role for your user
-
-You want to give the user the permission to write to buckets, invoke lambda functions and create logs in CloudWatch (in order to monitor the logs of your lambda function).
-
-To do so, create a role with the following policy attached:
+Also paste the following into the field "Cross-origin resource sharing (CORS)" and click:
 
 ```json
-{
-    "Version": "2012-10-17",
-    "Statement": [
-        {
-            "Sid": "0",
-            "Effect": "Allow",
-            "Action": [
-                "s3:ListAllMyBuckets"
-            ],
-            "Resource": [
-                "*"
-            ]
-        },
-        {
-            "Sid": "1",
-            "Effect": "Allow",
-            "Action": [
-                "s3:CreateBucket",
-                "s3:ListBucket",
-                "s3:PutBucketAcl",
-                "s3:GetObject",
-                "s3:DeleteObject",
-                "s3:PutObjectAcl",
-                "s3:PutObject",
-                "s3:GetBucketLocation"
-            ],
-            "Resource": [
-                "arn:aws:s3:::*"
-            ]
-        },
-        {
-            "Sid": "2",
-            "Effect": "Allow",
-            "Action": [
-                "lambda:InvokeFunction"
-            ],
-            "Resource": [
-                "arn:aws:lambda:*:*:function:*"
-            ]
-        },
-        {
-            "Sid": "3",
-            "Effect": "Allow",
-            "Action": [
-                "logs:CreateLogGroup"
-            ],
-            "Resource": [
-                "*"
-            ]
-        },
-        {
-            "Sid": "4",
-            "Effect": "Allow",
-            "Action": [
-                "logs:CreateLogStream",
-                "logs:PutLogEvents"
-            ],
-            "Resource": [
-                "*"
-            ]
-        }
-    ]
-}
+[
+    {
+        "AllowedHeaders": [
+            "*"
+        ],
+        "AllowedMethods": [
+            "GET",
+            "HEAD"
+        ],
+        "AllowedOrigins": [
+            "*"
+        ],
+        "ExposeHeaders": [
+            "ETag"
+        ],
+        "MaxAgeSeconds": 3000
+    }
+]
 ```
 
-Attach this role to the user that you have previously given the permission to write to your bucket.
 
-### Build the docker image and push it to ECR
+#### Build Docker Image & Push to ECR
 
-We want to upload our docker image to Amazon's container registry so that it is close to our lambda function. To create an ECR repository, run the following command:
+We want to upload our docker image to Amazon's container registry so that it is close to our lambda function. To create an ECR repository, run the following command. 
 
 ```
-aws ecr create-repository --repository-name my-revideo-project --region us-east-1
+aws ecr create-repository --repository-name revideo-render-project
 ```
 
 This will give you the URI of your ECR repository `<your-ecr-uri>`, which looks something like `0123456789.dkr.ecr.us-east-1.amazonaws.com/your-repo-name`.
@@ -148,50 +376,53 @@ This will give you the URI of your ECR repository `<your-ecr-uri>`, which looks
 Now you can build the docker image. To do so, head to the folder in which our `Dockerfile` is present and run:
 
 ```
-docker buildx build --progress=plain --platform linux/amd64 -t my-revideo-project:latest .
+docker buildx build --progress=plain --platform linux/amd64 -t revideo-render-project:latest .
 ```
 
 Now tag the image to upload it to ECR:
 
 ```
-docker tag my-revideo-project:latest <your-ecr-uri>:latest
+docker tag revideo-render-project:latest <your-ecr-uri>:latest
 ```
 
-Finally, push the image to your repository:
+Finally, to push the image, you have to authenticate Docker with ECR. To do so, run the following command:
+
 ```
-docker push <your-ecr-uri>:latest
+aws ecr get-login-password --region <your-region> | docker login --username AWS --password-stdin <your-ecr-uri>
 ```
 
-### Create a Lambda function from your docker image
+Now push the image to your repository:
+```
+docker push <your-ecr-uri>:latest
+```
 
-Finally, create a lambda function from your docker image:
+You can now create a lambda function from your docker image. The `<your-lambda-role-arn>` field should be filled out by the arn that was returned in step 2 ("Create a Role").
 
 ```
 aws lambda create-function \
-    --function-name my-revideo-render-function \
+    --function-name revideo-render-function \
     --package-type Image \
     --code ImageUri=<your-ecr-uri>:latest \
     --role <your-lambda-role-arn> \
-    --timeout 600 \
-    --memory-size 4096 \
-    --environment Variables={REVIDEO_BUCKET_NAME=your-bucket-name}
+    --timeout 900 \
+    --memory-size 3000 \
+    --environment Variables={REVIDEO_BUCKET_NAME=<your-bucket-name>}
 ```
 
 You should get a response in your terminal indicating that your function is being created.
 
-### Test your function
+
+#### Test your function
 
 To test your function, head to the Lambda tab in the AWS console. Now create a test event with the following arguments and use it to invoke your function:
 
-```
+```json
 {
   "jobId": "12345",
-  "numWorkers": 25,
+  "numWorkers": 5,
   "jobType": "fullRender",
   "variables": {"message": "Hello from Revideo!"}
 }
 ```
 
-The function should run and return a url to the rendered video inside your bucket.
-
-**Note: The first time after an image is uploaded to ECR, the function may take longer to execute, but after the first time, executions are faster, even when you have long breaks between executions. You can read more about why this happens [here](https://brooker.co.za/blog/2023/05/23/snapshot-loading.html).**
+If you want to build an app that interacts with your function, you should use the AWS Lambda SDK. You can see how it is used to invoke partial renders within `src/lambda.ts`. 

package/examples/parallelized-aws-lambda/revideo-project/package.json

@@ -3,26 +3,24 @@
   "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/2d": "0.5.10",
-    "@revideo/core": "0.5.10",
-    "@revideo/ffmpeg": "0.5.10",
-    "@revideo/renderer": "0.5.10",
-    "@revideo/vite-plugin": "0.5.10",
+    "@revideo/2d": "0.10.0",
+    "@revideo/core": "0.10.0",
+    "@revideo/ffmpeg": "0.10.0",
+    "@revideo/renderer": "0.10.0",
     "@sparticuz/chromium": "^123.0.1",
     "aws-lambda": "^1.0.7",
     "aws-sdk": "^2.1642.0",
     "ffmpeg-static": "^5.2.0"
   },
   "devDependencies": {
-    "@revideo/cli": "0.5.10",
-    "@revideo/ui": "0.5.10",
+    "@revideo/cli": "0.10.0",
+    "@revideo/ui": "0.10.0",
+    "@types/chroma-js": "^2.4.4",
     "typescript": "5.5.4",
-    "vite": "^4.5"
+    "vite": "4.5"
   }
 }

package/examples/parallelized-aws-lambda/revideo-project/src/lambda.ts

@@ -4,7 +4,6 @@ import chromium from '@sparticuz/chromium';
 import * as AWS from "aws-sdk";
 import * as fs from "fs";
 
-AWS.config.update({ region: 'us-east-1' });
 chromium.setHeadlessMode = true;
 
 const s3 = new AWS.S3();
@@ -23,7 +22,7 @@ export const handler = async (event: any, context: any) => {
       const { workerId, numWorkers, variables } = event;
 
       const { audioFile, videoFile } = await renderPartialVideo({
-        projectFile: './src/project.ts',
+        projectFile: './src/project.tsx',
         workerId: workerId,
         numWorkers: numWorkers,
         variables: variables,
@@ -35,7 +34,7 @@ export const handler = async (event: any, context: any) => {
             !arg.startsWith('--use-gl=angle') &&
             !arg.startsWith('--use-angle=swiftshader') &&
             !arg.startsWith('--disable-features=')
-          )
+          ),
        }}
       });