migrate to typescript

1 files changed, 0 insertions, 527 deletions

diff --git a/components/watch/player/playerComponent.js b/components/watch/player/playerComponent.js
deleted file mode 100644
index 665919b..0000000
--- a/components/watch/player/playerComponent.js
+++ /dev/null
@@ -1,527 +0,0 @@
-import React, { useEffect, useState } from "react";
-import NewPlayer from "./artplayer";
-import { icons } from "./component/overlay";
-import { useWatchProvider } from "@/lib/context/watchPageProvider";
-import { useRouter } from "next/router";
-import { useAniList } from "@/lib/anilist/useAnilist";
-import Loading from "@/components/shared/loading";
-
-export function calculateAspectRatio(width, height) {
-  const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));
-  const divisor = gcd(width, height);
-  const aspectRatio = `${width / divisor}/${height / divisor}`;
-  return aspectRatio;
-}
-
-const fontSize = [
-  {
-    html: "Small",
-    size: "16px",
-  },
-  {
-    html: "Medium",
-    size: "36px",
-  },
-  {
-    html: "Large",
-    size: "56px",
-  },
-];
-
-export default function PlayerComponent({
-  playerRef,
-  session,
-  id,
-  info,
-  watchId,
-  proxy,
-  dub,
-  timeWatched,
-  skip,
-  track,
-  data,
-  provider,
-  className,
-}) {
-  const {
-    aspectRatio,
-    setAspectRatio,
-    playerState,
-    setPlayerState,
-    autoplay,
-    marked,
-    setMarked,
-  } = useWatchProvider();
-
-  const router = useRouter();
-
-  const { markProgress } = useAniList(session);
-
-  const [url, setUrl] = useState("");
-  const [resolution, setResolution] = useState("auto");
-  const [source, setSource] = useState([]);
-  const [subSize, setSubSize] = useState({ size: "16px", html: "Small" });
-  const [defSize, setDefSize] = useState();
-  const [subtitle, setSubtitle] = useState();
-  const [defSub, setDefSub] = useState();
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(false);
-
-  useEffect(() => {
-    setLoading(true);
-    const resol = localStorage.getItem("quality");
-    const sub = JSON.parse(localStorage.getItem("subSize"));
-    if (resol) {
-      setResolution(resol);
-    }
-
-    const size = fontSize.map((i) => {
-      const isDefault = !sub ? i.html === "Small" : i.html === sub?.html;
-      return {
-        ...(isDefault && { default: true }),
-        html: i.html,
-        size: i.size,
-      };
-    });
-
-    const defSize = size?.find((i) => i?.default === true);
-    setDefSize(defSize);
-    setSubSize(size);
-
-    async function compiler() {
-      try {
-        const referer = JSON.stringify(data?.headers);
-        const source = data?.sources?.map((items) => {
-          const isDefault =
-            provider !== "gogoanime"
-              ? items.quality === "default" || items.quality === "auto"
-              : resolution === "auto"
-              ? items.quality === "default" || items.quality === "auto"
-              : items.quality === resolution;
-          return {
-            ...(isDefault && { default: true }),
-            html: items.quality === "default" ? "main" : items.quality,
-            url: `${proxy}/proxy/m3u8/${encodeURIComponent(
-              String(items.url)
-            )}/${encodeURIComponent(String(referer))}`,
-          };
-        });
-
-        const defSource = source?.find((i) => i?.default === true);
-
-        if (defSource) {
-          setUrl(defSource.url);
-        }
-
-        const subtitle = data?.subtitles
-          ?.filter(
-            (subtitle) =>
-              subtitle.lang !== "Thumbnails" && subtitle.lang !== "thumbnails"
-          )
-          ?.map((subtitle) => {
-            const isEnglish =
-              subtitle.lang === "English" ||
-              subtitle.lang === "English / English (US)";
-            return {
-              ...(isEnglish && { default: true }),
-              url: subtitle.url,
-              html: `${subtitle.lang}`,
-            };
-          });
-
-        if (subtitle) {
-          const defSub = data?.subtitles.find(
-            (i) => i.lang === "English" || i.lang === "English / English (US)"
-          );
-
-          setDefSub(defSub?.url);
-
-          setSubtitle(subtitle);
-        }
-
-        const alt = source?.filter(
-          (i) =>
-            i?.html !== "main" &&
-            i?.html !== "auto" &&
-            i?.html !== "default" &&
-            i?.html !== "backup"
-        );
-        const server = source?.filter(
-          (i) =>
-            i?.html === "main" ||
-            i?.html === "auto" ||
-            i?.html === "default" ||
-            i?.html === "backup"
-        );
-
-        setSource({ alt, server });
-        setLoading(false);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-    compiler();
-
-    return () => {
-      setUrl("");
-      setSource([]);
-      setSubtitle([]);
-      setLoading(true);
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [provider, data]);
-
-  /**
-   * @param {import("artplayer")} art
-   */
-  function getInstance(art) {
-    art.on("ready", () => {
-      const autoplay = localStorage.getItem("autoplay_video") || false;
-
-      // check media queries for mobile devices
-      const isMobile = window.matchMedia("(max-width: 768px)").matches;
-
-      // console.log(art.fullscreen);
-
-      if (isMobile) {
-        art.controls.remove("theater-button");
-        // art.controls.remove("fast-rewind");
-        // art.controls.remove("fast-forward");
-      }
-
-      if (autoplay === "true" || autoplay === true) {
-        if (playerState.currentTime === 0) {
-          art.play();
-        } else {
-          if (playerState.isPlaying) {
-            art.play();
-          } else {
-            art.pause();
-          }
-        }
-      } else {
-        if (playerState.isPlaying) {
-          art.play();
-        } else {
-          art.pause();
-        }
-      }
-      art.seek = playerState.currentTime;
-    });
-
-    art.on("ready", () => {
-      if (playerState.currentTime !== 0) return;
-      const seek = art.storage.get(id);
-      const seekTime = seek?.timeWatched || 0;
-      const duration = art.duration;
-      const percentage = seekTime / duration;
-      const percentagedb = timeWatched / duration;
-
-      if (subSize) {
-        art.subtitle.style.fontSize = subSize?.size;
-      }
-
-      if (percentage >= 0.9 || percentagedb >= 0.9) {
-        art.currentTime = 0;
-        console.log("Video started from the beginning");
-      } else if (timeWatched) {
-        art.currentTime = timeWatched;
-      } else {
-        art.currentTime = seekTime;
-      }
-    });
-
-    art.on("error", (error, reconnectTime) => {
-      if (error && reconnectTime >= 5) {
-        setError(true);
-        console.error("Error while loading video:", error);
-      }
-    });
-
-    art.on("play", () => {
-      art.notice.show = "";
-      setPlayerState({ ...playerState, isPlaying: true });
-    });
-    art.on("pause", () => {
-      art.notice.show = "";
-      setPlayerState({ ...playerState, isPlaying: false });
-    });
-
-    art.on("resize", () => {
-      art.subtitle.style({
-        fontSize: art.height * 0.05 + "px",
-      });
-    });
-
-    let mark = 0;
-
-    art.on("video:timeupdate", async () => {
-      if (!session) return;
-
-      var currentTime = art.currentTime;
-      const duration = art.duration;
-      const percentage = currentTime / duration;
-
-      if (percentage >= 0.9) {
-        // use >= instead of >
-        if (mark < 1 && marked < 1) {
-          mark = 1;
-          setMarked(1);
-          markProgress(info.id, track.playing.number);
-        }
-      }
-    });
-
-    art.on("video:playing", () => {
-      if (!session) return;
-      const intervalId = setInterval(async () => {
-        await fetch("/api/user/update/episode", {
-          method: "PUT",
-          body: JSON.stringify({
-            name: session?.user?.name,
-            id: String(info?.id),
-            watchId: watchId,
-            title:
-              track.playing?.title || info.title?.romaji || info.title?.english,
-            aniTitle: info.title?.romaji || info.title?.english,
-            image: track.playing?.img || info?.coverImage?.extraLarge,
-            number: Number(track.playing?.number),
-            duration: art.duration,
-            timeWatched: art.currentTime,
-            provider: provider,
-            nextId: track.next?.id,
-            nextNumber: Number(track.next?.number),
-            dub: dub ? true : false,
-          }),
-        });
-        // console.log("updating db", { track });
-      }, 5000);
-
-      art.on("video:pause", () => {
-        clearInterval(intervalId);
-      });
-
-      art.on("video:ended", () => {
-        clearInterval(intervalId);
-      });
-
-      art.on("destroy", () => {
-        clearInterval(intervalId);
-        // console.log("clearing interval");
-      });
-    });
-
-    art.on("video:playing", () => {
-      const interval = setInterval(async () => {
-        art.storage.set(watchId, {
-          aniId: String(info.id),
-          watchId: watchId,
-          title:
-            track.playing?.title || info.title?.romaji || info.title?.english,
-          aniTitle: info.title?.romaji || info.title?.english,
-          image: track?.playing?.img || info?.coverImage?.extraLarge,
-          episode: Number(track.playing?.number),
-          duration: art.duration,
-          timeWatched: art.currentTime,
-          provider: provider,
-          nextId: track?.next?.id,
-          nextNumber: track?.next?.number,
-          dub: dub ? true : false,
-          createdAt: new Date().toISOString(),
-        });
-      }, 5000);
-
-      art.on("video:pause", () => {
-        clearInterval(interval);
-      });
-
-      art.on("video:ended", () => {
-        clearInterval(interval);
-      });
-
-      art.on("destroy", () => {
-        clearInterval(interval);
-      });
-    });
-
-    art.on("video:loadedmetadata", () => {
-      // get raw video width and height
-      // console.log(art.video.videoWidth, art.video.videoHeight);
-      const aspect = calculateAspectRatio(
-        art.video.videoWidth,
-        art.video.videoHeight
-      );
-
-      setAspectRatio(aspect);
-    });
-
-    art.on("video:timeupdate", () => {
-      var currentTime = art.currentTime;
-      // console.log(art.currentTime);
-
-      if (
-        skip?.op &&
-        currentTime >= skip.op.interval.startTime &&
-        currentTime <= skip.op.interval.endTime
-      ) {
-        // Add the layer if it's not already added
-        if (!art.controls["op"]) {
-          // Remove the other control if it's already added
-          if (art.controls["ed"]) {
-            art.controls.remove("ed");
-          }
-
-          // Add the control
-          art.controls.add({
-            name: "op",
-            position: "top",
-            html: '<button class="skip-button">Skip Opening</button>',
-            click: function (...args) {
-              art.seek = skip.op.interval.endTime;
-            },
-          });
-        }
-      } else if (
-        skip?.ed &&
-        currentTime >= skip.ed.interval.startTime &&
-        currentTime <= skip.ed.interval.endTime
-      ) {
-        // Add the layer if it's not already added
-        if (!art.controls["ed"]) {
-          // Remove the other control if it's already added
-          if (art.controls["op"]) {
-            art.controls.remove("op");
-          }
-
-          // Add the control
-          art.controls.add({
-            name: "ed",
-            position: "top",
-            html: '<button class="skip-button">Skip Ending</button>',
-            click: function (...args) {
-              art.seek = skip.ed.interval.endTime;
-            },
-          });
-        }
-      } else {
-        // Remove the controls if they're added
-        if (art.controls["op"]) {
-          art.controls.remove("op");
-        }
-        if (art.controls["ed"]) {
-          art.controls.remove("ed");
-        }
-      }
-    });
-
-    art.on("video:ended", () => {
-      if (!track?.next) return;
-      if (localStorage.getItem("autoplay") === "true") {
-        art.controls.add({
-          name: "next-button",
-          position: "top",
-          html: '<div class="vid-con"><button class="next-button progress">Play Next</button></div>',
-          click: function (...args) {
-            if (track?.next) {
-              router.push(
-                `/en/anime/watch/${
-                  info?.id
-                }/${provider}?id=${encodeURIComponent(track?.next?.id)}&num=${
-                  track?.next?.number
-                }${dub ? `&dub=${dub}` : ""}`
-              );
-            }
-          },
-        });
-
-        const button = document.querySelector(".next-button");
-
-        function stopTimeout() {
-          clearTimeout(timeoutId);
-          button.classList.remove("progress");
-        }
-
-        let timeoutId = setTimeout(() => {
-          art.controls.remove("next-button");
-          if (track?.next) {
-            router.push(
-              `/en/anime/watch/${info?.id}/${provider}?id=${encodeURIComponent(
-                track?.next?.id
-              )}&num=${track?.next?.number}${dub ? `&dub=${dub}` : ""}`
-            );
-          }
-        }, 7000);
-
-        button.addEventListener("mouseover", stopTimeout);
-      }
-    });
-  }
-
-  /**
-   * @type {import("artplayer/types/option").Option}
-   */
-  const option = {
-    url: url,
-    autoplay: autoplay ? true : false,
-    autoSize: false,
-    playbackRate: true,
-    fullscreen: true,
-    autoOrientation: true,
-    icons: icons,
-    setting: true,
-    screenshot: true,
-    hotkey: true,
-    pip: true,
-    airplay: true,
-    lock: true,
-  };
-
-  return (
-    <div
-      id={id}
-      className={`${className} bg-black`}
-      style={{ aspectRatio: aspectRatio }}
-    >
-      <div className="flex-center w-full h-full">
-        {!data?.error && !url && (
-          <div className="flex-center w-full h-full">
-            <Loading />
-          </div>
-        )}
-        {!error ? (
-          !loading && track && url && !data?.error ? (
-            <NewPlayer
-              playerRef={playerRef}
-              res={resolution}
-              quality={source}
-              option={option}
-              provider={provider}
-              track={track}
-              defSize={defSize}
-              defSub={defSub}
-              subSize={subSize}
-              subtitles={subtitle}
-              getInstance={getInstance}
-              style={{
-                width: "100%",
-                height: "100%",
-              }}
-            />
-          ) : (
-            <p className="text-center">
-              {data?.status === 404 && "Not Found"}
-              <br />
-              {data?.error}
-            </p>
-          )
-        ) : (
-          <p className="text-center">
-            Something went wrong while loading the video, <br />
-            please try from other source
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}