🚸 annictの操作感を改善

Author: ci7lus

src/miraktest-annict/components/AnnictTrack.tsx

@@ -94,7 +94,6 @@ export const AnnictTrack: React.FC<{
       return
     }
     setEpisodeId(found?.annictId)
-    setEpisodeInfo(null)
   }, [episodeInfo, work])
   useEffect(() => {
     if (!workId) {
@@ -115,7 +114,7 @@ export const AnnictTrack: React.FC<{
       })
       .catch(console.error)
       .finally(() => setIsLoading(false))
-  }, [workId, linkedAt, timing])
+  }, [workId, timing])
   const [isStatusChanging, setIsStatusChanging] = useState(false)
   useEffect(() => {
     if (!work || work.viewerStatusState === watchStatus) {

src/miraktest-annict/components/SeachWorkForm.tsx

@@ -48,7 +48,7 @@ export const SearchWorkForm: React.FC<{
   )
 
   return (
-    <div className={clsx("relative")}>
+    <div className={clsx("relative")} onMouseLeave={() => setIsVisible(false)}>
       <form
         className="flex items-center justify-center space-x-2"
         onSubmit={(e) => {
@@ -81,38 +81,32 @@ export const SearchWorkForm: React.FC<{
           "transition-opacity",
           !isVisible || works === null
             ? "opacity-0 pointer-events-none"
-            : "opacity-100"
+            : "opacity-100",
+          "bg-gray-700",
+          "overflow-auto",
+          "p-2",
+          "rounded-md"
         )}
-        onMouseLeave={() => setIsVisible(false)}
+        style={{ maxHeight: "66vh" }}
       >
         {works !== null ? (
           0 < works.length ? (
-            <div
-              className={clsx(
-                "w-full",
-                "bg-gray-700",
-                "overflow-auto",
-                "p-2",
-                "rounded-md"
-              )}
-            >
-              {(works || []).map((work) => (
-                <p
-                  key={work.id}
-                  className={clsx(
-                    "truncate",
-                    "cursor-pointer",
-                    "px-2",
-                    "py-1",
-                    "hover:bg-gray-600",
-                    "transition-colors"
-                  )}
-                  onClick={() => setWorkId(work.annictId)}
-                >
-                  {work.title}
-                </p>
-              ))}
-            </div>
+            (works || []).map((work) => (
+              <p
+                key={work.id}
+                className={clsx(
+                  "truncate",
+                  "cursor-pointer",
+                  "px-2",
+                  "py-1",
+                  "hover:bg-gray-600",
+                  "transition-colors"
+                )}
+                onClick={() => setWorkId(work.annictId)}
+              >
+                {work.title}
+              </p>
+            ))
           ) : (
             <div
               className={clsx(
@@ -121,7 +115,6 @@ export const SearchWorkForm: React.FC<{
                 "justify-center",
                 "p-8",
                 "text-gray-400",
-                "bg-gray-700",
                 "w-full",
                 "text-sm"
               )}

src/miraktest-annict/index.tsx

@@ -157,7 +157,7 @@ const main: InitPlugin = {
           }, [])
           const [sayaDefinition, setSayaDefinition] =
             useState<SayaDefinition | null>(null)
-          const [arm, setArm] = useState<ARM[]>([])
+          const [arm, setArm] = useState<ARM[] | null>(null)
           useEffect(() => {
             Axios.get<string>(
               "https://raw.githack.com/SlashNephy/saya/dev/docs/definitions.yml",
@@ -182,7 +182,7 @@ const main: InitPlugin = {
             <>
               <style>{tailwind}</style>
               <div className="w-full h-screen bg-gray-900 text-gray-100 flex leading-loose">
-                {setting.accessToken && services && sayaDefinition ? (
+                {setting.accessToken && services && sayaDefinition && arm ? (
                   <AnnictTrack
                     accessToken={setting.accessToken}
                     playingContent={playingContent}