123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313 |
- 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>
- // );
- // }
- //
|