Change dropzone to be a global invisible component

hockyy · May 7, 2023 · 4de5426 · 4de5426
1 parent 3129046
commit 4de5426
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 36 deletions.
diff --git a/MiteiruNotes.md b/MiteiruNotes.md
@@ -1,7 +1,7 @@
 Video - 0  
+Drop Zone - 4
 Subtitle Container - 3  
 Subtitle - 10  
 Video Controller - 15  
 Meaning box - 18  
-Side bar - 19  
-Drop Zone - 20
+Side bar - 19
diff --git a/renderer/components/DataStructures.ts b/renderer/components/DataStructures.ts
@@ -1,9 +1,11 @@
-import {getFurigana, isMixedJapanese} from "shunou";
+import {getFurigana} from "shunou";
 import fs from 'fs';
 import {parse as parseSRT} from '@plussub/srt-vtt-parser';
 import {parse as parseASS} from 'ass-compiler';
 import languageEncoding from "detect-file-encoding-and-language";
 import iconv from "iconv-lite"
+import {Dispatch, SetStateAction} from "react";
+import {randomUUID} from "crypto";
 
 const languageMap = {
   'japanese': 'JP',
@@ -48,7 +50,6 @@ export class SubtitleContainer {
     if (filename === '') return
     const subtitleContainer = new SubtitleContainer('', mecab);
     let entries;
-    console.log(filename)
     const buffer = await fs.promises.readFile(filename)
     const blob = new Blob([buffer]);
 

diff --git a/renderer/components/KeyboardHelp.tsx b/renderer/components/KeyboardHelp.tsx
@@ -3,13 +3,10 @@ const shortcutInformation = [{
   description: "Toggle Pause"
 },
   {
-    key: "X",
-    description: "Toggle Dropzone"
-  }, {
     key: "Z",
     description: "Toggle Video Control Bar"
   }, {
-    key: "C",
+    key: "X",
     description: "Toggle Sidebar"
   }, {
     key: "Q",

diff --git a/renderer/components/MiteiruDropzone.tsx b/renderer/components/MiteiruDropzone.tsx
@@ -25,24 +25,23 @@ const ActiveDropzoneCue = ({isActive}) => {
 
 export const MiteiruDropzone = ({onDrop}) => {
 
-  const {getRootProps, getInputProps, isDragActive} = useDropzone({
+  const {getRootProps} = useDropzone({
     noClick: true,
     onDrop,
+    noKeyboard: true,
+    noDragEventsBubbling: true
   })
 
-  return (<div>
-    <div {...getRootProps()} style={{
-      zIndex: 20,
-      backgroundColor: "rgba(171,248,255,0.45)",
-      position: "fixed",
-      top: "0vh",
-      height: "100vh",
-      width: "100vw"
-    }}>
-      <input {...getInputProps()}/>
-      <ActiveDropzoneCue isActive={isDragActive}/>
-    </div>
-  </div>)
+  return (
+      <div {...getRootProps()} className={"unselectable"} style={{
+        zIndex: 4,
+        position: "fixed",
+        top: "0vh",
+        height: "100vh",
+        width: "100vw"
+
+      }}>
+      </div>)
 }
 
 export default MiteiruDropzone;
diff --git a/renderer/components/Toast.tsx b/renderer/components/Toast.tsx
@@ -1,6 +1,6 @@
 import {useEffect, useState} from "react";
 
-const toastTimeout = 3000
+export const TOAST_TIMEOUT = 3000
 
 const toastHidden = ["", "hidden"]
 export const Toast = ({info}) => {
@@ -11,7 +11,7 @@ export const Toast = ({info}) => {
         (function () {
           setLastToast(info)
         })();
-      }, toastTimeout)
+      }, TOAST_TIMEOUT)
     }
     return;
   }, [info])

diff --git a/renderer/components/VideoController.tsx b/renderer/components/VideoController.tsx
@@ -87,7 +87,7 @@ export const VideoController = ({
       window.removeEventListener('keydown', handleVideoController);
     };
   }, []);
-  return <div className={'z-[15]'}>
+  return <div>
     <div className={"w-[100vw] h-6 content-center -mb-4"}>
       <VideoSeekSlider
           max={duration}

diff --git a/renderer/pages/video.tsx b/renderer/pages/video.tsx
@@ -7,7 +7,7 @@ import MeaningBox from "../components/MeaningBox";
 import {useRouter} from "next/router";
 import {ipcRenderer} from "electron";
 import {VideoController} from "../components/VideoController";
-import Toast from "../components/Toast";
+import Toast, {TOAST_TIMEOUT} from "../components/Toast";
 import {Sidebar} from "../components/Sidebar";
 import {defaultPrimarySubtitleStyling, defaultSecondarySubtitleStyling} from "../utils/CJKStyling";
 import {randomUUID} from "crypto";
@@ -41,14 +41,24 @@ function Video() {
     }
     if (currentPath.endsWith('.srt') || currentPath.endsWith('.vtt') || currentPath.endsWith('.ass')) {
       setToastInfo({
-        message: 'Loading subtitles, please wait!',
+        message: 'Loading subtitle, please wait!',
         update: randomUUID()
-      })
+      });
+      const toastSetter = setInterval(() => {
+        console.log("WTF");
+        setToastInfo({
+          message: 'Still loading subtitle, please wait!',
+          update: randomUUID()
+        })
+      }, TOAST_TIMEOUT);
       const draggedSubtitle = {
         type: 'text/plain',
         src: `${currentPath}`
       }
