✨ [epgs] 追っかけ再生ができるように

一旦仕様: 追っかけ終わってしまうと再生が停止する

Author: ci7lus

src/miraktest-epgs/api.ts

@@ -98,11 +98,11 @@ export class EPGStationAPI {
     return objUrl
   }
   async getRecordings({ offset, limit }: { offset?: number; limit?: number }) {
-    const { data } = await this.client.get<{ records: EPGSProgramRecord[] }>(
-      "api/recording",
-      { params: { isHalfWidth: true, offset, limit } }
-    )
-    return data.records
+    const { data } = await this.client.get<{
+      records: EPGSProgramRecord[]
+      total: number
+    }>("api/recording", { params: { isHalfWidth: true, offset, limit } })
+    return data
   }
   getVideoUrl({ videoId }: { videoId: number }) {
     return urljoin(this.baseUrl.href, `api/videos/${videoId}`)

src/miraktest-epgs/components/RecordList.tsx

@@ -20,7 +20,8 @@ export const RecordList: React.VFC<{
   searchTerm: string | null
   setRecord: React.Dispatch<React.SetStateAction<EPGSProgramRecord | null>>
   reload: number
-}> = ({ api, services, searchTerm, setRecord, reload }) => {
+  isRecording: boolean
+}> = ({ api, services, searchTerm, setRecord, reload, isRecording }) => {
   const [_records, setRecords] = useState<EPGSProgramRecord[] | null>(null)
   const records = useMemo(() => _records || [], [_records])
 
@@ -87,22 +88,30 @@ export const RecordList: React.VFC<{
 
   useEffect(() => {
     setPageSize(pageSize)
-    api
-      .getRecords({
-        offset: pageSize * pageIndex,
-        limit: pageSize,
-        keyword: globalFilter || undefined,
-      })
-      .then(({ records, total }) => {
-        setTotal(total)
-        setRecords(records)
-      })
-      .catch(() => console.error("録画番組の取得に失敗しました"))
-  }, [pageIndex, pageSize, globalFilter, reload])
+    isRecording
+      ? api
+          .getRecordings({ offset: pageSize * pageIndex, limit: pageSize })
+          .then(({ records, total }) => {
+            setTotal(total)
+            setRecords(records)
+          })
+          .catch(() => console.error("録画番組の取得に失敗しました"))
+      : api
+          .getRecords({
+            offset: pageSize * pageIndex,
+            limit: pageSize,
+            keyword: globalFilter || undefined,
+          })
+          .then(({ records, total }) => {
+            setTotal(total)
+            setRecords(records)
+          })
+          .catch(() => console.error("録画番組の取得に失敗しました"))
+  }, [pageIndex, pageSize, globalFilter, reload, isRecording])
   useEffect(() => {
     gotoPage(0)
     setGlobalFilter(searchTerm)
-  }, [searchTerm])
+  }, [searchTerm, isRecording])
 
   return (
     <div className="h-full flex flex-col">

src/miraktest-epgs/components/Records.tsx

@@ -1,3 +1,4 @@
+import { Switch } from "@headlessui/react"
 import clsx from "clsx"
 import React, { useState } from "react"
 import { RotateCw, Search } from "react-feather"
@@ -21,6 +22,7 @@ export const Records: React.VFC<{
   const [record, setRecord] = useState<EPGSProgramRecord | null>(null)
 
   const [reload, setReload] = useState(0)
+  const [isRecording, setIsRecording] = useState(false)
 
   return (
     <div className="w-full h-full flex flex-col">
@@ -29,7 +31,7 @@ export const Records: React.VFC<{
           <h2 className="font-semibold text-lg">録画番組</h2>
           <div
             className={clsx(
-              "w-1/3",
+              "w-1/2",
               "flex",
               "items-center",
               "justify-center",
@@ -49,6 +51,24 @@ export const Records: React.VFC<{
             >
               <RotateCw size={20} />
             </button>
+            <Switch.Group>
+              <div className="flex items-center justify-center flex-shrink-0">
+                <Switch
+                  checked={isRecording}
+                  onChange={(e) => setIsRecording(e)}
+                  className={`${
+                    isRecording ? "bg-blue-600" : "bg-gray-300"
+                  } relative inline-flex items-center h-6 rounded-full w-11`}
+                >
+                  <span
+                    className={`${
+                      isRecording ? "translate-x-6" : "translate-x-1"
+                    } inline-block w-4 h-4 transform bg-white rounded-full transition ease-in-out duration-200`}
+                  />
+                </Switch>
+                <Switch.Label className="ml-2">録画中</Switch.Label>
+              </div>
+            </Switch.Group>
             <form
               className="flex items-center justify-center space-x-2 w-full"
               onSubmit={(e) => {
@@ -82,6 +102,7 @@ export const Records: React.VFC<{
             searchTerm={searchTerm || null}
             setRecord={setRecord}
             reload={reload}
+            isRecording={isRecording}
           />
         </div>
         {record ? (

src/miraktest-epgs/constants.ts

@@ -401,7 +401,7 @@ export const EPGS_META = {
   id: EPGS_ID,
   name: "EPGStation",
   author: "ci7lus",
-  version: "0.1.3",
+  version: "0.1.4",
   description: "EPGStationの録画を再生するためのプラグインです。",
   authorUrl: "https://github.com/ci7lus",
   url: "https://github.com/ci7lus/miraktest-plugins/tree/master/src/miraktest-epgs",