2024.2.1 : volumen save function

Author: Serphp

src/Context/PlayerContext.jsx

@@ -28,20 +28,22 @@ export const PlayerProvider = ({ children }) => {
     }
   });
 
+  //LOAD
   useEffect(() => {
     const savedData = localStorage.getItem('videoPlayer');
+    const savedVolume = localStorage.getItem('volume');
     if (savedData) {
       setVideoPlayer(JSON.parse(savedData));
+      setVolume(parseFloat(savedVolume));
     }
   }, []);
 
+  //SAVE
   useEffect(() => {
     localStorage.setItem('videoPlayer', JSON.stringify(videoPlayer));
-    const savedUrl = localStorage.getItem('url');
-    if (savedUrl) {
-      setUrl(savedUrl);
-    }
-  }, [videoPlayer]);
+    localStorage.setItem('volume', JSON.stringify(volume));
+    localStorage.setItem('url', url);
+  }, [videoPlayer, volume, url]);
 
   // useEffect(() => {
   //   const savedData = localStorage.getItem('videoPlayer');
@@ -94,25 +96,22 @@ export const PlayerProvider = ({ children }) => {
     }));
   };
 
-  // const handleVolumeChange = (value) => {
-  //   setVideoPlayer((prevPlayer) => ({
-  //     ...prevPlayer,
-  //     volume: value,
-  //   }));
-  //   setVolume(value);
-  // };
-  
   const handleVolumeChange = (event) => {
-    setVolume(event.target.value);
+    const newVolume = parseFloat(event.target.value);
+    setVolume(newVolume);
+    setVideoPlayer((prevPlayer) => ({
+      ...prevPlayer,
+      volume: newVolume // Guardar el volumen en el objeto videoPlayer
+    }));
   };
 
   const handleMute = () => {
     setVideoPlayer((prevPlayer) => ({
       ...prevPlayer,
       muted: !prevPlayer.muted,
     })
-   );
-   setMuted(!muted);
+  );
+  setMuted(!muted);
   };
 
   const handleSaveProgress = () => {
@@ -145,32 +144,6 @@ export const PlayerProvider = ({ children }) => {
   };
 
 
-  // const handleProgress = (progress) => {
-  //   setPlayed(progress.played);
-  // };
-
-  // const handleDuration = (duration) => {
-  //   setDuration(duration);
-  // };
-
-  // const handleVolumeChange = (value) => {
-  //   setVolume(value);
-  // };
-
-
-  // const handleSaveProgress = () => {
-  //   const currentTime = localStorage.getItem('time');
-
-  //   if (currentTime !== played.toString()) {
-  //     localStorage.setItem('time', played.toString());
-  //   }
-  // };
-
-  // const handleSaveUrl = (newUrl) => {
-  //   localStorage.setItem('url', newUrl);
-  //   setUrl(newUrl);
-  // };
-
   const handleInputChange = (event) => {
     const newUrl = event.target.value;
     handleSaveUrl(newUrl);

src/Music.jsx

@@ -1,5 +1,5 @@
 
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 //import YouTube from 'react-youtube';
 //import ReactPlayer from 'react-player/lazy';
 import ReactPlayer from 'react-player';
@@ -40,7 +40,12 @@ export function Music() {
       handleSaveProgress();
     };
 
-    console.log(videoPlayer.ShowPip);
+    const [videoPlayerx, setVideoPlayerx] = useState(() => {
+      const storedPlayer = JSON.parse(localStorage.getItem('videoPlayer'));
+      return storedPlayer || [];
+  });
+
+    console.log(videoPlayerx.ShowPip);
 
     return (
       <section className="probootstrap-cover probootstrap-scene-0">
@@ -104,7 +109,7 @@ export function Music() {
                 </div>
 
               <div class="slider">
-                <input type="range" min={0} max={1} step="any" value={volume} onChange={handleVolumeChange} />
+                <input type="range" min={0} max={1} step="any" value={videoPlayerx.volume} onChange={handleVolumeChange} />
                 <p id="rangeValue">100</p>   
               </div>