l-min-components 1.0.1149 → 1.0.1151

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.1149",
+  "version": "1.0.1151",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/useAudioPlayer/index.jsx

@@ -1,121 +1,38 @@
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import Hls from "hls.js";
 import { OutletContext } from "../AppMainLayout";
 
 const useAudioPlayer = ({ src, streamSrc }) => {
-  const audioRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isBuffering, setIsBuffering] = useState(false);
   const [isReady, setIsReady] = useState(false);
   const [error, setError] = useState(null);
   const [progress, setProgress] = useState({});
 
+  const audioRef = useRef(null);
+
   const { accessToken, generalData } = useContext(OutletContext);
 
   const accountId = generalData?.selectedAccount?.id;
 
-  useEffect(() => {
-    if (!audioRef.current) return;
-    let hls;
-
-    if (Hls?.isSupported() && streamSrc && !src) {
-      hls = new Hls({
-        xhrSetup: function (xhr, url) {
-          const modifiedURL = `${url}?_account=${accountId}`;
-          xhr.open("GET", modifiedURL, true);
-          xhr.setRequestHeader("Authorization", `Bearer ${accessToken}`);
-        },
-        lowLatencyMode: true,
-      });
-
-      hls.loadSource(streamSrc);
-      hls?.attachMedia(audioRef.current);
-
-      hls.on(Hls?.Events?.MANIFEST_PARSED, () => {
-        setIsReady(true);
-        setError(null);
-      });
-      hls.on(Hls?.Events?.BUFFER_STALLED, () => {
-        setIsBuffering(true);
-      });
-
-      hls.on(Hls?.Events?.BUFFER_APPENDED, () => {
-        setIsBuffering(false);
-      });
-
-      hls.on(Hls.Events.ERROR, (event, data) => {
-        setError(data);
-      });
-    } else if (
-      !src &&
-      audioRef.current.canPlayType("application/vnd.apple.mpegurl")
-    ) {
-      audioRef.current.src = streamSrc;
-      audioRef.current.addEventListener("loadedmetadata", () => {
-        setIsReady(true);
-      });
-    } else {
-      if (audioRef.current && src) {
-        audioRef.current.src = src;
-        audioRef.current.load();
-        setIsReady(true);
-      }
-    }
-    const handleEnded = () => setIsPlaying(false);
-
-    const handlePlaying = () => {
-      setIsPlaying(true);
-    };
-    const handlePause = () => {
-      setIsPlaying(false);
-    };
-
-    audioRef.current.addEventListener("ended", handleEnded);
-    audioRef.current.addEventListener("playing", handlePlaying);
-    audioRef.current.addEventListener("pause", handlePause);
-
-    const handleProgress = () => {
-      if (audioRef.current) {
-        const currentTime = audioRef.current.currentTime;
-        const duration = audioRef.current.duration;
-
-        setProgress({ currentTime, duration });
-      }
-    };
-    audioRef.current.addEventListener("timeupdate", handleProgress);
-    audioRef.current.addEventListener("loadedmetadata", handleProgress);
-    audioRef.current.addEventListener("waiting", () => setIsBuffering(true));
-    audioRef.current.addEventListener("canplay", () => setIsBuffering(false));
-
-    return () => {
-      if (hls) {
-        hls.destroy();
-      }
-      if (audioRef.current) {
-        audioRef.current.removeEventListener("ended", handleEnded);
-        audioRef.current.removeEventListener("playing", handlePlaying);
-        audioRef.current.removeEventListener("pause", handlePause);
-        audioRef.current.removeEventListener("timeupdate", handleProgress);
-        audioRef.current.removeEventListener("loadedmetadata", handleProgress);
-        audioRef.current.removeEventListener("waiting", () =>
-          setIsBuffering(true)
-        );
-        audioRef.current.removeEventListener("canplay", () =>
-          setIsBuffering(false)
-        );
-      }
-    };
-  }, [src, streamSrc, accessToken, accountId]);
-
   const play = useCallback(() => {
     if (audioRef.current) {
       audioRef.current.play();
+      setIsPlaying(true);
     }
   }, []);
 
   const pause = useCallback(() => {
     if (audioRef.current) {
       audioRef.current.pause();
+      setIsPlaying(false);
     }
   }, []);
 
@@ -123,9 +40,87 @@ const useAudioPlayer = ({ src, streamSrc }) => {
     if (audioRef.current) {
       audioRef.current.pause();
       audioRef.current.currentTime = 0;
+      setIsPlaying(false);
     }
   }, []);
 
+  const url = useMemo(() => src || streamSrc, [src, streamSrc]);
+
+  useEffect(() => {
+    let hls;
+
+    if (audioRef.current && accountId) {
+      if (Hls?.isSupported() && streamSrc && !src) {
+        hls = new Hls({
+          xhrSetup: function (xhr, url) {
+            const modifiedURL = `${url}?_account=${accountId}`;
+            xhr.open("GET", modifiedURL, true);
+            xhr.setRequestHeader("Authorization", `Bearer ${accessToken}`);
+          },
+          lowLatencyMode: true,
+        });
+
+        hls.loadSource(url);
+        hls?.attachMedia(audioRef.current);
+
+        hls.on(Hls?.Events?.MANIFEST_PARSED, () => {
+          setIsReady(true);
+          setError(null);
+        });
+        hls.on(Hls?.Events?.BUFFER_STALLED, () => {
+          setIsBuffering(true);
+        });
+
+        hls.on(Hls?.Events?.BUFFER_APPENDED, () => {
+          setIsBuffering(false);
+        });
+
+        hls.on(Hls.Events.ERROR, (event, data) => {
+          setError(data);
+        });
+      } else if (
+        !src &&
+        audioRef.current.canPlayType("application/vnd.apple.mpegurl")
+      ) {
+        audioRef.current.src = url;
+        audioRef.current.addEventListener("loadedmetadata", () => {
+          setIsReady(true);
+        });
+      } else {
+        if (audioRef.current && src) {
+          audioRef.current.src = src;
+          audioRef.current.load();
+          setIsReady(true);
+        }
+      }
+      const handleEnded = () => setIsPlaying(false);
+
+      audioRef.current.addEventListener("ended", handleEnded);
+
+      const handleProgress = () => {
+        if (audioRef.current) {
+          const currentTime = audioRef.current.currentTime;
+          const duration = audioRef.current.duration;
+
+          setProgress({ currentTime, duration });
+        }
+      };
+      audioRef.current?.addEventListener("timeupdate", handleProgress);
+      audioRef.current?.addEventListener("loadedmetadata", handleProgress);
+      audioRef.current?.addEventListener("waiting", () => setIsBuffering(true));
+      audioRef.current?.addEventListener("canplay", () =>
+        setIsBuffering(false)
+      );
+    }
+    return () => {
+      if (hls) {
+        hls.destroy();
+      }
+
+      setIsReady(false);
+    };
+  }, [url, accessToken, accountId, audioRef.current]);
+
   return {
     stop,
     audioRef,