Add side left vocab

renderer/components/VideoPlayer/VocabSidebar.tsx

@@ -0,0 +1,97 @@
+// components/VideoPlayer/VocabSidebar.js
+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";
+
+const VocabSidebar = ({showVocabSidebar, setShowVocabSidebar, lang, setMeaning}) => {
+  const [sortedVocab, setSortedVocab] = useState([]);
+
+  const loadVocabulary = useCallback(async () => {
+    try {
+      const loadedState = await ipcRenderer.invoke('loadLearningState', lang);
+      const sorted = Object.entries(loadedState).sort((a: any[], b: any[]) => b[1].updTime - a[1].updTime);
+      setSortedVocab(sorted);
+    } catch (error) {
+      console.error('Error loading vocabulary:', error);
+    }
+  }, [lang]);
+
+  useEffect(() => {
+    loadVocabulary();
+  }, [lang, loadVocabulary]);
+
+  const jumpToWord = useCallback((word) => {
+    setMeaning(word);
+  }, [setMeaning]);
+
+  const saveVocabHandler = useCallback(() => {
+    ipcRenderer.invoke('loadLearningState', lang).then((val) => {
+      ipcRenderer.invoke("saveFile", ["json"], JSON.stringify(val))
+    })
+  }, [lang]);
+
+  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]);
+
+  return (
+      <div
+          style={{
+            transition: "all 0.3s ease-out",
+            transform: `translate(${showVocabSidebar ? "0" : "-30vw"}, 0`
+          }}
+          className={"overflow-y-scroll overflow-x-clip flex flex-col content-center items-center p-3 z-[19] fixed left-0 top-0 h-screen w-[30vw] bg-gray-700/70 text-white"}
+      >
+        <button className={"self-end p-2"} onClick={() => setShowVocabSidebar(old => !old)}>
+          <div className={"animation h-5"}>
+            {ArrowRight}
+          </div>
+        </button>
+        <div className={"font-bold unselectable text-3xl m-4"}>
+          Vocabulary List ({lang})
+        </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"
+                  onClick={() => jumpToWord(word[0])}
+                  style={{backgroundColor: getColorGradient(word[1].updTime)}}
+              >
+                <span className="text-3xl">{word[0]}</span>
+                <span className="text-gray-600">{getRelativeTime(word[1].updTime)}</span>
+              </div>
+          ))}
+        </div>
+      </div>
+  );
+};
+
+export default VocabSidebar;

renderer/hooks/useKeyBind.tsx

@@ -20,7 +20,8 @@ export default function useKeyBind(
     openDeepL,
     openGoogleTranslate,
     reloadLastPrimarySubtitle,
-    reloadLastSecondarySubtitle
+    reloadLastSecondarySubtitle,
+    setShowVocabSidebar
 ) {
   const router = useRouter();
   useEffect(() => {
@@ -49,9 +50,15 @@ export default function useKeyBind(
           return !old;
         });
       } else if (event.code === "KeyX") {
-        setShowSidebar((old) => {
-          return !old;
-        });
+        if (event.ctrlKey) {
+          setShowVocabSidebar((old) => {
+            return !old;
+          })
+        } else {
+          setShowSidebar((old) => {
+            return !old;
+          });
+        }
       } else if (event.code === "KeyY") {
         const newCopy = JSON.parse(JSON.stringify(primaryStyling))
         newCopy.showFurigana = !primaryStyling.showFurigana;
@@ -86,6 +93,6 @@ export default function useKeyBind(
     return () => {
       window.removeEventListener('keydown', handleKeyPress);
     };
-  }, [router, setMeaning, setShowController, setShowSidebar, setPrimarySub, setSecondarySub, setPrimaryStyling, primarySub.id, setShowPrimarySub, setShowSecondarySub, undo, primaryStyling, openGoogleTranslate, openDeepL, reloadLastSecondarySubtitle, reloadLastPrimarySubtitle]);
+  }, [router, setMeaning, setShowController, setShowSidebar, setPrimarySub, setSecondarySub, setPrimaryStyling, primarySub.id, setShowPrimarySub, setShowSecondarySub, undo, primaryStyling, openGoogleTranslate, openDeepL, reloadLastSecondarySubtitle, reloadLastPrimarySubtitle, setShowVocabSidebar]);
 
 }

