diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index 8355c033..f31f8838 100644 --- 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 index 79ddcf75..76051600 100644 --- 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 index b3ffa4a0..9123e61f 100644 --- 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 index 97f73621..58a50cfe 100644 --- 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 index 6116dfac..ffdf2da9 100644 --- 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 index dea98d93..1a1889ca 100644 --- 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 (