bunnyHLS

A full-stack npm package for BunnyNet HLS video playback with React components and Next.js API handlers.

Installation

``bash
npm install bunnyhls
`

Features

- 🎥 React component for HLS video playback with auto-token refresh
- 🔐 Server-side URL signing handler for Next.js
- 🔄 Automatic token refresh on 403 errors
- 📦 TypeScript support
- ⚡ Works with both Next.js App Router and Pages Router

Usage

$3

#### Next.js Pages Router (/app/api/video-token.js)

`javascript
import { createBunnyHandler } from 'bunnyhls/server';

export default createBunnyHandler(process.env.BUNNY_SECURITY_KEY);
`

#### Next.js App Router (/app/api/video-token/route.ts)

`typescript
import { createBunnyHandler } from 'bunnyhls/server';
import { NextRequest } from 'next/server';

const handler = createBunnyHandler({
securityKey: process.env.BUNNY_SECURITY_KEY!,
libraryHost: process.env.LIBRARY_HOST, //eg. hvz-c561dc91-370.b-cdn.net
expirationTime: 3600, // optional, default: 3600
isDirectory: true // optional, default: true
});

export async function GET(request: NextRequest) {
return handler(request);
}
`

$3

#### Next.js App Router (/app/page.tsx)

`tsx
import { BunnyVideoPlayer } from 'bunnyhls/client';

export default function Page() {
return (
videoId="7f142e98-c6df-4e3c-8ee4-9b98b6abf73f"
tokenUrl="/api/video-token"
/>
);
}
`

API

$3

Props:

- videoId (string, required): The BunnyNet video ID
- tokenUrl (string, required): The API endpoint that returns signed URLs
- libraryHost (string, required): Your BunnyNet library host
- controls (boolean, optional): Show video controls (default: true)
- style (CSSProperties, optional): Custom styles for the video element
- className (string, optional): Custom CSS class for the video element

$3

Creates a handler function for your API route.

Simple usage:
`javascript
createBunnyHandler(securityKey)
`

Advanced usage:
`javascript
createBunnyHandler({
securityKey: 'your-security-key',
libraryHost: 'vz-c561dc91-370.b-cdn.net',
expirationTime: 3600,
isDirectory: true
})
`

Options:

- securityKey (string, required): Your BunnyNet security key
- libraryHost (string, optional): Your BunnyNet library host
- expirationTime (number, optional): Token expiration time in seconds (default: 3600)
- isDirectory (boolean, optional): Whether to sign as directory (default: true)

Environment Variables

Make sure to set your BunnyNet security key:

`bash
BUNNY_SECURITY_KEY=your-security-key-here
`

How It Works

1. The BunnyVideoPlayer` component requests a signed URL from your API endpoint
2. The API handler uses your security key to sign the HLS playlist URL
3. The component loads the signed URL using hls.js
4. If a 403 error occurs, the component automatically requests a new token and retries

License

ISC