diff --git a/src/components/sticky-components/audio-controls.tsx b/src/components/sticky-components/audio-controls.tsx
new file mode 100644
index 0000000..e633c0d
--- /dev/null
+++ b/src/components/sticky-components/audio-controls.tsx
@@ -0,0 +1,151 @@
+import { useEffect, useState } from "react";
+import { FaPlay, FaPause } from "react-icons/fa6"; // Fixed import for FaPause
+import Setting from "../../../public/assets/images/GraySetting.svg";
+import Close from "../../../public/assets/images/Group 1000005170.svg";
+import timeLine from "../../../public/assets/images/Ellipse 441.svg";
+import Image from "next/image";
+import { useUI } from "../context/ui.context";
+import { useAudio } from "../context/audio-conext";
+import { IoPersonSharp } from "react-icons/io5";
+
+const AudioControls = () => {
+ const { openModal, closeAudio } = useUI();
+ const { audioRef, partRefs, audio, lastPart } = useAudio();
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [currentTime, setCurrentTime] = useState(0);
+ const [duration, setDuration] = useState(1); // Default duration to 1 to prevent division by zero
+
+ const play = () => {
+ if (audioRef.current && audio) {
+ if (lastPart && audio.audio_sync_data.length > 0) {
+ const selectedPart = audio.audio_sync_data.find(
+ (item) => item.id === lastPart.id
+ );
+
+ if (selectedPart) {
+ // Set the audio current time to the start time of the lastPart
+ audioRef.current.currentTime = selectedPart.duration[0][0];
+ }
+ }
+ audioRef.current
+ .play()
+ .then(() => {
+ setIsPlaying(true);
+ })
+ .catch((error) => {
+ console.error("Error playing audio:", error);
+ });
+ }
+ };
+
+ const pause = () => {
+ if (audioRef.current) {
+ audioRef.current.pause();
+ setIsPlaying(false);
+ }
+ };
+
+ const checkPlayingState = () => {
+ if (audioRef.current) {
+ if (!audioRef.current.paused) {
+ setIsPlaying(true);
+ } else {
+ setIsPlaying(false);
+ }
+ }
+ };
+
+ const onTimeUpdate = () => {
+ if (audioRef.current) {
+ setCurrentTime(audioRef.current.currentTime);
+ setDuration(audioRef.current.duration);
+ }
+ };
+
+ function convertTo180(numerator, denominator) {
+ if (!numerator || !denominator) return -20; // Safeguard for invalid inputs
+ const newNumerator = (numerator * 200) / denominator;
+ return newNumerator; // Adjust to start from -20 degrees
+ }
+
+ useEffect(() => {
+ if (audioRef.current) {
+ audioRef.current.addEventListener("timeupdate", onTimeUpdate);
+
+ // Cleanup event listener on component unmount
+ return () => {
+ audioRef.current.removeEventListener("timeupdate", onTimeUpdate);
+ };
+ }
+ }, [audioRef]);
+
+ useEffect(() => {
+ checkPlayingState();
+ }, [audio, lastPart]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
{audio?.reciter?.name}
+
+ {audio?.reciter?.avatar?.sm ? (
+
+ ) : (
+
+ )}
+
{audio?.reciter?.name}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AudioControls;
diff --git a/src/components/ui/download-app.tsx b/src/components/sticky-components/download-app.tsx
similarity index 77%
rename from src/components/ui/download-app.tsx
rename to src/components/sticky-components/download-app.tsx
index 30df48f..8847d37 100644
--- a/src/components/ui/download-app.tsx
+++ b/src/components/sticky-components/download-app.tsx
@@ -5,15 +5,13 @@ import Image from "next/image";
import { useUI } from "../context/ui.context";
const DownloadApp: React.FC = () => {
- const { closeDownload, displayDownload } = useUI();
+ const { closeDownload, displayDownload , displayAudio } = useUI();
console.log(displayDownload);
return (