temp

src/App.tsx

@@ -11,6 +11,7 @@ import Login from './components/settings/Login';
 import StarredView from './components/starred/StarredView';
 import Dashboard from './components/dashboard/Dashboard';
 import LibraryView from './components/library/LibraryView';
+import PlayerBar from './components/player/PlayerBar';
 
 const App = () => {
   // const playQueue = useAppSelector((state: any) => state.playQueue);
@@ -36,19 +37,21 @@ const App = () => {
         </Helmet>
       )} */}
       <Router>
-        <Layout footer={<Player />}>
-          <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>
+        </Player>
       </Router>
     </>
   );

src/components/card/Card.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { Howl } from 'howler';
 import { Icon } from 'rsuite';
 import { useHistory } from 'react-router-dom';
+import { PlayerContext } from '../player/Player';
 import { getAlbum, getPlaylist } from '../../api/api';
 import { useAppDispatch } from '../../redux/hooks';
 import { clearPlayQueue, setPlayQueue } from '../../redux/playQueueSlice';
@@ -27,6 +29,8 @@ const Card = ({
   size,
   ...rest
 }: any) => {
+  const { setTracks } = useContext(PlayerContext);
+
   const history = useHistory();
   const dispatch = useAppDispatch();
 
@@ -43,6 +47,21 @@ const Card = ({
       const res = await getPlaylist(playClick.id);
       dispatch(clearPlayQueue());
       dispatch(setPlayQueue(res.entry));
+
+      const trackList: any[] = [];
+      res.entry.map((entry: any) => {
+        const howl = new Howl({
+          src: [entry.streamUrl],
+          html5: true,
+          autoplay: false,
+        });
+        return trackList.push(howl);
+      });
+      setTracks(trackList);
+
+      // trackList[playQueue.currentIndex].on('play', () => setFade(0));
+      // trackList[playQueue.currentIndex].play();
+      // dispatch(player('play'));
     }
 
     if (playClick.type === 'album') {

src/components/player/NowPlayingView.tsx

@@ -1,4 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
+import { PlayerContext } from './Player';
+
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { setCurrentIndex, moveUp, moveDown } from '../../redux/playQueueSlice';
 import {
@@ -52,6 +54,14 @@ const tableColumns = [
 ];
 
 const NowPlayingView = () => {
+  const {
+    tracks,
+    setTracks,
+    currentlyPlaying,
+    setCurrentlyPlaying,
+    currentTrack,
+    setCurrentTrack,
+  } = useContext(PlayerContext);
   const [searchQuery, setSearchQuery] = useState('');
   const [filteredData, setFilteredData] = useState([]);
   const playQueue = useAppSelector((state) => state.playQueue);
@@ -95,8 +105,12 @@ const NowPlayingView = () => {
   const handleRowDoubleClick = (rowData: any) => {
     window.clearTimeout(timeout);
     timeout = null;
-    dispatch(clearSelected());
+    tracks[currentTrack]?.stop();
+    setCurrentTrack(rowData.index);
+    setCurrentlyPlaying(false);
+
     dispatch(setCurrentIndex(rowData));
+    dispatch(clearSelected());
   };
 
   if (!playQueue) {

src/components/player/Player.tsx

@@ -1,6 +1,11 @@
-import React, { createRef } from 'react';
-import AudioPlayer from 'react-h5-audio-player';
-import 'react-h5-audio-player/lib/styles.css';
+import React, {
+  useState,
+  createRef,
+  useEffect,
+  createContext,
+  useCallback,
+} from 'react';
+
 import { useAppSelector, useAppDispatch } from '../../redux/hooks';
 import {
   incrementCurrentIndex,
@@ -9,10 +14,22 @@ import {
   setIsLoaded,
 } from '../../redux/playQueueSlice';
 
-const Player = () => {
-  const playerRef = createRef<AudioPlayer>();
+export const PlayerContext = createContext<{
+  currentTrack?: any;
+  setCurrentTrack?: any;
+  tracks?: any;
+  setTracks?: any;
+  currentlyPlaying?: any;
+  setCurrentlyPlaying?: any;
+}>({});
+
+const Player = ({ children }: any) => {
+  const playerRef = createRef();
   const playQueue = useAppSelector((state: any) => state.playQueue);
   const dispatch = useAppDispatch();
+  const [currentTrack, setCurrentTrack] = useState(0);
+  const [tracks, setTracks] = useState<any[]>([]);
+  const [currentlyPlaying, setCurrentlyPlaying] = useState(false);
 
   const handleOnLoadStart = () => {
     dispatch(setIsLoading());
@@ -34,20 +51,89 @@ const Player = () => {
     dispatch(incrementCurrentIndex());
   };
 
+  /* useEffect(() => {
+    const trackList = [];
+    const howls = playQueue.entry.map((entry) => {
+      const howl = new Howl({
+        src: [entry.streamUrl],
+        html5: true,
+        autoplay: true,
+        onload: () => {
+          console.log('loaded');
+        },
+      });
+      trackList.push(howl);
+    });
+    setTracks(trackList);
+  }, [playQueue.entry]); */
+
+  // TODO: Cancel timeout when switching tracks, otherwise multiple tracks will play
+
+  const setFade = useCallback(
+    (index: any) => {
+      tracks[index].fade(0, 1, 8000);
+
+      console.log('duration', tracks[index].duration());
+      console.log(`tracks[index].seek()`, tracks[index].seek());
+      const fadeouttime = 8000;
+
+      console.log(
+        'fade at:',
+        ((tracks[index].duration() - tracks[index].seek()) * 1000 -
+          fadeouttime) /
+          1000
+      );
+
+      setTimeout(() => {
+        // Check that the song is still currently playing.
+        // This lets us know whether or not to continue the current playback
+        // fade/gapless logic if the user hasn't manually switched the song
+        if (tracks[index].playing()) {
+          console.log('STARTED FADING', tracks[index].seek(), tracks[index]);
+          console.log('Incremented index to:', index + 1);
+          dispatch(incrementCurrentIndex());
+          tracks[index].fade(1, 0, 8000);
+          setCurrentTrack(index + 1); // ! New
+
+          tracks[index + 1]._onplay = [];
+          tracks[index + 1].on('play', () => setFade(index + 1));
+          tracks[index + 1].play();
+        } else {
+          console.log(`TRACK INDEX ${index} STOPPED`);
+        }
+      }, (tracks[index].duration() - tracks[index].seek()) * 1000 - fadeouttime);
+    },
+    [dispatch, tracks]
+  );
+
+  useEffect(() => {
+    if (tracks.length >= 1 && !currentlyPlaying) {
+      console.log('EFFECT RUNNING', currentTrack);
+      setCurrentlyPlaying(true);
+
+      tracks[currentTrack]._onplay = [];
+      tracks[currentTrack].on('play', () => setFade(currentTrack));
+      tracks[currentTrack].play();
+    }
+  }, [currentTrack, currentlyPlaying, setFade, tracks]);
+
+  /* setInterval(() => {
+    console.log(tracks[playQueue.currentIndex]?.seek());
+  }, 5000); */
+
   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={{
+        tracks,
+        setTracks,
+        currentlyPlaying,
+        setCurrentlyPlaying,
+        currentTrack,
+        setCurrentTrack,
+      }}
+    >
+      {children}
+    </PlayerContext.Provider>
   );
 };
 

src/components/player/PlayerBar.tsx

@@ -0,0 +1,57 @@
+import React, { useContext } from 'react';
+import { Button, Slider } from 'rsuite';
+import { PlayerContext } from './Player';
+import { useAppSelector } from '../../redux/hooks';
+
+const PlayerBar = () => {
+  const { tracks, setTracks, currentTrack, setCurrentTrack } = useContext(
+    PlayerContext
+  );
+  const playQueue = useAppSelector((state) => state.playQueue);
+
+  return (
+    <div>
+      <div>
+        Current Track: {currentTrack + 1} ({currentTrack})
+      </div>
+      {/* <Slider
+        min={0}
+        max={Math.floor(playQueue.entry[playQueue.currentIndex]?.duration || 0)}
+        defaultValue={Math.floor(tracks[playQueue.currentIndex]?.seek())}
+      /> */}
+      <Button
+        onClick={() => console.log(tracks[playQueue.currentIndex].pause())}
+        size="lg"
+      >
+        pause1
+      </Button>
+      <Button
+        onClick={() => {
+          tracks[currentTrack].play();
+        }}
+        size="lg"
+      >
+        play
+      </Button>
+      <Button onClick={() => setCurrentTrack(currentTrack + 1)} size="lg">
+        next
+      </Button>
+      <Button onClick={() => setCurrentTrack(currentTrack - 1)} size="lg">
+        prev
+      </Button>
+      <Button onClick={() => console.log(tracks[currentTrack])} size="lg">
+        Info
+      </Button>
+      <Button
+        onClick={() =>
+          console.log(tracks[currentTrack]._onplay ? 'true' : 'false')
+        }
+        size="lg"
+      >
+        Has onplay?
+      </Button>
+    </div>
+  );
+};
+
+export default PlayerBar;