Dispatch More Media Events from Audio Source

Summary:
To support more audio control, more media events is needed.
Support dispatching `durationchange`, `timeupdate`, `pause`, `playing`, `error` events from `VRAudioBufferSource`

Differential Revision: D4922091

fbshipit-source-id: 549161e

Author: larrylin28

ReactVR/js/Audio/MediaError.js

@@ -0,0 +1,29 @@
+/**
+ * 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
+ */
+
+/**
+ * Custom media errors class for audio, correspond to HTML media error
+ */
+
+export const MEDIA_ERR_ABORTED = 1; // W3C error code, the fetching was aborted by the user's request.
+export const MEDIA_ERR_NETWORK = 2; // W3C error code, the fetching was failed by network error.
+export const MEDIA_ERR_DECODE = 3; // W3C error code, an error occurred while trying to decode the media.
+export const MEDIA_ERR_SRC_NOT_SUPPORTED = 4; // W3C error code, the media has been found to be unsuitable.
+
+export default class MediaError {
+  code: number;
+  message: string;
+
+  constructor(code: number, message: string) {
+    this.code = code;
+    this.message = message;
+  }
+}

ReactVR/js/Audio/VRAudioBufferManager.js

@@ -8,10 +8,11 @@
  *
  * @flow
  */
+import {MEDIA_ERR_NETWORK, MEDIA_ERR_DECODE, default as MediaError} from './MediaError';
 
 import type VRAudioContext from './VRAudioContext';
 
-type OnLoadHandler = (?AudioBuffer, any) => void;
+type OnLoadHandler = (buffer: ?AudioBuffer, error: ?MediaError) => void;
 
 // A simple dictionary cache and a simple request batch
 // TODO: we should use expire time to update/clean cache
@@ -47,20 +48,29 @@ export function fetch(url: string, audioContext: VRAudioContext, onLoad: OnLoadH
           function(message) {
             _onRequestError(
               url,
-              '[VRAudioBufferSource] Decoding failure: ' + url + ' (' + message + ')'
+              new MediaError(
+                MEDIA_ERR_DECODE,
+                '[VRAudioBufferSource] Decoding failure: ' + url + ' (' + message + ')'
+              )
             );
           }
         );
       } else {
         _onRequestError(
           url,
-          '[VRAudioBufferSource] XHR Error: ' + url + ' (' + xhr.statusText + ')'
+          new MediaError(
+            MEDIA_ERR_NETWORK,
+            '[VRAudioBufferSource] XHR Error: ' + url + ' (' + xhr.statusText + ')'
+          )
         );
       }
     };
 
     xhr.onerror = function(event) {
-      _onRequestError(url, '[VRAudioBufferSource] XHR Network failure: ' + url);
+      _onRequestError(
+        url,
+        new MediaError(MEDIA_ERR_NETWORK, '[VRAudioBufferSource] XHR Network failure: ' + url)
+      );
     };
 
     xhr.send();
@@ -90,7 +100,7 @@ function _onRequestSucceed(url: string, buffer: AudioBuffer) {
   });
 }
 
