Subtitle offset input is more responsive and works on mobile website

ironclownfish · Mar 23, 2024 · 1ead96e · 1ead96e
1 parent 01afa2a
commit 1ead96e
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 31 deletions.
diff --git a/common/app/components/Controls.tsx b/common/app/components/Controls.tsx
@@ -789,27 +789,39 @@ export default function Controls({
         [onOffsetChange]
     );
 
+    const tryApplyPlaybackRate = useCallback(
+        (revertOnFailure: boolean) => {
+            if (!playbackRateInputRef.current) {
+                return;
+            }
+            const newPlaybackRate = Number(playbackRateInputRef.current.value);
+
+            if (playbackRate === newPlaybackRate) {
+                updatePlaybackRate(playbackRate);
+                return;
+            }
+
+            if (Number.isNaN(newPlaybackRate) || newPlaybackRate < 0.1 || newPlaybackRate > 5) {
+                if (revertOnFailure) {
+                    updatePlaybackRate(playbackRate);
+                }
+
+                return;
+            }
+
+            onPlaybackRateChange(newPlaybackRate);
+        },
+        [onPlaybackRateChange, updatePlaybackRate, playbackRate]
+    );
+
     useEffect(() => {
         if (disableKeyEvents) {
             return;
         }
 
         function handleKey(event: KeyboardEvent) {
             if (event.key === 'Enter') {
-                if (playbackRateInputRef.current === document.activeElement) {
-                    const newPlaybackRate = Number(playbackRateInputRef.current.value);
-
-                    if (playbackRate === newPlaybackRate) {
-                        updatePlaybackRate(playbackRate);
-                        return;
-                    }
-
-                    if (Number.isNaN(newPlaybackRate) || newPlaybackRate < 0.1 || newPlaybackRate > 5) {
-                        return;
-                    }
-
-                    onPlaybackRateChange(newPlaybackRate);
-                }
+                tryApplyPlaybackRate(false);
             }
         }
 
@@ -818,13 +830,17 @@ export default function Controls({
         return () => {
             window.removeEventListener('keydown', handleKey);
         };
-    }, [onOffsetChange, onPlaybackRateChange, updatePlaybackRate, offset, playbackRate, disableKeyEvents]);
+    }, [tryApplyPlaybackRate, playbackRate, disableKeyEvents]);
 
     const handleNumberInputClicked = useCallback((e: React.MouseEvent<HTMLInputElement>) => {
         const inputElement = e.target as HTMLInputElement;
         inputElement.setSelectionRange(0, inputElement.value?.length || 0);
     }, []);
 
+    const handleNumberInputDeselected = useCallback(() => {
+        tryApplyPlaybackRate(true);
+    }, [tryApplyPlaybackRate]);
+
     useEffect(() => {
         clock.onEvent('settime', () => forceUpdate());
     }, [clock, forceUpdate]);
@@ -1111,6 +1127,7 @@ export default function Controls({
                                             className={classes.numberInput}
                                             placeholder={'×' + Number(1).toFixed(2)}
                                             onClick={handleNumberInputClicked}
+                                            onBlur={handleNumberInputDeselected}
                                             onChange={(e) =>
                                                 setPlaybackRateInputWidth(Math.max(5, e.target.value.length))
                                             }

diff --git a/common/app/components/SubtitleOffsetInput.tsx b/common/app/components/SubtitleOffsetInput.tsx
@@ -53,6 +53,36 @@ export default function SubtitleOffsetInput({ inputRef, offset, onOffset, disabl
         },
         [inputRef]
     );
+
+    const tryApplyOffset = useCallback(
+        (revertOnFailure: boolean) => {
+            if (!inputRef.current) {
+                return;
+            }
+
+            const newOffset = Number(inputRef.current.value) * 1000;
+
+            if (newOffset === offset) {
+                updateOffset(offset);
+                return;
+            }
+
+            if (Number.isNaN(newOffset)) {
+                if (revertOnFailure) {
+                    updateOffset(offset);
+                }
+                return;
+            }
+
+            onOffset(newOffset);
+        },
+        [updateOffset, onOffset, offset, inputRef]
+    );
+
+    const handleNumberInputDeselected = useCallback(() => {
+        tryApplyOffset(true);
+    }, [tryApplyOffset]);
+
     useEffect(() => {
         updateOffset(offset);
     }, [offset, updateOffset]);
@@ -63,21 +93,8 @@ export default function SubtitleOffsetInput({ inputRef, offset, onOffset, disabl
         }
 
         function handleKey(event: KeyboardEvent) {
-            if (event.key === 'Enter') {
-                if (inputRef.current !== null && inputRef.current === document.activeElement) {
-                    const newOffset = Number(inputRef.current.value);
-
-                    if (newOffset === offset) {
-                        updateOffset(offset);
-                        return;
-                    }
-
-                    if (Number.isNaN(newOffset)) {
-                        return;
-                    }
-
-                    onOffset(newOffset * 1000);
-                }
+            if (event.key === 'Enter' && inputRef.current !== null && inputRef.current === document.activeElement) {
+                tryApplyOffset(false);
             }
         }
 
@@ -86,7 +103,7 @@ export default function SubtitleOffsetInput({ inputRef, offset, onOffset, disabl
         return () => {
             window.removeEventListener('keydown', handleKey);
         };
-    }, [updateOffset, onOffset, disableKeyEvents, inputRef, offset]);
+    }, [tryApplyOffset, disableKeyEvents, inputRef]);
 
     return (
         <Input
@@ -98,6 +115,7 @@ export default function SubtitleOffsetInput({ inputRef, offset, onOffset, disabl
             className={classes.input}
             placeholder={'±' + Number(0).toFixed(2)}
             onClick={handleNumberInputClicked}
+            onBlur={handleNumberInputDeselected}
             onChange={(e) => setOffsetInputWidth(Math.max(5, e.target.value.length))}
         />
     );