add notifs on timestamp formatting failure, lose focus on ESC pressed

classtranscribe · Dec 4, 2024 · 58bba59 · 58bba59
1 parent c0f0891
commit 58bba59
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 14 deletions.
diff --git a/src/screens/Watch/Components/Transcriptions/CaptionLine/index.js b/src/screens/Watch/Components/Transcriptions/CaptionLine/index.js
@@ -75,16 +75,20 @@ function CaptionLine({ caption = {}, allowEdit, dispatch, fontSize }) {
 
   const handleTimeKeyDown = (e, ref, setFullTime) => {
     if (ref.current) {
-      if (e.keyCode === KeyCode.KEY_RETURN && !e.shiftKey) {
+      if (e.keyCode === KeyCode.KEY_ESCAPE) {
+        e.preventDefault();
+        ref.current.blur();
+      } else if (e.keyCode === KeyCode.KEY_RETURN && !e.shiftKey) {
         e.preventDefault();
         const currentValue = ref.current?.innerText || "";
         try {
           validateTimeFormat(currentValue);
           setFullTime(currentValue);
         } catch (error) {
-          // eslint-disable-next-line no-console
-          console.log("ERROR", error)
-          // TODO: add reactful alert here if timestring is badly formatted
+          dispatch({
+            type: 'watch/timestampFailed',
+            payload: { caption },
+          });
         }
         ref.current.blur();
       }
@@ -93,6 +97,10 @@ function CaptionLine({ caption = {}, allowEdit, dispatch, fontSize }) {
 
   const handleTextKeyDown = (e, ref) => {
     if (ref.current) {
+      if (e.keyCode === KeyCode.KEY_ESCAPE) {
+        ref.current.blur();
+        return;
+      }
       if (e.keyCode === KeyCode.KEY_RETURN && !e.shiftKey) {
         e.preventDefault();
         const currentValue = textRef.current?.innerText || "";

diff --git a/src/screens/Watch/Utils/prompt.control.js b/src/screens/Watch/Utils/prompt.control.js
@@ -3,10 +3,10 @@ import { prompt } from 'utils';
 /**
  * Functions for controlling prompts
  */
-const standardPosition = [70,70];
+const standardPosition = [70, 70];
 
 export const promptControl = {
-  
+
   closePrompt() {
     prompt.closeAll();
   },
@@ -26,7 +26,7 @@ export const promptControl = {
     });
   },
 
-  savingCaption() {},
+  savingCaption() { },
 
   savedCaption(isClosedCaption, success = true) {
     const captionType = isClosedCaption ? 'Closed Caption' : 'Description'
@@ -38,6 +38,16 @@ export const promptControl = {
     });
   },
 
+  timestampFailed(isClosedCaption) {
+    const captionType = isClosedCaption ? 'Closed Caption' : 'Description'
+    prompt.addOne({
+      status: 'error',
+      text: `${captionType} could not be saved. Timestamps must be in HH:MM:SS.MS format`,
+      offset: standardPosition,
+      timeout: 3000,
+    });
+  },
+
   hideSecondaryScreen() {
     prompt.addOne({
       text: 'Click <i class="material-icons">video_label</i> to see more screen options.',
@@ -49,9 +59,8 @@ export const promptControl = {
   error(target = 'media data') {
     const { search, pathname } = window.location;
     prompt.addOne({
-      text: `Couldn't load ${target}. Please&ensp;<a href="${
-        pathname + search
-      }">refresh</a>&ensp;to retry.`,
+      text: `Couldn't load ${target}. Please&ensp;<a href="${pathname + search
+        }">refresh</a>&ensp;to retry.`,
       offset: standardPosition,
       status: 'error',
     });
@@ -61,10 +70,10 @@ export const promptControl = {
     prompt.addOne({
       text: `Sorry, if the video can't load, please use Chrome to open the page. 
         <a href=${`googlechrome-x-callback://x-callback-url/open/?url=${encodeURIComponent(
-          window.location.href,
-        )}&x-source=Safari&x-success=${encodeURIComponent(
-          window.location.href,
-        )}`}>Click to open in Chrome</a>`,
+        window.location.href,
+      )}&x-source=Safari&x-success=${encodeURIComponent(
+        window.location.href,
+      )}`}>Click to open in Chrome</a>`,
       position: 'top',
       status: 'error',
     });

diff --git a/src/screens/Watch/model/trans_effects.js b/src/screens/Watch/model/trans_effects.js
@@ -234,6 +234,10 @@ export default {
             yield put({ type: 'playerpref/setPreference', payload: { showCaptionTips: false } });
         }
     },
+    *timestampFailed({ payload: { caption } }) {
+        promptControl.timestampFailed(caption.transcription.transcriptionType === 0);
+        yield;
+    },
     // This is a transcript caption
     *saveCaption({ payload: { caption, text, begin, end } }, { call, put, select }) {
         const { watch } = yield select();