add beta gapless player

3 years ago · 16a35fe7a5
6 changed files with 67 additions and 89 deletions
--- a/package.json
+++ b/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",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -14,46 +14,28 @@ 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>
-      )} */}
+    <Player>
      <Router>
-        <Player>
-          <Layout footer={<PlayerBar />}>
-            <Switch>
-              <Route path="/library/artist/:id" component={NowPlayingView} />
-              <Route path="/library/album/:id" component={NowPlayingView} />
-              <Route path="/library" component={LibraryView} />
-              <Route path="/nowplaying" component={NowPlayingView} />
-              <Route path="/settings" component={Settings} />
-              <Route path="/playlist/:id" component={PlaylistView} />
-              <Route path="/playlists" component={PlaylistList} />
-              <Route path="/starred" component={StarredView} />
-              <Route path="/" component={Dashboard} />
-            </Switch>
-          </Layout>
-        </Player>
+        <Layout footer={<PlayerBar />}>
+          <Switch>
+            <Route path="/library/artist/:id" component={NowPlayingView} />
+            <Route path="/library/album/:id" component={NowPlayingView} />
+            <Route path="/library" component={LibraryView} />
+            <Route path="/nowplaying" component={NowPlayingView} />
+            <Route path="/settings" component={Settings} />
+            <Route path="/playlist/:id" component={PlaylistView} />
+            <Route path="/playlists" component={PlaylistList} />
+            <Route path="/starred" component={StarredView} />
+            <Route path="/" component={Dashboard} />
+          </Switch>
+        </Layout>
      </Router>
-    </>
+    </Player>
  );
 };

--- a/src/components/player/Player.tsx
+++ b/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>
  );
 };

--- a/src/components/player/PlayerBar.tsx
+++ b/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';
--- a/src/redux/playQueueSlice.ts
+++ b/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,
--- a/yarn.lock
+++ b/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"