diff options
Diffstat (limited to 'pages/en')
| -rw-r--r-- | pages/en/anime/[...id].js | 4 | ||||
| -rw-r--r-- | pages/en/anime/watch/[...info].js | 38 |
2 files changed, 36 insertions, 6 deletions
diff --git a/pages/en/anime/[...id].js b/pages/en/anime/[...id].js index 4809ce5..910bbc6 100644 --- a/pages/en/anime/[...id].js +++ b/pages/en/anime/[...id].js @@ -152,7 +152,7 @@ export default function Info({ info, color }) { <MobileNav sessions={session} hideProfile={true} /> <main className="w-screen min-h-screen relative flex flex-col items-center bg-primary gap-5"> <div className="w-screen absolute"> - <div className="bg-gradient-to-t from-primary from-10% to-transparent absolute h-[280px] w-screen z-10 inset-0 backdrop-blur-[2px]" /> + <div className="bg-gradient-to-t from-primary from-10% to-transparent absolute h-[280px] w-screen z-10 inset-0" /> {info?.bannerImage && ( <Image src={info?.bannerImage} @@ -160,7 +160,7 @@ export default function Info({ info, color }) { height={1000} width={1000} blurDataURL={info?.bannerImage} - className="object-cover bg-image w-screen absolute top-0 left-0 h-[250px] brightness-[55%] z-0" + className="object-cover bg-image blur-[2px] w-screen absolute top-0 left-0 h-[250px] brightness-[55%] z-0" /> )} </div> diff --git a/pages/en/anime/watch/[...info].js b/pages/en/anime/watch/[...info].js index f5b4fce..b74a3f2 100644 --- a/pages/en/anime/watch/[...info].js +++ b/pages/en/anime/watch/[...info].js @@ -4,7 +4,7 @@ import { FlagIcon, ShareIcon } from "@heroicons/react/24/solid"; import Details from "@/components/watch/primary/details"; import EpisodeLists from "@/components/watch/secondary/episodeLists"; import { getServerSession } from "next-auth"; -import { useWatchProvider } from "@/lib/hooks/watchPageProvider"; +import { useWatchProvider } from "@/lib/context/watchPageProvider"; import { authOptions } from "../../../api/auth/[...nextauth]"; import { createList, createUser, getEpisode } from "@/prisma/user"; import Link from "next/link"; @@ -289,6 +289,29 @@ export default function Watch({ }; }, [provider, watchId, info?.id]); + useEffect(() => { + const mediaSession = navigator.mediaSession; + if (!mediaSession) return; + + const now = episodeNavigation?.playing; + const poster = now?.img || info?.bannerImage; + const title = now?.title || info?.title?.romaji; + + const artwork = poster + ? [{ src: poster, sizes: "512x512", type: "image/jpeg" }] + : undefined; + + mediaSession.metadata = new MediaMetadata({ + title: title, + artist: `Moopa ${ + title === info?.title?.romaji + ? "- Episode " + epiNumber + : `- ${info?.title?.romaji || info?.title?.english}` + }`, + artwork, + }); + }, [episodeNavigation, info, epiNumber]); + const handleShareClick = async () => { try { if (navigator.share) { @@ -338,7 +361,6 @@ export default function Watch({ <meta name="robots" content="index, follow" /> <meta property="og:type" content="website" /> - <meta property="og:url" content="https://moopa.live/" /> <meta property="og:title" content={`Watch - ${ @@ -347,12 +369,19 @@ export default function Watch({ /> <meta property="og:description" - content="Discover your new favorite anime or manga title! Moopa offers a vast library of high-quality content, accessible on multiple devices and without any interruptions. Start using Moopa today!" + content={episodeNavigation?.playing?.description || info?.description} + /> + <meta + property="og:image" + content={episodeNavigation?.playing?.img || info?.bannerImage} /> - <meta property="og:image" content="/preview.png" /> <meta property="og:site_name" content="Moopa" /> <meta name="twitter:card" content="summary_large_image" /> <meta + name="twitter:image" + content={episodeNavigation?.playing?.img || info?.bannerImage} + /> + <meta name="twitter:title" content={`Watch - ${ episodeNavigation?.playing?.title || info?.title?.english @@ -499,6 +528,7 @@ export default function Watch({ > <EpisodeLists info={info} + session={sessions} map={mapEpisode} providerId={provider} watchId={watchId} |