Some fixes in player

src/App.js

@@ -303,7 +303,7 @@ export function* searchWorker({ text }) {
 }
 
 function* searchWatcher() {
-  yield takeLatest("SEARCH", searchWorker);
+  yield takeEvery("SEARCH", searchWorker);
 }
 
 function* findPlaylistByOwnerWorker() {
@@ -340,7 +340,6 @@ function* findUserTracksWatcher() {
 
 function* findPlaylistTracksWorker({ _id }) {
   yield call(promiseWorker, actions.actionFindPlaylistTracks(_id));
-  window.location.reload();
 }
 
 function* findPlaylistTracksWatcher() {

src/components/Audio.js

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 import { backURL } from "../helpers/index";
 import { Link } from "react-router-dom";
 import * as actions from "./AudioHandler";
+import { skipValue } from "./../helpers/index";
 
 const AudioTrack = ({
   personal,
@@ -11,18 +12,26 @@ const AudioTrack = ({
   index,
   playlist,
   loadAudio,
+  loadedTracks,
+  route,
 }) => {
   function truncText(text) {
     if (text && text.length > 40) {
       return text.substring(0, 40) + "...";
     } else return text;
   }
+  if (!index) {
+    index = playlist.findIndex((audio) => audio?._id === track?._id);
+  }
 
   return (
     <div className="d-flex mt-5">
       <div className="customAudio p-2 bg-dark text-white">
         <span className="ml-3 d-inline-block">
-          {!personal ? `${index + 1} | ` : null}
+          {route.url === "/search"
+            ? index + 1 + loadedTracks?.skipTracks
+            : index + 1}{" "}
+          |
           <span>
             {track?.originalFileName
               ? truncText(track?.originalFileName)
@@ -33,7 +42,7 @@ const AudioTrack = ({
       <Button onClick={() => loadAudio(track, playlist, index)}>
         <i
           className={`fas ${
-            index === player?.indexInPlaylist && player?.isPlaying
+            track._id === player?.track?._id && player?.isPlaying
               ? "fa-pause-circle"
               : "fa-play-circle"
           }`}
@@ -47,7 +56,7 @@ const AudioTrack = ({
         <i className="fas fa-download"></i>
       </a>
       {!personal ? (
-        <div className="ml-2">
+        <div className="ml-5">
           <Link to={`/profile/${track?.owner?._id}`}>
             {track?.owner
               ? track?.owner?.nick
@@ -61,6 +70,13 @@ const AudioTrack = ({
   );
 };
 
-export const CAudio = connect((state) => ({ player: state.player }), {
-  loadAudio: actions.actionFullLoadAudio,
-})(AudioTrack);
+export const CAudio = connect(
+  (state) => ({
+    player: state.player,
+    loadedTracks: state.loadedTracks,
+    route: state.route,
+  }),
+  {
+    loadAudio: actions.actionFullLoadAudio,
+  }
+)(AudioTrack);

src/components/AudioController.js

@@ -5,39 +5,12 @@ import * as actions from "./AudioHandler";
 
 const AudioController = ({
   player,
-  playAudio,
-  pauseAudio,
   prevAudio,
   nextAudio,
   setVolume,
   setSeekTime,
   loadAudio,
 }) => {
-  const [indexInPlaylist, setIndexInPlaylist] = useState(
-    player?.indexInPlaylist
-  );
-
-  const checkIndexInPlaylist = (type) => {
-    if (type === "prev") {
-      if (player?.playlist[indexInPlaylist - 1]) {
-        setIndexInPlaylist(indexInPlaylist - 1);
-        return indexInPlaylist;
-      } else {
-        setIndexInPlaylist(player?.playlist?.length - 1);
-        return indexInPlaylist;
-      }
-    }
-    if (type === "next") {
-      if (player?.playlist[indexInPlaylist + 1]) {
-        setIndexInPlaylist(indexInPlaylist + 1);
-        return indexInPlaylist;
-      } else {
-        setIndexInPlaylist(0);
-        return indexInPlaylist;
-      }
-    }
-  };
-
   function truncText(text) {
     if (text && text.includes(".mp3")) {
       return text.replace(".mp3", "");
@@ -62,11 +35,7 @@ const AudioController = ({
         <Button
           className="mr-2"
           disabled={player?.track ? false : true}
-          onClick={() => {
-            checkIndexInPlaylist("prev");
-            console.log(indexInPlaylist, player?.playlist[indexInPlaylist]);
-            prevAudio(indexInPlaylist, player?.playlist[indexInPlaylist]);
-          }}
+          onClick={() => prevAudio(player?.indexInPlaylist)}
         >
           <i className="fas fa-step-backward"></i>
         </Button>
@@ -83,11 +52,7 @@ const AudioController = ({
         </Button>
         <Button
           disabled={player?.track ? false : true}
-          onClick={() => {
-            checkIndexInPlaylist("next");
-            console.log(indexInPlaylist, player?.playlist[indexInPlaylist]);
-            nextAudio(indexInPlaylist, player?.playlist[indexInPlaylist]);
-          }}
+          onClick={() => nextAudio(player?.indexInPlaylist)}
         >
           <i className="fas fa-step-forward"></i>
         </Button>
@@ -149,8 +114,8 @@ export const CAudioController = connect(
     loadAudio: actions.actionFullLoadAudio,
     playAudio: actions.actionFullPlayAudio,
     pauseAudio: actions.actionFullPauseAudio,
-    nextAudio: actions.actionFullNextTrack,
-    prevAudio: actions.actionFullPrevTrack,
+    nextAudio: actions.actionNextTrack,
+    prevAudio: actions.actionPrevTrack,
     setVolume: actions.actionFullSetVolume,
     setSeekTime: actions.actionFullSetSeekTimeTrack,
   }

src/components/AudioHandler.js

@@ -4,6 +4,13 @@ import { backURL } from "./../helpers/index";
 
 const audio = new Audio();
 
+window.onload = () => {
+  let { player } = store.getState();
+  if (player?.isPlaying) {
+    store.dispatch(actionFullPauseAudio(true));
+  }
+};
+
 function* audioLoadWorker({ track, playlist, indexInPlaylist }) {
   console.log("Load track");
   let { player } = yield select();
@@ -16,6 +23,8 @@ function* audioLoadWorker({ track, playlist, indexInPlaylist }) {
       yield put(actionFullPauseAudio(true));
     }
     if (player?.isPaused) {
+      audio.src = `${backURL}/${player?.track?.url}`;
+      audio.currentTime = player?.currentTime;
       yield put(actionFullPlayAudio(true));
     }
   }
@@ -32,7 +41,6 @@ function* audioPlayWorker(isPlaying) {
   console.log("Play track");
   audio.play();
   audio.ontimeupdate = (e) => {
-    console.log(e);
     store.dispatch(actionFullSetCurrentTimeTrack(e.path[0].currentTime));
   };
   yield put(actionPlayAudio(isPlaying));
@@ -52,22 +60,51 @@ export function* audioPauseWatcher() {
   yield takeEvery("FULL_PAUSE_TRACK", audioPauseWorker);
 }
 
-function* audioPrevTrackWorker(track, indexInPlaylist) {
+function* audioPrevTrackWorker({ indexInPlaylist }) {
   console.log("Prev track");
-  yield put(actionPrevTrack(track, indexInPlaylist));
+  let { player } = yield select();
+  if (player?.playlist[indexInPlaylist - 1]) {
+    indexInPlaylist -= 1;
+  } else {
+    indexInPlaylist = player?.playlist?.length - 1;
+  }
+  yield put(actionFullPauseAudio(true));
+  audio.currentTime = 0;
+  yield put(
+    actionFullLoadAudio(
+      player?.playlist[indexInPlaylist],
+      player?.playlist,
+      indexInPlaylist
+    )
+  );
 }
 
 export function* audioPrevTrackWatcher() {
-  yield takeEvery("FULL_PREV_TRACK", audioPrevTrackWorker);
+  yield takeEvery("PREV_TRACK", audioPrevTrackWorker);
 }
 
-function* audioNextTrackWorker(track, indexInPlaylist) {
+function* audioNextTrackWorker({ indexInPlaylist }) {
   console.log("Next track");
-  yield put(actionNextTrack(track, indexInPlaylist));
+  let { player } = yield select();
+  if (player?.playlist[indexInPlaylist + 1]) {
+    console.log("true");
+    indexInPlaylist += 1;
+  } else {
+    indexInPlaylist = 0;
+  }
+  yield put(actionFullPauseAudio(true));
+  audio.currentTime = 0;
+  yield put(
+    actionFullLoadAudio(
+      player?.playlist[indexInPlaylist],
+      player?.playlist,
+      indexInPlaylist
+    )
+  );
 }
 
 export function* audioNextTrackWatcher() {
-  yield takeEvery("FULL_NEXT_TRACK", audioNextTrackWorker);
+  yield takeEvery("NEXT_TRACK", audioNextTrackWorker);
 }
 
 function* audioSetCurrentTimeWorker({ currentTime }) {
@@ -142,28 +179,14 @@ export const actionFullPauseAudio = (isPaused) => ({
   isPaused,
 });
 
-export const actionPrevTrack = ({ indexInPlaylist, track }) => ({
+export const actionPrevTrack = (indexInPlaylist) => ({
   type: "PREV_TRACK",
   indexInPlaylist,
-  track,
-});
-
-export const actionFullPrevTrack = (indexInPlaylist, track) => ({
-  type: "FULL_PREV_TRACK",
-  indexInPlaylist,
-  track,
 });
 
-export const actionNextTrack = ({ indexInPlaylist, track }) => ({
+export const actionNextTrack = (indexInPlaylist) => ({
   type: "NEXT_TRACK",
   indexInPlaylist,
-  track,
-});
-
-export const actionFullNextTrack = (indexInPlaylist, track) => ({
-  type: "FULL_NEXT_TRACK",
-  indexInPlaylist,
-  track,
 });
 
 export const actionSetCurrentTimeTrack = (currentTime) => ({

src/components/PlayerHeader.js

@@ -14,7 +14,7 @@ export const PlayerHeader = ({ personal }) => {
   return (
     <nav className={`mt-5 navbar ${offset > 50 ? "sticky" : ""}`}>
       <div className="container-fluid player-container">
-        <span>{personal ? "" : "#"}</span>
+        <span>#</span>
         <span>Название</span>
         <span>{personal ? "" : "Владелец"}</span>
       </div>

src/components/Playlist.js

@@ -11,6 +11,7 @@ import { arrayMoveImmutable } from "array-move";
 import { CAudio } from "./Audio";
 import { history } from "./../App";
 import { CPreloader } from "./Preloader";
+import { PlayerHeader } from "./PlayerHeader";
 
 const PlaylistTrackItem = ({ track, index, key, playlist }) => {
   return (
@@ -102,15 +103,26 @@ const CPlaylistTracks = connect((state) => ({
   tracks: state.promise.uploadTrack?.payload || [],
 }))(PlaylistTracks);
 
-export const MyPlaylistTracks = () => (
-  <>
-    <h3 className="text-center">
-      Перетащите аудио файл(-ы) для загрузки в этот плейлист.
-    </h3>
-    <CMyDropzone />
-    <CPlaylistTracks />
-  </>
-);
+export const MyPlaylistTracks = connect(
+  (state) => ({ promise: state.promise }),
+  null
+)(({ promise }) => {
+  return (
+    <div>
+      <h3 className="text-center">
+        Перетащите аудио файл(-ы) для загрузки в этот плейлист.
+      </h3>
+      <CMyDropzone />
+      <div className="d-block mx-auto mt-2 container w-50">
+        {promise?.playlistTracks?.payload?.tracks &&
+        promise?.playlistTracks?.payload?.tracks?.length !== 0 ? (
+          <PlayerHeader personal />
+        ) : null}
+      </div>
+      <CPlaylistTracks />
+    </div>
+  );
+});
 
 const Playlist = ({ playlist: { _id, name } = {} }) => (
   <li className="d-flex">

src/components/Profile/MyProfile.js

@@ -1,4 +1,3 @@
-import { AuthCheck } from "../AuthCheck";
 import { Spoiler } from "../Spoiler";
 import {
   backURL,
@@ -260,7 +259,7 @@ const MyProfile = ({
                         variant="secondary"
                         onClick={() => setPasswordShown(!passwordShown)}
                       >
-                        {`${passwordShown ? "Hide" : "Show"} passwords`}
+                        {`${passwordShown ? "Скрыть" : "Показать"} пароль`}
                       </Button>
                     </Col>
                   </Form.Group>

src/components/Tracks.js

@@ -2,6 +2,7 @@ import { connect } from "react-redux";
 import { CAudio } from "./Audio";
 import { useState, useEffect } from "react";
 import { actionAllTracks, actionFullSkipTracks } from "../actions";
+import { skipValue } from "./../helpers/index";
 
 const Tracks = ({
   tracks,
@@ -36,7 +37,7 @@ const Tracks = ({
       0
     ) {
       setFlag(true);
-      skipAllTracks(30);
+      skipAllTracks(skipValue);
     }
   };
 

src/helpers/index.js

@@ -1,5 +1,7 @@
 import { useState } from "react";
 
+export const skipValue = 30;
+
 export const jwtDecode = (token) => {
   try {
     let arrToken = token.split(".");

src/pages/Library.js

@@ -3,7 +3,7 @@ import { CMyPlaylists } from "../components/Playlist";
 
 const Library = ({ promise }) => {
   return (
-    <div className="SearchPage">
+    <div>
       <div className="d-block mx-auto mt-2 container w-50">
         <h1 className="mb-3 text-center">
           Ваша библиотека плейлистов с музыкой, {promise?.myUser?.payload?.nick}

src/pages/Login.js

@@ -7,6 +7,7 @@ import { Link } from "react-router-dom";
 const LoginForm = ({ promise, onLogin }) => {
   const [login, setLogin] = useState("");
   const [password, setPassword] = useState("");
+  const [passwordShown, setPasswordShown] = useState(false);
   return (
     <div className="AuthForm mx-auto mt-5">
       <Form>
@@ -18,6 +19,7 @@ const LoginForm = ({ promise, onLogin }) => {
             зарегистрироваться или повторите ещё раз.
           </Alert>
         ) : null}
+        <h1 className="text-center">Вход в аккаунт</h1>
         <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
           <Form.Label column sm={2}>
             Почта:
@@ -40,10 +42,17 @@ const LoginForm = ({ promise, onLogin }) => {
           </Form.Label>
           <Col sm={10}>
             <Form.Control
-              type="password"
+              type={passwordShown ? "text" : "password"}
               placeholder="Введите ваш пароль"
               onChange={(e) => setPassword(e.target.value)}
             />
+            <Button
+              className="mt-2"
+              variant="secondary"
+              onClick={() => setPasswordShown(!passwordShown)}
+            >
+              {`${passwordShown ? "Скрыть" : "Показать"} пароль`}
+            </Button>
           </Col>
         </Form.Group>
         <Form.Group as={Row} className="mb-3">

src/pages/Register.js

@@ -8,7 +8,7 @@ import { validateEmail, validatePassword } from "./../helpers/index";
 const RegisterForm = ({ promise, auth, onRegister }) => {
   const [login, setLogin] = useState("");
   const [password, setPassword] = useState("");
-
+  const [passwordShown, setPasswordShown] = useState(false);
   return (
     <div className="AuthForm mx-auto mt-5">
       <Form>
@@ -29,6 +29,7 @@ const RegisterForm = ({ promise, auth, onRegister }) => {
             Возможно, такой пользователь уже существует.
           </Alert>
         ) : null}
+        <h1 className="text-center">Зарегистрировать аккаунт</h1>
         <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
           <Form.Label column sm={2}>
             Почта:
@@ -52,11 +53,17 @@ const RegisterForm = ({ promise, auth, onRegister }) => {
           </Form.Label>
           <Col sm={10}>
             <Form.Control
-              type="password"
-              required
+              type={passwordShown ? "text" : "password"}
               placeholder="Введите ваш пароль"
               onChange={(e) => setPassword(e.target.value)}
             />
+            <Button
+              className="mt-2"
+              variant="secondary"
+              onClick={() => setPasswordShown(!passwordShown)}
+            >
+              {`${passwordShown ? "Скрыть" : "Показать"} пароль`}
+            </Button>
           </Col>
         </Form.Group>
         <Form.Group as={Row} className="mb-3">

src/pages/Search.js

@@ -19,9 +19,11 @@ const SearchField = connect(null, {
         aria-label="Поиск"
         aria-describedby="search-addon"
         value={text}
-        onChange={(e) => setText(e.target.value)}
-        onFocus={() => {
+        onChange={(e) => {
+          setText(e.target.value);
           onChangeSearch(text);
+        }}
+        onFocus={() => {
           setSearch(true);
         }}
         onBlur={() => setSearch(false)}
@@ -48,22 +50,21 @@ const CSearchResult = connect(
   null
 )(SearchResult);
 
-const Search = ({ search, promise }) => {
+const Search = ({ search, promise, loadedTracks }) => {
   return (
-    <div className="SearchPage">
+    <div>
       <div className="d-block mx-auto mt-2 container w-50">
         <h1 className="text-center">Поиск по сайту</h1>
         <SearchField />
-        {search?.searchResult?.payload?.payload &&
-        search?.searchResult?.payload?.payload?.length !== 0 ? (
+        {search?.setSearch ? (
           <CSearchResult />
-        ) : promise?.tracks?.payload?.length !== 0 ? (
+        ) : loadedTracks?.loadedTracks?.length !== 0 ? (
           <div>
             <PlayerHeader />
             <CPreloader
               promiseName={"tracks"}
               promiseState={promise}
-              children={<CTracks tracks={promise?.tracks?.payload} />}
+              children={<CTracks tracks={loadedTracks?.loadedTracks} />}
             />
           </div>
         ) : (
@@ -84,6 +85,7 @@ export const CSearch = connect(
   (state) => ({
     search: state.search,
     promise: state.promise,
+    loadedTracks: state.loadedTracks,
   }),
   null
 )(Search);

src/reducers/index.js

@@ -51,10 +51,10 @@ export const localStoredReducer =
 
 export const searchReducer = (state = {}, { type, action, ...params }) => {
   if (type === "SEARCH_RESULT") {
-    return { searchResult: { ...params } };
+    return { ...state, searchResult: { ...params } };
   }
   if (type === "SET_SEARCH") {
-    return { setSearch: action };
+    return { ...state, setSearch: action };
   }
   return state;
 };
@@ -107,20 +107,6 @@ export const playerReducer = (
       isPlaying: !isPaused,
     };
   }
-  if (type === "PREV_TRACK") {
-    return {
-      ...state,
-      indexInPlaylist,
-      track,
-    };
-  }
-  if (type === "NEXT_TRACK") {
-    return {
-      ...state,
-      indexInPlaylist,
-      track,
-    };
-  }
   if (type === "SET_VOLUME") {
     return {
       ...state,