Add "hide button after fixed time"

chunibyocola · Jan 4, 2021 · af6b18a · af6b18a
1 parent e5822b4
commit af6b18a
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 22 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -140,6 +140,12 @@
     "optionsPlayTestAudio": {
         "message": "Play test audio"
     },
+    "optionsHideButtonAfterFixedTime": {
+        "message": "Hide button after fixed time"
+    },
+    "optionsTheFixedTimeOfHidingButton": {
+        "message": "The fixed time of hiding button"
+    },
     "contentInputHere": {
         "message": "Input here"
     },

diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
@@ -140,6 +140,12 @@
     "optionsPlayTestAudio": {
         "message": "テストオーディオを再生する"
     },
+    "optionsHideButtonAfterFixedTime": {
+        "message": "一定時間後にボタンを非表示にする"
+    },
+    "optionsTheFixedTimeOfHidingButton": {
+        "message": "ボタンを非表示にするの固定時間"
+    },
     "contentInputHere": {
         "message": "ここに入力"
     },

diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
@@ -140,6 +140,12 @@
     "optionsPlayTestAudio": {
         "message": "播放测试音频"
     },
+    "optionsHideButtonAfterFixedTime": {
+        "message": "在固定时间后隐藏按钮"
+    },
+    "optionsTheFixedTimeOfHidingButton": {
+        "message": "隐藏按钮的固定时间"
+    },
     "contentInputHere": {
         "message": "在此输入"
     },

diff --git a/public/_locales/zh_TW/messages.json b/public/_locales/zh_TW/messages.json
@@ -140,6 +140,12 @@
     "optionsPlayTestAudio": {
         "message": "播放測試音訊"
     },
+    "optionsHideButtonAfterFixedTime": {
+        "message": "在固定時間後隱藏按鈕"
+    },
+    "optionsTheFixedTimeOfHidingButton": {
+        "message": "隱藏按鈕的固定時間"
+    },
     "contentInputHere": {
         "message": "在此輸入"
     },

diff --git a/src/components/RawText/index.js b/src/components/RawText/index.js
@@ -1,15 +1,8 @@
 import React, { useRef, useCallback, useState, useEffect } from 'react';
 import { getI18nMessage } from '../../public/chrome-call';
+import { debounce } from '../../public/utils';
 import './style.css';
 