-function _onRequestError(url: string, error: any) {
+function _onRequestError(url: string, error: MediaError) {
   const pendingRequest = _pendingRequest[url];
   delete _pendingRequest[url];
   pendingRequest.map(_onLoad => {

ReactVR/js/Audio/VRAudioBufferSource.js

@@ -10,11 +10,21 @@
  */
 
 import * as VRAudioBufferManager from './VRAudioBufferManager';
+import MediaError from './MediaError';
 
 import type VRAudioContext from './VRAudioContext';
 
+type MediaEventType =
+  | 'canplay'
+  | 'ended'
+  | 'durationchange'
+  | 'timeupdate'
+  | 'pause'
+  | 'playing'
+  | 'error';
+
 export type MediaEvent = {
-  type: 'canplay' | 'ended',
+  type: MediaEventType,
   timeStamp: number,
   target: any,
 };
@@ -31,12 +41,16 @@ export default class VRAudioBufferSource {
   _playbackTime: number;
   _startTime: number;
   _isPlaying: boolean;
+  _error: ?MediaError;
+  _ended: boolean;
 
   constructor(vrAudioContext: VRAudioContext) {
     this._vrAudioContext = vrAudioContext;
     this._playbackTime = 0;
     this._startTime = 0;
     this._isPlaying = false;
+    this._error = null;
+    this._ended = false;
     this.onMediaEvent = undefined;
   }
 
@@ -49,23 +63,42 @@ export default class VRAudioBufferSource {
     this.stopSourceNode();
     this._playbackTime = 0;
     this._buffer = null;
+    this._error = null;
+    this._ended = false;
 
     this.url = url;
-    VRAudioBufferManager.fetch(url, this._vrAudioContext, (buffer: ?AudioBuffer, error) => {
-      if (error) {
-        console.warn('Failed to fetch audio:', url);
-      } else {
-        this._buffer = buffer;
-        this._onMediaEvent({
-          type: 'canplay',
-          timeStamp: Date.now(),
-          target: {
-            ended: false,
-            error: null,
-          },
-        });
+    VRAudioBufferManager.fetch(
+      url,
+      this._vrAudioContext,
+      (buffer: ?AudioBuffer, error: ?MediaError) => {
+        if (error) {
+          console.warn('Failed to fetch audio:', url);
+          this._error = error;
+          this._onMediaEvent(this.createMediaEvent('error'));
+        } else {
+          this._buffer = buffer;
+          this._onMediaEvent(this.createMediaEvent('canplay'));
+          this._onMediaEvent(this.createMediaEvent('durationchange'));
+        }
       }
-    });
+    );
+  }
+
+  createMediaEvent(type: MediaEventType): MediaEvent {
+    const duration = this._buffer ? this._buffer.duration : 0;
+    const currentTime = this._isPlaying
+      ? this._vrAudioContext.getWebAudioContext().currentTime - this._startTime + this._playbackTime
+      : this._playbackTime;
+    return {
+      type: type,
+      timeStamp: Date.now(),
+      target: {
+        currentTime: currentTime,
+        duration: duration,
+        ended: this._ended,
+        error: this._error,
+      },
+    };
   }
 
   getSourceNode() {
@@ -81,6 +114,7 @@ export default class VRAudioBufferSource {
   play() {
     if (this._isPlaying) return;
     this.playSourceNode();
+    this._onMediaEvent(this.createMediaEvent('playing'));
   }
 
   playSourceNode() {
@@ -91,21 +125,16 @@ export default class VRAudioBufferSource {
     sourceNode.onended = () => {
       this.stopSourceNode();
       this._playbackTime = 0;
-      this._onMediaEvent({
-        type: 'ended',
-        timeStamp: Date.now(),
-        target: {
-          ended: true,
-          error: null,
-        },
-      });
+      this._ended = true;
+      this._onMediaEvent(this.createMediaEvent('ended'));
     };
     if (!this._buffer) {
       console.warn('play() called before audio loaded for url', this.url);
       return;
     }
     sourceNode.buffer = this._buffer;
     sourceNode.start(0, this._playbackTime);
+    this._ended = false;
     this._isPlaying = true;
     this._startTime = this._vrAudioContext.getWebAudioContext().currentTime;
   }
@@ -138,13 +167,16 @@ export default class VRAudioBufferSource {
     this._playbackTime = this._vrAudioContext.getWebAudioContext().currentTime -
       this._startTime +
       this._playbackTime;
+    this._onMediaEvent(this.createMediaEvent('pause'));
   }
 
   stop() {
     if (!this._isPlaying) return;
 
     this.stopSourceNode();
     this._playbackTime = 0;
+    this._ended = true;
+    this._onMediaEvent(this.createMediaEvent('ended'));
   }
 
   stopSourceNode() {
@@ -157,6 +189,12 @@ export default class VRAudioBufferSource {
     this._isPlaying = false;
   }
 
+  frame() {
+    if (this._isPlaying) {
+      this._onMediaEvent(this.createMediaEvent('timeupdate'));
+    }
+  }
+
   dispose() {
     this.stopSourceNode();
     if (this.url && this._buffer) {

ReactVR/js/Audio/VRAudioComponent.js

@@ -173,6 +173,12 @@ export default class VRAudioComponent {
     }
   }
 
+  frame() {
+    if (this._source) {
+      this._source.frame();
+    }
+  }
+
   dispose() {
     this._disconnectNodes();
     this._freeSource();

ReactVR/js/Modules/RCTAudioModule.js

@@ -25,6 +25,8 @@ const MEDIA_EVENT_CALLBACK_NAME = {
   ended: 'onAudioEnded',
   error: 'onAudioError',
   timeupdate: 'onAudioTimeUpdate',
+  playing: 'onAudioPlaying',
+  pause: 'onAudioPause',
 };
 
 /**
@@ -237,5 +239,8 @@ export default class RCTAudioModule extends Module {
     if (this.audioContext) {
       this.audioContext.frame(camera);
     }
+    for (const key in this._components) {
+      this._components[key].frame();
+    }
   }
 }