From 474b5522cf85f9aff6a308c9225893070ff6c31e Mon Sep 17 00:00:00 2001
From: Hocky Yudhiono <hocky.yudhiono@gmail.com>
Date: Fri, 5 Jul 2024 01:11:16 +0800
Subject: [PATCH] Fix compile error and add font family bar

---
 renderer/components/Meaning/MeaningBox.tsx  | 55 +++++++++++++++++----
 renderer/components/Subtitle/Sentence.tsx   |  1 -
 renderer/components/VideoPlayer/Sidebar.tsx | 15 ++++++
 renderer/pages/srs.tsx                      |  2 +-
 4 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/renderer/components/Meaning/MeaningBox.tsx b/renderer/components/Meaning/MeaningBox.tsx
index 51cb03c..4efecd6 100644
--- a/renderer/components/Meaning/MeaningBox.tsx
+++ b/renderer/components/Meaning/MeaningBox.tsx
@@ -11,7 +11,11 @@ import {videoConstants} from "../../utils/constants";
 import MakeMeAHanziDisplay from "./MakeMeAHanziDisplay";
 import QuizDisplay from "./QuizDisplay";
 
-const initialContentState = {id: "", sense: [], single: []};
+const initialContentState = {
+  id: "",
+  sense: [],
+  single: []
+};
 const initialCharacterContentState = {literal: null};
 
 const MeaningBox = ({
@@ -20,7 +24,13 @@ const MeaningBox = ({
                       tokenizeMiteiru,
                       subtitleStyling = defaultMeaningBoxStyling,
                       lang
-                    }: { meaning: string, setMeaning: any, tokenizeMiteiru: (value: string) => Promise<any[]>, subtitleStyling?: CJKStyling, lang: string }) => {
+                    }: {
+  meaning: string,
+  setMeaning: any,
+  tokenizeMiteiru: (value: string) => Promise<any[]>,
+  subtitleStyling?: CJKStyling,
+  lang: string
+}) => {
   const [meaningContent, setMeaningContent] = useState(initialContentState)
   const [meaningCharacter, setMeaningCharacter] = useState(initialCharacterContentState)
   const [otherMeanings, setOtherMeanings] = useState([]);
@@ -35,13 +45,19 @@ const MeaningBox = ({
     if (meaning.length === 1 && lang === videoConstants.japaneseLang && isKanji(meaning)) {
       ipcRenderer.invoke("queryKanji", meaning).then(result => {
         ipcRenderer.invoke("getWaniKanji", meaning).then(waniResult => {
-          setMeaningCharacter({...result, wanikani: waniResult});
+          setMeaningCharacter({
+            ...result,
+            wanikani: waniResult
+          });
         })
       })
     } else if (meaning.length === 1 &&
         (lang === videoConstants.cantoneseLang || lang === videoConstants.chineseLang)) {
       ipcRenderer.invoke("queryHanzi", meaning).then(result => {
-        setMeaningCharacter({...result, literal: meaning[0]});
+        setMeaningCharacter({
+          ...result,
+          literal: meaning[0]
+        });
       })
     } else {
       setMeaningCharacter(initialCharacterContentState);
@@ -150,7 +166,10 @@ const MeaningBox = ({
                 fontFamily: "Arial",
                 fontSize: "40px",
               }}>
-                {romajiedData.map(({key, romajied}) => {
+                {romajiedData.map(({
+                                     key,
+                                     romajied
+                                   }) => {
                   const queryText = romajied.reduce((accumulator, nextValue) => {
                     return accumulator + nextValue.origin
                   }, "")
@@ -281,10 +300,16 @@ const MeaningMnemonics = ({content}) => {
       // Add tagged content
       if (tag === 'radical') {
         parts.push(<span key={index}
-                         style={{fontWeight: 'bold', color: '#3B82F6'}}>{innerContent}</span>);
+                         style={{
+                           fontWeight: 'bold',
+                           color: '#3B82F6'
+                         }}>{innerContent}</span>);
       } else if (tag === 'kanji') {
         parts.push(<span key={index}
-                         style={{fontWeight: 'bold', color: '#000000'}}>{innerContent}</span>);
+                         style={{
+                           fontWeight: 'bold',
+                           color: '#000000'
+                         }}>{innerContent}</span>);
       }
 
       lastIndex = index + fullMatch.length;
@@ -375,7 +400,11 @@ const kanjiBoxEntry = (meaningKanji) => {
 }
 
 
-const HanziBoxEntry = ({meaningHanzi, setMeaning, subtitleStyling}) => {
+const HanziBoxEntry = ({
+                         meaningHanzi,
+                         setMeaning,
+                         subtitleStyling
+                       }) => {
   const bubbleBox = [
     `CantoDict ${meaningHanzi.cantodict_id}`,
     meaningHanzi.dialect ? `${meaningHanzi.dialect} dialect` : '',
@@ -463,7 +492,8 @@ const HanziBoxEntry = ({meaningHanzi, setMeaning, subtitleStyling}) => {
       </div>
     </div>
     <div className={'flex flex-row m-3'}>
-      <QuizDisplay character={meaningHanzi.literal}/>
+      <QuizDisplay character={meaningHanzi.literal} onAnswer={() => {
+      }}/>
     </div>
   </div>
 }
@@ -539,7 +569,12 @@ const meaningBoxEntryChinese = (meaningContent) => {
   </div>
 }
 
-const ExternalLink = ({urlBase, displayText, query, style = {}}) => {
+const ExternalLink = ({
+                        urlBase,
+                        displayText,
+                        query,
+                        style = {}
+                      }) => {
   const handleClick = (event) => {
     event.preventDefault();
     shell.openExternal(`${urlBase}${query}`);
diff --git a/renderer/components/Subtitle/Sentence.tsx b/renderer/components/Subtitle/Sentence.tsx
index 37d9aef..f047619 100644
--- a/renderer/components/Subtitle/Sentence.tsx
+++ b/renderer/components/Subtitle/Sentence.tsx
@@ -58,7 +58,6 @@ const StyledChineseSentence = styled.button<{ subtitleStyling: CJKStyling }>`
     -webkit-text-fill-color: ${props => props.subtitleStyling.text.color};
   }
 
-
   .state0 {
     -webkit-text-fill-color: ${() => defaultLearningColorStyling.learningColor[0].color};
   }
diff --git a/renderer/components/VideoPlayer/Sidebar.tsx b/renderer/components/VideoPlayer/Sidebar.tsx
index b068ea5..e41fb3b 100644
--- a/renderer/components/VideoPlayer/Sidebar.tsx
+++ b/renderer/components/VideoPlayer/Sidebar.tsx
@@ -137,6 +137,12 @@ export const StylingBox = ({
         setSubtitleStyling(newCopy)
       }
       , [setSubtitleStyling, subtitleStyling]);
+
+  const subtitleFontFamilyHandler = useCallback((event) => {
+    const newCopy = JSON.parse(JSON.stringify(subtitleStyling))
+    newCopy.text.fontFamily = event.target.value;
+    setSubtitleStyling(newCopy)
+  }, [setSubtitleStyling, subtitleStyling]);
   const fontWeightHandler = useCallback(event => {
     const newCopy = JSON.parse(JSON.stringify(subtitleStyling))
     newCopy.text.weight = parseInt(event.target.value);
@@ -216,6 +222,14 @@ export const StylingBox = ({
       <Toggle isChecked={subtitleStyling.showSpace} onChange={cjkShowMoreSpaceHandler}/>
       {subtitleName} Show More Space Between Each Token
     </div>}
+    <div className={"flex flex-row items-center gap-3"}>
+      Font Family &nbsp;
+      <input
+          className={"p-3 text-black"}
+          value={subtitleStyling.text.fontFamily}
+          onChange={subtitleFontFamilyHandler}
+      />
+    </div>
     <div className={"flex flex-row items-center gap-3"}>
       <PopoverPicker color={subtitleStyling.text.color} onChange={subtitleTextColorHandler}/>
       {subtitleName} Subtitle Text Color
@@ -247,6 +261,7 @@ export const StylingBox = ({
                          onChange={cjkMeaningHoverTextHandler}/>
           {subtitleName} Meaning Hover Text Color
         </div>}
+
     {subtitleName == "CJK" &&
         <div className={"flex w-full justify-center items-center"}>
           Meaning Font Weight <span>{subtitleStyling.textMeaning.weight}</span> &nbsp;
diff --git a/renderer/pages/srs.tsx b/renderer/pages/srs.tsx
index 53215af..a4fc9a8 100644
--- a/renderer/pages/srs.tsx
+++ b/renderer/pages/srs.tsx
@@ -48,7 +48,7 @@ const SRS = () => {
   }, [lang]);
 
   useEffect(() => {
-    fetchQuestion().then(r => console.log("OK"));
+    fetchQuestion().then(() => console.log("OK"));
   }, [fetchQuestion]);
 
   const handleAnswer = async (isCorrect: boolean) => {