NPO React Player

A React wrapper for the @npo/player library.

Getting Started

1. Install the package
2. Sign a JWT according to the @npo/player documentation
3. Import the NpoPlayer component
4. Add the component to your application

// npm
npm install @npo/react-player

// yarn
yarn add @npo/react-player

import { NpoPlayer } from '@npo/react-player'

export const MyPlayer = () => {
  const { data, isSuccess } = useMyPlayerToken()

  return <NpoPlayer isEnabled={isSuccess} jwt={data?.token} />
}

Next.js

The NPO React Player package is importing the stylesheet from the @npo/player libray. To be able to use this import from an NPM module, you need to to add the NPO React Player to the transpilePackages in the next.config.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@npo/react-player']
}

module.exports = nextConfig

NPO Tag

The NPO React Player package has a dependency on the NPO Tag SDK. This SDK is a private repository. You will need to define an auth token and a registry server to be able to install this dependency.

Available properties

children

You can add children to the NpoPlayer component. The children will be displayd on top of the Player instance.

export const MyPlayer = () => {
  const { data, isError, isLoading } = useMyPlayerToken()

  return (
    <NpoPlayer isEnabled={!isLoading} jwt={data?.token}>
      {isLoading && <MyPlayerLoader />}

      {isError && <MyPlayerError />}
    </NpoPlayer>
  )
}

className

You can add class names as property to the NpoPlayer component to style your player implementation.

export const MyPlayer = () => {
  return <NpoPlayer className='aspect-h-9 aspect-w-16' />
}

handleError

You can add a handleError event handler as property to the NpoPlayer component. This handler returns a statusCode value on which you can customize your error handling.

export const MyPlayer = () => {
  const [showRestrictionError, setShowRestrictionError] = React.useState<boolean>(false)

  const handleError = React.useCallback((statusCode: number) => {
    setShowRestrictionError(statusCode === 450)
  }, [])

  return (
    <NpoPlayer handleError={handleError}>
      {showRestrictionError && <MyRestrictionError />}
    </NpoPlayer>
}

isEnabled

You can add an isEnabled boolean as property to the NpoPlayer component for any dependency that needs to be resolved before the initialization of the player instance.

export const MyPlayer = () => {
  const { isLoadingA } = useMyPlayerDepA()
  const { isLoadingB } = useMyPlayerDepB()

  return <NpoPlayer isEnabled={!isLoadingA && !isLoadingB} />
}

jwt

You have to add the JWT as property to the NpoPlayer component. The JWT is the only required property for the player to play.

export const MyPlayer = () => {
  const { data, isSuccess } = useMyPlayerToken()

  return <NpoPlayer isEnabled={isSuccess} jwt={data?.token} />
}

npoTagInstance

You can add the NPO Tag instance as property to the NpoPlayer component.

import { npoTagInstance } from './npoTag.service.ts'

export const MyPlayer = () => {
  return <NpoPlayer npoTagInstance={npoTagInstance} />
}

playerConfig

You can add a player configuration as property to the NpoPlayer component. The available configuration options can be found in the @npo/player documentation.

export const MyPlayer = () => {
  return <NpoPlayer playerConfig={{ cast: { enable: false } }} />
}

streamOptions

You can add stream options as property to the NpoPlayer component. See all available options in the @npo/player documentation.

export const MyPlayer = () => {
  return <NpoPlayer streamOptions={{ autoplay: true, liveOffset: false, startOffset: 60 }} />
}

Environment variables

You can define three environment variables to run the player. If you define these environment variables, you don't have to add these values to the playerConfig and the streamOptions properties: these will be applied as the default values.

NPO_PLAYER_ANALYTICS_KEY=
NPO_PLAYER_LICENSE_KEY=
NPO_PLAYER_URL=

Next.js

When you are using Next.js you will have to prefix the environment variables with the NEXT_PUBLIC_ prefix for the variables to be available in the browser environment.