ref(AudioOutputPreview): use Audio from base/media

react/features/base/media/components/AbstractAudio.js

@@ -7,8 +7,9 @@ import { Component } from 'react';
  * playback.
  */
 export type AudioElement = {
+    pause: Function,
     play: Function,
-    pause: Function
+    setSinkId: ?Function
 }
 
 /**
@@ -45,21 +46,16 @@ export default class AbstractAudio extends Component<Props> {
      */
     _audioElementImpl: ?AudioElement;
 
-    /**
-     * {@link setAudioElementImpl} bound to <code>this</code>.
-     */
-    setAudioElementImpl: Function;
-
     /**
      * Initializes a new {@code AbstractAudio} instance.
      *
-     * @param {Object} props - The read-only properties with which the new
+     * @param {Props} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Object) {
+    constructor(props: Props) {
         super(props);
 
-        // Bind event handlers so they are only bound once for every instance.
+        // Bind event handlers so they are only bound once per instance.
         this.setAudioElementImpl = this.setAudioElementImpl.bind(this);
     }
 
@@ -83,6 +79,8 @@ export default class AbstractAudio extends Component<Props> {
         this._audioElementImpl && this._audioElementImpl.play();
     }
 
+    setAudioElementImpl: (?AudioElement) => void;
+
     /**
      * Set the (reference to the) {@link AudioElement} object which implements
      * the audio playback functionality.
@@ -95,8 +93,22 @@ export default class AbstractAudio extends Component<Props> {
     setAudioElementImpl(element: ?AudioElement) {
         this._audioElementImpl = element;
 
-        if (typeof this.props.setRef === 'function') {
-            this.props.setRef(element ? this : null);
-        }
+        // setRef
+        const { setRef } = this.props;
+
+        typeof setRef === 'function' && setRef(element ? this : null);
+    }
+
+    /**
+     * Sets the sink ID (output device ID) on the underlying audio element.
+     * NOTE: Currently, implemented only on Web.
+     *
+     * @param {string} sinkId - The sink ID (output device ID).
+     * @returns {void}
+     */
+    setSinkId(sinkId: String) {
+        this._audioElementImpl
+            && typeof this._audioElementImpl.setSinkId === 'function'
+            && this._audioElementImpl.setSinkId(sinkId);
     }
 }

react/features/base/media/components/web/Audio.js

@@ -1,8 +1,9 @@
-/* @flow */
+// @flow
 
 import React from 'react';
 
 import AbstractAudio from '../AbstractAudio';
+import type { AudioElement } from '../AbstractAudio';
 
 /**
  * The React/Web {@link Component} which is similar to and wraps around
@@ -14,20 +15,10 @@ export default class Audio extends AbstractAudio {
      */
     _audioFileLoaded: boolean;
 
-    /**
-     * {@link _onCanPlayThrough} bound to "this".
-     */
-    _onCanPlayThrough: Function;
-
     /**
      * Reference to the HTML audio element, stored until the file is ready.
      */
-    _ref: HTMLAudioElement;
-
-    /**
-     * {@link _setRef} bound to "this".
-     */
-    _setRef: Function;
+    _ref: ?AudioElement;
 
     /**
      * Creates new <code>Audio</code> element instance with given props.
@@ -54,6 +45,8 @@ export default class Audio extends AbstractAudio {
             <audio
                 onCanPlayThrough = { this._onCanPlayThrough }
                 preload = 'auto'
+
+                // $FlowFixMe
                 ref = { this._setRef }
                 src = { this.props.src } />
         );
@@ -73,6 +66,8 @@ export default class Audio extends AbstractAudio {
         }
     }
 
+    _onCanPlayThrough: () => void;
+
     /**
      * Called when 'canplaythrough' event is triggered on the audio element,
      * which means that the whole file has been loaded.
@@ -85,6 +80,8 @@ export default class Audio extends AbstractAudio {
         this._maybeSetAudioElementImpl();
     }
 
+    _setRef: (?AudioElement) => void;
+
     /**
      * Sets the reference to the HTML audio element.
      *
@@ -92,8 +89,9 @@ export default class Audio extends AbstractAudio {
      * @private
      * @returns {void}
      */
-    _setRef(audioElement: HTMLAudioElement) {
+    _setRef(audioElement: ?AudioElement) {
         this._ref = audioElement;
+
         if (audioElement) {
             this._maybeSetAudioElementImpl();
         } else {

react/features/device-selection/components/AudioOutputPreview.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
+import { Audio } from '../../base/media';
 
 const TEST_SOUND_PATH = 'sounds/ring.wav';
 
@@ -77,9 +78,8 @@ class AudioOutputPreview extends Component {
                 <a onClick = { this._onClick }>
                     { this.props.t('deviceSelection.testAudio') }
                 </a>
-                <audio
-                    preload = 'auto'
-                    ref = { this._setAudioElement }
+                <Audio
+                    setRef = { this._setAudioElement }
                     src = { TEST_SOUND_PATH } />
             </div>
         );