-const debounce = (cb, time) => {
-    let timeout = null;
-    return () => {
-        timeout && clearTimeout(timeout);
-        timeout = setTimeout(cb, time);
-    };
-};
-
 const RawText = ({ defaultValue, rawTextTranslate, focusDependency }) => {
     const [lastText, setLastText] = useState('');
 
@@ -39,7 +32,7 @@ const RawText = ({ defaultValue, rawTextTranslate, focusDependency }) => {
     }, []);
 
     useEffect(() => {
-        debounceHandleRtTextChange.current = debounce(handleRtTextChange, 500);
+        debounceHandleRtTextChange.current = debounce(handleRtTextChange, 600);
     }, [handleRtTextChange]);
 
     useEffect(() => {

diff --git a/src/components/TsBtn/index.js b/src/components/TsBtn/index.js
@@ -19,11 +19,13 @@ import './style.css';
 import { sendAudio } from '../../public/send';
 import { stSetText } from '../../redux/actions/singleTranslateActions';
 import { getOptions } from '../../public/options';
+import { debounce } from '../../public/utils';
 
 const initText = '';
 const initPos = { x: 5, y: 5 };
 const btnWidth = 24;
 const btnHeight = 24;
+const useOptionsDependency = ['translateDirectly', 'showButtonAfterSelect', 'translateWithKeyPress', 'hideButtonAfterFixedTime', 'hideButtonFixedTime'];
 
 const calculateBtnPos = ({ x, y }) => {
     const { btnPosition } = getOptions();
@@ -52,8 +54,9 @@ const TsBtn = ({ multipleTranslateMode }) => {
     const posRef = useRef(initPos);
     const btnEle = useRef(null);
     const ctrlPressing = useRef(false);
+    const debounceHideButtonAfterFixedTime = useRef(null);
 
-    const { translateDirectly, showButtonAfterSelect, translateWithKeyPress } = useOptions(['translateDirectly', 'showButtonAfterSelect', 'translateWithKeyPress']);
+    const { translateDirectly, showButtonAfterSelect, translateWithKeyPress , hideButtonAfterFixedTime, hideButtonFixedTime } = useOptions(useOptionsDependency);
     const isEnableTranslate = useIsEnable('translate', window.location.host);
     const chromeMsg = useOnExtensionMessage();
 
@@ -82,10 +85,13 @@ const TsBtn = ({ multipleTranslateMode }) => {
         }
 
         setText(text);
-        showButtonAfterSelect && setShowBtn(true);
+        if (showButtonAfterSelect) {
+            setShowBtn(true);
+            hideButtonAfterFixedTime && debounceHideButtonAfterFixedTime.current();
+        }
 
         dispatch(hideResultBox());
-    }, [dispatch, handleSetPos, translateDirectly, isEnableTranslate, showButtonAfterSelect, translateWithKeyPress, handleForwardTranslate]);
+    }, [dispatch, handleSetPos, translateDirectly, isEnableTranslate, showButtonAfterSelect, translateWithKeyPress, handleForwardTranslate, hideButtonAfterFixedTime]);
 
     const unselectCb = useCallback(() => {
         setShowBtn(false);
@@ -144,6 +150,10 @@ const TsBtn = ({ multipleTranslateMode }) => {
         return unsubscribe;
     }, [selectCb, unselectCb]);
 
+    useEffect(() => {
+        debounceHideButtonAfterFixedTime.current = debounce(() => setShowBtn(false), hideButtonFixedTime);
+    }, [hideButtonFixedTime]);
+
     return (
         <div
             ref={btnEle}

diff --git a/src/constants/defaultOptions.js b/src/constants/defaultOptions.js
@@ -27,7 +27,9 @@ const defaultOptions = {
     styleVarsIndex: 0,
     btnPosition: { x: 5, y: 5 },
     audioVolume: 100,
-    audioPlaybackRate: 1
+    audioPlaybackRate: 1,
+    hideButtonAfterFixedTime: false,
+    hideButtonFixedTime: 1000
 };
 
 export default defaultOptions;
diff --git a/src/entry/options/Options/index.js b/src/entry/options/Options/index.js
@@ -34,10 +34,18 @@ const marksPlaybackRate = [
     { value: 1.75, label: '1.75x' },
     { value: 2, label: '2.00x' }
 ];
+const marksHideButtonFixedTime = [
+    { value: 500, label: '0.50s' },
+    { value: 1000, label: '1.00s' },
+    { value: 2000, label: '2.00s' },
+    { value: 3000, label: '3.00s' },
+    { value: 4000, label: '4.00s' }
+];
 const volumeFormat = v => Number(Number(v).toFixed(0));
 const playbackRateFormat = v => Number(Number(v).toFixed(2));
-const volumeLabelFormat = v => `${volumeFormat(v)}`;
-const playbackRateLabelFormat = v => `${playbackRateFormat(v)}x`;
+const volumeLabelFormat = v => `${Number(v).toFixed(0)}`;
+const playbackRateLabelFormat = v => `${Number(v).toFixed(2)}x`;
+const hideButtonFixedTimeLabelFormat = v => `${(v / 1000).toFixed(2)}s`
 
 const Options = () => {
     const [commands, setCommands] = useState({});
@@ -67,7 +75,9 @@ const Options = () => {
         styleVarsIndex,
         btnPosition,
         audioVolume,
-        audioPlaybackRate
+        audioPlaybackRate,
+        hideButtonAfterFixedTime,
+        hideButtonFixedTime
     } = useOptions(Object.keys(defaultOptions));
 
     const updateStorage = useCallback((key, value) => (setLocalStorage({[key]: value})), []);
@@ -163,22 +173,41 @@ const Options = () => {
                     checked={enableContextMenus}
                     onClick={() => updateStorage('enableContextMenus', !enableContextMenus)}
                 />
-                <OptionToggle
-                    id='show-button-after-select-checkbox'
-                    message='optionsShowButtonAfterSelect'
-                    checked={showButtonAfterSelect}
-                    onClick={() => updateStorage('showButtonAfterSelect', !showButtonAfterSelect)}
-                />
                 <OptionToggle
                     id='translate-directly-checkbox'
                     message='optionsTranslateDirectly'
                     checked={translateDirectly}
                     onClick={() => updateStorage('translateDirectly', !translateDirectly)}
                 />
+                <OptionToggle
+                    id='show-button-after-select-checkbox'
+                    message='optionsShowButtonAfterSelect'
+                    checked={showButtonAfterSelect}
+                    onClick={() => updateStorage('showButtonAfterSelect', !showButtonAfterSelect)}
+                />
                 <div className='child-mt10-ml30'>
                     {getI18nMessage('optionsButtonsPosition')}
                     <BtnPostion currentPos={btnPosition} updateBtnPostion={pos => updateStorage('btnPosition', pos)} />
                 </div>
+                <OptionToggle
+                    id='hide-button-after-fixed-time'
+                    message='optionsHideButtonAfterFixedTime'
+                    checked={hideButtonAfterFixedTime}
+                    onClick={() => updateStorage('hideButtonAfterFixedTime', !hideButtonAfterFixedTime)}
+                />
+                <div className='child-mt10-ml30'>
+                    {getI18nMessage('optionsTheFixedTimeOfHidingButton')}
+                    <Slider
+                        defaultValue={hideButtonFixedTime}
+                        min={500}
+                        max={4000}
+                        step={250}
+                        marks={marksHideButtonFixedTime}
+                        valueLabelDisplay
+                        valueLabelFormat={hideButtonFixedTimeLabelFormat}
+                        mouseUpCallback={v => updateStorage('hideButtonFixedTime', v)}
+                    />
+                </div>
             </div>
             <div className='opt-item'>
                 {getI18nMessage('optionsDefaultTranslateOptions')}

diff --git a/src/public/utils/index.js b/src/public/utils/index.js
@@ -86,3 +86,11 @@ export const calculatePosition = (element, { x, y }, callback) => {
     if (y < resultBoxMargin) y = resultBoxMargin;
     callback({ x, y });
 };
+
+export const debounce = (cb, time) => {
+    let timeout = null;
+    return () => {
+        timeout && clearTimeout(timeout);
+        timeout = setTimeout(cb, time);
+    };
+};