music-player/src/reducers/playerReducer.js

import {backURL} from "../actions";
import { select, put, takeEvery } from "redux-saga/effects";
import {store} from "./store";

//import React, {useEffect, useRef, useState} from 'react';
// import AudioSpectrum from 'react-audio-spectrum'




export const playerReducer = (
    state = {},
    {type,track,isPlaying=false,isPaused,duration,
        playlist,playlistIndex,currentTime=0,volume=1,audio}) => {

    if (type === "NEXT_TRACK") {
        return {
            ...state,
            playlistIndex,
        }

    }

    if (type === "PREVIOUS_TRACK") {
        return {
            ...state,
            playlistIndex,
        }

    }


    if (type === "TRACK_LOAD") {
        return {
            ...state,
            playlistIndex,
        }

    }

    if (type === "TRACK_PLAY") {
        return {
            ...state,
            isPlaying,
            isPaused: !isPlaying,
            audio,
        };
    }

    if (type === "TRACK_STOP") {
        return {
            ...state,
            isPaused,
            isPlaying: !isPaused,
        };
    }

    if (type === "TRACK_VOLUME") {
        return {
            ...state,
            volume,
        };
    }

    if (type === "TRACK_DURATION") {
        return {
            ...state,
            duration,
        };
    }

    if (type === "TRACK_CURRENT_TIME") {
        return {
            ...state,
            currentTime,
        };
    }

    if (type === "SET_PLAYLIST") {
        console.log(playlist,'lol')
        return {
            ...state,
            playlist,
            track,
        };
    }
    return state;
};


export const audio = new Audio()
audio.onended = () => store.dispatch (actionNextTrack())



const trackActions = (urlVar) => {
    audio.src = backURL + '/'+ urlVar.url
    audio.load()
    audio.ondurationchange = function(){actionSetDuration()}
    audio.ontimeupdate = function(){actionTrackCurrentTime()}
}


export const actionTrackLoad = (trackIndex) =>
    ({type:'ACTION_TRACK_LOAD', trackIndex})

export function* trackLoadWorker (action) {
    let {trackIndex} = action
    let {player:{playlist}} = yield select ()
    trackActions(playlist[trackIndex])
    yield put({type:"TRACK_LOAD",playlistIndex:trackIndex})
    yield put (actionTrackPlay())
}
export function* trackLoadWatcher() {
    yield takeEvery ('ACTION_TRACK_LOAD',trackLoadWorker)
}






export const actionTrackPlay = () =>
    ({type:'ACTION_TRACK_PLAY'})


export function* trackPlayWorker () {
    yield audio.play()
    yield put({type:"TRACK_PLAY",isPlaying:true,isPaused:false,audio:audio})
}

export function* trackPlayWatcher() {
    yield takeEvery ('ACTION_TRACK_PLAY',trackPlayWorker)
}



export const actionNextTrack = () =>
    ({type:'ACTION_NEXT_TRACK'})

export function* nextTrackWorker () {
    let {player} = yield select ()
    let playlistIndex = player.playlistIndex
    let playlist = player.playlist
       if (playlist.length === playlistIndex + 1) {
           yield put({type:"NEXT_TRACK",playlistIndex:0})
           trackActions(player.playlist[0])
           yield put (actionTrackPlay())
       } else {
           yield put({type:"NEXT_TRACK",playlistIndex:playlistIndex+1})
           trackActions(player.playlist[playlistIndex+1])
           yield put (actionTrackPlay())
       }
    console.log(playlistIndex)
}
export function* nextTrackWatcher() {
    yield takeEvery ('ACTION_NEXT_TRACK',nextTrackWorker)
}




export const actionPreviousTrack = () =>
    ({type:'ACTION_PREVIOUS_TRACK'})

