@shelby-protocol/player

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

Installation

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

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.

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

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

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

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

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

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

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.

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:

# Start Storybook
pnpm run storybook