Add base subtitle

package.json

@@ -13,7 +13,9 @@
   "dependencies": {
     "electron-serve": "^1.1.0",
     "electron-store": "^8.1.0",
+    "html-react-parser": "^3.0.6",
     "react-dropzone": "^14.2.3",
+    "shunou-js": "^0.0.4",
     "video.js": "^7.20.3"
   },
   "devDependencies": {

renderer/components/Sentence.tsx

@@ -0,0 +1,18 @@
+export const Sentence = ({origin, separation}) => {
+  const handleChange = (origin) => {
+    console.log(origin)
+  }
+  return <button  className={"subtitle"}  onClick={() => {
+    handleChange(origin)
+  }}>
+    {separation.map((val, index) => {
+      return <ruby key={index}>{val.bottom}
+        <rp>(</rp>
+        <rt>{val.top ?? ''}</rt>
+        <rp>)</rp>
+      </ruby>
+    })}
+  </button>
+}
+
+export default Sentence;

renderer/components/Subtitle.tsx

@@ -0,0 +1,113 @@
+import React, {useEffect, useState} from "react";
+
+import parse from 'html-react-parser';
+import Sentence from "./Sentence";
+
+const example = [
+  {
+    "origin": "アニメ",
+    "hiragana": "あにめ",
+    "basicForm": "アニメ-animation",
+    "pos": "名詞-普通名詞-一般",
+    "separation": [
+      {
+        "bottom": "ア",
+        "top": null
+      },
+      {
+        "bottom": "ニ",
+        "top": null
+      },
+      {
+        "bottom": "メ",
+        "top": null
+      }
+    ]
+  },
+  {
+    "origin": "を",
+    "hiragana": "お",
+    "basicForm": "を",
+    "pos": "助詞-格助詞",
+    "separation": [
+      {
+        "bottom": "を",
+        "top": null
+      }
+    ]
+  },
+  {
+    "origin": "見",
+    "hiragana": "み",
+    "basicForm": "見る",
+    "pos": "動詞-非自立可能",
+    "separation": [
+      {
+        "bottom": "見",
+        "top": "み"
+      }
+    ]
+  },
+  {
+    "origin": "て",
+    "hiragana": "て",
+    "basicForm": "て",
+    "pos": "助詞-接続助詞",
+    "separation": [
+      {
+        "bottom": "て",
+        "top": null
+      }
+    ]
+  },
+  {
+    "origin": "い",
+    "hiragana": "い",
+    "basicForm": "居る",
+    "pos": "動詞-非自立可能",
+    "separation": [
+      {
+        "bottom": "い",
+        "top": null
+      }
+    ]
+  },
+  {
+    "origin": "ます",
+    "hiragana": "ます",
+    "basicForm": "ます",
+    "pos": "助動詞",
+    "separation": [
+      {
+        "bottom": "ま",
+        "top": null
+      },
+      {
+        "bottom": "す",
+        "top": null
+      }
+    ]
+  }
+]
+
+export const Subtitle = (props) => {
+  const [caption, setCaption] = useState([])
+  useEffect(() => {
+    let current = example.map((val, index) => {
+      return <Sentence key={index} origin={val.origin} separation={val.separation}/>
+    })
+    setCaption(current)
+
+  }, []);
+  return <div style={{
+    WebkitTextStrokeColor: "black",
+    WebkitTextStrokeWidth: "1px",
+    fontSize: "50px",
+    fontFamily: "Arial",
+    fontWeight: "bold",
+  }}>
+    {caption}
+  </div>
+}
+
+export default Subtitle

renderer/components/VideoJS.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect} from 'react';
 import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
+import Subtitle from "./Subtitle";
 
 export const VideoJS = (props) => {
   const videoRef = React.useRef(null);
@@ -48,8 +49,15 @@ export const VideoJS = (props) => {
   }, [playerRef]);
 
   return (
-      <div data-vjs-player>
-        <div ref={videoRef}/>
+      <div>
+        <div>
+          <div className={'z-[-1] fixed w-[100vw]'}>
+            <div data-vjs-player>
+              <div ref={videoRef}></div>
+            </div>
+          </div>
+          <Subtitle/>
+        </div>
         <button onClick={handle}>Coba</button>
       </div>
   );

renderer/pages/video.tsx

@@ -1,10 +1,7 @@
-import {ipcRenderer} from "electron";
 import React, {useCallback, useState} from "react";
 import {useDropzone} from "react-dropzone";
 import VideoJS from "../components/VideoJS";
-import MiteiruPlayer from "../components/MiteiruPlayer";
-import VideoReact from "../components/VideoReact";
-import ReactPlayer from "react-player";
+import Subtitle from "../components/Subtitle";
 
 
 function Video() {
@@ -43,9 +40,6 @@ function Video() {
   return (
       <React.Fragment>
         <div>
-          {/*<MiteiruPlayer videoSrc={videoSrc}/>*/}
-          {/*<ReactPlayer url={videoSrc.src}/>*/}
-          {/*<VideoReact videoSrc={videoSrc.src}/>*/}
           <VideoJS options={videoJsOptions} onReady={handlePlayerReady}/>
           <div {...getRootProps()}>
             <input {...getInputProps()} />

renderer/styles/globals.css

@@ -13,3 +13,12 @@
     @apply text-white font-bold px-4 py-2 rounded bg-blue-600 hover:bg-blue-500;
   }
 }
+
+.subtitle:hover {
+  -webkit-text-fill-color: aqua;
+}
+
+
+.subtitle {
+  -webkit-text-fill-color: green;
+}