### Run the development server

Source: https://github.com/muxinc/elements/blob/main/examples/svelte-kit/README.md

Start the development environment after installing dependencies. Use the --open flag to automatically launch the app in a browser.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

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

### Setup Local Packages for Testing

Source: https://github.com/muxinc/elements/blob/main/examples/memory-leak-test/README.md

Run this script from the memory-leak-test example directory to build and link local media-elements and media-chrome packages into the elements monorepo.

```bash
./examples/memory-leak-test/setup-local.sh
```

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

### Install @mux/mux-video with Yarn

Source: https://github.com/muxinc/elements/blob/main/packages/mux-video/README.md

Install the @mux/mux-video package using Yarn.

```bash
yarn add @mux/mux-video
```

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

### Install @mux/mux-video with npm

Source: https://github.com/muxinc/elements/blob/main/packages/mux-video/README.md

Install the @mux/mux-video package using npm.

```bash
npm i @mux/mux-video
```

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

### Install Mux Audio React

Source: https://github.com/muxinc/elements/blob/main/packages/mux-audio-react/README.md

Install the Mux Audio React library using npm or yarn.

```bash
yarn add @mux/mux-audio-react
```

```bash
npm i @mux/mux-audio-react
```

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

### Install MuxPlayer React

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player-react/README.md

Install the package using npm or yarn.

```shell
npm install @mux/mux-player-react
```

```shell
yarn add @mux/mux-player-react
```

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

### Basic Mux Uploader Setup in Astro

Source: https://github.com/muxinc/elements/blob/main/packages/mux-uploader-astro/REFERENCE.md

Use this basic configuration to get started with the Mux Uploader in your Astro project. Ensure you have the correct endpoint URL.

```astro
--- 
import { MuxUploader } from '@mux/mux-uploader-astro';
---

<MuxUploader
  endpoint="https://my-authenticated-url/storage?your-url-params"
/>
```

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

### Install @mux/mux-audio with Yarn

Source: https://github.com/muxinc/elements/blob/main/packages/mux-audio/README.md

Install the @mux/mux-audio package using Yarn. This is the recommended method for projects using Yarn.

```bash
yarn add @mux/mux-audio
```

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

### Install @mux/mux-uploader with yarn

Source: https://github.com/muxinc/elements/blob/main/packages/mux-uploader/README.md

Use this command to install the @mux/mux-uploader package using yarn.

```shell
yarn add @mux/mux-uploader
```

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

### Simple MuxAudio Example

Source: https://github.com/muxinc/elements/blob/main/packages/mux-audio-react/README.md

A basic example of using the MuxAudio component with essential props like playbackId, metadata, streamType, and controls.

```jsx
const MuxAudioExample = () => {
  return (
    <div>
      <h1>Simple MuxAudio Example</h1>
      <MuxAudio
        style={{ height: '100%', maxWidth: '100%' }}
        playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
        metadata={{
          video_id: 'audio-id-123456',
          video_title: 'Super Interesting Audio',
          viewer_user_id: 'user-id-bc-789',
        }}
        streamType="on-demand"
        controls
        autoPlay
        muted
      />
    </div>
  );
};

```

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

### Install @mux/mux-audio with npm

Source: https://github.com/muxinc/elements/blob/main/packages/mux-audio/README.md

Install the @mux/mux-audio package using npm. This is the recommended method for projects using npm.

```bash
npm i @mux/mux-audio
```

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

### Basic Mux Player Setup

Source: https://github.com/muxinc/elements/blob/main/examples/vanilla-ts-esm/public/mux-player.html

This is a basic HTML setup for a Mux player. It includes default styling for width and aspect ratio, and sets the background to black.

```html
<mux-player> { display: block; width: 100%; margin: 1rem 0 2rem; background-color: #000; }
mux-player:not(\[audio\]) { aspect-ratio: 16 / 9; }
```

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

### Install @mux/mux-uploader with npm

Source: https://github.com/muxinc/elements/blob/main/packages/mux-uploader/README.md

Use this command to install the @mux/mux-uploader package using npm.

```shell
npm install @mux/mux-uploader
```

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

### Install Mux Video React with NPM

Source: https://github.com/muxinc/elements/blob/main/packages/mux-video-react/README.md

