edit subtitle button

kurianbenoy · Mar 4, 2024 · 8d6c8f1 · 8d6c8f1
1 parent be2f53e
commit 8d6c8f1
Showing 1 changed file with 25 additions and 4 deletions.
diff --git a/ui/src/components/SubtitleEditor.jsx b/ui/src/components/SubtitleEditor.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { formatTime } from "@components/utils";
 import DownloadFileDropdown from "./DownloadFileDropdown";
+import { IconPencil } from "@tabler/icons-react";
 
 export default function SubtitleEditor({
   isBeingGenerated,
@@ -15,6 +16,15 @@ export default function SubtitleEditor({
     updateTranscribe[index][type] = newText;
     setTranscribed(updateTranscribe);
   }
+  const textAreaRefs = useRef([]);
+
+  const focusTextArea = (index) => {
+    textAreaRefs?.current[index].focus();
+    textAreaRefs?.current[index].setSelectionRange(
+      textAreaRefs?.current[index].value.length,
+      textAreaRefs?.current[index].value.length
+    );
+  };
   const endDivRef = useRef();
 
   useEffect(() => {
@@ -58,8 +68,8 @@ export default function SubtitleEditor({
           )}
         </div>
 
-        <div>
-          <div className="overflow-x-auto h-[680px] ">
+        <div className="flex flex-col justify-between ">
+          <div className="overflow-x-auto h-[620px]">
             <table className="table text-lg">
               <thead className="text-lg text-gray-600">
                 <tr>
@@ -76,10 +86,10 @@ export default function SubtitleEditor({
                         {formatTime(element.end).replace(",", ".")}
                       </p>
                     </td>
-                    <td>
+                    <td className="flex items-center gap-3">
                       <textarea
                         aria-label="Subtitle"
-                        id={index}
+                        ref={(el) => (textAreaRefs.current[index] = el)}
                         className="w-full resize-none"
                         rows={Math.ceil(element.text?.length / 100) || 2}
                         type="text"
@@ -88,13 +98,24 @@ export default function SubtitleEditor({
                           handleInputChange(index, e.target.value, "text")
                         }
                       />
+                      <button
+                        role="button"
+                        aria-label="edit subtitle"
+                        onClick={() => focusTextArea(index)}
+                      >
+                        <IconPencil color="grey" />
+                      </button>
                     </td>
                   </tr>
                 ))}
               </tbody>
             </table>
             <div ref={endDivRef}></div>
           </div>
+          <p className="md:text-center text-gray-600  mt-8">
+            IndicSubtitler can make mistakes. Consider checking important
+            information.
+          </p>
         </div>
       </aside>
     );