blago
/
tunio-desktop
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

change audio to react-h5-audio-player

master
jeffvli 3 years ago
parent
0af1214ae0
commit
83c902a4b3
4 changed files with 155 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 80
      src/components/player/Player.tsx
  3. 60
      src/redux/playQueueSlice.ts
  4. 40
      yarn.lock

2
package.json
View File

@ -268,11 +268,11 @@
"randomstring": "^1.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-h5-audio-player": "^3.7.1",
"react-helmet-async": "^1.0.9",
"react-query": "^3.19.1",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-sound": "^1.2.0",
"regenerator-runtime": "^0.13.5",
"rsuite": "^4.10.2",
"source-map-support": "^0.5.19",

80
src/components/player/Player.tsx
View File

@ -1,35 +1,67 @@
import React, { useState, useEffect } from 'react';
import Sound from 'react-sound';
import React, { createRef } from 'react';
import { Helmet } from 'react-helmet-async';
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 useAudio = (url) => {
const [audio] = useState(new Audio(url));
const [playing, setPlaying] = useState(false);
const Player = () => {
const playerRef = createRef<AudioPlayer>();
const playQueue = useAppSelector((state: any) => state.playQueue);
const dispatch = useAppDispatch();
const toggle = () => setPlaying(!playing);
const handleOnLoadStart = () => {
dispatch(setIsLoading());
};
const handleOnLoadedData = () => {
dispatch(setIsLoaded());
};
useEffect(() => {
playing ? audio.play() : audio.pause();
}, [playing]);
const handleOnClickNext = () => {
dispatch(incrementCurrentIndex());
console.log(playerRef?.current?.audio?.current);
};
useEffect(() => {
audio.addEventListener('ended', () => setPlaying(false));
return () => {
audio.removeEventListener('ended', () => setPlaying(false));
const handleOnClickPrevious = () => {
dispatch(decrementCurrentIndex());
};
}, []);
return [playing, toggle];
}; */
const handleOnEnded = () => {
dispatch(incrementCurrentIndex());
};
const Player = ({ url }) => {
return (
<div>
<Sound
url={url}
playStatus={Sound.status.PLAYING}
playFromPosition={0}
></Sound>
</div>
<>
{playQueue.entry[playQueue.currentIndex] && (
<Helmet>
<title>
{playQueue.entry[playQueue.currentIndex]?.title} — sonicD
</title>
</Helmet>
)}
<AudioPlayer
ref={playerRef}
src={playQueue.entry[playQueue.currentIndex]?.streamUrl}
autoPlay
showSkipControls
showFilledVolume
showJumpControls={false}
onPlay={() => console.log('onPlay')}
onPlaying={(e) => console.log(e)}
onClickNext={handleOnClickNext}
onClickPrevious={handleOnClickPrevious}
onEnded={handleOnEnded}
onLoadStart={handleOnLoadStart}
onLoadedData={handleOnLoadedData}
/>
</>
);
};

60
src/redux/playQueueSlice.ts
View File

@ -1,7 +1,6 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
type PlayQueueTypes = [
{
interface Entry {
id: string;
album: string;
albumId: string;
@ -26,24 +25,65 @@ type PlayQueueTypes = [
track: number;
type: string;
year: number;
}
];
}
interface PlayQueue {
currentIndex: number;
volume: number;
isLoading: boolean;
entry: Entry[];
}
const initialState: PlayQueueTypes[] = [];
const initialState: PlayQueue = {
currentIndex: 0,
volume: 0.5,
isLoading: false,
entry: [],
};
const playQueueSlice = createSlice({
name: 'nowPlaying',
initialState,
reducers: {
setPlayQueue: (state, action: PayloadAction<PlayQueueTypes>) => {
action.payload.map((entry: any) => state.push(entry));
incrementCurrentIndex: (state) => {
if (state.currentIndex <= state.entry.length) {
state.currentIndex += 1;
} else {
state.currentIndex = 0;
}
},
decrementCurrentIndex: (state) => {
if (state.currentIndex >= 0) {
state.currentIndex -= 1;
}
},
appendPlayQueue: (state, action: PayloadAction<PlayQueueTypes>) => {
action.payload.map((entry: any) => state.push(entry));
setCurrentIndex: (state, action: PayloadAction<PlayQueue>) => {
state.currentIndex = action.payload.currentIndex;
},
setPlayQueue: (state, action: PayloadAction<Entry[]>) => {
state.currentIndex = 0;
action.payload.map((entry: any) => state.entry.push(entry));
},
appendPlayQueue: (state, action: PayloadAction<Entry[]>) => {
action.payload.map((entry: any) => state.entry.push(entry));
},
clearPlayQueue: () => initialState,
setIsLoading: (state) => {
state.isLoading = true;
},
setIsLoaded: (state) => {
state.isLoading = false;
},
},
});
export const { setPlayQueue, clearPlayQueue } = playQueueSlice.actions;
export const {
incrementCurrentIndex,
decrementCurrentIndex,
setCurrentIndex,
setPlayQueue,
clearPlayQueue,
setIsLoading,
setIsLoaded,
} = playQueueSlice.actions;
export default playQueueSlice.reducer;

40
yarn.lock
View File

@ -1188,6 +1188,16 @@
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"
@ -3834,9 +3844,9 @@ core-js@^1.0.0:
integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
core-js@^3.6.5:
version "3.7.0"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.7.0.tgz#b0a761a02488577afbf97179e4681bf49568520f"
integrity sha512-NwS7fI5M5B85EwpWuIwJN4i/fbisQUwLwiSNUWeXlkAZ0sbBjLEvLvFLf1uzAUV66PcEPt4xCGCmOZSxVf3xzA==
version "3.16.0"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.0.tgz#1d46fb33720bc1fa7f90d20431f36a5540858986"
integrity sha512-5+5VxRFmSf97nM8Jr2wzOwLqRo6zphH2aX+7KsAUONObyzakDNq2G/bgbhinxB4PoV9L3aXQYhiDKyIKWd2c8g==
core-util-is@1.0.2, core-util-is@~1.0.0:
version "1.0.2"
@ -9847,7 +9857,7 @@ prop-types-exact@^1.2.0:
object.assign "^4.1.0"
reflect.ownkeys "^0.2.0"
prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -10043,6 +10053,15 @@ 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"
@ -10132,14 +10151,6 @@ react-shallow-renderer@^16.13.1:
object-assign "^4.1.1"
react-is "^16.12.0 || ^17.0.0"
react-sound@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/react-sound/-/react-sound-1.2.0.tgz#1bb7e1ec8494ecc57b03dbdecd1496b10f6541f2"
integrity sha512-pc2l8f7Oy3VePRRVesBwSSJ0mrCeD/lE5GVCT1RPdEQ7lgbZTDyWI8HokXHmS1v79aiLnd3WTRhfsBAY0NTb8g==
dependencies:
prop-types "^15.5.7"
soundmanager2 "^2.97.20170602"
react-test-renderer@^16.0.0-0:
version "16.14.0"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
@ -11163,11 +11174,6 @@ sockjs@0.3.20:
uuid "^3.4.0"
websocket-driver "0.6.5"
soundmanager2@^2.97.20170602:
version "2.97.20170602"
resolved "https://registry.yarnpkg.com/soundmanager2/-/soundmanager2-2.97.20170602.tgz#fe3bc731bfc4d54c1364e71980263e6816981879"
integrity sha512-2ee7ES9SJ++WkD7PGHMeT4QUuJr7uC3wacD6RoCDlKjdSp9lpEOaKm3lKWKld119DLILjS2l9U6xpXJN6U0KPQ==
source-list-map@^2.0.0, source-list-map@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"

Write Preview
Loading…
Cancel
Save