Install the Mux Video React library using NPM. This is the first step to integrating the component into your project.

```bash
npm i @mux/mux-video-react
```

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

### Install MuxNewsPlayer Dependency

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player-react/src/news/README.md

Install the required custom build of the Mux player package.

```bash
npm install @mux/mux-player-react
```

```json
"dependencies": {
  "@mux/mux-player-react": "^3.5.0",
}
```

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

### Basic Usage

Source: https://github.com/muxinc/elements/blob/main/packages/mux-uploader-astro/REFERENCE.md

A simple example demonstrating how to use the MuxUploader component with a basic endpoint configuration.

```APIDOC
## Basic MuxUploader Usage

### Description

This example shows the most basic integration of the MuxUploader component, requiring only the `endpoint` prop.

### Method

N/A (Component Usage)

### Endpoint

N/A (Configured via `endpoint` prop)

### Request Example

```astro
--- 
import { MuxUploader } from '@mux/mux-uploader-astro';
---

<MuxUploader
  endpoint="https://my-authenticated-url/storage?your-url-params"
/>
```
```

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

### Install Mux Video React with Yarn

Source: https://github.com/muxinc/elements/blob/main/packages/mux-video-react/README.md

Install the Mux Video React library using Yarn. This is the first step to integrating the component into your project.

```bash
yarn add @mux/mux-video-react
```

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

### Install @mux/mux-active-viewer-count with Yarn

Source: https://github.com/muxinc/elements/blob/main/packages/mux-active-viewer-count/README.md

Install the package using Yarn. This is a common method for managing project dependencies.

```bash
yarn add @mux/mux-active-viewer-count
```

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

### Install Mux Uploader for Astro

Source: https://github.com/muxinc/elements/blob/main/packages/mux-uploader-astro/README.md

Use npm or yarn to add the package to your project.

```shell
npm install @mux/mux-uploader-astro
```

```shell
yarn add @mux/mux-uploader-astro
```

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

### Install MuxUploader package

Source: https://github.com/muxinc/elements/blob/main/packages/mux-uploader-react/README.md

Use npm or yarn to add the package to your project dependencies.

```shell
npm install @mux/mux-uploader-react
```

```shell
yarn add @mux/mux-uploader-react
```

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

### Install @mux/mux-active-viewer-count with npm

Source: https://github.com/muxinc/elements/blob/main/packages/mux-active-viewer-count/README.md

Install the package using npm. This is another common method for managing project dependencies.

```bash
npm i @mux/mux-active-viewer-count
```

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

### Install Mux Player with npm

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player/README.md

Use npm to install the Mux Player package. This is the recommended package manager for most Node.js projects.

```shell
npm install @mux/mux-player
```

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

### Install Yalc Globally

Source: https://github.com/muxinc/elements/blob/main/examples/memory-leak-test/README.md

Install the Yalc package manager globally to manage local package linking.

```bash
npm i -g yalc
```

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

### Mux Elements Codemod Command Usage Examples

Source: https://github.com/muxinc/elements/blob/main/packages/mux-elements-codemod/README.md

Illustrates various ways to use the mux-elements-codemod CLI, including specifying paths, extensions, and ignore patterns. Use these examples to tailor the codemod to your project structure.

```bash
$ mux-elements-codemod [OPTIONS] [paths ...]
$ mux-elements-codemod [--help|-h]

paths can be regular globbed items or a list of folders
The default path is ./

Examples:
$ mux-elements-codemod -i ./packages ./examples
$ mux-elements-codemod --imports ./packages
$ mux-elements-codemod --imports ./examples/**/*.tsx
$ mux-elements-codemod --extensions="tsx jsx" --imports ./examples/
$ mux-elements-codemod -e="tsx jsx" --imports ./examples/ --ignore .next --ignore dist

Options:
  -i --imports      update imports/requires scope from @mux-elements to @mux
     --ignore       Add a name to ignore in the files, multiples can be provided
  -e --extensions   specifiy the specific file extensions to use as a space separated string
                    default is "js ts jsx tsx json html mjs cjs"
  -f --force        by default, this does a dry run, run with --force to replace the text inline
  -h --help         show this help
```

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

### Install and Run Mux Elements Codemod Globally

