Fix simplified and traditional meaning box error

renderer/components/Meaning/MeaningBox.tsx

@@ -36,7 +36,9 @@ const OutlinedStar = ({color, size, outlineColor = 'black', outlineWidth = 1}) =
 const initialContentState = {
   id: "",
   sense: [],
-  single: []
+  single: [],
+  content: '',
+  simplified: ''
 };
 const initialCharacterContentState = {literal: null};
 
@@ -118,17 +120,26 @@ const MeaningBox = ({
 
   useEffect(() => {
     const fetchRomajiedData = async () => {
-      const data = await Promise.all(
-          meaningContent.single.map(async (val) => ({
-            key: val.key,
-            romajied: await tokenizeMiteiru(val.text)
-          }))
-      );
-      setRomajiedData(data);
+      console.log(meaningContent);
+      if (lang === videoConstants.japaneseLang) {
+        const data = await Promise.all(
+            meaningContent.single.map(async (val) => {
+              return ({
+                key: val.key,
+                romajied: await tokenizeMiteiru(val.text)
+              });
+            })
+        );
+        setRomajiedData(data);
+      } else if (lang === videoConstants.cantoneseLang || videoConstants.chineseLang) {
+        const usedData = (meaningContent.simplified.includes(meaning)) ? meaningContent.simplified : meaningContent.content;
+        const data = [{key: 0, romajied: (await tokenizeMiteiru(usedData))}];
+        setRomajiedData(data);
+      }
     };
 
     if (meaningContent.single.length) fetchRomajiedData();
-  }, [meaningContent.single, tokenizeMiteiru]);
+  }, [lang, meaning, meaningContent, tokenizeMiteiru]);
 
   const handleBGClick = useCallback(() => setMeaning(''), [setMeaning]);
 
