Update v4.1.3

Author: DevanAbinaya

components/home/schedule.js

@@ -50,12 +50,12 @@ export default function Schedule({ data, scheduleData, anime, update }) {
       </h1>
       <div className="rounded mb-5 shadow-md shadow-black">
         <div className="overflow-hidden w-full h-[96px] lg:h-[10rem] rounded relative">
-          <div className="absolute flex flex-col justify-center pl-5 lg:pl-16 rounded z-20 bg-gradient-to-r from-30% from-tersier to-transparent w-full h-full">
+          <div className="absolute flex flex-col lg:gap-1 justify-center pl-5 lg:pl-16 rounded z-20 bg-gradient-to-r from-30% from-tersier to-transparent w-full h-full">
             <h1 className="text-xs lg:text-lg">Coming Up Next!</h1>
-            <div className="w-1/2 lg:w-2/5 hidden lg:block font-medium font-karla leading-[2.9rem] text-white line-clamp-1">
+            <div className="w-1/2 lg:w-2/5 hidden lg:block font-karla font-medium">
               <Link
                 href={`/en/anime/${data.id}`}
-                className="hover:underline underline-offset-4 decoration-2 leading-3 lg:text-[1.5vw] "
+                className="hover:underline underline-offset-4 decoration-2 leading-3 lg:text-[1.5vw]"
               >
                 {data.title.romaji || data.title.english || data.title.native}
               </Link>

components/watch/player/artplayer.js

@@ -2,7 +2,6 @@ import { useEffect, useRef } from "react";
 import Artplayer from "artplayer";
 import Hls from "hls.js";
 import { useWatchProvider } from "@/lib/context/watchPageProvider";
-import { seekBackward, seekForward } from "./component/overlay";
 import artplayerPluginHlsQuality from "artplayer-plugin-hls-quality";
 
 export default function NewPlayer({
@@ -270,8 +269,26 @@ export default function NewPlayer({
             setTheaterMode((prev) => !prev);
           },
         },
-        seekBackward,
-        seekForward,
+        {
+          index: 10,
+          name: "fast-rewind",
+          position: "left",
+          html: '<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M17.959 4.571L10.756 9.52s-.279.201-.279.481s.279.479.279.479l7.203 4.951c.572.38 1.041.099 1.041-.626V5.196c0-.727-.469-1.008-1.041-.625zm-9.076 0L1.68 9.52s-.279.201-.279.481s.279.479.279.479l7.203 4.951c.572.381 1.041.1 1.041-.625v-9.61c0-.727-.469-1.008-1.041-.625z"></path></svg>',
+          tooltip: "Backward 5s",
+          click: function () {
+            art.backward = 5;
+          },
+        },
+        {
+          index: 11,
+          name: "fast-forward",
+          position: "left",
+          html: '<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M9.244 9.52L2.041 4.571C1.469 4.188 1 4.469 1 5.196v9.609c0 .725.469 1.006 1.041.625l7.203-4.951s.279-.199.279-.478c0-.28-.279-.481-.279-.481zm9.356.481c0 .279-.279.478-.279.478l-7.203 4.951c-.572.381-1.041.1-1.041-.625V5.196c0-.727.469-1.008 1.041-.625L18.32 9.52s.28.201.28.481z"></path></svg>',
+          tooltip: "Forward 5s",
+          click: function () {
+            art.forward = 5;
+          },
+        },
       ],
     });
 

components/watch/player/playerComponent.js

@@ -453,7 +453,6 @@ export default function PlayerComponent({
     screenshot: true,
     hotkey: true,
     pip: true,
-    fastForward: true,
     airplay: true,
     lock: true,
   };

components/watch/secondary/episodeLists.js

@@ -14,7 +14,7 @@ export default function EpisodeLists({
   const progress = info.mediaListEntry?.progress;
 
   return (
-    <div className="w-screen lg:max-w-sm xl:max-w-xl">
+    <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 flex-col gap-5 lg:pl-5 py-2 scrollbar-thin px-2 scrollbar-thumb-[#313131] scrollbar-thumb-rounded-full">
         {episode && episode.length > 0 ? (
@@ -44,7 +44,7 @@ export default function EpisodeLists({
                       : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
                   }`}
                 >
-                  <div className="w-[43%] lg:w-[40%] h-[110px] relative rounded-lg z-40 shrink-0 overflow-hidden shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)]">
+                  <div className="w-[43%] lg:w-[42%] h-[110px] relative rounded-lg z-40 shrink-0 overflow-hidden shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)]">
                     <div className="relative">
                       {/* <div className="absolute inset-0 w-full h-full z-40" /> */}
                       <Image
@@ -75,7 +75,7 @@ export default function EpisodeLists({
                               : "0%",
                         }}
                       />
-                      <span className="absolute bottom-2 left-2 font-karla font-bold text-sm">
+                      <span className="absolute bottom-2 left-2 font-karla font-bold text-sm text-white">
                         Episode {item?.number}
                       </span>
                       {item.id == watchId && (

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "moopa",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "private": true,
   "founder": "Factiven",
   "scripts": {

package.json

@@ -442,7 +442,7 @@ export default function Watch({
           <div
             id="default"
             className={`${
-              theaterMode ? "lg:max-w-[80%]" : "lg:max-w-[95%]"
+              theaterMode ? "lg:max-w-[95%] xl:max-w-[80%]" : "lg:max-w-[95%]"
             } w-full flex flex-col lg:flex-row mx-auto`}
           >
             <div id="primary" className="w-full">

pages/en/anime/watch/[...info].js

@@ -404,7 +404,7 @@ export default function Home({ detail, populars, upComing }) {
 
         <div className="lg:mt-16 mt-5 flex flex-col gap-5 items-center">
           <motion.div
-            className="w-screen flex-none lg:w-[87%]"
+            className="w-screen flex-none lg:w-[95%] xl:w-[87%]"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.5, staggerChildren: 0.2 }} // Add staggerChildren prop
@@ -516,7 +516,7 @@ export default function Home({ detail, populars, upComing }) {
           </motion.div>
 
           <motion.div
-            className="w-screen flex-none lg:w-[87%]"
+            className="w-screen flex-none lg:w-[95%] xl:w-[87%]"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.5, staggerChildren: 0.2 }} // Add staggerChildren prop

pages/en/index.js

@@ -2,9 +2,9 @@
 
 This document contains a summary of all significant changes made to this release.
 
-## 🎉 Update v4.1.2
+## 🎉 Update v4.1.3
 
 ### Fixed
 
-- Improvement on episode thumbnail when showing progress
-- Resolved mediaSession not showing on mobile devices
+- Resolved issue with seek button not working
+- Improved homepage and watchpage responsiveness