Source: https://github.com/muxinc/elements/blob/main/packages/mux-elements-codemod/README.md

Install the codemod tool globally using npm or yarn, then run it from the command line. This makes the command available system-wide.

```bash
npm install --global @mux/mux-elements-codemod
mux-elements-codemod
```

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

### Implement MuxNewsPlayer with IMA SDK

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player-react/src/news/README.md

This example demonstrates how to dynamically load the Google IMA SDK and render the MuxNewsPlayer component with a list of videos containing ad tags.

```jsx
import Head from 'next/head';
import { useEffect, useState } from "react";
import MuxNewsPlayer from "@mux/mux-player-react/news";

export default function VideoMuxNewsPlayerPage() {
  const [sdkLoaded, setSdkLoaded] = useState(false);

  useEffect(() => {
    // Dynamically load the IMA SDK
    const loadImaSdk = () => {
      const script = document.createElement("script");
      script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js";
      script.async = true;
      script.onload = () => {
        setSdkLoaded(true);
        console.log("Google IMA SDK loaded");
      };
      script.onerror = () => {
        setSdkLoaded(true);
      };
      document.head.appendChild(script);
    };

    if (!window.google || !window.google.ima) {
      loadImaSdk();
    } else {
      setSdkLoaded(true);
    }

    return () => {
      // Cleanup by removing the script
      const scriptElement = document.querySelector('script[src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"]');
      if (scriptElement) {
        scriptElement.remove();
      }
    };
  }, []);

  const videoList = [
    {
      imageUrl: "https://image.mux.com/DVBhwqkhxkOiLRjUAYJS6mCBJSuC00tB4iWjJmEofJoo/thumbnail.jpg",
      title: "Test video title 1",
      playbackId: "DVBhwqkhxkOiLRjUAYJS6mCBJSuC00tB4iWjJmEofJoo",
      adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
    },
    {
      imageUrl: "https://image.mux.com/VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA/thumbnail.jpg",
      title: "Test video title 2",
      playbackId: "VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA",
      adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpreonly&ciu_szs=300x250%2C728x90&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator=",
    },
    {
      imageUrl: "https://image.mux.com/gZh02tKCI015W6k2XdYSh4srGnksYvsoT1uHsYOlv4Blo/thumbnail.jpg",
      title: "Test video title 3",
      playbackId: "gZh02tKCI015W6k2XdYSh4srGnksYvsoT1uHsYOlv4Blo",
      adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpreonlybumper&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator=",
    },
  ];

  return (
    <>
      <Head>
        <title>Video MuxNewsPlayer with Ads</title>
      </Head>

      {sdkLoaded && <MuxNewsPlayer videoList={videoList} />}
    </>
  );
}
```

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

### Basic Mux Player Usage

Source: https://github.com/muxinc/elements/blob/main/examples/vanilla-ts-esm/public/mux-player-theme-classic.html

This is a basic example of how to use the Mux player element. It sets the theme to 'Classic' and defines some basic CSS for styling.

```html
<mux-player>
  theme Classic
  mux-player {
    display: block;
    width: 100%;
    margin: 1rem 0 2rem;
    background-color: #000;
  }
  mux-player:not(\[audio\]) {
    aspect-ratio: 16 / 9;
  }
</mux-player>
```

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

### Install Mux Player with yarn

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player/README.md

Use yarn to install the Mux Player package. This is an alternative package manager for Node.js projects.

```shell
yarn add @mux/mux-player
```

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

### Simple MuxVideo React Component Example

Source: https://github.com/muxinc/elements/blob/main/packages/mux-video-react/README.md

A basic example of using the MuxVideo component in a React application. It includes essential props like playbackId, metadata, and player controls.

```jsx
const MuxVideoExample = () => {
  return (
    <div>
      <h1>Simple MuxVideo Example</h1>
      <MuxVideo
        style={{ height: '100%', maxWidth: '100%' }}
        playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
        metadata={{
          video_id: 'video-id-123456',
          video_title: 'Super Interesting Video',
          viewer_user_id: 'user-id-bc-789',
        }}
        controls
        autoPlay
        muted
      />
    </div>
  );
};

```

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

### Advanced Usage

