✨ miraktest-annictに作品検索機能を実装

Author: ci7lus

src/miraktest-annict/components/AnnictTrack.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx"
 import React, { useEffect, useState } from "react"
-import { RefreshCcw } from "react-feather"
+import { Link } from "react-feather"
 import Recoil, { useRecoilState } from "recoil"
 import { ContentPlayerPlayingContent } from "../../@types/plugin"
 import { AnnictRESTAPI, generateGqlClient } from "../annictAPI"
@@ -13,6 +13,7 @@ import {
 import { detectProgramInfo } from "../findWork"
 import { RatingState, StatusState, WorkFragment } from "../gql"
 import { ARM, SayaDefinition } from "../types"
+import { SearchWorkForm } from "./SeachWorkForm"
 
 export const AnnictTrack: React.FC<{
   accessToken: string
@@ -30,6 +31,7 @@ export const AnnictTrack: React.FC<{
   facebookAtom,
 }) => {
   const [timing, setTiming] = useState(0)
+  const [linkedAt, setLinkedAt] = useState(0)
   const [isLoading, setIsLoading] = useState(true)
   const rest = new AnnictRESTAPI(accessToken)
   const [workId, setWorkId] = useState<number | null>(null)
@@ -61,7 +63,7 @@ export const AnnictTrack: React.FC<{
           return
         }
         setWorkId(programInfo.annictId)
-        if (programInfo.episode.id) {
+        if (programInfo.episode?.id) {
           setEpisodeId(programInfo.episode.id)
           setEpisodeInfo(null)
         } else {
@@ -72,7 +74,7 @@ export const AnnictTrack: React.FC<{
         console.error(e)
         setIsLoading(false)
       })
-  }, [accessToken, timing, arm])
+  }, [accessToken, linkedAt, arm])
   const [episodeInfo, setEpisodeInfo] = useState<{
     number: number
     title: string
@@ -108,12 +110,12 @@ export const AnnictTrack: React.FC<{
         const work = result.searchWorks?.nodes?.[0]
         setWork(work || null)
         if (work) {
-          setWatchStatus(work.viewerStatusState || StatusState.NO_STATE)
+          setWatchStatus(work.viewerStatusState ?? StatusState.NO_STATE)
         }
       })
       .catch(console.error)
       .finally(() => setIsLoading(false))
