Browse Source

temp

master
jeffvli 3 years ago
parent
commit
ba6866ed94
  1. 29
      src/App.tsx
  2. 21
      src/components/card/Card.tsx
  3. 18
      src/components/player/NowPlayingView.tsx
  4. 122
      src/components/player/Player.tsx
  5. 57
      src/components/player/PlayerBar.tsx

29
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>
</>
);

21
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') {

18
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) {

122
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>
);
};

57
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;
Loading…
Cancel
Save