### Initializing - Composition - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/composition.mdx

Import the core library and create a new instance of the Composition class to start a video project. The Composition object manages the entire project state.

```typescript
import * as core from '@diffusionstudio/core';

const composition = new core.Composition();
```

--------------------------------

### Installing Core Library (Bash)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/index.mdx

Command to install the Core library using npm. This adds the library as a dependency to your project, allowing you to use its video editing functionalities.

```bash
npm install @diffusionstudio/core
```

--------------------------------

### Mounting & Scaling - Composition Player - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/composition.mdx

Attach the Composition's visual representation to a DOM element and scale it to fit within a container while maintaining aspect ratio. This snippet gets DOM elements, mounts the composition, calculates scale, and applies styles.

```typescript
const container = document.getElementById('player-container') as HTMLDivElement;
const player = document.getElementById('player') as HTMLDivElement;

composition.mount(player);

const scale = Math.min(
  container.clientWidth / composition.width,
  container.clientHeight / composition.height,
);

player.style.width = `${composition.width}px`;
player.style.height = `${composition.height}px`;
player.style.transform = `scale(${scale})`;
player.style.transformOrigin = 'center';
```

--------------------------------

### Full Video Manipulation and Export Example in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/video.mdx

Provides a complete end-to-end example demonstrating the entire workflow: initializing composition, attaching a player, creating and manipulating a video clip directly from a URL, adding it to the composition, initializing the encoder, and rendering the final video.

```typescript
import * as core from '@diffusionstudio/core';

const composition = new core.Composition();

const player = document.getElementById('player') as HTMLDivElement;
composition.attachPlayer(player);

const video = new VideoClip('https://diffusion-studio-public.s3.eu-central-1.amazonaws.com/videos/big_buck_bunny_1080p_30fps.mp4', {
    position: 'center',
    height: '100%',
    width: '100%',
})
  .offset(-30)
  .subclip(0, 180);

await composition.add(video);

const encoder = new core.Encoder(composition);
await encoder.render('myVideo.mp4');
```

--------------------------------

### Rendering Text with Diffusion Studio Core (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/terminology.mdx

This snippet demonstrates the basic steps to render a text clip using the Diffusion Studio core library. It imports the library, creates a TextClip instance, adds it to a Composition, and then uses an Encoder to render the composition into a blob.

```typescript
import * as core from '@diffusionstudio/core';

const text = new core.TextClip({
  text: 'Hello World',
  position: 'center'
});

const composition = new core.Composition();       // create root object
await composition.add(text);                      // render text

const blob = await new core.Encoder(composition).render();
```

--------------------------------

### Create Sources using Source.from

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

All types of sources (e.g., `VideoSource`) are now created using the generic `Source.from()` method, typically with a type parameter.

```diff
- await VideoSource.from();
+ await Source.from<VideoSource>();
```

--------------------------------

### Controlling Playback - Composition - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/composition.mdx

Access essential playback controls directly from the Composition object, including starting playback, pausing, and seeking to a specific time or frame.

```typescript
await composition.play();
await composition.pause();
await composition.seek(30);
```

--------------------------------

### Replace MediaClip with AudioClip

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

The `MediaClip` type has been removed in v3.x. Use the `AudioClip` type instead for handling audio.

```diff
- MediaClip
+ AudioClip
```

--------------------------------

### Controlling Realtime Playback in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/video.mdx

Illustrates various methods available on the composition object for realtime playback control, including starting, pausing, seeking, getting current time, and subscribing to frame events.

```typescript
composition.play(); // start playback
composition.pause(); // pause playback
composition.seek(120); // seek to a specific frame
composition.time(); // get human-readable time (e.g., 00:04 / 00:05)
composition.on('currentframe', console.log); // log frame events
```

--------------------------------

### Fetching Audio Source and Creating Clip - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/audio.mdx

Imports the core library, fetches an audio source from a URL, and adds a new AudioClip created from the source to the composition. This sets up the initial audio clip for manipulation.

```typescript
import * as core from '@diffusionstudio/core';

const source = await core.Source.from<core.AudioSource>('https://diffusion-studio-public.s3.eu-central-1.amazonaws.com/audio/piano.mp3');

const clip0 = await composition.add(new core.AudioClip(source));
```

--------------------------------

### Inserting Layer - Composition - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/composition.mdx

Create a Layer instance separately, potentially add clips to it beforehand, and then asynchronously insert it into the Composition. The asynchronous nature accounts for clip initialization.

```typescript
const layer = new Layer();
// add clips beforehand
await composition.insertLayer(layer);
```

--------------------------------

### Use Transcript.from() for Transcript Creation

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

The `Transcript.fromJSON()` method has been removed. Use the updated `Transcript.from()` method, which now accepts both JSON strings and objects.

```diff
- Transcript.fromJSON();
+ Transcript.from();
```

--------------------------------

### Splitting AudioClip - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/audio.mdx

Splits the existing `clip0` at the specified time ('8s'). This creates a new clip (`clip1`) starting 1ms after the split point, while the original clip (`clip0`) is shortened to end at the split point.

```typescript
const clip1 = await clip0.split('8s');
```

--------------------------------

