@shelby-protocol/player

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

!npm

---

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 (
src="https://www.example.com/video.mp4"
poster="https://www.thumbnail.com/thumbnail.jpg"
title="My Video"
>





);
}
`

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 (