513 lines
17 KiB
TypeScript
513 lines
17 KiB
TypeScript
"use client";
|
|
import { useState, useEffect, useRef } from "react";
|
|
import { Calendar, Eye } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import Link from "next/link";
|
|
import { getDetail } from "@/service/landing/landing";
|
|
import { BarWave } from "react-cssfx-loading";
|
|
import WaveSurfer from "wavesurfer.js";
|
|
import { getArticleDetail } from "@/service/content/content";
|
|
|
|
export default function AudioDetail({ id }: { id: number }) {
|
|
const [data, setData] = useState<any>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [audioLoaded, setAudioLoaded] = useState(false);
|
|
const [playing, setPlaying] = useState(false);
|
|
const [volume, setVolume] = useState(0.5);
|
|
const waveformRef = useRef<HTMLDivElement>(null);
|
|
const wavesurfer = useRef<any>(null);
|
|
const [selectedAudio, setSelectedAudio] = useState(0);
|
|
|
|
// Ambil data audio dari API lama
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
const res = await getArticleDetail(id);
|
|
const detail = res?.data?.data;
|
|
if (detail) setData(detail);
|
|
setLoading(false);
|
|
};
|
|
fetchData();
|
|
}, [id]);
|
|
|
|
// Inisialisasi WaveSurfer
|
|
useEffect(() => {
|
|
if (!data?.files?.[selectedAudio]?.url) return;
|
|
|
|
// Hancurkan instance sebelumnya jika ada
|
|
if (wavesurfer.current) wavesurfer.current.destroy();
|
|
|
|
const url = data.files[selectedAudio].url;
|
|
|
|
const options = {
|
|
container: waveformRef.current!,
|
|
waveColor: "#E0E0E0",
|
|
progressColor: "#FFC831",
|
|
cursorColor: "#000",
|
|
barWidth: 2,
|
|
barRadius: 2,
|
|
responsive: true,
|
|
height: 80,
|
|
normalize: true,
|
|
partialRender: true,
|
|
};
|
|
|
|
const ws = WaveSurfer.create(options);
|
|
wavesurfer.current = ws;
|
|
ws.load(url);
|
|
|
|
ws.on("ready", () => {
|
|
setAudioLoaded(true);
|
|
ws.setVolume(volume);
|
|
});
|
|
|
|
ws.on("finish", () => {
|
|
setPlaying(false);
|
|
});
|
|
|
|
return () => {
|
|
ws.destroy();
|
|
};
|
|
}, [data?.files, selectedAudio]);
|
|
|
|
const handlePlayPause = () => {
|
|
if (!wavesurfer.current) return;
|
|
wavesurfer.current.playPause();
|
|
setPlaying(!playing);
|
|
};
|
|
|
|
const handleVolumeChange = (e: any) => {
|
|
const vol = parseFloat(e.target.value);
|
|
setVolume(vol);
|
|
wavesurfer.current?.setVolume(vol);
|
|
};
|
|
|
|
if (loading) return <p className="p-6">Memuat audio...</p>;
|
|
if (!data) return <p className="p-6">Data tidak ditemukan</p>;
|
|
|
|
return (
|
|
<div className="max-w-5xl mx-auto px-4 py-6 space-y-6">
|
|
{/* 🎵 Player */}
|
|
<div className="relative flex flex-col items-start">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={handlePlayPause}
|
|
className="w-12 h-12 bg-yellow-500 rounded-full flex justify-center items-center text-white text-xl hover:bg-yellow-600"
|
|
>
|
|
{playing ? "❚❚" : "▶"}
|
|
</button>
|
|
|
|
{/* Loading sebelum waveform siap */}
|
|
{!audioLoaded && (
|
|
<BarWave
|
|
color="#ffc831"
|
|
width="60px"
|
|
height="25px"
|
|
duration="2s"
|
|
className="ml-5"
|
|
/>
|
|
)}
|
|
|
|
{/* Waveform */}
|
|
<div ref={waveformRef} className="w-[300px] sm:w-[600px] ml-4"></div>
|
|
</div>
|
|
|
|
{/* Volume control */}
|
|
{audioLoaded && (
|
|
<div className="flex items-center gap-2 mt-2">
|
|
<span>🔊</span>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
value={volume}
|
|
onChange={handleVolumeChange}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 🔸 Daftar File Audio */}
|
|
<div className="py-4 flex flex-row gap-3 flex-wrap">
|
|
{data?.files?.map((file: any, index: number) => (
|
|
<button
|
|
key={file?.id}
|
|
onClick={() => setSelectedAudio(index)}
|
|
className={`px-4 py-2 rounded-md border cursor-pointer hover:bg-gray-100 ${
|
|
selectedAudio === index ? "border-yellow-600 bg-yellow-50" : ""
|
|
}`}
|
|
>
|
|
🎧 {file?.fileName || `Audio ${index + 1}`}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* 🗓️ Informasi Artikel */}
|
|
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
|
<span className="font-semibold text-black border-r-2 pr-2 border-black">
|
|
by {data?.uploadedBy?.userLevel?.name || "MABES POLRI"}
|
|
</span>
|
|
<span className="flex items-center gap-1 text-black">
|
|
<Calendar className="w-4 h-4" />
|
|
{new Date(data.createdAt)
|
|
.toLocaleString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: false,
|
|
timeZone: "Asia/Jakarta",
|
|
})
|
|
.replace(".", ":")}{" "}
|
|
WIB
|
|
</span>
|
|
<span className="flex items-center gap-1 border-r-2 pr-2 border-black text-black">
|
|
<Eye className="w-4 h-4" />
|
|
{data.clickCount || 0}
|
|
</span>
|
|
<span className="text-black">Creator: {data.creatorName}</span>
|
|
</div>
|
|
|
|
{/* 📝 Deskripsi */}
|
|
<div className="mt-4">
|
|
<h1 className="text-xl font-bold">{data.title}</h1>
|
|
<div
|
|
className="text-base text-gray-700 leading-relaxed space-y-3 mt-2"
|
|
dangerouslySetInnerHTML={{ __html: data.htmlDescription }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// "use client";
|
|
// import Image from "next/image";
|
|
// import { Calendar, Clock, Eye } from "lucide-react";
|
|
// import { Button } from "@/components/ui/button";
|
|
// import Link from "next/link";
|
|
// import { useState, useEffect } from "react";
|
|
// import {
|
|
// FaFacebookF,
|
|
// FaTiktok,
|
|
// FaYoutube,
|
|
// FaWhatsapp,
|
|
// FaInstagram,
|
|
// FaTwitter,
|
|
// FaCheck,
|
|
// FaLink,
|
|
// FaShareAlt,
|
|
// } from "react-icons/fa";
|
|
// import { getDetail, getArticleDetail } from "@/service/landing/landing";
|
|
|
|
// export default function AudioDetail({ id }: { id: string }) {
|
|
// const [copied, setCopied] = useState(false);
|
|
// const [showShareMenu, setShowShareMenu] = useState(false);
|
|
// const [data, setData] = useState<any>(null);
|
|
// const [loading, setLoading] = useState(true);
|
|
// const [selectedDoc, setSelectedDoc] = useState(0);
|
|
// const [isLoading, setIsLoading] = useState<any>(true);
|
|
|
|
// useEffect(() => {
|
|
// const timer = setTimeout(() => {
|
|
// setIsLoading(false);
|
|
// }, 3000);
|
|
|
|
// return () => clearTimeout(timer);
|
|
// }, []);
|
|
|
|
// const handleCopyLink = async () => {
|
|
// try {
|
|
// await navigator.clipboard.writeText(window.location.href);
|
|
// setCopied(true);
|
|
// setTimeout(() => setCopied(false), 2000);
|
|
// } catch (err) {
|
|
// console.error("Failed to copy: ", err);
|
|
// }
|
|
// };
|
|
|
|
// const SocialItem = ({
|
|
// icon,
|
|
// label,
|
|
// }: {
|
|
// icon: React.ReactNode;
|
|
// label: string;
|
|
// }) => (
|
|
// <div className="flex items-center gap-3 cursor-pointer hover:opacity-80">
|
|
// <div className="bg-[#C6A455] p-2 rounded-full text-white">{icon}</div>
|
|
// <span className="text-sm">{label}</span>
|
|
// </div>
|
|
// );
|
|
|
|
// useEffect(() => {
|
|
// const fetchDetail = async () => {
|
|
// try {
|
|
// setLoading(true);
|
|
|
|
// // Try new Articles API first
|
|
// const response = await getArticleDetail(id);
|
|
// console.log("Article Detail API response:", response);
|
|
|
|
// if (response?.error) {
|
|
// console.error("Articles API failed, falling back to old API");
|
|
// // Fallback to old API
|
|
// const fallbackResponse = await getDetail(id);
|
|
// setData(fallbackResponse?.data?.data);
|
|
// console.log(
|
|
// "doc",
|
|
// fallbackResponse?.data?.data.files[selectedDoc]?.secondaryUrl
|
|
// );
|
|
// return;
|
|
// }
|
|
|
|
// // Handle new API response structure
|
|
// const articleData = response?.data?.data;
|
|
// if (articleData) {
|
|
// // Transform article data to match old structure for backward compatibility
|
|
// const transformedData = {
|
|
// id: articleData.id,
|
|
// title: articleData.title,
|
|
// description: articleData.description,
|
|
// createdAt: articleData.createdAt,
|
|
// clickCount: articleData.viewCount,
|
|
// creatorGroupLevelName: articleData.createdByName || "Unknown",
|
|
// uploadedBy: {
|
|
// publisher: articleData.createdByName || "MABES POLRI"
|
|
// },
|
|
// files: articleData.files?.map((file: any) => ({
|
|
// id: file.id,
|
|
// url: file.file_url,
|
|
// fileName: file.file_name,
|
|
// filePath: file.file_path,
|
|
// fileThumbnail: file.file_thumbnail,
|
|
// fileAlt: file.file_alt,
|
|
// widthPixel: file.width_pixel,
|
|
// heightPixel: file.height_pixel,
|
|
// size: file.size,
|
|
// downloadCount: file.download_count,
|
|
// createdAt: file.created_at,
|
|
// updatedAt: file.updated_at,
|
|
// secondaryUrl: file.file_url, // For audio files, use same URL
|
|
// ...file
|
|
// })) || [],
|
|
// ...articleData
|
|
// };
|
|
|
|
// setData(transformedData);
|
|
// console.log(
|
|
// "doc",
|
|
// transformedData.files[selectedDoc]?.secondaryUrl
|
|
// );
|
|
// }
|
|
// } catch (error) {
|
|
// console.error("Error fetching detail:", error);
|
|
// // Try fallback to old API if new API fails
|
|
// try {
|
|
// const fallbackResponse = await getDetail(id);
|
|
// setData(fallbackResponse?.data?.data);
|
|
// console.log(
|
|
// "doc",
|
|
// fallbackResponse?.data?.data.files[selectedDoc]?.secondaryUrl
|
|
// );
|
|
// } catch (fallbackError) {
|
|
// console.error("Fallback API also failed:", fallbackError);
|
|
// }
|
|
// } finally {
|
|
// setLoading(false);
|
|
// }
|
|
// };
|
|
// if (id) fetchDetail();
|
|
// }, [id]);
|
|
|
|
// if (loading) {
|
|
// return (
|
|
// <div className="max-w-6xl mx-auto px-4 py-6">
|
|
// <p>Loading...</p>
|
|
// </div>
|
|
// );
|
|
// }
|
|
|
|
// if (!data) {
|
|
// return (
|
|
// <div className="max-w-6xl mx-auto px-4 py-6">
|
|
// <p>Data tidak ditemukan</p>
|
|
// </div>
|
|
// );
|
|
// }
|
|
|
|
// return (
|
|
// <div className="max-w-6xl mx-auto px-4 py-6 space-y-6">
|
|
// <div className="relative">
|
|
// <audio controls className="w-full" src={data?.files[selectedDoc]?.url}>
|
|
// Your browser does not support the audio element.
|
|
// </audio>
|
|
// </div>
|
|
|
|
// <div className="py-4 px-1 flex flex-row gap-3 flex-wrap">
|
|
// {data?.files?.map((file: any, index: number) => (
|
|
// <button
|
|
// key={file?.id}
|
|
// onClick={() => setSelectedDoc(index)}
|
|
// className={`px-4 py-2 rounded-md border cursor-pointer hover:bg-gray-100 ${
|
|
// selectedDoc === index ? "border-red-600 bg-gray-50" : ""
|
|
// }`}
|
|
// >
|
|
// 🎵 {file?.fileName || `Audio ${index + 1}`}
|
|
// </button>
|
|
// ))}
|
|
// </div>
|
|
|
|
// <div className="flex flex-col md:flex-row md:items-center md:justify-between text-sm text-muted-foreground">
|
|
// <div className="flex flex-wrap items-center gap-2">
|
|
// <span className="font-semibold text-black border-r-2 pr-2 border-black">
|
|
// by {data?.uploadedBy?.publisher || "MABES POLRI"}
|
|
// </span>
|
|
// <span className="flex items-center gap-1 text-black">
|
|
// <Calendar className="w-4 h-4" />
|
|
// {new Date(data.createdAt)
|
|
// .toLocaleString("id-ID", {
|
|
// day: "2-digit",
|
|
// month: "short",
|
|
// year: "numeric",
|
|
// hour: "2-digit",
|
|
// minute: "2-digit",
|
|
// hour12: false,
|
|
// timeZone: "Asia/Jakarta",
|
|
// })
|
|
// .replace(".", ":")}{" "}
|
|
// WIB
|
|
// </span>
|
|
// {/* <span className="flex items-center gap-1 border-r-2 pr-2 border-black text-black">
|
|
// <Clock className="w-4 h-4" />
|
|
// {data.time || "-"}
|
|
// </span> */}
|
|
// <span className="flex items-center gap-1 border-r-2 pr-2 border-black text-black">
|
|
// <Eye className="w-4 h-4" />
|
|
// {data.clickCount || 0}
|
|
// </span>
|
|
// <span className="text-black">
|
|
// {" "}
|
|
// Creator: {data.creatorGroupLevelName}
|
|
// </span>
|
|
// </div>
|
|
// </div>
|
|
|
|
// <div className="flex flex-col md:flex-row gap-6 mt-6">
|
|
// {/* Sidebar actions */}
|
|
// <div className="hidden md:flex flex-col gap-4 relative z-10">
|
|
// <div className="flex gap-2 items-center">
|
|
// <Button
|
|
// onClick={handleCopyLink}
|
|
// size="lg"
|
|
// className="justify-start bg-black text-white rounded-full"
|
|
// >
|
|
// {copied ? <FaCheck /> : <FaLink />}
|
|
// </Button>
|
|
// <span>COPY LINK</span>
|
|
// </div>
|
|
|
|
// <div className="flex gap-2 items-center relative">
|
|
// <Button
|
|
// onClick={() => setShowShareMenu(!showShareMenu)}
|
|
// size="lg"
|
|
// className="justify-start bg-[#C6A455] text-white rounded-full"
|
|
// >
|
|
// <FaShareAlt />
|
|
// </Button>
|
|
// <span>SHARE</span>
|
|
|
|
// {showShareMenu && (
|
|
// <div className="absolute left-16 top-0 bg-white p-4 rounded-lg shadow-lg flex flex-col gap-3 w-48">
|
|
// <SocialItem icon={<FaFacebookF />} label="Facebook" />
|
|
// <SocialItem icon={<FaTiktok />} label="TikTok" />
|
|
// <SocialItem icon={<FaYoutube />} label="YouTube" />
|
|
// <SocialItem icon={<FaWhatsapp />} label="WhatsApp" />
|
|
// <SocialItem icon={<FaInstagram />} label="Instagram" />
|
|
// <SocialItem icon={<FaTwitter />} label="Twitter" />
|
|
// </div>
|
|
// )}
|
|
// </div>
|
|
|
|
// <div className="flex gap-2 items-center">
|
|
// <Link href={`/content/video/comment/${id}`}>
|
|
// <Button
|
|
// variant="default"
|
|
// size="lg"
|
|
// className="justify-start bg-[#FFAD10] rounded-full mr-2 text-white"
|
|
// >
|
|
// <svg
|
|
// xmlns="http://www.w3.org/2000/svg"
|
|
// width="15"
|
|
// height="15"
|
|
// viewBox="0 0 24 24"
|
|
// >
|
|
// <path
|
|
// fill="currentColor"
|
|
// d="M10 3h4a8 8 0 1 1 0 16v3.5c-5-2-12-5-12-11.5a8 8 0 0 1 8-8"
|
|
// />
|
|
// </svg>
|
|
// </Button>
|
|
// COMMENT
|
|
// </Link>
|
|
// </div>
|
|
// </div>
|
|
|
|
// {/* Content */}
|
|
// <div className="flex-1 space-y-4">
|
|
// <h1 className="text-xl font-bold">{data.title}</h1>
|
|
// <div className="text-base text-gray-700 leading-relaxed space-y-3">
|
|
// <p>{data.description}</p>
|
|
// </div>
|
|
|
|
// {/* Actions bawah */}
|
|
// <div className="flex flex-wrap md:flex-row justify-center gap-4 my-20">
|
|
// <div className="flex gap-2 items-center">
|
|
// <Button
|
|
// onClick={handleCopyLink}
|
|
// size="lg"
|
|
// className="justify-start bg-black text-white rounded-full"
|
|
// >
|
|
// {copied ? <FaCheck /> : <FaLink />}
|
|
// </Button>
|
|
// <span>COPY LINK</span>
|
|
// </div>
|
|
// <div className="flex gap-2 items-center">
|
|
// <Button
|
|
// onClick={() => setShowShareMenu(!showShareMenu)}
|
|
// size="lg"
|
|
// className="justify-start bg-[#C6A455] text-white rounded-full"
|
|
// >
|
|
// <FaShareAlt />
|
|
// </Button>
|
|
// <span>SHARE</span>
|
|
// </div>
|
|
// <div className="flex gap-2 items-center">
|
|
// <Link href={`/content/video/comment/${id}`}>
|
|
// <Button
|
|
// variant="default"
|
|
// size="lg"
|
|
// className="justify-start bg-[#FFAD10] rounded-full mr-2 text-white"
|
|
// >
|
|
// <svg
|
|
// xmlns="http://www.w3.org/2000/svg"
|
|
// width="15"
|
|
// height="15"
|
|
// viewBox="0 0 24 24"
|
|
// >
|
|
// <path
|
|
// fill="currentColor"
|
|
// d="M10 3h4a8 8 0 1 1 0 16v3.5c-5-2-12-5-12-11.5a8 8 0 0 1 8-8"
|
|
// />
|
|
// </svg>
|
|
// </Button>
|
|
// COMMENT
|
|
// </Link>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// );
|
|
// }
|