### Creating Sequential Layer and Adding AudioClip - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/audio.mdx

Creates a new layer in the composition and configures it as a sequential layer. An AudioClip is then created directly from a URL and added to this sequential layer, demonstrating an automated approach to managing clips.

```typescript
const layer = composition.createLayer().sequential();
await layer.add(
  new core.AudioClip('https://diffusion-studio-public.s3.eu-central-1.amazonaws.com/audio/piano.mp3')
);
```

--------------------------------

### Trimming ImageClip Position and Duration (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/image.mdx

Explains how to use the trim method to set both the clip's start time (delay) and its duration simultaneously. The parameters define the new start and end times.

```typescript
image.trim(0, 100);
```

--------------------------------

### Create Captions via composition.createCaptions

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

Captions are now created at the top level using `composition.createCaptions()`. This method accepts either an `AudioClip` or a transcript object.

```diff
- audioClip.createCaptions();
- audioTrack.createCaptions();
+ composition.createCaptions(audioClip | transcript);
```

--------------------------------

### Manually Constructing Transcript (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/transcript.mdx

Shows how to create a `Transcript` instance manually by providing an array of `WordGroup` objects, where each `WordGroup` contains an array of `Word` objects. Each `Word` object requires the text, start time, and stop time. Requires the `@diffusionstudio/core` dependency.

```typescript
import * as core from '@diffusionstudio/core';

const transcript = new core.Transcript([
  new core.WordGroup([
    new core.Word('Hello', 0, 300),
    new core.Word('World', 320, 600),
  ])
]);
```

--------------------------------

### Structure - Player Container - HTML

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/composition.mdx

Define the basic HTML structure for a container and a player element where the Composition's visual output will be mounted. The outer div acts as a flexible container.

```html
<div id="player-container">
  <div id="player"></div>
</div>
```

--------------------------------

### Remove composition.audio() Method

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

The `composition.audio()` method has been removed in v3.x.

```diff
- composition.audio();
```

--------------------------------

### Creating Font and Composition Checkpoints in Diffusion Studio (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/checkpoints.mdx

This example illustrates how to manage checkpoints for both custom fonts and compositions. It shows initializing a FontManager, loading a font, creating a font checkpoint, and then creating a composition checkpoint.

```typescript
import * as core from '@diffusionstudio/core';

const fontManager = new core.FontManager();

const font = await fontManager.load({
  family: 'Geologica',
  weight: '800',
});

const fontCheckpoint = await fontManager.createCheckpoint();

const composition = new core.Composition();
const compositionCheckpoint = await composition.createCheckpoint();
```

--------------------------------

### Constructing Transcript from JSON (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/transcript.mdx

Demonstrates how to create a `Transcript` instance using the static `from` method. It shows examples for loading from an in-memory `Captions` object and asynchronously loading from a remote JSON URL. Requires the `@diffusionstudio/core` dependency.

```typescript
import * as core from '@diffusionstudio/core';

const transcript = core.Transcript.from(captions); // `captions` is of type Captions

// or

const transcript = await core.Transcript.from('https://.../captions.json'); // to load from a remote JSON file
```

--------------------------------

### Rendering to Alternative Targets - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/rendering.mdx

Provides examples of alternative rendering targets when showSaveFilePicker is not available, including returning a Blob, triggering a download, or streaming data to a callback function.

```typescript
const blob = await encoder.render();            // Returns the video as a Blob.
await encoder.render('myVideo.mp4');            // Downloads the result with a specified name.
await encoder.render((data: Uint8Array, position: number) => {
  console.log(data, position)
});                                             // Streams the video to a callback.
```

--------------------------------

### Rename stacked() to sequential()

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

The method `stacked()` on a track (now layer) has been renamed to `sequential()`.

```diff
- track.stacked();
+ layer.sequential();
```

--------------------------------

### Rename renderer.ctx to renderer.context

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

The property for accessing the video rendering context on the renderer object has been renamed from `ctx` to `context`.

```diff
- renderer.ctx;
+ renderer.context;
```

--------------------------------

### Taking Screenshot - Composition - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/composition.mdx

Seek to a specific time in the Composition and then capture the current frame as a data URL. This allows saving the visual state at a given point.

```typescript
await composition.seek('10s');
const dataUrl = await composition.screenshot();
```

--------------------------------

### Styling - Player Container - CSS

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/composition.mdx

Apply CSS styles to the player container to center its content (the player element). This uses flexbox properties for alignment.

```css
#player-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

--------------------------------

### Adding Clip - Composition - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/composition.mdx

Create a Clip instance and use the Composition's add method to create a new Layer for it and append the clip. This is an asynchronous operation.

```typescript
const clip = new VideoClip();
await composition.add(clip);
```

--------------------------------

### Access Source 'added' Status via source.data

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

The `source.added` attribute has been removed. Access and modify the 'added' status via `source.data.added` instead.

```diff
- source.added;
+ source.data.added = true;
```

--------------------------------

### Manipulating Clips in Sequential Layer - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/audio.mdx

Demonstrates manipulating clips within a sequential layer using the track reference. It splits the first clip, then trims the first resulting clip and the second resulting clip. Offsets are handled automatically by the sequential layer.

```typescript
await track.clips[0].split(240); // Split the first clip

