queue feature and player controlls

- add to queue feature
- prev, next button
- play track with query string
- share tracks

Author: elreeda

package.json

@@ -3,16 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "qs": "^6.5.1",
     "ramda": "^0.25.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.1",
+    "react-transition-group": "1.x",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
-    "styled-components": "^3.1.6",
-    "react-transition-group": "1.x"
+    "styled-components": "^3.1.6"
   },
   "scripts": {
     "start": "react-scripts start",

src/Player/actionTypes.js

@@ -3,5 +3,7 @@ export default {
   PAUSE_TRACK: 'PAUSE_TRACK',
   RESUME_TRACK: 'RESUME_TRACK',
   START_PLAYLIST: 'START_PLAYLIST',
-  ADD_TO_QUEUE: 'ADD_TO_QUEUE'
+  ADD_TO_QUEUE: 'ADD_TO_QUEUE',
+  NEXT_TRACK: 'NEXT_TRACK',
+  PREVIOUS_TRACK: 'PREVIOUS_TRACK'
 }

src/Player/actions.js

@@ -1,9 +1,12 @@
 import t from './actionTypes'
 
-export const startTrack = (surah) => {
+export const startTrack = ({surah, suras: playlist}) => {
   return {
     type: t.START_TRACK,
-    payload: surah
+    payload: {
+      surah,
+      playlist
+    }
   }
 }
 
@@ -32,3 +35,15 @@ export const addToQueue = (surah) => {
     payload: surah
   }
 }
+
+export const nextTrack = () => {
+  return {
+    type: t.NEXT_TRACK
+  }
+}
+
+export const previousTrack = () => {
+  return {
+    type: t.PREVIOUS_TRACK
+  }
+}

src/Player/components/index.js

@@ -1,11 +1,11 @@
 import React from 'react'
-import styled, {css} from 'styled-components'
+import styled, { css } from 'styled-components'
 
 const StyleBase = styled.div`
   position: fixed;
   width: 100%;
   bottom: 0;
-  color: #FFF;
+  color: #fff;
   background-color: #016bcf;
   padding: 10px 30px;
   > div {
@@ -59,13 +59,13 @@ const Progress = styled.div`
 `
 
 const ProgressStatus = styled.div.attrs({
-  style: ({progress}) => ({width: progress.toFixed(4) + '%'})
+  style: ({ progress }) => ({ width: progress.toFixed(4) + '%' })
 })`
-  background-color: #FFF;
+  background-color: #fff;
   height: 3px;
   transition-property: width, background-color;
   transition-duration: 0.1s;
-  transition-timing-function: cubic-bezier(1,0,.7,1);
+  transition-timing-function: cubic-bezier(1, 0, 0.7, 1);
 `
 
 const ProgressBar = styled.div`
@@ -80,8 +80,9 @@ const Details = styled.div`
   margin-left: 20px;
   width: 150px;
   height: 40px;
-  letter-spacing: .9px;
-  h5, h3 {
+  letter-spacing: 0.9px;
+  h5,
+  h3 {
     margin: 0;
   }
   h5 {
@@ -93,30 +94,43 @@ const Details = styled.div`
   }
 `
 
-const Player = ({playback, currentTime, duration, resumeTrack, pauseTrack}) => {
+const Player = ({
+  playback,
+  currentTime,
+  duration,
+  resumeTrack,
+  pauseTrack,
+  nextTrack,
+  previousTrack
+}) => {
   const { currentTrack } = playback.queue
-  const currentTimeString = new Date(currentTime * 1000).toISOString().substr(11, 8)
-  const durationString = new Date((duration || 0) * 1000).toISOString().substr(11, 8)
+  const currentTimeString = new Date(currentTime * 1000)
+    .toISOString()
+    .substr(11, 8)
+  const durationString = new Date((duration || 0) * 1000)
+    .toISOString()
+    .substr(11, 8)
   return (
     <StyleBase>
       <div>
-        <div className="control">
-          <div className='player-prev' />
+        <div className='control'>
+          <div className='player-prev' onClick={previousTrack} />
           <PlayerControl
             onClick={
               playback.player
-              ? playback.player.paused
-                ? resumeTrack
-                : pauseTrack
-              : undefined
+                ? playback.player.paused ? resumeTrack : pauseTrack
+                : undefined
             }
-            isPlaying={playback.player && !playback.player.paused} />
-          <div className='player-next' />
+            isPlaying={playback.player && !playback.player.paused}
+          />
+          <div className='player-next' onClick={nextTrack} />
         </div>
         <Progress>
           <span className='current'>{currentTimeString}</span>
-          <ProgressBar >
-            <ProgressStatus progress={duration > 0 ? (currentTime / duration ) * 100 : 0} />
+          <ProgressBar>
+            <ProgressStatus
+              progress={duration > 0 ? currentTime / duration * 100 : 0}
+            />
           </ProgressBar>
           <span className='ends'>{durationString}</span>
         </Progress>

src/Player/index.js

@@ -2,7 +2,12 @@ import React from 'react'
 import * as R from 'ramda'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { pauseTrack, resumeTrack } from '../Player/actions'
+import {
+  pauseTrack,
+  resumeTrack,
+  nextTrack,
+  previousTrack
+} from '../Player/actions'
 
 import Player from './components'
 
@@ -28,16 +33,22 @@ class PlayerContainer extends React.Component {
     return (
       <Player
         {...this.state}
+        nextTrack={this.props.nextTrack}
+        previousTrack={this.props.previousTrack}
         pauseTrack={this.props.pauseTrack}
         resumeTrack={this.props.resumeTrack}
-        playback={this.props.playback} />
+        playback={this.props.playback}
+      />
     )
   }
 }
-const mapDispatchToProps = (dispatch) => {
-  return bindActionCreators({ pauseTrack, resumeTrack }, dispatch)
+const mapDispatchToProps = dispatch => {
+  return bindActionCreators(
+    { pauseTrack, resumeTrack, nextTrack, previousTrack },
+    dispatch
+  )
 }
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   return R.pick(['playback'], state)
 }
 

src/Player/reducer.js

@@ -6,6 +6,7 @@ const initialState = {
   pausedAtTime: 0,
   queue: {
     currentTrack: null,
+    currentPlayList: [],
     nextTracks: [],
     queuedTracks: []
   }
@@ -14,7 +15,10 @@ const initialState = {
 export default (state = initialState, action) => {
   switch (action.type) {
     case t.START_TRACK:
-      const surah = action.payload
+      const { payload : {surah, playlist}} = action
+      const surahIndex = R.findIndex(R.equals(surah))(playlist)
+      const currentPlayList = playlist
+      const nextTracks = R.slice(R.inc(surahIndex), Infinity, playlist)
       const player = new Audio(surah.url)
       // TODO: Uncaught (in promise) DOMException: The play() request was
       // interrupted by a call to pause(). https://goo.gl/LdLk22
@@ -27,7 +31,9 @@ export default (state = initialState, action) => {
         player,
         queue: {
           ...state.queue,
-          currentTrack: surah 
+          currentTrack: surah,
+          nextTracks,
+          currentPlayList
         }
       }
 
@@ -41,6 +47,7 @@ export default (state = initialState, action) => {
       }
 
     case t.RESUME_TRACK:
+      // eslint-disable-next-line
       state.player
       state.player.currentTime = state.pausedAtTime
       state.player.play()
@@ -79,6 +86,68 @@ export default (state = initialState, action) => {
           ]
         }
       }
+
+    case t.NEXT_TRACK:
+      if (!state.player) {
+        return state
+      } else if (state.queue.queuedTracks.length > 0) {
+        const currentTrack = state.queue.queuedTracks[0]
+        const queuedTracks = R.slice(1, Infinity, state.queue.queuedTracks)
+        const player = new Audio(currentTrack.url)
+        player.load()
+        !!state.player && state.player.pause()
+        const playPromise = player.play()
+        playPromise.catch()
+        return {
+          ...state,
+          player,
+          queue: {
+            ...state.queue,
+            currentTrack,
+            queuedTracks
+          }
+        }
+      } else {
+        const currentTrack = state.queue.nextTracks[0]
+        const nextTracks = R.slice(1, Infinity, state.queue.nextTracks)
+        const player = new Audio(currentTrack.url)
+        player.load()
+        !!state.player && state.player.pause()
+        const playPromise = player.play()
+        playPromise.catch()
+        return {
+          ...state,
+          player,
+          queue: {
+            ...state.queue,
+            currentTrack,
+            nextTracks
+          }
+        }
+      }
+
+    case t.PREVIOUS_TRACK:
+      if (!state.player) {
+        return state
+      }
+      const currentTrackIndex = R.findIndex(R.equals(state.queue.currentTrack))(state.queue.currentPlayList)
+      const currentTrack = state.queue.currentPlayList[R.dec(currentTrackIndex)]
+      const newNextTracks = R.prepend(state.queue.currentTrack, state.queue.nextTracks)
+
+      const previousTrackPlayer = new Audio(currentTrack.url)
+      previousTrackPlayer.load()
+      !!state.player && state.player.pause()
+      previousTrackPlayer.play().catch()
+      return {
+        ...state,
+        player: previousTrackPlayer,
+        queue: {
+          ...state.queue,
+          currentTrack,
+          nextTracks: newNextTracks
+        }
+      }
+
     default:
       return state
   }