Overnght Player

A custom video player component for React applications based on video.js, specifically designed for the Overnght platform.

Features

• Support for both live streams and VOD content
• Seamless switching between live and VOD modes
• Custom UI with modern design
• Quality selection menu
• Customizable primary color
• TypeScript support

Installation

npm install overnght-player

Usage

import React, { useState } from "react";
import { OvernghtPlayer, VideoMode, Source } from "overnght-player";
import "overnght-player/styles"; // Import player styles

const App = () => {
  const [mode, setMode] = useState(VideoMode.LIVE);

  const sources = [
    {
      src: "https://example.com/live-stream.m3u8",
      type: "application/x-mpegURL",
      live: true,
    },
    {
      src: "https://example.com/vod.mp4",
      type: "video/mp4",
      live: false,
    },
  ];

  const handlePlayerReady = (player) => {
    console.log("Player is ready");

    // You can handle player events here
    player.on("waiting", () => {
      console.log("Player is waiting");
    });

    player.on("dispose", () => {
      console.log("Player will dispose");
    });
  };

  return (
    <div style={{ width: "100%", height: "500px" }}>
      <OvernghtPlayer
        mode={mode}
        setMode={setMode}
        sources={sources}
        onReady={handlePlayerReady}
        isLiveStream={true}
        primaryColor="#00C389"
        eventTitle="Example Event"
      />
    </div>
  );
};

export default App;

Props

| Prop | Type | Required | Default | Description | | -------------- | --------- | -------- | --------- | ------------------------------------------------- | | mode | VideoMode | Yes | - | Current video mode (LIVE or VOD) | | setMode | Function | Yes | - | Function to update the video mode | | sources | Source[] | Yes | - | Array of video sources | | onReady | Function | Yes | - | Callback function called when the player is ready | | isLiveStream | Boolean | No | false | Whether the stream is live | | primaryColor | String | No | "#00C389" | Primary color for UI elements | | eventTitle | String | No | - | Title of the event to display |

Source Object

interface Source {
  src: string; // URL of the video source
  type: string; // MIME type of the video source
  live?: boolean; // Whether this source is a live stream
}

VideoMode Enum

enum VideoMode {
  LIVE = "live",
  VOD = "vod",
}

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch for changes during development
npm run dev

Customization

You can customize the primary color of the player by setting the primaryColor prop:

<OvernghtPlayer
  // ... other props
  primaryColor="#FF0000" // Red color
/>

Browser Support

The player supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

ISC