Source: https://github.com/muxinc/elements/blob/main/packages/mux-uploader-astro/REFERENCE.md

An example showcasing advanced configuration options for the MuxUploader, including file size limits, chunk size, and custom styling.

```APIDOC
## Advanced MuxUploader Usage

### Description

This example demonstrates using the MuxUploader with several advanced props, such as `pausable`, `maxFileSize`, `chunkSize`, and custom `style`.

### Method

N/A (Component Usage)

### Endpoint

N/A (Configured via `endpoint` prop)

### Parameters

#### Props

- **endpoint** (string) - Required - The URL for the upload endpoint.
- **pausable** (boolean) - Optional - Enables the pause/resume functionality for uploads.
- **maxFileSize** (number) - Optional - Maximum file size in bytes (e.g., 1000000000).
- **chunkSize** (number) - Optional - Upload chunk size in bytes (e.g., 8192).
- **style** (object) - Optional - CSS style object for customizing the uploader's appearance.

### Request Example

```astro
--- 
import { MuxUploader } from '@mux/mux-uploader-astro';
---

<MuxUploader
  endpoint="https://my-authenticated-url/storage?your-url-params"
  pausable
  maxFileSize={1000000000}
  chunkSize={8192}
  style={{
    '--progress-bar-fill-color': '#7e22ce',
    '--button-background-color': '#f0f0f0',
  }}
/>
```
```

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

### Launch Chrome with GC Exposed

Source: https://github.com/muxinc/elements/blob/main/examples/memory-leak-test/README.md

Start Chrome with the `--expose-gc` flag enabled to allow manual garbage collection for memory leak testing.

```bash
open -a "Google Chrome" --args --js-flags="--expose-gc"
```

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

### Import @mux/mux-audio with ES Modules

Source: https://github.com/muxinc/elements/blob/main/packages/mux-audio/README.md

Import the @mux/mux-audio library into your application using ES module syntax. Ensure this is done after installation.

```javascript
import '@mux/mux-audio';
```

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

### Basic Mux Player Usage

Source: https://github.com/muxinc/elements/blob/main/examples/vanilla-ts-esm/public/mux-player-theme.html

This is a basic example of how to use the mux-player component. It sets the display to block, width to 100%, and adds some margin and background color. It also sets the aspect ratio for non-audio players.

```css
mux-player { display: block; width: 100%; margin: 1rem 0 2rem; background-color: #000; }
mux-player:not([audio]) { aspect-ratio: 16 / 9; }
```

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

### Dynamic Endpoint Configuration

Source: https://github.com/muxinc/elements/blob/main/packages/mux-uploader-astro/REFERENCE.md

An example illustrating how to dynamically set the upload endpoint for the MuxUploader component using JavaScript.

```APIDOC
## Dynamic MuxUploader Endpoint

### Description

This example shows how to dynamically update the `endpoint` prop of the MuxUploader component based on user input.

### Method

N/A (Component Usage)

### Endpoint

N/A (Dynamically set via JavaScript)

### Parameters

#### Props

- **endpoint** (string) - Required - The URL for the upload endpoint. Can be set dynamically.
- **pausable** (boolean) - Optional - Enables the pause/resume functionality for uploads.

### Request Example

```astro
--- 
import { MuxUploader } from '@mux/mux-uploader-astro';
---

<input type="text" id="endpoint-input" placeholder="Enter GCS URL..." />
<MuxUploader id="uploader" pausable />

<script>
  import type { MuxUploaderElement } from '@mux/mux-uploader-astro';

  const input = document.getElementById('endpoint-input') as HTMLInputElement;
  const uploader = document.getElementById('uploader') as MuxUploaderElement;

  input.addEventListener('change', () => {
    uploader.endpoint = input.value;
  });
</script>
```
```

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

### getStartDate()

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player/REFERENCE.md

Returns a Date object representing the earliest available start date for the stream. This method is identical to the native HTMLMediaElement getStartDate() method, if available.

```APIDOC
## getStartDate()

### Description
Returns a Date object representing the earliest available start date for the stream. This method is identical to the native HTMLMediaElement getStartDate() method, if available.

### Method
`getStartDate()`

### Parameters
None

### Response
#### Success Response (Date)
- **startDate** (Date) - The earliest start date of the stream.

```

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

