From da7149ee670f4fcc295dcee86f1a7382d2142e08 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Sat, 28 Sep 2019 21:22:59 +0700
Subject: [PATCH 1/3] Get stream based on bitrate and listeners

---
 src/components/App.js | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index e11aa44..7a53880 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -252,26 +252,37 @@ export default class App extends React.Component {
     }
   }
 
-  // choose either high or low bitrate
-  bitrateFinder(streames, low = false) {
-    let arr = streames.sort(
-      (a, b) => parseFloat(a.bitrate) - parseFloat(b.bitrate)
-    );
-    if (low) return arr[0].url;
-    return arr[arr.length - 1].url;
+  streamFinder(streams, lowBitrate = false) {
+    let arr = streams.sort((a, b) => {
+      if (lowBitrate) {
+        // sort by bitrate from low to high
+        if (parseFloat(a.bitrate) < parseFloat(b.bitrate)) return -1;
+        if (parseFloat(a.bitrate) > parseFloat(b.bitrate)) return 1;
+      } else {
+        // sort by bitrate, from high to low
+        if (parseFloat(a.bitrate) < parseFloat(b.bitrate)) return 1;
+        if (parseFloat(a.bitrate) > parseFloat(b.bitrate)) return -1;
+      }
+
+      // if both items have the same bitrate, sort by listeners from low to high
+      if (a.listeners.current < b.listeners.current) return -1;
+      if (a.listeners.current > b.listeners.current) return 1;
+      return 0;
+    });
+    return arr[0].url;
   }
 
   // choose the stream based on the connection and availablity of relay(remotes)
   setMountToConnection(mounts = [], remotes = []) {
     let url = null;
     if (this.state.fastConnection === false && remotes.length > 0) {
-      url = this.bitrateFinder(remotes, true);
+      url = this.streamFinder(remotes, true);
     } else if (this.state.fastConnection && remotes.length > 0) {
-      url = this.bitrateFinder(remotes);
+      url = this.streamFinder(remotes);
     } else if (this.state.fastConnection === false) {
-      url = this.bitrateFinder(mounts, true);
+      url = this.streamFinder(mounts, true);
     } else {
-      url = this.bitrateFinder(mounts);
+      url = this.streamFinder(mounts);
     }
     this._player.src = url;
     this.setState({

From 80847d5002c30fb1de029bff2e94cde56c54f6cb Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Sat, 4 Apr 2020 02:12:44 +0700
Subject: [PATCH 2/3] refactor and handle error

---
 src/components/App.js    | 41 +++++++++++++++++++++++++++++++---------
 src/components/Footer.js |  2 +-
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 7a53880..a1fec99 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -252,8 +252,8 @@ export default class App extends React.Component {
     }
   }
 
-  streamFinder(streams, lowBitrate = false) {
-    let arr = streams.sort((a, b) => {
+  sortStreams = (streams, lowBitrate = false) => {
+    return streams.sort((a, b) => {
       if (lowBitrate) {
         // sort by bitrate from low to high
         if (parseFloat(a.bitrate) < parseFloat(b.bitrate)) return -1;
@@ -269,20 +269,24 @@ export default class App extends React.Component {
       if (a.listeners.current > b.listeners.current) return 1;
       return 0;
     });
-    return arr[0].url;
-  }
+  };
+
+  getStreamUrl = (streams, lowBitrate) => {
+    const sorted = this.sortStreams(streams, lowBitrate);
+    return sorted[0].url;
+  };
 
   // choose the stream based on the connection and availablity of relay(remotes)
   setMountToConnection(mounts = [], remotes = []) {
     let url = null;
     if (this.state.fastConnection === false && remotes.length > 0) {
-      url = this.streamFinder(remotes, true);
+      url = this.getStreamUrl(remotes, true);
     } else if (this.state.fastConnection && remotes.length > 0) {
-      url = this.streamFinder(remotes);
+      url = this.getStreamUrl(remotes);
     } else if (this.state.fastConnection === false) {
-      url = this.streamFinder(mounts, true);
+      url = this.getStreamUrl(mounts, true);
     } else {
-      url = this.streamFinder(mounts);
+      url = this.getStreamUrl(mounts);
     }
     this._player.src = url;
     this.setState({
@@ -339,6 +343,21 @@ export default class App extends React.Component {
       )
     );
 
+  onPlayerError = () => {
+    const { mounts, remotes, url } = this.state;
+
+    // Get the stream list, sorted by bitrate, from high to low,
+    // find and move the current url to the beginning of the array.
+    const sortedStreams = this.sortStreams([...mounts, ...remotes]).filter(
+      stream => stream.url !== url
+    );
+    const currentStream = sortedStreams.find(stream => stream.url === url);
+    sortedStreams.unshift(currentStream);
+
+    // Then play the next item in the array
+    this.setUrl(sortedStreams[1].url);
+  };
+
   render() {
     return (
       <GlobalHotKeys handlers={this.handlers} keyMap={this.keyMap}>
@@ -349,7 +368,11 @@ export default class App extends React.Component {
             player={this._player}
             playing={this.state.playing}
           />
-          <audio crossOrigin="anonymous" ref={a => (this._player = a)} />
+          <audio
+            crossOrigin="anonymous"
+            onError={this.onPlayerError}
+            ref={a => (this._player = a)}
+          />
           <Footer
             currentSong={this.state.currentSong}
             currentVolume={this.state.audioConfig.currentVolume}
diff --git a/src/components/Footer.js b/src/components/Footer.js
index ca52c26..b459a89 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -61,8 +61,8 @@ export default class Footer extends React.Component {
       mountOptions = (
         <select
           data-meta="stream-select"
-          defaultValue={this.props.url}
           onChange={this.handleChange.bind(this)}
+          value={this.props.url}
         >
           {alternativeMounts.map((mount, index) => (
             <option key={index} value={mount.url}>

From eedf951ae918aaeeef06cff328364835e88dc003 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Thu, 9 Apr 2020 23:12:55 +0700
Subject: [PATCH 3/3] rewrite onPlayerError function

---
 src/components/App.js | 44 +++++++++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index a1fec99..5869d3d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -60,6 +60,7 @@ export default class App extends React.Component {
       mounts: [],
       remotes: [],
       playing: null,
+      erroredStreams: [],
 
       // Note: the crossOrigin is needed to fix a CORS JavaScript requirement
 
@@ -186,12 +187,8 @@ export default class App extends React.Component {
       {
         audioConfig
       },
-      function() {
-        this.updateVolume();
-      }
+      this.updateVolume
     );
-
-    return this;
   }
 
   fadeUp() {
@@ -344,18 +341,37 @@ export default class App extends React.Component {
     );
 
   onPlayerError = () => {
-    const { mounts, remotes, url } = this.state;
+    /*
+     * This error handler works as follows:
+     * - When the player cannot play the url:
+     *   - If the url is already in the `erroredStreams` list: try another url
+     *   - If the url is not in `erroredStreams`: add the url to the list and try another url
+     * - If `erroredStreams` has as many items as the list of available streams:
+     *   - Pause the player because this means all of our urls are having issues
+     */
 
-    // Get the stream list, sorted by bitrate, from high to low,
-    // find and move the current url to the beginning of the array.
-    const sortedStreams = this.sortStreams([...mounts, ...remotes]).filter(
-      stream => stream.url !== url
-    );
+    const { mounts, remotes, erroredStreams, url } = this.state;
+    const sortedStreams = this.sortStreams([...mounts, ...remotes]);
+
+    // Pause if all streams are in the errored list
+    if (erroredStreams.length === sortedStreams.length) {
+      this.pause();
+      return;
+    }
+
+    const availableStreams = sortedStreams.filter(stream => stream.url !== url);
     const currentStream = sortedStreams.find(stream => stream.url === url);
-    sortedStreams.unshift(currentStream);
 
-    // Then play the next item in the array
-    this.setUrl(sortedStreams[1].url);
+    // If the url is already in the errored list, use another url
+    if (erroredStreams.some(stream => stream.url === url)) {
+      this.setUrl(availableStreams[0].url);
+    } else {
+      // Otherwise, add the url to the errored list, then use another url
+      this.setState(
+        { erroredStreams: [...erroredStreams, currentStream] },
+        () => this.setUrl(availableStreams[0].url)
+      );
+    }
   };
 
   render() {