From f287e8225892266acf162ba94ee31ce623e06890 Mon Sep 17 00:00:00 2001 From: Factiven Date: Fri, 28 Apr 2023 13:36:29 +0700 Subject: Editor List v0.2 --- components/listEditor.js | 15 ++++++++++----- components/useAlert.js | 6 ++++-- 2 files changed, 14 insertions(+), 7 deletions(-) (limited to 'components') diff --git a/components/listEditor.js b/components/listEditor.js index f9e8ab8..d90e481 100644 --- a/components/listEditor.js +++ b/components/listEditor.js @@ -9,6 +9,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { const handleSubmit = async (e) => { e.preventDefault(); + console.log("Submitting", status, progress); try { const response = await fetch("https://graphql.anilist.co/", { method: "POST", @@ -29,12 +30,16 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { `, variables: { mediaId: animeId, - progress: progress ? parseInt(progress) : null, + progress: progress, status: status || null, }, }), }); const { data } = await response.json(); + if (data.SaveMediaListEntry === null) { + showAlert("Something went wrong", "error"); + return; + } console.log("Saved media list entry", data); // success(); showAlert("Media list entry saved", "success"); @@ -45,7 +50,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { }; return ( -
+
{message && ( { id="status" value={status} onChange={(e) => setStatus(e.target.value)} - className="rounded-md px-2 py-1" + className="rounded-md px-2 py-1 bg-[#363642]" > @@ -92,13 +97,13 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { value={progress} max={max} onChange={(e) => setProgress(e.target.value)} - className="rounded-md px-2 py-1" + className="rounded-md px-2 py-1 bg-[#363642]" min="0" />
diff --git a/components/useAlert.js b/components/useAlert.js index 7426096..fa82c42 100644 --- a/components/useAlert.js +++ b/components/useAlert.js @@ -10,8 +10,10 @@ const useAlert = () => { setTimeout(() => { setMessage(""); setType(""); - window.location.reload(); - }, 5000); + if (type === "success") { + window.location.reload(); + } + }, 3000); }; return { message, type, showAlert }; -- cgit v1.2.3 From b546c63c38c608cfbbf68ddd1aa4d1327489d91c Mon Sep 17 00:00:00 2001 From: Factiven Date: Fri, 28 Apr 2023 17:31:15 +0700 Subject: Editor List v0.4 --- components/listEditor.js | 85 +++++++++++++++++++++++++++--------------------- 1 file changed, 48 insertions(+), 37 deletions(-) (limited to 'components') diff --git a/components/listEditor.js b/components/listEditor.js index d90e481..ed54987 100644 --- a/components/listEditor.js +++ b/components/listEditor.js @@ -50,7 +50,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { }; return ( -
+
{message && ( { exit={{ opacity: 0, y: 10 }} className={`${ type === "success" ? "bg-green-500" : "bg-red-500" - } text-white px-4 py-1 mb-4 rounded-md`} + } text-white px-4 py-1 mb-4 rounded-md text-sm sm:text-base`} > {message} )} +
+ List Editor +
-
- - -
-
- - setProgress(e.target.value)} - className="rounded-md px-2 py-1 bg-[#363642]" - min="0" - /> +
+
+ + +
+
+ + setProgress(e.target.value)} + className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" + min="0" + /> +
-- cgit v1.2.3 From ad5721b03983e2db4c69738b82d2a871ebbb1065 Mon Sep 17 00:00:00 2001 From: Factiven Date: Fri, 28 Apr 2023 17:51:36 +0700 Subject: Editor List v0.5 --- components/listEditor.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'components') diff --git a/components/listEditor.js b/components/listEditor.js index ed54987..41a3172 100644 --- a/components/listEditor.js +++ b/components/listEditor.js @@ -9,7 +9,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { const handleSubmit = async (e) => { e.preventDefault(); - console.log("Submitting", status, progress); + console.log("Submitting", status?.name, progress); try { const response = await fetch("https://graphql.anilist.co/", { method: "POST", @@ -81,11 +81,10 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { setStatus(e.target.value)} - className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" - > - - - - - - -
-
- - setProgress(e.target.value)} - className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" - min="0" +
+ {image && ( +
+ image + image
-
- - +
+
+ + +
+
+ + setProgress(e.target.value)} + className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" + min="0" + /> +
+
+ + +
); }; diff --git a/components/modal.js b/components/modal.js index 0a9d349..f237d77 100644 --- a/components/modal.js +++ b/components/modal.js @@ -3,13 +3,13 @@ export default function Modal({ open, onClose, children }) {
e.stopPropagation()} className={`shadow rounded-xl p-6 transition-all ${ - open ? "scale-125 opacity-100" : "scale-100 opacity-0" + open ? "scale-100 opacity-100" : "scale-75 opacity-0" }`} > {children} -- cgit v1.2.3 From a22aa58746cc852331d48e1d9d3c00f5e09564a1 Mon Sep 17 00:00:00 2001 From: Factiven Date: Sat, 29 Apr 2023 17:42:24 +0700 Subject: Editor List v0.7 --- components/listEditor.js | 166 ++++++++++++++++++++++++----------------------- components/modal.js | 2 +- 2 files changed, 86 insertions(+), 82 deletions(-) (limited to 'components') diff --git a/components/listEditor.js b/components/listEditor.js index 64ca632..50a62c5 100644 --- a/components/listEditor.js +++ b/components/listEditor.js @@ -1,6 +1,6 @@ import { useState } from "react"; import useAlert from "./useAlert"; -import { motion as m } from "framer-motion"; +import { AnimatePresence, motion as m } from "framer-motion"; import Image from "next/image"; const ListEditor = ({ animeId, session, stats, prg, max, image = null }) => { @@ -51,93 +51,97 @@ const ListEditor = ({ animeId, session, stats, prg, max, image = null }) => { }; return ( -
- {message && ( - - {message} - - )} +
List Editor
-
- {image && ( -
- image - image -
+ + {message && ( + + {message} + )} -
-
-
- - -
-
- - setProgress(e.target.value)} - className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" - min="0" + +
+
+ {image && ( +
+ image + image
-
- - +
+
+ + +
+
+ + setProgress(e.target.value)} + className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" + min="0" + /> +
+
+ + +
); diff --git a/components/modal.js b/components/modal.js index f237d77..78b76d7 100644 --- a/components/modal.js +++ b/components/modal.js @@ -8,7 +8,7 @@ export default function Modal({ open, onClose, children }) { >
e.stopPropagation()} - className={`shadow rounded-xl p-6 transition-all ${ + className={`shadow rounded-xl transition-all ${ open ? "scale-100 opacity-100" : "scale-75 opacity-0" }`} > -- cgit v1.2.3 From c526d560a3e8ed9b2dc9a23825b8979c00a152ba Mon Sep 17 00:00:00 2001 From: Factiven Date: Mon, 1 May 2023 01:09:33 +0700 Subject: Update v3.5 > Bug Fixes > Editor List Update v0.8 > Display adjustment on search page --- components/footer.js | 35 ++++++++++++++++++++++++++++++++++- components/hero/content.js | 4 ++-- components/listEditor.js | 6 +++++- components/videoPlayer.js | 10 +++++++--- 4 files changed, 48 insertions(+), 7 deletions(-) (limited to 'components') diff --git a/components/footer.js b/components/footer.js index 90ae982..3494810 100644 --- a/components/footer.js +++ b/components/footer.js @@ -3,9 +3,12 @@ import Instagram from "./media/instagram"; import Link from "next/link"; import Image from "next/image"; import { signIn, useSession } from "next-auth/react"; +import { useState } from "react"; function Footer() { const { data: session, status } = useSession(); + const [year, setYear] = useState(new Date().getFullYear()); + const [season, setSeason] = useState(getCurrentSeason()); return (
@@ -39,7 +42,11 @@ function Footer() {
  • - This Season + + This Season +
  • Popular Anime @@ -83,3 +90,29 @@ function Footer() { } export default Footer; + +function getCurrentSeason() { + const now = new Date(); + const month = now.getMonth() + 1; // getMonth() returns 0-based index + + switch (month) { + case 12: + case 1: + case 2: + return "WINTER"; + case 3: + case 4: + case 5: + return "SPRING"; + case 6: + case 7: + case 8: + return "SUMMER"; + case 9: + case 10: + case 11: + return "FALL"; + default: + return "UNKNOWN SEASON"; + } +} diff --git a/components/hero/content.js b/components/hero/content.js index 98ec4a8..25e1431 100644 --- a/components/hero/content.js +++ b/components/hero/content.js @@ -52,7 +52,7 @@ export default function Content({ ids, section, data }) { > {/*
    {anime.title.romaji || anime.title.english} @@ -75,7 +75,7 @@ export default function Content({ ids, section, data }) { anime.coverImage?.large || "https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png" } - className="z-20 h-[192px] w-[135px] object-cover lg:h-[265px] lg:w-[185px] rounded-md" + className="z-20 h-[192px] w-[135px] lg:h-[265px] lg:w-[185px] object-cover rounded-md" />
    diff --git a/components/listEditor.js b/components/listEditor.js index 50a62c5..58177d3 100644 --- a/components/listEditor.js +++ b/components/listEditor.js @@ -81,7 +81,11 @@ const ListEditor = ({ animeId, session, stats, prg, max, image = null }) => { className="object-cover w-[120px] h-[180px] rounded-l-sm hidden md:block" /> image {url ? ( @@ -74,8 +73,13 @@ export default function VideoPlayer({ title: `${title}`, autoplay: true, screenshot: true, + poster: poster ? poster : "", + }} + style={{ + width: "100%", + height: "100%", + margin: "0 auto 0", }} - style={{ width: "100%", height: "100%", margin: "0 auto 0" }} getInstance={(art) => { art.on("ready", () => { const seek = art.storage.get(id); -- cgit v1.2.3