### Configure MuxVideo with MSE Playback

Source: https://github.com/muxinc/elements/blob/main/packages/mux-video-react/README.md

Use the `preferPlayback="mse"` prop to force the use of an in-code MSE-based player (like hls.js) when available. This example also includes common props like `playback-id`, `metadata`, and `controls`.

```jsx
<MuxVideo
  playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
  metadata={{
    video_id: 'video-id-123456',
    video_title: 'Super Interesting Video',
    viewer_user_id: 'user-id-bc-789',
  }}
  preferPlayback="mse"
  controls
/>
```

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

### Run Memory Leak Test Dev Server

Source: https://github.com/muxinc/elements/blob/main/examples/memory-leak-test/README.md

Start the development server for the memory leak test pages. Access test pages via http://localhost:8005.

```bash
cd examples/memory-leak-test
npm run dev
```

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

### Initialize Astro Project

Source: https://github.com/muxinc/elements/blob/main/examples/astro/README.md

Use this command to scaffold a new project using the Astro basics template.

```sh
npm create astro@latest -- --template basics
```

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

### Build for production

Source: https://github.com/muxinc/elements/blob/main/examples/svelte-kit/README.md

Generate a production-ready version of the application.

```bash
npm run build
```

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

### Initialize a new Svelte project

Source: https://github.com/muxinc/elements/blob/main/examples/svelte-kit/README.md

Use these commands to scaffold a new project in the current directory or a specific folder.

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

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

### ABR Startup Test HTML Structure

Source: https://github.com/muxinc/elements/blob/main/examples/vanilla-ts-esm/public/abr-startup-test.html

This HTML sets up the necessary elements for the ABR startup test, including input fields for configuration, display areas for ABR information, and a player container.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ABR Startup Test</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 1em;
    }
    .controls {
      display: flex;
      gap: 1em;
      margin-bottom: 1em;
    }
    .control-group label {
      display: block;
      margin-bottom: 0.5em;
    }
    .control-group input[type="text"] {
      width: 100px;
    }
    #playerContainer {
      width: 640px;
      height: 360px;
      margin-bottom: 1em;
    }
    .dashboard {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1em;
      margin-bottom: 1em;
    }
    .dashboard-item {
      border: 1px solid #ccc;
      padding: 0.5em;
    }
    .dashboard-item strong {
      display: block;
      margin-bottom: 0.5em;
    }
    .verdict.waiting {
      color: orange;
    }
    .verdict.ok {
      color: green;
    }
    .verdict.bad {
      color: red;
    }
    .rendition-badge {
      display: inline-block;
      padding: 0.2em 0.5em;
      margin-right: 0.5em;
      border: 1px solid #eee;
      border-radius: 4px;
    }
    .rendition-badge.active {
      background-color: #007bff;
      color: white;
      border-color: #007bff;
    }
    .rendition-badge.first-pick {
      border-style: dashed;
    }
    #timeline {
      height: 150px;
      overflow-y: scroll;
      border: 1px solid #ccc;
      padding: 0.5em;
      font-size: 0.9em;
      white-space: pre;
    }
    .timeline-entry {
      margin-bottom: 0.2em;
    }
    .timeline-entry .seg {
      display: inline-block;
      width: 60px;
    }
    .timeline-entry .res {
      display: inline-block;
      width: 80px;
    }
    .timeline-entry .bw {
      display: inline-block;
      width: 120px;
    }
    .timeline-entry .note {
      font-style: italic;
      color: #555;
    }
    .config-item {
      font-family: monospace;
      white-space: pre-wrap;
      background-color: #f4f4f4;
      padding: 0.5em;
      border-radius: 4px;
    }
    .config-item .set {
      color: green;
    }
    .config-item .default {
      color: #888;
    }
  </style>
