PlayerProvider

A React context provider component that manages player refs and provides them to child components via hooks.

Usage

import { PlayerProvider, PlayerContainer, ShakaVideo } from '@shelby-protocol/player'

function MyPlayer() {
  return (
    <PlayerProvider>
      <PlayerContainer>
        <ShakaVideo src="https://example.com/video.m3u8" />
      </PlayerContainer>
    </PlayerProvider>
  )
}

Context Value

The PlayerProvider provides the following context:

videoRef - A ref to the HTML video element
fullscreenContainerRef - A ref to the fullscreen container element

This component should typically be wrapped around the ShakaVideo AND PlayerContainer components.

Hooks

The following hooks are available for accessing player state and refs. All hooks must be used within a component that is wrapped by PlayerProvider.

`useVideo`

Returns the video element ref object.

Returns: RefObject<HTMLVideoElement | null> | null

Example:

import { useVideo } from '@shelby-protocol/player'

function CustomComponent() {
  const videoRef = useVideo()
  
  if (!videoRef?.current) return null
  
  // Access video element properties
  console.log(videoRef.current.currentTime)
  console.log(videoRef.current.duration)
  console.log(videoRef.current.volume)
}

`useShaka`

Returns the Shaka Player API instance.

Returns: shaka.Player

Throws: Error if video element is not available or doesn't have Shaka Player API

Example:

import { useShaka } from '@shelby-protocol/player'

function CustomComponent() {
  const player = useShaka()
  
  // Access Shaka Player API
  const tracks = player.getVariantTracks()
  const currentTrack = player.getVariantTracks().find(track => track.active)
  
  // Change playback rate
  player.setPlaybackRate(1.5)
  
  // Select a specific track
  player.selectVariantTrack(tracks[0], true)
}

`useVideoRef`

Returns a callback ref function to set the video element reference.

Returns: (el: HTMLVideoElement | null) => void

Example:

import { useVideoRef } from '@shelby-protocol/player'

function CustomComponent() {
  const videoRefCallback = useVideoRef()
  
  return (
    <video
      ref={videoRefCallback}
      src="https://example.com/video.mp4"
    />
  )
}

`useFullscreenContainer`

Returns the fullscreen container ref object.

Returns: RefObject<HTMLDivElement | null> | null

Example:

import { useFullscreenContainer } from '@shelby-protocol/player'

function CustomComponent() {
  const containerRef = useFullscreenContainer()
  
  if (!containerRef?.current) return null
  
  // Access container properties
  console.log(containerRef.current.offsetWidth)
  console.log(containerRef.current.offsetHeight)
}

`useFullscreenContainerRef`

Returns a callback ref function to set the fullscreen container reference.

Returns: (el: HTMLDivElement | null) => void

Example:

import { useFullscreenContainerRef } from '@shelby-protocol/player'

function CustomComponent() {
  const containerRefCallback = useFullscreenContainerRef()
  
  return (
    <div ref={containerRefCallback}>
      {/* Player content */}
    </div>
  )
}

PlayerProvider

On this page