ps-hackathon-video-player v0.0.1-test

Video Player

Install

yarn add @a-cloud-guru/video-player

Usage

There's a few examples of usage:

• examples/create-react-app
• src/__stories__/Player.stories.js

The player is made of two components: PlayerProvider and Player, the idea being to wrap the Player in a PlayerProvider:

const Component = () => (
  <PlayerProvider sources={sources}>
    <Player />
  </PlayerProvider>
)

where sources looks like:

const sources = {
  '360p': "http://source",
  '720p': "http://source",
  // whatever you want here
  'quality': "src",
}

We also expose a usePlayer hook, allowing a component to access the player state and a few actions:

// player-info.js
export const PlayerInfo = () => {
  const [{ playing }, { play, pause }] = usePlayer();
  return (
    <div>
      <p>Player is {playing ? 'playing' : 'paused'}.</p>
      <button onClick={playing ? pause : play}>{playing ? 'Pause' : 'Play'}</button>
    </div>
  )
}

// another-component.js
import { PlayerInfo } from './player-info';

<PlayerProvider sources={sources}>
  <Player />
  <PlayerInfo />
</PlayerProvider>

List of properties accessible through usePlayer

const [state, actions] = usePlayer();

--STATE-- | property | default value | description | | --- | --- | --- | | pip | false | is picture in picture enabled? | muted | false | is the audio muted? | controlBarVisible | false | is the control bar visible? | settingsVisible | false | are the settings visibile? | autoplay | true | is autoplay on? | volume | 1 | current volume value | playing | false | is the video playing? | loading | true | is the video still loading? | seeking | false | are we currently seeking forward/backward? | durationSeconds | 0 | total length of the video | playedSeconds | 0 | current position in the video | interval | { back:15, forward:15, } | number of seconds to seek backward/forward | subtitleEnabled | false | are subtitles enabled? | quality | '720p' | current quality | playbackRate | 1 | current playback rate | completedTimerCallbacks | [] | list of timer callbacks we've already called; avoids triggering them twice | fullscreen | false | is the player fullscreen? | sources | undefined | array of sources; refer to the next section for details | subtitle | undefined | subtitle url; refer to the next section for details | currentCueText | '' | current subtitle text | url | sourcesquality || sources.Auto | current url | compact | false | is the player in "compact" mode? more on that in the next section | hidden | false | is the player "hidden"? more on that in the next section

--ACTIONS-- | property | type | description | | --- | --- | --- | | reset | function | reset the video player to its initial state | | play | function | play the video | | pause | function | pause the video | | togglePlay | function | play/pause helper | | prev | function | trigger the "onPrevious" callback | | next | function | trigger the "onNext" callback | | playAgain | function | seek back to the beginning of the video | | mute | function | mute the audio | | unmute | function | unmute the audio | | toggleMute | function | mute/unmute helper | | updateVolume | function | update the volume to a new value | | seekTo | function | move to a specific second in the video | | forward | function | seek forward state.interval.forward seconds | | backward | function | seek backward state.interval.backward seconds | | fullScreen | function | enables fullscreen | | exitFullScreen | function | disables fullscreen | | updatePlaybackRate | function | change the playback rate | | updateSeekInterval | function | call it with an object containing {forward:seconds} or {backward:seconds} to update the seek interval | | updateQuality | function | update the quality of the video; effectively switches the source | | toggleAutoplay | function | enable/disable autoplay | | togglePiP | function | enable/disable picture in picture | | canEnablePiP | function | is PiP supported by the browser? call it with the url for the current source | | toggleSubtitle | function | turn subtitles on/off | | canEnableSubtitle | boolean | do we have subtitles? | | player | React ref | react reference to the video player element |

List of properties on the PlayerProvider

--ON CONTROL BAR--

These callbacks are available in the property mentioned in the previous section, called onControlBar. | property | type | description | | --- | --- | --- | | onPlay | function | called before the playback is resumed, using play() | onPause | function | called before the playback is paused, using pause() | onAutoPlayChange | function | called before toggling the autoplay, using toggleAutoplay(). The value is a boolean representing the active state. | onPiPChange | function | called before toggling picture in picture, using togglePip(). The value is a boolean representing the active state. | onPlaybackRateChange | function | called before changing the speed of the playback, using updatePlaybackRate(). The value is the new playback rate. | onSeekForward | function | called before seeking forward in the video, using forward(). The value is an object of the following shape { from: where_we_were_in_seconds, to: where_we_moved_in_seconds } | onSeekBackward | function | called before seeking backward in the video, using backward(). The value is an object of the following shape { from: where_we_were_in_seconds, to: where_we_moved_in_seconds } | onToggleSubtitle | function | called before toggling the subtitles, using toggleSubtitle(). The value is a boolean representing the active state. | onSendFeedback | function | called when the "send feedback" button is clicked

--ABOUT TIMER CALLBACKS--

const timerCallbacks = [
  {
    type: "start",
    second: 23,
    callback: () => console.log("called at 23s from the start")
  },
  {
    type: "start",
    percent: 0.3,
    callback: () => console.log("called at 30% of the video")
  },
  {
    type: "end",
    second: 10,
    callback: () => console.log("called at 10s before the end")
  },
  {
    type: "end",
    percent: 20,
    callback: () => console.log("called at 20% from the end / 80% of the video")
  }
]

--VIDEO TRACKING--

• when a user starts watching a video, every 270s (4min 30s), we send an event – you can think of it as some sort of heartbeat.
• if the user pauses the video, we send the event after 5 seconds, to avoid being spammed by double clicks on the play button).
• if a user is watching a video, doesn’t reach the 270s required to trigger the event, but closes their browser/computer/tab/etc, we just keep a record in their browser’s local storage – when they come back to our website, the event we stored here will get sent, so that we don’t lose the time they spent watching in their previous session.

--TRACKING EVENTS--

List of properties on the Player component

--ON ENDED CALLBACK--

We've used this to show a popup at the end of the video, only if a set of conditions is fulfilled. Implementation details and example:

const onEndedCallback = ({defaultOnEnd}) => {
  if (Math.random() > 0.5) {
    // do something here, show a popup, etc
    // ...
  } else {
    defaultOnEnd();
  }
}

// implementation details inside Player.js
<ReactPlayer
// onEnded triggered by react-player, as described here: https://github.com/CookPete/react-player#callback-props
  onEnded={() => {
    const defaultOnEnd = () => autoplay && next() && onAutoplay();
    // if onEndedCallback is provided, call it with defaultOnEnd as a param
    return onEndedCallback
      ? onEndedCallback({ pip, fullscreen, defaultOnEnd, durationSeconds })
    // otherwise just call defaultOnEnd
      : defaultOnEnd();
  }}
/>

TODO

• consider decoupling tracking; should it be in the base player or in a wrapper?
• fix the disabled linting rules