-  }, [workId, timing])
+  }, [workId, linkedAt, timing])
   const [isStatusChanging, setIsStatusChanging] = useState(false)
   useEffect(() => {
     if (!work || work.viewerStatusState === watchStatus) {
@@ -174,25 +176,29 @@ export const AnnictTrack: React.FC<{
           "py-2",
           "bg-gray-800",
           "flex",
-          "justify-between"
+          "justify-between",
+          "items-center"
         )}
       >
         <h1 className={clsx("text-lg")}>視聴記録</h1>
-        <button
-          className={clsx(
-            "focus:outline-none",
-            "rounded-md",
-            "bg-gray-900",
-            "hover:bg-gray-800",
-            "p-1",
-            "cursor-pointer",
-            "transition-colors"
-          )}
-          title="再読み込み"
-          onClick={() => setTiming(performance.now())}
-        >
-          <RefreshCcw size={18} />
-        </button>
+        <div className={clsx("flex", "items-center", "space-x-2")}>
+          <button
+            className={clsx(
+              "focus:outline-none",
+              "rounded-md",
+              "bg-gray-900",
+              "hover:bg-gray-800",
+              "p-1",
+              "cursor-pointer",
+              "transition-colors"
+            )}
+            title="番組情報から取得"
+            onClick={() => setLinkedAt(performance.now())}
+          >
+            <Link size={18} />
+          </button>
+          <SearchWorkForm accessToken={accessToken} setWorkId={setWorkId} />
+        </div>
       </div>
       {work ? (
         <div className={clsx("w-full", "flex", "overflow-auto")}>
@@ -233,7 +239,7 @@ export const AnnictTrack: React.FC<{
                 onChange={(e) => {
                   setWatchStatus(e.target.value as never)
                 }}
-                defaultValue={work.viewerStatusState || undefined}
+                value={watchStatus}
                 disabled={isStatusChanging}
               >
                 {Object.entries(STATUS_LABEL).map(([key, label]) => (
@@ -413,7 +419,9 @@ export const AnnictTrack: React.FC<{
                     "flex",
                     "justify-between",
                     "cursor-pointer",
-                    episode?.viewerDidTrack && "text-gray-600"
+                    episode?.viewerDidTrack && "text-gray-600",
+                    "hover:text-gray-400",
+                    "transition-colors"
                   )}
                 >
                   <span className={clsx("truncate")}>

src/miraktest-annict/components/SeachWorkForm.tsx

@@ -0,0 +1,133 @@
+import clsx from "clsx"
+import React, { useEffect, useState } from "react"
+import { Search } from "react-feather"
+import { useDebounce } from "react-use"
+import { generateGqlClient } from "../annictAPI"
+import { Work } from "../gql"
+
+type QueryWork = Pick<Work, "id" | "annictId" | "title" | "image">
+
+export const SearchWorkForm: React.FC<{
+  accessToken: string
+  setWorkId: React.Dispatch<React.SetStateAction<number | null>>
+}> = ({ accessToken, setWorkId }) => {
+  const [localTerm, setLocalTerm] = useState("")
+  const [searchTerm, setSearchTerm] = useState<string | null>(null)
+  const [works, setWorks] = useState<QueryWork[] | null>(null)
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    if (!searchTerm) {
+      setWorks(null)
+      return
+    }
+    const sdk = generateGqlClient(accessToken)
+
+    sdk
+      .searchWorksByTerm({
+        term: searchTerm,
+        count: 10,
+        since: null,
+      })
+      .then((result) => {
+        setWorks((result.searchWorks?.nodes || []) as QueryWork[])
+        setIsVisible(true)
+      })
+  }, [searchTerm])
+  useDebounce(
+    () => {
+      setSearchTerm(localTerm || null)
+    },
+    100,
+    [localTerm]
+  )
+
+  return (
+    <div className={clsx("relative")}>
+      <form
+        className="flex items-center justify-center space-x-2"
+        onSubmit={(e) => {
+          e.preventDefault()
+          setSearchTerm(localTerm || null)
+        }}
+      >
+        <Search size={18} />
+        <input
+          type="text"
+          placeholder="キーワードを入力…"
+          className="block form-input rounded-md w-full text-gray-900"
+          value={localTerm}
+          onChange={(e) => setLocalTerm(e.target.value)}
+          onKeyPress={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault()
+              setSearchTerm(localTerm || null)
+            }
+          }}
+          onFocus={() => setIsVisible(true)}
+          onClick={() => setIsVisible(true)}
+        />
+      </form>
+      <div
+        className={clsx(
+          "absolute",
+          "top-10",
+          "w-full",
+          "transition-opacity",
+          !isVisible || works === null
+            ? "opacity-0 pointer-events-none"
+            : "opacity-100"
+        )}
+        onMouseLeave={() => setIsVisible(false)}
+      >
+        {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>
+          ) : (
+            <div
+              className={clsx(
+                "flex",
+                "items-center",
+                "justify-center",
+                "p-8",
+                "text-gray-400",
+                "bg-gray-700",
+                "w-full",
+                "text-sm"
+              )}
+            >
+              <p>作品が見つかりません</p>
+            </div>
+          )
+        ) : (
+          <></>
+        )}
+      </div>
+    </div>
+  )
+}

src/miraktest-annict/documents/work.graphql

@@ -61,7 +61,7 @@ fragment Work on Work {
       ...Cast
     }
   }
-  episodes(orderBy: { field: SORT_NUMBER, direction: ASC }, first: 20) {
+  episodes(orderBy: { field: SORT_NUMBER, direction: ASC }, last: 50) {
     nodes {
       ...Episode
     }
@@ -81,6 +81,14 @@ query Work($annictId: Int!) {
   }
 }
 
+query searchWorksByTerm($term: String!, $count: Int, $since: String) {
+  searchWorks(titles: [$term], after: $since, first: $count) {
+    nodes {
+      ...Work
+    }
+  }
+}
+
 mutation updateWorkStatus($workId: ID!, $state: StatusState!) {
   updateStatus(
     input: { clientMutationId: "miraktest", workId: $workId, state: $state }

src/miraktest-annict/findWork.ts

@@ -20,7 +20,7 @@ export const detectProgramInfo = async ({
     number: number
     title: string
     id?: number
-  }
+  } | null
 } | void> => {
   let startTime: dayjs.Dayjs
   let endTime: dayjs.Dayjs