mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fixing placement in spit polda

This commit is contained in:
Sabda Yagra 2025-09-29 13:39:08 +07:00
parent c65afe8ced
commit 92e300a0cf
1 changed files with 48 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
components/form/content/spit-convert-form.tsx
View File

@ -7,8 +7,6 @@ import { useParams, useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import dynamic from "next/dynamic";
import Cookies from "js-cookie";
// UI Components
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
@ -26,8 +24,6 @@ import {
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
// Icons
import {
AlertCircle,
FileText,
@ -44,8 +40,6 @@ import {
CheckCircle,
XCircle,
} from "lucide-react";
// Swiper
import { Swiper, SwiperSlide } from "swiper/react";
import { Swiper as SwiperType } from "swiper";
import "swiper/css";
@ -54,8 +48,6 @@ import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/thumbs";
import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
// Services
import {
convertSPIT,
deleteSPIT,
@ -64,15 +56,12 @@ import {
listEnableCategory,
} from "@/service/content/content";
import { generateDataRewrite, getDetailArticle } from "@/service/content/ai";
// Utils
import { getCookiesDecrypt } from "@/lib/utils";
import { error } from "@/lib/swal";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { close, loading } from "@/config/swal";
// Types
interface Category {
id: number;
name: string;
@ -289,9 +278,7 @@ export default function FormConvertSPIT() {
try {
const response = await getTagsBySubCategoryId(categoryId);
if (response?.data?.data?.length > 0) {
// Extract tag names from the response objects
const apiTags = response?.data?.data?.map((tag: any) => tag.tagName);
// Merge with existing tags, ensuring uniqueness
const tagsMerge = Array.from(new Set([...tags, ...apiTags]));
setTags(tagsMerge);
}
@ -313,7 +300,6 @@ export default function FormConvertSPIT() {
setDetail(details);
// <-- use API contentList objects directly -->
const contentList: FileType[] = (details.contentList || []).map(
(it: any) => ({
contentId: it.contentId,
@ -329,11 +315,9 @@ export default function FormConvertSPIT() {
setFiles(contentList);
setDetailThumb(contentList);
// Initialize file placements
const fileCount = contentList.length || 0;
setFilePlacements(Array(fileCount).fill([]));
// Set form values
setValue("contentTitle", details.contentTitle || "");
setValue("contentDescription", details.contentDescription || "");
setValue("contentCreator", details.contentCreator || "");
@ -342,16 +326,16 @@ export default function FormConvertSPIT() {
(details as any).contentRewriteDescription || ""
);
// Set category and load category tags
if (details.categoryId) {
setSelectedCategoryId(details.categoryId);
await loadTags(details.categoryId);
}
// Set content tags and merge with category tags
if (details.contentTag) {
const contentTags = details.contentTag.split(",").map((tag: string) => tag.trim());
setTags(prev => Array.from(new Set([...prev, ...contentTags])));
const contentTags = details.contentTag
.split(",")
.map((tag: string) => tag.trim());
setTags((prev) => Array.from(new Set([...prev, ...contentTags])));
}
} catch (error) {
console.error("Failed to load detail:", error);
@ -552,14 +536,24 @@ export default function FormConvertSPIT() {
);
};
const getPlacementData = () => {
const getPlacementData = (type: string) => {
const placementData: PlacementData[] = [];
for (let i = 0; i < filePlacements.length; i++) {
if (filePlacements[i].length > 0) {
const placements = filePlacements[i];
if (type == "mabes") {
for (let i = 0; i < filePlacements.length; i++) {
if (filePlacements[i].length > 0) {
const placements = filePlacements[i];
placementData.push({
mediaFileId: files[i].contentId,
placements: placements.join(","),
});
}
}
} else {
for (let i = 0; i < files.length; i++) {
placementData.push({
mediaFileId: files[i].contentId,
placements: placements.join(","),
placements: "polda",
});
}
}
@ -578,7 +572,6 @@ export default function FormConvertSPIT() {
return temp;
};
// Form submission
const onSubmit = async (data: FormData) => {
const pnmhTags = tags.filter((tag) => tag.toLowerCase().includes("pnmh"));
@ -624,7 +617,9 @@ export default function FormConvertSPIT() {
categoryId: selectedCategoryId,
publishedFor: publishedFor.join(","),
creator: data.contentCreator,
files: isUserMabesApprover ? getPlacementData() : [],
files: isUserMabesApprover
? getPlacementData("mabes")
: getPlacementData("polda"),
};
await convertSPIT(requestData);
@ -978,7 +973,10 @@ export default function FormConvertSPIT() {
centeredSlides={true}
>
{detailThumb.map((item) => (
<SwiperSlide key={item.contentId} className="!w-full">
<SwiperSlide
key={item.contentId}
className="!w-full"
>
{item.contentType === "VIDEO" ? (
<div className="relative w-full h-96 overflow-hidden rounded-lg">
<video
@ -989,8 +987,8 @@ export default function FormConvertSPIT() {
poster={item.thumbnailFileUrl || undefined}
title={`Video ${item.contentId}`}
onError={(e) => {
console.error('Video load error:', e);
e.currentTarget.style.display = 'none';
console.error("Video load error:", e);
e.currentTarget.style.display = "none";
}}
/>
</div>
@ -1000,10 +998,13 @@ export default function FormConvertSPIT() {
src={item.contentFile}
alt={`Media ${item.contentId}`}
className="max-w-full max-h-full object-contain rounded-lg"
style={{ maxWidth: '100%', maxHeight: '100%' }}
style={{
maxWidth: "100%",
maxHeight: "100%",
}}
onError={(e) => {
console.error('Image load error:', e);
e.currentTarget.style.display = 'none';
console.error("Image load error:", e);
e.currentTarget.style.display = "none";
}}
/>
</div>
@ -1047,7 +1048,10 @@ export default function FormConvertSPIT() {
preventClicksPropagation={false}
>
{detailThumb.map((item) => (
<SwiperSlide key={`thumb-${item.contentId}`} className="!w-auto flex-shrink-0">
<SwiperSlide
key={`thumb-${item.contentId}`}
className="!w-auto flex-shrink-0"
>
{item.contentType === "VIDEO" ? (
<div className="relative w-20 h-16 rounded cursor-pointer overflow-hidden flex-shrink-0">
{/* use preload metadata so browser doesn't download full video */}
@ -1059,8 +1063,11 @@ export default function FormConvertSPIT() {
playsInline
tabIndex={-1}
onError={(e) => {
console.error('Thumbnail video load error:', e);
e.currentTarget.style.display = 'none';
console.error(
"Thumbnail video load error:",
e
);
e.currentTarget.style.display = "none";
}}
/>
<div className="absolute inset-0 flex items-center justify-center bg-black/30 pointer-events-none">
@ -1081,8 +1088,11 @@ export default function FormConvertSPIT() {
alt={`Thumbnail ${item.contentId}`}
className="w-full h-full object-cover"
onError={(e) => {
console.error('Thumbnail image load error:', e);
e.currentTarget.style.display = 'none';
console.error(
"Thumbnail image load error:",
e
);
e.currentTarget.style.display = "none";
}}
/>
</div>
@ -1138,7 +1148,6 @@ export default function FormConvertSPIT() {
key={file.contentId}
className="flex gap-4 p-4 border rounded-lg"
>
{/* show thumbnail or video preview */}
{file.contentType === "VIDEO" ? (
<video
src={file.contentFile}