export function* previousTrackWorker () {
    let {player} = yield select ()
    let p = player.playlistIndex
    if (p < 1) {
        yield put({type:"NEXT_TRACK",playlistIndex:0})
        trackActions(player.playlist[0])
        yield put (actionTrackPlay())
    } else {
        yield put({type:"PREVIOUS_TRACK",playlistIndex:p-1})
        trackActions(player.playlist[p-1])
        yield put (actionTrackPlay())
    }


}
export function* previousTrackWatcher() {
    yield takeEvery ('ACTION_PREVIOUS_TRACK',previousTrackWorker)
}



export const actionTrackStop = () =>
    ({type: 'ACTION_TRACK_STOP'})

export function* trackStopWorker () {
    audio.pause()
    yield put({type:"TRACK_STOP",isPlaying:false,isPaused:true})
}
    export function* trackStopWatcher() {
        yield takeEvery ('ACTION_TRACK_STOP',trackStopWorker)
    }





export const actionTrackVolume = (e) =>
    ({type:'ACTION_TRACK_VOLUME', e})
export function* trackVolumeWorker (action) {
    let {e} = action
    audio.volume = e
    yield put({type:"TRACK_VOLUME", volume:e})
}
export function* trackVolumeWatcher() {
    yield takeEvery ('ACTION_TRACK_VOLUME',trackVolumeWorker)
}




export const actionSetDuration = () => {
    let e = audio.duration
    store.dispatch({type:"TRACK_DURATION",duration:e})
}


export const actionTrackCurrentTime = (e) => {
    if (e) {
        audio.currentTime = e
        store.dispatch({type:"TRACK_CURRENT_TIME", currentTime:e})
    } else {
        let e = audio.currentTime
        store.dispatch({type:"TRACK_CURRENT_TIME", currentTime:e})
    }

}





export const actionSetPlaylist = (playlistP,trackIndex,track) =>
    ({type:'ACTION_SET_PLAYLIST', playlistP,trackIndex,track})

export function* setPlaylistWorker(action) {
    let {playlistP, trackIndex,track} = action
    yield put ({type:"SET_PLAYLIST", playlist:playlistP,track:track})
    yield put (actionTrackLoad(trackIndex))
}

export function* setPlaylistWatcher() {
    yield takeEvery ('ACTION_SET_PLAYLIST',setPlaylistWorker)
}





// Visualiser (not working)
// const onInputChange = (e) => {
//     var sound = document.getElementById('sound');
//     sound.src = URL.createObjectURL(e.target.files[0]);
// }
// export const Visualiser = () => {
//
//     const track = useRef(audio || {})
//
//     useEffect(() => {
//         track.current = (audio|| {})
//     },[audio])
//
//     // let sound = document.getElementById('sound');
//     const [capColor, setCapColor] = useState(' ')
//     const [capHeight, setCapHeight] = useState(4)
//     const [meterWidth, setMeterWidth] = useState(3)
//     const [meterCount, setMeterCount] = useState(512)
//     const [gap, setGap] = useState(5)
//     const [meterColor1, setMeterColor1] = useState('#f00')
//     const [meterColor2, setMeterColor2] = useState('#0C70FD')
//     const [meterColor3, setMeterColor3] = useState('#0CFD70')
//
//     console.log(track.current,'111')
//
//     return (
//         <div className="Visualiser">
//
//             {/*<div style={{*/}
//             {/*    display: 'flex',*/}
//             {/*}}>*/}
//             {/*    <div className="setting-section file">*/}
//             {/*        <input type="file" id="input" accept="audio/*" onChange={onInputChange} />*/}
//             {/*        <audio id="sound" controls></audio>*/}
//             {/*    </div>*/}
//
//             {/*</div>*/}
//             <AudioSpectrum
//                 id="audio-canvas"
//                 style={{
//                     padding: 10
//                 }}
//                 height={500}
//                 width={900}
//                 audioEle={track.current}
//                 capColor={capColor}
//                 capHeight={capHeight}
//                 meterWidth={meterWidth}
//                 meterCount={meterCount}
//                 meterColor={[
//                     {stop: 0, color: meterColor1},
//                     {stop: 0.5, color: meterColor2},
//                     {stop: 1, color: meterColor3}
//                 ]}
//                 gap={gap}
//             />
//         </div>
//     );
// }
//