ref(device-selection): set audio output sink id after receiving ref (#4066)

The Audio.js setRef callback does not behave like react ref callback
in that the former will not have fired before componentDidMount
but the later will have. So for audio output preview, trying to set
sink id on mount will no-op because it does not have a ref yet to
Audio.js, possibly leading to audio output previews playing on
the default speaker device. This generally has not been a user
visible problem due to coincidence; other re-renders necessary
by the parent of audio output preview will have triggered
componentDidUpdates on the audio out preview, which would then
set the sink id on the Audio.js ref it should have received
by then.

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

@@ -42,19 +42,8 @@ class AudioOutputPreview extends Component<Props> {
 
         this._audioElement = null;
 
+        this._audioElementReady = this._audioElementReady.bind(this);
         this._onClick = this._onClick.bind(this);
-        this._setAudioElement = this._setAudioElement.bind(this);
-    }
-
-    /**
-     * Sets the target output device on the component's audio element after
-     * initial render.
-     *
-     * @inheritdoc
-     * @returns {void}
-     */
-    componentDidMount() {
-        this._setAudioSink();
     }
 
     /**
@@ -81,37 +70,39 @@ class AudioOutputPreview extends Component<Props> {
                     { this.props.t('deviceSelection.testAudio') }
                 </a>
                 <Audio
-                    setRef = { this._setAudioElement }
+                    setRef = { this._audioElementReady }
                     src = { TEST_SOUND_PATH } />
             </div>
         );
     }
 
-    _onClick: () => void;
+    _audioElementReady: (Object) => void;
 
     /**
-     * Plays a test sound.
+     * Sets the instance variable for the component's audio element so it can be
+     * accessed directly.
      *
+     * @param {Object} element - The DOM element for the component's audio.
      * @private
      * @returns {void}
      */
-    _onClick() {
-        this._audioElement
-        && this._audioElement.play();
+    _audioElementReady(element: Object) {
+        this._audioElement = element;
+
+        this._setAudioSink();
     }
 
-    _setAudioElement: (Object) => void;
+    _onClick: () => void;
 
     /**
-     * Sets the instance variable for the component's audio element so it can be
-     * accessed directly.
+     * Plays a test sound.
      *
-     * @param {Object} element - The DOM element for the component's audio.
      * @private
      * @returns {void}
      */
-    _setAudioElement(element: Object) {
-        this._audioElement = element;
+    _onClick() {
+        this._audioElement
+            && this._audioElement.play();
     }
 
     /**
@@ -122,7 +113,7 @@ class AudioOutputPreview extends Component<Props> {
      */
     _setAudioSink() {
         this._audioElement
-        && this._audioElement.setSinkId(this.props.deviceId);
+            && this._audioElement.setSinkId(this.props.deviceId);
     }
 }