track.clips[0].subclip(15, 80); // Trim the first clip
track.clips[1].subclip(420);    // Trim the second clip
```

--------------------------------

### Setting ImageClip Delay Directly (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/image.mdx

Illustrates setting the delay property directly to specify the exact start time of the clip on the timeline. This is an alternative to using the offset method.

```typescript
image.delay = 0;
```

--------------------------------

### Enabling Sequential Mode for Diffusion Studio Layer (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/layers.mdx

Explains how to configure a `Layer` to operate in sequential mode using the `layer.sequential()` method. In this mode, subsequently added clips will automatically start immediately after the previous one ends.

```TypeScript
layer.sequential(); // disable with layer.sequential(false);
```

--------------------------------

### Rename Keyframe 'frame' Property to 'time'

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

The property used to specify the position of an animation keyframe has been renamed from `frame` to `time`.

```diff
- keyframe.frame;
+ keyframe.time;
```

--------------------------------

### Creating Layer - Composition - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/composition.mdx

Use the Composition's built-in method to create and add a new Layer directly to the composition's layer stack. This is a convenient way to manage layers.

```typescript
const layer = composition.createLayer();
```

--------------------------------

### Access Top-Level Clips via composition.clips

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

The `composition.findClips()` method has been removed. Top-level clips are now accessed via the new `composition.clips` getter. Use `composition.clips.find()` to replicate the old method's functionality.

```diff
+ composition.clips;

- composition.findClips();
+ composition.clips.find();
```

--------------------------------

### Unmounting - Composition Player - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/composition.mdx

Remove the Composition's visual representation from the DOM element it was previously mounted to. This is necessary before mounting it to a different element.

```typescript
composition.unmount();
```

--------------------------------

### Updated Animation Keyframe JSON Structure

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

The JSON structure for animation keyframes has been updated. The `frame` property within the `frames` array has been renamed to `time`.

```json
// Old Structure
{
    "key": "scale",
    "frames": [
        { "frame": 0, "value": 0.3 },
        { "frame": 10, "value": 1 }
    ]
}

// New Structure
{
    "key": "scale",
    "frames": [
        { "time": 0, "value": 0.3 },
        { "time": 10, "value": 1 }
    ]
}
```

--------------------------------

### Rename Track to Layer and Update Methods

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

The `Track` type has been unified and renamed to `Layer`. All references to `Track` in composition methods and properties have been updated to `Layer`.

```diff
- composition.createTrack(type);
+ composition.createLayer();

- composition.insertTrack(layer, index);
+ composition.insertLayer(layer, index);

- composition.findTracks();
+ composition.layers.find();

- composition.tracks;
+ composition.layers;
```

--------------------------------

### Access Layer Type with New Getter

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/v2-v3.mdx

A new getter `type` has been added to the `Layer` object to retrieve its type, determined by the first clip added.

```diff
+ layer.type;
```

--------------------------------

### Adding Clips to Diffusion Studio Layer (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/layers.mdx

Shows how to add `Clip` instances (specifically `TextClip` examples) to a `Layer` using the asynchronous `layer.add()` method. It highlights the non-overlapping constraint and the asynchronous nature of the operation.

```TypeScript
await layer.add(
  new core.TextClip({
    text: 'Hello',
    delay: 0, // Default delay
    duration: 30,
  })
);

await layer.add(
  new core.TextClip({
    text: 'World',
    delay: 30,
    duration: 60,
  })
);
```

--------------------------------

### Trimming and Offsetting AudioClip - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/audio.mdx

Manipulates the first clip (`clip0`). It trims the clip to keep only the segment between frame 15 and frame 80, and then offsets the trimmed segment by -15 frames, effectively moving it earlier in the composition.

```typescript
clip0.subclip(15, 80).offset(-15);
```

--------------------------------

### Trimming, Offsetting, and Adjusting Volume of AudioClip - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/audio.mdx

Manipulates the second clip (`clip1`). It trims the clip from frame 420 to the end, offsets it to align with the end of `clip0`, and sets its volume to 50%. This demonstrates individual manipulation of the split clips.

```typescript
clip1
  .subclip(420)
  .offset(-420 + clip0.stop.frames);

clip1.volume = 0.5;
```

--------------------------------

### Setting Duration - Composition - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/composition.mdx

Manually set a fixed duration for the Composition in frames. By default, duration is determined by the last visible clip, but this setter overrides that behavior.

```typescript
composition.duration = 300; // Sets the duration to 300 frames or 10 seconds
```

--------------------------------

### Adding Captions to AudioClip - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/audio.mdx

Shows how to add captions to an AudioClip. It assigns a new Transcript object (assumed to be populated with data) to the clip's `transcript` property and then uses the composition to create captions based on that clip.

```typescript
clip0.transcript = new core.Transcript(); // Assume this is populated with data

