### Start Development Server

Source: https://github.com/chintan9/plyr-react/wiki/Getting-started-for-Development

Run this command to start the development server, which includes a watcher and the Styleguide. Components are developed in `src/lib/components`.

```bash
npm run dev
```

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

### Install Project from Zip

Source: https://github.com/chintan9/plyr-react/wiki/Getting-started-for-Development

Download and extract the project zip file, then navigate to the directory and install dependencies if you are not familiar with Git.

```bash
npm run install
```

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

### Clone and Install Project

Source: https://github.com/chintan9/plyr-react/wiki/Getting-started-for-Development

Use these commands to clone the repository and install dependencies if you are familiar with Git.

```bash
git clone git@github.com:chintan9/plyr-react.git
cd plyr-react
npm run install
```

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

### Install plyr-react

Source: https://github.com/chintan9/plyr-react/blob/master/README.md

Install the plyr-react package using NPM, Yarn, or PNPM.

```bash
# NPM
npm install plyr-react

# Yarn
yarn add plyr-react

# PNPM
pnpm add plyr-react
```

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

### Basic Plyr React Player Setup

Source: https://github.com/chintan9/plyr-react/blob/master/README.md

Demonstrates basic usage of the `<Plyr />` component with video source and custom controls. Ensure the stylesheet is imported for default theming.

```tsx
import Plyr from "plyr-react"
import "plyr-react/plyr.css"

// Player source configuration
const plyrProps = {
  source: {
    type: "video",
    sources: [
      {
        src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4",
        type: "video/mp4",
        size: 720,
      },
    ],
    poster:
      "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",
  },
  options: {
    // Full list of options: https://github.com/sampotts/plyr#options
    controls: [
      "play-large",
      "play",
      "progress",
      "current-time",
      "mute",
      "volume",
      "captions",
      "settings",
      "pip",
      "airplay",
      "fullscreen",
    ],
  },
}

function MyPlayer() {
  return <Plyr {...plyrProps} />
}
```

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

### Basic HLS Integration with usePlyr and useHls

Source: https://github.com/chintan9/plyr-react/blob/master/README.md

Example of integrating HLS playback using both the usePlyr and useHls hooks within a video element.

```jsx
<video
  ref={usePlyr(ref, {
    ...useHls(hlsSource, options),
    source,
  })}
  className="plyr-react plyr"
/>
```

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

### Install Peer Dependencies

Source: https://github.com/chintan9/plyr-react/blob/master/README.md

Install required peer dependencies like React and Plyr using NPM, Yarn, or PNPM.

```bash
# NPM
npm install react react-dom plyr

# Yarn
yarn add react react-dom plyr

# PNPM
pnpm add react react-dom plyr
```

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

### Run Tests

Source: https://github.com/chintan9/plyr-react/wiki/Getting-started-for-Development

Execute tests using Jest, Enzyme, and Jasmine Matchers. Refer to `Plyr.test.js` for examples.

```bash
npm run test
```

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

### Integrate HLS Streaming with usePlyr Hook

Source: https://context7.com/chintan9/plyr-react/llms.txt

Combine the usePlyr hook with HLS.js for adaptive bitrate streaming support. This example demonstrates setting up HLS.js and attaching it to the video element managed by the hook.

```tsx
import React, { forwardRef, useRef, useEffect } from "react"
import { usePlyr, APITypes } from "plyr-react"
import Hls from "hls.js"
import "plyr-react/plyr.css"

interface HlsPlayerProps {
  hlsSource: string
  options?: Plyr.Options
}

const HlsPlayer = forwardRef<APITypes, HlsPlayerProps>((props, ref) => {
  const { hlsSource, options } = props
  const videoRef = useRef<HTMLVideoElement>(null)

  const source = {
    type: "video" as const,
    sources: [] as Plyr.Source[],
  }

  const raptorRef = usePlyr(ref, {
    source, 
    options,
  })

  useEffect(() => {
    const video = videoRef.current
    if (!video || !hlsSource) return

    if (Hls.isSupported()) {
      const hls = new Hls()
      hls.loadSource(hlsSource)
      hls.attachMedia(video)

      return () => {
        hls.destroy()
      }
    } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
      // Native HLS support (Safari)
      video.src = hlsSource
    }
  }, [hlsSource])

  return (
    <video
      ref={(el) => {
        // Assign to both refs
        videoRef.current = el
        if (typeof raptorRef === "function") {
          raptorRef(el)
        } else if (raptorRef) {
          (raptorRef as React.MutableRefObject<HTMLVideoElement | null>).current = el
        }
      }}
      className="plyr-react plyr"
    />
  )
})

HlsPlayer.displayName = "HlsPlayer"

// Usage
function StreamingApp() {
  const ref = useRef<APITypes>(null)

  return (
    <HlsPlayer
      ref={ref}
      hlsSource="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
      options={{ autoplay: false }}
    />
  )
}
```

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