</head>
<body>
  <h1>ABR Startup Test</h1>

  <div class="controls">
    <div class="control-group">
      <label for="estimateInput">Initial Bandwidth Estimate (bps):</label>
      <input type="text" id="estimateInput" placeholder="e.g., 1500000">
    </div>
    <div class="control-group">
      <label for="segmentsInput">Initial Estimate Segments:</label>
      <input type="text" id="segmentsInput" placeholder="e.g., 3">
    </div>
    <div class="control-group">
      <label for="preloadInput">Min Preload Segments:</label>
      <input type="text" id="preloadInput" placeholder="e.g., 5">
    </div>
    <button id="resetStateEl">Reset State</button>
  </div>

  <div id="playerContainer"></div>

  <div class="dashboard">
    <div class="dashboard-item">
      <strong>Verdict</strong>
      <div id="verdict" class="verdict waiting">Waiting for first segment...</div>
    </div>
    <div class="dashboard-item">
      <strong>First Rendition</strong>
      <div id="firstRendition">--</div>
    </div>
    <div class="dashboard-item">
      <strong>Initial Estimate</strong>
      <div id="initialEstimate">--</div>
    </div>
    <div class="dashboard-item">
      <strong>Reset State</strong>
      <div id="resetState">--</div>
    </div>
    <div class="dashboard-item">
      <strong>Preload State</strong>
      <div id="preloadState">--</div>
    </div>
    <div class="dashboard-item">
      <strong>Min Rendition</strong>
      <div id="minRendition">--</div>
    </div>
  </div>

  <div class="dashboard-item" style="grid-column: 1 / -1;">
    <strong>Active Config</strong>
    <div id="activeConfig" class="config-item"></div>
  </div>

  <div class="dashboard-item" style="grid-column: 1 / -1;">
    <strong>Renditions</strong>
    <div id="renditions"></div>
  </div>

  <div class="dashboard-item" style="grid-column: 1 / -1;">
    <strong>Timeline</strong>
    <div id="timeline"><em>No segments loaded yet.</em></div>
  </div>

  <script type="module" src="./abr-startup-test.js"></script>
</body>
</html>
```

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

### Configure MuxAudio with MSE playback

Source: https://github.com/muxinc/elements/blob/main/packages/mux-audio-react/README.md

Use the preferPlayback prop to force the use of an in-code MSE-based engine instead of native playback.

```jsx
<MuxAudio
  playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
  metadata={{
    video_id: 'audio-id-123456',
    video_title: 'Super Interesting Audio',
    viewer_user_id: 'user-id-bc-789',
  }}
  preferPlayback="mse"
  controls
