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 (
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)} /> - updateStorage('showButtonAfterSelect', !showButtonAfterSelect)} - /> updateStorage('translateDirectly', !translateDirectly)} /> + updateStorage('showButtonAfterSelect', !showButtonAfterSelect)} + />
{getI18nMessage('optionsButtonsPosition')} updateStorage('btnPosition', pos)} />
+ updateStorage('hideButtonAfterFixedTime', !hideButtonAfterFixedTime)} + /> +
+ {getI18nMessage('optionsTheFixedTimeOfHidingButton')} + updateStorage('hideButtonFixedTime', v)} + /> +
{getI18nMessage('optionsDefaultTranslateOptions')} diff --git a/src/public/utils/index.js b/src/public/utils/index.js index 09dceef7..52bb5ae6 100644 --- 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); + }; +}; \ No newline at end of file