### Dynamically Switch Plyr Video Sources

Source: https://context7.com/chintan9/plyr-react/llms.txt

Update the 'source' prop of the Plyr component to change the video being played. This example demonstrates switching between local video files and a YouTube video.

```tsx
import React, { useRef, useState } from "react"
import Plyr, { APITypes, PlyrSource } from "plyr-react"
import "plyr-react/plyr.css"

const sources: Record<string, PlyrSource> = {
  video1: {
    type: "video",
    sources: [
      {
        src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4",
        type: "video/mp4",
      },
    ],
    poster: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",
  },
  video2: {
    type: "video",
    sources: [
      {
        src: "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4",
        type: "video/mp4",
      },
    ],
  },
  youtube: {
    type: "video",
    sources: [
      {
        src: "dQw4w9WgXcQ",
        provider: "youtube",
      },
    ],
  },
}

function DynamicPlayer() {
  const ref = useRef<APITypes>(null)
  const [currentSource, setCurrentSource] = useState<PlyrSource>(sources.video1)

  const switchSource = (key: string) => {
    setCurrentSource(sources[key])
  }

  return (
    <div>
      <Plyr ref={ref} source={currentSource} />
      <div>
        <button onClick={() => switchSource("video1")}>Video 1</button>
        <button onClick={() => switchSource("video2")}>Video 2</button>
        <button onClick={() => switchSource("youtube")}>YouTube</button>
      </div>
    </div>
  )
}

```

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

### Build Static Styleguide

Source: https://github.com/chintan9/plyr-react/wiki/Getting-started-for-Development

Builds the static version of the Styleguide, suitable for deployment.

```bash
npm run styleguide:build
```

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

### Deploy Styleguide to GitHub Pages

Source: https://github.com/chintan9/plyr-react/wiki/Getting-started-for-Development

Deploy the static Styleguide to GitHub Pages. Ensure the repository URL in `package.json` is set correctly.

```bash
npm run deploy
```

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

### Serve Styleguide Only

Source: https://github.com/chintan9/plyr-react/wiki/Getting-started-for-Development

This command serves only the Styleguide without running the development watcher or rebuilding the library.

```bash
npm run start
```

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

### Build Library

Source: https://github.com/chintan9/plyr-react/wiki/Getting-started-for-Development

Builds the library. The output will be located in the `dist` folder.

```bash
npm run build
```

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

### Run Tests with Coverage

Source: https://github.com/chintan9/plyr-react/wiki/Getting-started-for-Development

Run tests and generate a coverage report.

```bash
npm run test:coverage
```

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

### Run Linter with Fix

Source: https://github.com/chintan9/plyr-react/wiki/Getting-started-for-Development

Run the linter and automatically fix any possible issues.

```bash
npm run lint:fix
```

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

### Run Linter

Source: https://github.com/chintan9/plyr-react/wiki/Getting-started-for-Development

Check code for style and potential errors using ESLint, configured with eslint-config-airbnb. Modify rules in `.eslintrc.json`.

```bash
npm run lint
```

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

### Controlling Plyr Player Instance with Refs

Source: https://github.com/chintan9/plyr-react/blob/master/README.md

Demonstrates how to control the player instance programmatically using a ref. The ref's current object contains a 'plyr' property for accessing the Plyr API.

```tsx
import React, { useRef, useEffect } from "react"
import Plyr from "plyr-react"
import "plyr-react/plyr.css"

const PlayerController = () => {
  const ref = useRef(null)

  const playVideo = () => {
    // ref.current.plyr is the Plyr instance
    if (ref.current && ref.current.plyr) {
      ref.current.plyr.play()
    }
  }

  const enterFullscreen = () => {
    if (ref.current && ref.current.plyr) {
      ref.current.plyr.fullscreen.enter()
    }
  }

  return (
    <div>
      <Plyr
        ref={ref}
        source={{
          type: "video",
          sources: [{ src: "/path/to/video.mp4", type: "video/mp4" }],
        }}
      />
      <button onClick={playVideo}>Play</button>
      <button onClick={enterFullscreen}>Go Fullscreen</button>
    </div>
  )
}
```

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

### Publish Library to NPM

Source: https://github.com/chintan9/plyr-react/wiki/Getting-started-for-Development

Release your library to NPM or a private registry. Ensure your NPM account is active, `.npmrc` is configured, and the repository URL in `package.json` is correct.

```bash
npm run release
```

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

### Basic Video Player with Plyr Component

Source: https://context7.com/chintan9/plyr-react/llms.txt

Use the `<Plyr />` component for simple media integration. It accepts a `source` prop for media configuration and an optional `options` prop for player customization.

