rework saga

src/pages/my-tracks/my-playlists.js

@@ -14,7 +14,7 @@ const MyPlaylists =  ({playlists={},onCreatePlaylist}) => {
             <input placeholder='Название' onChange={e => setP(e.target.value)}/>
             <button disabled={p.length >= 6  && p !== "" ? false : true} onClick={() => {onCreatePlaylist(p)}}>Создать плейлист</button>
             <ul className='Users'>
-                {playlists.map(playlist =>  <Playlist playlist={playlist}/> )}
+                {playlists.map((playlist,playlistIndex) =>  <Playlist key={`playlist-${playlistIndex}`} playlist={playlist}/> )}
             </ul>
         </div>
     )

src/pages/my-tracks/my-tracks.js

@@ -1,9 +1,10 @@
+// import {SortableContainer, SortableElement} from 'react-sortable-hoc';
+// import {arrayMoveImmutable} from 'array-move';
+// import {useState,useEffect} from "react";
+
 import {connect} from "react-redux";
 import {CTrack} from "../track";
 import {CPlaylistDropZone} from "../tools";
-import {SortableContainer, SortableElement} from 'react-sortable-hoc';
-import {arrayMoveImmutable} from 'array-move';
-import {useState,useEffect} from "react";
 import {CPreloaded} from "../preloader";
 import {actionSetPlaylist} from "../../reducers";
 
@@ -14,8 +15,7 @@ const MyTracks = ({playlist={}}) => {
         <div className='Category'>
             <h1>{name}</h1>
             <CPreloaded promiseName='playlistById'>
-                {(tracks || []).map((track,index) => <CTrack trackIndex={index} playlist={playlist} track={track}/>)}
-
+                {(tracks || []).map((track,index) => <CTrack key={`item-${index}`} trackIndex={index} playlist={playlist} track={track}/>)}
             </CPreloaded>
         </div>
     )

src/pages/track.js

@@ -1,9 +1,7 @@
-import {useState,useEffect,useRef} from "react";
 import play from '../play.svg'
 import pause from '../pause.svg'
-import {store,actionTrackPlay,actionTrackStop,actionSetPlaylist} from "../reducers";
+import {actionTrackPlay,actionTrackStop,actionSetPlaylist} from "../reducers";
 import {connect} from "react-redux";
