rubix/src/components/VideoInternal/VideoInternal.jsx

/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import { Box, Text, Image } from "@chakra-ui/react";
import { AspectRatio } from "@chakra-ui/react";
import { useGetVideoQuery } from "../../Redux/slice/whitePaperSlice";
import Loader from "../Loader/Loader";
import { useParams } from "react-router-dom";

const VideoInternal = () => {
  const { title_slug } = useParams();
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 5;
  const { data, isLoading, error } = useGetVideoQuery({
    page: currentPage,
    pageSize,
  });

  // console.log(data);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  const isMobile = windowWidth <= 996;

  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  if (isLoading) {
    return (
      <div>
        <Loader />
      </div>
    );
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  const videos = data?.data?.data?.rows;

  const matchingvideos = videos
    ? videos.find((item) => item.title_slug === title_slug)
    : null;

  console.log(matchingvideos);

  return (
    <>
      <Box
        key={matchingvideos?.id}
        bg="#000000"
        height={"auto"}
        display={"flex"}
        gap={7}
        justifyContent={"center"}
        alignItems={"center"}
        flexDirection={"column"}
        color="white"
      >
        <Box
          bg="#000000"
          minHeight={"60vh"}
          width={"70vw"}
          display={"flex"}
          gap={5}
          marginTop={10}
          justifyContent={"end"}
          alignItems={"center"}
          flexDirection={"column"}
          color="white"
          marginBottom={"2rem"}
          sx={{
            "@media (max-width: 820px)": {
              minHeight: "inherit",
              width: "100vw",
              marginTop: "6rem",
            },
          }}
        >
          <Text
            textAlign={"center"}
            className="rubix-fw-600"
            fontSize={"40px"}
            fontFamily={"Mona Sans"}
            color={"#fff"}
            sx={{
              "@media (max-width: 600px)": {
                fontSize: "28px",
                lineHeight: "45px",
                padding: "0px 1rem",
              },
            }}
          >
            {matchingvideos?.title}
          </Text>

          <Text
            textAlign={"center"}
            className="rubix-text-xsmall rubix-fw-500"
            sx={{
              "@media (max-width: 600px)": {
                fontSize: "35px",
              },
            }}
          >
            Video duration : {matchingvideos?.duration} min
          </Text>

          <Text
            textAlign={"center"}
            className="rubix-text-medium rubix-fw-400"
            sx={{
              "@media (max-width: 600px)": {
                padding: "0 15px",
              },
            }}
          >
            {matchingvideos?.description}
          </Text>
        </Box>

        <Box
          bg="#101015"
          width={"85vw"}
          height={"auto"}
          display={"flex"}
          //   pb={"60px"}
          mb={"4rem"}
          gap={5}
          justifyContent={"center"}
          alignItems={"center"}
          flexDirection={"column"}
          color="white"
          position={"relative"}
          sx={{
            "@media (max-width: 600px)": {
              display: "block",
              top: "inherit",
            },
          }}
        >
          {!isMobile ? (
            <div
              style={{
                position: "relative",
                width: "100%",
                paddingBottom: "56.25%" /* 16:9 aspect ratio */,
                className: "iframeContainer",
              }}
            >
              <iframe
                src={`${matchingvideos?.embeddedCode}`}
                title="YouTube video player"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                style={{
                  position: "absolute",
                  width: "70%",
                  height: "70%",
                  marginLeft: "auto",
                  marginRight: "auto",
                  transform: "translateY(22%)",
                  left: 0,
                  right: 0,
                  border: "none",
                }}
              ></iframe>
            </div>
          ) : (
            <div
              style={{
                position: "relative",
                width: "100%",
                paddingBottom: "56.25%" /* 16:9 aspect ratio */,
                className: "iframeContainer",
              }}
            >
              <iframe
                src={`${matchingvideos?.embeddedCode}`}
                title="YouTube video player"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                style={{
                  position: "absolute",
                  width: "95%",
                  height: "85%",
                  marginLeft: "auto",
                  marginRight: "auto",
                  transform: "translateY(10%)",
                  left: 0,
                  right: 0,
                  border: "none",
                }}
              ></iframe>
            </div>
          )}
        </Box>
      </Box>
    </>
  );
};

export default VideoInternal;