```tsx
import Plyr from "plyr-react"
import "plyr-react/plyr.css"

const videoSource = {
  type: "video" as const,
  sources: [
    {
      src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4",
      type: "video/mp4",
      size: 720,
    },
    {
      src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4",
      type: "video/mp4",
      size: 1080,
    },
  ],
  poster: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",
}

const options = {
  controls: [
    "play-large",
    "play",
    "progress",
    "current-time",
    "mute",
    "volume",
    "captions",
    "settings",
    "pip",
    "airplay",
    "fullscreen",
  ],
  autoplay: false,
}

function VideoPlayer() {
  return <Plyr source={videoSource} options={options} />
}
```

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

### Create Custom Plyr Component with usePlyr Hook

Source: https://context7.com/chintan9/plyr-react/llms.txt

Build custom media player components using the usePlyr hook, which provides full control over the player's lifecycle. The hook returns a ref to attach to the video element.

```tsx
import React, { forwardRef, useRef } from "react"
import { usePlyr, APITypes, PlyrProps } from "plyr-react"
import "plyr-react/plyr.css"

// Custom Plyr component using the hook
const CustomPlyr = forwardRef<APITypes, PlyrProps>((props, ref) => {
  const { source, options = null, ...rest } = props

  const raptorRef = usePlyr(ref, {
    source,
    options,
  })

  return (
    <video
      ref={raptorRef}
      className="plyr-react plyr"
      {...rest}
    />
  )
})

CustomPlyr.displayName = "CustomPlyr"

// Usage
function App() {
  const playerRef = useRef<APITypes>(null)

  const source = {
    type: "video" as const,
    sources: [
      {
        src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4",
        type: "video/mp4",
      },
    ],
  }

  return (
    <CustomPlyr
      ref={playerRef}
      source={source}
      options={{ autoplay: false }}
    />
  )
}
```

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

### YouTube Player with Plyr Component

Source: https://context7.com/chintan9/plyr-react/llms.txt

Embed YouTube videos by setting the `provider` to "youtube" and providing the video ID or URL in the source.

```tsx
import { useRef } from "react"
import Plyr from "plyr-react"
import "plyr-react/plyr.css"

const youtubeSource = {
  type: "video" as const,
  sources: [
    {
      src: "aqz-KE-bpKQ", // YouTube video ID
      provider: "youtube" as const,
    },
  ],
}

function YouTubePlayer() {
  const ref = useRef(null)

  return (
    <div>
      <Plyr ref={ref} source={youtubeSource} />
    </div>
  )
}
```

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

### Control Plyr Player Instance via Refs

Source: https://context7.com/chintan9/plyr-react/llms.txt

Access the underlying Plyr instance through a ref to programmatically control playback, volume, fullscreen, and other player features. Ensure the ref is correctly typed as APITypes.

```tsx
import React, { useRef, useEffect } from "react"
import Plyr, { APITypes, PlyrInstance } from "plyr-react"
import "plyr-react/plyr.css"

const source = {
  type: "video" as const,
  sources: [
    {
      src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4",
      type: "video/mp4",
    },
  ],
}

function ControlledPlayer() {
  const ref = useRef<APITypes>(null)

  const play = () => {
    ref.current?.plyr?.play()
  }

  const pause = () => {
    ref.current?.plyr?.pause()
  }

  const toggleMute = () => {
    if (ref.current?.plyr) {
      ref.current.plyr.muted = !ref.current.plyr.muted
    }
  }

  const setVolume = (level: number) => {
    if (ref.current?.plyr) {
      ref.current.plyr.volume = level // 0 to 1
    }
  }

  const enterFullscreen = () => {
    ref.current?.plyr?.fullscreen.enter()
  }

  const seekTo = (seconds: number) => {
    if (ref.current?.plyr) {
      ref.current.plyr.currentTime = seconds
    }
  }

  return (
    <div>
      <Plyr ref={ref} source={source} />
      <div>
        <button onClick={play}>Play</button>
        <button onClick={pause}>Pause</button>
        <button onClick={toggleMute}>Toggle Mute</button>
        <button onClick={() => setVolume(0.5)}>50% Volume</button>
        <button onClick={enterFullscreen}>Fullscreen</button>
        <button onClick={() => seekTo(30)}>Seek to 30s</button>
      </div>
    </div>
  )
}
```

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

### Vimeo Player with Plyr Component

Source: https://context7.com/chintan9/plyr-react/llms.txt

Integrate Vimeo videos by specifying the `provider` as "vimeo" and using the video ID.

```tsx
import Plyr from "plyr-react"
import "plyr-react/plyr.css"

const vimeoSource = {
  type: "video" as const,
  sources: [
    {
      src: "143418951", // Vimeo video ID
      provider: "vimeo" as const,
    },
  ],
}

function VimeoPlayer() {
  return <Plyr source={vimeoSource} />
}
```

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

