This commit is contained in:
Sabda Yagra 2025-07-15 16:15:34 +07:00
parent aea083c0ea
commit 1c0e920b5d
10 changed files with 352 additions and 110 deletions

View File

@ -60,7 +60,6 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Label } from "@/components/ui/label";
import { CalendarPolriAdd } from "@/components/form/schedule/form-calendar-polri";
const CalendarPolriTable = () => {
const router = useRouter();
@ -75,7 +74,7 @@ const CalendarPolriTable = () => {
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [showData, setShowData] = React.useState("10");
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: Number(showData),
@ -161,7 +160,8 @@ const CalendarPolriTable = () => {
<CardTitle>
<div className="flex items-center">
<div className="flex-1 text-xl font-medium text-default-900">
{t("calendar-polri", { defaultValue: "Calendar Polri" })} {t("schedule", { defaultValue: "Schedule" })}
{t("calendar-polri", { defaultValue: "Calendar Polri" })}{" "}
{t("schedule", { defaultValue: "Schedule" })}
</div>
<div className="flex-none">
<Link href={"/contributor/schedule/calendar-polri/create"}>

View File

@ -80,7 +80,7 @@ const LiveReportTable = () => {
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [showData, setShowData] = React.useState("10");
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: Number(showData),

View File

@ -151,15 +151,13 @@ export default function FormAudioDetail() {
const [files, setFiles] = useState<FileType[]>([]);
const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
const [detailThumb, setDetailThumb] = useState<string[]>([]);
const waveSurferRef = useRef<any>(null);
const waveSurfersRef = useRef<WaveSurfer[]>([]);
const [isPlayingIndex, setIsPlayingIndex] = useState<number | null>(null);
const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
const [isPlaying, setIsPlaying] = useState(false);
const [approval, setApproval] = useState<any>();
const onDrop = (acceptedFiles: File[]) => {
setUploadedFiles(acceptedFiles);
const blobUrls = acceptedFiles.map((file) => URL.createObjectURL(file));

View File

@ -179,9 +179,13 @@ export default function FormAudio() {
const filesWithPreview = acceptedFiles.map((file) =>
Object.assign(file, { preview: URL.createObjectURL(file) })
);
setFiles(filesWithPreview);
setValue("files", filesWithPreview, { shouldValidate: true });
setFiles((prevFiles) => [...prevFiles, ...filesWithPreview]);
const prevFiles = getValues("files") || [];
setValue("files", [...prevFiles, ...filesWithPreview], {
shouldValidate: true,
});
},
});
@ -570,7 +574,6 @@ export default function FormAudio() {
Cookies.set("idCreate", response?.data?.data, { expires: 1 });
id = response?.data?.data;
// Upload Thumbnail
const formMedia = new FormData();
console.log("Thumbnail : ", files[0]);
formMedia.append("file", files[0]);
@ -581,7 +584,6 @@ export default function FormAudio() {
}
}
// Upload File
const progressInfoArr = [];
for (const item of files) {
progressInfoArr.push({ percentage: 0, fileName: item.name });
@ -645,7 +647,7 @@ export default function FormAudio() {
filename: file.name,
filetype: file.type,
duration,
isWatermark: "false", // hardcode
isWatermark: "false",
},
onBeforeRequest: function (req) {
var xhr = req.getUnderlyingObject();
@ -787,7 +789,6 @@ export default function FormAudio() {
};
useEffect(() => {
// Jika input title kosong, isi dengan hasil generate title
if (!getValues("title") && title) {
setValue("title", title);
}
@ -801,7 +802,7 @@ export default function FormAudio() {
lang: "id",
contextType: "text",
urlContext: null,
context: editorContent, // Ambil isi editor original
context: editorContent,
createdBy: roleId,
sentiment: "Humorous",
clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",

View File

@ -757,7 +757,7 @@ export default function FormConvertSPIT() {
render={({ field }) => (
<CustomEditor
onChange={field.onChange}
initialData={detail?.contentDescription}
initialData={field.value}
/>
)}
/>

View File

@ -252,9 +252,9 @@ export default function FormVideoDetail() {
setSelectedTarget(matchingCategory.name);
}
setSelectedTarget(details.categoryId); // Untuk dropdown
setSelectedTarget(details?.categoryId);
const filesData = details.files || [];
const filesData = details?.files || [];
const fileUrls = filesData.map((files: { url: string }) =>
files.url ? files.url : "default-image.jpg"
);

View File

@ -274,13 +274,13 @@ const DetailAudio = () => {
};
const sizes = [
{ label: "MP3", value: "... MB" },
{ label: "WAV", value: "... MB" },
{ label: "MP3", value: "100 MB" },
{ label: "WAV", value: "100 MB" },
];
const handleShare = (type: any, url: any) => {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth/login");
router.push("/auth");
} else {
sendActivityLog(2);
sendActivityLog(4);
@ -641,6 +641,40 @@ const DetailAudio = () => {
defaultValue={volume}
/>
</div>
{/* audio kedua bawah */}
<div className="py-4 flex flex-row gap-3">
<div className="flex flex-col gap-2">
{detailDataAudio?.files?.map((file: any, index: number) => (
<a
onClick={() =>
setMain({
id: detailDataAudio.files[index]?.id,
type: detailDataAudio.fileType.name,
url:
Number(detailDataAudio.fileType?.id) == 4
? detailDataAudio.files[index]?.secondaryUrl
: Number(detailDataAudio.fileType?.id) == 2
? `${process.env.NEXT_PUBLIC_API}/media/view?id=${detailDataAudio.files[0]?.id}&operation=file&type=video`
: detailDataAudio.files[index]?.url,
thumbnailFileUrl:
detailDataAudio.files[index]?.thumbnailFileUrl,
names: detailDataAudio.files[index]?.fileName,
format: detailDataAudio.files[index]?.format,
widthPixel: detailDataAudio.files[index]?.widthPixel,
heightPixel: detailDataAudio.files[index]?.heightPixel,
size: detailDataAudio.files[index]?.size,
caption: detailDataAudio.files[index]?.caption,
})
}
key={file?.id}
>
<p className="cursor-pointer">
{file.fileName} | {index + 1}
</p>
</a>
))}
</div>
</div>
{/* Footer Informasi */}
<div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
@ -655,7 +689,8 @@ const DetailAudio = () => {
&nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })} {detailDataAudio?.updatedAt} WIB &nbsp;|&nbsp;
</p> */}
<p className="text-xs lg:text-sm">
&nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}&nbsp;
&nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}
&nbsp;
{formatDateToIndonesian(
new Date(detailDataAudio?.updatedAt)
)}{" "}
@ -669,7 +704,8 @@ const DetailAudio = () => {
</div>
<div className="mt-3">
<p className="flex text-end text-xs lg:text-sm font-semibold">
{t("creator", { defaultValue: "Creator" })} {detailDataAudio?.creatorName}
{t("creator", { defaultValue: "Creator" })}{" "}
{detailDataAudio?.creatorName}
</p>
</div>
</div>
@ -695,7 +731,9 @@ const DetailAudio = () => {
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark" width={40} />
<p className="text-base lg:text-lg">{t("delete", { defaultValue: "Delete" })}</p>
<p className="text-base lg:text-lg">
{t("delete", { defaultValue: "Delete" })}
</p>
</a>
) : (
<a
@ -703,7 +741,9 @@ const DetailAudio = () => {
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark-outline" width={40} />
<p className="text-base lg:text-lg">{t("save", { defaultValue: "Save" })}</p>
<p className="text-base lg:text-lg">
{t("save", { defaultValue: "Save" })}
</p>
</a>
)}
@ -745,7 +785,7 @@ const DetailAudio = () => {
key={size.label}
className="items-center flex flex-row gap-2 cursor-pointer"
>
<input
<Input
type="radio"
name="size"
value={size.label}
@ -770,7 +810,9 @@ const DetailAudio = () => {
className="text-red-600 focus:ring-red-600"
onChange={() => setIsDownloadAll(!isDownloadAll)}
/>
<span>{t("downloadAll", { defaultValue: "Download All" })}</span>
<span>
{t("downloadAll", { defaultValue: "Download All" })}
</span>
</label>
</div>
@ -795,7 +837,49 @@ const DetailAudio = () => {
{/* Tombol Bagikan */}
<div className="flex flex-row py-3">
<p className="text-base font-semibold">{t("share", { defaultValue: "Share" })}</p>
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Popover>
<PopoverTrigger asChild>
<button className="w-full flex items-center gap-2">
{/* <Icon icon="oi:share" fontSize={20} /> */}
<p className="text-base font-semibold mb-2">
{t("share", { defaultValue: "Share" })}
</p>
</button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">
{t("shareTo", { defaultValue: "Share To" })}
</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", {
defaultValue: "Destination Email",
})}
</p>
<Input
value={emailShareInput}
onChange={(event) =>
setEmailShareInput(event.target.value)
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", {
defaultValue: "Press Enter",
})}
/>
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() => shareToEmail()}
>
{t("send", { defaultValue: "Send" })}
</Button>
</div>
</PopoverContent>
</Popover>
</div>{" "}
<a
className="ml-8 cursor-pointer"
onClick={() =>
@ -861,10 +945,14 @@ const DetailAudio = () => {
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<h1 className="mb-2">
{t("shareTo", { defaultValue: "Share To" })}
</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", { defaultValue: "Destination Email" })}
{t("destinationEmail", {
defaultValue: "Destination Email",
})}
</p>
<Input
value={emailShareInput}
@ -873,7 +961,9 @@ const DetailAudio = () => {
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
placeholder={t("pressEnter", {
defaultValue: "Press Enter",
})}
/>
</div>
<Button
@ -895,7 +985,9 @@ const DetailAudio = () => {
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-14">
<div className="flex flex-col">
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<h1 className="mb-2">
{t("shareTo", { defaultValue: "Share To" })}
</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", { defaultValue: "Destination Email" })}
@ -989,7 +1081,9 @@ const DetailAudio = () => {
<Textarea
id={`input-comment-${data.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
placeholder={t("enterReply", {
defaultValue: "Enter Reply",
})}
/>
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
@ -1079,7 +1173,9 @@ const DetailAudio = () => {
name=""
className="mt-2 "
id={`input-comment-${child1.id}`}
placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
placeholder={t("enterReply", {
defaultValue: "Enter Reply",
})}
/>
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
@ -1148,7 +1244,9 @@ const DetailAudio = () => {
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply", { defaultValue: "Reply" })}
{t("reply", {
defaultValue: "Reply",
})}
</small>
</a>
<a
@ -1163,7 +1261,9 @@ const DetailAudio = () => {
onClick={() => deleteData(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete", { defaultValue: "Delete" })}
{t("delete", {
defaultValue: "Delete",
})}
</small>
</a>
</div>
@ -1194,7 +1294,9 @@ const DetailAudio = () => {
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel", { defaultValue: "Cancel" })}
{t("cancel", {
defaultValue: "Cancel",
})}
</small>
</a>
</div>

View File

@ -270,7 +270,7 @@ const DetailDocument = () => {
const handleShare = (type: any, url: any) => {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth/login");
router.push("/auth");
} else {
sendActivityLog(2);
sendActivityLog(4);
@ -494,7 +494,8 @@ const DetailDocument = () => {
&nbsp;|&nbsp; {t("updatedOn", { defaultValue: "Updated On" })} {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp;
</p> */}
<p className="text-xs lg:text-sm">
&nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}&nbsp;
&nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}
&nbsp;
{formatDateToIndonesian(
new Date(detailDataDocument?.updatedAt)
)}{" "}
@ -536,7 +537,9 @@ const DetailDocument = () => {
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark" width={40} />
<p className="text-base lg:text-lg">{t("delete", { defaultValue: "Delete" })}</p>
<p className="text-base lg:text-lg">
{t("delete", { defaultValue: "Delete" })}
</p>
</a>
) : (
<a
@ -544,7 +547,9 @@ const DetailDocument = () => {
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark-outline" width={40} />
<p className="text-base lg:text-lg">{t("save", { defaultValue: "Save" })}</p>
<p className="text-base lg:text-lg">
{t("save", { defaultValue: "Save" })}
</p>
</a>
)}
@ -609,7 +614,9 @@ const DetailDocument = () => {
className="text-red-600 focus:ring-red-600"
onChange={() => setIsDownloadAll(!isDownloadAll)}
/>
<span>{t("downloadAll", { defaultValue: "Download All" })}</span>
<span>
{t("downloadAll", { defaultValue: "Download All" })}
</span>
</label>
</div>
@ -634,27 +641,49 @@ const DetailDocument = () => {
{/* Tombol Bagikan */}
<div className="flex flex-row py-3">
<div className="flex flex-col">
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", { defaultValue: "Destination Email" })}
</p>
<Input
value={emailShareInput}
onChange={(event) => setEmailShareInput(event.target.value)}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
/>
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() => shareToEmail()}
>
{t("send", { defaultValue: "Send" })}
</Button>
</div>{" "}
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Popover>
<PopoverTrigger asChild>
<button className="w-full flex items-center gap-2">
{/* <Icon icon="oi:share" fontSize={20} /> */}
<p className="text-base font-semibold mb-2">
{t("share", { defaultValue: "Share" })}
</p>
</button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">
{t("shareTo", { defaultValue: "Share To" })}
</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", {
defaultValue: "Destination Email",
})}
</p>
<Input
value={emailShareInput}
onChange={(event) =>
setEmailShareInput(event.target.value)
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", {
defaultValue: "Press Enter",
})}
/>
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() => shareToEmail()}
>
{t("send", { defaultValue: "Send" })}
</Button>
</div>
</PopoverContent>
</Popover>
</div>
<a
className="ml-8 cursor-pointer"
onClick={() =>
@ -720,10 +749,14 @@ const DetailDocument = () => {
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<h1 className="mb-2">
{t("shareTo", { defaultValue: "Share To" })}
</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", { defaultValue: "Destination Email" })}
{t("destinationEmail", {
defaultValue: "Destination Email",
})}
</p>
<Input
value={emailShareInput}
@ -732,7 +765,9 @@ const DetailDocument = () => {
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
placeholder={t("pressEnter", {
defaultValue: "Press Enter",
})}
/>
</div>
<Button
@ -753,7 +788,9 @@ const DetailDocument = () => {
{/* Comment */}
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">{t("comment", { defaultValue: "Comment" })}</p>
<p className="flex items-start text-lg">
{t("comment", { defaultValue: "Comment" })}
</p>
<Textarea
placeholder="Type your comments here."
className="flex w-full pb-12"
@ -828,7 +865,9 @@ const DetailDocument = () => {
<Textarea
id={`input-comment-${data.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
placeholder={t("enterReply", {
defaultValue: "Enter Reply",
})}
/>
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
@ -918,7 +957,9 @@ const DetailDocument = () => {
name=""
className="mt-2 "
id={`input-comment-${child1.id}`}
placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
placeholder={t("enterReply", {
defaultValue: "Enter Reply",
})}
/>
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
@ -987,7 +1028,9 @@ const DetailDocument = () => {
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply", { defaultValue: "Reply" })}
{t("reply", {
defaultValue: "Reply",
})}
</small>
</a>
<a
@ -1002,7 +1045,9 @@ const DetailDocument = () => {
onClick={() => deleteData(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete", { defaultValue: "Delete" })}
{t("delete", {
defaultValue: "Delete",
})}
</small>
</a>
</div>
@ -1017,7 +1062,9 @@ const DetailDocument = () => {
name=""
id={`input-comment-${child2.id}`}
className="my-2"
placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
placeholder={t("enterReply", {
defaultValue: "Enter Reply",
})}
/>
<div className="flex flex-row gap-3">
<a
@ -1033,7 +1080,9 @@ const DetailDocument = () => {
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel", { defaultValue: "Cancel" })}
{t("cancel", {
defaultValue: "Cancel",
})}
</small>
</a>
</div>

View File

@ -62,7 +62,7 @@ const DetailImage = (data: any) => {
const [isFromSPIT, setIsFromSPIT] = useState(false);
const [main, setMain] = useState<any>();
const [resolutionSelected, setResolutionSelected] = useState("720");
const [imageSizeSelected, setImageSizeSelected] = useState("l");
const [imageSizeSelected, setImageSizeSelected] = useState("L");
const userId = getCookiesDecrypt("uie");
const [content, setContent] = useState<any>([]);
const [emailShareList, setEmailShareList] = useState<any>();
@ -221,6 +221,11 @@ const DetailImage = (data: any) => {
const handleDownload = () => {
if (downloadProgress === 0) {
if (!imageSizeSelected) {
alert("Please select an image size before downloading.");
return;
}
if (!userId) {
router.push("/auth");
} else {
@ -310,7 +315,7 @@ const DetailImage = (data: any) => {
const handleShare = (type: any, url: any) => {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth/login");
router.push("/auth");
} else {
sendActivityLog(2);
sendActivityLog(4);
@ -579,7 +584,8 @@ const DetailImage = (data: any) => {
{detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
</p> */}
<p className="text-xs lg:text-sm">
&nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}&nbsp;
&nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}
&nbsp;
{formatDateToIndonesian(
new Date(detailDataImage?.updatedAt)
)}{" "}
@ -624,7 +630,9 @@ const DetailImage = (data: any) => {
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark" width={40} />
<p className="text-base lg:text-lg">{t("delete", { defaultValue: "Delete" })}</p>
<p className="text-base lg:text-lg">
{t("delete", { defaultValue: "Delete" })}
</p>
</a>
) : (
<a
@ -632,7 +640,9 @@ const DetailImage = (data: any) => {
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark-outline" width={25} />
<p className="text-base lg:text-sm">{t("save", { defaultValue: "Save" })}</p>
<p className="text-base lg:text-sm">
{t("save", { defaultValue: "Save" })}
</p>
</a>
)}
@ -681,7 +691,10 @@ const DetailImage = (data: any) => {
name="size"
value={size?.label}
checked={selectedSize === size?.label}
onChange={(e) => setImageSizeSelected(e.target.value)}
onChange={(e) => {
setSelectedSize(e.target.value);
setImageSizeSelected(e.target.value);
}}
className="text-red-600 focus:ring-red-600"
/>
<div className="text-sm">{size?.label}</div>
@ -699,7 +712,9 @@ const DetailImage = (data: any) => {
className="text-red-600 focus:ring-red-600"
onChange={() => setIsDownloadAll(!isDownloadAll)}
/>
<span>{t("downloadAll", { defaultValue: "Download All" })}</span>
<span>
{t("downloadAll", { defaultValue: "Download All" })}
</span>
</label>
</div>
@ -736,10 +751,14 @@ const DetailImage = (data: any) => {
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<h1 className="mb-2">
{t("shareTo", { defaultValue: "Share To" })}
</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", { defaultValue: "Destination Email" })}
{t("destinationEmail", {
defaultValue: "Destination Email",
})}
</p>
<Input
value={emailShareInput}
@ -748,7 +767,9 @@ const DetailImage = (data: any) => {
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
placeholder={t("pressEnter", {
defaultValue: "Press Enter",
})}
/>
</div>
<Button
@ -826,10 +847,14 @@ const DetailImage = (data: any) => {
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<h1 className="mb-2">
{t("shareTo", { defaultValue: "Share To" })}
</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", { defaultValue: "Destination Email" })}
{t("destinationEmail", {
defaultValue: "Destination Email",
})}
</p>
<Input
value={emailShareInput}
@ -838,7 +863,9 @@ const DetailImage = (data: any) => {
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
placeholder={t("pressEnter", {
defaultValue: "Press Enter",
})}
/>
</div>
<Button
@ -859,7 +886,9 @@ const DetailImage = (data: any) => {
{/* Comment */}
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-[300px]">
<p className="flex items-start text-lg">{t("comment", { defaultValue: "Comment" })}</p>
<p className="flex items-start text-lg">
{t("comment", { defaultValue: "Comment" })}
</p>
<Textarea
placeholder={t("leaveComment", { defaultValue: "Leave Comment" })}
className="flex w-full pb-12"
@ -939,7 +968,9 @@ const DetailImage = (data: any) => {
<Textarea
id={`input-comment-${data.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
placeholder={t("enterReply", {
defaultValue: "Enter Reply",
})}
/>
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
@ -1034,7 +1065,9 @@ const DetailImage = (data: any) => {
name=""
className="mt-2 "
id={`input-comment-${child1.id}`}
placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
placeholder={t("enterReply", {
defaultValue: "Enter Reply",
})}
/>
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
@ -1108,7 +1141,9 @@ const DetailImage = (data: any) => {
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply", { defaultValue: "Reply" })}
{t("reply", {
defaultValue: "Reply",
})}
</small>
</a>
<a
@ -1123,7 +1158,9 @@ const DetailImage = (data: any) => {
onClick={() => deleteData(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete", { defaultValue: "Delete" })}
{t("delete", {
defaultValue: "Delete",
})}
</small>
</a>
</div>
@ -1154,7 +1191,9 @@ const DetailImage = (data: any) => {
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel", { defaultValue: "Cancel" })}
{t("cancel", {
defaultValue: "Cancel",
})}
</small>
</a>
</div>

View File

@ -75,6 +75,7 @@ const DetailVideo = () => {
const MySwal = withReactContent(Swal);
const t = useTranslations("LandingPage");
let typeString = "video";
const [selectedVideo, setSelectedVideo] = useState(0);
useEffect(() => {
initFetch();
@ -268,7 +269,7 @@ const DetailVideo = () => {
const handleShare = (type: any, url: any) => {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth/login");
router.push("/auth");
} else {
sendActivityLog(2);
sendActivityLog(4);
@ -468,9 +469,28 @@ const DetailVideo = () => {
{/* Bagian Kiri */}
<div className="md:w-3/4">
<div className="relative">
<VideoPlayer url={detailDataVideo?.files[0]?.url} />
<VideoPlayer url={detailDataVideo?.files[selectedVideo]?.secondaryUrl} />
<div className="absolute top-4 left-4"></div>
</div>
<div className="py-4 flex flex-col gap-3">
{detailDataVideo?.files?.map((file: any, index: number) => (
<a onClick={() => setSelectedVideo(index)} key={file?.id}>
{/* <Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={1920}
height={1080}
alt="image-small"
src={file?.url}
className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
/> */}
<p className="cursor-pointer">
{file.fileName} | {index + 1}
</p>
</a>
))}
</div>
{/* Footer Informasi */}
<div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
@ -495,7 +515,8 @@ const DetailVideo = () => {
{detailDataVideo?.updatedAt} WIB &nbsp;|&nbsp;
</p> */}
<p className="text-xs lg:text-sm">
&nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}&nbsp;
&nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}
&nbsp;
{formatDateToIndonesian(
new Date(detailDataVideo?.updatedAt)
)}{" "}
@ -537,7 +558,9 @@ const DetailVideo = () => {
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark" width={40} />
<p className="text-base lg:text-lg">{t("delete", { defaultValue: "Delete" })}</p>
<p className="text-base lg:text-lg">
{t("delete", { defaultValue: "Delete" })}
</p>
</a>
) : (
<a
@ -545,7 +568,9 @@ const DetailVideo = () => {
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark-outline" width={40} />
<p className="text-base lg:text-lg">{t("save", { defaultValue: "Save" })}</p>
<p className="text-base lg:text-lg">
{t("save", { defaultValue: "Save" })}
</p>
</a>
)}
@ -612,7 +637,9 @@ const DetailVideo = () => {
className="text-red-600 focus:ring-red-600"
onChange={() => setIsDownloadAll(!isDownloadAll)}
/>
<span>{t("downloadAll", { defaultValue: "Download All" })}</span>
<span>
{t("downloadAll", { defaultValue: "Download All" })}
</span>
</label>
</div>
@ -649,10 +676,14 @@ const DetailVideo = () => {
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<h1 className="mb-2">
{t("shareTo", { defaultValue: "Share To" })}
</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", { defaultValue: "Destination Email" })}
{t("destinationEmail", {
defaultValue: "Destination Email",
})}
</p>
<Input
value={emailShareInput}
@ -661,7 +692,9 @@ const DetailVideo = () => {
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
placeholder={t("pressEnter", {
defaultValue: "Press Enter",
})}
/>
</div>
<Button
@ -739,10 +772,14 @@ const DetailVideo = () => {
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<h1 className="mb-2">
{t("shareTo", { defaultValue: "Share To" })}
</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", { defaultValue: "Destination Email" })}
{t("destinationEmail", {
defaultValue: "Destination Email",
})}
</p>
<Input
value={emailShareInput}
@ -751,7 +788,9 @@ const DetailVideo = () => {
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
placeholder={t("pressEnter", {
defaultValue: "Press Enter",
})}
/>
</div>
<Button
@ -771,7 +810,9 @@ const DetailVideo = () => {
{/* Comment */}
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">{t("comment", { defaultValue: "Comment" })}</p>
<p className="flex items-start text-lg">
{t("comment", { defaultValue: "Comment" })}
</p>
<Textarea
placeholder="Type your comments here."
className="flex w-full pb-12"
@ -851,7 +892,9 @@ const DetailVideo = () => {
<Textarea
id={`input-comment-${data.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
placeholder={t("enterReply", {
defaultValue: "Enter Reply",
})}
/>
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
@ -945,7 +988,9 @@ const DetailVideo = () => {
name=""
className="mt-2 "
id={`input-comment-${child1.id}`}
placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
placeholder={t("enterReply", {
defaultValue: "Enter Reply",
})}
/>
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
@ -1019,7 +1064,9 @@ const DetailVideo = () => {
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply", { defaultValue: "Reply" })}
{t("reply", {
defaultValue: "Reply",
})}
</small>
</a>
<a
@ -1034,7 +1081,9 @@ const DetailVideo = () => {
onClick={() => deleteData(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete", { defaultValue: "Delete" })}
{t("delete", {
defaultValue: "Delete",
})}
</small>
</a>
</div>
@ -1049,7 +1098,9 @@ const DetailVideo = () => {
name=""
id={`input-comment-${child2.id}`}
className="my-2"
placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
placeholder={t("enterReply", {
defaultValue: "Enter Reply",
})}
/>
<div className="flex flex-row gap-3">
<a
@ -1065,7 +1116,9 @@ const DetailVideo = () => {
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel", { defaultValue: "Cancel" })}
{t("cancel", {
defaultValue: "Cancel",
})}
</small>
</a>
</div>