@@ -234,7 +245,6 @@ const MeaningContent = ({meaningContent, lang, tags}) => {
 
 const RomajiedContent = ({romajied, lang, setMeaning, subtitleStyling}) => {
   const queryText = romajied.reduce((acc, next) => acc + next.origin, "");
-
   return (
       <div className="flex flex-col justify-between items-center gap-2">
         <div
@@ -245,12 +255,16 @@ const RomajiedContent = ({romajied, lang, setMeaning, subtitleStyling}) => {
                              extraClass="unselectable meaning-kanji text-md"
                              subtitleStyling={subtitleStyling}/>
           ))}
-          {(lang === videoConstants.chineseLang || lang === videoConstants.cantoneseLang) && romajied.map((val, idx) => (
-              <HanziSentence key={idx} origin={val.origin}
-                             pinyin={(lang === videoConstants.chineseLang ? val.pinyin : val.jyutping).split(' ')}
-                             setMeaning={setMeaning} extraClass="unselectable meaning-kanji text-md"
-                             subtitleStyling={subtitleStyling}/>
-          ))}
+          {(lang === videoConstants.chineseLang || lang === videoConstants.cantoneseLang) && romajied.map((val, idx) => {
+            return (
+
+                <HanziSentence key={idx} origin={val.origin}
+                               pinyin={(lang === videoConstants.chineseLang ? val.pinyin : val.jyutping).split(' ')}
+                               setMeaning={setMeaning}
+                               extraClass="unselectable meaning-kanji text-md"
+                               subtitleStyling={subtitleStyling}/>
+            );
+          })}
         </div>
         <ExternalLinkComponent lang={lang} queryText={queryText}/>
       </div>

renderer/components/VideoPlayer/VocabSidebar.tsx

@@ -3,10 +3,21 @@ import React, {useState, useEffect, useCallback} from 'react';
 import {ipcRenderer} from 'electron';
 import {getColorGradient, getRelativeTime} from '../../utils/utils';
 import {ArrowRight} from "./Icons";
-import {AwesomeButton} from "react-awesome-button";
+import {HanziSentence, KanjiSentence} from "../Subtitle/Sentence";
+import {videoConstants} from "../../utils/constants";
+import {defaultLearningStyling, defaultMeaningBoxStyling} from "../../utils/CJKStyling";
+import SmoothCollapse from "react-smooth-collapse";
 
-const VocabSidebar = ({showVocabSidebar, setShowVocabSidebar, lang, setMeaning}) => {
+const VocabSidebar = ({
+                        showVocabSidebar,
+                        setShowVocabSidebar,
+                        lang,
+                        setMeaning,
+                        tokenizeMiteiru
+                      }) => {
   const [sortedVocab, setSortedVocab] = useState([]);
+  const [hoveredWord, setHoveredWord] = useState(null);
+  const [tokenizedWord, setTokenizedWord] = useState(null);
 
   const loadVocabulary = useCallback(async () => {
     try {
@@ -26,22 +37,28 @@ const VocabSidebar = ({showVocabSidebar, setShowVocabSidebar, lang, setMeaning})
     setMeaning(word);
   }, [setMeaning]);
 
-  const saveVocabHandler = useCallback(() => {
-    ipcRenderer.invoke('loadLearningState', lang).then((val) => {
-      ipcRenderer.invoke("saveFile", ["json"], JSON.stringify(val))
-    })
-  }, [lang]);
+  const handleMouseEnter = useCallback(async (word) => {
+    setHoveredWord(word);
+    const tokenized = await tokenizeMiteiru(word);
+    setTokenizedWord(tokenized);
+  }, [tokenizeMiteiru]);
 
-  const loadVocabHandler = useCallback(() => {
-    ipcRenderer.invoke("readFile", ["json"]).then((val) => {
-      try {
-        const parsed = JSON.parse(val);
-        ipcRenderer.invoke("updateContentBatch", parsed, lang)
-      } catch (e) {
-        console.error(e)
-      }
-    })
-  }, [lang]);
+  const handleMouseLeave = useCallback(() => {
+    setHoveredWord(null);
+    setTokenizedWord(null);
+  }, []);
+
+  const renderTokenizedWord = useCallback(() => {
+    if (!tokenizedWord) return null;
+
+    if (lang === videoConstants.japaneseLang) {
+      return (tokenizedWord);
+    } else if (lang === videoConstants.chineseLang || lang === videoConstants.cantoneseLang) {
+      return (tokenizedWord.map(t => t.pinyin || t.jyutping));
+    }
+
+    return null;
+  }, [tokenizedWord, lang]);
 
   return (
       <div
@@ -61,32 +78,21 @@ const VocabSidebar = ({showVocabSidebar, setShowVocabSidebar, lang, setMeaning})
         </div>
 
         <div className={"w-full mx-5 px-3 flex flex-col content-start gap-3 unselectable"}>
-          <div className={"flex flex-row gap-2 w-full"}>
-            <AwesomeButton
-                type={"primary"}
-                className={"w-full"}
-                onPress={saveVocabHandler}
-            >
-              Save Vocabulary
-            </AwesomeButton>
-            <AwesomeButton
-                type={"secondary"}
-                className={"w-full"}
-                onPress={loadVocabHandler}
-            >
-              Load Vocabulary
-            </AwesomeButton>
-          </div>
 
           {sortedVocab.map((word) => (
               <div
                   key={word[0]}
-                  className="cursor-pointer hover:bg-blue-200 p-2 rounded mb-2 flex justify-between items-center text-black"
+                  className="cursor-pointer hover:bg-blue-200 p-2 rounded mb-2 flex flex-col justify-between items-start text-black"
                   onClick={() => jumpToWord(word[0])}
+                  onMouseEnter={() => handleMouseEnter(word[0])}
+                  onMouseLeave={handleMouseLeave}
                   style={{backgroundColor: getColorGradient(word[1].updTime)}}
               >
-                <span className="text-3xl">{word[0]}</span>
-                <span className="text-gray-600">{getRelativeTime(word[1].updTime)}</span>
+                <div className="flex w-full justify-between items-center">
+                  <span className="text-3xl">{word[0]}</span>
+                  <span className="text-gray-600">{getRelativeTime(word[1].updTime)}</span>
+                </div>
+                {hoveredWord === word[0] && renderTokenizedWord()}
               </div>
           ))}
         </div>

renderer/pages/video.tsx

@@ -225,6 +225,7 @@ function Video() {
             setShowVocabSidebar={setShowVocabSidebar}
             lang={lang}
             setMeaning={setMeaning}
+            tokenizeMiteiru={tokenizeMiteiru}
         />
       </React.Fragment>
   );