### Audio Player with Plyr Component

Source: https://context7.com/chintan9/plyr-react/llms.txt

Play audio files by setting the source type to "audio" and providing the audio file sources.

```tsx
import Plyr from "plyr-react"
import "plyr-react/plyr.css"

const audioSource = {
  type: "audio" as const,
  sources: [
    {
      src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",
      type: "audio/mp3",
    },
  ],
}

const audioOptions = {
  controls: ["play", "progress", "current-time", "mute", "volume"],
}

function AudioPlayer() {
  return <Plyr source={audioSource} options={audioOptions} />
}
```

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

### Handle Plyr Events with React

Source: https://context7.com/chintan9/plyr-react/llms.txt

Attach event listeners to the Plyr player instance using a ref to react to player events like play, pause, and volume changes. Ensure to clean up listeners in the effect's return function.

```tsx
import React, { useRef, useEffect } from "react"
import Plyr, { APITypes } from "plyr-react"
import "plyr-react/plyr.css"

const source = {
  type: "video" as const,
  sources: [
    {
      src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4",
      type: "video/mp4",
    },
  ],
}

function PlayerWithEvents() {
  const ref = useRef<APITypes>(null)

  useEffect(() => {
    const plyr = ref.current?.plyr

    if (!plyr) return

    const onPlay = () => console.log("Video started playing")
    const onPause = () => console.log("Video paused")
    const onEnded = () => console.log("Video ended")
    const onTimeUpdate = (event: Plyr.PlyrEvent) => {
      console.log(`Current time: ${plyr.currentTime}`)
    }
    const onVolumeChange = () => console.log(`Volume: ${plyr.volume}`)
    const onEnterFullscreen = () => console.log("Entered fullscreen")
    const onExitFullscreen = () => console.log("Exited fullscreen")

    plyr.on("play", onPlay)
    plyr.on("pause", onPause)
    plyr.on("ended", onEnded)
    plyr.on("timeupdate", onTimeUpdate)
    plyr.on("volumechange", onVolumeChange)
    plyr.on("enterfullscreen", onEnterFullscreen)
    plyr.on("exitfullscreen", onExitFullscreen)

    return () => {
      plyr.off("play", onPlay)
      plyr.off("pause", onPause)
      plyr.off("ended", onEnded)
      plyr.off("timeupdate", onTimeUpdate)
      plyr.off("volumechange", onVolumeChange)
      plyr.off("enterfullscreen", onEnterFullscreen)
      plyr.off("exitfullscreen", onExitFullscreen)
    }
  }, [])

  return <Plyr ref={ref} source={source} />
}

```

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

### Custom Plyr Component with usePlyr Hook

Source: https://github.com/chintan9/plyr-react/blob/master/README.md

Re-creates the <Plyr /> component using the usePlyr hook for full control over the player's lifecycle. Attach the returned ref to a video or div element.

```jsx
import React from "react"
import { usePlyr } from "plyr-react"
import "plyr-react/plyr.css"

// This example re-creates the <Plyr /> component using the hook
const CustomPlyr = React.forwardRef((props, ref) => {
  const { source, options = null, ...rest } = props

  // usePlyr returns a ref that you can attach to a <video> or <div> element.
  const raptorRef = usePlyr(ref, {
    source,
    options,
  })

  return <video ref={raptorRef} className="plyr-react plyr" {...rest} />
})
```

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

### Plyr-React TypeScript Types

Source: https://context7.com/chintan9/plyr-react/llms.txt

Utilize exported TypeScript types for robust type checking when configuring Plyr options, sources, and component props. This ensures type safety throughout your application.

```tsx
import type {
  PlyrInstance,
  PlyrOptions,
  PlyrSource,
  PlyrProps,
  APITypes,
} from "plyr-react"

// Example typed configuration
const typedOptions: PlyrOptions = {
  controls: ["play", "progress", "current-time", "mute", "volume", "fullscreen"],
  autoplay: false,
  muted: false,
  volume: 1,
  clickToPlay: true,
  hideControls: true,
  resetOnEnd: false,
  keyboard: { focused: true, global: false },
  tooltips: { controls: false, seek: true },
  captions: { active: false, language: "auto", update: false },
  fullscreen: { enabled: true, fallback: true, iosNative: false },
  ratio: "16:9",
  storage: { enabled: true, key: "plyr" },
}

const typedSource: PlyrSource = {
  type: "video",
  title: "Example Video",
  sources: [
    { src: "/video.mp4", type: "video/mp4", size: 720 },
    { src: "/video-1080.mp4", type: "video/mp4", size: 1080 },
  ],
  poster: "/poster.jpg",
  tracks: [
    {
      kind: "captions",
      label: "English",
      srclang: "en",
      src: "/captions-en.vtt",
      default: true,
    },
  ],
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.