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

QUDO-257

This commit is contained in:
Sabda Yagra 2025-06-18 13:59:33 +07:00
parent 89c42c0f24
commit c64c6c3685
7 changed files with 42 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -702,7 +702,10 @@ const FilterPage = () => {
{/* <img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> */} {/* <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"> <div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
<ImageBlurry <ImageBlurry
src={video?.thumbnailLink} src={
video?.smallThumbnailLink ||
video?.thumbnailLink
}
alt={video?.title} alt={video?.title}
style={{ style={{
objectFit: "contain", objectFit: "contain",

2
components/landing-page/content-category.tsx
View File

@ -81,7 +81,7 @@ const ContentCategory = (props: { group?: string; type: string }) => {
alt="category" alt="category"
width={2560} width={2560}
height={1440} height={1440}
src={category?.thumbnailLink} src={category?.smallThumbnailLink}
className="w-full lg:h-[300px] h-40 object-cover group-hover:scale-110 transition-transform duration-300" className="w-full lg:h-[300px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
/> />

4
components/landing-page/hero-new.tsx
View File

@ -150,7 +150,7 @@ const HeroModal = ({
✕ ✕
</button> </button>
<Image <Image
src={list?.thumbnailLink} src={list?.smallThumbnailLink}
alt="gambar-utama" alt="gambar-utama"
width={1920} width={1920}
height={1080} height={1080}
@ -364,7 +364,7 @@ const HeroNew = (props: { group?: string }) => {
<div className="relative h-[310px] lg:h-[700px]"> <div className="relative h-[310px] lg:h-[700px]">
{/* Gambar */} {/* Gambar */}
<Image <Image
src={list?.thumbnailLink} src={list?.smallThumbnailLink}
alt="gambar" alt="gambar"
fill fill
className="object-cover w-full h-full" className="object-cover w-full h-full"

4
components/landing-page/new-content.tsx
View File

@ -153,7 +153,7 @@ const NewContent = (props: { group: string; type: string }) => {
<div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"> <div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
{/* Image with motion effect */} {/* Image with motion effect */}
<motion.div className="w-full h-48 lg:h-60" whileHover={{ scale: 0.95 }} transition={{ duration: 0.3 }}> <motion.div className="w-full h-48 lg:h-60" whileHover={{ scale: 0.95 }} transition={{ duration: 0.3 }}>
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} alt="image" src={image?.thumbnailLink} className="w-full h-full object-cover" /> <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} alt="image" src={image?.smallThumbnailLink} className="w-full h-full object-cover" />
</motion.div> </motion.div>
{/* Badge category */} {/* Badge category */}
@ -258,7 +258,7 @@ const NewContent = (props: { group: string; type: string }) => {
<div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group overflow-hidden bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"> <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group overflow-hidden bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
{/* Image with motion effect */} {/* Image with motion effect */}
<motion.div className="w-full h-48 lg:h-60" whileHover={{ scale: 0.95 }} transition={{ duration: 0.3 }}> <motion.div className="w-full h-48 lg:h-60" whileHover={{ scale: 0.95 }} transition={{ duration: 0.3 }}>
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="video" width={2560} height={1440} src={video?.thumbnailLink} className="w-full h-full object-cover" /> <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="video" width={2560} height={1440} src={video?.smallThumbnailLink} className="w-full h-full object-cover" />
</motion.div> </motion.div>
{/* Badge category */} {/* Badge category */}

4
components/landing-page/search-section-new.tsx
View File

@ -131,7 +131,7 @@ const ScrollableContent = () => {
: `${locale}/audio/detail/${item?.slug}` : `${locale}/audio/detail/${item?.slug}`
} }
> >
<Image src={item?.thumbnailLink} alt={item?.title} layout="fill" objectFit="cover" /> <Image src={item?.smallThumbnailLink} alt={item?.title} layout="fill" objectFit="cover" />
<div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow"> <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none"> <g fill="none">
@ -252,7 +252,7 @@ const ScrollableContent = () => {
: `${locale}/audio/detail/${item?.slug}` : `${locale}/audio/detail/${item?.slug}`
} }
> >
<Image src={item?.thumbnailLink} alt={item?.title} layout="fill" objectFit="cover" /> <Image src={item?.smallThumbnailLink} alt={item?.title} layout="fill" objectFit="cover" />
<div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow"> <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none"> <g fill="none">

23
components/main/audio-detail.tsx
View File

@ -39,18 +39,21 @@ import $ from "jquery";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { postActivityLog } from "@/service/content/content"; import { postActivityLog } from "@/service/content/content";
const formWaveSurferOptions = (ref: any) => ({ const formWaveSurferOptions = (container: HTMLElement | null) => {
container: ref, if (!container) throw new Error("Waveform container is null");
waveColor: "#eee", return {
progressColor: "OrangeRed", container,
cursorColor: "OrangeRed", waveColor: "#E0E0E0",
barWidth: 3, progressColor: "#FFC831",
barRadius: 3, cursorColor: "#000",
barWidth: 2,
barRadius: 2,
responsive: true, responsive: true,
height: 150, height: 80,
normalize: true, normalize: true,
partialRender: true, partialRender: true,
}); };
};
const DetailAudio = () => { const DetailAudio = () => {
const [selectedSize, setSelectedSize] = useState<string>("L"); const [selectedSize, setSelectedSize] = useState<string>("L");
@ -1209,7 +1212,7 @@ const DetailAudio = () => {
</div> </div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className="px-4"> <div className="px-4 lg:px-20">
<NewContent group="mabes" type={"similar"} /> <NewContent group="mabes" type={"similar"} />
</div> </div>
</div> </div>

17
components/main/document-detail.tsx
View File

@ -452,13 +452,26 @@ const DetailDocument = () => {
<div className="rounded-md overflow-hidden md:flex"> <div className="rounded-md overflow-hidden md:flex">
{/* Bagian Kiri */} {/* Bagian Kiri */}
<div className="md:w-3/4"> <div className="md:w-3/4">
<div className="relative"> {/* <div className="relative">
<img <img
src={detailDataDocument?.files[selectedDocument]?.url} src={detailDataDocument?.files[selectedDocument]?.url}
alt="Main" alt="Main"
className="rounded-lg w-auto h-fit" className="rounded-lg w-auto h-fit"
/> />
<div className="absolute top-4 left-4"></div> <div className="absolute top-4 left-4"></div>
</div> */}
<div className="bg-[#e0c350] flex items-center justify-center h-[170px] text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
width="150"
height="150"
viewBox="0 0 16 16"
>
<path
fill="currentColor"
d="M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1zM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207zM7 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M7.5 9a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM7 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1M6 9.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M5.5 12a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"
/>
</svg>
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
@ -1038,7 +1051,7 @@ const DetailDocument = () => {
</div> </div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className=""> <div className="px-4 lg:px-20">
<NewContent group="mabes" type={"similar"} /> <NewContent group="mabes" type={"similar"} />
</div> </div>
</div> </div>