add Player.js Support (#378)

* Reorder video.js imports and props

* Install player.js

* Add player.js adapter for video.js

package.json

@@ -59,6 +59,7 @@
     "if-env": "^1.0.4",
     "match-sorter": "^6.3.0",
     "parse-duration": "^1.0.0",
+    "player.js": "^0.1.0",
     "proxy-polyfill": "0.1.6",
     "re-reselect": "^4.0.0",
     "react-datetime-picker": "^3.2.1",

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -1,72 +1,72 @@
 // @flow
-import React, { useEffect, useRef, useState } from 'react';
+
-// import { SIMPLE_SITE } from 'config';
+import './plugins/videojs-mobile-ui/plugin';
-import Button from 'component/button';
-import * as ICONS from 'constants/icons';
-import classnames from 'classnames';
-import videojs from 'video.js';
 import 'videojs-contrib-ads'; // must be loaded in this order
 import 'videojs-ima'; // loads directly after contrib-ads
 import 'video.js/dist/alt/video-js-cdn.min.css';
-import eventTracking from 'videojs-event-tracking';
+
+import * as ICONS from 'constants/icons';
 import * as OVERLAY from './overlays';
-import './plugins/videojs-mobile-ui/plugin';
+import Button from 'component/button';
-import hlsQualitySelector from './plugins/videojs-hls-quality-selector/plugin';
+import classnames from 'classnames';
-import recsys from './plugins/videojs-recsys/plugin';
-import qualityLevels from 'videojs-contrib-quality-levels';
-import runAds from './ads';
-import LbryVolumeBarClass from './lbry-volume-bar';
-import keyboardShorcuts from './videojs-keyboard-shortcuts';
 import events from './videojs-events';
+import eventTracking from 'videojs-event-tracking';
 import functions from './videojs-functions';
+import hlsQualitySelector from './plugins/videojs-hls-quality-selector/plugin';
+import keyboardShorcuts from './videojs-keyboard-shortcuts';
+import LbryVolumeBarClass from './lbry-volume-bar';
+import playerjs from 'player.js';
+import qualityLevels from 'videojs-contrib-quality-levels';
+import React, { useEffect, useRef, useState } from 'react';
+import recsys from './plugins/videojs-recsys/plugin';
+import runAds from './ads';
+import videojs from 'video.js';
 
 export type Player = {
-  on: (string, (any) => void) => void,
+  controlBar: { addChild: (string, any) => void },
-  one: (string, (any) => void) => void,
+  loadingSpinner: any,
-  isFullscreen: () => boolean,
+  autoplay: (any) => boolean,
-  exitFullscreen: () => boolean,
-  requestFullscreen: () => boolean,
-  play: () => Promise<any>,
-  volume: (?number) => number,
-  muted: (?boolean) => boolean,
-  dispose: () => void,
   currentTime: (?number) => number,
+  dispose: () => void,
   ended: () => boolean,
   error: () => any,
-  loadingSpinner: any,
+  exitFullscreen: () => boolean,
   getChild: (string) => any,
+  isFullscreen: () => boolean,
+  mobileUi: (any) => void,
+  muted: (?boolean) => boolean,
+  on: (string, (any) => void) => void,
+  one: (string, (any) => void) => void,
+  overlay: (any) => void,
+  play: () => Promise<any>,
   playbackRate: (?number) => number,
   readyState: () => number,
+  requestFullscreen: () => boolean,
   userActive: (?boolean) => boolean,
-  overlay: (any) => void,
+  volume: (?number) => number,
-  mobileUi: (any) => void,
-  controlBar: {
-    addChild: (string, any) => void,
-  },
-  autoplay: (any) => boolean,
 };
 
 type Props = {
-  source: string,
+  adUrl: ?string,
-  sourceType: string,
+  allowPreRoll: ?boolean,
-  poster: ?string,
-  onPlayerReady: (Player, any) => void,
-  isAudio: boolean,
-  startMuted: boolean,
   autoplay: boolean,
   autoplaySetting: boolean,
-  embedded: boolean,
-  toggleVideoTheaterMode: () => void,
-  adUrl: ?string,
   claimId: ?string,
-  userId: ?number,
+  embedded: boolean,
-  allowPreRoll: ?boolean,
   internalFeatureEnabled: ?boolean,
-  shareTelemetry: boolean,
+  isAudio: boolean,
+  poster: ?string,
   replay: boolean,
+  shareTelemetry: boolean,
+  source: string,
+  sourceType: string,
+  startMuted: boolean,
+  userId: ?number,
   videoTheaterMode: boolean,
+  onPlayerReady: (Player, any) => void,
   playNext: () => void,
   playPrevious: () => void,
+  toggleVideoTheaterMode: () => void,
 };
 
 const videoPlaybackRates = [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 1.75, 2];
@@ -114,26 +114,26 @@ properties for this component should be kept to ONLY those that if changed shoul
  */
 export default React.memo<Props>(function VideoJs(props: Props) {
   const {
+    // adUrl, // TODO: this ad functionality isn't used, can be pulled out
+    allowPreRoll,
     autoplay,
     autoplaySetting,
+    claimId,
     embedded,
-    startMuted,
+    internalFeatureEnabled, // for people on the team to test new features internally
+    isAudio,
+    poster,
+    replay,
+    shareTelemetry,
     source,
     sourceType,
-    poster,
+    startMuted,
-    isAudio,
-    onPlayerReady,
-    toggleVideoTheaterMode,
-    // adUrl, // TODO: this ad functionality isn't used, can be pulled out
-    claimId,
     userId,
-    allowPreRoll,
-    internalFeatureEnabled, // for people on the team to test new features internally
-    shareTelemetry,
-    replay,
     videoTheaterMode,
+    onPlayerReady,
     playNext,
     playPrevious,
+    toggleVideoTheaterMode,
   } = props;
 
   // will later store the videojs player
@@ -152,27 +152,25 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     ...VIDEO_JS_OPTIONS,
     autoplay: autoplay,
     muted: startMuted,
-    sources: [
+    sources: [{ src: source, type: sourceType }],
-      {
-        src: source,
-        type: sourceType,
-      },
-    ],
     poster: poster, // thumb looks bad in app, and if autoplay, flashing poster is annoying
-    plugins: {
+    plugins: { eventTracking: true, overlay: OVERLAY.OVERLAY_DATA },
-      eventTracking: true,
-      overlay: OVERLAY.OVERLAY_DATA,
-    },
     // fixes problem of errant CC button showing up on iOS
     // the true fix here is to fix the m3u8 file, see: https://github.com/lbryio/lbry-desktop/pull/6315
-    controlBar: {
+    controlBar: { subsCapsButton: false },
-      subsCapsButton: false,
-    },
   };
 
   const { detectFileType, createVideoPlayerDOM } = functions({ source, sourceType, videoJsOptions, isAudio });
 
-  const { unmuteAndHideHint, retryVideoAfterFailure, initializeEvents } = events({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode, playerRef, autoplaySetting, replay });
+  const { unmuteAndHideHint, retryVideoAfterFailure, initializeEvents } = events({
+    tapToUnmuteRef,
+    tapToRetryRef,
+    setReload,
+    videoTheaterMode,
+    playerRef,
+    autoplaySetting,
+    replay,
+  });
 
   // Initialize video.js
   function initializeVideoPlayer(el) {
@@ -180,6 +178,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
 
     const vjs = videojs(el, videoJsOptions, () => {
       const player = playerRef.current;
+      const adapter = new playerjs.VideoJSAdapter(player);
 
       // this seems like a weird thing to have to check for here
       if (!player) return;
@@ -218,6 +217,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
 
       onPlayerReady(player, videoNode);
+      adapter.ready();
     });
 
     // fixes #3498 (https://github.com/lbryio/lbry-desktop/issues/3498)
@@ -293,7 +293,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
   }, [source, reload]);
 
   return (
-    // $FlowFixMe
     <div className={classnames('video-js-parent', { 'video-js-parent--ios': IS_IOS })} ref={containerRef}>
       <Button
         label={__('Tap to unmute')}

yarn.lock

@@ -12218,6 +12218,11 @@ pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+player.js@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/player.js/-/player.js-0.1.0.tgz#38a2647f022dbbccf2e97e85e1fddccc9ef498e8"
+  integrity sha1-OKJkfwItu8zy6X6F4f3czJ70mOg=
+
 please-upgrade-node@^3.0.2, please-upgrade-node@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"