/>
```

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

### Import @mux/mux-audio with CommonJS

Source: https://github.com/muxinc/elements/blob/main/packages/mux-audio/README.md

Import the @mux/mux-audio library into your application using CommonJS syntax. Ensure this is done after installation.

```javascript
require('@mux/mux-audio');
```

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

### Install MuxPlayer Astro

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player-astro/README.md

Use these commands to add the MuxPlayer package to your Astro project via npm or yarn.

```shell
npm install @mux/mux-player-astro
```

```shell
yarn add @mux/mux-player-astro
```

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

### Manage CuePoints in Mux Player

Source: https://github.com/muxinc/elements/blob/main/examples/vanilla-ts-esm/public/mux-player-cuepoints.html

Demonstrates how to add cue points to the player and listen for changes. Ensure metadata is loaded before adding cue points.

```javascript
const playerEl = document.querySelector('mux-player'); function addCuePointsToPlayer() { const cuePoints = [ { time: 1, value: 'Simple Value' }, { time: 3, value: { complex: 'Complex Object', duration: 2 } }, { time: 10, value: true }, { time: 15, value: { anything: 'That can be serialized to JSON and makes sense for your use case' } } ]; playerEl.addCuePoints(cuePoints); } function cuePointChangeListener() { // Do something with the activeCuePoint here. In this example, // we're simply updating the innerText of some element with the latest. // activeCuePoint.value. console.log('Active CuePoint!', playerEl.activeCuePoint); document.getElementById('cuepoint-renderer').innerText = JSON.stringify(playerEl.activeCuePoint.value, null, 2); } playerEl.addEventListener('cuepointchange', cuePointChangeListener); // NOTE: Need to wait until the player has loaded metadata before adding cuePoints! if (playerEl.readyState >= 1) { addCuePointsToPlayer(); } else { playerEl.addEventListener('loadedmetadata', addCuePointsToPlayer, { once: true }); }
```

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

### MuxUploader Event Handling

Source: https://github.com/muxinc/elements/blob/main/packages/mux-uploader-astro/REFERENCE.md

Example of how to add event listeners to the MuxUploader component in Astro to handle upload events.

```APIDOC
## MuxUploader Event Handling

### Description
This example demonstrates how to attach event listeners to the `<MuxUploader>` component to manage different stages of the media upload process. It covers starting the upload, successful completion, errors, and progress updates.

### Method
Client-side JavaScript event listeners

### Endpoint
N/A (Client-side component events)

### Parameters
N/A

### Request Example
```astro
<script>
  import type { MuxUploaderElement } from '@mux/mux-uploader-astro';

  const uploader = document.getElementById('my-uploader') as MuxUploaderElement;

  uploader.addEventListener('uploadstart', (event) => {
    console.log('Upload started!', event.detail);
  });

  uploader.addEventListener('success', (event) => {
    console.log('Upload successful!', event.detail);
  });

  uploader.addEventListener('uploaderror', (event) => {
    console.error('Upload error!', event.detail);
  });

  uploader.addEventListener('progress', (event) => {
    console.log('Upload progress: ', event.detail);
  });
</script>
```

### Response
N/A (Events provide details in their `detail` property)

### Available Events

| Event |
| --- |
| `file-ready` |
| `chunkattempt` |
| `chunksuccess` |
| `offline` |
| `online` |
| `pausedchange` |
| `progress` |
| `reset` |
| `success` |
| `uploadstart` |
| `uploaderror` |

### Event Details

| Event |
| --- |
| `file-ready`: The media [File](https://developer.mozilla.org/en-US/docs/Web/API/File) |
| `chunkattempt`: `{ chunkNumber: number; chunkSize: number; }` |
| `chunksuccess`: `{ chunk: number; attempts: number; response: XhrResponse }` |
| `offline`: N/A |
| `online`: `detail type` |
| `pausedchange`: `boolean` `paused` state |
| `progress`: The `number` percent |
| `reset`: N/A |
| `success`: `null` |
| `uploadstart`: `{ file: File; chunkSize: number; }` |
| `uploaderror`: `{ message: string; chunkNumber: number; attempts: number; }` |
```

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

### Importing Polyfills

Source: https://github.com/muxinc/elements/blob/main/shared/polyfills/README.md

Import the polyfilled globalThis and document objects into your project. This should be done as part of a pre-build step.

```javascript
import { globalThis, document } from './polyfills';
```

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

### addChapters()

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player/REFERENCE.md

Adds an array of chapters to the Mux Player instance. Each chapter can have a start time, an optional end time, and a string value.

```APIDOC
## addChapters(chapters)

### Description
Adds an array of chapters to the Mux Player instance. Each chapter can have a start time, an optional end time, and a string value.

### Method
`addChapters(chapters)`

### Parameters
#### Path Parameters
- **chapters** (Array<{ startTime: number; endTime?: number; value: string; }>) - Required - An array of chapter objects to add.

### Response
None

```

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

### Build Elements Packages

Source: https://github.com/muxinc/elements/blob/main/examples/memory-leak-test/README.md

Build all Mux Elements packages simultaneously using the provided script.

```bash
./examples/memory-leak-test/build-elements.sh
```

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

### addCuePoints()

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player/REFERENCE.md

Adds an array of cue points to the Mux Player instance. Each cue point can have a start time, an optional end time, and associated value.

```APIDOC
## addCuePoints(cuePoints)

### Description
Adds an array of cue points to the Mux Player instance. Each cue point can have a start time, an optional end time, and associated value.

### Method
`addCuePoints(cuePoints)`

### Parameters
#### Path Parameters
- **cuePoints** (Array<{ startTime: number; endTime?: number; value: any; }>) - Required - An array of cue point objects to add.

### Response
None

```

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

### Clone Repositories for Testing

Source: https://github.com/muxinc/elements/blob/main/examples/memory-leak-test/README.md

Clone the necessary Mux repositories side-by-side to set up the testing environment.

```bash
#!/bin/bash

# This repo
git clone git@github.com:muxinc/elements.git ~/Code/Mux/elements

# media-elements repo
git clone git@github.com:muxinc/media-elements.git ~/Code/Mux/media-elements

# media-chrome repo
git clone git@github.com:muxinc/media-chrome.git ~/Code/Mux/media-chrome
```

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

### Create a new branch for a fix

Source: https://github.com/muxinc/elements/blob/main/CONTRIBUTING.md

Use this command to create a new branch based on the latest main branch before starting work on a bug fix.

```shell
git checkout -b fix/my-fix-for-foo main
```

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

### Run Mux Elements Codemod via npx

Source: https://github.com/muxinc/elements/blob/main/packages/mux-elements-codemod/README.md

Execute the codemod tool directly using npx without global installation. This is the simplest way to run the CLI.

```bash
npx @mux/mux-elements-codemod
```

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

### play()

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player/REFERENCE.md

Initiates playback of the media. This method is identical to the native HTMLMediaElement play() method.

```APIDOC
## play()

### Description
Initiates playback of the media. This method is identical to the native HTMLMediaElement play() method.

### Method
`play()`

### Parameters
None

### Response
None

```

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

### Use Mux Audio with a Custom HLS Source

Source: https://github.com/muxinc/elements/blob/main/packages/mux-audio-react/README.md

You can use the `<MuxAudio/>` component with any HLS URL by passing it to the `src` prop instead of `playbackId`. This allows you to leverage Mux Data features with external video sources.

```html
src="your-hls-url.m3u8"
```

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

### Import Classic Theme

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player/UPGRADING_V1_to_V2.md

Import the classic theme to maintain v1.x.x visual styles while using the v2 player.

```javascript
import "@mux/mux-player/themes/classic";
```

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

### Build Individual Elements Packages

Source: https://github.com/muxinc/elements/blob/main/examples/memory-leak-test/README.md

Build specific Mux Elements packages individually using Turbo or npm scripts.

```bash
# For mux-video:
npx turbo run build --filter=@mux/playback-core --filter=@mux/mux-video --force
```

```bash
# For mux-player:
cd packages/mux-player && npm run build
```

```bash
# For mux-player-react:
cd packages/mux-player-react && npm run build
```

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

### Dynamically Set Mux Uploader Endpoint in Astro

Source: https://github.com/muxinc/elements/blob/main/packages/mux-uploader-astro/REFERENCE.md

Set the Mux Uploader's endpoint dynamically based on user input. This example uses an input field and a script to update the uploader's endpoint property.

```astro
--- 
import { MuxUploader } from '@mux/mux-uploader-astro';
---

<input type="text" id="endpoint-input" placeholder="Enter GCS URL..." />
<MuxUploader id="uploader" pausable />

<script>
  import type { MuxUploaderElement } from '@mux/mux-uploader-astro';

  const input = document.getElementById('endpoint-input') as HTMLInputElement;
  const uploader = document.getElementById('uploader') as MuxUploaderElement;

  input.addEventListener('change', () => {
    uploader.endpoint = input.value;
  });
</script>
```

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

### Import Mux Audio React

Source: https://github.com/muxinc/elements/blob/main/packages/mux-audio-react/README.md

Import the Mux Audio React library into your application using import or require.

```javascript
import '@mux/mux-audio-react';
```

```javascript
require('@mux/mux-audio-react');
```

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

### Live Stream Configuration

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player-astro/REFERENCE.md

Set up Mux Player for live streaming by specifying `streamType='live'` and `targetLiveWindow={Infinity}`. A title can also be provided.

```astro
--- 
import { MuxPlayer } from '@mux/mux-player-astro';
---

<MuxPlayer
  playbackId="your-live-playback-id"
  streamType="live"
  targetLiveWindow={Infinity}
  title="Live Stream"
/>
```

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

### Apply Classic Theme

Source: https://github.com/muxinc/elements/blob/main/packages/mux-player/UPGRADING_V1_to_V2.md

Apply the classic theme to the player component after importing it.

```html
<mux-player theme="classic"></mux-player>
```

```jsx
const MyComponent = () => {
  return <MuxPlayer theme="classic"></MuxPlayer>
}
```

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

### View Project Structure

Source: https://github.com/muxinc/elements/blob/main/examples/astro/README.md

Standard directory layout for an Astro project.

```text
/
├── public/
│   └── favicon.svg
├── src/
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json
```