Merge branch 'dev-sabda-v2' of https://gitlab.com/hanifsalafi/mediahub_redesign

components/form/content/audio-detail-form.tsx

@@ -560,7 +560,7 @@ export default function FormAudioDetail() {
                   <Label className="text-xl space-y-2">
                     {t("file-media", { defaultValue: "File Media" })}
                   </Label>
-                  <div className="container example">
+                  <div className="w-full">
                     {detailThumb.map((url, index) => (
                       <div key={index}>
                         {/* <WavesurferPlayer

components/form/content/video-detail-form.tsx

@@ -493,7 +493,7 @@ export default function FormVideoDetail() {
                 </div>
                 <div className="space-y-2">
                   <Label className="text-xl "> {t("file-media", { defaultValue: "File Media" })}</Label>
-                  <div className="w-full  ">
+                  <div className="w-full">
                     <Swiper
                       thumbs={{ swiper: thumbsSwiper }}
                       modules={[FreeMode, Navigation, Thumbs]}
@@ -511,10 +511,10 @@ export default function FormVideoDetail() {
                         </SwiperSlide>
                       ))}
                     </Swiper>
-                    <div className=" mt-2 ">
+                    <div className="mt-2">
                       <Swiper
                         onSwiper={setThumbsSwiper}
-                        slidesPerView={6}
+                        slidesPerView={8}
                         spaceBetween={8}
                         pagination={{
                           clickable: true,
@@ -525,10 +525,10 @@ export default function FormVideoDetail() {
                         {files?.map((data: any) => (
                           <SwiperSlide key={data.id}>
                             <video
-                              className="object-cover h-[60px] w-[80px]"
+                              className="object-cover h-[60px] w-[80px] cursor-pointer"
                               src={data.secondaryUrl}
                               muted
-                              title={`Video ${data.id}`} // Mengganti alt dengan title
+                              title={`Video ${data.id}`} 
                             />
                           </SwiperSlide>
                         ))}

components/main/video-detail.tsx

@@ -472,37 +472,25 @@ const DetailVideo = () => {
               <VideoPlayer url={detailDataVideo?.files[selectedVideo]?.url} />
               <div className="absolute top-4 left-4"></div>
             </div>
-            <div className="py-4 flex flex-col gap-3">
+            <div className="py-4 flex flex-row 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
+                  key={file?.id}
+                  onClick={() => setSelectedVideo(index)}
+                  className="cursor-pointer flex flex-col items-center gap-1"
+                >
+                  <img
+                    src={file?.thumbnailLink}
+                    alt={file?.fileName}
+                    className="w-32 h-20 object-cover rounded"
+                  />
+                  {/* <p className="text-sm text-center">{file?.fileName}</p> */}
+                </div>
               ))}
             </div>
 
             {/* Footer Informasi */}
             <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
-              {/* <p className="flex flex-row items-center mt-3">
-                oleh&nbsp;
-                <span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
-                &nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp;
-                <Icon icon="formkit:eye" width="15" height="15" />
-                &nbsp;
-                {detailDataVideo?.clickCount}
-              </p>
-              <p className="mt-3">Kreator: {detailDataVideo?.creatorName}</p> */}
               <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
                 <p className="text-xs lg:text-sm">
                   {t("by", { defaultValue: "By" })}&nbsp;

package.json

@@ -20,6 +20,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
+    "@dschoon/react-waves": "^4.0.3",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
     "@fullcalendar/core": "^6.1.15",