✨ [epgs] videoFileを選べるように (#6)

ci7lus · Feb 8, 2022 · 73889a5 · 73889a5
1 parent 83ef08d
commit 73889a5
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "webpack-cli": "^4.8.0"
   },
   "dependencies": {
+    "@headlessui/react": "^1.4.3",
     "@neneka/dplayer": "^1.26.0-patch.0",
     "@types/react": "^17.0.26",
     "@types/react-dom": "^17.0.9",
@@ -71,6 +72,7 @@
     "interweave": "^12.8.0",
     "interweave-autolink": "^4.4.3",
     "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-feather": "^2.0.9",
     "react-table": "^7.7.0",
     "react-use": "^17.3.1",

diff --git a/src/miraktest-epgs/components/RecordDetail.tsx b/src/miraktest-epgs/components/RecordDetail.tsx
@@ -1,5 +1,7 @@
+import { Switch } from "@headlessui/react"
+import clsx from "clsx"
 import dayjs from "dayjs"
-import React, { useCallback, useEffect } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import { Play } from "react-feather"
 import { useRecoilState } from "recoil"
 import { ContentPlayerPlayingContent, Service } from "../../@types/plugin"
@@ -9,8 +11,8 @@ import { thumbnailFamily } from "../atom"
 import { Genre, SubGenre } from "../constants"
 import { convertProgramRecordToProgram } from "../convertion"
 import { EPGSProgramRecord } from "../types"
-import "dayjs/locale/ja"
 
+import "dayjs/locale/ja"
 dayjs.locale("ja")
 
 export const RecordDetail: React.VFC<{
@@ -37,6 +39,8 @@ export const RecordDetail: React.VFC<{
   const genre3 = Genre[record.genre3]
   const subGenre3 = genre3 && SubGenre[record.genre3][record.subGenre3]
 
+  const [isOpenWithNewWindow, setIsOpenWithNewWindow] = useState(false)
+
   useEffect(() => {
     if (thumbnailUrl) {
       return
@@ -51,13 +55,8 @@ export const RecordDetail: React.VFC<{
   }, [thumbnailUrl])
 
   const play = useCallback(
-    (isNewWindow: boolean) => {
-      const playFile = record.videoFiles.find((video) => video.type === "ts")
-      if (!playFile) {
-        console.warn("tsが見つかりませんでした:", record)
-        return
-      }
-      const url = api.getVideoUrl({ videoId: playFile.id })
+    (videoId: number, isNewWindow: boolean) => {
+      const url = api.getVideoUrl({ videoId })
       const program = convertProgramRecordToProgram(record, service)
       const payload = {
         contentType: "EPGStation",
@@ -113,23 +112,40 @@ export const RecordDetail: React.VFC<{
               </p>
             ))}
         </div>
-        <div className="w-full p-2 bg-gray-200 rounded-md my-2 flex space-x-2 overflow-auto flex-wrap">
-          <button
-            type="button"
-            className="bg-indigo-400 text-gray-100 rounded-md px-2 p-1 flex items-center justify-center space-x-2 focus:outline-none m-1"
-            onClick={() => play(false)}
-          >
-            <Play className="flex-shrink-0" size={16} />
-            <span className="flex-shrink-0">視聴</span>
-          </button>
-          <button
-            type="button"
-            className="bg-indigo-400 text-gray-100 rounded-md px-2 p-1 flex items-center justify-center space-x-2 focus:outline-none m-1"
-            onClick={() => play(true)}
-          >
-            <Play className="flex-shrink-0" size={16} />
-            <span className="flex-shrink-0">新しいウィンドウで視聴</span>
-          </button>
+        <div className="w-full p-2 bg-gray-200 rounded-md my-2">
+          <Switch.Group>
+            <div className="flex items-center mb-2">
+              <Switch
+                checked={isOpenWithNewWindow}
+                onChange={(e) => setIsOpenWithNewWindow(e)}
+                className={`${
+                  isOpenWithNewWindow ? "bg-blue-600" : "bg-gray-300"
+                } relative inline-flex items-center h-6 rounded-full w-11`}
+              >
+                <span
+                  className={`${
+                    isOpenWithNewWindow ? "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>
+          <div className={clsx("flex space-x-2 overflow-auto flex-wrap")}>
+            {record.videoFiles.map((videoFile) => (
+              <button
+                key={videoFile.id}
+                type="button"
+                className="bg-indigo-400 text-gray-100 rounded-md px-2 p-1 flex items-center justify-center space-x-1 focus:outline-none m-1"
+                onClick={() => play(videoFile.id, isOpenWithNewWindow)}
+              >
+                <Play className="flex-shrink-0" size={16} />
+                <span className="flex-shrink-0">{videoFile.name}</span>
+              </button>
+            ))}
+          </div>
         </div>
         <div className="w-full bg-gray-200 whitespace-pre-wrap rounded-md p-4 md:my-2 text-sm leading-relaxed programDescription">
           <AutoLinkedText>

diff --git a/yarn.lock b/yarn.lock
@@ -900,6 +900,11 @@
     tslib "~2.3.0"
     value-or-promise "1.0.10"
 
+"@headlessui/react@^1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.3.tgz#f77c6bb5cb4a614a5d730fb880cab502d48abf37"
+  integrity sha512-n2IQkaaw0aAAlQS5MEXsM4uRK+w18CrM72EqnGRl/UBOQeQajad8oiKXR9Nk15jOzTFQjpxzrZMf1NxHidFBiw==
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
@@ -6434,6 +6439,15 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-dom@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
+
 react-feather@^2.0.9:
   version "2.0.9"
   resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-2.0.9.tgz#6e42072130d2fa9a09d4476b0e61b0ed17814480"
@@ -6862,6 +6876,14 @@ sass@^1.42.1:
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"