Support adding custom video player

Summary:
Add new option `customVideoPlayers` to ReactInstance, which you can provide custom video player implementing `VideoPlayerImplementation`.
Then the video module in react-360 will use the custom video player instead of default player.
This is the way to extend the video player to support any custom playback such as DASH, HLS, WebRTC, etc.

A CustomPlayerSample in following diff will give example on how to use `customVideoPlayers`.

Reviewed By: mikearmstrong001

Differential Revision: D13236969

fbshipit-source-id: c9b593fa24b7138ff01ee72e8c658f02167fb056

Author: larrylin28

React360/React360.js

@@ -16,11 +16,7 @@ import Module from './js/Modules/Module';
 import RCTBaseView from './js/Views/BaseView';
 import ReactInstance from './js/ReactInstance';
 import Surface from './js/Compositor/Surface';
-import {
-  BasicVideoPlayer,
-  addCustomizedVideoPlayer,
-  getSupportedFormats,
-} from './js/Video/OVRVideo';
+import BrowserVideoPlayer from './js/Compositor/Video/BrowserVideoPlayer';
 
 import {ReactNativeContext} from './js/ReactNativeContext';
 
@@ -32,6 +28,4 @@ export {RCTBaseView};
 export {ReactNativeContext};
 export {ReactInstance};
 export {Surface};
-export {BasicVideoPlayer};
-export {addCustomizedVideoPlayer};
-export {getSupportedFormats};
+export {BrowserVideoPlayer};

React360/js/Compositor/Compositor.js

@@ -17,7 +17,9 @@ import Cursor from './Cursor';
 import Environment, {type PanoOptions} from './Environment/Environment';
 import Surface from './Surface';
 import SurfaceManager from './SurfaceManager';
-import type {VideoPlayer} from './Video/Types';
+import type {VideoPlayerImplementation} from './Video/Types';
+import VideoPlayer from './Video/VideoPlayer';
+import BrowserVideoPlayer from './Video/BrowserVideoPlayer';
 import VideoPlayerManager from './Video/VideoPlayerManager';
 
 const LEFT = 'left';
