Update v3.6.4

- Added Manga page with a working tracker for AniList user
- Added schedule component to home page
- Added disqus comment section so you can fight on each other (not recommended)
- Added /id and /en route for english and indonesian subs (id route still work in progress)

2 files changed, 240 insertions, 0 deletions

diff --git a/components/id-components/player/Artplayer.js b/components/id-components/player/Artplayer.js
new file mode 100644
index 0000000..e209433
--- /dev/null
+++ b/components/id-components/player/Artplayer.js
@@ -0,0 +1,59 @@
+import { useEffect, useRef } from "react";
+import Artplayer from "artplayer";
+
+export default function Player({ option, res, getInstance, ...rest }) {
+  const artRef = useRef();
+
+  useEffect(() => {
+    const art = new Artplayer({
+      ...option,
+      container: artRef.current,
+      fullscreen: true,
+      hotkey: true,
+      lock: true,
+      setting: true,
+      playbackRate: true,
+      autoOrientation: true,
+      pip: true,
+      theme: "#f97316",
+      controls: [
+        {
+          name: "fast-rewind",
+          position: "right",
+          html: '<svg class="hi-solid hi-rewind inline-block w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M8.445 14.832A1 1 0 0010 14v-2.798l5.445 3.63A1 1 0 0017 14V6a1 1 0 00-1.555-.832L10 8.798V6a1 1 0 00-1.555-.832l-6 4a1 1 0 000 1.664l6 4z"/></svg>',
+          tooltip: "Backward 5s",
+          click: function () {
+            art.backward = 5;
+          },
+        },
+        {
+          name: "fast-forward",
+          position: "right",
+          html: '<svg class="hi-solid hi-fast-forward inline-block w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M4.555 5.168A1 1 0 003 6v8a1 1 0 001.555.832L10 11.202V14a1 1 0 001.555.832l6-4a1 1 0 000-1.664l-6-4A1 1 0 0010 6v2.798l-5.445-3.63z"/></svg>',
+          tooltip: "Forward 5s",
+          click: function () {
+            art.forward = 5;
+          },
+        },
+      ],
+    });
+
+    art.events.proxy(document, "keydown", (event) => {
+      if (event.key === "f" || event.key === "F") {
+        art.fullscreen = !art.fullscreen;
+      }
+    });
+
+    if (getInstance && typeof getInstance === "function") {
+      getInstance(art);
+    }
+
+    return () => {
+      if (art && art.destroy) {
+        art.destroy(false);
+      }
+    };
+  }, []);
+
+  return <div ref={artRef} {...rest}></div>;
+}
diff --git a/components/id-components/player/VideoPlayerId.js b/components/id-components/player/VideoPlayerId.js
new file mode 100644
index 0000000..1168313
--- /dev/null
+++ b/components/id-components/player/VideoPlayerId.js
@@ -0,0 +1,181 @@
+import Player from "./Artplayer";
+import { useEffect, useState } from "react";
+import { useAniList } from "../../../lib/anilist/useAnilist";
+
+export default function VideoPlayerId({
+  data,
+  id,
+  progress,
+  session,
+  aniId,
+  stats,
+  op,
+  ed,
+  title,
+  poster,
+}) {
+  const [url, setUrl] = useState("");
+  const [source, setSource] = useState([]);
+  const { markProgress } = useAniList(session);
+
+  const [resolution, setResolution] = useState("auto");
+
+  useEffect(() => {
+    const resol = localStorage.getItem("quality");
+    if (resol) {
+      setResolution(resol);
+    }
+
+    async function compiler() {
+      try {
+        const source = data.map((i) => {
+          return {
+            url: `${i.episode}`,
+            html: `${i.size}p`,
+          };
+        });
+
+        const defSource = source.find(
+          (i) =>
+            i?.html === "1080p" ||
+            i?.html === "720p" ||
+            i?.html === "480p" ||
+            i?.html === "360p"
+        );
+
+        if (defSource) {
+          setUrl(defSource.url);
+        }
+
+        setSource(source);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    compiler();
+  }, [data, resolution]);
+
+  return (
+    <>
+      {url && (
+        <Player
+          key={`${url}`}
+          option={{
+            url: `${url}`,
+            quality: source,
+            title: `${title}`,
+            autoplay: true,
+            screenshot: true,
+            poster: poster ? poster : "",
+          }}
+          res={resolution}
+          quality={source}
+          style={{
+            width: "100%",
+            height: "100%",
+            margin: "0 auto 0",
+          }}
+          getInstance={(art) => {
+            art.on("ready", () => {
+              const seek = art.storage.get(id);
+              const seekTime = seek?.time || 0;
+              const duration = art.duration;
+              const percentage = seekTime / duration;
+
+              if (percentage >= 0.9) {
+                art.currentTime = 0;
+                console.log("Video started from the beginning");
+              } else {
+                art.currentTime = seekTime;
+              }
+            });
+
+            art.on("video:timeupdate", () => {
+              if (!session) return;
+              const mediaSession = navigator.mediaSession;
+              const currentTime = art.currentTime;
+              const duration = art.duration;
+              const percentage = currentTime / duration;
+
+              mediaSession.setPositionState({
+                duration: art.duration,
+                playbackRate: art.playbackRate,
+                position: art.currentTime,
+              });
+
+              if (percentage >= 0.9) {
+                // use >= instead of >
+                markProgress(aniId, progress, stats);
+                art.off("video:timeupdate");
+                console.log("Video progress marked");
+              }
+            });
+
+            art.on("video:timeupdate", () => {
+              var currentTime = art.currentTime;
+              // console.log(art.currentTime);
+              art.storage.set(id, {
+                time: art.currentTime,
+                duration: art.duration,
+              });
+
+              if (
+                op &&
+                currentTime >= op.interval.startTime &&
+                currentTime <= 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 = op.interval.endTime;
+                    },
+                  });
+                }
+              } else if (
+                ed &&
+                currentTime >= ed.interval.startTime &&
+                currentTime <= 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 = 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");
+                }
+              }
+            });
+          }}
+        />
+      )}
+    </>
+  );
+}