From 7186ecf5684417e03709cda6c015111c097ab4b8 Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Tue, 8 Jul 2025 15:32:39 +0700 Subject: [PATCH 1/2] fixing --- .../broadcast/campaign-list/account-list/component/table.tsx | 4 ++-- .../broadcast/campaign-list/account-list/create/page.tsx | 2 +- components/form/media-tracking/setting-tracking-form.tsx | 2 +- package.json | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx index b055ddbe..20b53a64 100644 --- a/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx +++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx @@ -136,12 +136,12 @@ const AccountListTable = () => { Tambah Akun - + {/* - + */}
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx index 02c28100..acd503a6 100644 --- a/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx +++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx @@ -44,7 +44,7 @@ const FormSchema = z.object({ .refine((value) => value.some((item) => item), { message: "Required", }), - accountCategory: z.enum(["polri", "jurnalis", "umumu", "ksp"], { + accountCategory: z.enum(["polri", "jurnalis", "umum", "ksp"], { required_error: "Required", }), email: z.string({ diff --git a/components/form/media-tracking/setting-tracking-form.tsx b/components/form/media-tracking/setting-tracking-form.tsx index 5ec57285..50c57f60 100644 --- a/components/form/media-tracking/setting-tracking-form.tsx +++ b/components/form/media-tracking/setting-tracking-form.tsx @@ -93,7 +93,7 @@ export default function CreateSettingTracking() {
diff --git a/package.json b/package.json index 906e47a1..a71ba2c3 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "next dev -p 4000", "build": "next build", "start": "next start", "lint": "next lint", From 2602e831e359ec46704a07181b993944b2950d7f Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Sat, 12 Jul 2025 18:52:36 +0700 Subject: [PATCH 2/2] fixing --- components/audio-player.tsx | 62 +++ components/form/content/audio-detail-form.tsx | 118 +++-- components/form/content/audio-form.tsx | 141 ++++-- components/form/content/file-preview-text.tsx | 59 +++ .../form/content/file-text-thumbnail.tsx | 33 ++ components/form/content/image-form.tsx | 465 ++++++++++++++---- components/form/content/teks-detail-form.tsx | 85 +--- components/form/content/teks-form.tsx | 351 ++++++++----- components/form/content/video-form.tsx | 351 ++++++++----- components/wavesurfer.tsx | 45 ++ messages/en.json | 11 +- messages/in.json | 13 +- package.json | 2 +- 13 files changed, 1258 insertions(+), 478 deletions(-) create mode 100644 components/audio-player.tsx create mode 100644 components/form/content/file-preview-text.tsx create mode 100644 components/form/content/file-text-thumbnail.tsx create mode 100644 components/wavesurfer.tsx diff --git a/components/audio-player.tsx b/components/audio-player.tsx new file mode 100644 index 00000000..db85a3d5 --- /dev/null +++ b/components/audio-player.tsx @@ -0,0 +1,62 @@ +import React, { useRef, useState, useEffect } from "react"; + +const AudioPlayer = (props: {urlAudio: string}) => { + const audioRef = useRef(null); + const [currentTime, setCurrentTime] = useState(0); + const {urlAudio} = props + + const playAudio = () => { + audioRef.current?.play(); + }; + + const pauseAudio = () => { + audioRef.current?.pause(); + }; + + const stopAudio = () => { + if (audioRef.current) { + audioRef.current.pause(); + audioRef.current.currentTime = 0; + } + }; + + useEffect(() => { + const audio = audioRef.current; + if (!audio) return; + + const updateTime = () => { + setCurrentTime(audio.currentTime); + }; + + audio.addEventListener("timeupdate", updateTime); + + return () => { + audio.removeEventListener("timeupdate", updateTime); + }; + }, []); + + const formatTime = (time: number) => { + const minutes = Math.floor(time / 60); + const seconds = Math.floor(time % 60) + .toString() + .padStart(2, "0"); + return `${minutes}:${seconds}`; + }; + + return ( +
+

Pemutar Audio

+
+ ); +}; + +export default AudioPlayer; diff --git a/components/form/content/audio-detail-form.tsx b/components/form/content/audio-detail-form.tsx index 0a64334d..bfeab8f4 100644 --- a/components/form/content/audio-detail-form.tsx +++ b/components/form/content/audio-detail-form.tsx @@ -64,6 +64,8 @@ import { useTranslations } from "next-intl"; import SuggestionModal from "@/components/modal/suggestions-modal"; import { formatDateToIndonesian } from "@/utils/globals"; import ApprovalHistoryModal from "@/components/modal/approval-history-modal"; +import { useDropzone } from "react-dropzone"; +import AudioPlayer from "@/components/audio-player"; const imageSchema = z.object({ title: z.string().min(1, { message: "Judul diperlukan" }), @@ -139,32 +141,54 @@ export default function FormAudioDetail() { const [selectedPublishers, setSelectedPublishers] = useState([]); const [description, setDescription] = useState(""); const [main, setMain] = useState([]); - const [detailThumb, setDetailThumb] = useState([]); const [thumbsSwiper, setThumbsSwiper] = useState(null); - const t = useTranslations("Form"); const [selectedTarget, setSelectedTarget] = useState(""); - const [files, setFiles] = useState([]); const [rejectedFiles, setRejectedFiles] = useState([]); const [isUserMabesApprover, setIsUserMabesApprover] = useState(false); const [audioPlaying, setAudioPlaying] = useState(null); const [filePlacements, setFilePlacements] = useState([]); + const [files, setFiles] = useState([]); + const [uploadedFiles, setUploadedFiles] = useState([]); + const [detailThumb, setDetailThumb] = useState([]); const waveSurferRef = useRef(null); + const waveSurfersRef = useRef([]); + const [isPlayingIndex, setIsPlayingIndex] = useState(null); const [wavesurfer, setWavesurfer] = useState(); const [isPlaying, setIsPlaying] = useState(false); const [approval, setApproval] = useState(); - const onReady = (ws: any) => { - setWavesurfer(ws); - setIsPlaying(false); + const onDrop = (acceptedFiles: File[]) => { + setUploadedFiles(acceptedFiles); + const blobUrls = acceptedFiles.map((file) => URL.createObjectURL(file)); + setDetailThumb(blobUrls); }; - const onPlayPause = () => { - wavesurfer && wavesurfer.playPause(); + const onReady = (ws: WaveSurfer, index: number) => { + waveSurfersRef.current[index] = ws; }; + const onPlayPause = (index: number) => { + waveSurfersRef.current.forEach((ws, i) => { + if (i === index) { + ws.isPlaying() ? ws.pause() : ws.play(); + setIsPlayingIndex(ws.isPlaying() ? index : null); + } else { + ws.pause(); + } + }); + }; + + const { getRootProps, getInputProps } = useDropzone({ + onDrop, + accept: { + "audio/*": [], + }, + multiple: true, + }); + let fileTypeId = "4"; const { @@ -261,8 +285,8 @@ export default function FormAudioDetail() { }); setupPlacementCheck(details?.files?.length); - if (details.publishedForObject) { - const publisherIds = details.publishedForObject.map( + if (details?.publishedForObject) { + const publisherIds = details?.publishedForObject.map( (obj: any) => obj.id ); setSelectedPublishers(publisherIds); @@ -276,9 +300,9 @@ export default function FormAudioDetail() { setSelectedTarget(matchingCategory.name); } - setSelectedTarget(details.categoryId); // Untuk dropdown + setSelectedTarget(details?.categoryId); - const filesData = details.files || []; + const filesData = details?.files || []; const audioFiles = filesData.filter( (file: any) => file.contentType && file.contentType.startsWith("video/webm") @@ -439,9 +463,9 @@ export default function FormAudioDetail() { const handleAudioPlayPause = (audioSrc: string) => { if (audioPlaying === audioSrc) { - setAudioPlaying(null); // Pause if the same audio is clicked + setAudioPlaying(null); } else { - setAudioPlaying(audioSrc); // Play the new audio + setAudioPlaying(audioSrc); } }; @@ -463,7 +487,9 @@ export default function FormAudioDetail() {
-

{t("form-audio", { defaultValue: "Form Audio" })}

+

+ {t("form-audio", { defaultValue: "Form Audio" })} +

{/* Input Title */}
@@ -491,7 +517,7 @@ export default function FormAudioDetail() {
{ console.log("Selected Category ID:", id); setSelectedCategory(id); @@ -853,7 +868,9 @@ export default function FormAudio() {
- +
- +
- +
- +