+      console.log(toastSetter)
       const tmpSub = await SubtitleContainer.create(draggedSubtitle.src, mecab);
+      clearInterval(toastSetter);
+      console.log("OK")
       if (tmpSub.language === "JP") {
         setPrimarySub(tmpSub)
       } else {
@@ -90,11 +100,9 @@ function Video() {
     })
     // https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/
     const handleKeyPress = (event) => {
-      if (event.code === "KeyX") {
-        setDragDrop((old) => {
-          return !old
-        })
-      } else if (event.code === "Escape") {
+      event.preventDefault()
+      event.stopPropagation()
+      if (event.code === "Escape") {
         setMeaning("")
       } else if (event.code === "KeyQ") {
         router.push('/home')
@@ -104,7 +112,7 @@ function Video() {
         setShowController((old) => {
           return !old
         })
-      } else if (event.code === "KeyC") {
+      } else if (event.code === "KeyX") {
         setShowSidebar((old) => {
           return !old
         })
@@ -121,6 +129,7 @@ function Video() {
   }, []);
   return (
       <React.Fragment>
+
         <div>
           <Toast info={toastInfo}/>
           <MeaningBox meaning={meaning} setMeaning={setMeaning} mecab={mecab}/>
@@ -136,7 +145,7 @@ function Video() {
               durationDisplay: true
             }
           }} onReady={readyCallback} setCurrentTime={setCurrentTime}/>
-          <div className={"flex flex-col justify-end bottom-0 z-[3] fixed h-[100vh] w-[100vw]"}>
+          <div>
             <PrimarySubtitle setMeaning={setMeaning}
                              currentTime={currentTime}
                              subtitle={primarySub}
@@ -147,6 +156,8 @@ function Video() {
                 subtitle={secondarySub}
                 shift={secondaryShift}
                 subtitleStyling={secondaryStyling}/>
+          </div>
+          <div className={"flex flex-col justify-end bottom-0 z-[15] fixed"}>
             {player && <VideoController player={player}
                                         currentTime={currentTime}
                                         setCurrentTime={setCurrentTime}
@@ -157,10 +168,10 @@ function Video() {
                                         setInfo={setToastInfo}
                                         setShowSidebar={setShowSidebar}/>}
           </div>
+          {mecab !== '' && <MiteiruDropzone onDrop={onLoadFiles}/>}
 
 
         </div>
-        {mecab !== '' && dragDrop && <MiteiruDropzone onDrop={onLoadFiles}/>}
         <Sidebar showSidebar={showSidebar} setShowSidebar={setShowSidebar}
                  primaryStyling={primaryStyling}
                  setPrimaryStyling={setPrimaryStyling}