Edit meaning box to have a bookmark button

hockyy · Jul 24, 2024 · 522af02 · 522af02
1 parent d2f3985
commit 522af02
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "pinyin-pro": "^3.23.1",
     "react-awesome-button": "6.1.0",
     "react-colorful": "^5.6.1",
+    "react-icons": "^5.2.1",
     "react-smooth-collapse": "^2.1.2",
     "react-svg": "^16.1.34",
     "react-video-seek-slider": "^6.0.6",

diff --git a/renderer/components/Meaning/MeaningBox.tsx b/renderer/components/Meaning/MeaningBox.tsx
@@ -1,14 +1,37 @@
 import React, {useCallback, useEffect, useMemo, useState} from "react";
 import {ipcRenderer, shell} from "electron";
 import {HanziSentence, KanjiSentence} from "../Subtitle/Sentence";
-import {defaultMeaningBoxStyling} from "../../utils/CJKStyling";
+import {defaultLearningColorStyling, defaultMeaningBoxStyling} from "../../utils/CJKStyling";
 import {joinString} from "../../utils/utils";
 import {AwesomeButton} from "react-awesome-button";
 import {isKanji, toHiragana} from 'wanakana'
 import KanjiVGDisplay from "./KanjiVGDisplay";
 import WanikaniRadicalDisplay from "./WanikaniRadicalDisplay";
 import {videoConstants} from "../../utils/constants";
 import MakeMeAHanziDisplay from "./MakeMeAHanziDisplay";
+import {FaStar} from 'react-icons/fa';
+
+const OutlinedStar = ({color, size, outlineColor = 'black', outlineWidth = 1}) => {
+  const id = `star-outline-${color.replace('#', '')}`;
+
+  return (
+      <svg width={size} height={size}>
+        <defs>
+          <filter id={id}>
+            <feMorphology in="SourceAlpha" result="expanded" operator="dilate"
+                          radius={outlineWidth}/>
+            <feFlood floodColor={outlineColor}/>
+            <feComposite in2="expanded" operator="in"/>
+            <feComposite in="SourceGraphic"/>
+          </filter>
+        </defs>
+        <g filter={`url(#${id})`}>
+          <FaStar color={color} size={size}/>
+        </g>
+      </svg>
+  );
+};
+
 
 const initialContentState = {
   id: "",
@@ -17,21 +40,28 @@ const initialContentState = {
 };
 const initialCharacterContentState = {literal: null};
 
+const getStarColor = (learningState) => {
+  return defaultLearningColorStyling.learningColor[learningState].color;
+};
 const MeaningBox = ({
                       meaning,
                       setMeaning,
                       tokenizeMiteiru,
                       subtitleStyling = defaultMeaningBoxStyling,
                       customComponent = null,
-                      lang
+                      lang,
+                      changeLearningState = null,
+                      getLearningState = null
                     }) => {
   const [meaningContent, setMeaningContent] = useState(initialContentState);
   const [meaningCharacter, setMeaningCharacter] = useState(initialCharacterContentState);
   const [otherMeanings, setOtherMeanings] = useState([]);
   const [meaningIndex, setMeaningIndex] = useState(0);
   const [tags, setTags] = useState({});
   const [romajiedData, setRomajiedData] = useState([]);
-
+  const handleStarClick = useCallback(() => {
+    changeLearningState(meaning);
+  }, [changeLearningState, meaning]);
   useEffect(() => {
     if (meaning === '') {
       setMeaningContent(initialContentState);
@@ -140,6 +170,16 @@ const MeaningBox = ({
                                      setMeaning={setMeaning}
                                      subtitleStyling={subtitleStyling}/>
                 ))}
+                {getLearningState && changeLearningState &&
+                    <button onClick={handleStarClick} className="ml-4">
+                      <OutlinedStar
+                          color={getStarColor(getLearningState(meaning))}
+                          size={24}
+                          outlineColor="black"
+                          outlineWidth={1}
+                      />
+                    </button>
+                }
               </div>
               <AwesomeButton type="primary" disabled={meaningIndex === otherMeanings.length - 1}
                              onPress={handleNext}>

diff --git a/renderer/pages/learn.tsx b/renderer/pages/learn.tsx
@@ -16,6 +16,7 @@ import 'react-awesome-button/dist/styles.css';
 import {videoConstants} from "../utils/constants";
 import useLearningState from "../hooks/useLearningState";
 import useTranslationLinks from "../hooks/useTranslationLinks";
+import 'react-awesome-button/dist/styles.css';
 
 function Learn() {
 

diff --git a/renderer/pages/video.tsx b/renderer/pages/video.tsx
@@ -59,7 +59,6 @@ function Video() {
   const {
     showVocabSidebar,
     setShowVocabSidebar,
-    toggleVocabSidebar
   } = useVocabSidebar();
 
   const {
@@ -89,7 +88,8 @@ function Video() {
     changeLearningState,
     setFrequencyPrimary,
     learningPercentage,
-    setLearningPercentage
+    setLearningPercentage,
+    getLearningState,
   } = useLearningState(lang);
   const {
     meaning,
@@ -147,7 +147,8 @@ function Video() {
         <div>
           <Toast info={toastInfo}/>
           <MeaningBox meaning={meaning} setMeaning={setMeaning} tokenizeMiteiru={tokenizeMiteiru}
-                      lang={lang}/>
+                      lang={lang} changeLearningState={changeLearningState}
+                      getLearningState={getLearningState}/>
           <VideoJS options={{
             techOrder: ["html5", "youtube"],
             sources: [videoSrc],