Update pre-v4.3.0 - Merged Branch pre-push-prev4.3.0 to main (#98)pre-v4.3.0

* Update pre-v4.3.0

* Update aniAdvanceSearch.js

13 files changed, 68 insertions, 44 deletions

diff --git a/README.md b/README.md
index 6be4603..7c79382 100644
--- a/README.md
+++ b/README.md
@@ -110,14 +110,7 @@ git clone https://github.com/DevanAbinaya/Ani-Moopa.git
 npm install
 ```
 
-3. Generate Prisma :
-
-```bash
-npx prisma migrate dev
-npx prisma generate
-```
-
-4. Create `.env` file in the root folder and put this inside the file :
+3. Create `.env` file in the root folder and put this inside the file :
 
 ```bash
 ## AniList
@@ -142,12 +135,19 @@ DATABASE_URL="Your postgresql connection url"
 REDIS_URL="rediss://username:password@host:port"
 ```
 
-5. Add this endpoint as Redirect Url on AniList Developer :
+4. Add this endpoint as Redirect Url on AniList Developer :
 
 ```bash
 https://your-website-domain/api/auth/callback/AniListProvider
 ```
 
+5. Generate Prisma :
+
+```bash
+npx prisma migrate dev
+npx prisma generate
+```
+
 6. Start local server :
 
 ```bash
diff --git a/components/anime/viewMode/thumbnailDetail.js b/components/anime/viewMode/thumbnailDetail.js
index 494a89f..d8cbfcc 100644
--- a/components/anime/viewMode/thumbnailDetail.js
+++ b/components/anime/viewMode/thumbnailDetail.js
@@ -18,6 +18,12 @@ export default function ThumbnailDetail({
   let prog = (time / duration) * 100;
   if (prog > 90) prog = 100;
 
+  const parsedImage = image
+    ? image?.includes("null")
+      ? info.coverImage?.extraLarge
+      : image
+    : info.coverImage?.extraLarge || null;
+
   return (
     <Link
       key={index}
@@ -28,9 +34,9 @@ export default function ThumbnailDetail({
     >
       <div className="w-[43%] lg:w-[30%] relative shrink-0 z-40 rounded-lg overflow-hidden shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)]">
         <div className="relative">
-          {image && (
+          {parsedImage && (
             <Image
-              src={image || ""}
+              src={parsedImage || ""}
               alt={`Episode ${epi?.number} Thumbnail`}
               width={520}
               height={236}
diff --git a/components/anime/viewMode/thumbnailOnly.js b/components/anime/viewMode/thumbnailOnly.js
index 1b403fa..c7fe674 100644
--- a/components/anime/viewMode/thumbnailOnly.js
+++ b/components/anime/viewMode/thumbnailOnly.js
@@ -14,6 +14,12 @@ export default function ThumbnailOnly({
   const duration = artStorage?.[episode?.id]?.duration;
   let prog = (time / duration) * 100;
   if (prog > 90) prog = 100;
+
+  const parsedImage = image
+    ? image?.includes("null")
+      ? info.coverImage?.extraLarge
+      : image
+    : info.coverImage?.extraLarge || null;
   return (
     <Link
       // key={index}
@@ -37,9 +43,9 @@ export default function ThumbnailOnly({
         }}
       />
       {/* <div className="absolute inset-0 bg-black z-30 opacity-20" /> */}
-      {image && (
+      {parsedImage && (
         <Image
-          src={image || ""}
+          src={parsedImage || ""}
           alt={`Episode ${episode?.number} Thumbnail`}
           width={500}
           height={500}
diff --git a/components/home/content.js b/components/home/content.js
index 1cf4c5f..d2498f6 100644
--- a/components/home/content.js
+++ b/components/home/content.js
@@ -312,7 +312,7 @@ export default function Content({
                         <Fragment>
                           <Image
                             src="/svg/episode-badge.svg"
-                            alt="episode-bade"
+                            alt="episode-badge"
                             width={200}
                             height={100}
                             className="w-24 lg:w-32 absolute top-1 -right-[12px] lg:-right-[17px] z-40"
diff --git a/components/watch/secondary/episodeLists.js b/components/watch/secondary/episodeLists.js
index 485b43e..a676be0 100644
--- a/components/watch/secondary/episodeLists.js
+++ b/components/watch/secondary/episodeLists.js
@@ -20,7 +20,7 @@ export default function EpisodeLists({
 
   return (
     <div className="w-screen lg:max-w-sm xl:max-w-lg">
-      <div className="flex gap-4 pl-5 pb-5">
+      <div className="flex gap-4 px-3 lg:pl-5 pb-5">
         <button
           disabled={!track?.next}
           onClick={() => {
diff --git a/lib/anify/getMangaId.js b/lib/anify/getMangaId.js
index e18da65..6b1445f 100644
--- a/lib/anify/getMangaId.js
+++ b/lib/anify/getMangaId.js
@@ -8,7 +8,7 @@ export async function fetchInfo(romaji, english, native) {
       }&type=manga`
     );
 
-    const findManga = getManga.find(
+    const findManga = getManga?.results?.find(
       (manga) =>
         manga.title.romaji === romaji ||
         manga.title.english === english ||
diff --git a/lib/anilist/aniAdvanceSearch.js b/lib/anilist/aniAdvanceSearch.js
index 7e684af..ccfbd27 100644
--- a/lib/anilist/aniAdvanceSearch.js
+++ b/lib/anilist/aniAdvanceSearch.js
@@ -24,8 +24,12 @@ export async function aniAdvanceSearch({
   }, {});
 
   if (type === "MANGA") {
+    const controller = new AbortController();
+    const signal = controller.signal;
+
     const response = await fetch("https://api.anify.tv/search-advanced", {
       method: "POST",
+      signal: signal,
       body: JSON.stringify({
         sort: "averageRating",
         sortDirection: "DESC",
@@ -42,13 +46,13 @@ export async function aniAdvanceSearch({
     const data = await response.json();
     return {
       pageInfo: {
-        hasNextPage: data.length >= (perPage ?? 20),
+        hasNextPage: page < data.total,
         currentPage: page,
-        lastPage: Math.ceil(data.length / (perPage ?? 20)),
+        lastPage: Math.ceil(data.lastPage),
         perPage: perPage ?? 20,
-        total: data.length,
+        total: data.total,
       },
-      media: data.map((item) => ({
+      media: data.results?.map((item) => ({
         averageScore: item.averageRating,
         bannerImage: item.bannerImage,
         chapters: item.totalChapters,
diff --git a/package-lock.json b/package-lock.json
index b2fda52..8d54e65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "moopa",
-  "version": "4.2.5",
+  "version": "4.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "moopa",
-      "version": "4.2.5",
+      "version": "4.3.0",
       "dependencies": {
         "@apollo/client": "^3.7.3",
         "@headlessui/react": "^1.7.15",
diff --git a/package.json b/package.json
index 986217f..d209c0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "moopa",
-  "version": "4.2.5",
+  "version": "4.3.0",
   "private": true,
   "founder": "Factiven",
   "scripts": {
diff --git a/pages/en/manga/[...id].js b/pages/en/manga/[...id].js
index 6d2b016..5648b2c 100644
--- a/pages/en/manga/[...id].js
+++ b/pages/en/manga/[...id].js
@@ -254,7 +254,7 @@ export async function getServerSideProps(context) {
     const datas = await getAnifyInfo(mangadexId);
 
     aniId =
-      datas.mappings.filter((i) => i.providerId === "anilist")[0]?.id || null;
+      datas.mappings?.filter((i) => i.providerId === "anilist")[0]?.id || null;
 
     if (!aniId) {
       info = datas;
@@ -363,7 +363,7 @@ export async function getServerSideProps(context) {
       data = await getAnifyInfo(mangadexId);
 
       const aniListId =
-        data.mappings.filter((i) => i.providerId === "anilist")[0]?.id || null;
+        data.mappings?.filter((i) => i.providerId === "anilist")[0]?.id || null;
 
       const response = await fetch("https://graphql.anilist.co/", {
         method: "POST",
@@ -389,8 +389,7 @@ export async function getServerSideProps(context) {
         color: textColor,
       };
 
-      if(redis)
-      {
+      if (redis) {
         await redis.set(
           `mangaPage:${mangadexId}`,
           JSON.stringify({ data, info, color }),
diff --git a/pre-release.md b/pre-release.md
index e6829ef..0e0fd4f 100644
--- a/pre-release.md
+++ b/pre-release.md
@@ -2,14 +2,16 @@
 
 This pre-release update is intended exclusively for our GitHub repository code. When we mark a release as "pre-release," it signifies that our website is up-to-date with this pre-release code. However, please note that this code is not yet officially released to the public.
 
-## 🎉 Update pre-v4.1.4
+## 🎉 Update pre-v4.3.0
 
-## Added
+## What's Changed
 
-- Added dubbed gogoanime
-- Added new feature to search episode by image
-
-### Fixed
-
-- Greatly improved search ui/ux
-- Resolved issue: 9anime and zoro providers doesn't works
+- Added changelogs section
+- Added recommendations based on user lists (must be logged in)
+- New Player!
+  - Double tap to seek
+  - Preview thumbnail (only zoro providers support this atm)
+- Removed 9anime provider
+- Fixed missing episodes thumbnail
+- Fixed manga search and getting manga using anilist id
+- And other minor bug fixes!
diff --git a/utils/getTimes.js b/utils/getTimes.js
index 491d139..95df803 100644
--- a/utils/getTimes.js
+++ b/utils/getTimes.js
@@ -109,7 +109,7 @@ export const timeStamptoHour = (timestamp) => {
 
 export function unixTimestampToRelativeTime(unixTimestamp) {
   const now = Math.floor(Date.now() / 1000); // Current Unix timestamp in seconds
-  const secondsAgo = now - unixTimestamp;
+  let secondsDifference = now - unixTimestamp;
 
   const intervals = [
     { label: "year", seconds: 31536000 },
@@ -121,12 +121,14 @@ export function unixTimestampToRelativeTime(unixTimestamp) {
     { label: "second", seconds: 1 },
   ];
 
+  const isFuture = secondsDifference < 0;
+  secondsDifference = Math.abs(secondsDifference);
+
   for (const interval of intervals) {
-    const count = Math.floor(secondsAgo / interval.seconds);
+    const count = Math.floor(secondsDifference / interval.seconds);
     if (count >= 1) {
-      return count === 1
-        ? ` ${count} ${interval.label} ago`
-        : ` ${count} ${interval.label}s ago`;
+      const label = count === 1 ? interval.label : `${interval.label}s`;
+      return isFuture ? `${count} ${label} from now` : `${count} ${label} ago`;
     }
   }
 
diff --git a/utils/imageUtils.js b/utils/imageUtils.js
index 56c98fb..8025d5b 100644
--- a/utils/imageUtils.js
+++ b/utils/imageUtils.js
@@ -24,10 +24,15 @@ export function getRandomId() {
 export function truncateImgUrl(url) {
   // Find the index of .png if not found find the index of .jpg
   let index =
-    url.indexOf(".png") !== -1 ? url.indexOf(".png") : url.indexOf(".jpg");
+    url?.indexOf(".png") !== -1 ? url?.indexOf(".png") : url?.indexOf(".jpg");
+
   if (index !== -1) {
-    // If .png is found
-    url = url.slice(0, index + 4); // Slice the string from the start to the index of .png plus 4 (the length of .png)
+    // If .png or .jpg is found
+    url = url?.slice(0, index + 4); // Slice the string from the start to the index of .png or .jpg plus 4 (the length of .png or .jpg)
+  } else {
+    // If .png or .jpg is not found
+    return url; // Return the original url string
   }
+
   return url;
 }