l-min-components 1.0.1128 → 1.0.1135

package/package.json

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

package/src/components/index.js

@@ -54,3 +54,5 @@ export { default as useTranslation } from "../hooks/useTranslation";
 export { default as ImageComponent } from "./ImageComponent";
 export { default as DeveloperBanner } from "./banner/developerBanner";
 export { default as VideoPlayer } from "./video-player";
+export { default as useAudioPlayer } from "./useAudioPlayer";
+export { default as AudioWaveComponent } from "./useAudioPlayer/audioWave";

package/src/components/useAudioPlayer/audioWave.jsx

@@ -0,0 +1,153 @@
+import React from "react";
+import styled from "styled-components";
+
+/**
+ *
+ * @param {{type: 'extra-small' | 'small' | 'normal', count: number, lineWidth:string, playState: 'play' | 'paused' | 'stop' , color:string
+ * }} prpos
+ */
+const AudioWaveComponent = ({
+  type,
+  count = 20,
+  lineWidth,
+  playState = "stop",
+  color,
+}) => {
+  const getLine = () => {
+    const list = [];
+
+    for (let index = 0; index < count; index++) {
+      const value = index + 1;
+      if (value % 7 === 0) list.push("wave-delay-1");
+      else if (value % 6 === 0) list.push("wave-delay-5");
+      else if (value % 5 === 0) list.push("wave-delay-3");
+      else if (value % 4 === 0) list.push("wave-delay-2");
+      else if (value % 3 === 0) list.push("wave-delay-4");
+      else if (value % 2 === 0) list.push("wave-delay-3");
+      else list.push("wave-delay-2");
+    }
+    return list;
+  };
+
+  return (
+    <Container className={type}>
+      {getLine()?.map((i, idx) => {
+        return (
+          <li
+            key={idx}
+            style={
+              lineWidth || color
+                ? { width: lineWidth, background: color }
+                : null
+            }
+            className={`wave ${i} ${playState}`}
+          ></li>
+        );
+      })}
+    </Container>
+  );
+};
+
+export default AudioWaveComponent;
+
+const Container = styled.ul`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 52px;
+  width: fit-content;
+
+  &.extra-small {
+    height: 20px;
+    gap: 5px;
+    .wave {
+      height: 8px;
+      width: 2.5px;
+      animation-name: ex_smail_pulse;
+    }
+  }
+  &.small {
+    height: 34px;
+    gap: 8px;
+    .wave {
+      width: 3px;
+      animation-name: smail_pulse;
+    }
+  }
+
+  .wave {
+    fill: #231f20;
+    animation-name: pulse;
+    animation-duration: 1.2s;
+    animation-iteration-count: infinite;
+    width: 5px;
+    height: 16px;
+    flex-shrink: 0;
+    overflow: hidden;
+    y: 11px;
+    border-radius: 100px;
+    background: linear-gradient(180deg, #e5ad0e 0%, #fecf4c 100%);
+
+    &.play {
+      animation-play-state: running;
+    }
+    &.paused {
+      animation-play-state: paused;
+    }
+    &.stop {
+      animation-name: none;
+    }
+  }
+
+  .wave-delay-5 {
+    animation-delay: 1s;
+  }
+  .wave-delay-4 {
+    animation-delay: 0.8s;
+  }
+  .wave-delay-3 {
+    animation-delay: 0.6s;
+  }
+  .wave-delay-2 {
+    animation-delay: 0.4s;
+  }
+  .wave-delay-1 {
+    animation-delay: 0.2s;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      height: 16px;
+      y: 11px;
+    }
+    50% {
+      height: 52px;
+      y: 0px;
+    }
+  }
+
+  @keyframes smail_pulse {
+    0%,
+    100% {
+      height: 16px;
+      y: 11px;
+    }
+    50% {
+      height: 34px;
+      y: 0px;
+    }
+  }
+  @keyframes ex_smail_pulse {
+    0%,
+    100% {
+      height: 8px;
+      y: 11px;
+    }
+    50% {
+      height: 20px;
+      y: 0px;
+    }
+  }
+`;

package/src/components/useAudioPlayer/index.jsx

@@ -0,0 +1,124 @@
+import { useContext, useEffect, 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 { accessToken, generalData } = useContext(OutletContext);
+
+  const accountId = generalData?.selectedAccount?.id;
+
+  useEffect(() => {
+    const audio = audioRef?.current;
+    if (!audio) return;
+    let hls;
+
+    if (src) {
+      audio.src = src;
+    } else if (Hls?.isSupported() && streamSrc) {
+      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(audio);
+
+      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 && audio.canPlayType("application/vnd.apple.mpegurl")) {
+      audio.src = streamSrc;
+      audio.addEventListener("loadedmetadata", () => {
+        setIsReady(true);
+      });
+    } else {
+      if (audio && src) {
+        audio.src = src;
+        audio.load();
+        setIsReady(true);
+      }
+    }
+    const handleEnded = () => setIsPlaying(false);
+
+    const handlePlaying = () => {
+      setIsPlaying(true);
+    };
+    const handlePause = () => {
+      setIsPlaying(false);
+    };
+
+    audio.addEventListener("ended", handleEnded);
+    audio.addEventListener("playing", handlePlaying);
+    audio.addEventListener("pause", handlePause);
+
+    const handleProgress = () => {
+      if (audio) {
+        const currentTime = audio.currentTime;
+        const duration = audio.duration;
+
+        setProgress({ currentTime, duration });
+      }
+    };
+    audio.addEventListener("timeupdate", handleProgress);
+
+    return () => {
+      if (hls) {
+        hls.destroy();
+      }
+    };
+  }, [src, streamSrc, accessToken, accountId]);
+
+  const play = () => {
+    if (audioRef.current) {
+      audioRef.current.play();
+    }
+  };
+
+  const pause = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+    }
+  };
+  const stop = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+    }
+  };
+  return {
+    stop,
+    audioRef,
+    play,
+    pause,
+    isPlaying,
+    isBuffering,
+    isReady,
+    error,
+    progress,
+  };
+};
+
+export default useAudioPlayer;