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

fix: fixing detail content and update content contributro

This commit is contained in:
Sabda Yagra 2025-08-01 11:50:31 +07:00
parent 5bc8099e11
commit cfc47a00a8
4 changed files with 98 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/[locale]/(public)/image/filter/page.tsx
View File

@ -823,7 +823,7 @@ const FilterPage = () => {
<Link href={`/image/detail/${image?.slug}`}>
{/* <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" /> */}
<div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
{/* <ImageBlurry
<ImageBlurry
src={
image?.smallThumbnailLink ||
image?.thumbnailLink
@ -834,8 +834,8 @@ const FilterPage = () => {
width: "100%",
height: "100%",
}}
/> */}
<Image
/>
{/* <Image
width={2560}
height={1440}
src={
@ -843,8 +843,8 @@ const FilterPage = () => {
image?.thumbnailLink
}
alt={image?.title}
className="w-full h-full object-cover rounded-t-lg"
/>
className="w-full h-full object-contain rounded-t-lg"
/> */}
</div>
<div className="flex flex-row items-center gap-2 text-[10px] mx-1 mt-2">
{formatDateToIndonesian(

8
app/[locale]/(public)/video/filter/page.tsx
View File

@ -833,7 +833,7 @@ const FilterPage = () => {
<Link href={`/video/detail/${video?.slug}`}>
{/* <img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> */}
<div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
{/* <ImageBlurry
<ImageBlurry
src={
video?.smallThumbnailLink ||
video?.thumbnailLink
@ -844,8 +844,8 @@ const FilterPage = () => {
width: "100%",
height: "100%",
}}
/> */}
<Image
/>
{/* <Image
width={2560}
height={1440}
src={
@ -854,7 +854,7 @@ const FilterPage = () => {
}
alt={video?.title}
className="w-full h-full object-cover rounded-t-lg"
/>
/> */}
</div>
<div className="flex flex-row items-center gap-2 text-[10px] mx-2">
{formatDateToIndonesian(

94
components/form/content/image-update-form.tsx
View File

@ -166,7 +166,15 @@ export default function FormImageUpdate() {
const { getRootProps, getInputProps } = useDropzone({
onDrop: (acceptedFiles) => {
setFiles(acceptedFiles.map((file) => Object.assign(file)));
// setFiles(acceptedFiles.map((file) => Object.assign(file)));
setFiles((prevFiles) => [
...prevFiles,
...acceptedFiles.map((file) =>
Object.assign(file, {
preview: URL.createObjectURL(file),
})
),
]);
},
accept: {
"image/*": [],
@ -270,6 +278,19 @@ export default function FormImageUpdate() {
setSelectedOptions(initialOptions);
}
if (details?.files) {
const formattedFiles = details.files.map((file: any) => ({
...file,
id: file.id,
fileName: file.fileName,
size: file.size,
thumbnailFileUrl: file.thumbnailFileUrl,
url: file.url,
}));
setFiles(formattedFiles);
}
if (details?.publishedFor) {
// Split string "7" to an array ["7"] if needed
setPublishedFor(details.publishedFor.split(","));
@ -503,15 +524,41 @@ export default function FormImageUpdate() {
setFiles([]);
};
const renderFilePreview = (file: FileWithPreview) => {
if (file?.type?.startsWith("image")) {
// const renderFilePreview = (file: FileWithPreview) => {
// if (file?.type?.startsWith("image")) {
// return (
// <Image
// width={48}
// height={48}
// alt={file.name}
// src={URL.createObjectURL(file)}
// className=" rounded border p-0.5"
// />
// );
// } else {
// return <Icon icon="tabler:file-description" />;
// }
// };
const renderFilePreview = (file: FileWithPreview | any) => {
if (file?.preview || file instanceof File) {
return (
<Image
width={48}
height={48}
alt={file.name}
src={URL.createObjectURL(file)}
className=" rounded border p-0.5"
src={file.preview || URL.createObjectURL(file)}
className="rounded border p-0.5"
/>
);
} else if (file.thumbnailFileUrl) {
return (
<Image
width={48}
height={48}
alt={file.fileName}
src={file.thumbnailFileUrl}
className="rounded border p-0.5"
/>
);
} else {
@ -525,9 +572,44 @@ export default function FormImageUpdate() {
setFiles([...filtered]);
};
// const fileList = files.map((file: any) => (
// <div
// key={file.id}
// className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
// >
// <div className="flex gap-3 items-center">
// <div className="file-preview">{renderFilePreview(file)}</div>
// <div>
// <div className="text-sm text-card-foreground">
// {file.fileName || file.name}
// </div>
// <div className="text-xs font-light text-muted-foreground">
// {Math.round(file.size / 100) / 10 > 1000 ? (
// <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
// ) : (
// <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
// )}
// {" kb"}
// </div>
// </div>
// </div>
// <Button
// type="button"
// size="icon"
// color="destructive"
// variant="outline"
// className="border-none rounded-full"
// onClick={() => handleDeleteFile(file.id)}
// >
// <Icon icon="tabler:x" className="h-5 w-5" />
// </Button>
// </div>
// ));
const fileList = files.map((file: any) => (
<div
key={file.id}
key={file.id || file.name}
className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
>
<div className="flex gap-3 items-center">

2
components/main/image-detail.tsx
View File

@ -537,7 +537,7 @@ const DetailImage = (data: any) => {
height={1440}
src={detailDataImage?.files[selectedImage]?.url}
alt="Main"
className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px] object-cover"
className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-full object-contain"
/>
<div className="absolute top-4 right-4"></div>