add beta gapless player

package.json

@@ -260,10 +260,10 @@
     "nanoid": "^3.1.23",
     "randomstring": "^1.2.1",
     "react": "^17.0.1",
+    "react-audio-player": "^0.17.0",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^17.0.1",
-    "react-h5-audio-player": "^3.7.1",
     "react-helmet-async": "^1.0.9",
     "react-horizontal-scrolling-menu": "^2.0.3",
     "react-hotkeys": "^2.0.0",

src/App.tsx

@@ -14,30 +14,13 @@ import LibraryView from './components/library/LibraryView';
 import PlayerBar from './components/player/PlayerBar';
 
 const App = () => {
-  // const playQueue = useAppSelector((state: any) => state.playQueue);
-
   if (!localStorage.getItem('server')) {
     return <Login />;
   }
 
   return (
-    <>
-      {/* {playQueue.entry.length <= 1 && (
-        <Helmet>
-          <title>sonixd</title>
-        </Helmet>
-      )}
-
-      {playQueue.entry[playQueue.currentIndex] && (
-        <Helmet>
-          <title>
-            {playQueue.entry[playQueue.currentIndex].title} {' by '}
-            {playQueue.entry[playQueue.currentIndex].artist} — sonixd
-          </title>
-        </Helmet>
-      )} */}
-      <Router>
     <Player>
+      <Router>
         <Layout footer={<PlayerBar />}>
           <Switch>
             <Route path="/library/artist/:id" component={NowPlayingView} />
@@ -51,9 +34,8 @@ const App = () => {
             <Route path="/" component={Dashboard} />
           </Switch>
         </Layout>
-        </Player>
       </Router>
-    </>
+    </Player>
   );
 };
 

src/components/player/Player.tsx

@@ -1,20 +1,15 @@
-import React, { createRef } from 'react';
-import AudioPlayer from 'react-h5-audio-player';
-import 'react-h5-audio-player/lib/styles.css';
-import { useAppSelector, useAppDispatch } from '../../redux/hooks';
-import {
-  incrementCurrentIndex,
-  decrementCurrentIndex,
-  setIsLoading,
-  setIsLoaded,
-} from '../../redux/playQueueSlice';
-
-const Player = () => {
-  const playerRef = createRef<AudioPlayer>();
-  const playQueue = useAppSelector((state: any) => state.playQueue);
-  const dispatch = useAppDispatch();
-
-  const handleOnLoadStart = () => {
+import React, { useState, createContext } from 'react';
+
+export const PlayerContext = createContext<any>({});
+
+const Player = ({ children }: any) => {
+  const [globalVolume, setGlobalVolume] = useState(0.5);
+  const [player1Volume, setPlayer1Volume] = useState(0.5);
+  const [player2Volume, setPlayer2Volume] = useState(0);
+  const [currentPlayer, setCurrentPlayer] = useState(1);
+  const [incremented, setIncremented] = useState(false);
+
+  /*   const handleOnLoadStart = () => {
     dispatch(setIsLoading());
   };
 
@@ -28,26 +23,25 @@ const Player = () => {
 
   const handleOnClickPrevious = () => {
     dispatch(decrementCurrentIndex());
-  };
-
-  const handleOnEnded = () => {
-    dispatch(incrementCurrentIndex());
-  };
+  }; */
 
   return (
-    <AudioPlayer
-      ref={playerRef}
-      src={playQueue.entry[playQueue.currentIndex]?.streamUrl}
-      autoPlay
-      showSkipControls
-      showFilledVolume
-      showJumpControls={false}
-      onClickNext={handleOnClickNext}
-      onClickPrevious={handleOnClickPrevious}
-      onEnded={handleOnEnded}
-      onLoadStart={handleOnLoadStart}
-      onLoadedData={handleOnLoadedData}
-    />
+    <PlayerContext.Provider
+      value={{
+        globalVolume,
+        setGlobalVolume,
+        player1Volume,
+        setPlayer1Volume,
+        player2Volume,
+        setPlayer2Volume,
+        currentPlayer,
+        setCurrentPlayer,
+        incremented,
+        setIncremented,
+      }}
+    >
+      {children}
+    </PlayerContext.Provider>
   );
 };
 

src/components/player/PlayerBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useRef } from 'react';
+import React, { useContext, useRef } from 'react';
 import ReactAudioPlayer from 'react-audio-player';
 import { Button } from 'rsuite';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';

src/redux/playQueueSlice.ts

@@ -32,6 +32,9 @@ interface Entry {
 export interface PlayQueue {
   currentIndex: number;
   currentSongId: string;
+  player1Index: number;
+  player2Index: number;
+  currentPlayer: number;
   volume: number;
   isLoading: boolean;
   repeatAll: boolean;
@@ -41,6 +44,8 @@ export interface PlayQueue {
 const initialState: PlayQueue = {
   currentIndex: 0,
   currentSongId: '',
+  player1Index: 0,
+  player2Index: 1,
   volume: 0.5,
   isLoading: false,
   repeatAll: false,
@@ -61,6 +66,14 @@ const playQueueSlice = createSlice({
       state.currentSongId = state.entry[state.currentIndex].id;
     },
 
+    incrementPlayerIndex: (state, action: PayloadAction<number>) => {
+      if (action.payload === 1) {
+        state.player1Index += 2;
+      } else {
+        state.player2Index += 2;
+      }
+    },
+
     decrementCurrentIndex: (state) => {
       if (state.currentIndex > 0) {
         state.currentIndex -= 1;
@@ -165,6 +178,7 @@ const playQueueSlice = createSlice({
 export const {
   incrementCurrentIndex,
   decrementCurrentIndex,
+  incrementPlayerIndex,
   setCurrentIndex,
   setPlayQueue,
   clearPlayQueue,

yarn.lock

@@ -1188,16 +1188,6 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@iconify/icons-mdi@^1.0.46":
-  version "1.1.17"
-  resolved "https://registry.yarnpkg.com/@iconify/icons-mdi/-/icons-mdi-1.1.17.tgz#48caf7756b0468670aa9c7336f5d76751389e76b"
-  integrity sha512-9Ot1n1bpyTtOj0jzY44My8KOKaHNyZSFry2U1YFt8sCykKVLttoKcxYnXLGN9HIFzY7eKjOLvhA1Vbjt3ZFhpQ==
-
-"@iconify/react@^1.1.3":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@iconify/react/-/react-1.1.4.tgz#c778eddbaf196e55705d0bedff00d039dc1de8d3"
-  integrity sha512-oxq8IMOq8q3nKGiDHbQPC8FcFuBsKve68JWBo140d5LRnj0bv5TB/FE/y01ZSvEZ7PlI2HIrnb2qivPN8kTDgw==
-
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -10155,6 +10145,13 @@ rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-audio-player@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/react-audio-player/-/react-audio-player-0.17.0.tgz#4be7b1952512801f36ba0865a9c98f7b108f991e"
+  integrity sha512-aCZgusPxA9HK7rLZcTdhTbBH9l6do9vn3NorgoDZRxRxJlOy9uZWzPaKjd7QdcuP2vXpxGA/61JMnnOEY7NXeA==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-dnd-html5-backend@^14.0.0:
   version "14.0.0"
   resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.0.tgz#28d660a2ad1e07447c34a65cd25f7de8f1657194"
@@ -10187,15 +10184,6 @@ react-fast-compare@^3.2.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
-react-h5-audio-player@^3.7.1:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/react-h5-audio-player/-/react-h5-audio-player-3.7.1.tgz#7401f1385a5bd369652dde18cca5823fd6cc6f30"
-  integrity sha512-MWeMZ/orBXxt48P4SVBUfzRy+lw5acz61nc8mhDzqfE4VP7kPzpAnedGsC7mhu+BKy5/1+nO/0q4FFCuNe6U2Q==
-  dependencies:
-    "@babel/runtime" "^7.10.2"
-    "@iconify/icons-mdi" "^1.0.46"
-    "@iconify/react" "^1.1.3"
-
 react-helmet-async@^1.0.9:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.9.tgz#5b9ed2059de6b4aab47f769532f9fbcbce16c5ca"