change audio to react-h5-audio-player

3 years ago · 83c902a4b3
4 changed files with 155 additions and 77 deletions
--- a/package.json
+++ b/package.json
@ -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",
--- a/src/components/player/Player.tsx
+++ b/src/components/player/Player.tsx
@ -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());
+  };

-  useEffect(() => {
-    playing ? audio.play() : audio.pause();
-  }, [playing]);
+  const handleOnLoadedData = () => {
+    dispatch(setIsLoaded());
+  };

-  useEffect(() => {
-    audio.addEventListener('ended', () => setPlaying(false));
-    return () => {
-      audio.removeEventListener('ended', () => setPlaying(false));
-    };
-  }, []);
+  const handleOnClickNext = () => {
+    dispatch(incrementCurrentIndex());
+    console.log(playerRef?.current?.audio?.current);
+  };

-  return [playing, toggle];
-}; */
+  const handleOnClickPrevious = () => {
+    dispatch(decrementCurrentIndex());
+  };
+
+  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}
+      />
+    </>
  );
 };

--- a/src/redux/playQueueSlice.ts
+++ b/src/redux/playQueueSlice.ts
@ -1,49 +1,89 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';

-type PlayQueueTypes = [
-  {
-    id: string;
-    album: string;
-    albumId: string;
-    artist: string;
-    bitRate: number;
-    contentType: string;
-    coverArt: string;
-    created: string;
-    duration: string;
-    genre: string;
-    index: number;
-    isDir: boolean;
-    isVideo: boolean;
-    parent: string;
-    path: string;
-    playCount: number;
-    size: number;
-    starred?: string;
-    streamUrl: string;
-    suffix: string;
-    title: string;
-    track: number;
-    type: string;
-    year: number;
-  }
-];
+interface Entry {
+  id: string;
+  album: string;
+  albumId: string;
+  artist: string;
+  bitRate: number;
+  contentType: string;
+  coverArt: string;
+  created: string;
+  duration: string;
+  genre: string;
+  index: number;
+  isDir: boolean;
+  isVideo: boolean;
+  parent: string;
+  path: string;
+  playCount: number;
+  size: number;
+  starred?: string;
+  streamUrl: string;
+  suffix: string;
+  title: string;
+  track: number;
+  type: string;
+  year: number;
+}

-const initialState: PlayQueueTypes[] = [];
+interface PlayQueue {
+  currentIndex: number;
+  volume: number;
+  isLoading: boolean;
+  entry: Entry[];
+}
+
+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;
+      }
+    },
+    setCurrentIndex: (state, action: PayloadAction<PlayQueue>) => {
+      state.currentIndex = action.payload.currentIndex;
    },
-    appendPlayQueue: (state, action: PayloadAction<PlayQueueTypes>) => {
-      action.payload.map((entry: any) => state.push(entry));
+    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;
--- a/yarn.lock
+++ b/yarn.lock
@ -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"