fix : audio state button bug & progressBar update issue and remove un…

…wanted context var
NayanUnni95 · Aug 20, 2024 · 42b1f78 · 42b1f78
1 parent 1dda055
commit 42b1f78
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 190 deletions.
diff --git a/src/components/MusicController/MusicController.jsx b/src/components/MusicController/MusicController.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useContext, useRef } from 'react';
+import React, { useContext } from 'react';
 import styles from './MusicController.module.css';
 import { MyContext } from '../../layout/AppLayout';
 import { AudioContext } from '../../context/AudioContext';
@@ -14,48 +14,26 @@ import { MdSkipPrevious, MdSkipNext } from 'react-icons/md';
 import CustomProgressbar from '../ProgressBar/CustomProgressbar';
 
 function MusicController() {
-  const { showPlayer, setShowPlayer, showRightPanel, setShowRightPanel } =
+  const { showRightPanel, togglePlayerWindow, toggleRightPanel } =
     useContext(MyContext);
   const {
-    playAudio,
-    pauseAudio,
+    playPause,
     muteAudio,
+    toggleRepeat,
+    toggleShuffle,
     isPlaying,
-    setIsPlaying,
     repeat,
-    setRepeat,
     shuffle,
-    setShuffle,
     mute,
-    setMute,
   } = useContext(AudioContext);
-  const playerRef = useRef();
-
-  const updatePlayer = () => {
-    setShowPlayer(!showPlayer);
-  };
-  const RightPanel = () => {
-    setShowRightPanel(!showRightPanel);
-  };
-  const playPause = () => {
-    if (isPlaying) pauseAudio(playerRef);
-    else playAudio(playerRef);
-  };
-  const muteUnmute = () => muteAudio(playerRef);
-
-  useEffect(() => {
-    return () => {
-      setIsPlaying(false); // change button state while page switch
-    };
-  }, []);
 
   return (
     <div className={styles.musicContainer}>
       <div className={styles.innerContainer}>
         <div className={styles.mainControlSection}>
           <div className={styles.basicBtn}>
             <div className={styles.shuffleBtn}>
-              <button onClick={() => setShuffle(!shuffle)}>
+              <button onClick={toggleShuffle}>
                 {shuffle ? (
                   <RxShuffle size={22} color="#1db954" />
                 ) : (
@@ -69,12 +47,7 @@ function MusicController() {
               </button>
             </div>
             <div className={styles.ctrlBtn}>
-              <button
-                onClick={() => {
-                  playPause();
-                  setIsPlaying(!isPlaying);
-                }}
-              >
+              <button onClick={playPause}>
                 {isPlaying ? <IoPause size={25} /> : <IoPlaySharp size={25} />}
               </button>
             </div>
@@ -84,7 +57,7 @@ function MusicController() {
               </button>
             </div>
             <div className={styles.repeatBtn}>
-              <button onClick={() => setRepeat(!repeat)}>
+              <button onClick={toggleRepeat}>
                 {repeat ? (
                   <TbRepeat size={22} color="#1db954" />
                 ) : (
@@ -99,7 +72,7 @@ function MusicController() {
         </div>
         <div className={styles.featureBtnSection}>
           <div className={styles.rightSidePanelBtn}>
-            <button onClick={() => RightPanel()}>
+            <button onClick={toggleRightPanel}>
               {showRightPanel ? (
                 <BiCaretRightSquare size={19} color="#1db954" />
               ) : (
@@ -118,12 +91,7 @@ function MusicController() {
             </button>
           </div>
           <div className={styles.volumeBtn}>
-            <button
-              onClick={() => {
-                muteUnmute();
-                setMute(!mute);
-              }}
-            >
+            <button onClick={muteAudio}>
               {mute ? (
                 <HiOutlineVolumeOff size={19} />
               ) : (
@@ -135,7 +103,7 @@ function MusicController() {
             <input type="range" />
           </div>
           <div className={styles.expandBtn}>
-            <button onClick={() => updatePlayer()}>
+            <button onClick={togglePlayerWindow}>
               <BsArrowsAngleExpand size={18} />
             </button>
           </div>

diff --git a/src/components/ProgressBar/CustomProgressbar.jsx b/src/components/ProgressBar/CustomProgressbar.jsx
@@ -1,45 +1,60 @@
-import React from 'react';
+import React, { useState, useEffect, useContext } from 'react';
+import { AudioContext } from '../../context/AudioContext';
 import styles from './CustomProgressbar.module.css';
 
 function CustomProgressbar() {
-  const seekTimeSec = 50;
-  const seekTimePercentage = 50;
-  const durationTimeSec = 200;
-  const loadedPercentage = 80;
+  const [loadedPer, setLoadedPer] = useState(0);
+  const [playedPer, setPlayedPer] = useState(0);
+  const { progress, duration } = useContext(AudioContext);
+
   const timeFormatter = (second) => {
+    if (!second || isNaN(second)) {
+      return '00:00';
+    }
     return new Date(second * 1000).toISOString().substring(14, 19);
   };
+  const FloatToPer = (second) => {
+    return Math.round(second * 100);
+  };
 
+  useEffect(() => {
+    setLoadedPer(FloatToPer(progress.loaded));
+    setPlayedPer(FloatToPer(progress.played));
+  }, [progress]);
   return (
     <div className={styles.progressContainer}>
       <div className={styles.progressLabel}>
-        <span>{timeFormatter(seekTimeSec)}</span>
+        <span>{timeFormatter(progress.playedSeconds)}</span>
       </div>
       <div className={styles.innerSection}>
         <input
           type="range"
           className={styles.loadedProgressBar}
           min={0}
-          value={loadedPercentage}
+          value={loadedPer}
+          defaultValue={0}
           max={100}
           style={{
-            background: `linear-gradient(to right, #232323d6 ${loadedPercentage}%, #4d4d4d ${loadedPercentage}%)`,
+            background: `linear-gradient(to right, #232323d6 ${loadedPer}%, #4d4d4d ${loadedPer}%)`,
           }}
+          readOnly
           disabled
         />
         <input
           type="range"
           min={0}
-          value={seekTimePercentage}
+          value={playedPer}
+          defaultValue={0}
           max={100}
           className={styles.bar}
           style={{
-            background: `linear-gradient(to right, #ffffff ${seekTimePercentage}%, #ffffff00 ${seekTimePercentage}%`,
+            background: `linear-gradient(to right, #ffffff ${playedPer}%, #ffffff00 ${playedPer}%`,
           }}
+          readOnly
         />
       </div>
       <div className={styles.progressLabel}>
-        <span>{timeFormatter(durationTimeSec)}</span>
+        <span>{timeFormatter(duration)}</span>
       </div>
     </div>
   );

diff --git a/src/context/AudioContext.jsx b/src/context/AudioContext.jsx
@@ -1,4 +1,4 @@
-import React, { useState, createContext, useRef } from 'react';
+import React, { useState, createContext } from 'react';
 import AudioPlayer from 'react-player';
 
 export const AudioContext = createContext();
@@ -8,20 +8,13 @@ function AudioProvider({ children }) {
   const [repeat, setRepeat] = useState(false);
   const [shuffle, setShuffle] = useState(false);
   const [mute, setMute] = useState(false);
-  const [showPlayer, setShowPlayer] = useState(false);
-  const [showRightPanel, setShowRightPanel] = useState(false);
-  const playerRef = useRef();
+  const [progress, setProgress] = useState({});
+  const [duration, setDuration] = useState(0);
 
-  const playAudio = () => {
-    playerRef.current.audio.current.play();
-  };
-  const pauseAudio = () => {
-    playerRef.current.audio.current.pause();
-  };
-  const muteAudio = () => {
-    playerRef.current.audio.current.muted =
-      !playerRef.current.audio.current.muted;
-  };
+  const playPause = () => setIsPlaying(!isPlaying);
+  const muteAudio = () => setMute(!mute);
+  const toggleRepeat = () => setRepeat(!repeat);
+  const toggleShuffle = () => setShuffle(!shuffle);
 
   // Reference data
   const TrackData = {
@@ -73,26 +66,25 @@ function AudioProvider({ children }) {
     <AudioContext.Provider
       value={{
         isPlaying,
-        setIsPlaying,
         repeat,
-        setRepeat,
         shuffle,
-        setShuffle,
         mute,
-        setMute,
-        showPlayer,
-        setShowPlayer,
-        showRightPanel,
-        setShowRightPanel,
-        playAudio,
-        pauseAudio,
         muteAudio,
+        playPause,
+        toggleRepeat,
+        toggleShuffle,
         TrackData,
+        progress,
+        duration,
       }}
     >
       <AudioPlayer
-        ref={playerRef}
         url={TrackData.downloadUrl[2].url}
+        playing={isPlaying}
+        muted={mute}
+        loop={repeat}
+        onProgress={setProgress}
+        onDuration={setDuration}
         style={{ display: 'none' }}
       />
       {children}

diff --git a/src/context/ControllerContext.jsx b/src/context/ControllerContext.jsx
diff --git a/src/layout/AppLayout.jsx b/src/layout/AppLayout.jsx
@@ -17,6 +17,9 @@ function AppLayout() {
   const [showPlayer, setShowPlayer] = useState(false);
   const [showRightPanel, setShowRightPanel] = useState(false);
 
+  const togglePlayerWindow = () => setShowPlayer(!showPlayer);
+  const toggleRightPanel = () => setShowRightPanel(!showRightPanel);
+
   useEffect(() => {
     if (window.location.hash) {
       const expires_in = Date.now();
@@ -40,6 +43,8 @@ function AppLayout() {
           setShowPlayer,
           showRightPanel,
           setShowRightPanel,
+          togglePlayerWindow,
+          toggleRightPanel,
         }}
       >
         <AudioContext>