-import {backURL} from "../actions";
 
 
 export const Track = ({playlist,track:{_id,url,originalFileName},trackIndex,
@@ -15,10 +13,10 @@ export const Track = ({playlist,track:{_id,url,originalFileName},trackIndex,
                 <button onClick={() => {
                     setPlaylist(playlist,trackIndex);
                 }}>
-                    <img src={play}/>
+                    <img src={play} alt='play'/>
                 </button>
                 <button onClick={() => trackStop()}>
-                    <img src={pause}/>
+                    <img src={pause} alt='pause'/>
                 </button>
             <span>{originalFileName}</span>
         </div>

src/reducers/index.js

@@ -1,8 +1,9 @@
 export {store} from './store'
 export {actionPromise} from './promiseReducer'
 
-export {playerReducer,actionTrackPlay,actionTrackStop,
-    actionTrackVolume,actionTrackCurrentTime,actionSetPlaylist} from "./playerReducer";
+export {actionTrackPlay,actionTrackStop,actionSetPlaylist,actionTrackCurrentTime,actionTrackVolume,
+    trackPlayWatcher,trackStopWatcher,setPlaylistWatcher,trackVolumeWatcher,
+} from "./playerReducer";
 
 export {actionAuthLogin, actionAuthLogout} from './authReducer'
 export {CProtectedRoute} from "./routeReducer";

src/reducers/playerReducer.js

@@ -1,6 +1,7 @@
+import {backURL} from "../actions";
+import { select, put, takeEvery } from "redux-saga/effects";
 import {store} from "./store";
-import {actionPromise} from "./promiseReducer";
-import {backURL, gql} from "../actions";
+
 
 export const playerReducer = (
     state = {},
@@ -55,55 +56,59 @@ export const playerReducer = (
 };
 
 
-
 const audio = new Audio()
 
 
-
 export const actionTrackPlay = (trackIndex) =>
-    async (dispatch,getState) => {
-        let {player:{playlistIndex,playlist}} = getState()
-
-        if (playlistIndex !== trackIndex) {
-            audio.src = backURL + '/'+ playlist.tracks[trackIndex].url
-            await audio.load()
-            audio.ondurationchange = function(){actionSetDuration()}
-            audio.ontimeupdate = function(){actionTrackCurrentTime()}
-        }
-        await audio.play()
-        await console.log(playlist,'uuuuu')
-        await dispatch({type:"TRACK_PLAY",isPlaying:true,isPaused:false,trackIndex})
-    }
-
+    ({type:'ACTION_TRACK_PLAY', trackIndex})
+export function* trackPlayWorker (action) {
+    let {trackIndex} = action
+    let {player:{playlist}} = yield select ()
+    //  if (playlistIndex !== trackIndex) {
+    audio.src = backURL + '/'+ playlist[trackIndex].url
+    audio.load()
+    audio.ondurationchange = function(){actionSetDuration()}
+    audio.ontimeupdate = function(){actionTrackCurrentTime()}
+    // }
+    yield audio.play()
+    console.log(trackIndex,'uuuuu')
+    yield put({type:"TRACK_PLAY",isPlaying:true,isPaused:false,trackIndex})
+}
+export function* trackPlayWatcher() {
+    yield takeEvery ('ACTION_TRACK_PLAY',trackPlayWorker)
+}
 
 
 
-// export const actionTrackPlay = (trackIndex) =>
-//     async (dispatch, getState) => {
-//          let {player} = getState ()
-//         let url = player.playlist[trackIndex]?.url
-//          let audioSrc = backURL + '/'+ url
-//         audio.src = audioSrc
-//         audio.load()
-//         console.log(audioSrc,'uuuuu')
-//         audio.ondurationchange = function(){actionSetDuration()}
-//         audio.ontimeupdate = function(){actionTrackCurrentTime()}
-//         audio.play()
-//         await dispatch({type:"TRACK_PLAY",isPlaying:true,isPaused:false})
-//     }
 
 
+export const actionTrackStop = () =>
+    ({type: 'ACTION_TRACK_STOP'})
 
-export const actionTrackStop = () => {
+export function* trackStopWorker () {
     audio.pause()
-    store.dispatch({type:"TRACK_STOP",isPlaying:false,isPaused:true})
+    yield put({type:"TRACK_STOP",isPlaying:false,isPaused:true})
 }
+    export function* trackStopWatcher() {
+        yield takeEvery ('ACTION_TRACK_STOP',trackStopWorker)
+    }
+
+
+
 
 
-export const actionTrackVolume = (e) => {
+export const actionTrackVolume = (e) =>
+    ({type:'ACTION_TRACK_VOLUME', e})
+export function* trackVolumeWorker (action) {
+    let {e} = action
     audio.volume = e
-    store.dispatch({type:"TRACK_VOLUME", volume:e})
+    yield put({type:"TRACK_VOLUME", volume:e})
 }
+export function* trackVolumeWatcher() {
+    yield takeEvery ('ACTION_TRACK_VOLUME',trackVolumeWorker)
+}
+
+
 
 
 export const actionSetDuration = () => {
@@ -116,9 +121,51 @@ export const actionTrackCurrentTime = () => {
     store.dispatch({type:"TRACK_CURRENT_TIME", currentTime:e})
 }
 
-export const actionSetPlaylist = (playlist,trackIndex) => {
-        store.dispatch({type:"SET_PLAYLIST",playlist:playlist})
-         actionTrackPlay(trackIndex)
-    }
 
 
+
+
+
+export const actionSetPlaylist = (playlist,trackIndex) =>
+    ({type:'ACTION_SET_PLAYLIST', playlist,trackIndex})
+
+export function* setPlaylistWorker(action) {
+    let {playlist, trackIndex} = action
+    console.log (playlist,'trackplay')
+    yield put ({type:"SET_PLAYLIST", playlist:playlist})
+    yield put (actionTrackPlay(trackIndex))
+}
+
+export function* setPlaylistWatcher() {
+    yield takeEvery ('ACTION_SET_PLAYLIST',setPlaylistWorker)
+}
+
+
+
+
+
+
+// export const actionSetDuration = () =>
+//     ({type:'ACTION_TRACK_DURATION'})
+//
+// export function* setDurationWorker () {
+//     let e = audio.duration
+//     yield put({type:"TRACK_DURATION",duration:e})
+// }
+//
+// export function* setDurationWatcher() {
+//     yield takeEvery ('ACTION_TRACK_DURATION',setDurationWorker)
+// }
+//
+//
+//
+//
+// export const actionTrackCurrentTime = () =>
+//     ({type:'ACTION_TRACK_CURRENT_TIME'})
+// export function* trackCurrentTimeWorker () {
+//     let e = audio.currentTime
+//     yield put({type:"TRACK_CURRENT_TIME", currentTime:e})
+// }
+// export function* trackCurrentTimeWatcher() {
+//     yield takeEvery ('ACTION_TRACK_CURRENT_TIME', trackCurrentTimeWorker)
+// }

src/reducers/store.js

@@ -9,6 +9,8 @@ import {setAvatarWatcher} from "../actions/set-avatar-actions";
 import {fullUploadPlaylistsWatcher,setTrackToPlaylistWatcher} from "../actions/my-playlist-tracks-actions";
 import {aboutMeWatcher,actionAboutMe} from "../actions/about-me-actions";
 import {fullUploadTrackWatcher} from "../actions/no-playlist-track-actions";
+import {trackPlayWatcher,trackStopWatcher,setPlaylistWatcher,trackVolumeWatcher,
+} from "./playerReducer";
 
 
 import {localStoredReducer} from "./localStoredReducer";
@@ -44,6 +46,10 @@ function* rootSaga(){
           setTrackToPlaylistWatcher(),
           fullUploadPlaylistsWatcher(),
         fullUploadTrackWatcher(),
+         setPlaylistWatcher(),
+         trackPlayWatcher(),
+        trackStopWatcher(),
+        trackVolumeWatcher(),
          // setUserPasswordWatcher(),
     ])
 }