Update v4.2.0 (#93)v4.2.0

5 files changed, 107 insertions, 35 deletions

diff --git a/components/watch/player/artplayer.js b/components/watch/player/artplayer.js
index 4ae8aa1..666c103 100644
--- a/components/watch/player/artplayer.js
+++ b/components/watch/player/artplayer.js
@@ -46,7 +46,7 @@ export default function NewPlayer({
       customType: {
         m3u8: playM3u8,
       },
-      ...(provider === "zoro" && {
+      ...(subtitles?.length > 0 && {
         subtitle: {
           url: `${defSub}`,
           // type: "vtt",
@@ -131,7 +131,7 @@ export default function NewPlayer({
             return item.html;
           },
         },
-        provider === "zoro" && {
+        subtitles?.length > 0 && {
           html: "Subtitles",
           icon: '<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.413-.588T2 18V6q0-.825.588-1.413T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.588 1.413T20 20H4Zm2-4h8v-2H6v2Zm10 0h2v-2h-2v2ZM6 12h2v-2H6v2Zm4 0h8v-2h-8v2Z"></path></svg>',
           width: 300,
@@ -261,7 +261,7 @@ export default function NewPlayer({
           index: 11,
           position: "right",
           tooltip: "Theater (t)",
-          html: '<p class="theater"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M19 3H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-1 12H2V5h16v10z"></path></svg></p>',
+          html: '<i class="theater"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M19 3H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-1 12H2V5h16v10z"></path></svg></i>',
           click: function (...args) {
             setPlayerState((prev) => ({
               ...prev,
@@ -379,6 +379,8 @@ export default function NewPlayer({
         art.destroy(false);
       }
     };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return <div ref={artRef} {...rest}></div>;
diff --git a/components/watch/player/component/controls/subtitle.js b/components/watch/player/component/controls/subtitle.js
deleted file mode 100644
index 02075f7..0000000
--- a/components/watch/player/component/controls/subtitle.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { useState } from "react";
-
-export default function getSubtitles() {}
diff --git a/components/watch/player/playerComponent.js b/components/watch/player/playerComponent.js
index 37c5810..665919b 100644
--- a/components/watch/player/playerComponent.js
+++ b/components/watch/player/playerComponent.js
@@ -4,6 +4,7 @@ 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));
@@ -74,20 +75,18 @@ export default function PlayerComponent({
       setResolution(resol);
     }
 
-    if (provider === "zoro") {
-      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 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);
-    }
+    const defSize = size?.find((i) => i?.default === true);
+    setDefSize(defSize);
+    setSubSize(size);
 
     async function compiler() {
       try {
@@ -114,19 +113,26 @@ export default function PlayerComponent({
           setUrl(defSource.url);
         }
 
-        if (provider === "zoro") {
-          const subtitle = data?.subtitles
-            .filter((subtitle) => subtitle.lang !== "Thumbnails")
-            .map((subtitle) => {
-              const isEnglish = subtitle.lang === "English";
-              return {
-                ...(isEnglish && { default: true }),
-                url: subtitle.url,
-                html: `${subtitle.lang}`,
-              };
-            });
+        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}`,
+            };
+          });
 
-          const defSub = data?.subtitles.find((i) => i.lang === "English");
+        if (subtitle) {
+          const defSub = data?.subtitles.find(
+            (i) => i.lang === "English" || i.lang === "English / English (US)"
+          );
 
           setDefSub(defSub?.url);
 
@@ -162,6 +168,8 @@ export default function PlayerComponent({
       setSubtitle([]);
       setLoading(true);
     };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [provider, data]);
 
   /**
@@ -171,6 +179,17 @@ export default function PlayerComponent({
     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();
@@ -465,10 +484,13 @@ export default function PlayerComponent({
       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 && (
+          !loading && track && url && !data?.error ? (
             <NewPlayer
               playerRef={playerRef}
               res={resolution}
@@ -486,6 +508,12 @@ export default function PlayerComponent({
                 height: "100%",
               }}
             />
+          ) : (
+            <p className="text-center">
+              {data?.status === 404 && "Not Found"}
+              <br />
+              {data?.error}
+            </p>
           )
         ) : (
           <p className="text-center">
diff --git a/components/watch/player/utils/getZoroSource.js b/components/watch/player/utils/getZoroSource.js
deleted file mode 100644
index e69de29..0000000
--- a/components/watch/player/utils/getZoroSource.js
+++ /dev/null
diff --git a/components/watch/secondary/episodeLists.js b/components/watch/secondary/episodeLists.js
index 41f1a76..485b43e 100644
--- a/components/watch/secondary/episodeLists.js
+++ b/components/watch/secondary/episodeLists.js
@@ -1,6 +1,8 @@
 import Skeleton from "react-loading-skeleton";
 import Image from "next/image";
 import Link from "next/link";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { useRouter } from "next/router";
 
 export default function EpisodeLists({
   info,
@@ -9,13 +11,56 @@ export default function EpisodeLists({
   watchId,
   episode,
   artStorage,
+  track,
   dub,
 }) {
   const progress = info.mediaListEntry?.progress;
 
+  const router = useRouter();
+
   return (
     <div className="w-screen lg:max-w-sm xl:max-w-lg">
-      <h1 className="text-xl font-karla pl-5 pb-5 font-semibold">Up Next</h1>
+      <div className="flex gap-4 pl-5 pb-5">
+        <button
+          disabled={!track?.next}
+          onClick={() => {
+            router.push(
+              `/en/anime/watch/${info.id}/${providerId}?id=${
+                track?.next?.id
+              }&num=${track?.next?.number}${dub ? `&dub=${dub}` : ""}`
+            );
+          }}
+          className="text-xl font-karla font-semibold"
+        >
+          Next Episode {">"}
+        </button>
+        {episode && (
+          <div className="relative flex gap-2 items-center group">
+            <select
+              value={track?.playing?.number}
+              onChange={(e) => {
+                const selectedEpisode = episode.find(
+                  (episode) => episode.number === parseInt(e.target.value)
+                );
+
+                router.push(
+                  `/en/anime/watch/${info.id}/${providerId}?id=${
+                    selectedEpisode.id
+                  }&num=${selectedEpisode.number}${dub ? `&dub=${dub}` : ""}`
+                );
+              }}
+              className="flex items-center text-sm gap-5 rounded-[3px] bg-secondary py-1 px-3 pr-8 font-karla appearance-none cursor-pointer outline-none focus:ring-1 focus:ring-action group-hover:ring-1 group-hover:ring-action"
+            >
+              {episode?.map((x) => (
+                <option key={x.id} value={x.number}>
+                  Episode {x.number}
+                </option>
+              ))}
+            </select>
+            <ChevronDownIcon className="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 pointer-events-none" />
+          </div>
+        )}
+      </div>
       <div className="flex flex-col gap-5 lg:pl-5 py-2 scrollbar-thin px-2 scrollbar-thumb-[#313131] scrollbar-thumb-rounded-full">
         {episode && episode.length > 0 ? (
           map?.some(