Add copy ruby

hockyy · Sep 6, 2024 · 4bbc72d · 4bbc72d
1 parent 53e558a
commit 4bbc72d
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 39 deletions.
diff --git a/renderer/components/Subtitle/Subtitle.tsx b/renderer/components/Subtitle/Subtitle.tsx
@@ -17,6 +17,7 @@ export const PrimarySubtitle = ({
                                   timeCache,
                                   setTimeCache,
                                   setExternalContent,
+                                  setRubyCopyContent
                                 }: {
                                   currentTime: number,
                                   subtitle: SubtitleContainer,
@@ -27,7 +28,8 @@ export const PrimarySubtitle = ({
                                   getLearningStateClass?: (newMeaning: string) => string,
                                   timeCache?: number[],
                                   setTimeCache?: (cache: number[]) => void,
-                                  setExternalContent?: (content: any[]) => void;
+                                  setExternalContent?: (content: any[]) => void,
+                                  setRubyCopyContent: any;
                                 }
 ) => {
   const [caption, setCaption] = useState([]);
@@ -36,7 +38,8 @@ export const PrimarySubtitle = ({
   const setFromContent = useCallback((content, wordMeaning = []) => {
     if (setExternalContent) setExternalContent(content);
     if (content === '' || content.length === 0) {
-      setCaption([])
+      setCaption([]);
+      setRubyCopyContent('');
       return;
     }
     if (typeof content === 'string') {
@@ -49,37 +52,68 @@ export const PrimarySubtitle = ({
           extraClass={"subtitle"}
           subtitleStyling={subtitleStyling}
           wordMeaning={''}/>]);
+      setRubyCopyContent(content);
       return;
     }
+    let rubyCopyContent = '';
     const current = content.map((val, index) => {
       const validBasicForm = val.basicForm != '' && val.basicForm != '*';
-      return <> {(val.jyutping || val.pinyin) ? <ChineseSentence
-          key={index}
-          origin={val.origin}
-          separation={val.separation}
-          setMeaning={setMeaning}
-          extraClass={"subtitle"}
-          subtitleStyling={subtitleStyling}
-          basicForm={validBasicForm ? val.basicForm : ''}
-          wordMeaning={wordMeaning[index]}
-          getLearningStateClass={getLearningStateClass}
-          changeLearningState={changeLearningState}/> : <JapaneseSentence
-          key={index}
-          origin={val.origin}
-          separation={val.separation}
-          setMeaning={setMeaning}
-          extraClass={"subtitle"}
-          subtitleStyling={subtitleStyling}
-          basicForm={validBasicForm ? val.basicForm : ''}
-          wordMeaning={wordMeaning[index]}
-          getLearningStateClass={getLearningStateClass}
-          changeLearningState={changeLearningState}/>}{
-        index + 1 < content.length
-        && subtitleStyling.showSpace ? " " : " "
-      }</>
-    })
-    setCaption(current)
-  }, [setExternalContent, subtitleStyling, setMeaning, getLearningStateClass, changeLearningState]);
+      const isChineseSentence = val.jyutping || val.pinyin;
+      const isJapaneseSentence = val.hiragana !== undefined;
+
+      // Generate ruby HTML for copying
+      const rubyHtml = val.separation.map(part => {
+        let reading;
+        if (isChineseSentence) {
+          reading = part.jyutping || part.pinyin;
+        } else if (isJapaneseSentence) {
+          reading = part.hiragana || part.romaji;
+        } else {
+          reading = '';
+        }
+        return `<ruby>${part.main}<rt>${reading || ''}</rt></ruby>`;
+      }).join('');
+      rubyCopyContent += rubyHtml;
+
+      if (index + 1 < content.length && subtitleStyling.showSpace) {
+        rubyCopyContent += ' ';
+      }
+
+      return (
+          <React.Fragment key={index}>
+            {isChineseSentence ? (
+                <ChineseSentence
+                    origin={val.origin}
+                    separation={val.separation}
+                    setMeaning={setMeaning}
+                    extraClass={"subtitle"}
+                    subtitleStyling={subtitleStyling}
+                    basicForm={validBasicForm ? val.basicForm : ''}
+                    wordMeaning={wordMeaning[index]}
+                    getLearningStateClass={getLearningStateClass}
+                    changeLearningState={changeLearningState}
+                />
+            ) : (
+                <JapaneseSentence
+                    origin={val.origin}
+                    separation={val.separation}
+                    setMeaning={setMeaning}
+                    extraClass={"subtitle"}
+                    subtitleStyling={subtitleStyling}
+                    basicForm={validBasicForm ? val.basicForm : ''}
+                    wordMeaning={wordMeaning[index]}
+                    getLearningStateClass={getLearningStateClass}
+                    changeLearningState={changeLearningState}
+                />
+            )}
+            {index + 1 < content.length && subtitleStyling.showSpace ? " " : " "}
+          </React.Fragment>
+      );
+    });
+
+    setCaption(current);
+    setRubyCopyContent(rubyCopyContent);
+  }, [setExternalContent, setRubyCopyContent, subtitleStyling, setMeaning, getLearningStateClass, changeLearningState]);
 
   const setSubtitle = useCallback((currentAdjustedTime) => {
     try {

diff --git a/renderer/components/VideoPlayer/KeyboardHelp.tsx b/renderer/components/VideoPlayer/KeyboardHelp.tsx
@@ -8,12 +8,15 @@ const shortcutInformation = [
   }, {
     key: "X",
     description: "Toggle Sidebar"
+  }, {
+    key: "Ctrl + X",
+    description: "Toggle Vocab Sidebar"
   }, {
     key: "Ctrl + H",
     description: "Back to Home"
   }, {
     key: "Esc",
-    description: "Exit From CJK Information Box"
+    description: "Exit From CJK Information Box / Undo"
   }, {
     key: "D",
     description: "Go Back to Previous Meaning Box"
@@ -50,6 +53,12 @@ const shortcutInformation = [
   }, {
     key: "Ctrl + Shift + L",
     description: "Toggle Learning Mode"
+  }, {
+    key: "Ctrl + K",
+    description: "Open Flash Cards"
+  }, {
+    key: "Ctrl + Shift + K",
+    description: "Open Database"
   }, {
     key: "[",
     description: "Shift CJK Subtitle Slower"
@@ -62,7 +71,11 @@ const shortcutInformation = [
   }, {
     key: "Ctrl + ]",
     description: "Shift Main Subtitle Faster"
-  }]
+  }, {
+    key: "C",
+    description: "Copy Ruby Content"
+  }
+]
 
 export const Key = ({
                       value,

diff --git a/renderer/hooks/useKeyBind.tsx b/renderer/hooks/useKeyBind.tsx
@@ -21,7 +21,8 @@ export default function useKeyBind(
     openGoogleTranslate,
     reloadLastPrimarySubtitle,
     reloadLastSecondarySubtitle,
-    setShowVocabSidebar
+    setShowVocabSidebar,
+    rubyContent
 ) {
   const router = useRouter();
   useEffect(() => {
@@ -85,6 +86,15 @@ export default function useKeyBind(
       } else if (event.code === "KeyA") {
         reloadLastSecondarySubtitle();
         reloadLastPrimarySubtitle();
+      } else if (event.code === "KeyC") {
+        // New copy functionality
+        if (rubyContent) {
+          try {
+            await navigator.clipboard.writeText(rubyContent);
+          } catch (err) {
+            console.error("Failed to copy text: ", err);
+          }
+        }
       }
     };
 
@@ -93,6 +103,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, setShowVocabSidebar]);
+  }, [router, setMeaning, setShowController, setShowSidebar, setPrimarySub, setSecondarySub, setPrimaryStyling, primarySub.id, setShowPrimarySub, setShowSecondarySub, undo, primaryStyling, openGoogleTranslate, openDeepL, reloadLastSecondarySubtitle, reloadLastPrimarySubtitle, setShowVocabSidebar, rubyContent]);
 
 }
diff --git a/renderer/hooks/useLearningKeyBind.tsx b/renderer/hooks/useLearningKeyBind.tsx
@@ -4,7 +4,8 @@ import {useRouter} from "next/router";
 export default function useLearningKeyBind(
     setMeaning,
     setShowSidebar,
-    undo
+    undo,
+    rubyContent: any = ''
 ) {
   const router = useRouter();
   useEffect(() => {
@@ -21,6 +22,10 @@ export default function useLearningKeyBind(
         setShowSidebar((old) => {
           return !old;
         });
+      } else if (event.code === "KeyC" && event.ctrlKey) {
+        if (rubyContent) {
+          await navigator.clipboard.writeText(rubyContent);
+        }
       }
     };
 
@@ -29,6 +34,6 @@ export default function useLearningKeyBind(
     return () => {
       window.removeEventListener('keydown', handleKeyPress);
     };
-  }, [router, setMeaning, setShowSidebar, undo]);
+  }, [router, rubyContent, setMeaning, setShowSidebar, undo]);
 
 }
