npm package: @shelby-protocol/player
Description: > A lightweight React wrapper around Shaka Player for adaptive HLS/DASH streaming.
Latest version: 0.2.0

# @shelby-protocol/player

> A lightweight React wrapper around Shaka Player for adaptive HLS/DASH streaming.

![npm](https://img.shields.io/badge/status-private-lightgrey)

---

## Installation

> **Note:** This is a private package. Ensure you have access to your private registry.

```bash
pnpm add @shelby-protocol/player
```

## Usage

How to use the package once you have installed it to your project.

1. You must have TailwindCSS 4 installed in your project for the default styles to work.

2. Add the following lines to your `globals.css` file.

```css
@source "../node_modules/@shelby-protocol/player";
```

Alternatively, you can import the shadcn styles file directly into your project.

```css
@import "@shelby-protocol/player/styles/shadcn.css";
```

3. Import the components you need to render out the player.

```tsx
import { SimpleShakaVideoPlayer } from "@shelby-protocol/player";
```

4. Import the components for the player and use them to render out the player.

```tsx
import { SimpleShakaVideoPlayer, VideoOutlet, Poster, DefaultLayout } from "@shelby-protocol/player";

function VideoPlayer() {
  return (
    <SimpleShakaVideoPlayer
      src="https://www.example.com/video.mp4"
      poster="https://www.thumbnail.com/thumbnail.jpg"
      title="My Video"
    >
      <VideoOutlet>
        <Poster />
      </VideoOutlet>
      <DefaultLayout />
    </SimpleShakaVideoPlayer>
  );
}
```

5. (Advanced) If you would like to build the player using the primitive components, you can compose them directly together.

```tsx
import {
  Controls,
  ControlsGroup,
  FullscreenButton,
  PlayButton,
  VolumeButton,
  MediaTime,
  MediaTitle,
  TimeSlider,
  usePlayer,
} from "@shelby-protocol/player";

function CustomLayout() {
  const { containerRef } = usePlayer();

  return (
    <Controls>
      <div className="flex-1" />
      <ControlsGroup className="px-4 w-full">
        <TimeSlider />
      </ControlsGroup>
      <ControlsGroup className="p-1 pt-0">
        <PlayButton />
        <VolumeButton />
        <MediaTime />
        <MediaTitle />
        <div className="flex-1" />
        <FullscreenButton />
      </ControlsGroup>
    </Controls>
  );
}

function VideoPlayer() {
  return (
    <SimpleShakaVideoPlayer
      src="https://www.example.com/video.mp4"
      title="My Video"
      poster="https://www.thumbnail.com/thumbnail.jpg"
    >
      <VideoOutlet>
        <Poster />
      </VideoOutlet>
      <CustomLayout />
    </SimpleShakaVideoPlayer>
  );
}
```

---

## Development & Build Scripts

We use **Storybook** for component development and **tsup** for bundling.

| Script                 | Description                                        |
| ---------------------- | -------------------------------------------------- |
| `pnpm lint`            | Run Biome lint checks                              |
| `pnpm fmt`             | Run Biome auto-formatting                          |
| `pnpm storybook`       | Start Storybook in development mode (port 6006)    |
| `pnpm build:storybook` | Build Storybook for production                     |
| `pnpm build`           | Clean and bundle with tsup                         |

Example:

```bash
# Start Storybook
pnpm run storybook
```