await composition.createCaptions(clip0);
```

--------------------------------

### Iterating Over Transcript Words (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/transcript.mdx

Demonstrates how to iterate over the words in a `Transcript` using the `iter` method. The example shows iterating by word count, where each group contains up to the specified number of words. The `iter` method supports various options for grouping.

```typescript
for (const group of transcript.iter({ count: [2] })) {
  // Each group will contain up to two words
}
```

--------------------------------

### Initializing Core Composition (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/index.mdx

Demonstrates how to import the Core library and create a new Composition instance. The Composition object serves as the main container for your video project elements.

```typescript
import * as core from '@diffusionstudio/core';

const composition = new core.Composition();
```

--------------------------------

### Initializing Composition - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/rendering.mdx

Imports the core library and creates a new empty Composition object, which serves as the basis for rendering.

```typescript
import * as core from '@diffusionstudio/core';

const composition = new core.Composition();
```

--------------------------------

### Creating a RectangleClip Instance (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/rectangle.mdx

Demonstrates the basic usage of the RectangleClip class from the @diffusionstudio/core library. It shows how to create a new instance and configure common visual properties such as position, size, fill color, stroke, radius, and define simple animations.

```typescript
import * as core from '@diffusionstudio/core';

const rectangle = new core.RectangleClip({
  position: 'center',
  fill: '#FF0000',
  height: 300,
  width: 300,
  radius: 10,
  stroke: {
    width: 2,
    color: '#000000',
  },
  animations: [
    {
      key: 'fill',
      frames: [
        { time: 0, value: '#FF0000' },
        { time: 120, value: '#00FF00' },
      ],
    }
  ]
})
```

--------------------------------

### Initializing Diffusion Studio Layer (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/layers.mdx

Demonstrates how to create a new Layer instance using the `core.Layer` constructor from the `@diffusionstudio/core` library. This is the basic step before adding clips or using the layer in a composition.

```TypeScript
import * as core from '@diffusionstudio/core';

const layer = new core.Layer();
```

--------------------------------

### Initializing Encoder with Custom Settings in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/video.mdx

Demonstrates how to configure the encoder with specific output settings, such as resolution and frame rate, by providing a configuration object during initialization.

```typescript
const encoder = new core.Encoder(composition, { video: { resolution: 2, fps: 25 } });
```

--------------------------------

### Creating a Waveform Clip Instance (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/waveform.mdx

This snippet demonstrates how to instantiate a `WaveformClip` object in TypeScript. It requires an audio `File` object and a configuration object specifying dimensions, position, duration, bar styling, and anchor points for the waveform visualization.

```typescript
new core.WaveformClip(new File([], 'audio.mp3'), {
  width: '90%',          // Width of the waveform clip as a percentage of the canvas or in pixels
  height: 700,           // Height of the waveform clip in pixels
  duration: 600,         // Duration of the waveform animation in seconds
  x: '50%',              // X-axis position of the clip, can be a percentage or pixel value
  y: '100%',             // Y-axis position of the clip, can be a percentage or pixel value
  bar: {
    width: 18,           // Width of each bar in the waveform
    gap: 14,             // Gap between each bar
    radius: 5,           // Border radius for rounded bars
  },
  anchor: {
    x: 0.5,              // X-axis anchor point (0 is left, 1 is right, 0.5 is center)
    y: 1                // Y-axis anchor point (0 is top, 1 is bottom, 0.5 is center)
  }
})
```

--------------------------------

### Creating and Adding ImageClip (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/image.mdx

Demonstrates how to instantiate an ImageClip with a URL, delay, and duration, and add it to a composition. The delay and duration properties determine the clip's position and length on the timeline.

```typescript
import * as core from '@diffusionstudio/core';

const url = 'https://diffusion-studio-public.s3.eu-central-1.amazonaws.com/images/lenna.png';
const image = new core.ImageClip(url, { delay: 20, duration: 100 });

await composition.add(image);
```

--------------------------------

### Creating Video Clip from Source in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/video.mdx

Illustrates how to instantiate a VideoClip from a previously created VideoSource. Configuration options like position and height can be provided to control its appearance within the composition.

```typescript
const video = new core.VideoClip(source, { // also accepts files/blobs or urls
  position: 'center', // ensures the clip is centered
  height: '100%', // stretches the clip to the full height
});
```

--------------------------------

### Loading Video Source with Prefetch in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/video.mdx

Shows how to load a VideoSource into memory for faster rendering, suitable for smaller files. The prefetch option is passed during the source creation.

```typescript
const source = await core.Source.from<core.VideoSource>(..., { prefetch: true });
```

--------------------------------

### Initializing Encoder for Composition in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/video.mdx

Shows how to create an Encoder instance, which is required to export the composition. The composition object is passed to the Encoder constructor.

```typescript
const encoder = new core.Encoder(composition);
```

--------------------------------

### Initializing CircleClip in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/circle.mdx

Demonstrates how to create a new instance of the `CircleClip` class from the `@diffusionstudio/core` library. It shows setting properties like position, width, height, and fill color during instantiation.

```typescript
import * as core from '@diffusionstudio/core';

