diff --git a/app/[locale]/(protected)/admin/add-experts/create/page.tsx b/app/[locale]/(protected)/admin/add-experts/create/page.tsx index 8c908a52..c9d865e9 100644 --- a/app/[locale]/(protected)/admin/add-experts/create/page.tsx +++ b/app/[locale]/(protected)/admin/add-experts/create/page.tsx @@ -32,6 +32,7 @@ import { saveUserRolePlacements, } from "@/service/management-user/management-user"; import { loading } from "@/config/swal"; +import { Eye, EyeOff } from "lucide-react"; const FormSchema = z.object({ name: z.string({ @@ -79,6 +80,14 @@ export default function AddExpertForm() { const [userCompetencies, setUserCompetencies] = useState(); const [userExperiences, setUserExperiences] = useState(); const [userLevels, setUserLevels] = useState(); + const [passwordType, setPasswordType] = useState("password"); + const [showPassword, setShowPassword] = useState(false); + + const togglePasswordType = () => { + setPasswordType((prevType) => + prevType === "password" ? "text" : "password" + ); + }; const roleSelection = [ { @@ -115,7 +124,7 @@ export default function AddExpertForm() { username: data.username, email: data.email, password: data.password, - adress: "", + address: "", roleId: "EXP-ID", phoneNumber: data.phoneNumber, userCompetencyId: data.skills, @@ -308,12 +317,22 @@ export default function AddExpertForm() { render={({ field }) => ( Password - +
+ + +
)} diff --git a/app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx b/app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx index 28c87044..723f833f 100644 --- a/app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx +++ b/app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx @@ -207,7 +207,7 @@ const MediaOnlineTable = () => {
- + diff --git a/app/[locale]/(protected)/admin/media-tracking/media-online/create/page.tsx b/app/[locale]/(protected)/admin/media-tracking/media-online/create/page.tsx new file mode 100644 index 00000000..aadabc80 --- /dev/null +++ b/app/[locale]/(protected)/admin/media-tracking/media-online/create/page.tsx @@ -0,0 +1,19 @@ +import { Card, CardContent } from "@/components/ui/card"; +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import FormTaskTa from "@/components/form/task-ta/task-ta-form"; +import FormAskExpert from "@/components/form/shared/ask-expert-form"; +import FormDoItYourself from "@/components/form/shared/do-it-yourself-form"; +import FormMediaOnline from "@/components/form/media-tracking/media-tracking-form"; + +const MediaOnlineCreatePage = () => { + return ( +
+ +
+ +
+
+ ); +}; + +export default MediaOnlineCreatePage; diff --git a/app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx b/app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx index e963dea3..beb762e0 100644 --- a/app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx +++ b/app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx @@ -43,16 +43,42 @@ const columns: ColumnDef[] = [ header: "Tanggal", cell: ({ row }) => {row.getValue("categoryName")}, }, - { - accessorKey: "title", - header: "Media Online", - cell: ({ row }) => {row.getValue("title")}, - }, { accessorKey: "link", header: "Link Berita", cell: ({ row }) => {row.getValue("categoryName")}, }, + { + id: "actions", + accessorKey: "action", + header: "Aksi", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + View + + + + + ); + }, + }, ]; export default columns; diff --git a/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx b/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx index c2407cd7..fc7b6304 100644 --- a/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx +++ b/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx @@ -66,6 +66,15 @@ import { Checkbox } from "@/components/ui/checkbox"; import { close, loading } from "@/config/swal"; import { Link } from "@/i18n/routing"; import { Label } from "@/components/ui/label"; +import { + Dialog, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { link } from "fs"; const NewsTable = () => { const router = useRouter(); @@ -80,6 +89,7 @@ const NewsTable = () => { [] ); const [showTable, setShowTable] = React.useState(false); + const [link, setLink] = React.useState(""); const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); @@ -204,100 +214,99 @@ const NewsTable = () => { return (
-
+

Tracking Berita hari ini!

-
- - -

Sisa kuota harian: 30 Artikel

-
- {!showTable && ( -
- - -
- )} - {showTable && ( - <> - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ))} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- -
- + + + + Form Tracking Berita + + +
+
+ + setLink(e.target.value)} + /> +

+ Sisa Kuota Harian: 5 Kata Kunci +

+
- - )} + + + + + + + + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+ +
+ +
+ {/* + )} */}
); }; diff --git a/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/[id]/page.tsx b/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/[id]/page.tsx new file mode 100644 index 00000000..4bfb2f54 --- /dev/null +++ b/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/[id]/page.tsx @@ -0,0 +1,12 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import NewsTable from "../../component/table"; +import NewsDetailTable from "../component/table"; + +export default function DetailNews() { + return ( +
+ + +
+ ); +} diff --git a/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/column.tsx b/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/column.tsx new file mode 100644 index 00000000..6313dd45 --- /dev/null +++ b/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/column.tsx @@ -0,0 +1,53 @@ +import * as React from "react"; +import { ColumnDef } from "@tanstack/react-table"; + +import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuTrigger, + DropdownMenuItem, +} from "@/components/ui/dropdown-menu"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { + formatDateToIndonesian, + getOnlyDate, + htmlToString, +} from "@/utils/globals"; +import { Link, useRouter } from "@/i18n/routing"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"; + +const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => {row.getValue("no")}, + }, + { + accessorKey: "mediaOnline", + header: "Media Online", + cell: ({ row }) => {row.getValue("categoryName")}, + }, + { + accessorKey: "link", + header: "Link Berita", + cell: ({ row }) => {row.getValue("categoryName")}, + }, +]; + +export default columns; diff --git a/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/table.tsx b/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/table.tsx new file mode 100644 index 00000000..e7c65227 --- /dev/null +++ b/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/table.tsx @@ -0,0 +1,263 @@ +"use client"; + +import * as React from "react"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { Button } from "@/components/ui/button"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Search, + SquarePen, + Trash2, + TrendingDown, + TrendingUp, + UserIcon, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { Input } from "@/components/ui/input"; +import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { paginationBlog } from "@/service/blog/blog"; +import { ticketingPagination } from "@/service/ticketing/ticketing"; +import { Badge } from "@/components/ui/badge"; +import { useRouter, useSearchParams } from "next/navigation"; +import TablePagination from "@/components/table/table-pagination"; +import columns from "./column"; +import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { listDataMedia } from "@/service/broadcast/broadcast"; +import { listEnableCategory } from "@/service/content/content"; +import { Checkbox } from "@/components/ui/checkbox"; +import { close, loading } from "@/config/swal"; +import { Link } from "@/i18n/routing"; +import { Label } from "@/components/ui/label"; +import { + Dialog, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { link } from "fs"; + +const NewsDetailTable = () => { + const router = useRouter(); + const searchParams = useSearchParams(); + const [search, setSearch] = React.useState(""); + const [showData, setShowData] = React.useState("10"); + const [categories, setCategories] = React.useState(); + const [dataTable, setDataTable] = React.useState([]); + const [totalData, setTotalData] = React.useState(1); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [showTable, setShowTable] = React.useState(false); + const [link, setLink] = React.useState(""); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: Number(showData), + }); + const [categoryFilter, setCategoryFilter] = React.useState([]); + const [statusFilter, setStatusFilter] = React.useState([]); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const table = useReactTable({ + data: dataTable, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onPaginationChange: setPagination, + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + pagination, + }, + }); + + let typingTimer: any; + const doneTypingInterval = 1500; + + // const handleKeyUp = () => { + // clearTimeout(typingTimer); + // typingTimer = setTimeout(doneTyping, doneTypingInterval); + // }; + + const handleKeyDown = () => { + clearTimeout(typingTimer); + }; + + // async function doneTyping() { + // fetchData(); + // } + + React.useEffect(() => { + const pageFromUrl = searchParams?.get("page"); + if (pageFromUrl) { + setPage(Number(pageFromUrl)); + } + }, [searchParams]); + + // React.useEffect(() => { + // fetchData(); + // setPagination({ + // pageIndex: 0, + // pageSize: Number(showData), + // }); + // }, [page, showData]); + + // async function fetchData() { + // try { + // loading(); + // const res = await listDataMedia( + // page - 1, + // showData, + // search, + // categoryFilter?.sort().join(","), + // statusFilter?.sort().join(",") + // ); + // const data = res?.data?.data; + // const contentData = data?.content; + // contentData.forEach((item: any, index: number) => { + // item.no = (page - 1) * Number(showData) + index + 1; + // }); + + // console.log("contentData : ", data); + + // setDataTable(contentData); + // setTotalData(data?.totalElements); + // setTotalPage(data?.totalPages); + // close(); + // } catch (error) { + // console.error("Error fetching tasks:", error); + // } + // } + + React.useEffect(() => { + getCategories(); + }, []); + + async function getCategories() { + const category = await listEnableCategory(""); + const resCategory = category?.data?.data?.content; + setCategories(resCategory); + } + + const handleChange = (type: string, id: number, checked: boolean) => { + if (type === "category") { + if (checked) { + const temp: number[] = [...categoryFilter]; + temp.push(id); + setCategoryFilter(temp); + } else { + const temp = categoryFilter.filter((a) => a !== id); + setCategoryFilter(temp); + } + } else { + if (checked) { + const temp: number[] = [...statusFilter]; + temp.push(id); + setStatusFilter(temp); + } else { + const temp = statusFilter.filter((a) => a !== id); + setStatusFilter(temp); + } + } + }; + + return ( +
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+ +
+ ); +}; + +export default NewsDetailTable; diff --git a/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx b/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx index 9a9ae4db..7397b64c 100644 --- a/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx @@ -16,7 +16,7 @@ import { Link } from "@/components/navigation"; import { useRouter } from "next/navigation"; import { useToast } from "@/components/ui/use-toast"; import { deleteCategory } from "@/service/settings/settings"; -import { deleteTask } from "@/service/task"; +import { deleteTaskTa } from "@/service/task"; import { error, loading } from "@/lib/swal"; import withReactContent from "sweetalert2-react-content"; import Swal from "sweetalert2"; @@ -109,7 +109,7 @@ const useTableColumns = () => { async function deleteProcess(id: any) { loading(); - const resDelete = await deleteTask(id); + const resDelete = await deleteTaskTa(id); if (resDelete?.error) { error(resDelete.message); @@ -159,18 +159,22 @@ const useTableColumns = () => { - - - - View - - - - - - Edit - - + {roleId == 11 && ( + + + + View + + + )} + {roleId == 11 && ( + + + + Edit + + + )} {roleId == 12 && ( { )} - TaskDelete(row.original.id)} - className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" - > - - Delete - + {roleId == 11 && ( + TaskDelete(row.original.id)} + className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" + > + + Delete + + )} ); diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/page.tsx index b230f1a6..186419a0 100644 --- a/app/[locale]/(public)/(satker)/satker/[satker_name]/page.tsx +++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/page.tsx @@ -13,7 +13,7 @@ const page = () => { - +
); }; diff --git a/app/[locale]/(public)/audio/detail/[slug]/page.tsx b/app/[locale]/(public)/audio/detail/[slug]/page.tsx index 143cb1c7..9d714a3f 100644 --- a/app/[locale]/(public)/audio/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/audio/detail/[slug]/page.tsx @@ -1,916 +1,48 @@ -"use client"; +import React, { useEffect, useState } from "react"; +import { + checkWishlistStatus, + createPublicSuggestion, + deletePublicSuggestion, + deleteWishlist, + getDetail, + getDetailMetaData, + getPublicSuggestionList, + saveWishlist, +} from "@/service/landing/landing"; +import { Metadata } from "next"; +import DetailImage from "@/components/main/image-detail"; +import DetailAudio from "@/components/main/audio-detail"; -import { useParams, usePathname, useSearchParams } from "next/navigation"; -import React, { useEffect, useRef, useState } from "react"; -import { Icon } from "@iconify/react/dist/iconify.js"; -import NewContent from "@/components/landing-page/new-content"; -import { Link, useRouter } from "@/i18n/routing"; -import { Textarea } from "@/components/ui/textarea"; -import { BarWave } from "react-cssfx-loading"; -import { useToast } from "@/components/ui/use-toast"; -import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing"; -import { getCookiesDecrypt } from "@/lib/utils"; -import { close, error, loading, successCallback, warning } from "@/config/swal"; -import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking"; -import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; -import { Input } from "@/components/ui/input"; -import { Button } from "@/components/ui/button"; -import withReactContent from "sweetalert2-react-content"; -import Swal from "sweetalert2"; -import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals"; -import parse from "html-react-parser"; -import $ from "jquery"; -import { useTranslations } from "next-intl"; -import { postActivityLog } from "@/service/content/content"; +interface Size { + label: string; + value: string; +} -const formWaveSurferOptions = (ref: any) => ({ - container: ref, - waveColor: "#eee", - progressColor: "OrangeRed", - cursorColor: "OrangeRed", - barWidth: 3, - barRadius: 3, - responsive: true, - height: 150, // If true, normalize by the maximum peak instead of 1.0. - normalize: true, // Use the PeakCache to improve rendering speed of large waveforms. - partialRender: true, -}); - -const DetailAudio = () => { - const [selectedSize, setSelectedSize] = useState("L"); - const router = useRouter(); - const pathname = usePathname(); - const params = useParams(); - const slug = String(params?.slug); - const [detailDataAudio, setDetailDataAudio] = useState(); - const [isSaved, setIsSaved] = useState(false); - const [wishlistId, setWishlistId] = useState(); - const { toast } = useToast(); - const [isDownloadAll, setIsDownloadAll] = useState(false); - const [downloadProgress, setDownloadProgress] = useState(0); - const [isFromSPIT, setIsFromSPIT] = useState(false); - const [main, setMain] = useState(); - const userId = getCookiesDecrypt("uie"); - const [emailShareList, setEmailShareList] = useState(); - const [emailShareInput, setEmailShareInput] = useState(); - const [emailMessageInput, setEmailMessageInput] = useState(); - const searchParams = useSearchParams(); - const id = searchParams?.get("id"); - const [width, setWidth] = useState(); - const [content, setContent] = useState([]); - const userRoleId = getCookiesDecrypt("urie"); - const [playing, setPlaying] = useState(false); - const wavesurfer = useRef(null); - const waveformRef = useRef(null); - const [audioLoaded, setAudioLoaded] = useState(false); - const [volume, setVolume] = useState(0.5); - const [message, setMessage] = useState(""); - const [listSuggestion, setListSuggestion] = useState(); - const MySwal = withReactContent(Swal); - const [visibleInput, setVisibleInput] = useState(null); - const t = useTranslations("LandingPage"); - - let typeString = "audio"; - - useEffect(() => { - initFetch(); - checkWishlist(); - sendActivityLog(2); - }, []); - - const initFetch = async () => { - const response = await getDetail(String(slug)); - console.log("detailAudio", response); - const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]); - - setIsFromSPIT(response?.data?.data?.isFromSPIT); - setWidth(window.innerWidth); - setContent(response?.data?.data); - setListSuggestion(responseGet.data?.data); - setMain({ - id: response?.data?.data?.files[0]?.id, - type: response?.data?.data?.fileType.name, - url: - Number(response?.data?.data?.fileType?.id) == 4 - ? response?.data?.data?.files[0]?.secondaryUrl - : Number(response?.data?.data?.fileType?.id) == 2 - ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video` - : response?.data?.data?.files[0]?.url, - thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl, - names: response?.data?.data?.files[0]?.fileName, - format: response?.data?.data?.files[0]?.format, - widthPixel: response?.data?.data?.files[0]?.widthPixel, - heightPixel: response?.data?.data?.files[0]?.heightPixel, - size: response?.data?.data?.files[0]?.size, - caption: response?.data?.data?.files[0]?.caption, - }); - setDetailDataAudio(response?.data?.data); +type Props = { + params: { + title: string; + slug: string; + description: string; + thumbnailLink: string; }; - - const doBookmark = async () => { - if (userId) { - const data = { - mediaUploadId: slug?.split("-")?.[0], - }; - - loading(); - const res = await saveWishlist(data); - if (res?.error) { - error(res.message); - return false; - } - close(); - toast({ - title: "Konten berhasil disimpan", - }); - checkWishlist(); - } else { - router.push("/auth"); - } - }; - async function checkWishlist() { - if (userId) { - const res = await checkWishlistStatus(slug.split("-")?.[0]); - console.log(res?.data?.data); - const isAlreadyOnWishlist = res?.data?.data !== "-1"; - setWishlistId(res?.data?.data); - setIsSaved(isAlreadyOnWishlist); - } - } - - const handleDeleteWishlist = async () => { - if (userId) { - loading(); - const res = await deleteWishlist(wishlistId); - - if (res?.error) { - error(res.message); - return false; - } - - toast({ - title: "Konten berhasil dihapus", - }); - close(); - checkWishlist(); - } else { - router.push("/auth"); - } - }; - - async function sendActivityLog(activityTypeId: number) { - const data = { - activityTypeId, - mediaId: slug.split("-")?.[0], - url: window.location.href, - }; - // set activity - await postActivityLog(data); - } - - const handleDownload = () => { - if (downloadProgress === 0) { - if (!userId) { - router.push("/auth/login"); - } else { - sendActivityLog(2); - sendActivityLog(3); - - if (isDownloadAll) { - let url: string; - const baseId = slug.split("-")?.[0]; - - // if (type === "1") { - // url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${resolutionSelected}`; - // } else if (type === "2") { - // url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`; - // } else { - url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}`; - // } - - downloadFile(url, "FileDownload.zip"); - } else { - if (isFromSPIT && main?.url?.includes("spit.humas")) { - downloadFile(`${main?.url}`, `${main.names}`); - } else { - downloadFile(`${main?.url}`, `${main.names}`); - } - } - // } else if (type === "1" && resolutionSelected?.length > 0) { - // if (isFromSPIT && main?.url?.includes("spit.humas")) { - // downloadFile(`${main?.url}`, `${main.names}`); - // } else { - // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`; - // downloadFile(url, `${main.names}`); - // } - // } else if (type === "2" && imageSizeSelected?.length > 0) { - // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`; - // downloadFile(url, `${main.names}`); - // } else if (type === "3" || type === "4") { - // downloadFile(`${main?.url}`, `${main.names}`); - // } - } - } - }; - - const downloadFile = (fileUrl: string, name: string) => { - const xhr = new XMLHttpRequest(); - - xhr.open("GET", fileUrl, true); - xhr.responseType = "blob"; - - xhr.addEventListener("progress", (event) => { - if (event.lengthComputable) { - const percentCompleted = Math.round((event.loaded / event.total) * 100); - setDownloadProgress(percentCompleted); - } - }); - - xhr.addEventListener("readystatechange", () => { - if (xhr.readyState === 4 && xhr.status === 200) { - const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream"; - const extension = contentType.split("/")[1]; - const filename = `${name}.${extension}`; - - const blob = new Blob([xhr.response], { - type: contentType, - }); - const downloadUrl = URL.createObjectURL(blob); - const a = document.createElement("a"); - - a.href = downloadUrl; - a.download = filename; - document.body.append(a); - a.click(); - a.remove(); - } - }); - - xhr.onloadend = () => { - setDownloadProgress(0); - }; - - xhr.send(); - }; - - const sizes = [ - { label: "MP3", value: "... MB" }, - { label: "WAV", value: "... MB" }, - ]; - - const handleShare = (type: any, url: any) => { - if (Number(userRoleId) < 1 || userRoleId == undefined) { - router.push("/auth/login"); - } else { - sendActivityLog(2); - sendActivityLog(4); - if (type == "wa" && width <= 768) { - window.open(`whatsapp://send?${url}`, "_blank"); - } else if (type == "wa" && width > 768) { - window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer"); - } else { - window.open(url); - } - } - }; - - async function shareToEmail() { - if (Number(userRoleId) < 1 || userRoleId == undefined) { - router.push("/auth/login"); - } else { - const data = { - mediaUploadId: id?.split("-")?.[0], - email: emailShareList || [emailShareInput], - message: emailMessageInput, - url: window.location.href, - }; - loading(); - const res = await sendMediaUploadToEmail(data); - if (res?.error) { - error(res.message); - return false; - } - close(); - successCallback("Konten Telah Dikirim"); - } - } - - const handlePlayPause = () => { - setPlaying(!playing); - wavesurfer?.current?.playPause(); - }; - - const handleEmailList = (e: any) => { - const arrayEmail: any = []; - for (let i = 0; i < emailShareList?.length; i += 1) { - arrayEmail.push(emailShareList[i]); - } - if (e.which == 13) { - if (e.target.value) { - arrayEmail.push(e.target.value); - setEmailShareList(arrayEmail); - setEmailShareInput(""); - } - e.preventDefault(); - } - return false; - }; - - // useEffect(() => { - // function initState() { - // if (typeString == "audio" && main?.url != undefined) { - // const init = async () => { - // const { default: WaveSurfer } = await import("wavesurfer.js"); - - // setPlaying(false); - - // const formatTime = function (time: any) { - // return [ - // Math.floor((time % 3600) / 60), - // // minutes - // `00${Math.floor(time % 60)}`.slice(-2), // seconds - // ].join(":"); - // }; - // console.log("AUDIO", main?.url); - - // const options = formWaveSurferOptions(waveformRef.current); - - // wavesurfer.current = WaveSurfer.create(options); - - // wavesurfer.current.load(main?.url); - - // wavesurfer.current.on("ready", () => { - // // https://wavesurfer-js.org/docs/methods.html - // // wavesurfer.current.playPause(); - // // setPlaying(true); - // setAudioLoaded(true); - // // make sure object stillavailable when file loaded - // if (wavesurfer.current) { - // wavesurfer.current.setVolume(volume); - // let volumeNow = volume; - // setVolume(volumeNow); - // } - - // $(".waveform__duration").text(formatTime(wavesurfer.current.getDuration())); - // }); - - // // Show current time - // wavesurfer.current.on("audioprocess", () => { - // $(".waveform__counter").text(formatTime(wavesurfer.current.getCurrentTime())); - // }); - - // wavesurfer.current.on("finish", () => { - // setPlaying(false); - // }); - // }; - - // init(); - // // Removes events, elements and disconnects Web Audio nodes. - // // when component unmount - - // return () => wavesurfer?.current?.destroy(); - // } - // } - - // initState(); - // }, [main?.url]); - - useEffect(() => { - if (typeString === "audio" && main?.url) { - const init = async () => { - const { default: WaveSurfer } = await import("wavesurfer.js"); - - if (wavesurfer.current) { - wavesurfer.current.destroy(); // 🔥 Hapus instance lama sebelum membuat yang baru - } - - setPlaying(false); - - const formatTime = function (time: any) { - return [ - Math.floor((time % 3600) / 60), - // minutes - `00${Math.floor(time % 60)}`.slice(-2), // seconds - ].join(":"); - }; - - const options = formWaveSurferOptions(waveformRef.current); - wavesurfer.current = WaveSurfer.create(options); - wavesurfer.current.load(main?.url); - - wavesurfer.current.on("ready", () => { - setAudioLoaded(true); - wavesurfer.current.setVolume(volume); - $(".waveform__duration").text(formatTime(wavesurfer.current.getDuration())); - }); - - wavesurfer.current.on("audioprocess", () => { - $(".waveform__counter").text(formatTime(wavesurfer.current.getCurrentTime())); - }); - - wavesurfer.current.on("finish", () => { - setPlaying(false); - }); - }; - - init(); - - return () => { - if (wavesurfer.current) { - wavesurfer.current.destroy(); // 🔥 Hapus saat unmount - } - }; - } - }, [main?.url]); - - const onVolumeChange = (e: any) => { - const { target } = e; - const newVolume = +target?.value; - - if (newVolume) { - setVolume(newVolume); - wavesurfer?.current?.setVolume(newVolume || 1); - } - }; - - async function sendSuggestionChild(parentId: any) { - const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement; - - if (inputElement && inputElement.value.length > 3) { - loading(); - const data = { - mediaUploadId: slug?.split("-")?.[0], - message: inputElement.value, - parentId, - }; - - console.log(data); - const response = await createPublicSuggestion(data); - console.log(response); - const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]); - console.log(responseGet.data?.data); - setListSuggestion(responseGet.data?.data); - - // Reset input field - inputElement.value = ""; - - // document.querySelector("#comment-id-" + parentId)?.style.display = "none"; - - close(); - } - } - async function deleteDataSuggestion(dataId: any) { - loading(); - const response = await deletePublicSuggestion(dataId); - console.log(response); - const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]); - console.log(responseGet.data?.data); - setListSuggestion(responseGet.data?.data); - close(); - } - const deleteData = (dataId: any) => { - MySwal.fire({ - title: "Delete Comment", - icon: "warning", - showCancelButton: true, - cancelButtonColor: "#3085d6", - confirmButtonColor: "#d33", - confirmButtonText: "Delete", - }).then((result: any) => { - if (result.isConfirmed) { - deleteDataSuggestion(dataId); - console.log(dataId); - } - }); - }; - const showInput = (e: any) => { - console.log(document.querySelector(`#${e}`)?.classList); - document.querySelector(`#${e}`)?.classList.toggle("none"); - setVisibleInput(visibleInput === e ? null : e); - }; - - function addDefaultProfile(ev: any) { - ev.target.src = "/assets/avatar-profile.png"; - } - - async function sendSuggestionParent() { - if (message?.length > 3) { - loading(); - const data = { - mediaUploadId: slug?.split("-")?.[0], - message, - parentId: null, - }; - - const response = await createPublicSuggestion(data); - - console.log(response); - setMessage(""); - - const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]); - console.log(responseGet?.data?.data); - setListSuggestion(responseGet?.data?.data); - - // Hapus nilai semua input secara manual jika perlu - const inputs = document.querySelectorAll("input"); - inputs.forEach((input) => { - input.value = ""; - }); - - close(); - } - } - const getInputValue = (e: any) => { - const message = e.target.value; - console.log(message); - setMessage(message); - }; - const postData = () => { - const checkMessage = checkMaliciousText(message); - if (checkMessage == "") { - if (Number(userRoleId) < 1 || userRoleId == undefined) { - router.push("/auth"); - } else { - sendSuggestionParent(); - } - } else { - warning(checkMessage); - } - }; - const postDataChild = (id: any) => { - const checkMessage = checkMaliciousText(message); - if (checkMessage == "") { - if (Number(userRoleId) < 1 || userRoleId == undefined) { - router.push("/auth"); - } else { - sendSuggestionChild(id); - } - } else { - warning(checkMessage); - } - }; - - return ( - <> -
- {/* Container Utama */} -
- {/* Bagian Kiri */} -
-
- -
- -
-
-
-
- - {/* */} - -
- - {/* Footer Informasi */} -
-
-

- {t("by")} {detailDataAudio?.uploadedBy?.userLevel?.name} -

- {/*

-  | {t("updatedOn")} {detailDataAudio?.updatedAt} WIB  |  -

*/} -

-  | {t("updatedOn")}  - {formatDateToIndonesian(new Date(detailDataAudio?.updatedAt))} {"WIB"} -

-

-  |   - -  {detailDataAudio?.clickCount}  -

-
-
-

- {t("creator")} {detailDataAudio?.creatorName} -

-
-
- {/* Keterangan */} -
-

{detailDataAudio?.title}

-
-
-
- - {/* Bagian Kanan */} -
- {isSaved ? ( - handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> - -

{t("delete")}

- - ) : ( - doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> - -

{t("save")}

- - )} - - {/* garis */} -
- - - {detailDataAudio?.category?.name} - - - - -
- - {/* Opsi Ukuran Foto */} -

{t("audioSize")}

- -
- -
- {sizes.map((size: any) => ( -
-
- setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" /> -
{size.label}
-
-
-
{size.value}
-
-
- ))} -
- - {/* Download Semua */} -
- -
- - {/* Tombol Download */} - - - {/* Tombol Bagikan */} - -
-
-
- -
- {/* Comment */} -
-
-

{t("comment")}

-