diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/anime/episode.js | 5 | ||||
| -rw-r--r-- | components/anime/mobile/topSection.js | 2 | ||||
| -rw-r--r-- | components/home/content.js | 12 | ||||
| -rw-r--r-- | components/watch/player/playerComponent.js | 58 |
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> |