renderer/hooks/useVocabSidebar.tsx

@@ -0,0 +1,18 @@
+// hooks/useVocabSidebar.js
+import { useState, useCallback } from 'react';
+
+const useVocabSidebar = () => {
+  const [showVocabSidebar, setShowVocabSidebar] = useState(false);
+
+  const toggleVocabSidebar = useCallback(() => {
+    setShowVocabSidebar(prev => !prev);
+  }, []);
+
+  return {
+    showVocabSidebar,
+    setShowVocabSidebar,
+    toggleVocabSidebar
+  };
+};
+
+export default useVocabSidebar;

renderer/pages/video.tsx

@@ -27,6 +27,8 @@ import useLearningState from "../hooks/useLearningState";
 import usePauseAndRepeat from "../hooks/usePauseAndRepeat";
 import useTranslationLinks from "../hooks/useTranslationLinks";
 import useContentString from "../hooks/useContentString";
+import useVocabSidebar from "../hooks/useVocabSidebar";
+import VocabSidebar from "../components/VideoPlayer/VocabSidebar";
 
 function Video() {
   const {
@@ -53,6 +55,13 @@ function Video() {
     currentTime,
     setCurrentTime
   } = useReadyPlayerCallback();
+
+  const {
+    showVocabSidebar,
+    setShowVocabSidebar,
+    toggleVocabSidebar
+  } = useVocabSidebar();
+
   const {
     primarySub,
     setPrimarySub,
@@ -114,7 +123,8 @@ function Video() {
   useKeyBind(setMeaning, setShowController, setShowSidebar,
       setPrimarySub, setSecondarySub, primarySub, undo,
       setShowPrimarySub, setShowSecondarySub, primaryStyling, setPrimaryStyling,
-      openDeepL, openGoogleTranslate, reloadLastPrimarySubtitle, reloadLastSecondarySubtitle);
+      openDeepL, openGoogleTranslate, reloadLastPrimarySubtitle, reloadLastSecondarySubtitle,
+      setShowVocabSidebar);
   const {
     togglePlay,
     isPlaying,
@@ -209,6 +219,12 @@ function Video() {
                  setAutoPause={setAutoPause}
                  learningPercentage={learningPercentage}
                  setLearningPercentage={setLearningPercentage} lang={lang}/>
+        <VocabSidebar
+            showVocabSidebar={showVocabSidebar}
+            setShowVocabSidebar={setShowVocabSidebar}
+            lang={lang}
+            setMeaning={setMeaning}
+        />
       </React.Fragment>
   );
 }

renderer/utils/utils.tsx

@@ -107,4 +107,37 @@ export const sortAndFilterTopXPercentToJson = (frequency, x: number) => {
     obj[key] = value;
     return obj;
   }, {});
-}
+}
+
+
+export const getRelativeTime = (timestamp) => {
+  const now = new Date().getTime();
+  const updatedDate = new Date(timestamp).getTime();
+  const diffTime = Math.abs(now - updatedDate);
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+  const diffHours = Math.floor(diffTime / (1000 * 60 * 60));
+  const diffMinutes = Math.floor(diffTime / (1000 * 60));
+
+  if (diffDays > 0) {
+    return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+  } else if (diffHours > 0) {
+    return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+  } else if (diffMinutes > 0) {
+    return `${diffMinutes} minute${diffMinutes > 1 ? 's' : ''} ago`;
+  } else {
+    return 'Just now';
+  }
+};
+export const getColorGradient = (timestamp) => {
+  const now = new Date().getTime();
+  const diff = now - timestamp;
+  const maxDiff = 30 * 24 * 60 * 60 * 1000; // 30 days in milliseconds
+  const ratio = Math.min(diff / maxDiff, 1);
+
+  // Pastel green (newest) to pastel red (oldest)
+  const red = Math.round(255 * (0.5 + ratio * 0.5));
+  const green = Math.round(255 * (1 - ratio * 0.5));
+  const blue = Math.round(255 * (0.5 + Math.abs(ratio - 0.5) * 0.5));
+
+  return `rgb(${red}, ${green}, ${blue})`;
+};