const circle = new core.CircleClip({
  position: 'center',
  width: '50%',
  height: '50%',
  fill: '#FF0000',
});
```

--------------------------------

### Configuring Encoder - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/rendering.mdx

Demonstrates how to create an Encoder with custom video settings, specifically changing the frame rate (fps) and resolution multiplier.

```typescript
const encoder = new core.Encoder(composition, {
  video: {
    fps: 60,
    resolution: 2,
  },
});
```

--------------------------------

### Rendering Composition to File in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/video.mdx

Explains how to initiate the rendering process to export the composition as a video file. A filename string is provided to the render method.

```typescript
await encoder.render('myVideo.mp4'); // specifies a filename
```

--------------------------------

### HTML Layout Template for Diffusion Studio

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/html.mdx

Provides a basic HTML template demonstrating the required structure for use in Diffusion Studio, including wrapping content in `<body>` and styles in `<style>`.

```html
<html>
  <head>
    <style>
      div {
        height: 140px;
        width: 1080px;
        border-radius: 14px;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      span {
        font-size: 38px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <div>
      <span>This is HTML rendered inside a Foreign Object</span>
    </div>
  </body>
</html>
```

--------------------------------

### Aborting Rendering - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/rendering.mdx

Demonstrates how to use the AbortController API to cancel an ongoing rendering process by creating a controller, passing its signal to the render method, and then calling the abort method on the controller.

```typescript
const controller = new AbortController();

encoder.render(fileHandle, controller.signal);

controller.abort();
```

--------------------------------

### Default Encoder Configuration - Diffusion Studio Core - JSON/Object

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/rendering.mdx

Displays the default configuration object used by the Encoder, detailing settings for video (codec, bitrate, fps, resolution) and audio (sample rate, channels, bitrate, codec).

```json
{
  "video": {
    "enabled": true,
    "codec": "avc",
    "bitrate": 10e6,
    "fps": 30,
    "resolution": 1
  },
  "audio": {
    "enabled": true,
    "sampleRate": 48000,
    "numberOfChannels": 2,
    "bitrate": 128e3,
    "codec": "aac"
  }
}
```

--------------------------------

### Creating Composition Checkpoint in Diffusion Studio (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/checkpoints.mdx

This snippet demonstrates how to initialize a Composition object, add a clip to it, and then create a checkpoint representing the current state of the composition. It requires the `@diffusionstudio/core` library.

```typescript
import * as core from '@diffusionstudio/core';

const composition = new core.Composition();

await composition.add(
  new core.ImageClip('/image1.png', {
    height: '100%',
  })
);

const checkpoint = await composition.createCheckpoint();
```

--------------------------------

### Creating Encoder - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/rendering.mdx

Instantiates a new Encoder object, passing the previously created Composition as an argument. This prepares the encoder for rendering.

```typescript
const encoder = new core.Encoder(composition);
```

--------------------------------

### Rendering to File Handle - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/rendering.mdx

Uses the browser's showSaveFilePicker API to prompt the user for a save location and file name, then renders the video directly to the selected file handle. This allows rendering large videos without exceeding RAM.

```typescript
const fileHandle = await window.showSaveFilePicker({
  suggestedName: 'untitled_video.mp4',
  types: [
    {
      description: 'Video File',
      accept: { 'video/mp4': ['.mp4'] },
    },
  ],
});

await encoder.render(fileHandle);
```

--------------------------------

### Rendering Composition using showSaveFilePicker in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/video.mdx

Presents the recommended client-side export method using the browser's showSaveFilePicker API. This allows direct writing to disk, enabling export of large files efficiently.

```typescript
const fileHandle = await window.showSaveFilePicker({
  suggestedName: 'untitled_video.mp4',
  types: [
    {
      description: 'Video File',
      accept: { 'video/mp4': ['.mp4'] },
    },
  ],
});

await encoder.render(fileHandle);
```

--------------------------------

### Subscribing to Composition Playback Events (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/events.mdx

Demonstrates how to subscribe to playback-related events like 'currentframe', 'play', and 'pause' on a Diffusion Studio Composition object using the `on` method. The event detail contains relevant information.

```TypeScript
const composition = new core.Composition();

composition.on('currentframe', (event) => {
  // Logs the current frame of the playback
  console.log(event.detail);
});

// Logs a CustomEvent when playback starts
composition.on('play', console.log);

// Logs a CustomEvent when playback stops
composition.on('pause', console.log);
```

--------------------------------

### Loading Video Source from URL in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/video.mdx

Demonstrates how to create a reusable VideoSource object from a remote URL using the core library's Source.from method. This source can be shared across multiple VideoClip instances.

```typescript
import * as core from '@diffusionstudio/core';

const source = await core.Source.from<core.VideoSource>('https://diffusion-studio-public.s3.eu-central-1.amazonaws.com/videos/big_buck_bunny_1080p_30fps.mp4');
```

--------------------------------

### Loading HTML Source in Diffusion Studio (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/html.mdx

Demonstrates how to load an external HTML file from a URL using the `core.Source.from` method, specifying the expected source type as `core.HtmlSource`.

```typescript
import * as core from '@diffusionstudio/core';

const source = await core.Source.from<core.HtmlSource>('https://diffusion-studio-public.s3.eu-central-1.amazonaws.com/html/sample_html.html');
```

--------------------------------

### Styling TextClip with Effects and Styles in @diffusionstudio/core (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/text.mdx

This snippet demonstrates how to create a `TextClip` instance with various styling properties like glow, stroke, shadow, and per-section style overrides using the `styles` array. It also shows loading fonts using `FontManager`.

```typescript
import * as core from '@diffusionstudio/core';

const thin = await FontManager.load({
  family: 'Geologica',
  weight: '300',
  size: 19
});

const bold = await FontManager.load({
  family: 'Geologica',
  weight: '700',
  size: 24
});

await composition.add(
  new core.TextClip({
    text: "The quick\nbrown fox jumps over the lazy dog.",
    align: 'center',
    baseline: 'middle',
    font: bold,
    maxWidth: '40%',
    leading: 1.3,
    glow: {
      intensity: 1,
      color: '#000000',
      radius: 10,
      opacity: 100,
    },
    stroke: {
      width: 5,
      color: '#000000',
      lineJoin: 'round',
      lineCap: 'round',
      miterLimit: 4,
    },
    shadow: [
      {
        offsetX: 4,
        offsetY: 5,
        blur: 20,
        color: '#000000',
        opacity: 100,
      },
      {
        offsetX: -8,
        offsetY: -4,
        blur: 20,
        color: '#FFFFFF',
        opacity: 90,
      },
    ],
    x: '50%',
    y: '50%',
    styles: [{
      start: 0,
      stop: 9,
      style: {
        font: thin,
        color: '#0000FF',
        casing: 'upper',
      }
    }]
  })
);
```

--------------------------------

### showSaveFilePicker Fallback - Diffusion Studio Core - TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/rendering.mdx

Implements a compatibility check for the showSaveFilePicker API and provides a fallback implementation that returns a default filename, allowing the rendering process to proceed in browsers without native support.

```typescript
if (!('showSaveFilePicker' in window)) {
  Object.assign(window, { showSaveFilePicker: async () => 'myVideo.mp4' });
}
```

--------------------------------

### Applying Dissolve Transition to Image Clips in Typescript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/transitions.mdx

This snippet demonstrates how to create a sequential layer, add two ImageClip objects, and apply a 'dissolve' transition to the first clip. The transition is configured within the clip's options, specifying duration and type. This requires the '@diffusionstudio/core' library.

```typescript
import * as core from '@diffusionstudio/core';

const layer = composition.createLayer().sequential();

await layer.add(
  new core.ImageClip('/image1.png', {
    height: '100%',
    duration: '3s',
    transition: {
      duration: '3s',
      type: 'dissolve',
    }
  })
);

await layer.add(
  new core.ImageClip('/image2.png', {
    height: '100%',
    duration: '3s',
  })
);
```

--------------------------------

### Using Transcript Utility Methods (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/transcript.mdx

Illustrates the usage of several utility methods available on a `Transcript` instance. `optimize()` adjusts timestamps, `toSRT()` converts to SRT format, and `slice(wordCount)` creates a new transcript with a limited number of words.

```typescript
transcript.optimize();
transcript.toSRT();
transcript.slice(20);
```

--------------------------------

### Subscribing to All Clip Events (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/events.mdx

Provides a tip on how to subscribe to all events emitted by a Diffusion Studio Clip object using the wildcard '*' event name.

```TypeScript
clip.on('*', console.log);
```

--------------------------------

### Creating Diffusion Studio Layers via Composition (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/layers.mdx

Presents an alternative method for creating `Layer` instances directly through the `composition.createLayer()` method. This approach also automatically adds the newly created layer to the composition.

```TypeScript
// alterantive approach for creating tracks 
// and adding them to the composition
const video = await composition.createLayer(); 
const image = await composition.createLayer();
const text = await composition.createLayer();
```

--------------------------------

### Loading Custom Web Font using FontManager in @diffusionstudio/core (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/text.mdx

This snippet shows how to instantiate `FontManager` and load a font from a specified remote URL source, including weight and family details.

```typescript
const manager = new core.FontManager();

const roboto = await manager.load({
  source: "https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2",
  weight: '400',
  family: 'Roboto'
});
```

--------------------------------

### Splitting ImageClip (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/image.mdx

Demonstrates using the split method to divide an ImageClip into two separate clips at a specified frame. The method returns the new clip created from the second part.

```typescript
const imageNew = image.split(50);
```

--------------------------------

### Adding Video Clip to Composition in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/video.mdx

Shows the basic method to add a VideoClip to the main composition timeline. The add method is asynchronous, ensuring the clip is ready before further operations.

```typescript
await composition.add(video);
```

--------------------------------

### Restoring Composition Checkpoint in Diffusion Studio (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/checkpoints.mdx

This code shows how to initialize a new Composition object and restore its state from a previously created checkpoint. Restoring a checkpoint multiple times is safe as the algorithm only updates differences.

```typescript
const composition = new core.Composition();
await composition.restoreCheckpoint(checkpoint);
```

--------------------------------

### Inserting Layer into Diffusion Studio Composition (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/layers.mdx

Illustrates how to integrate a created `Layer` into a `Composition` using the asynchronous `composition.insertLayer()` method. This step is necessary to render the layer's contents.

```TypeScript
const composition = new core.Composition();

await composition.insertLayer(layer);
```

--------------------------------

### Subscribing to Track Attach/Detach Events (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/events.mdx

Shows how to listen for 'attach' and 'detach' events on a Diffusion Studio Track object, which are emitted when the track is added to or removed from a Composition.

```TypeScript
track.on('attach', console.log);
track.on('detach', console.log);
```

--------------------------------

### Adding Custom Clip to Composition in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/custom.mdx

This snippet demonstrates how to create a new core.Composition instance and add the previously defined custom AlienClip to it. It shows how to instantiate the custom clip and pass configuration properties like speed and duration during instantiation.

```typescript
const composition = new core.Composition();

// Add the custom AlienClip to the composition
await composition.add(new AlienClip({ speed: 0.4, duration: 150 }));
```

--------------------------------

### Creating and Adding HtmlClip to Composition (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/html.mdx

Illustrates how to create an `HtmlClip` instance from a loaded HTML source and add it to a composition. Notes that clip dimensions default to CSS values but can be scaled.

```typescript
import * as core from '@diffusionstudio/core';

const html = new core.HtmlClip(source, { position: 'center' });

await composition.add(html);
```

--------------------------------

### Detaching and Repositioning Split ImageClip (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/image.mdx

Shows the process of detaching a split clip from its original track using detach() and then adding it to a new track with an offset to prevent overlap, as clips on the same track cannot overlap.

```typescript
imageNew.detach();
```

```typescript
composition.add(imageNew.offset(-50));
```

--------------------------------

### Restoring Font and Composition Checkpoints in Diffusion Studio (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/checkpoints.mdx

This snippet demonstrates the correct procedure for restoring both font and composition states from checkpoints. It is crucial to restore the font manager checkpoint before restoring the composition checkpoint.

```typescript
const fontManager = new core.FontManager();
await fontManager.restoreCheckpoint(fontCheckpoint);

const composition = new core.Composition();
await composition.restoreCheckpoint(compositionCheckpoint);
```

--------------------------------

### Subscribing to Clip Frame/Update Events (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/events.mdx

Illustrates how to subscribe to 'frame' and 'update' events on a Diffusion Studio Clip object, triggered by timeline position changes or visual updates.

```TypeScript
clip.on('frame', console.log);
clip.on('update', console.log);
```

--------------------------------

### Performing Manipulations on Video Clip in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/video.mdx

Demonstrates chaining methods to modify a VideoClip, specifically applying a time offset and trimming the clip to a specific frame range. Manipulations are relative to the clip's original duration and position.

```typescript
video
  .offset(-30) // time offset in frames (relative to current offset)
  .subclip(0, 180); // trims the clip from start to end frames
```

--------------------------------

### Animating Rectangle Properties with Keyframes (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/keyframe-animations.mdx

This snippet demonstrates how to apply multiple keyframe animations to a `core.RectangleClip` instance. It defines animations for the 'x' position, 'width', 'height', and 'fill' properties, specifying keyframes with time and value, easing functions, and extrapolation behavior.

```typescript
new core.RectangleClip({
  animations: [
    {
      key: 'x', // Animates the x-position
      easing: 'ease-in-out', // Smooth transition
      extrapolate: 'clamp', // Values outside keyframes are clamped
      frames: [
        { time: 80, value: 960 }, // At frame 80, x = 960
        { time: 120, value: 50 }, // At frame 120, x = 50
      ],
    },
    {
      key: 'width', // Animates the width
      easing: 'ease-out',
      frames: [
        { time: 0, value: 0 }, // At frame 0, width = 0
        { time: 60, value: 1000 }, // At frame 60, width = 1000
        { time: 120, value: 60 }, // At frame 120, width = 60
      ],
    },
    {
      key: 'height', // Animates the height
      easing: 'ease-in',
      frames: [
        { time: 0, value: 0 }, // At frame 0, height = 0
        { time: 60, value: 700 }, // At frame 60, height = 700
        { time: 120, value: 40 }, // At frame 120, height = 40
      ],
    },
    {
      key: 'fill', // Animates the fill color
      frames: [
        { time: 0, value: '#FF0000' }, // At frame 0, fill = red
        { time: 120, value: '#00FF00' }, // At frame 120, fill = green
      ], // will use linear interpolation by default
    }
  ]
});
```

--------------------------------

### Accessing and Loading Local Fonts using FontManager in @diffusionstudio/core (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/text.mdx

This snippet illustrates how to retrieve a list of available local fonts using `FontManager.localFonts()` and then load a specific font variant from the returned list.

```typescript
const local = await core.FontManager.localFonts();

console.log(local);

const font = await manager.load(local[0].variants[0]);
```

--------------------------------

### Offsetting ImageClip Position (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/image.mdx

Shows how to use the offset method to adjust the clip's position on the timeline. A negative offset moves the clip earlier, and a positive offset moves it later.

```typescript
image.offset(-20);
```

--------------------------------

### Waiting for a Clip Event (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/events.mdx

Shows how to use `await new Promise(clip.resolve('event'))` to pause execution until a specific event, such as 'load', is triggered on a Diffusion Studio Clip, useful for asynchronous workflows.

```TypeScript
await new Promise(clip.resolve('load'));
```

--------------------------------

### Applying RectangleMask to VideoClip in Diffusion Studio (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/masks.mdx

This snippet demonstrates the process of creating a composition, defining a RectangleMask with specified position, size, and corner radius, and then adding a VideoClip to the composition while applying the created mask to it. It utilizes the @diffusionstudio/core library for composition, mask, and video clip management.

```typescript
import * as core from '@diffusionstudio/core';
// Step 1: Create a composition
const composition = new core.Composition();

// Step 2: Define a RectangleMask
const mask = new core.RectangleMask({
  x: 480, // Horizontal offset
  y: 0,   // Vertical offset
  width: composition.width - 960, // Mask width
  height: composition.height,     // Mask height
  radius: 100,                    // Corner radius for rounded edges
});

// Step 3: Add a video clip with the mask applied
await composition.add(
  new core.VideoClip(new File([], 'sample.mp4'), {
    position: 'center', // Center the video in the composition
    muted: true,        // Mute the video
    mask,               // Apply the mask
    height: '100%',     // Set the height of the video
  })
);
```

--------------------------------

### Creating and Using Timestamp Object in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/timestamp.mdx

This snippet demonstrates how to import the core library, create a new `Timestamp` instance with optional time components, use the timestamp object as a duration for a clip, and access its calculated properties like frames, milliseconds, and seconds.

```typescript
import * as core from '@diffusionstudio/core';

const timestamp = new core.Timestamp(milliseconds, seconds, minutes, hours); // will be added

new core.ImageClip({ duration: timestamp });

timestamp.frames;  // 30
timestamp.millis;  // 1000
timestamp.seconds; // 1
```

--------------------------------

### Defining Custom Clip Class in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/custom.mdx

This snippet defines a custom Clip class named AlienClip by extending core.Clip. It demonstrates how to define custom properties, initialize the class in the constructor, load assets asynchronously in the init method, update state based on time in the update method, and render the clip using the VideoRenderer in the render method.

```typescript
import * as core from '@diffusionstudio/core';

// Define custom Clip properties extending `ClipProps`, such as start, stop, etc.
interface AlienClipProps extends core.ClipProps {
  speed?: number;  // Optional speed property
}

// Create a new class extending `Clip` and apply your custom properties
class AlienClip extends core.Clip {
  // Declare custom fields
  public speed = 0.2;
  public image = new Image();

  private angle = 0;

  public constructor(props: AlienClipProps = {}) {
    // Ensure parent class `Clip` is properly initialized
    super(props);

    // Assign provided properties to the Clip instance
    Object.assign(this, props);
  }

  // Initialize the clip, typically used for loading assets asynchronously
  public override async init(): Promise<void> {
    this.image.crossOrigin = 'anonymous';
    this.image.src = 'https://pixijs.com/assets/flowerTop.png';
    await new Promise(resolve => this.image.onload = resolve);
  }

  // Enter phase: invoked when the clip is about to be drawn to the canvas
  public override async enter(): Promise<void> {
    // No specific actions in this example, but can be used for one-time setup
  }

  // Update the clip's state on each frame. Receives a `Timestamp` argument.
  public override async update(audio: core.AudioRenderer): Promise<void> {
    // This can be useful for computationally expensive operations.

    // Adjust the sprite's angle based on elapsed time and configured speed
    this.angle = audio.playbackFrame * this.speed;
  }

  public override render(video: core.VideoRenderer): void {
    const x = video.width / 2;
    const y = video.height / 2;

    video.context.save();
    video.context.translate(x, y);
    video.context.rotate(this.angle);
    video.context.drawImage(this.image, -this.image.width / 2, -this.image.height / 2);
    video.context.restore();
  }

  // Exit phase: invoked when the clip is no longer needed
  public override async exit(): Promise<void> {
    // Cleanup resources (e.g., removing filters)
  }
}
```

--------------------------------

### Adding Video Clip to a Layer in TypeScript

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/video.mdx

Provides an alternative method for adding clips, specifically to a dedicated layer within the composition. This is useful for organizing multiple clips on separate tracks.

```typescript
const layer = composition.createLayer();
await layer.add(video);
```

--------------------------------

### Manipulating HTML Source DOM (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/clips/html.mdx

Shows how to access the loaded HTML document via the `source.document` property and modify its content using standard DOM manipulation techniques like `querySelector` and `textContent`.

```typescript
source.document!.querySelector('span')!.textContent = 'Manipulated Text Content';
```

--------------------------------

### Changing Layer Order in Diffusion Studio Composition (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/layers.mdx

Demonstrates how to modify the rendering order of layers within a `Composition` using the `layer.index()` method. Layers are rendered from highest index to lowest, so index 0 is rendered last (on top). The method accepts an index or 'top'/'bottom'.

```TypeScript
video.index(0);
```

--------------------------------

### Unsubscribing from Clip Events (TypeScript)

Source: https://github.com/redwilly/diffusionstudio-docs/blob/main/events.mdx

Explains how to unsubscribe from specific events on a Diffusion Studio Clip object using the event ID returned by the `on` method and the `off` method.

```TypeScript
const attachEvt = clip.on('attach', console.log);
const detachEvt = clip.on('detach', console.log);

clip.off(attachEvt);
clip.off(detachEvt);
```