Update v4.2.0 (#93)

.env.example

@@ -10,7 +10,6 @@ NEXTAUTH_URL="for development use http://localhost:3000/ and for production use
 ## NextJS
 PROXY_URI="This is what I use for proxying video https://github.com/chaycee/M3U8Proxy. Don't put / at the end of the url."
 API_URI="host your own API from this repo https://github.com/consumet/api.consumet.org. Don't put / at the end of the url."
-API_KEY="this API key is used for schedules, anime and manga page. get the key from https://anify.tv/discord"
 DISQUS_SHORTNAME='put your disqus shortname here (optional)'
 # ADMIN_USERNAME=""
 

.eslintrc.json

@@ -1,6 +1,8 @@
 {
   "extends": "next/core-web-vitals",
+  // ignore react-hooks/exhaustive-deps
   "rules": {
+    "react-hooks/exhaustive-deps": "off",
     "react/no-unescaped-entities": 0,
     "react/no-unknown-property": ["error", { "ignore": ["css"] }]
   }

.gitignore

@@ -8,7 +8,7 @@
 
 # testing
 /coverage
-/pages/test.js
+/pages/en/test.js
 /components/devComp
 
 # next.js

.prettierrc.json

@@ -1 +1,4 @@
-{}
+{
+  "bracketSpacing": true,
+  "printWidth": 80
+}

README.md

@@ -41,7 +41,11 @@
 </p>
 
 <h3 align="center">Watch Page</h3>
-<img src="https://github.com/Ani-Moopa/Moopa/assets/97084324/c654aa13-76d7-47fe-ac02-924fbbb40f76"/>
+<p align="center">Normal Mode</p>
+<img src="https://github.com/Ani-Moopa/Moopa/assets/97084324/03b2c9c7-eb25-4f2c-8f26-a9ae817bfbaa"/>
+<br/>
+<p align="center">Theater Mode</p>
+<img src="https://github.com/Ani-Moopa/Moopa/assets/97084324/767a0335-f6a3-4969-b415-3c45d07cce64"/>
 
 <h3 align="center">Manga Reader</h3>
 <img src="https://github.com/DevanAbinaya/Ani-Moopa/assets/97084324/ccd2ee11-4ee3-411c-b634-d48c84f1a9e2"/>
@@ -54,13 +58,23 @@
 
 ## Features
 
-- Free ad-supported streaming service
-- Anime tracking through Anilist API
-- Skip OP/ED buttons
-- Dub Anime support
-- User-friendly interface
-- Mobile-responsive design
-- PWA supported
+- General
+  - Free ad-supported streaming service
+  - Dub Anime support
+  - User-friendly interface
+  - Auto sync with AniList
+  - Add Anime/Manga to your AniList
+  - Scene Searching powered by [trace.moe](https://trace.moe)
+  - PWA supported
+  - Mobile responsive
+  - Fast page load
+- Watch Page
+  - Player
+    - Autoplay next episode
+    - Skip op/ed button
+    - Theater mode
+  - Comment section
+- Profile page to see your watch list
 
 ## To Do List
 
@@ -116,9 +130,7 @@ NEXTAUTH_URL="for development use http://localhost:3000/ and for production use
 ## NextJS
 PROXY_URI="This is what I use for proxying video https://github.com/chaycee/M3U8Proxy. Don't put / at the end of the url."
 API_URI="host your own API from this repo https://github.com/consumet/api.consumet.org. Don't put / at the end of the url."
-API_KEY="this API key is used for schedules, anime and manga page. get the key from https://anify.tv/discord"
 DISQUS_SHORTNAME='put your disqus shortname here (optional)'
-# ADMIN_USERNAME=""
 
 ## Prisma
 DATABASE_URL="Your postgresql connection url"
@@ -131,7 +143,7 @@ REDIS_URL="rediss://username:password@host:port"
 5. Add this endpoint as Redirect Url on AniList Developer :
 
 ```bash
-https://your-website-url/api/auth/callback/AniListProvider
+https://your-website-domain/api/auth/callback/AniListProvider
 ```
 
 6. Start local server :

components/admin/dashboard/index.js

@@ -1,4 +1,6 @@
-import React, { useState } from "react";
+import Link from "next/link";
+import React, { useEffect, useState } from "react";
+import { toast } from "sonner";
 
 export default function AdminDashboard({
   animeCount,
@@ -10,13 +12,90 @@ export default function AdminDashboard({
   const [selectedTime, setSelectedTime] = useState("");
   const [unixTimestamp, setUnixTimestamp] = useState(null);
 
-  const handleSubmit = (e) => {
+  const [broadcast, setBroadcast] = useState();
+  const [reportId, setReportId] = useState();
+
+  useEffect(() => {
+    async function getBroadcast() {
+      const res = await fetch("/api/v2/admin/broadcast", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Broadcast-Key": "get-broadcast",
+        },
+      });
+      const data = await res.json();
+      if (data) {
+        setBroadcast(data);
+      }
+    }
+    getBroadcast();
+  }, []);
+
+  const handleSubmit = async (e) => {
     e.preventDefault();
 
+    let unixTime;
+
     if (selectedTime) {
-      const unixTime = Math.floor(new Date(selectedTime).getTime() / 1000);
+      unixTime = Math.floor(new Date(selectedTime).getTime() / 1000);
       setUnixTimestamp(unixTime);
     }
+
+    const res = await fetch("/api/v2/admin/broadcast", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Broadcast-Key": "get-broadcast",
+      },
+      body: JSON.stringify({
+        message,
+        startAt: unixTime,
+        show: true,
+      }),
+    });
+
+    const data = await res.json();
+
+    console.log({ message, unixTime, data });
+  };
+
+  const handleRemove = async () => {
+    try {
+      const res = await fetch("/api/v2/admin/broadcast", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Broadcast-Key": "get-broadcast",
+        },
+      });
+      const data = await res.json();
+      console.log(data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleResolved = async () => {
+    try {
+      console.log(reportId);
+      if (!reportId) return toast.error("reportId is required");
+      const res = await fetch("/api/v2/admin/bug-report", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          reportId,
+        }),
+      });
+      const data = await res.json();
+      if (res.status === 200) {
+        toast.success(data.message);
+      }
+    } catch (error) {
+      console.log(`error while resolving ${error}`);
+    }
   };
   return (
     <div className="flex flex-col gap-5 px-5 py-10 h-full">
@@ -39,7 +118,21 @@ export default function AdminDashboard({
       </div>
       <div className="grid grid-cols-2 gap-5 h-full">
         <div className="flex flex-col gap-2">
-          <p className="font-semibold">Broadcast</p>
+          <p className="flex items-center gap-2 font-semibold">
+            Broadcast
+            <span className="relative w-5 h-5 flex-center shrink-0">
+              <span
+                className={`absolute animate-ping inline-flex h-full w-full rounded-full ${
+                  broadcast?.show === true ? "bg-green-500" : "hidden"
+                } opacity-75`}
+              ></span>
+              <span
+                className={`relative inline-flex rounded-full h-3 w-3 ${
+                  broadcast?.show === true ? "bg-green-500" : "bg-red-500"
+                }`}
+              ></span>
+            </span>
+          </p>
           <div className="flex flex-col justify-between bg-secondary rounded p-5 h-full">
             <form onSubmit={handleSubmit}>
               <div className="mb-4">
@@ -70,16 +163,24 @@ export default function AdminDashboard({
                   id="selectedTime"
                   value={selectedTime}
                   onChange={(e) => setSelectedTime(e.target.value)}
-                  required
                   className="w-full px-3 py-2 border rounded-md focus:outline-none text-black"
                 />
               </div>
-              <button
-                type="submit"
-                className="bg-image text-white py-2 px-4 rounded-md hover:bg-opacity-80 transition duration-300"
-              >
-                Submit
-              </button>
+              <div className="flex font-karla font-semibold gap-2">
+                <button
+                  type="submit"
+                  className="bg-image text-white py-2 px-4 rounded-md hover:bg-opacity-80 transition duration-300"
+                >
+                  Broadcast
+                </button>
+                <button
+                  type="button"
+                  onClick={handleRemove}
+                  className="bg-red-700 text-white py-2 px-4 rounded-md hover:bg-opacity-80 transition duration-300"
+                >
+                  Remove
+                </button>
+              </div>
             </form>
             {unixTimestamp && (
               <p>
@@ -95,40 +196,85 @@ export default function AdminDashboard({
               {report?.map((i, index) => (
                 <div
                   key={index}
-                  className="odd:bg-primary/80 even:bg-primary/40 p-2 flex justify-between items-center"
+                  className="odd:bg-primary/80 even:bg-primary/40 hover:odd:bg-image/20 hover:even:bg-image/20 p-2 flex justify-between items-center"
                 >
-                  {i.desc}{" "}
-                  {i.severity === "Low" && (
-                    <span className="relative w-5 h-5 flex-center shrink-0">
-                      {/* <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-500 opacity-75"></span> */}
-                      <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
-                    </span>
-                  )}
-                  {i.severity === "Medium" && (
-                    <span className="relative w-5 h-5 flex-center shrink-0">
-                      {/* <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-500 opacity-75"></span> */}
-                      <span className="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span>
-                    </span>
-                  )}
-                  {i.severity === "High" && (
-                    <span className="relative w-5 h-5 flex-center shrink-0">
-                      {/* <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-500 opacity-75"></span> */}
-                      <span className="relative animate-pulse inline-flex rounded-full h-3 w-3 bg-rose-500"></span>
-                    </span>
-                  )}
-                  {i.severity === "Critical" && (
-                    <span className="relative w-5 h-5 flex-center shrink-0">
-                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-900 opacity-75"></span>
-                      <span className="relative inline-flex rounded-full h-3 w-3 bg-red-900"></span>
+                  <Link
+                    href={i.url}
+                    className="flex font-inter items-center gap-2 group"
+                  >
+                    {i.desc}{" "}
+                    <span className="w-4 h-4 text-image group-hover:text-white">
+                      <svg
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth={1.5}
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+                        />
+                      </svg>
                     </span>
-                  )}
+                  </Link>
+                  <div className="flex items-center gap-2">
+                    {i.severity === "Low" && (
+                      <span className="relative w-5 h-5 flex-center shrink-0">
+                        {/* <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-500 opacity-75"></span> */}
+                        <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
+                      </span>
+                    )}
+                    {i.severity === "Medium" && (
+                      <span className="relative w-5 h-5 flex-center shrink-0">
+                        {/* <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-500 opacity-75"></span> */}
+                        <span className="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span>
+                      </span>
+                    )}
+                    {i.severity === "High" && (
+                      <span className="relative w-5 h-5 flex-center shrink-0">
+                        {/* <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-500 opacity-75"></span> */}
+                        <span className="relative animate-pulse inline-flex rounded-full h-3 w-3 bg-rose-500"></span>
+                      </span>
+                    )}
+                    {i.severity === "Critical" && (
+                      <span className="relative w-5 h-5 flex-center shrink-0">
+                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-900 opacity-75"></span>
+                        <span className="relative inline-flex rounded-full h-3 w-3 bg-red-900"></span>
+                      </span>
+                    )}
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setReportId(i?.id);
+                        handleResolved();
+                      }}
+                      className="w-6 h-6 hover:text-green-500"
+                    >
+                      <svg
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth={1.5}
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M4.5 12.75l6 6 9-13.5"
+                        />
+                      </svg>
+                    </button>
+                  </div>
                 </div>
               ))}
             </div>
           </div>
         </div>
       </div>
-      <div className="w-full h-full">a</div>
     </div>
   );
 }

components/admin/meta/AppendMeta.js

@@ -1,7 +1,7 @@
 import Loading from "@/components/shared/loading";
 import Image from "next/image";
 import { useState } from "react";
-import { toast } from "react-toastify";
+import { toast } from "sonner";
 
 // Define a function to convert the data
 function convertData(episodes) {
@@ -217,6 +217,7 @@ export default function AppendMeta({ api }) {
                       </p>
                       <Image
                         src={i.image}
+                        alt="query-image"
                         width={500}
                         height={500}
                         className="w-[160px] h-[210px] object-cover"