web-humas-fe/components/landing/adds-carousel.tsx

"use client";

import Image from "next/image";
import {
  Button,
  Card,
  CardFooter,
  CircularProgress,
  ScrollShadow,
} from "@heroui/react";
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  EyeIcon,
  VideoIcon,
} from "../icons";
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import Link from "next/link";
import { Autoplay, Pagination, Navigation, Controller } from "swiper/modules";
import { useEffect, useRef, useState } from "react";
import { getAdvertise } from "@/services/advertisement";
import VideoPlayer from "../player/video-player";

interface Jumbotron {
  id: number;
  title: string;
  description: string;
  redirectLink: string;
  contentFileUrl: string;
}

export default function AddsCarousel() {
  const [jumbotronList, setJumbotronList] = useState<Jumbotron[]>([]);
  const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
  const [thumbnail, setThumbnail] = useState<string | null>(null);
  const [swiperInstance, setSwiperInstance] = useState<any>(null);

  const [selectedVideo, setSelectedVideo] = useState(0);

  useEffect(() => {
    initFetch();
  }, []);

  const initFetch = async () => {
    const req = { page: 1, limit: 5, placement: "banner", isPublish: true };
    const res = await getAdvertise(req);
    setJumbotronList(res?.data?.data);
  };

  return (
    <div className="w-[90%] lg:w-[75%] mx-auto">
      {jumbotronList ? (
        <Swiper
          centeredSlides={true}
          autoplay={{
            delay: 50000,
            disableOnInteraction: true,
          }}
          navigation={true}
          modules={[Autoplay, Controller, Navigation]}
          className="mySwiper"
          onSwiper={(swiper) => {
            setSwiperInstance(swiper);
            swiper.navigation.nextEl?.classList.add(
              "bg-white/70",
              "!text-black",
              "rounded-full",
              "!w-[40px]",
              "!h-[40px]"
            );
            swiper.navigation.prevEl?.classList.add(
              "bg-white/70",
              "!text-black",
              "rounded-full",
              "!w-[40px]",
              "!h-[40px]"
            );
          }}
          onSlideChange={() => {
            videoRefs.current.forEach((video) => {
              if (video && !video.paused) {
                video.pause();
                setSelectedVideo(0);
              }
            });
          }}
        >
          {jumbotronList?.map((newsItem, index) => (
            <SwiperSlide key={newsItem?.id} className="h-[20vh] lg:h-[50vh]">
              <Card
                isFooterBlurred
                radius="lg"
                className="border-none h-[20vh] lg:h-[50vh] shadow-none"
              >
                {newsItem.contentFileUrl.includes(".mp4") ? (
                  selectedVideo === newsItem?.id ? (
                    <VideoPlayer
                      ref={(el) => {
                        videoRefs.current[index] = el;
                      }}
                      url={newsItem.contentFileUrl}
                      onPlay={() => {
                        if (swiperInstance) swiperInstance.autoplay.stop();
                      }}
                      onPause={() => {
                        if (swiperInstance) swiperInstance.autoplay.start();
                      }}
                    />
                  ) : (
                    <div className="bg-[#f0f0f0] dark:bg-stone-800 w-full h-full flex justify-center items-center">
                      <a
                        className="cursor-pointer"
                        onClick={() => setSelectedVideo(newsItem?.id)}
                      >
                        <VideoIcon size={90} />
                      </a>
                    </div>
                  )
                ) : (
                  // thumbnail ? (
                  //   selectedVideo === newsItem?.id ? (
                  //     <VideoPlayer url={newsItem.contentFileUrl} />
                  //   ) : (
                  //     <Image
                  //       src={thumbnail}
                  //       alt="Video thumbnail"
                  //       width={1440}
                  //       height={1080}
                  //     />
                  //   )
                  // ) : (
                  //   <video
                  //     ref={videoRef}
                  //     src="http://10.200.202.141:8802/advertisement/viewer/inisiatif-jumat-berkah-oleh-polres-simalungun-kapolsek-tanah-jawa-bagikan-sembako-untuk-warga-kurang-mampu-49_265348.mp4"
                  //   />
                  // )
                  <Image
                    alt="headernews"
                    width={1440}
                    height={1080}
                    className="w-full h-[20vh] lg:!h-[50vh] object-cover rounded-lg"
                    src={
                      newsItem?.contentFileUrl == ""
                        ? "/no-image.jpg"
                        : newsItem?.contentFileUrl
                    }
                    // src={datas[index % 3].src}
                  />
                )}
              </Card>
            </SwiperSlide>
          ))}
        </Swiper>
      ) : (
        ""
        // <CircularProgress aria-label="Loading..." size="lg" />
      )}
    </div>
  );
}