Update v4.1.1

4 files changed, 53 insertions, 24 deletions

diff --git a/components/anime/episode.js b/components/anime/episode.js
index e6420a7..6f96c98 100644
--- a/components/anime/episode.js
+++ b/components/anime/episode.js
@@ -262,7 +262,8 @@ export default function AnimeEpisode({
                 className="flex lg:hidden flex-col items-center relative rounded-md bg-secondary py-1.5 px-3 font-karla text-sm hover:ring-1 ring-action cursor-pointer group"
               >
                 {isDub ? "Dub" : "Sub"}
-                <span className="absolute invisible opacity-0 group-hover:opacity-100 group-hover:scale-100 scale-0 group-hover:-translate-y-7 translate-y-0 group-hover:visible rounded-sm shadow top-0 w-28 bg-secondary text-center transition-all transform duration-200 ease-out">
+
+                <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
                   Switch to {isDub ? "Sub" : "Dub"}
                 </span>
               </div>
@@ -298,7 +299,7 @@ export default function AnimeEpisode({
                 className="hidden lg:flex flex-col items-center relative rounded-[3px] bg-secondary py-1 px-3 font-karla text-sm hover:ring-1 ring-action cursor-pointer group"
               >
                 {isDub ? "Dub" : "Sub"}
-                <span className="absolute invisible opacity-0 group-hover:opacity-100 group-hover:scale-100 scale-0 group-hover:-translate-y-7 translate-y-0 group-hover:visible rounded-sm shadow top-0 w-28 bg-secondary text-center transition-all transform duration-200 ease-out">
+                <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
                   Switch to {isDub ? "Sub" : "Dub"}
                 </span>
               </div>
diff --git a/components/anime/mobile/topSection.js b/components/anime/mobile/topSection.js
index 8db1465..761a9fd 100644
--- a/components/anime/mobile/topSection.js
+++ b/components/anime/mobile/topSection.js
@@ -2,7 +2,7 @@ import { PlayIcon, PlusIcon, ShareIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { convertSecondsToTime } from "../../../utils/getTimes";
+import { convertSecondsToTime } from "@/utils/getTimes";
 import Link from "next/link";
 import InfoChip from "./reused/infoChip";
 import Description from "./reused/description";
diff --git a/components/home/content.js b/components/home/content.js
index 9dd4408..651d276 100644
--- a/components/home/content.js
+++ b/components/home/content.js
@@ -256,7 +256,11 @@ export default function Content({
                     className="flex flex-col gap-3 shrink-0 cursor-pointer"
                   >
                     <Link
-                      href={`/${lang}/anime/${anime.id}`}
+                      href={
+                        ids === "listManga"
+                          ? `/en/manga/${anime.id}`
+                          : `/${lang}/anime/${anime.id}`
+                      }
                       className="hover:scale-105 hover:shadow-lg duration-300 ease-out group relative"
                       title={anime.title.romaji}
                     >
@@ -345,7 +349,11 @@ export default function Content({
                     </Link>
                     {ids !== "onGoing" && (
                       <Link
-                        href={`/en/anime/${anime.id}`}
+                        href={
+                          ids === "listManga"
+                            ? `/en/manga/${anime.id}`
+                            : `/en/anime/${anime.id}`
+                        }
                         className="w-[135px] lg:w-[185px] line-clamp-2"
                         title={anime.title.romaji}
                       >
diff --git a/components/watch/player/playerComponent.js b/components/watch/player/playerComponent.js
index d498384..9fe9cd3 100644
--- a/components/watch/player/playerComponent.js
+++ b/components/watch/player/playerComponent.js
@@ -64,6 +64,7 @@ export default function PlayerComponent({
   const [subtitle, setSubtitle] = useState();
   const [defSub, setDefSub] = useState();
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
 
   useEffect(() => {
     setLoading(true);
@@ -212,6 +213,13 @@ export default function PlayerComponent({
       }
     });
 
+    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 });
@@ -436,7 +444,6 @@ export default function PlayerComponent({
    */
   const option = {
     url: url,
-    title: "title",
     autoplay: autoplay ? true : false,
     autoSize: false,
     fullscreen: true,
@@ -445,6 +452,10 @@ export default function PlayerComponent({
     setting: true,
     screenshot: true,
     hotkey: true,
+    pip: true,
+    fastForward: true,
+    airplay: true,
+    lock: true,
   };
 
   return (
@@ -453,24 +464,33 @@ export default function PlayerComponent({
       className={`${className} bg-black`}
       style={{ aspectRatio: aspectRatio }}
     >
-      <div className="w-full h-full">
-        {!loading && track && url && (
-          <NewPlayer
-            playerRef={playerRef}
-            res={resolution}
-            quality={source}
-            option={option}
-            provider={provider}
-            defSize={defSize}
-            defSub={defSub}
-            subSize={subSize}
-            subtitles={subtitle}
-            getInstance={getInstance}
-            style={{
-              width: "100%",
-              height: "100%",
-            }}
-          />
+      <div className="flex-center w-full h-full">
+        {!error ? (
+          !loading &&
+          track &&
+          url && (
+            <NewPlayer
+              playerRef={playerRef}
+              res={resolution}
+              quality={source}
+              option={option}
+              provider={provider}
+              defSize={defSize}
+              defSub={defSub}
+              subSize={subSize}
+              subtitles={subtitle}
+              getInstance={getInstance}
+              style={{
+                width: "100%",
+                height: "100%",
+              }}
+            />
+          )
+        ) : (
+          <p className="text-center">
+            Something went wrong while loading the video, <br />
+            please try from other source
+          </p>
         )}
       </div>
     </div>