From 16a35fe7a540ef0e607bd221f426d171a63de188 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Mon, 16 Aug 2021 00:57:11 -0700 Subject: [PATCH] add beta gapless player --- package.json | 2 +- src/App.tsx | 48 +++++++--------------- src/components/player/Player.tsx | 64 +++++++++++++---------------- src/components/player/PlayerBar.tsx | 2 +- src/redux/playQueueSlice.ts | 14 +++++++ yarn.lock | 26 ++++-------- 6 files changed, 67 insertions(+), 89 deletions(-) diff --git a/package.json b/package.json index 7a1a06f..e7c5596 100644 --- 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", diff --git a/src/App.tsx b/src/App.tsx index 2811181..92883d6 100644 --- 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 ; } return ( - <> - {/* {playQueue.entry.length <= 1 && ( - - sonixd - - )} - - {playQueue.entry[playQueue.currentIndex] && ( - - - {playQueue.entry[playQueue.currentIndex].title} {' by '} - {playQueue.entry[playQueue.currentIndex].artist} — sonixd - - - )} */} + - - }> - - - - - - - - - - - - - + }> + + + + + + + + + + + + - + ); }; diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx index 2139794..5018467 100644 --- 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(); - const playQueue = useAppSelector((state: any) => state.playQueue); - const dispatch = useAppDispatch(); - - const handleOnLoadStart = () => { +import React, { useState, createContext } from 'react'; + +export const PlayerContext = createContext({}); + +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 ( - + + {children} + ); }; diff --git a/src/components/player/PlayerBar.tsx b/src/components/player/PlayerBar.tsx index fd79205..cd51c2c 100644 --- 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'; diff --git a/src/redux/playQueueSlice.ts b/src/redux/playQueueSlice.ts index 1d3e91c..91e25da 100644 --- 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) => { + 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, diff --git a/yarn.lock b/yarn.lock index 1046a23..a64f5df 100644 --- 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"