Radioking integration

src/components/Audio/Audio.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import Sound from 'react-sound'
 import { connect } from 'react-redux'
+import { soundManager } from 'soundmanager2'
 import Velocity from 'velocity-animate'
 import { extend } from 'lodash'
 import { togglePlaying, updateVolume } from '../../actions/playerActions'
@@ -9,6 +10,8 @@ import '../../styles/Controls.css'
 
 const STREAM_URL = 'https://listen.radioking.com/radio/117904/stream/157294'
 
+soundManager.setup({ debugMode: false })
+
 class Audio extends Component {
   audio = null
 
@@ -22,8 +25,6 @@ class Audio extends Component {
     }
   }
 
-  componentDidMount() {}
-
   handlePlayPause = event => {
     const { player, togglePlaying } = this.props
     const { playingStatus } = this.state

src/components/TracksList/TracksList.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import moment from 'moment'
 import classnames from 'classnames'
 import Info from './../Info'
 import { fetchCurrentTrack } from '../../actions/tracksActions'
@@ -9,65 +8,35 @@ import noCover from '../../images/notrack.jpg'
 
 import '../../styles/TrackList.css'
 
+const INTERVAL = 10000
+
 class TracksList extends Component {
   interval1 = null
-  interval2 = null
 
   state = {
     trackFocused: null,
     currentTrack: 0,
     tracks: [],
-    nextTrackReady: false,
   }
 
   componentDidMount() {
-    this.interval1 = setInterval(this.isCurrentTrackFinished, 5000)
-    this.interval2 = setInterval(this.isNextTrackReady, 5000)
+    this.interval1 = setInterval(this.fetchNextTrack, INTERVAL)
   }
 
   componentWillReceiveProps(nextProps) {
-    const { tracks, isNextTrackReady } = nextProps
+    const { tracks } = nextProps
     const { currentTrack } = this.state
     this.setState({
       tracks: tracks.list.slice(currentTrack),
     })
-    if (isNextTrackReady) {
-      this.setState({
-        nextTrackReady: true,
-      })
-    }
   }
 
   componentWillUnmount() {
     clearInterval(this.interval1)
-    clearInterval(this.interval2)
   }
 
-  isCurrentTrackFinished = () => {
-    const { tracks, currentTrack, nextTrackReady } = this.state
-    if (tracks[currentTrack].end_at) {
-      const isTrackFinished = moment().isAfter(
-        moment(tracks[currentTrack].end_at).add(30, 'seconds')
-      )
-      if (isTrackFinished && nextTrackReady) {
-        this.setState({
-          nextTrackReady: false,
-        })
-      }
-    }
-  }
-
-  isNextTrackReady = () => {
-    const { tracks, currentTrack, nextTrackReady } = this.state
-
-    if (tracks[currentTrack].end_at) {
-      const isTrackAlmostFinished = moment().isAfter(
-        moment(tracks[currentTrack].end_at).add(20, 'seconds')
-      )
-      if (isTrackAlmostFinished && !nextTrackReady) {
-        this.props.fetchCurrentTrack()
-      }
-    }
+  fetchNextTrack = () => {
+    this.props.fetchCurrentTrack()
   }
 
   onMouseOver = track => {

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
+import 'react-sound'
 
 import App from './components/App'
 import store from './store'