Radioking integration

.gitignore

@@ -16,3 +16,5 @@ npm-debug.log
 
 # WebStorm
 .idea/
+
+.now

package.json

@@ -1,23 +1,27 @@
 {
   "name": "fm",
-  "homepage": "http://qatataq.github.io/beta/",
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "gh-pages": "^0.12.0",
-    "react-scripts": "0.8.4"
+    "gh-pages": "^1.1.0",
+    "husky": "^0.14.3",
+    "lint-staged": "^7.0.4",
+    "prettier": "^2.0.5",
+    "react-scripts": "3.4.1"
   },
   "dependencies": {
     "classnames": "^2.2.5",
     "lodash": "^4.17.2",
-    "react": "^15.4.1",
-    "react-addons-css-transition-group": "^15.4.1",
-    "react-dom": "^15.4.1",
-    "react-flip-move": "^2.7.4",
-    "react-imageloader": "^2.1.0",
+    "moment": "^2.20.1",
+    "quick-hash": "^1.0.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-howler": "^3.7.3",
+    "react-player": "^2.1.0",
     "react-redux": "^5.0.1",
+    "react-sound": "^1.2.0",
     "redux": "^3.6.0",
-    "redux-logger": "^2.7.4",
+    "redux-logger": "^3.0.6",
     "redux-thunk": "^2.1.0",
     "velocity-animate": "^1.3.1",
     "whatwg-fetch": "^2.0.1"
@@ -26,6 +30,26 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "eject": "react-scripts eject",
-    "deploy": "npm run build&&gh-pages -d build"
+    "deploy": "npm run build && gh-pages -d build",
+    "prettier": "prettier --write 'src/**/*.{js,css}'",
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "**/*.{js,css}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/actions/playerActions.js

@@ -1,38 +1,11 @@
-export const loadTrack = (index, list) =>
-  dispatch =>
-    dispatch({
-      type: 'LOAD_TRACK',
-      payload: list[index],
-    })
-
-export const nextTrack = (index, list) =>
-  dispatch => {
-    const nextIndex = (index + 1) % list.length
-    dispatch({
-      type: 'NEXT_INDEX',
-      payload: nextIndex,
-    })
-  }
-
-export const previousTrack = (index, list) =>
-  dispatch => {
-    const previousIndex = index ? (index - 1) : (list.length - 1)
-    dispatch({
-      type: 'NEXT_INDEX',
-      payload: previousIndex,
-    })
-  }
-
-export const togglePlaying = playing =>
-  dispatch =>
-    dispatch({
-      type: 'UPDATE_PLAYING',
-      payload: !playing,
-    })
-
-export const updateVolume = newVolume => 
-  dispatch =>
-    dispatch({
-      type: 'UPDATE_VOLUME',
-      payload: newVolume,
-    })
+export const togglePlaying = playing => dispatch =>
+  dispatch({
+    type: 'UPDATE_PLAYING',
+    payload: !playing,
+  })
+
+export const updateVolume = newVolume => dispatch =>
+  dispatch({
+    type: 'UPDATE_VOLUME',
+    payload: newVolume,
+  })

src/actions/tracksActions.js

@@ -1,38 +1,67 @@
-import _ from 'lodash'
 import 'whatwg-fetch'
-
-const SC_CLIENT_ID = 'b8198f1a65c0235a26607a834bcc3062'
-const SC_PLAYLIST_ID = '219590548'
-const SC_PLAYLIST_SECRET_TOKEN = 's-suaqL'
+import hash from 'quick-hash'
 
 const requestTracks = payload => ({
   type: 'REQUEST_TRACKS',
   payload,
 })
 
+const requestHistory = payload => ({
+  type: 'REQUEST_HISTORY',
+  payload,
+})
+
 const receiveErrorTracks = payload => ({
   type: 'TRACKS_ERROR',
   payload,
 })
 
-const receiveTracks = payload => ({
-  type: 'RECEIVE_TRACKS',
+const receiveCurrentTrack = payload => ({
+  type: 'RECEIVE_CURRENT_TRACK',
   payload,
 })
 
-export const fetchTracks = () =>
-  dispatch => {
-    dispatch(requestTracks('requesting'))
-    return fetch(`https://api.soundcloud.com/playlists/${SC_PLAYLIST_ID}.json?client_id=${SC_CLIENT_ID}&secret_token=${SC_PLAYLIST_SECRET_TOKEN}`)
-      .then(response => response.json())
-      .then(({ tracks }) => {
-        const newTracks = tracks.map(track =>
-          track.artwork_url ?
-            _.extend({}, track, { stream_url: `${track.stream_url.split('?secret_token')[0]}?client_id=${SC_CLIENT_ID}` })
-          :
-           null
-        )
-        dispatch(receiveTracks(_.chain(newTracks).compact().shuffle().value()))
-      })
-      .catch(error => dispatch(receiveErrorTracks(error)))
-  }
+const receiveHistory = payload => ({
+  type: 'RECEIVE_HISTORY',
+  payload,
+})
+
+const addIdToTracks = tracks => {
+  return tracks.map(track => ({
+    id: hash(track.started_at),
+    ...track,
+  }))
+}
+
+export const fetchCurrentTrack = () => dispatch => {
+  dispatch(requestTracks('requestingCurrentTrack'))
+  return fetch(
+    `https://www.radioking.com/widgets/currenttrack.php?radio=117904&format=json`
+  )
+    .then(response => response.json())
+    .then(newTrack => {
+      dispatch(receiveCurrentTrack(...addIdToTracks([newTrack])))
+    })
+    .catch(error => {
+      console.log(error)
+      dispatch(receiveErrorTracks(error))
+    })
+}
+
+export const fetchHistory = () => dispatch => {
+  dispatch(requestHistory('requestingHistory'))
+  return fetch(
+    `https://www.radioking.com/widgets/api/v1/radio/117904/track/history?limit=20`
+  )
+    .then(response => response.json())
+    .then(history => {
+      history = addIdToTracks(history)
+      dispatch(
+        receiveHistory(history.filter(track => track.album !== 'qatataq'))
+      )
+    })
+    .catch(error => {
+      console.log(error)
+      dispatch(receiveErrorTracks(error))
+    })
+}

src/components/App.js

@@ -2,34 +2,33 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import Content from './Content'
+import Header from './Header'
 import States from './States'
-import Footer from './Footer'
-import { fetchTracks } from '../actions/tracksActions'
+import { fetchHistory, fetchCurrentTrack } from '../actions/tracksActions'
 import '../styles/App.css'
 
 class App extends Component {
-  /**
-   * When the component will mount, fetch the tracks of the playlist
-   */
-  componentWillMount() {
-    this.props.fetchTracks()
+  componentDidMount() {
+    this.props.fetchHistory()
+    this.props.fetchCurrentTrack()
   }
 
   render() {
     return (
       <div className="app">
         <States />
+        <Header />
         <Content />
-        <Footer />
       </div>
     )
   }
 }
 
-const stateToProps = () => ({})
+const mapStateToProps = null
 
-const dispatchToProps = (dispatch) => ({
-  fetchTracks: () => dispatch(fetchTracks()),
-})
+const mapDispatchToProps = {
+  fetchHistory,
+  fetchCurrentTrack,
+}
 
-export default connect(stateToProps, dispatchToProps)(App)
+export default connect(mapStateToProps, mapDispatchToProps)(App)