- 
- Now still images (compositions with a duration of 1 frame) are marked with a special icon.
+
+
+ Now still images (compositions with a duration of 1 frame) are marked with a special icon.
+
- 
+
- 
+
{props.title}
;
};
-+
-
+
-
content prop it is possible to pass a string, or a Uint8Array for binary data. Passing an
- Uint8Array
- should not be considered faster due to it having to be serialized.
+content prop it is possible to pass a string, or a Uint8Array for binary data. Passing an Uint8Array should not be considered faster due to it having to be serialized.
## Receiving artifacts @@ -70,8 +61,6 @@ Artifacts get saved to `out/[composition-id]/[filename]` when rendering a video. Use the [`onArtifact`](/docs/renderer/render-media#onartifact) callback to receive the artifacts. ```tsx twoslash title="render.mjs" -// @module: es2022 -// @target: es2017 import type {VideoConfig} from 'remotion'; const composition: VideoConfig = { @@ -122,8 +111,6 @@ When using [`renderMediaOnLambda()`](/docs/lambda/rendermediaonlambda), artifact You can obtain a list of currently received assets from [`getRenderProgress()`](/docs/lambda/getrenderprogress#artifacts). ```tsx twoslash title="progress.ts" -// @module: es2022 -// @target: es2017 import {getRenderProgress} from '@remotion/lambda/client'; const renderProgress = await getRenderProgress({ @@ -157,8 +144,6 @@ const imageFormat = 'png' as const; const region = 'eu-central-1' as const; // ---cut--- -// @module: es2022 -// @target: es2017 import {renderStillOnLambda} from '@remotion/lambda/client'; const stillResponse = await renderStillOnLambda({ diff --git a/packages/docs/docs/bundle.mdx b/packages/docs/docs/bundle.mdx index 14febff930f..dad37ab1203 100644 --- a/packages/docs/docs/bundle.mdx +++ b/packages/docs/docs/bundle.mdx @@ -2,7 +2,7 @@ image: /generated/articles-docs-bundle.png id: bundle title: bundle() -crumb: "@remotion/bundler" +crumb: '@remotion/bundler' --- _Part of the `@remotion/bundler` package._ @@ -17,13 +17,11 @@ Calling `bundle()` for every video that you render is an anti-pattern. ## Example ```tsx twoslash title="render.mjs" -import path from "path"; -// @module: ESNext -// @target: ESNext -import { bundle } from "@remotion/bundler"; +import path from 'path'; +import {bundle} from '@remotion/bundler'; const serveUrl = await bundle({ - entryPoint: path.join(process.cwd(), "./src/index.ts"), + entryPoint: path.join(process.cwd(), './src/index.ts'), // If you have a webpack override in remotion.config.ts, pass it here as well. webpackOverride: (config) => config, }); @@ -52,7 +50,7 @@ _optional_ A function to override the webpack config reducer-style. Takes a function which gives you the current webpack config which you can transform and return a modified version of it. For example: ```ts twoslash -import { WebpackOverrideFn } from "@remotion/bundler"; +import {WebpackOverrideFn} from '@remotion/bundler'; // ---cut--- const webpackOverride: WebpackOverrideFn = (webpackConfig) => { return { @@ -128,7 +126,7 @@ const bundle: ( Example: ```ts -await bundle("src/index.ts", () => console.log(progress * 100 + "% done"), { +await bundle('src/index.ts', () => console.log(progress * 100 + '% done'), { webpackOverride, }); ``` diff --git a/packages/docs/docs/cloudrun/deleteservice.mdx b/packages/docs/docs/cloudrun/deleteservice.mdx index a07846ef68a..4f6b5fb0339 100644 --- a/packages/docs/docs/cloudrun/deleteservice.mdx +++ b/packages/docs/docs/cloudrun/deleteservice.mdx @@ -3,11 +3,13 @@ image: /generated/articles-docs-cloudrun-deleteservice.png id: deleteservice title: deleteService() slug: /cloudrun/deleteservice -crumb: "Cloud Run API" +crumb: 'Cloud Run API' ---
Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
++ Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes. +
Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
++ Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes. +
- Cloud Run is in Alpha, which means APIs - may change in any version and documentation is not yet finished. See the{' '} - - changelog to stay up to date with breaking changes - - . + Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
++ Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes. +
Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
++ Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes. +
Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
++ Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes. +
Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
++ Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes. +
Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
++ Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes. +
Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
++ Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes. +
- Cloud Run is in Alpha, which means APIs - may change in any version and documentation is not yet finished. See the{' '} - - changelog to stay up to date with breaking changes - - . + Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
- Cloud Run is in Alpha, which means APIs - may change in any version and documentation is not yet finished. See the{' '} - - changelog to stay up to date with breaking changes - - . + Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
++ Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes. +
+
For the following steps, you may execute them on the CLI, or programmatically using the Node.JS APIs. @@ -99,18 +101,17 @@ npx remotion cloudrun services deploy You can deploy a service that can render videos into your GCP project using [`deployService()`](/docs/cloudrun/deployservice). ```ts twoslash -// @module: ESNext -// @target: ESNext -import { deployService } from "@remotion/cloudrun"; +import {deployService} from '@remotion/cloudrun'; // ---cut--- const deployResult = await deployService({ - projectID: "my-remotion-project", - region: "us-east1", + projectID: 'my-remotion-project', + region: 'us-east1', }); ``` The object that is returned contains a name field, which you'll need for rendering. + @@ -145,32 +146,28 @@ When you update your Remotion code in the future, redeploy your site. Pass the s First, you need to create a Cloud Storage bucket in your preferred region. If one already exists, it will be used instead: ```ts twoslash -// @module: ESNext -// @target: ESNext -import path from "path"; -import { deploySite, getOrCreateBucket } from "@remotion/cloudrun"; +import path from 'path'; +import {deploySite, getOrCreateBucket} from '@remotion/cloudrun'; -const { bucketName } = await getOrCreateBucket({ - region: "us-east1", +const {bucketName} = await getOrCreateBucket({ + region: 'us-east1', }); ``` Next, upload your Remotion project to a Cloud Storage bucket. Specify the entry point of your Remotion project, this is the file where [`registerRoot()`](/docs/register-root) is called. ```ts twoslash -// @module: ESNext -// @target: ESNext -import path from "path"; -import { deploySite, getOrCreateBucket } from "@remotion/cloudrun"; +import path from 'path'; +import {deploySite, getOrCreateBucket} from '@remotion/cloudrun'; -const { bucketName } = await getOrCreateBucket({ - region: "us-east1", +const {bucketName} = await getOrCreateBucket({ + region: 'us-east1', }); // ---cut--- -const { serveUrl } = await deploySite({ +const {serveUrl} = await deploySite({ bucketName, - entryPoint: path.resolve(process.cwd(), "src/index.ts"), - siteName: "my-video", + entryPoint: path.resolve(process.cwd(), 'src/index.ts'), + siteName: 'my-video', }); ``` @@ -293,12 +290,10 @@ values={[ You already have the service name from a previous step. But since you only need to deploy a service once, it's useful to retrieve the name of your deployed service programmatically before rendering a video in case your Node.JS program restarts. We can call [`getServices()`](/docs/cloudrun/getservices) with the `compatibleOnly` flag to get only services with a matching version. ```ts twoslash -// @module: ESNext -// @target: ESNext -import { getServices, renderMediaOnCloudrun } from "@remotion/cloudrun/client"; +import {getServices, renderMediaOnCloudrun} from '@remotion/cloudrun/client'; const services = await getServices({ - region: "us-east1", + region: 'us-east1', compatibleOnly: true, }); @@ -308,26 +303,23 @@ const serviceName = services[0].serviceName; We can now trigger a render of a video using the [`renderMediaOnCloudrun()`](/docs/cloudrun/rendermediaoncloudrun) function. ```ts twoslash -// @module: ESNext -// @target: ESNext - -import { renderMediaOnCloudrun } from "@remotion/cloudrun/client"; -const url = "string"; -const serviceName = "string"; +import {renderMediaOnCloudrun} from '@remotion/cloudrun/client'; +const url = 'string'; +const serviceName = 'string'; const updateRenderProgress = (progress: number) => {}; // ---cut--- const result = await renderMediaOnCloudrun({ serviceName, - region: "us-east1", + region: 'us-east1', serveUrl: url, - composition: "HelloWorld", + composition: 'HelloWorld', inputProps: {}, - codec: "h264", + codec: 'h264', updateRenderProgress, }); -if (result.type === "success") { +if (result.type === 'success') { console.log(result.bucketName); console.log(result.renderId); } @@ -340,18 +332,17 @@ Import from [`@remotion/cloudrun/client`](/docs/cloudrun/light-client) to not im The render will now run and after a while the video will be available in your cloud storage bucket. You can keep track of the render progress by passing a function to the [updateRenderProgress](/docs/cloudrun/rendermediaoncloudrun#updaterenderprogress) attribute, to receive progress as a number. Congrats! [Check your Cloud Storage Bucket](https://console.cloud.google.com/storage/browser) - you just rendered your first video using Remotion Cloud Run 🚀 +
Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
++ Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes. +
Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes.
++ Cloud Run is in Alpha, which means APIs may change in any version and documentation is not yet finished. See the changelog to stay up to date with breaking changes. +
@@ -143,8 +136,8 @@ export const MyComposition: React.FC = ({ name, repo, logo }) => {
/>
f;
// @filename: script.ts
-// @module: esnext
-// @target: es2022
// ---cut---
-import { bundle } from "@remotion/bundler";
-import { webpackOverride } from "./webpack-override";
+import {bundle} from '@remotion/bundler';
+import {webpackOverride} from './webpack-override';
const bundleLocation = await bundle({
- entryPoint: "./src/index.ts",
+ entryPoint: './src/index.ts',
// If you have a webpack override, don't forget to add it
webpackOverride: webpackOverride,
});
@@ -206,28 +197,26 @@ Fetch the composition metadata for each render using [`selectComposition()`](/do
Trigger a render using [`renderMedia()`](/docs/renderer/render-media) and pass the data entry as [`inputProps`](/docs/renderer/render-media#inputprops). This will pass the object as React props to the component above.
```ts twoslash
-// @module: esnext
-// @target: es2022
// @filename: dataset.ts
export const data = [
{
- name: "React",
- repo: "facebook/react",
- logo: "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
+ name: 'React',
+ repo: 'facebook/react',
+ logo: 'https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg',
},
{
- name: "Remotion",
- repo: "remotion-dev/remotion",
- logo: "https://github.com/remotion-dev/logo/raw/main/withouttitle/element-0.png",
+ name: 'Remotion',
+ repo: 'remotion-dev/remotion',
+ logo: 'https://github.com/remotion-dev/logo/raw/main/withouttitle/element-0.png',
},
];
// @filename: render.ts
-const compositionId = "MyComp";
-const bundleLocation = "xxx";
+const compositionId = 'MyComp';
+const bundleLocation = 'xxx';
// ---cut---
-import { renderMedia, selectComposition } from "@remotion/renderer";
-import { data } from "./dataset";
+import {renderMedia, selectComposition} from '@remotion/renderer';
+import {data} from './dataset';
for (const entry of data) {
const composition = await selectComposition({
@@ -239,7 +228,7 @@ for (const entry of data) {
await renderMedia({
composition,
serveUrl: bundleLocation,
- codec: "h264",
+ codec: 'h264',
outputLocation: `out/${entry.name}.mp4`,
inputProps: entry,
});
@@ -256,34 +245,32 @@ It is not recommended to render more than one video at once.
// @filename: dataset.ts
export const data = [
{
- name: "React",
- repo: "facebook/react",
- logo: "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
+ name: 'React',
+ repo: 'facebook/react',
+ logo: 'https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg',
},
{
- name: "Remotion",
- repo: "remotion-dev/remotion",
- logo: "https://github.com/remotion-dev/logo/raw/main/withouttitle/element-0.png",
+ name: 'Remotion',
+ repo: 'remotion-dev/remotion',
+ logo: 'https://github.com/remotion-dev/logo/raw/main/withouttitle/element-0.png',
},
];
// @filename: webpack-override.ts
-import type { WebpackOverrideFn } from "@remotion/bundler";
+import type {WebpackOverrideFn} from '@remotion/bundler';
export const webpackOverride: WebpackOverrideFn = (f) => f;
// @filename: render.ts
// ---cut---
-// @module: ESNext
-// @target: ESNext
-import { selectComposition, renderMedia } from "@remotion/renderer";
-import { webpackOverride } from "./webpack-override";
-import { bundle } from "@remotion/bundler";
-import { data } from "./dataset";
+import {selectComposition, renderMedia} from '@remotion/renderer';
+import {webpackOverride} from './webpack-override';
+import {bundle} from '@remotion/bundler';
+import {data} from './dataset';
-const compositionId = "MyComp";
+const compositionId = 'MyComp';
const bundleLocation = await bundle({
- entryPoint: "./src/index.ts",
+ entryPoint: './src/index.ts',
// If you have a webpack override in remotion.config.ts, pass it here as well.
webpackOverride: webpackOverride,
});
@@ -298,7 +285,7 @@ for (const entry of data) {
await renderMedia({
composition,
serveUrl: bundleLocation,
- codec: "h264",
+ codec: 'h264',
outputLocation: `out/${entry.name}.mp4`,
inputProps: entry,
});
@@ -345,16 +332,16 @@ Use a package like [`csv2json`](https://www.npmjs.com/package/csv2json) to conve
More info
= {
model: Model;
params: Params;
result: Result;
- transcription: true extends WithTokenLevelTimestamp
- ? TranscriptionItemWithTimestamp[]
- : TranscriptionItem[];
+ transcription: true extends WithTokenLevelTimestamp ? TranscriptionItemWithTimestamp[] : TranscriptionItem[];
};
```
diff --git a/packages/docs/docs/lambda/autodelete.mdx b/packages/docs/docs/lambda/autodelete.mdx
index db71171a9f2..275c7a0cbd0 100644
--- a/packages/docs/docs/lambda/autodelete.mdx
+++ b/packages/docs/docs/lambda/autodelete.mdx
@@ -3,7 +3,7 @@ image: /generated/articles-docs-lambda-autodelete.png
title: Auto-delete renders
id: autodelete
slug: /lambda/autodelete
-crumb: "Lambda API"
+crumb: 'Lambda API'
---
import Tabs from '@theme/Tabs';
@@ -13,7 +13,7 @@ _available from v4.0.32_
To automatically delete renders and associated files after some time, you need to:
-1 Enable the lifecycle rules on the AWS bucket.
+1 Enable the lifecycle rules on the AWS bucket.
2 Render a video with the
+
2 Enable the lifecycle rules
Redeploy the site with the `--enable-folder-expiry` option. This operation will modify the S3 bucket to apply [AWS Lifecycle Rules](https://docs.aws.amazon.com/AmazonS3/latest/userguide/object-lifecycle-mgmt.html).
@@ -55,20 +55,18 @@ npx remotion lambda sites create --site-name=my-site-name --enable-folder-expiry
```ts twoslash title="deploy.mjs" {6}
-// @module: esnext
-// @target: es2017
-import { deploySite, getOrCreateBucket } from "@remotion/lambda";
-import path from "path";
+import {deploySite, getOrCreateBucket} from '@remotion/lambda';
+import path from 'path';
-const { bucketName } = await getOrCreateBucket({
- region: "us-east-1",
+const {bucketName} = await getOrCreateBucket({
+ region: 'us-east-1',
enableFolderExpiry: true,
});
-const { serveUrl } = await deploySite({
- entryPoint: path.resolve(process.cwd(), "src/index.ts"),
+const {serveUrl} = await deploySite({
+ entryPoint: path.resolve(process.cwd(), 'src/index.ts'),
bucketName, // use the bucket with lifecyle rules
- region: "us-east-1",
+ region: 'us-east-1',
});
console.log(serveUrl);
```
@@ -78,14 +76,12 @@ console.log(serveUrl);
+
## Trigger a render with expiration @@ -110,19 +106,16 @@ npx remotion lambda render testbed-v6 react-svg --delete-after="1-day"
```tsx twoslash title="render.ts" {10}
-// @module: esnext
-// @target: es2017
// ---cut---
-import { renderMediaOnLambda } from "@remotion/lambda/client";
-
-const { bucketName, renderId } = await renderMediaOnLambda({
- region: "us-east-1",
- functionName: "remotion-render-bds9aab",
- composition: "MyVideo",
- serveUrl:
- "https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw",
- codec: "h264",
- deleteAfter: "1-day",
+import {renderMediaOnLambda} from '@remotion/lambda/client';
+
+const {bucketName, renderId} = await renderMediaOnLambda({
+ region: 'us-east-1',
+ functionName: 'remotion-render-bds9aab',
+ composition: 'MyVideo',
+ serveUrl: 'https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw',
+ codec: 'h264',
+ deleteAfter: '1-day',
});
```
@@ -130,21 +123,18 @@ const { bucketName, renderId } = await renderMediaOnLambda({
```tsx twoslash title="render.ts" {12}
-// @module: esnext
-// @target: es2017
// ---cut---
-import { renderStillOnLambda } from "@remotion/lambda/client";
-
-const { bucketName, renderId } = await renderStillOnLambda({
- region: "us-east-1",
- functionName: "remotion-render-bds9aab",
- composition: "MyVideo",
- serveUrl:
- "https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw",
+import {renderStillOnLambda} from '@remotion/lambda/client';
+
+const {bucketName, renderId} = await renderStillOnLambda({
+ region: 'us-east-1',
+ functionName: 'remotion-render-bds9aab',
+ composition: 'MyVideo',
+ serveUrl: 'https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw',
inputProps: {},
- privacy: "public",
- imageFormat: "png",
- deleteAfter: "1-day",
+ privacy: 'public',
+ imageFormat: 'png',
+ deleteAfter: '1-day',
});
```
@@ -157,15 +147,13 @@ Verify that it worked
-
-
-
+
+
AWS does not delete the file at the exact time, but the deletion will happen. diff --git a/packages/docs/docs/lambda/cli/functions.mdx b/packages/docs/docs/lambda/cli/functions.mdx index a80254337b4..17bb5cd203e 100644 --- a/packages/docs/docs/lambda/cli/functions.mdx +++ b/packages/docs/docs/lambda/cli/functions.mdx @@ -96,10 +96,6 @@ Use a custom role for the function instead of the default (`arn:aws:iam::[aws-ac Only logs the function name. -### `--enable-v5-runtime`",
- secretAccessKey: "",
+ endpoint: 'https://fra1.digitaloceanspaces.com',
+ accessKeyId: '',
+ secretAccessKey: '',
},
},
});
diff --git a/packages/docs/docs/lambda/deletefunction.mdx b/packages/docs/docs/lambda/deletefunction.mdx
index 3b452bc40e8..a275989c31f 100644
--- a/packages/docs/docs/lambda/deletefunction.mdx
+++ b/packages/docs/docs/lambda/deletefunction.mdx
@@ -3,7 +3,7 @@ image: /generated/articles-docs-lambda-deletefunction.png
id: deletefunction
title: deleteFunction()
slug: /lambda/deletefunction
-crumb: "Lambda API"
+crumb: 'Lambda API'
---
Deletes a deployed Lambda function based on its name.
@@ -13,18 +13,15 @@ To retrieve a list of functions, call [`getFunctions()`](/docs/lambda/getfunctio
## Example
```ts twoslash
-// @module: esnext
-// @target: es2017
-
-import { deleteFunction, getFunctions } from "@remotion/lambda";
+import {deleteFunction, getFunctions} from '@remotion/lambda';
const functions = await getFunctions({
- region: "us-east-1",
+ region: 'us-east-1',
compatibleOnly: false,
});
for (const fn of functions) {
await deleteFunction({
- region: "us-east-1",
+ region: 'us-east-1',
functionName: fn.functionName,
});
}
diff --git a/packages/docs/docs/lambda/deleterender.mdx b/packages/docs/docs/lambda/deleterender.mdx
index 21323c0fd54..f4b912380dd 100644
--- a/packages/docs/docs/lambda/deleterender.mdx
+++ b/packages/docs/docs/lambda/deleterender.mdx
@@ -3,20 +3,18 @@ image: /generated/articles-docs-lambda-deleterender.png
id: deleterender
title: deleteRender()
slug: /lambda/deleterender
-crumb: "Lambda API"
+crumb: 'Lambda API'
---
Deletes a rendered video, audio or still and its associated metada.
```ts twoslash
-// @module: ESNext
-// @target: ESNext
-import { deleteRender } from "@remotion/lambda";
-
-const { freedBytes } = await deleteRender({
- bucketName: "remotionlambda-r42fs9fk",
- region: "us-east-1",
- renderId: "8hfxlw",
+import {deleteRender} from '@remotion/lambda';
+
+const {freedBytes} = await deleteRender({
+ bucketName: 'remotionlambda-r42fs9fk',
+ region: 'us-east-1',
+ renderId: '8hfxlw',
});
console.log(freedBytes); // 21249541
@@ -48,7 +46,6 @@ If the render was saved to a [different cloud](/docs/lambda/custom-destination#s
Passes `forcePathStyle` to the AWS S3 client. If you don't know what this is, you probably don't need it.
-
## Return value
Returns a promise resolving to an object with the following properties:
diff --git a/packages/docs/docs/lambda/deletesite.mdx b/packages/docs/docs/lambda/deletesite.mdx
index daf7fc61d87..631940e729a 100644
--- a/packages/docs/docs/lambda/deletesite.mdx
+++ b/packages/docs/docs/lambda/deletesite.mdx
@@ -3,7 +3,7 @@ image: /generated/articles-docs-lambda-deletesite.png
id: deletesite
title: deleteSite()
slug: /lambda/deletesite
-crumb: "Lambda API"
+crumb: 'Lambda API'
---
Removes a Remotion project from your S3 bucket.
@@ -15,13 +15,11 @@ Each project is located in the `sites/` subdirectory of your S3 bucket. Calling
Gets all sites and deletes them.
```ts twoslash
-// @module: ESNext
-// @target: ESNext
-import { AwsRegion, deleteSite, getSites } from "@remotion/lambda";
+import {AwsRegion, deleteSite, getSites} from '@remotion/lambda';
-const region: AwsRegion = "eu-central-1";
+const region: AwsRegion = 'eu-central-1';
-const { sites } = await getSites({
+const {sites} = await getSites({
region,
});
diff --git a/packages/docs/docs/lambda/deployfunction.mdx b/packages/docs/docs/lambda/deployfunction.mdx
index a70e96d3d3c..6bd0ec218f9 100644
--- a/packages/docs/docs/lambda/deployfunction.mdx
+++ b/packages/docs/docs/lambda/deployfunction.mdx
@@ -13,9 +13,6 @@ If a function with the same version, memory size and timeout already existed, it
## Example
```ts twoslash
-// @module: esnext
-// @target: es2017
-
import {deployFunction} from '@remotion/lambda';
const {functionName} = await deployFunction({
diff --git a/packages/docs/docs/lambda/deploysite.mdx b/packages/docs/docs/lambda/deploysite.mdx
index ce23e19f2f7..5a4a559a39c 100644
--- a/packages/docs/docs/lambda/deploysite.mdx
+++ b/packages/docs/docs/lambda/deploysite.mdx
@@ -3,7 +3,7 @@ image: /generated/articles-docs-lambda-deploysite.png
id: deploysite
title: deploySite()
slug: /lambda/deploysite
-crumb: "Lambda API"
+crumb: 'Lambda API'
---
Takes a Remotion project, bundles it and uploads it to an S3 bucket. Once uploaded, a Lambda function can render any composition in the Remotion project by specifying the URL.
@@ -15,29 +15,20 @@ Takes a Remotion project, bundles it and uploads it to an S3 bucket. Once upload
## Example
```ts twoslash
-// @module: esnext
-// @target: es2017
-import { deploySite } from "@remotion/lambda";
-import path from "path";
-
-const { serveUrl } = await deploySite({
- entryPoint: path.resolve(process.cwd(), "src/index.ts"),
- bucketName: "remotionlambda-c7fsl3d",
- region: "us-east-1",
+import {deploySite} from '@remotion/lambda';
+import path from 'path';
+
+const {serveUrl} = await deploySite({
+ entryPoint: path.resolve(process.cwd(), 'src/index.ts'),
+ bucketName: 'remotionlambda-c7fsl3d',
+ region: 'us-east-1',
options: {
onBundleProgress: (progress) => {
// Progress is between 0 and 100
console.log(`Bundle progress: ${progress}%`);
},
- onUploadProgress: ({
- totalFiles,
- filesUploaded,
- totalSize,
- sizeUploaded,
- }) => {
- console.log(
- `Upload progress: Total files ${totalFiles}, Files uploaded ${filesUploaded}, Total size ${totalSize}, Size uploaded ${sizeUploaded}`,
- );
+ onUploadProgress: ({totalFiles, filesUploaded, totalSize, sizeUploaded}) => {
+ console.log(`Upload progress: Total files ${totalFiles}, Files uploaded ${filesUploaded}, Total size ${totalSize}, Size uploaded ${sizeUploaded}`);
},
},
});
diff --git a/packages/docs/docs/lambda/downloadmedia.mdx b/packages/docs/docs/lambda/downloadmedia.mdx
index 66d87fe2a9e..49b025afe93 100644
--- a/packages/docs/docs/lambda/downloadmedia.mdx
+++ b/packages/docs/docs/lambda/downloadmedia.mdx
@@ -3,7 +3,7 @@ image: /generated/articles-docs-lambda-downloadmedia.png
id: downloadmedia
title: downloadMedia()
slug: /lambda/downloadmedia
-crumb: "Lambda API"
+crumb: 'Lambda API'
---
Downloads a rendered video, audio or still to the disk of the machine this API is called from.
@@ -11,21 +11,15 @@ Downloads a rendered video, audio or still to the disk of the machine this API i
If you want to let the user download a result to their machine, use [`renderMediaOnLambda()` -> `downloadBehavior`](/docs/lambda/rendermediaonlambda#downloadbehavior) instead.
```ts twoslash
-// @module: ESNext
-// @target: ESNext
-import { downloadMedia } from "@remotion/lambda";
-
-const { outputPath, sizeInBytes } = await downloadMedia({
- bucketName: "remotionlambda-r42fs9fk",
- region: "us-east-1",
- renderId: "8hfxlw",
- outPath: "out.mp4",
- onProgress: ({ totalSize, downloaded, percent }) => {
- console.log(
- `Download progress: ${totalSize}/${downloaded} bytes (${(
- percent * 100
- ).toFixed(0)}%)`
- );
+import {downloadMedia} from '@remotion/lambda';
+
+const {outputPath, sizeInBytes} = await downloadMedia({
+ bucketName: 'remotionlambda-r42fs9fk',
+ region: 'us-east-1',
+ renderId: '8hfxlw',
+ outPath: 'out.mp4',
+ onProgress: ({totalSize, downloaded, percent}) => {
+ console.log(`Download progress: ${totalSize}/${downloaded} bytes (${(percent * 100).toFixed(0)}%)`);
},
});
diff --git a/packages/docs/docs/lambda/feb-2022-outage.mdx b/packages/docs/docs/lambda/feb-2022-outage.mdx
index a4a1051b91e..70508440810 100644
--- a/packages/docs/docs/lambda/feb-2022-outage.mdx
+++ b/packages/docs/docs/lambda/feb-2022-outage.mdx
@@ -28,17 +28,14 @@ Via Node.JS:
## Example
```ts
-// @module: esnext
-// @target: es2017
+import {deployFunction} from '@remotion/lambda';
-import { deployFunction } from "@remotion/lambda";
-
-const { functionName } = await deployFunction({
- region: "us-east-1",
+const {functionName} = await deployFunction({
+ region: 'us-east-1',
timeoutInSeconds: 120,
memorySizeInMb: 1024,
createCloudWatchLogGroup: true,
- architecture: "x86_64",
+ architecture: 'x86_64',
});
console.log(functionName);
```
diff --git a/packages/docs/docs/lambda/getcompositionsonlambda.mdx b/packages/docs/docs/lambda/getcompositionsonlambda.mdx
index 1e7144b5009..6339abb9d5f 100644
--- a/packages/docs/docs/lambda/getcompositionsonlambda.mdx
+++ b/packages/docs/docs/lambda/getcompositionsonlambda.mdx
@@ -3,7 +3,7 @@ image: /generated/articles-docs-lambda-getcompositionsonlambda.png
id: getcompositionsonlambda
title: getCompositionsOnLambda()
slug: /lambda/getcompositionsonlambda
-crumb: "Lambda API"
+crumb: 'Lambda API'
---
_available from v3.3.2_
@@ -17,15 +17,12 @@ You should use `getCompositionsOnLambda()` if you cannot use [`getCompositions()
## Example
```tsx twoslash
-// @module: esnext
-// @target: es2017
-import { getCompositionsOnLambda } from "@remotion/lambda/client";
+import {getCompositionsOnLambda} from '@remotion/lambda/client';
const compositions = await getCompositionsOnLambda({
- region: "us-east-1",
- functionName: "remotion-render-bds9aab",
- serveUrl:
- "https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw",
+ region: 'us-east-1',
+ functionName: 'remotion-render-bds9aab',
+ serveUrl: 'https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw',
inputProps: {},
});
@@ -88,7 +85,7 @@ Results in invalid SSL certificates, such as self-signed ones, being ignored.
#### `gl`
-1 Ensure you are on at least Remotion v4.0.61.
+1 Ensure you are on at least Remotion v4.0.61.
2 If you started using Remotion before v4.0.61, update both your AWS user permission and AWS role permission, since now more permissions are needed.
## Enable Lambda Insights
@@ -27,15 +27,13 @@ If the function already existed before, you need to delete it beforehand.
**Via Node.js APIs:**
```tsx twoslash title="deploy.ts" {8, 11-13}
-// @module: ESNext
-// @target: ESNext
-import assert from "assert";
+import assert from 'assert';
// ---cut---
-import { deployFunction } from "@remotion/lambda";
+import {deployFunction} from '@remotion/lambda';
-const { alreadyExisted } = await deployFunction({
+const {alreadyExisted} = await deployFunction({
createCloudWatchLogGroup: true,
- region: "us-east-1",
+ region: 'us-east-1',
timeoutInSeconds: 120,
memorySizeInMb: 3009,
enableLambdaInsights: true,
diff --git a/packages/docs/docs/lambda/presignurl.mdx b/packages/docs/docs/lambda/presignurl.mdx
index aac3fe6b0ad..34759f0a3b6 100644
--- a/packages/docs/docs/lambda/presignurl.mdx
+++ b/packages/docs/docs/lambda/presignurl.mdx
@@ -2,7 +2,7 @@
image: /generated/articles-docs-lambda-presignurl.png
id: presignurl
title: presignUrl()
-crumb: "Lambda API"
+crumb: 'Lambda API'
---
Takes a private S3 object and turns it into a public URL by signing with your AWS credentials.
@@ -10,14 +10,12 @@ Takes a private S3 object and turns it into a public URL by signing with your AW
## Example
```ts twoslash
-// @module: ESNext
-// @target: ESNext
-import { presignUrl } from "@remotion/lambda/client";
+import {presignUrl} from '@remotion/lambda/client';
const url = await presignUrl({
- region: "us-east-1",
- bucketName: "remotionlambda-c7fsl3d",
- objectKey: "assets/sample.png",
+ region: 'us-east-1',
+ bucketName: 'remotionlambda-c7fsl3d',
+ objectKey: 'assets/sample.png',
expiresInSeconds: 900,
checkIfObjectExists: true,
});
@@ -25,9 +23,9 @@ const url = await presignUrl({
console.log(url); // `string` - or `null` if object doesn't exist
const url2 = await presignUrl({
- region: "us-east-1",
- bucketName: "remotionlambda-c7fsl3d",
- objectKey: "assets/sample.png",
+ region: 'us-east-1',
+ bucketName: 'remotionlambda-c7fsl3d',
+ objectKey: 'assets/sample.png',
expiresInSeconds: 900,
checkIfObjectExists: false,
});
diff --git a/packages/docs/docs/lambda/rendermediaonlambda.mdx b/packages/docs/docs/lambda/rendermediaonlambda.mdx
index 7b316522054..1c7f689fcaa 100644
--- a/packages/docs/docs/lambda/rendermediaonlambda.mdx
+++ b/packages/docs/docs/lambda/rendermediaonlambda.mdx
@@ -15,8 +15,6 @@ A [site](/docs/lambda/deploysite) or a [Serve URL](/docs/terminology/serve-url)
## Example
```tsx twoslash
-// @module: esnext
-// @target: es2017
// ---cut---
import {renderMediaOnLambda} from '@remotion/lambda/client';
diff --git a/packages/docs/docs/lambda/renderstillonlambda.mdx b/packages/docs/docs/lambda/renderstillonlambda.mdx
index 7327c3b37fb..e1f020aff0b 100644
--- a/packages/docs/docs/lambda/renderstillonlambda.mdx
+++ b/packages/docs/docs/lambda/renderstillonlambda.mdx
@@ -257,10 +257,6 @@ _optional - default `false`, deprecated in v4.0_
Deprecated in favor of [`logLevel`](#loglevel).
-### `apiKey?` => {
+export const uploadWithProgress = ({file, url, onProgress}: {file: File; url: string; onProgress: OnUploadProgress}): Promise => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
diff --git a/packages/docs/docs/render-all.mdx b/packages/docs/docs/render-all.mdx
index d6010369144..6e75b3a1597 100644
--- a/packages/docs/docs/render-all.mdx
+++ b/packages/docs/docs/render-all.mdx
@@ -2,7 +2,7 @@
image: /generated/articles-docs-render-all.png
id: render-all
title: Render all compositions
-crumb: "Techniques"
+crumb: 'Techniques'
---
In some scenarios, you might find it useful to render all compositions.
@@ -35,18 +35,16 @@ This only works on UNIX-based systems (Linux, macOS) and on WSL in Windows.
You can create a script that fits you using the [Node.JS APIs](/docs/renderer). Below is an example
```ts twoslash title="render-all.mjs"
-// @module: esnext
-// @target: es2022
// ---cut---
-import { bundle } from "@remotion/bundler";
-import { getCompositions, renderMedia } from "@remotion/renderer";
-import { createRequire } from "module";
+import {bundle} from '@remotion/bundler';
+import {getCompositions, renderMedia} from '@remotion/renderer';
+import {createRequire} from 'module';
const require = createRequire(import.meta.url);
const bundled = await bundle({
- entryPoint: require.resolve("./src/index.ts"),
+ entryPoint: require.resolve('./src/index.ts'),
// If you have a Webpack override, make sure to add it here
webpackOverride: (config) => config,
});
@@ -56,7 +54,7 @@ const compositions = await getCompositions(bundled);
for (const composition of compositions) {
console.log(`Rendering ${composition.id}...`);
await renderMedia({
- codec: "h264",
+ codec: 'h264',
composition,
serveUrl: bundled,
outputLocation: `out/${composition.id}.mp4`,
diff --git a/packages/docs/docs/renderer/ensure-browser.mdx b/packages/docs/docs/renderer/ensure-browser.mdx
index d5e06ec0b3e..8068cc3675a 100644
--- a/packages/docs/docs/renderer/ensure-browser.mdx
+++ b/packages/docs/docs/renderer/ensure-browser.mdx
@@ -10,16 +10,12 @@ crumb: '@remotion/renderer'
Ensures a browser is locally installed so a Remotion render can be executed.
```tsx twoslash title="Simple usage"
-// @module: ESNext
-// @target: ESNext
import {ensureBrowser} from '@remotion/renderer';
await ensureBrowser();
```
```tsx twoslash title="Setting a specific Chrome version and listening to progress"
-// @module: ESNext
-// @target: ESNext
import {ensureBrowser} from '@remotion/renderer';
await ensureBrowser({
@@ -60,8 +56,6 @@ Specify a specific version of Chrome that should be used and hook into the downl
See the example below for the function signature.
```tsx twoslash title="init.ts"
-// @module: ESNext
-// @target: ESNext
import {ensureBrowser, OnBrowserDownload, DownloadBrowserProgressFn} from '@remotion/renderer';
const onProgress: DownloadBrowserProgressFn = ({percent, downloadedBytes, totalSizeInBytes}) => {
diff --git a/packages/docs/docs/renderer/extract-audio.mdx b/packages/docs/docs/renderer/extract-audio.mdx
index f51a7af3ce1..74f83835077 100644
--- a/packages/docs/docs/renderer/extract-audio.mdx
+++ b/packages/docs/docs/renderer/extract-audio.mdx
@@ -2,7 +2,7 @@
image: /generated/articles-docs-renderer-extract-audio.png
id: extract-audio
title: extractAudio()
-crumb: "@remotion/renderer"
+crumb: '@remotion/renderer'
---
# extractAudio()`](/docs/offthreadvideo).
```ts
-// @module: ESNext
-// @target: ESNext
-import { getCanExtractFramesFast } from "@remotion/renderer";
+import {getCanExtractFramesFast} from '@remotion/renderer';
const result = await getCanExtractFramesFast({
- src: "/var/path/to/video.mp4",
+ src: '/var/path/to/video.mp4',
});
console.log(result.canExtractFramesFast); // false
diff --git a/packages/docs/docs/renderer/get-silent-parts.mdx b/packages/docs/docs/renderer/get-silent-parts.mdx
index d73569b0440..bbea5fde3b5 100644
--- a/packages/docs/docs/renderer/get-silent-parts.mdx
+++ b/packages/docs/docs/renderer/get-silent-parts.mdx
@@ -2,15 +2,10 @@
image: /generated/articles-docs-renderer-get-silent-parts.png
id: get-silent-parts
title: getSilentParts()
-crumb: "@remotion/renderer"
+crumb: '@remotion/renderer'
---
-
-
-
- COPY syntax allows multiple files, but at least one file must
- exist. It is assumed package.json, src and{' '}
- public exist in your project, but you can adjust this to your
- needs.
+ COPY syntax allows multiple files, but at least one file must exist. It is assumed package.json, src and{' '}
+ public exist in your project, but you can adjust this to your needs.
-
-
- Remotion's origin is usually
http://localhost:3000, but it - may be different if rendering on Lambda or the port is busy. + Remotion's origin is usuallyhttp://localhost:3000, but it may be different if rendering on Lambda or the port is busy. - You can use{' '} @@ -27,9 +26,7 @@ Remote audio files need to support [CORS](https://developer.mozilla.org/en-US/do without the audio needing CORS.
- - You can{' '} - disable CORS{' '} - during renders. + You can disable CORS during renders.
-
:::
@@ -40,21 +40,17 @@ A string pointing to a GIF asset
## Example
```tsx twoslash
-// @module: ESNext
-// @target: ESNext
-import { useCallback, useEffect } from "react";
-import { staticFile } from "remotion";
+import {useCallback, useEffect} from 'react';
+import {staticFile} from 'remotion';
// ---cut---
-import { getGifDurationInSeconds } from "@remotion/gif";
-import gif from "./cat.gif";
+import {getGifDurationInSeconds} from '@remotion/gif';
+import gif from './cat.gif';
const MyComp: React.FC = () => {
const getDuration = useCallback(async () => {
const imported = await getGifDurationInSeconds(gif); // 127.452
- const publicFile = await getGifDurationInSeconds(staticFile("giphy.gif")); // 2.10
- const remote = await getGifDurationInSeconds(
- "https://media.giphy.com/media/xT0GqH01ZyKwd3aT3G/giphy.gif"
- ); // 3.23
+ const publicFile = await getGifDurationInSeconds(staticFile('giphy.gif')); // 2.10
+ const remote = await getGifDurationInSeconds('https://media.giphy.com/media/xT0GqH01ZyKwd3aT3G/giphy.gif'); // 3.23
}, []);
useEffect(() => {
diff --git a/packages/docs/docs/hardware-acceleration.mdx b/packages/docs/docs/hardware-acceleration.mdx
index b3ccb1acfe0..b4d26842b7f 100644
--- a/packages/docs/docs/hardware-acceleration.mdx
+++ b/packages/docs/docs/hardware-acceleration.mdx
@@ -26,8 +26,6 @@ If you want the render to fail if hardware acceleration is not possible, set the
Use the [`hardwareAcceleration`](/docs/renderer/render-media#hardwareacceleration) option in the [`renderMedia()`](/docs/renderer/render-media) function.
```tsx twoslash {8}
-// @module: esnext
-// @target: es2017
const serveUrl = '/path/to/bundle';
const outputLocation = '/path/to/frames';
diff --git a/packages/docs/docs/install-whisper-cpp/download-whisper-model.mdx b/packages/docs/docs/install-whisper-cpp/download-whisper-model.mdx
index 09119d25f19..877a24fd9d1 100644
--- a/packages/docs/docs/install-whisper-cpp/download-whisper-model.mdx
+++ b/packages/docs/docs/install-whisper-cpp/download-whisper-model.mdx
@@ -10,8 +10,6 @@ Downloads a Whisper.cpp model to a folder.
You should first install Whisper.cpp, for example through [`installWhisperCpp()`](/docs/install-whisper-cpp/install-whisper-cpp).
```tsx twoslash title="install-whisper.mjs"
-// @module: esnext
-// @target: es2022
import path from 'path';
import {downloadWhisperModel} from '@remotion/install-whisper-cpp';
@@ -38,10 +36,7 @@ Act upon download progress. This is the function signature:
```tsx twoslash
import type {OnProgress} from '@remotion/install-whisper-cpp';
-const onProgress: OnProgress = (
- downloadedBytes: number,
- totalBytes: number,
-) => {
+const onProgress: OnProgress = (downloadedBytes: number, totalBytes: number) => {
const progress = downloadedBytes / totalBytes;
};
```
diff --git a/packages/docs/docs/install-whisper-cpp/index.mdx b/packages/docs/docs/install-whisper-cpp/index.mdx
index cfca2878c30..b6187bd43b8 100644
--- a/packages/docs/docs/install-whisper-cpp/index.mdx
+++ b/packages/docs/docs/install-whisper-cpp/index.mdx
@@ -18,15 +18,8 @@ import {TableOfContents} from './install-whisper-cpp';
Install Whisper `1.5.5` (the latest version at the time of writing that we find works well and supports token-level timestamps) and the `medium.en` model to the `whisper.cpp` folder.
```tsx twoslash title="install-whisper.cpp"
-// @module: esnext
-// @target: es2022
import path from 'path';
-import {
- downloadWhisperModel,
- installWhisperCpp,
- transcribe,
- convertToCaptions,
-} from '@remotion/install-whisper-cpp';
+import {downloadWhisperModel, installWhisperCpp, transcribe, convertToCaptions} from '@remotion/install-whisper-cpp';
const to = path.join(process.cwd(), 'whisper.cpp');
diff --git a/packages/docs/docs/install-whisper-cpp/install-whisper-cpp.mdx b/packages/docs/docs/install-whisper-cpp/install-whisper-cpp.mdx
index 50a91873470..6f283f3ba0f 100644
--- a/packages/docs/docs/install-whisper-cpp/install-whisper-cpp.mdx
+++ b/packages/docs/docs/install-whisper-cpp/install-whisper-cpp.mdx
@@ -2,7 +2,7 @@
image: /generated/articles-docs-install-whisper-cpp-install-whisper-cpp.png
slug: install-whisper-cpp
title: installWhisperCpp()
-crumb: "@remotion/install-whisper-cpp"
+crumb: '@remotion/install-whisper-cpp'
---
# installWhisperCpp()More info
--
-
-
-Remotion's origin is usually
http://localhost:3000, but it may be different if rendering on Lambda or the port is busy. -
- - -You can disable CORS during renders. - -
More info
+-
+
-
+ Remotion's origin is usually
http://localhost:3000, but it may be different if rendering on Lambda or the port is busy. +
+ - + You can disable CORS during renders. + +
+
deleteAfter option.
## Apply the lifecycle rules
@@ -32,7 +32,7 @@ To put a lifecycle rule on the bucket, you need to have the `s3:PutLifecycleConf
6. Under the `"Sid": "Storage"` section, add `"s3:PutLifecycleConfiguration"` to the `"Action"` array.
7. Save.
-+
-
+
--Verify that it worked -
-In your S3 bucket, under "Management", you should see 4 lifecycle rules.
-
+ Verify that it worked
+In your S3 bucket, under "Management", you should see 4 lifecycle rules.
+
+
## Trigger a render with expiration @@ -110,19 +106,16 @@ npx remotion lambda render testbed-v6 react-svg --delete-after="1-day"
-All files should have an expiration rule and expiration date set when viewing the object properties. -
+All files should have an expiration rule and expiration date set when viewing the object properties.
--
+
+
AWS does not delete the file at the exact time, but the deletion will happen. diff --git a/packages/docs/docs/lambda/cli/functions.mdx b/packages/docs/docs/lambda/cli/functions.mdx index a80254337b4..17bb5cd203e 100644 --- a/packages/docs/docs/lambda/cli/functions.mdx +++ b/packages/docs/docs/lambda/cli/functions.mdx @@ -96,10 +96,6 @@ Use a custom role for the function instead of the default (`arn:aws:iam::[aws-ac Only logs the function name. -### `--enable-v5-runtime`
+
-
- Click next. On the tags page, you don't need to fill in anything. Click next again.
@@ -75,18 +73,13 @@ Optionally, if you want to move the video to another S3 bucket after it is rende
Use the `outName` property to select a different bucket. See: [Custom output destination](/docs/lambda/custom-destination)
```ts twoslash title="my-function.ts"
-// @module: esnext
-// @target: es2017
-// ---cut---
-
import {renderMediaOnLambda} from '@remotion/lambda/client';
const {bucketName, renderId} = await renderMediaOnLambda({
region: 'us-east-1',
functionName: 'remotion-render-bds9aab',
composition: 'MyVideo',
- serveUrl:
- 'https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw',
+ serveUrl: 'https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw',
codec: 'h264',
outName: {
key: 'my-output',
diff --git a/packages/docs/docs/licensing/get-usage.mdx b/packages/docs/docs/licensing/get-usage.mdx
index 7ecdecf0a72..eab6d9d8927 100644
--- a/packages/docs/docs/licensing/get-usage.mdx
+++ b/packages/docs/docs/licensing/get-usage.mdx
@@ -12,8 +12,6 @@ This requires your secret key that you can obtain from the remotion.pro dashboar
You should only call this API from the backend to avoid exposing your secret key to the client.
```tsx twoslash title="Get the current usage of your license"
-// @module: es2022
-// @target: es2017
import {getUsage} from '@remotion/licensing';
const usage = await getUsage({
diff --git a/packages/docs/docs/licensing/register-usage-point.mdx b/packages/docs/docs/licensing/register-usage-point.mdx
index 02e251c1b1a..fb1ae52ec5b 100644
--- a/packages/docs/docs/licensing/register-usage-point.mdx
+++ b/packages/docs/docs/licensing/register-usage-point.mdx
@@ -15,9 +15,6 @@ You do not need to call this function if you are using `@remotion/webcodecs`.
:::
```tsx twoslash title="Register a usage point"
-// @module: es2022
-// @target: es2017
-
import {registerUsageEvent} from '@remotion/licensing';
await registerUsageEvent({
diff --git a/packages/docs/docs/media-parser/download-and-parse-media.mdx b/packages/docs/docs/media-parser/download-and-parse-media.mdx
index 6da698ca989..03f3fd9b341 100644
--- a/packages/docs/docs/media-parser/download-and-parse-media.mdx
+++ b/packages/docs/docs/media-parser/download-and-parse-media.mdx
@@ -46,10 +46,10 @@ Throw an error to stop the download.
import {downloadAndParseMedia} from '@remotion/media-parser';
import {nodeWriter} from '@remotion/media-parser/node-writer';
-const {duration} = await downloadAndParseMedia({
+const {durationInSeconds} = await downloadAndParseMedia({
src: 'https://s3.amazonaws.com/bucket/uploaded-asset.mp4',
writer: nodeWriter('output.mp4'),
- onDuration: (duration) => {
+ onDurationInSeconds: (duration) => {
if (duration && duration > 600) {
throw new Error('Video is too long');
}
@@ -63,7 +63,7 @@ If an error occurs (including one you've thrown yourself), you can decide what t
import {downloadAndParseMedia} from '@remotion/media-parser';
import {nodeWriter} from '@remotion/media-parser/node-writer';
-const {duration} = await downloadAndParseMedia({
+await downloadAndParseMedia({
src: 'https://s3.amazonaws.com/bucket/uploaded-asset.mp4',
writer: nodeWriter('output.mp4'),
onError: (error) => {
diff --git a/packages/docs/docs/media-parser/fast-and-slow.mdx b/packages/docs/docs/media-parser/fast-and-slow.mdx
index 1afc9124006..528e6e6b1c6 100644
--- a/packages/docs/docs/media-parser/fast-and-slow.mdx
+++ b/packages/docs/docs/media-parser/fast-and-slow.mdx
@@ -50,7 +50,7 @@ The following [`fields`](/docs/media-parser#fields) require only the metadata se
- [`rotation`](/docs/media-parser/parse-media#rotation)
- [`location`](/docs/media-parser/parse-media#location)
- [`keyframes`](/docs/media-parser/parse-media#keyframes)
-- [`sampleRate`](/docs/media-parser/parse-media#sampleRate)
+- [`sampleRate`](/docs/media-parser/parse-media#samplerate)
- [`numberOfAudioChannels`](/docs/media-parser/parse-media#numberofaudiochannels)
Also, if an [`onVideoTrack`](/docs/media-parser/parse-media#onvideotrack) or [`onAudioTrack`](/docs/media-parser/parse-media#onvideotrack) handler is passed, only the parsing of the metadata section is required if `null` is returned from the handler function.
@@ -72,8 +72,6 @@ Otherwise, `@remotion/media-parser` has no choice but to read the full file if t
## Example
```tsx twoslash title="Reading header only"
-// @module: es2022
-// @target: es2017
import {parseMedia} from '@remotion/media-parser';
// ---cut---
diff --git a/packages/docs/docs/media-parser/fetch-reader.mdx b/packages/docs/docs/media-parser/fetch-reader.mdx
index 52c71042b2c..73c2edadacf 100644
--- a/packages/docs/docs/media-parser/fetch-reader.mdx
+++ b/packages/docs/docs/media-parser/fetch-reader.mdx
@@ -18,8 +18,6 @@ This is the default reader for `@remotion/media-parser`, so you don't need to ex
## Example
```tsx twoslash title="Reading a local file"
-// @module: es2022
-// @target: es2017
import {parseMedia} from '@remotion/media-parser';
import {fetchReader} from '@remotion/media-parser/fetch';
diff --git a/packages/docs/docs/media-parser/foreign-file-types.mdx b/packages/docs/docs/media-parser/foreign-file-types.mdx
index 65fddbfe521..911ac979e1e 100644
--- a/packages/docs/docs/media-parser/foreign-file-types.mdx
+++ b/packages/docs/docs/media-parser/foreign-file-types.mdx
@@ -12,8 +12,6 @@ Sometimes this error can contain useful information about the file type nonethel
This is useful if you allow users to upload an arbitrary file and want to get information about it with just one pass.
```tsx twoslash title="Get information about a video, or get the file type if it's not a video"
-// @module: es2022
-// @target: es2017
import {parseMedia, IsAnImageError, IsAGifError, IsAPdfError, IsAnUnsupportedFileTypeError, IsAnUnsupportedAudioTypeError} from '@remotion/media-parser';
try {
diff --git a/packages/docs/docs/media-parser/metadata.mdx b/packages/docs/docs/media-parser/metadata.mdx
index 3193d6e4cc5..5475fa48c44 100644
--- a/packages/docs/docs/media-parser/metadata.mdx
+++ b/packages/docs/docs/media-parser/metadata.mdx
@@ -15,8 +15,6 @@ Specify the [`fields`](/docs/media-parser/parse-media#fields) you would like to
This works in the browser as well as in Node.js and Bun.
```tsx twoslash title="Parsing a hosted video"
-// @module: es2022
-// @target: es2017
import {parseMedia} from '@remotion/media-parser';
const result = await parseMedia({
@@ -37,8 +35,6 @@ Use [`nodeReader`](/docs/media-parser/node-reader) to read a file from a filesys
This can be used in Node.js and Bun.
```tsx twoslash title="Parsing a video from a file path"
-// @module: es2022
-// @target: es2017
import {parseMedia} from '@remotion/media-parser';
import {nodeReader} from '@remotion/media-parser/node';
@@ -61,8 +57,6 @@ If you take user uploads in the browser, they will be in the form of a [`File`](
Use [`webFileReader`](/docs/media-parser/web-file-reader) to read a video from a [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File).
```tsx twoslash title="Parsing a video from a file path"
-// @module: es2022
-// @target: es2017
import {parseMedia} from '@remotion/media-parser';
import {webFileReader} from '@remotion/media-parser/web-file';
@@ -91,8 +85,6 @@ See [Fields](/docs/media-parser/parse-media#fields) for a complete list.
## Getting metadata as soon as possible
```tsx twoslash title="Parsing a video from a File"
-// @module: es2022
-// @target: es2017
import {parseMedia} from '@remotion/media-parser';
const result = await parseMedia({
diff --git a/packages/docs/docs/media-parser/node-reader.mdx b/packages/docs/docs/media-parser/node-reader.mdx
index c245a59de7b..4b3630aa4f1 100644
--- a/packages/docs/docs/media-parser/node-reader.mdx
+++ b/packages/docs/docs/media-parser/node-reader.mdx
@@ -17,8 +17,6 @@ It also works with Bun.
## Example
```tsx twoslash title="Reading a local file"
-// @module: es2022
-// @target: es2017
import {parseMedia} from '@remotion/media-parser';
import {nodeReader} from '@remotion/media-parser/node';
diff --git a/packages/docs/docs/media-parser/parse-media.mdx b/packages/docs/docs/media-parser/parse-media.mdx
index 390c5429ebf..cc33cc1dd27 100644
--- a/packages/docs/docs/media-parser/parse-media.mdx
+++ b/packages/docs/docs/media-parser/parse-media.mdx
@@ -17,8 +17,6 @@ The API for getting video metadata is stable and may be used in production.
## Examples
```tsx twoslash title="Parsing a hosted video"
-// @module: es2022
-// @target: es2017
import {parseMedia} from '@remotion/media-parser';
const result = await parseMedia({
@@ -34,8 +32,6 @@ console.log(result.dimensions); // {width: 1920, height: 1080}
```
```tsx twoslash title="Parsing a local file"
-// @module: es2022
-// @target: es2017
import {parseMedia} from '@remotion/media-parser';
import {nodeReader} from '@remotion/media-parser/node';
@@ -85,8 +81,6 @@ You must return either `null` or a callback that is called for each sample that
The `sample` has the type `VideoSample` and while not all fields are stable, it has all the mandatory fields for the [`EncodedVideoChunk`](https://developer.mozilla.org/en-US/docs/Web/API/EncodedVideoChunk) constructor.
```tsx twoslash title="Reading video frames"
-// @module: es2022
-// @target: es2017
import {parseMedia, OnVideoTrack} from '@remotion/media-parser';
const onVideoTrack: OnVideoTrack = ({track}) => {
@@ -107,8 +101,6 @@ You must return either `null` or a callback that is called for each sample that
The `sample` has the type `AudioSample` and while not all fields are stable, it has all the mandatory fields for the [`EncodedAudioChunk`](https://developer.mozilla.org/en-US/docs/Web/API/EncodedAudioChunk) constructor.
```tsx twoslash title="Reading audio frames"
-// @module: es2022
-// @target: es2017
// @noErrors
import {parseMedia, OnAudioTrack} from '@remotion/media-parser';
@@ -354,9 +346,6 @@ You do not have to add the field to the [`fields`](#fields) object if you use th
However, just like with [`fields`](#fields), adding a callback for a [slow field](/docs/media-parser/fast-and-slow) may require reading more of the file.
```tsx twoslash title="Using a callback"
-// @module: es2022
-// @target: es2017
-
import {parseMedia} from '@remotion/media-parser';
const result = await parseMedia({
diff --git a/packages/docs/docs/media-parser/tags.mdx b/packages/docs/docs/media-parser/tags.mdx
index be0ac5c9a7a..e64ef68e497 100644
--- a/packages/docs/docs/media-parser/tags.mdx
+++ b/packages/docs/docs/media-parser/tags.mdx
@@ -10,8 +10,6 @@ crumb: '@remotion/media-parser'
[`@remotion/media-parser`](/docs/media-parser) allows you to extract metadata that is embedded in video files, such as ID3 tags or EXIF data.
```tsx twoslash title="Extracting metadata"
-// @module: es2022
-// @target: es2017
import {parseMedia} from '@remotion/media-parser';
const {metadata} = await parseMedia({
diff --git a/packages/docs/docs/media-parser/web-file-reader.mdx b/packages/docs/docs/media-parser/web-file-reader.mdx
index ddee1dd6b8e..e87ce699669 100644
--- a/packages/docs/docs/media-parser/web-file-reader.mdx
+++ b/packages/docs/docs/media-parser/web-file-reader.mdx
@@ -18,8 +18,6 @@ Useful if you want to parse a video from a `` element.
## Example
```tsx twoslash title="Reading a local file"
-// @module: es2022
-// @target: es2017
import React, {useCallback} from 'react';
import {parseMedia} from '@remotion/media-parser';
import {webFileReader} from '@remotion/media-parser/web-file';
diff --git a/packages/docs/docs/media-parser/webcodecs.mdx b/packages/docs/docs/media-parser/webcodecs.mdx
index 3e9fa69d0cf..3d99435ce2e 100644
--- a/packages/docs/docs/media-parser/webcodecs.mdx
+++ b/packages/docs/docs/media-parser/webcodecs.mdx
@@ -27,8 +27,6 @@ It is a higher-level API that is easier to use than `@remotion/media-parser`.
`@remotion/media-parser` is a lower-level API that allows you to interface with WebCodecs directly.
```tsx twoslash title="Reading video frames"
-// @module: es2022
-// @target: es2017
import {parseMedia, OnAudioTrack, OnVideoTrack} from '@remotion/media-parser';
const onVideoTrack: OnVideoTrack = ({track}) => {
diff --git a/packages/docs/docs/openai-whisper/openai-whisper-api-to-captions.mdx b/packages/docs/docs/openai-whisper/openai-whisper-api-to-captions.mdx
index 1877fb9ed04..ba4f7684356 100644
--- a/packages/docs/docs/openai-whisper/openai-whisper-api-to-captions.mdx
+++ b/packages/docs/docs/openai-whisper/openai-whisper-api-to-captions.mdx
@@ -13,9 +13,6 @@ This package performs processing on the captions in order to retain the punctuat
This function can be used in any JavaScript environment, but you should not use the OpenAI API in the browser because your API key will be exposed to the browser.
```tsx twoslash title="Example usage"
-// @module: ESNext
-// @target: ESNext
-
import fs from 'fs';
import {OpenAI} from 'openai';
import {openAiWhisperApiToCaptions} from '@remotion/openai-whisper';
diff --git a/packages/docs/docs/passing-props.mdx b/packages/docs/docs/passing-props.mdx
index 3a4a76897d3..8a152595f78 100644
--- a/packages/docs/docs/passing-props.mdx
+++ b/packages/docs/docs/passing-props.mdx
@@ -3,7 +3,7 @@ image: /generated/articles-docs-passing-props.png
id: passing-props
title: Passing props to a composition
sidebar_label: Passing props
-crumb: "How To"
+crumb: 'How To'
---
```twoslash include example
@@ -38,7 +38,7 @@ When registering a component that takes props as a composition, you must define
// organize-imports-ignore
// @filename: MyComponent.tsx
-import React from "react";
+import React from 'react';
export const MyComponent: React.FC<{
propOne: string;
propTwo: number;
@@ -47,9 +47,9 @@ export const MyComponent: React.FC<{
// @filename: Root.tsx
// ---cut---
-import React from "react";
-import { Composition } from "remotion";
-import { MyComponent } from "./MyComponent";
+import React from 'react';
+import {Composition} from 'remotion';
+import {MyComponent} from './MyComponent';
export const Root: React.FC = () => {
return (
@@ -62,7 +62,7 @@ export const Root: React.FC = () => {
durationInFrames={30}
component={MyComponent}
defaultProps={{
- propOne: "Hi",
+ propOne: 'Hi',
propTwo: 10,
}}
/>
@@ -102,27 +102,25 @@ npx remotion render HelloWorld out/helloworld.mp4 --props=./path/to/props.json
When server-rendering using [`renderMedia()`](/docs/renderer/render-media) or [`renderMediaOnLambda()`](/docs/lambda/rendermediaonlambda), you can pass props using the [`inputProps`](/docs/renderer/render-media#inputprops) option:
```tsx twoslash {3-5, 10, 18}
-// @module: esnext
-// @target: es2017
-const serveUrl = "/path/to/bundle";
-const outputLocation = "/path/to/frames";
+const serveUrl = '/path/to/bundle';
+const outputLocation = '/path/to/frames';
// ---cut---
-import { renderMedia, selectComposition } from "@remotion/renderer";
+import {renderMedia, selectComposition} from '@remotion/renderer';
const inputProps = {
- titleText: "Hello World",
+ titleText: 'Hello World',
};
const composition = await selectComposition({
serveUrl,
- id: "my-video",
+ id: 'my-video',
inputProps,
});
await renderMedia({
composition,
serveUrl,
- codec: "h264",
+ codec: 'h264',
outputLocation,
inputProps,
});
@@ -140,13 +138,13 @@ When using GitHub Actions, you need to adjust the file at `.github/workflows/ren
workflow_dispatch:
inputs:
titleText:
- description: "Which text should it say?"
+ description: 'Which text should it say?'
required: true
- default: "Welcome to Remotion"
+ default: 'Welcome to Remotion'
titleColor:
- description: "Which color should it be in?"
+ description: 'Which color should it be in?'
required: true
- default: "black"
+ default: 'black'
```
### Retrieve input props
@@ -173,7 +171,7 @@ const AnotherComponent: React.FC = () => {
return null;
};
// ---cut---
-import { Series } from "remotion";
+import {Series} from 'remotion';
const ChainedScenes = () => {
return (
diff --git a/packages/docs/docs/player/player-integration.mdx b/packages/docs/docs/player/player-integration.mdx
index 34f4a2701d5..534a7aa9cd8 100644
--- a/packages/docs/docs/player/player-integration.mdx
+++ b/packages/docs/docs/player/player-integration.mdx
@@ -106,15 +106,7 @@ import {MyComp} from './MyComp';
export const MyVideo = () => {
return (
<>
- - Show full role permissions JSON file for latest Remotion Lambda version -
+Show full role permissions JSON file for latest Remotion Lambda version
- 1 Creating a{' '}
- Remotion Bundle
+ 1 Creating a Remotion Bundle
2 Select the composition to render and calculate its metadata
@@ -25,8 +24,6 @@ Rendering a video takes three steps: Follow this commented example to see how to render a video: ```tsx twoslash title="render.mjs" -// @module: ESNext -// @target: ESNext import {bundle} from '@remotion/bundler'; import {renderMedia, selectComposition} from '@remotion/renderer'; import path from 'path'; diff --git a/packages/docs/docs/studio/deploy-static.mdx b/packages/docs/docs/studio/deploy-static.mdx index c21866311a8..311ac041b5a 100644 --- a/packages/docs/docs/studio/deploy-static.mdx +++ b/packages/docs/docs/studio/deploy-static.mdx @@ -121,8 +121,6 @@ npx remotion render https://remotion-helloworld.vercel.app HelloWorld --props '{
```tsx twoslash title="render.mjs"
-// @module: esnext
-// @target: es2017
const outputLocation = '/path/to/frames';
import {renderMedia, selectComposition} from '@remotion/renderer';
@@ -159,8 +157,6 @@ npx remotion lambda render https://remotion-helloworld.vercel.app HelloWorld --p
```
```tsx twoslash title="Node.js/Bun"
-// @module: esnext
-// @target: es2017
// ---cut---
import {renderMediaOnLambda} from '@remotion/lambda/client';
@@ -187,8 +183,6 @@ npx remotion cloudrun render https://remotion-helloworld.vercel.app HelloWorld -
```
```tsx twoslash title="Node.js/Bun"
-// @module: esnext
-// @target: es2017
// ---cut---
import {renderMediaOnCloudrun} from '@remotion/cloudrun/client';
diff --git a/packages/docs/docs/using-audio.mdx b/packages/docs/docs/using-audio.mdx
index e28a716e5e5..5bc34266df9 100644
--- a/packages/docs/docs/using-audio.mdx
+++ b/packages/docs/docs/using-audio.mdx
@@ -3,7 +3,7 @@ image: /generated/articles-docs-using-audio.png
title: Using audio
sidebar_label: Audio
id: using-audio
-crumb: "Techniques"
+crumb: 'Techniques'
---
import Tabs from '@theme/Tabs';
@@ -15,12 +15,12 @@ import TabItem from '@theme/TabItem';
Add an [``](/docs/audio) tag to your component to add sound to it.
```tsx twoslash
-import { AbsoluteFill, Audio, staticFile } from "remotion";
+import {AbsoluteFill, Audio, staticFile} from 'remotion';
export const MyComposition = () => {
return (
-
+
);
};
@@ -29,7 +29,7 @@ export const MyComposition = () => {
You can also add remote audio by passing a URL:
```tsx twoslash
-import { AbsoluteFill, Audio } from "remotion";
+import {AbsoluteFill, Audio} from 'remotion';
export const MyComposition = () => {
return (
@@ -48,12 +48,12 @@ You can mix multiple tracks together by adding more audio tags.
The `` tag supports the `startFrom` and `endAt` props. In the following example, we assume that the [`fps`](/docs/composition#fps) of the composition is `30`.
```tsx twoslash {6}
-import { AbsoluteFill, Audio, staticFile } from "remotion";
+import {AbsoluteFill, Audio, staticFile} from 'remotion';
export const MyComposition = () => {
return (
-
+
);
};
@@ -70,13 +70,13 @@ Use a `` with a positive `from` value to delay the audio from playing.
In the following example, the audio will start playing (from the beginning) after 100 frames.
```tsx twoslash {6-8}
-import { AbsoluteFill, Audio, Sequence, staticFile } from "remotion";
+import {AbsoluteFill, Audio, Sequence, staticFile} from 'remotion';
export const MyComposition = () => {
return (
-
+
);
@@ -90,8 +90,8 @@ You can use the [`volume`](/docs/audio#volume) prop to control the volume.
The simplest way is to pass a number between 0 and 1. `1` is the maximum volume and `0` mutes the audio.
```tsx twoslash {8}
-import { Audio } from "remotion";
-import audio from "./audio.mp3";
+import {Audio} from 'remotion';
+import audio from './audio.mp3';
export const MyComposition = () => {
return (
@@ -106,17 +106,12 @@ export const MyComposition = () => {
You can also change volume over time by passing in a function that takes a frame number and returns the volume.
```tsx twoslash {8-10}
-import { AbsoluteFill, Audio, interpolate, staticFile } from "remotion";
+import {AbsoluteFill, Audio, interpolate, staticFile} from 'remotion';
export const MyComposition = () => {
return (
-
);
};
@@ -137,14 +132,14 @@ When using the [``](/docs/player), note that Mobile Safari [does not sup
You may pass in the `muted` and it may change over time. When `muted` is true, audio will be omitted at that time. In the following example, we are muting the track between frame 40 and 60.
```tsx twoslash {8}
-import { AbsoluteFill, Audio, staticFile, useCurrentFrame } from "remotion";
+import {AbsoluteFill, Audio, staticFile, useCurrentFrame} from 'remotion';
export const MyComposition = () => {
const frame = useCurrentFrame();
return (
-
);
};
@@ -199,16 +194,14 @@ npx remotion render src/index.ts my-comp --codec=mp3
To render only the audio via Node.JS, use [`renderMedia()`](/docs/renderer/render-media) and set the [`codec`](/docs/renderer/render-media#codec) to an audio codec.
```tsx twoslash
-// @module: ESNext
-// @target: ESNext
-import { bundle } from "@remotion/bundler";
-import { getCompositions, renderMedia } from "@remotion/renderer"; // The composition you want to render
-import path from "path";
-const compositionId = "HelloWorld";
+import {bundle} from '@remotion/bundler';
+import {getCompositions, renderMedia} from '@remotion/renderer'; // The composition you want to render
+import path from 'path';
+const compositionId = 'HelloWorld';
// You only have to do this once, you can reuse the bundle.
-const entry = "./src/index";
-console.log("Creating a Webpack bundle of the video");
+const entry = './src/index';
+console.log('Creating a Webpack bundle of the video');
const bundleLocation = await bundle(path.resolve(entry), () => undefined, {
// If you have a Webpack override, make sure to add it here
webpackOverride: (config) => config,
@@ -216,7 +209,7 @@ const bundleLocation = await bundle(path.resolve(entry), () => undefined, {
// Parametrize the video by passing arbitrary props to your component.
const inputProps = {
- foo: "bar",
+ foo: 'bar',
};
// Extract all the compositions you have defined in your project
@@ -242,7 +235,7 @@ const outputLocation = `out/${compositionId}.mp4`;
await renderMedia({
composition,
serveUrl: bundleLocation,
- codec: "mp3",
+ codec: 'mp3',
outputLocation,
inputProps,
});
@@ -254,23 +247,20 @@ await renderMedia({
To render only the audio via Lambda, use [`renderMediaOnLambda()`](/docs/lambda/rendermediaonlambda) and set the [`codec`](/docs/lambda/rendermediaonlambda#codec) to an audio codec and [`imageFormat`](/docs/lambda/rendermediaonlambda#imageformat) to `none`.
```tsx twoslash
-// @module: esnext
-// @target: es2017
-import { renderMediaOnLambda } from "@remotion/lambda";
+import {renderMediaOnLambda} from '@remotion/lambda';
// ---cut---
-const { bucketName, renderId } = await renderMediaOnLambda({
- region: "us-east-1",
- functionName: "remotion-render-bds9aab",
- composition: "MyVideo",
+const {bucketName, renderId} = await renderMediaOnLambda({
+ region: 'us-east-1',
+ functionName: 'remotion-render-bds9aab',
+ composition: 'MyVideo',
framesPerLambda: 20,
- serveUrl:
- "https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw",
+ serveUrl: 'https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw',
inputProps: {},
- codec: "mp3",
- imageFormat: "none",
+ codec: 'mp3',
+ imageFormat: 'none',
maxRetries: 1,
- privacy: "public",
+ privacy: 'public',
});
```
diff --git a/packages/docs/docs/videos/sequence.mdx b/packages/docs/docs/videos/sequence.mdx
index fb37f642daf..4ea2a12f928 100644
--- a/packages/docs/docs/videos/sequence.mdx
+++ b/packages/docs/docs/videos/sequence.mdx
@@ -37,10 +37,7 @@ export const VideosInSequence: React.FC = ({videos}) => {
}
return (
-
+
);
@@ -52,23 +49,15 @@ export const VideosInSequence: React.FC = ({videos}) => {
In the same file, create a function that calculates the metadata for the composition:
-1 Calls [`parseMedia()`](/docs/media-parser) to get the duration of
-each video.
+1 Calls [`parseMedia()`](/docs/media-parser) to get the duration of each video.
-2 Create a [`calculateMetadata()`](/docs/calculate-metadata)
-function that fetches the duration of each video.
+2 Create a [`calculateMetadata()`](/docs/calculate-metadata) function that fetches the duration of each video.
-3 Sums up all durations to get the total duration of the
-composition.
+3 Sums up all durations to get the total duration of the composition.
```tsx twoslash title="VideosInSequence.tsx"
import React from 'react';
-import {
- OffthreadVideo,
- staticFile,
- Series,
- CalculateMetadataFunction,
-} from 'remotion';
+import {OffthreadVideo, staticFile, Series, CalculateMetadataFunction} from 'remotion';
import {parseMedia} from '@remotion/media-parser';
type VideoToEmbed = {
@@ -81,9 +70,7 @@ type Props = {
};
// ---cut---
-export const calculateMetadata: CalculateMetadataFunction = async ({
- props,
-}) => {
+export const calculateMetadata: CalculateMetadataFunction = async ({props}) => {
const fps = 30;
const videos = await Promise.all([
...props.videos.map(async (video): Promise => {
@@ -101,10 +88,7 @@ export const calculateMetadata: CalculateMetadataFunction = async ({
}),
]);
- const totalDurationInFrames = videos.reduce(
- (acc, video) => acc + (video.durationInFrames ?? 0),
- 0,
- );
+ const totalDurationInFrames = videos.reduce((acc, video) => acc + (video.durationInFrames ?? 0), 0);
return {
props: {
@@ -122,12 +106,7 @@ In your [root file](/docs/terminology/root-file), create a [``](/do
```tsx twoslash title="Root.tsx"
// @filename: VideosInSequence.tsx
import React from 'react';
-import {
- OffthreadVideo,
- staticFile,
- Series,
- CalculateMetadataFunction,
-} from 'remotion';
+import {OffthreadVideo, staticFile, Series, CalculateMetadataFunction} from 'remotion';
import {parseMedia} from '@remotion/media-parser';
type VideoToEmbed = {
@@ -139,9 +118,7 @@ type Props = {
videos: VideoToEmbed[];
};
-export const calculateMetadata: CalculateMetadataFunction = async ({
- props,
-}) => {
+export const calculateMetadata: CalculateMetadataFunction = async ({props}) => {
const fps = 30;
const videos = await Promise.all([
...props.videos.map(async (video): Promise => {
@@ -159,10 +136,7 @@ export const calculateMetadata: CalculateMetadataFunction = async ({
}),
]);
- const totalDurationInFrames = videos.reduce(
- (acc, video) => acc + video.durationInFrames!,
- 0,
- );
+ const totalDurationInFrames = videos.reduce((acc, video) => acc + video.durationInFrames!, 0);
return {
props: {
@@ -183,10 +157,7 @@ export const VideosInSequence: React.FC = ({videos}) => {
}
return (
-
+
);
@@ -238,7 +209,7 @@ To create a smoother preview playback, we should do two things to all videos:
1 Add a [`premountFor`](/docs/series#premountfor) prop to [``](/docs/series). This will
invisibly mount the video tag before it is played, giving it some time to load.{' '}
-2 Add the [`pauseWhenBuffering`](/docs/series#premount) prop. This will transition the Player into a [buffering state](/docs/player/buffer-state), should the video still need to load.
+2 Add the [`pauseWhenBuffering`](/docs/offthreadvideo#pausewhenbuffering) prop. This will transition the Player into a [buffering state](/docs/player/buffer-state), should the video still need to load.
```tsx twoslash title="VideosInSequence.tsx" {14, 17}
import React from 'react';
@@ -265,11 +236,7 @@ export const VideosInSequence: React.FC = ({videos}) => {
}
return (
-
+
);
diff --git a/packages/docs/docs/webcodecs/can-copy-audio-track.mdx b/packages/docs/docs/webcodecs/can-copy-audio-track.mdx
index b40671164d2..22873b7972a 100644
--- a/packages/docs/docs/webcodecs/can-copy-audio-track.mdx
+++ b/packages/docs/docs/webcodecs/can-copy-audio-track.mdx
@@ -19,9 +19,6 @@ You can obtain an `AudioTrack` using [`parseMedia()`](/docs/media-parser/parse-m
## Examples
```tsx twoslash title="Check if an audio track can be copied"
-// @module: es2022
-// @target: es2017
-
import {parseMedia} from '@remotion/media-parser';
import {canCopyAudioTrack} from '@remotion/webcodecs';
@@ -43,9 +40,6 @@ for (const track of tracks.audioTracks) {
```
```tsx twoslash title="Copy an audio track to Opus, otherwise drop it"
-// @module: es2022
-// @target: es2017
-
import {convertMedia, canCopyAudioTrack} from '@remotion/webcodecs';
await convertMedia({
diff --git a/packages/docs/docs/webcodecs/can-copy-video-track.mdx b/packages/docs/docs/webcodecs/can-copy-video-track.mdx
index a42c587d7ad..6d831cefc36 100644
--- a/packages/docs/docs/webcodecs/can-copy-video-track.mdx
+++ b/packages/docs/docs/webcodecs/can-copy-video-track.mdx
@@ -22,8 +22,6 @@ You can obtain a `VideoTrack` using [`parseMedia()`](/docs/media-parser/parse-me
## Examples
```tsx twoslash title="Check if a video tracks can be copied"
-// @module: es2022
-// @target: es2017
import {parseMedia} from '@remotion/media-parser';
import {canCopyVideoTrack} from '@remotion/webcodecs';
@@ -47,9 +45,6 @@ for (const track of tracks.videoTracks) {
```
```tsx twoslash title="Copy a video track to VP8, otherwise drop it"
-// @module: es2022
-// @target: es2017
-
import {convertMedia, canCopyVideoTrack} from '@remotion/webcodecs';
await convertMedia({
diff --git a/packages/docs/docs/webcodecs/can-reencode-audio-track.mdx b/packages/docs/docs/webcodecs/can-reencode-audio-track.mdx
index 34845c24da5..212958abd96 100644
--- a/packages/docs/docs/webcodecs/can-reencode-audio-track.mdx
+++ b/packages/docs/docs/webcodecs/can-reencode-audio-track.mdx
@@ -19,9 +19,6 @@ You can obtain an `AudioTrack` using [`parseMedia()`](/docs/media-parser/parse-m
## Examples
```tsx twoslash title="Check if audio tracks can be re-encoded to Opus"
-// @module: es2022
-// @target: es2017
-
import {parseMedia} from '@remotion/media-parser';
import {canReencodeAudioTrack} from '@remotion/webcodecs';
@@ -42,8 +39,6 @@ for (const track of tracks.audioTracks) {
```
```tsx twoslash title="Convert an audio track to Opus, otherwise drop it"
-// @module: es2022
-// @target: es2017
import {convertMedia, canReencodeAudioTrack} from '@remotion/webcodecs';
await convertMedia({
diff --git a/packages/docs/docs/webcodecs/can-reencode-video-track.mdx b/packages/docs/docs/webcodecs/can-reencode-video-track.mdx
index f1df1782498..57f3a91476c 100644
--- a/packages/docs/docs/webcodecs/can-reencode-video-track.mdx
+++ b/packages/docs/docs/webcodecs/can-reencode-video-track.mdx
@@ -19,9 +19,6 @@ You can obtain a `VideoTrack` using [`parseMedia()`](/docs/media-parser/parse-me
## Examples
```tsx twoslash title="Check if video tracks can be re-encoded to VP8"
-// @module: es2022
-// @target: es2017
-
import {parseMedia} from '@remotion/media-parser';
import {canReencodeVideoTrack} from '@remotion/webcodecs';
@@ -43,8 +40,6 @@ for (const track of tracks.videoTracks) {
```
```tsx twoslash title="Convert a video track to VP8, otherwise drop it"
-// @module: es2022
-// @target: es2017
import {convertMedia, canReencodeVideoTrack} from '@remotion/webcodecs';
await convertMedia({
diff --git a/packages/docs/docs/webcodecs/convert-a-video.mdx b/packages/docs/docs/webcodecs/convert-a-video.mdx
index 9c09e940515..ab758cc7e7a 100644
--- a/packages/docs/docs/webcodecs/convert-a-video.mdx
+++ b/packages/docs/docs/webcodecs/convert-a-video.mdx
@@ -63,8 +63,6 @@ Install the `@remotion/webcodecs` and `@remotion/media-parser` packages:
(needs to be CORS-enabled)
```tsx twoslash title="Converting an MP4 to a WebM"
-// @module: es2022
-// @target: es2017
import {convertMedia} from '@remotion/webcodecs';
await convertMedia({
@@ -76,9 +74,6 @@ await convertMedia({
### Converting from a [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File):
```tsx twoslash title="Converting a file"
-// @module: es2022
-// @target: es2017
-
import {convertMedia} from '@remotion/webcodecs';
import {webFileReader} from '@remotion/media-parser/web-file';
@@ -97,9 +92,6 @@ await convertMedia({
You can specify the output codec by passing the [`videoCodec`](/docs/webcodecs/convert-media#videocodec) and [`audioCodec`](/docs/webcodecs/convert-media#audiocodec) options:
```tsx twoslash title="Converting to VP9"
-// @module: es2022
-// @target: es2017
-
import {convertMedia} from '@remotion/webcodecs';
await convertMedia({
diff --git a/packages/docs/docs/webcodecs/convert-media.mdx b/packages/docs/docs/webcodecs/convert-media.mdx
index 7c2340ce12f..2a8cfd582e0 100644
--- a/packages/docs/docs/webcodecs/convert-media.mdx
+++ b/packages/docs/docs/webcodecs/convert-media.mdx
@@ -25,8 +25,6 @@ import {UnstableDisclaimer} from './UnstableDisclaimer';
Re-encodes a video using [WebCodecs](https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API) and [`@remotion/media-parser`](/docs/media-parser).
```tsx twoslash title="Converting a video"
-// @module: es2022
-// @target: es2017
import {convertMedia} from '@remotion/webcodecs';
await convertMedia({
@@ -211,8 +209,6 @@ import {bufferWriter} from '@remotion/webcodecs/buffer';
Write to a resizable Array Buffer.
```tsx twoslash title="Web File System writer"
-// @module: es2022
-// @target: es2017
import {canUseWebFsWriter, webFsWriter} from '@remotion/webcodecs/web-fs';
// ^?
@@ -251,8 +247,6 @@ You can obtain information about the video file while you are converting it.
This feature is inherited from [`parseMedia()`](/docs/media-parser/parse-media), but only the callback-style API is available.
```tsx twoslash title="Converting a video"
-// @module: es2022
-// @target: es2017
import {convertMedia} from '@remotion/webcodecs';
await convertMedia({
diff --git a/packages/docs/docs/webcodecs/default-on-audio-track-handler.mdx b/packages/docs/docs/webcodecs/default-on-audio-track-handler.mdx
index 3ffff28824b..a0441c35271 100644
--- a/packages/docs/docs/webcodecs/default-on-audio-track-handler.mdx
+++ b/packages/docs/docs/webcodecs/default-on-audio-track-handler.mdx
@@ -10,8 +10,6 @@ This is the default function if no [`onAudioTrack`](/docs/webcodecs/convert-medi
You may use this function if you want to customize part of the track transformation logic, but fall back to the default behavior for the rest.
```tsx twoslash title="Falling back to the default behavior"
-// @module: es2022
-// @target: es2017
import {convertMedia, defaultOnVideoTrackHandler} from '@remotion/webcodecs';
await convertMedia({
@@ -40,52 +38,39 @@ The default behavior is as follows:
This is the source code for the default function. You may use this as a reference to create your own custom handler.
```tsx twoslash title="Source code for defaultOnAudioTrackHandler"
-import {
- canReencodeAudioTrack,
- AudioOperation,
- ConvertMediaOnAudioTrackHandler,
- getDefaultAudioCodec,
-} from '@remotion/webcodecs';
+import {canReencodeAudioTrack, AudioOperation, ConvertMediaOnAudioTrackHandler, getDefaultAudioCodec} from '@remotion/webcodecs';
const DEFAULT_BITRATE = 128_000;
-export const defaultOnAudioTrackHandler: ConvertMediaOnAudioTrackHandler =
- async ({
+export const defaultOnAudioTrackHandler: ConvertMediaOnAudioTrackHandler = async ({track, defaultAudioCodec, logLevel, inputContainer, outputContainer, canCopyTrack}): Promise => {
+ const bitrate = DEFAULT_BITRATE;
+
+ if (canCopyTrack) {
+ return Promise.resolve({type: 'copy'});
+ }
+
+ // In the future, we might support containers that don't support audio
+ // (like GIF, animated WebP, etc.) - in that case, we should drop the audio
+ if (defaultAudioCodec === null) {
+ return Promise.resolve({type: 'drop'});
+ }
+
+ const canReencode = await canReencodeAudioTrack({
+ audioCodec: defaultAudioCodec,
track,
- defaultAudioCodec,
- logLevel,
- inputContainer,
- outputContainer,
- canCopyTrack,
- }): Promise => {
- const bitrate = DEFAULT_BITRATE;
-
- if (canCopyTrack) {
- return Promise.resolve({type: 'copy'});
- }
-
- // In the future, we might support containers that don't support audio
- // (like GIF, animated WebP, etc.) - in that case, we should drop the audio
- if (defaultAudioCodec === null) {
- return Promise.resolve({type: 'drop'});
- }
-
- const canReencode = await canReencodeAudioTrack({
- audioCodec: defaultAudioCodec,
- track,
+ bitrate,
+ });
+
+ if (canReencode) {
+ return Promise.resolve({
+ type: 'reencode',
bitrate,
+ audioCodec: defaultAudioCodec,
});
+ }
- if (canReencode) {
- return Promise.resolve({
- type: 'reencode',
- bitrate,
- audioCodec: defaultAudioCodec,
- });
- }
-
- return Promise.resolve({type: 'fail'});
- };
+ return Promise.resolve({type: 'fail'});
+};
```
## See also
diff --git a/packages/docs/docs/webcodecs/default-on-video-track-handler.mdx b/packages/docs/docs/webcodecs/default-on-video-track-handler.mdx
index 7acf261f5de..309a6e2fb32 100644
--- a/packages/docs/docs/webcodecs/default-on-video-track-handler.mdx
+++ b/packages/docs/docs/webcodecs/default-on-video-track-handler.mdx
@@ -10,8 +10,6 @@ This is the default function if no [`onVideoTrack`](/docs/webcodecs/convert-medi
You may use this function if you want to customize part of the track transformation logic, but fall back to the default behavior for the rest.
```tsx twoslash title="Falling back to the default behavior"
-// @module: es2022
-// @target: es2017
import {convertMedia, defaultOnAudioTrackHandler} from '@remotion/webcodecs';
await convertMedia({
diff --git a/packages/docs/docs/webcodecs/fix-a-mediarecorder-video.mdx b/packages/docs/docs/webcodecs/fix-a-mediarecorder-video.mdx
index c5a70b3f76d..81093d1daac 100644
--- a/packages/docs/docs/webcodecs/fix-a-mediarecorder-video.mdx
+++ b/packages/docs/docs/webcodecs/fix-a-mediarecorder-video.mdx
@@ -47,9 +47,6 @@ ffmpeg -i input.webm -c copy output.webm
You can also re-encode the video in the browser using the new and experimental [`@remotion/webcodecs`](/docs/webcodecs) package.
```tsx twoslash title="Re-encoding a video"
-// @module: es2022
-// @target: es2017
-
import {convertMedia} from '@remotion/webcodecs';
import {webFileReader} from '@remotion/media-parser/web-file';
@@ -82,9 +79,6 @@ import {UnstableDisclaimer} from './UnstableDisclaimer';
Instead of re-encoding to an MP4, you can also re-mux the video to a new WebM file:
```tsx twoslash title="Re-muxing a video"
-// @module: es2022
-// @target: es2017
-
import {convertMedia} from '@remotion/webcodecs';
import {webFileReader} from '@remotion/media-parser/web-file';
diff --git a/packages/docs/docs/webcodecs/resizing.mdx b/packages/docs/docs/webcodecs/resizing.mdx
index 4dbe1a7359f..c313e4e78b7 100644
--- a/packages/docs/docs/webcodecs/resizing.mdx
+++ b/packages/docs/docs/webcodecs/resizing.mdx
@@ -24,8 +24,6 @@ import {UnstableDisclaimer} from './UnstableDisclaimer';
## Simple Example
```tsx twoslash title="Scale a video down to 480p"
-// @module: es2022
-// @target: es2017
import {convertMedia} from '@remotion/webcodecs';
await convertMedia({
diff --git a/packages/docs/docs/webcodecs/rotation.mdx b/packages/docs/docs/webcodecs/rotation.mdx
index c7c12f21bf0..6257a79b670 100644
--- a/packages/docs/docs/webcodecs/rotation.mdx
+++ b/packages/docs/docs/webcodecs/rotation.mdx
@@ -24,8 +24,6 @@ import {UnstableDisclaimer} from './UnstableDisclaimer';
## Simple Example
```tsx twoslash title="Rotate 90 degrees clockwise"
-// @module: es2022
-// @target: es2017
import {convertMedia} from '@remotion/webcodecs';
await convertMedia({
@@ -50,8 +48,6 @@ If you want the video to not automatically be rotated, you need to re-apply the
The rotations will negate each other, and [`convertMedia()`](/docs/webcodecs/convert-media) will not execute any code to apply rotation.
```tsx twoslash title="Prevent automatic video rotation"
-// @module: es2022
-// @target: es2017
import {convertMedia, defaultOnVideoTrackHandler} from '@remotion/webcodecs';
await convertMedia({
diff --git a/packages/docs/docs/webcodecs/telemetry.mdx b/packages/docs/docs/webcodecs/telemetry.mdx
index 619950c497f..14771283899 100644
--- a/packages/docs/docs/webcodecs/telemetry.mdx
+++ b/packages/docs/docs/webcodecs/telemetry.mdx
@@ -36,8 +36,6 @@ Remotion will not share any telemetry data with others.
You may add an API key that you obtained from [`remotion.pro`](https://remotion.pro) to the [`convertMedia()`](/docs/webcodecs/convert-media) function.
```tsx twoslash title="Adding an API key"
-// @module: es2022
-// @target: es2017
import {convertMedia} from '@remotion/webcodecs';
await convertMedia({
diff --git a/packages/docs/docs/webcodecs/track-transformation.mdx b/packages/docs/docs/webcodecs/track-transformation.mdx
index 2f9f4572e6e..6952e8764b3 100644
--- a/packages/docs/docs/webcodecs/track-transformation.mdx
+++ b/packages/docs/docs/webcodecs/track-transformation.mdx
@@ -19,8 +19,6 @@ When transforming media, there are multiple thing that can be done for each audi
The minimum amount of configuration is to only specify a [`src`](/docs/webcodecs/convert-media#src) and an output [`container`](/docs/webcodecs/convert-media#container).
```tsx twoslash title="Using the default codecs"
-// @module: es2022
-// @target: es2017
import {convertMedia} from '@remotion/webcodecs';
await convertMedia({
@@ -36,8 +34,6 @@ The default codecs are defined by [`getDefaultAudioCodec()`](/docs/webcodecs/get
You can use the [`videoCodec`](/docs/webcodecs/convert-media#videocodec) and [`audioCodec`](/docs/webcodecs/convert-media#audiocodec) options to transform all tracks to the codecs you specify.
```tsx twoslash title="Choosing video and audio codecs"
-// @module: es2022
-// @target: es2017
import {convertMedia} from '@remotion/webcodecs';
await convertMedia({
@@ -53,8 +49,6 @@ await convertMedia({
With the [`onVideoTrack`](/docs/webcodecs/convert-media#onvideotrack) and [`onAudioTrack`](/docs/webcodecs/convert-media#onaudiotrack) callbacks, you can decide for each track what to do with it.
```tsx twoslash title="Using the onVideoTrack() API"
-// @module: es2022
-// @target: es2017
import {convertMedia} from '@remotion/webcodecs';
await convertMedia({
@@ -94,8 +88,6 @@ The enums `ConvertMediaVideoCodec` and `ConvertMediaAudioCodec` can be imported
To check if it is possible to return `{"type": "copy"}`, you can use `canCopyTrack` property you get from `onVideoTrack`.
```tsx twoslash title="Using the canCopyVideoTrack() API"
-// @module: es2022
-// @target: es2017
import {convertMedia} from '@remotion/webcodecs';
await convertMedia({
@@ -119,8 +111,6 @@ To check outside of a `onVideoTrack` handler, you can also use the the [`canCopy
To check if it is possible to return `{"type": "reencode"}`, you can use the [`canReencodeVideoTrack()`](/docs/webcodecs/can-reencode-video-track) and [`canReencodeAudioTrack()`](/docs/webcodecs/can-reencode-audio-track) APIs.
```tsx twoslash title="Using the canReencodeVideoTrack() API"
-// @module: es2022
-// @target: es2017
import {convertMedia, canReencodeVideoTrack} from '@remotion/webcodecs';
await convertMedia({
@@ -156,9 +146,6 @@ If you want to display a UI letting the user choose codec settings before the co
Use [`parseMedia()`](/docs/media-parser/parse-media) to get video and audio tracks respectively:
```tsx twoslash title="Using parseMedia() to get tracks upfront."
-// @module: es2022
-// @target: es2017
-
import {parseMedia} from '@remotion/media-parser';
const {tracks} = await parseMedia({
@@ -183,8 +170,6 @@ The default values for [`onVideoTrack`](/docs/webcodecs/convert-media#onvideotra
If you only want to override part of the logic, you can return the default resolver functions at the end of your logic.
```tsx twoslash title="Falling back to the default behavior"
-// @module: es2022
-// @target: es2017
import {convertMedia, defaultOnAudioTrackHandler} from '@remotion/webcodecs';
await convertMedia({
diff --git a/packages/docusaurus-plugin/src/caching.ts b/packages/docusaurus-plugin/src/caching.ts
index 9599a93a615..bd1f8f66aab 100644
--- a/packages/docusaurus-plugin/src/caching.ts
+++ b/packages/docusaurus-plugin/src/caching.ts
@@ -2,6 +2,7 @@
import type {TwoSlashReturn} from '@typescript/twoslash';
import type {UserConfigSettings} from 'shiki-twoslash';
import {runTwoSlash} from 'shiki-twoslash';
+import {ModuleKind, ScriptTarget} from 'typescript';
/**
* Keeps a cache of the JSON responses to a twoslash call in node_modules/.cache/twoslash
@@ -13,21 +14,6 @@ export const cachedTwoslashCall = (
lang: string,
settings: UserConfigSettings,
): TwoSlashReturn => {
- const isWebWorker =
- typeof self !== 'undefined' &&
- // @ts-expect-error
- typeof self.WorkerGlobalScope !== 'undefined';
- const isBrowser =
- isWebWorker ||
- (typeof window !== 'undefined' &&
- typeof window.document !== 'undefined' &&
- typeof fetch !== 'undefined');
-
- if (isBrowser) {
- // Not in Node, run un-cached
- return runTwoSlash(code, lang, settings);
- }
-
const {createHash} = require('crypto');
const {readFileSync, existsSync, mkdirSync, writeFileSync} = require('fs');
const {join} = require('path');
@@ -56,7 +42,14 @@ export const cachedTwoslashCall = (
return JSON.parse(readFileSync(cachePath, 'utf8'));
}
- const results = runTwoSlash(code, lang, settings);
+ const results = runTwoSlash(code, lang, {
+ ...settings,
+ defaultCompilerOptions: {
+ ...settings.defaultCompilerOptions,
+ target: ScriptTarget.ESNext,
+ module: ModuleKind.ESNext,
+ },
+ });
if (!existsSync(cacheRoot)) mkdirSync(cacheRoot, {recursive: true});
writeFileSync(cachePath, JSON.stringify(results), 'utf8');
return results;
diff --git a/packages/docusaurus-plugin/src/shiki.ts b/packages/docusaurus-plugin/src/shiki.ts
index 25128095ac3..da4abdc1de5 100644
--- a/packages/docusaurus-plugin/src/shiki.ts
+++ b/packages/docusaurus-plugin/src/shiki.ts
@@ -90,14 +90,6 @@ export const runTwoSlashOnNode = (
{lang, meta}: {lang: string; meta: Record},
settings = {},
) => {
- // Offer a way to do high-perf iterations, this is less useful
- // given that we cache the results of twoslash in the file-system
- const shouldDisableTwoslash =
- typeof process !== 'undefined' &&
- process.env &&
- Boolean(process.env.TWOSLASH_DISABLE);
- if (shouldDisableTwoslash) return undefined;
-
// Only run twoslash when the meta has the attribute twoslash
if (meta.twoslash) {
const importedCode = replaceIncludesInCode(includes, code);
@@ -25,8 +24,6 @@ Rendering a video takes three steps: Follow this commented example to see how to render a video: ```tsx twoslash title="render.mjs" -// @module: ESNext -// @target: ESNext import {bundle} from '@remotion/bundler'; import {renderMedia, selectComposition} from '@remotion/renderer'; import path from 'path'; diff --git a/packages/docs/docs/studio/deploy-static.mdx b/packages/docs/docs/studio/deploy-static.mdx index c21866311a8..311ac041b5a 100644 --- a/packages/docs/docs/studio/deploy-static.mdx +++ b/packages/docs/docs/studio/deploy-static.mdx @@ -121,8 +121,6 @@ npx remotion render https://remotion-helloworld.vercel.app HelloWorld --props '{