@@ -42,12 +44,22 @@ export default class Compositor {
   _resourceManager: ResourceManager<Image>;
   _videoPlayers: VideoPlayerManager;
 
-  constructor(frame: HTMLElement, scene: THREE.Scene) {
+  constructor(
+    frame: HTMLElement,
+    scene: THREE.Scene,
+    customVideoPlayers?: Array<Class<VideoPlayerImplementation>>
+  ) {
     this._frame = frame;
     this._cursorVisibility = 'auto';
     this._isMouseCursorActive = false;
     this._resourceManager = createRemoteImageManager();
     this._videoPlayers = new VideoPlayerManager();
+    if (customVideoPlayers) {
+      for (const player of customVideoPlayers) {
+        this._videoPlayers.registerPlayerImplementation(player);
+      }
+    }
+    this._videoPlayers.registerPlayerImplementation(BrowserVideoPlayer);
 
     this._camera = new THREE.PerspectiveCamera(
       60,

React360/js/Compositor/Video/BrowserVideoPlayer.js

@@ -12,7 +12,11 @@
 import * as THREE from 'three';
 
 import type {TextureMetadata} from '../Environment/Types';
-import type {VideoPlayer, VideoPlayerStatus, onVideoStatusChangedCallback} from './Types';
+import type {
+  VideoPlayerImplementation,
+  VideoPlayerStatus,
+  onVideoStatusChangedCallback,
+} from './Types';
 
 const FORMATS = {
   ogg: 'video/ogg; codecs="theora, vorbis"',
@@ -37,7 +41,7 @@ function fillSupportCache() {
  * Implements a video player interface using the browser's native video
  * playback abilities.
  */
-export default class BrowserVideoPlayer implements VideoPlayer {
+export default class BrowserVideoPlayer implements VideoPlayerImplementation {
   _element: HTMLVideoElement;
   _load: ?Promise<TextureMetadata>;
   _status: VideoPlayerStatus;
@@ -126,7 +130,7 @@ export default class BrowserVideoPlayer implements VideoPlayer {
     }
   };
 
-  setSource(src: string, format?: string, layout?: string) {
+  setSource(src: string, stereoFormat: string, fileFormat: string, layout?: string) {
     if (this._texture) {
       this._texture.dispose();
     }
@@ -153,7 +157,7 @@ export default class BrowserVideoPlayer implements VideoPlayer {
         this._texture = tex;
         this._updateStatus('ready');
         resolve({
-          format: format || '2D',
+          format: stereoFormat || '2D',
           layout: layout || 'RECT',
           height,
           src,
@@ -179,7 +183,7 @@ export default class BrowserVideoPlayer implements VideoPlayer {
     return this._load || Promise.reject(new Error('No source set'));
   }
 
-  refreshTexture() {
+  update() {
     if (this._texture && this._playing) {
       this._texture.needsUpdate = true;
     }

React360/js/Compositor/Video/Types.js

@@ -68,16 +68,17 @@ export type VideoStatusEvent = VideoEvent & {
 export type onVideoStatusChangedCallback = (event: VideoStatusEvent) => void;
 export type VideoEventListener = onVideoStatusChangedCallback;
 
-export interface VideoPlayer {
+export interface VideoPlayerImplementation {
   constructor(src: string): void;
   destroy(): void;
   load(): Promise<TextureMetadata>;
   pause(): void;
   play(): void;
-  refreshTexture(): void;
+  update(): void;
   seekTo(position: number): void;
   setMuted(muted: boolean): void;
-  setSource(url: string, format?: string, layout?: string): void;
+  setLoop(loop: boolean): void;
+  setSource(url: string, stereoformat: string, fileFormat: string, layout?: string): void;
   setVolume(vol: number): void;
   addEventListener(event: string, listener: VideoEventListener): void;
   removeEventListener(event: string, listener: VideoEventListener): void;

React360/js/Compositor/Video/VideoPlayer.js

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+
+import * as THREE from 'three';
+import type VideoPlayerManager from './VideoPlayerManager';
+import type {VideoPlayerImplementation, onVideoStatusChangedCallback} from './Types';
+import type {TextureMetadata} from '../Environment/Types';
+
+/**
+ * VideoPlayer is a shallow layer that defers
+ * The lifetime of a player is separate from the content it plays, so we may
+ * need to dynamically select or swap out the implementation behind the player.
+ */
+export default class VideoPlayer {
+  _impl: ?VideoPlayerImplementation;
+  _manager: VideoPlayerManager;
+  _load: ?Promise<TextureMetadata>;
+  _eventDispatcher: THREE.EventDispatcher;
+
+  constructor(manager: VideoPlayerManager) {
+    this._impl = null;
+    this._manager = manager;
+    this._load = null;
+    this._eventDispatcher = new THREE.EventDispatcher();
+  }
+
+  destroy() {
+    if (!this._impl) {
+      return;
+    }
+    this._impl.destroy();
+  }
+
+  load(): Promise<TextureMetadata> {
+    return this._load || Promise.reject(new Error('No source set'));
+  }
+
+  pause() {
+    if (!this._impl) {
+      return;
+    }
+    this._impl.pause();
+  }
+
+  play() {
+    if (!this._impl) {
+      return;
+    }
+    this._impl.play();
+  }
+
+  update() {
+    if (!this._impl) {
+      return;
+    }
+    this._impl.update();
+  }
+
+  seekTo(position: number) {
+    if (!this._impl) {
+      return;
+    }
+    this._impl.seekTo(position);
+  }
+
+  setLoop(loop: boolean) {
+    if (!this._impl) {
+      return;
+    }
+    this._impl.setLoop(loop);
+  }
+
+  setMuted(muted: boolean) {
+    if (!this._impl) {
+      return;
+    }
+    this._impl.setMuted(muted);
+  }
+
+  setSource(url: string, stereoformat: string, fileFormat: string, layout?: string) {
+    if (this._impl) {
+      this._impl.destroy();
+    }
+    const impl = this._manager.createPlayerImplementation(fileFormat);
+    this._impl = impl;
+    impl.addEventListener('status', (event: Object) => {
+      this._onVideoEvents(event);
+    });
+    impl.setSource(url, stereoformat, fileFormat, layout);
+    this._load = impl.load();
+  }
+
+  setVolume(vol: number) {
+    if (!this._impl) {
+      return;
+    }
+    this._impl.setVolume(Math.max(0, Math.min(vol, 1)));
+  }
+
+  addEventListener(event: string, listener: onVideoStatusChangedCallback) {
+    this._eventDispatcher.addEventListener(event, listener);
+  }
+
+  removeEventListener(event: string, listener: onVideoStatusChangedCallback) {
+    this._eventDispatcher.removeEventListener(event, listener);
+  }
+
+  _onVideoEvents(event: Object) {
+    this._eventDispatcher.dispatchEvent(event);
+  }
+}

React360/js/Compositor/Video/VideoPlayerManager.js

@@ -9,24 +9,27 @@
  * @flow
  */
 
-import BrowserVideoPlayer from './BrowserVideoPlayer';
-import type {VideoPlayer} from './Types';
+import VideoPlayer from './VideoPlayer';
+import type {VideoPlayerImplementation} from './Types';
 
 /**
  * Simple utility class for organizing Video Players by their handle
  */
 export default class VideoPlayerManager {
   _players: {[handle: string]: VideoPlayer};
+  _playerImplementations: Array<Class<VideoPlayerImplementation>>;
+  _supportCache: ?Array<string> = null;
 
   constructor() {
     this._players = {};
+    this._playerImplementations = [];
   }
 
   createPlayer(handle: string) {
     if (this._players[handle]) {
       return this._players[handle];
     }
-    const player = new BrowserVideoPlayer();
+    const player = new VideoPlayer(this);
     this._players[handle] = player;
     return player;
   }
@@ -46,7 +49,42 @@ export default class VideoPlayerManager {
 
   frame() {
     for (const handle in this._players) {
-      this._players[handle].refreshTexture();
+      this._players[handle].update();
     }
   }
+
+  registerPlayerImplementation(impl: Class<VideoPlayerImplementation>) {
+    this._playerImplementations.push(impl);
+  }
+
+  createPlayerImplementation(format: string) {
+    for (const Impl of this._playerImplementations) {
+      // $FlowFixMe - no support for statics
+      const supported = Impl.getSupportedFormats();
+      if (supported.indexOf(format) > -1) {
+        // $FlowFixMe - can't instantiate an interface
+        return new Impl();
+      }
+    }
+    throw new Error(`No registered player supports ${format} files.`);
+  }
+
+  getSupportedFormats() {
+    if (this._supportCache != null) {
+      return this._supportCache;
+    }
+
+    const supportCache = [];
+    for (const Impl of this._playerImplementations) {
+      // $FlowFixMe - no support for statics
+      const supported = Impl.getSupportedFormats();
+      for (const format of supported) {
+        if (supportCache.indexOf(format) < 0) {
+          supportCache.push(format);
+        }
+      }
+    }
+    this._supportCache = supportCache;
+    return supportCache;
+  }
 }

React360/js/Modules/VideoModule.js

@@ -12,13 +12,21 @@
 import {
   type VideoOptions,
   type VideoPlayOptions,
-  type VideoPlayer,
   type VideoStatusEvent,
 } from '../Compositor/Video/Types';
+import VideoPlayer from '../Compositor/Video/VideoPlayer';
 import type VideoPlayerManager from '../Compositor/Video/VideoPlayerManager';
 import Module from './Module';
 import type {ReactNativeContext} from '../ReactNativeContext';
 
+function getExt(url: string) {
+  const fileurl = url.substr(url.lastIndexOf("/") + 1);
+  return fileurl
+    .split('?')[0]
+    .split('#')[0]
+    .substr(fileurl.lastIndexOf('.') + 1);
+}
+
 export default class VideoModule extends Module {
   _rnctx: ReactNativeContext;
   allowCreatePlayer: boolean;
@@ -75,29 +83,34 @@ export default class VideoModule extends Module {
     }
     const {source, autoPlay, startPosition, ...params} = options;
     let url = null;
+    let fileFormat = null;
     if (Array.isArray(source)) {
       url = source[0].url;
-      const supported = (player.constructor: any).getSupportedFormats();
+      const supported = this._videoPlayers.getSupportedFormats();
       for (let i = 0; i < source.length; i++) {
         const sourceOption = source[i];
         const format =
           sourceOption.fileFormat ||
-          sourceOption.url.substr(sourceOption.url.lastIndexOf('.'));
-        if (supported.indexOf(format) > 0) {
+          getExt(sourceOption.url);
+        if (supported.indexOf(format) > -1) {
           url = sourceOption.url;
+          fileFormat = format;
           break;
         }
       }
     } else {
+      fileFormat =
+          source.fileFormat ||
+          getExt(source.url);
       url = source.url;
     }
-    if (!url) {
+    if (!url || !fileFormat) {
       throw new Error('Cannot play video, unsupported format');
     }
     this._applyParams(player, params);
-    const format = params.stereo || '2D';
+    const stereoFormat = params.stereo || '2D';
     const layout = params.layout || 'RECT';
-    player.setSource(url, format, layout);
+    player.setSource(url, stereoFormat, fileFormat, layout);
     if (startPosition) {
       player.seekTo(startPosition);
     }