diff --git a/renderer/hooks/useRubyCopy.ts b/renderer/hooks/useRubyCopy.ts
@@ -0,0 +1,8 @@
+import {useState} from 'react';
+
+const useRubyCopy = () => {
+  const [rubyContent, setRubyContent] = useState('');
+  return [rubyContent, setRubyContent];
+};
+
+export default useRubyCopy;
diff --git a/renderer/pages/learn.tsx b/renderer/pages/learn.tsx
@@ -19,6 +19,7 @@ import useTranslationLinks from "../hooks/useTranslationLinks";
 import 'react-awesome-button/dist/styles.css';
 import useGoogleTranslator from "../hooks/useGoogleTranslator";
 import TranslationDisplay from "../components/Subtitle/TranslationDisplay";
+import useRubyCopy from "../hooks/useRubyCopy";
 
 function Learn() {
   const {
@@ -31,7 +32,8 @@ function Learn() {
   const [directInput, setDirectInput] = useState('');
   const [showSidebar, setShowSidebar] = useState(0)
   const [primaryStyling, setPrimaryStyling] = useStoreData('user.styling.learning', defaultLearningStyling);
-  useLearningKeyBind(setMeaning, setShowSidebar, undo)
+  const [rubyContent, setRubyCopyContent] = useRubyCopy();
+  useLearningKeyBind(setMeaning, setShowSidebar, undo, rubyContent);
   const router = useRouter();
   const {
     tokenizerMode,
@@ -133,7 +135,8 @@ function Learn() {
                   <AwesomeButton type={'primary'} onPress={() => handleTranslate(true)}>
                     Translate Now
                   </AwesomeButton>
-                  <AwesomeButton type={isAutoTranslating ? 'secondary' : 'primary'} onPress={toggleAutoTranslate}>
+                  <AwesomeButton type={isAutoTranslating ? 'secondary' : 'primary'}
+                                 onPress={toggleAutoTranslate}>
                     {isAutoTranslating ? 'Stop Auto Translate' : 'Start Auto Translate'}
                   </AwesomeButton>
                 </div>
@@ -154,6 +157,7 @@ function Learn() {
                     subtitleStyling={primaryStyling}
                     getLearningStateClass={getLearningStateClass}
                     changeLearningState={changeLearningState}
+                    setRubyCopyContent={setRubyCopyContent}
                 />
               </div>
             </ContainerHome>

diff --git a/renderer/pages/video.tsx b/renderer/pages/video.tsx
@@ -29,6 +29,7 @@ import useTranslationLinks from "../hooks/useTranslationLinks";
 import useContentString from "../hooks/useContentString";
 import useVocabSidebar from "../hooks/useVocabSidebar";
 import VocabSidebar from "../components/VideoPlayer/VocabSidebar";
+import useRubyCopy from "../hooks/useRubyCopy";
 
 function Video() {
   const {
@@ -120,11 +121,13 @@ function Video() {
     showSidebar,
     setShowSidebar
   } = useMenuDisplay();
+
+  const [rubyContent, setRubyCopyContent] = useRubyCopy();
   useKeyBind(setMeaning, setShowController, setShowSidebar,
       setPrimarySub, setSecondarySub, primarySub, undo,
       setShowPrimarySub, setShowSecondarySub, primaryStyling, setPrimaryStyling,
       openDeepL, openGoogleTranslate, reloadLastPrimarySubtitle, reloadLastSecondarySubtitle,
-      setShowVocabSidebar);
+      setShowVocabSidebar, rubyContent);
   const {
     togglePlay,
     isPlaying,
@@ -184,7 +187,8 @@ function Video() {
                                                 changeLearningState={changeLearningState}
                                                 timeCache={primaryTimeCache}
                                                 setTimeCache={setPrimaryTimeCache}
-                                                setExternalContent={setExternalContent}/>}
+                                                setExternalContent={setExternalContent}
+                                                setRubyCopyContent={setRubyCopyContent}/>}
             {showSecondarySub && <SecondarySubtitle
                 currentTime={currentTime}
                 subtitle={secondarySub}