feat: change api (#290)

Author: ahmaxed

cypress/integration/play-button.js

@@ -1,5 +1,3 @@
-/* global cy expect*/
-
 describe('Stop and play the music', () => {
   beforeEach(() => {
     cy.visit('http://localhost:3000');
@@ -8,11 +6,9 @@ describe('Stop and play the music', () => {
   it('Click play button', () => {
     cy.get('audio')
       .invoke('attr', 'src')
-      .should('contain', 'freecodecamp.org/radio')
+      .should('contain', '.mp3')
       .then(() => {
-        cy.get('#toggle-play-pause')
-          .should('be.visible')
-          .click();
+        cy.get('#toggle-play-pause').should('be.visible').click();
         cy.get('audio').should(audioElements => {
           const audioIsPaused = audioElements[0].paused;
           expect(audioIsPaused).to.eq(false);

package-lock.json

@@ -12,10 +12,9 @@
     "@fortawesome/react-fontawesome": "0.2.0",
     "@sentry/react": "5.30.0",
     "@sentry/tracing": "5.30.0",
-    "nchan": "1.0.10",
-    "react": "16.14.0",
+    "react": "18.2.0",
     "react-device-detect": "2.2.3",
-    "react-dom": "16.14.0",
+    "react-dom": "18.2.0",
     "react-page-visibility": "6.4.0",
     "react-scripts": "5.0.1",
     "store": "2.0.12"

package.json

@@ -1,30 +1,29 @@
 import React from 'react';
-import NchanSubscriber from 'nchan';
 import * as Sentry from '@sentry/react';
 import store from 'store';
 import { isIOS, isDesktop } from 'react-device-detect';
 
 import Nav from './Nav';
 import Main from './Main';
 import Footer from './Footer';
+import { buildEventSource } from '../utils/buildEventSource';
 
 import '../css/App.css';
 
-const SUB = new NchanSubscriber(
-  'wss://coderadio-admin.freecodecamp.org/api/live/nowplaying/coderadio'
-);
+const sseUri =
+  'https://coderadio-admin-v2.freecodecamp.org/api/live/nowplaying/sse?cf_connect=%7B%22subs%22%3A%7B%22station%3Acoderadio%22%3A%7B%7D%2C%22global%3Atime%22%3A%7B%7D%7D%7D';
+const jsonUri = `https://coderadio-admin-v2.freecodecamp.org/api/nowplaying_static/coderadio.json`;
+
+let sse = buildEventSource(sseUri);
+
 const CODERADIO_VOLUME = 'coderadio-volume';
 
-SUB.on('error', function (err, errDesc) {
+sse.onerror = ({ message, error }) => {
   Sentry.addBreadcrumb({
-    message: 'NchanSubscriber error: ' + errDesc
+    message: 'WebSocket error: ' + message
   });
-  /**
-   * I'm assuming captureException is appropriate here, I'm not sure what type
-   * the first argument has.
-   */
-  Sentry.captureException(err);
-});
+  Sentry.captureException(error);
+};
 
 export default class App extends React.Component {
   constructor(props) {
@@ -223,35 +222,28 @@ export default class App extends React.Component {
   }
 
   play() {
-    const { mounts, remotes, playing } = this.state;
-    if (!playing) {
-      if (!SUB.running) {
-        SUB.start();
-      }
+    const { mounts, remotes } = this.state;
 
-      let streamUrls = Array.from(
-        [...mounts, ...remotes],
-        stream => stream.url
-      );
+    let streamUrls = Array.from([...mounts, ...remotes], stream => stream.url);
 
-      // Check if the url has been reset by pause
-      if (!streamUrls.includes(this._player.src)) {
-        this._player.src = this.state.url;
-        this._player.load();
-      }
-      this._player.volume = 0;
-      this._player.play().then(() => {
-        this.setState(state => {
-          return {
-            audioConfig: { ...state.audioConfig, currentVolume: 0 },
-            playing: true,
-            pullMeta: true
-          };
-        });
+    // Check if the url has been reset by pause
+    if (!streamUrls.includes(this._player.src)) {
+      this._player.src = this.state.url;
+      this._player.load();
+    }
 
-        this.fadeUp();
+    this._player.volume = 0;
+    this._player.play().then(() => {
+      this.setState(state => {
+        return {
+          audioConfig: { ...state.audioConfig, currentVolume: 0 },
+          playing: true,
+          pullMeta: true
+        };
       });
-    }
+
+      this.fadeUp();
+    });
   }
 
   pause() {
@@ -268,7 +260,7 @@ export default class App extends React.Component {
           pausing: false
         },
         () => {
-          SUB.stop();
+          // socket.close();
           resolve();
         }
       );
@@ -453,41 +445,65 @@ export default class App extends React.Component {
     });
   }
 
-  getNowPlaying() {
-    SUB.on('message', message => {
-      let np = JSON.parse(message);
-
-      // We look through the available mounts to find the default mount
-      if (this.state.url === '') {
+  fetchJSON() {
+    fetch(jsonUri)
+      .then(response => {
+        return response.json();
+      })
+      .then(np => {
         this.setState({
           mounts: np.station.mounts,
-          remotes: np.station.remotes
-        });
-        this.setMountToConnection(np.station.mounts, np.station.remotes);
-      }
-
-      if (this.state.listeners !== np.listeners.current) {
-        this.setState({
-          listeners: np.listeners.current
-        });
-      }
-
-      // We only need to update the metadata if the song has been changed
-      if (
-        np.now_playing.song.id !== this.state.currentSong.id ||
-        this.state.pullMeta
-      ) {
-        this.setState({
+          remotes: np.station.remotes,
+          listeners: np.listeners.current,
           currentSong: np.now_playing.song,
           songStartedAt: np.now_playing.played_at * 1000,
           songDuration: np.now_playing.duration,
           pullMeta: false,
           songHistory: np.song_history
         });
+        this.setMountToConnection(np.station.mounts, np.station.remotes);
+      })
+      .catch(() => {});
+  }
+
+  getNowPlaying() {
+    // Since json recives data faster than sse, set the data initially
+    this.fetchJSON();
+
+    // Reconnect Timeout needs to be added
+    sse.onmessage = event => {
+      const data = JSON.parse(event.data);
+      const np = data?.pub?.data?.np || null;
+      if (np) {
+        // Process Now Playing data in `np` var.
+        // We look through the available mounts to find the default mount
+        if (this.state.url === '') {
+          this.setState({
+            mounts: np.station.mounts,
+            remotes: np.station.remotes
+          });
+          this.setMountToConnection(np.station.mounts, np.station.remotes);
+        }
+        if (this.state.listeners !== np.listeners.current) {
+          this.setState({
+            listeners: np.listeners.current
+          });
+        }
+        // We only need to update the metadata if the song has been changed
+        if (
+          np.now_playing.song.id !== this.state.currentSong.id ||
+          this.state.pullMeta
+        ) {
+          this.setState({
+            currentSong: np.now_playing.song,
+            songStartedAt: np.now_playing.played_at * 1000,
+            songDuration: np.now_playing.duration,
+            pullMeta: false,
+            songHistory: np.song_history
+          });
+        }
       }
-    });
-    SUB.reconnectTimeout = this.state.config.metadataTimer;
-    SUB.start();
+    };
   }
 
   increaseVolume = () =>

src/components/App.js

@@ -1,6 +1,27 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import * as utils from '../utils/buildEventSource';
+
+const buildEventSourceSpy = jest.spyOn(utils, 'buildEventSource');
+
+buildEventSourceSpy.mockReturnValue({
+  CLOSED: 0,
+  CONNECTING: 0,
+  OPEN: 0,
+  dispatchEvent(event) {
+    return false;
+  },
+  onerror: jest.fn(),
+  onmessage: jest.fn(),
+  onopen: jest.fn(),
+  readyState: 0,
+  url: '',
+  withCredentials: false,
+  addEventListener: jest.fn(),
+  close: jest.fn(),
+  removeEventListener: jest.fn()
+});
 
 it('renders without crashing', () => {
   const div = document.createElement('div');

src/components/App.test.js

@@ -110,7 +110,8 @@ export default class Footer extends React.PureComponent {
       currentVolume,
       setTargetVolume,
       listeners,
-      fastConnection
+      fastConnection,
+      url
     } = this.props;
 
     return (
@@ -131,7 +132,11 @@ export default class Footer extends React.PureComponent {
             playing={playing}
             songDuration={songDuration}
           />
-          <PlayPauseButton playing={playing} togglePlay={togglePlay} />
+          <PlayPauseButton
+            playing={playing}
+            togglePlay={togglePlay}
+            url={url}
+          />
           <Slider
             currentVolume={currentVolume}
             setTargetVolume={setTargetVolume}

src/components/Footer.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isBrowser } from 'react-device-detect';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
 
 import { ReactComponent as Pause } from '../assets/pause.svg';
 import { ReactComponent as Play } from '../assets/play.svg';
@@ -23,7 +25,7 @@ class PlayPauseButton extends React.Component {
   }
 
   render() {
-    return (
+    return this.props.url ? (
       <button
         aria-label={this.props.playing ? 'Pause' : 'Play'}
         className={
@@ -37,13 +39,21 @@ class PlayPauseButton extends React.Component {
       >
         {this.props.playing ? <Pause /> : <Play />}
       </button>
+    ) : (
+      <FontAwesomeIcon
+        aria-hidden='true'
+        className='loader-circle-notch'
+        icon={faCircleNotch}
+        spin={true}
+      />
     );
   }
 }
 
 PlayPauseButton.propTypes = {
   playing: PropTypes.bool,
-  togglePlay: PropTypes.func
+  togglePlay: PropTypes.func,
+  url: PropTypes.string
 };
 
 export default PlayPauseButton;

src/components/PlayPauseButton.js

@@ -124,6 +124,7 @@ p {
 }
 
 .slider {
+  appearance: none;
   -webkit-appearance: none;
   background: #dfdfe2;
   height: 6px;
@@ -323,6 +324,12 @@ p {
   width: 60%;
 }
 
+.loader-circle-notch{
+  height: 60%;
+  width: auto;
+  align-self: center;
+}
+
 .recent-song-list {
   background-color: #1b1b32;
   bottom: 70px;

src/css/App.css

@@ -0,0 +1,3 @@
+export const buildEventSource = url => {
+  return new EventSource(url);
+};