npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mycujoo/mcls-player

v1.0.0-rc.8

Published

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

Downloads

52

Readme

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 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.