npm package: @mycujoo/mcls-player
Description: `@mycujoo/mcls-player` uses video.js player internally and exports a few React.js components:
Latest version: 1.0.0-rc.8

# MCLS Player

`@mycujoo/mcls-player` uses video.js player internally and exports a few React.js components:

* `VideoJS` - bare video.js react component with minimum added functionality
* `VideoFLV` - bare video.js react component that uses flv.js for flash video
* `Player` - video player component that has support for player state and annotations and integrations with some specialized video.js plugin; This Player needs to be in the context of `PlayerStateContext` and `AnnotationsContext` (both available in this package); Useful for when controlling the player state and annotations is needed. Internally uses `VideoJS` component
* `PlayerWithContexts` - Same as `Player` but with the two contexts already provided.
* `EventPlayer` - video player component that plays a specific MCLS event and handles data fetching and the logic for which player screen to display (eg. geoblocking, scheduled events etc.); Needs to be a child of `PlayerStateContext`, `AnnotationsContext` and `EventContext` (from _@mycujoo/mcls-data-providers_)
* `EventPlayerWithContexts` - Same as `EventPlayer` but with all contexts already provided.

Please check this [CodeSandbox](https://codesandbox.io/s/sad-pateu-w2mvys?file=/src/EventPlayerWithContext.tsx) for examples.

## VideoJS

Props:

* `source` _(string, required)_: The URL of the video source to be played.
* `autoplay` _(boolean, optional)_: If true, the video will automatically start playing when loaded.
* `autoSeekToLiveEdge` _(boolean, optional)_: If true, the video player will seek to the live edge of the video when playing live streams.
* `debug` _(boolean, optional)_: If true, enables debug mode for the video player.
* `playsInline` _(boolean, optional)_: If true, the video will play inline within the element's layout on supported devices.
* `controls` _(boolean, optional)_: If true, shows the video controls (play/pause, volume, etc.).
* `showSeekbar` _(boolean, optional)_: If true, shows the seek bar on the video player controls.
* `showFullscreen` _(boolean, optional)_: If true, shows the fullscreen button on the video player controls.
* `showQualitySelector` _(boolean, optional)_: If true, shows the quality selector for choosing different video quality options.
* `showVolume` _(boolean, optional)_: If true, shows the volume control on the video player.
* `showTimers` _(boolean, optional)_: If true, shows the current time and duration timers on the video player.
* `showChromecast` _(boolean, optional)_: If true, shows the Chromecast button for casting the video.
* `showPictureInPicture` _(boolean, optional)_: If true, shows the picture-in-picture button for enabling picture-in-picture mode.
* `showLiveUI` _(boolean, optional)_: If true, shows UI elements related to live streaming.
* `volume` _(number, optional)_: The initial volume level of the video player (0 to 1).
* `width` _(CSS.Property.Width, optional)_: The width of the video player.
* `height` _(CSS.Property.Height, optional)_: The height of the video player.
* `chromecastCustomData` _(object, optional)_: Custom data required for Chromecast integration. Should have the following properties:
  * `eventId` _(string)_: The event ID.
  * `publicKey` _(string)_: Public key for authentication.
  * `identityToken` _(string)_: Identity token for authentication.
  * `customPlaylistUrl` _(string)_: URL of the custom playlist.
  * `pseudoUserId` _(string)_: Pseudo user ID.
  * `receiverAppID` _(string)_: Receiver app ID for Chromecast.
* `drm` _(DRM, optional)_: Digital Rights Management configuration.
* `posterUrl` _(string, optional)_: URL of the poster image to be displayed before the video starts playing.
* `liveTolerance` _(number, optional)_: Number of seconds behind live that the video player can be before it's considered non-live. Only used when playing at the live edge. Defaults to 15 seconds.
* `limitAutoQualityToPlayerSize` _(boolean, optional)_: If true, the player's automatic quality selection won't choose a rendition larger than the player dimensions. Defaults to true.
* `startAtMaxQuality` _(boolean, optional)_: If true, the player's will disregard bandwidth size in the inital segment calculation and force the player to load the highest quality
* `auth` _(string, optional)_: Authorization token to be used for fetching the stream.

Event Handlers:

* `onPlayerInit` _(function)_: Called when the video player is initialized. Receives the extended Video.js instance as a parameter.

* `onPlayerActive` _(function)_: Called when the video player becomes active.

* `onPlayerReady` _(function)_: Called when the video player is ready.

* `onClick` _(function)_: Called when the video player is clicked.

* `onError` _(function)_: Called when an error occurs. Receives an optional error parameter.

* `onPlay` _(function)_: Called when the video starts playing.

* `onTimeUpdate` _(function)_: Called when the playback time is updated. Receives the current time in seconds.

* `onFirstPlay` _(function)_: Called when the video starts playing for the first time.

* `onPause` _(function)_: Called when the video playback is paused.

* `onSeeked` _(function)_: Called when the video seeking operation is completed. Receives the current time in seconds after seeking.

* `onSeeking` _(function)_: Called while the video is in the process of seeking. Receives the current time in seconds during seeking.

* `onWaiting` _(function)_: Called when the video playback is temporarily paused due to buffering. Receives the current time in seconds.

* `onEnd` _(function)_: Called when the video playback reaches the end.

* `onDispose` _(function)_: Called when the video player component is disposed of or unmounted.

* `onLoadedMetadata` _(function)_: Called when the metadata of the video is successfully loaded. Receives the loaded metadata as an unknown value.

* `onQualityChange` _(function)_: Called when the video quality is changed by the user or automatically. Receives the new quality information as an object with the following properties:

  * `bitrate` _(number)_: The bitrate of the new quality.
  * `height` _(number)_: The height of the new quality.
  * `width` _(number)_: The width of the new quality.

* `children` _(ReactNode, optional)_: Any additional React components that you want to render within the video player component.