Remake the mechanism of playing audio;

(The place play audio was background. Now is page.) After remaking, audio can be paused, the whole project could be upgraded to MV3 more smoothly. But there might be some users playing audio and then close page. They can't do it after the remaking, it is a compromise. Also, the last audio will be cached now. The experience of playing audio with the same text multiple times will be better.
chunibyocola · Oct 9, 2021 · 8ad0aa1 · 8ad0aa1
1 parent 78ab5c8
commit 8ad0aa1
Show file tree

Hide file tree

Showing 20 changed files with 362 additions and 165 deletions.
diff --git a/src/components/TsBtn/index.tsx b/src/components/TsBtn/index.tsx
@@ -10,7 +10,7 @@ import {
 } from '../../constants/chromeSendMessageTypes';
 import IconFont from '../IconFont';
 import './style.css';
-import { sendAudio, sendSeparate } from '../../public/send';
+import { sendSeparate } from '../../public/send';
 import { getOptions } from '../../public/options';
 import { debounce, isTextBox } from '../../public/utils';
 import { DefaultOptions, Position } from '../../types';
@@ -26,6 +26,7 @@ import {
     TRANSLATE_BUTTON_TL_THIRD,
     TRANSLATE_BUTTON_TRANSLATE
 } from '../../constants/translateButtonTypes';
+import { playAudio } from '../../public/play-audio';
 
 const initText = '';
 const initPos = { x: 5, y: 5 };
@@ -132,7 +133,7 @@ const TsBtn: React.FC = () => {
                 handleForwardTranslate(text, pos);
                 break;
             case TRANSLATE_BUTTON_LISTEN:
-                sendAudio(text, {});
+                playAudio({ text });
                 break;
             case TRANSLATE_BUTTON_COPY:
                 navigator.clipboard.writeText(text);
@@ -187,7 +188,7 @@ const TsBtn: React.FC = () => {
                 break;
             case SCTS_AUDIO_COMMAND_KEY_PRESSED:
                 text = getSelectedText();
-                text && sendAudio(text, {});
+                text && playAudio({ text });
                 break;
             case SCTS_CALL_OUT_COMMAND_KEY_PRESSED:
                 dispatch(callOutPanel());

diff --git a/src/components/TsHistory/HistoryResultPanel/index.tsx b/src/components/TsHistory/HistoryResultPanel/index.tsx
@@ -1,5 +1,5 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
-import { sendAudio } from '../../../public/send';
+import { playAudio } from '../../../public/play-audio';
 import { calculatePosition } from '../../../public/utils';
 import { Translation } from '../../../redux/slice/multipleTranslateSlice';
 import IconFont from '../../IconFont';
@@ -47,15 +47,15 @@ const HistoryResultPanel: React.FC<HistoryResultPanelProps> = ({ translations, t
                                 <IconFont
                                     className='iconbutton button'
                                     iconName='#icon-GoUnmute'
-                                    onClick={(e) => { e.stopPropagation(); sendAudio(translateRequest.result.text, { source, from: translateRequest.result.from }); }}
+                                    onClick={(e) => { e.stopPropagation(); playAudio({ text: translateRequest.result.text, source, from: translateRequest.result.from }); }}
                                 />
                             </>}
                         </span>
                     </div>
                     <div className='dividing-line'></div>
                     <TranslateResult
                         translateRequest={translateRequest}
-                        readText={(text, from) => sendAudio(text, { source, from })}
+                        readText={(text, from) => playAudio({ text, source, from })}
                     />
                 </div>))}
             </div>

diff --git a/src/constants/chromeSendMessageTypes.ts b/src/constants/chromeSendMessageTypes.ts
@@ -1,5 +1,6 @@
 export const SCTS_TRANSLATE = 'SCTS_TRANSLATE';
 export const SCTS_AUDIO = 'SCTS_AUDIO';
+export const SCTS_DETECT = 'SCTS_DETECT';
 export const SCTS_CONTEXT_MENUS_CLICKED = 'SCTS_CONTEXT_MENUS_CLICKED';
 export const SCTS_TRANSLATE_COMMAND_KEY_PRESSED = 'SCTS_TRANSLATE_COMMAND_KEY_PRESSED';
 export const SCTS_AUDIO_COMMAND_KEY_PRESSED = 'SCTS_AUDIO_COMMAND_KEY_PRESSED';

diff --git a/src/entry/background/audio.ts b/src/entry/background/audio.ts
diff --git a/src/entry/background/context-menus.ts b/src/entry/background/context-menus.ts
@@ -1,5 +1,5 @@
 import { listenOptionsChange } from '../../public/options';
-import { SCTS_CONTEXT_MENUS_CLICKED, SCTS_TRANSLATE_CURRENT_PAGE } from '../../constants/chromeSendMessageTypes';
+import { SCTS_AUDIO_COMMAND_KEY_PRESSED, SCTS_CONTEXT_MENUS_CLICKED, SCTS_TRANSLATE_CURRENT_PAGE } from '../../constants/chromeSendMessageTypes';
 import { createNewTab, getI18nMessage, getLocalStorage } from '../../public/chrome-call';
 import { createSeparateWindow } from './separate-window';
 import { getIsContentScriptEnabled } from '../../public/utils';
@@ -11,8 +11,6 @@ import {
     TRANSLATE_CURRENT_PAGE,
     TRANSLATE_SELECTION_TEXT
 } from '../../constants/contextMenusIds';
-import { playAudio } from './audio';
-import { audio } from '../../public/request';
 import { DefaultOptions, OptionsContextMenu } from '../../types';
 
 type OnContextMenuClick = (info: chrome.contextMenus.OnClickData, tab?: chrome.tabs.Tab | undefined) => void;
@@ -31,16 +29,13 @@ const translateSelectionText: OnContextMenuClick = async ({ selectionText }, tab
     }
 };
 
-const listenSelectionText: OnContextMenuClick = ({ selectionText }) => {
+const listenSelectionText: OnContextMenuClick = async ({ selectionText }, tab) => {
     if (!selectionText) { return; }
 
-    type PickedOptions = Pick<DefaultOptions, 'defaultAudioSource' | 'useDotCn'>;
-    const tmpKeys: (keyof PickedOptions)[] = ['defaultAudioSource', 'useDotCn'];
-    getLocalStorage<PickedOptions>(tmpKeys, (storage) => {
-        const defaultAudioSource = storage.defaultAudioSource;
-        const useDotCn = storage.useDotCn;
-        audio({ source: defaultAudioSource, defaultSource: defaultAudioSource, requestObj: { text: selectionText, com: !useDotCn } }, uri => playAudio(uri));
-    });
+    if (tab?.id && tab.id >= 0) {
+        const enabled = await getIsContentScriptEnabled(tab.id);
+        enabled && chrome.tabs.sendMessage(tab.id, { type: SCTS_AUDIO_COMMAND_KEY_PRESSED });
+    }
 };
 
 const openThisPageWithPdfViewer: OnContextMenuClick = (info, tab) => {
@@ -102,7 +97,7 @@ chrome.contextMenus.onClicked.addListener((info, tab) => {
             translateSelectionText(info, tab);
             return;
         case LISTEN_SELECTION_TEXT:
-            listenSelectionText(info);
+            listenSelectionText(info, tab);
             return;
         case OPEN_SEPARATE_WINDOW:
             openSeparateTranslateWindow();

diff --git a/src/entry/background/index.ts b/src/entry/background/index.ts
@@ -1,7 +1,6 @@
 import './context-menus';
 import './install';
 import './on-message';
-import './audio';
 import './tabs';
 import './commands';
 import './web-request';
diff --git a/src/entry/background/on-message.ts b/src/entry/background/on-message.ts
@@ -1,28 +1,23 @@
 import * as types from '../../constants/chromeSendMessageTypes';
-import { translate, audio } from '../../public/request';
-import { playAudio } from './audio';
+import { translate, audio, detect } from '../../public/request';
 import { listenOptionsChange } from '../../public/options';
 import { getLocalStorage } from '../../public/chrome-call';
-import { GOOGLE_COM } from '../../constants/translateSource';
 import { LANG_EN } from '../../constants/langCode';
 import { createSeparateWindow } from './separate-window';
 import { DefaultOptions } from '../../types';
 
-let defaultAudioSource = GOOGLE_COM;
 let useDotCn = false;
 let preferredLanguage = LANG_EN;
 let secondPreferredLanguage = LANG_EN;
 
 type PickedOptions = Pick<DefaultOptions, 'defaultAudioSource' | 'useDotCn' | 'preferredLanguage' | 'secondPreferredLanguage'>;
 const keys: (keyof PickedOptions)[] = ['defaultAudioSource', 'useDotCn', 'preferredLanguage', 'secondPreferredLanguage'];
 getLocalStorage<PickedOptions>(keys, (storage) => {
-    defaultAudioSource = storage.defaultAudioSource;
     useDotCn = storage.useDotCn;
     preferredLanguage = storage.preferredLanguage;
     secondPreferredLanguage = storage.secondPreferredLanguage;
 });
 listenOptionsChange<PickedOptions>(keys, (changes) => {
-    changes.defaultAudioSource !== undefined && (defaultAudioSource = changes.defaultAudioSource);
     changes.useDotCn !== undefined && (useDotCn = changes.useDotCn);
     changes.preferredLanguage !== undefined && (preferredLanguage = changes.preferredLanguage);
     changes.secondPreferredLanguage !== undefined && (secondPreferredLanguage = changes.secondPreferredLanguage);
@@ -44,12 +39,20 @@ chrome.runtime.onMessage.addListener(
                 return true;
             case types.SCTS_AUDIO:
                 if (payload) {
-                    payload.requestObj.com = !useDotCn;
-                    !payload.source && (payload.source = defaultAudioSource);
-                    payload.defaultSource = defaultAudioSource;
-                    audio(payload, uri => playAudio(uri));
+                    payload.com = !useDotCn;
+                    audio(payload, (result) => {
+                        sendResponse(result);
+                    });
                 }
-                return false;
+                return true;
+            case types.SCTS_DETECT:
+                if (payload) {
+                    payload.com = !useDotCn;
+                    detect(payload, (result) => {
+                        sendResponse(result);
+                    });
+                }
+                return true;
             case types.SCTS_SEND_TEXT_TO_SEPARATE_WINDOW:
                 payload?.text && createSeparateWindow(payload.text);
                 return false;

diff --git a/src/entry/content/MultipleTranslateResult/index.tsx b/src/entry/content/MultipleTranslateResult/index.tsx
@@ -3,14 +3,15 @@ import MtResult from '../../../components/MtResult';
 import MtAddSource from '../../../components/MtAddSource';
 import LanguageSelection from '../../../components/LanguageSelection';
 import RawText from '../../../components/RawText';
-import { sendTranslate, sendAudio } from '../../../public/send';
+import { sendTranslate } from '../../../public/send';
 import { mtLangCode } from '../../../constants/langCode';
 import './style.css';
 import { getMessage } from '../../../public/i18n';
 import { useAppDispatch, useAppSelector, useInsertResult, useIsEnable } from '../../../public/react-use';
 import { textPreprocessing } from '../../../public/text-preprocessing';
 import { mtAddSource, mtRemoveSource, mtRequestError, mtRequestFinish, mtRequestStart, mtSetFromAndTo, mtSetText } from '../../../redux/slice/multipleTranslateSlice';
 import { addHistory, updateHistoryError, updateHistoryFinish } from '../../../redux/slice/translateHistorySlice';
+import { playAudio } from '../../../public/play-audio';
 
 type MultipleTranslateResultProps = {
     showRtAndLs: boolean;
@@ -125,7 +126,7 @@ const MultipleTranslateResult: React.FC<MultipleTranslateResultProps> = ({ showR
                         translateRequest={translateRequest}
                         key={source}
                         remove={() => handleRemoveSource(source)}
-                        readText={(text, from) => sendAudio(text, { source, from })}
+                        readText={(text, from) => playAudio({ text, source, from })}
                         retry={() => handleRetry(source)}
                         setText={handleSetText}
                         insertResult={canInsertResult ? result => insertResultToggle(translateId, source, result) : undefined}

diff --git a/src/entry/content/SingleTranslateResult/index.tsx b/src/entry/content/SingleTranslateResult/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef, useLayoutEffect, useState } from 'react';
-import { sendTranslate, sendAudio } from '../../../public/send';
+import { sendTranslate } from '../../../public/send';
 import TsResult from '../../../components/TsResult';
 import LanguageSelection from '../../../components/LanguageSelection';
 import RawText from '../../../components/RawText';
@@ -11,6 +11,7 @@ import './style.css';
 import { textPreprocessing } from '../../../public/text-preprocessing';
 import { stRequestError, stRequestFinish, stRequestStart, stSetFromAndTo, stSetSourceFromTo, stSetText } from '../../../redux/slice/singleTranslateSlice';
 import { addHistory, updateHistoryError, updateHistoryFinish } from '../../../redux/slice/translateHistorySlice';
+import { playAudio } from '../../../public/play-audio';
 
 type SingleTranslateResultProps = {
     showRtAndLs: boolean;
@@ -80,7 +81,7 @@ const SingleTranslateResult: React.FC<SingleTranslateResultProps> = ({ showRtAnd
     }, [dispatch]);
 
     const handleReadText = useCallback((text: string, from: string) => {
-        text && sendAudio(text, { source, from });
+        text && playAudio({ text, source, from });
     }, [source]);
 
     const handleRetry = useCallback(() => {

diff --git a/src/entry/options/Options/sections/Audio.tsx b/src/entry/options/Options/sections/Audio.tsx
@@ -4,7 +4,7 @@ import Slider, { SliderFormat, SliderMarks } from '../../../../components/Slider
 import SourceSelect from '../../../../components/SourceSelect';
 import { audioSource } from '../../../../constants/translateSource';
 import { getMessage } from '../../../../public/i18n';
-import { sendAudio } from '../../../../public/send';
+import { playAudio } from '../../../../public/play-audio';
 import { DefaultOptions } from '../../../../types';
 
 const marksVolume: SliderMarks = [
@@ -75,7 +75,7 @@ const Audio: React.FC<AudioProps> = ({ updateStorage, defaultAudioSource, audioV
                 />
             </div>
             <div className='opt-section-row'>
-                <button onClick={() => sendAudio('this is a test audio', { from: 'en' })}>{getMessage('optionsPlayTestAudio')}</button>
+                <button onClick={() => playAudio({ text: 'this is a test audio', from: 'en' })}>{getMessage('optionsPlayTestAudio')}</button>
             </div>
         </div>
     );

diff --git a/src/entry/popup/MultipleTranslateResult/index.tsx b/src/entry/popup/MultipleTranslateResult/index.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import './style.css';
 import RawText from '../../../components/RawText';
 import LanguageSelection from '../../../components/LanguageSelection';
-import { sendTranslate, sendAudio } from '../../../public/send';
+import { sendTranslate } from '../../../public/send';
 import MtAddSource from '../../../components/MtAddSource';
 import MtResult from '../../../components/MtResult';
 import { mtLangCode } from '../../../constants/langCode';
@@ -12,6 +12,7 @@ import { textPreprocessing } from '../../../public/text-preprocessing';
 import { useAppDispatch, useAppSelector } from '../../../public/react-use';
 import { mtAddSource, mtRemoveSource, mtRequestError, mtRequestFinish, mtRequestStart, mtSetFromAndTo, mtSetText } from '../../../redux/slice/multipleTranslateSlice';
 import { callOutPanel } from '../../../redux/slice/panelStatusSlice';
+import { playAudio } from '../../../public/play-audio';
 
 type MultipleTranslateResultProps = {
     autoTranslateAfterInput: boolean;
@@ -105,7 +106,7 @@ const MultipleTranslateResult: React.FC<MultipleTranslateResultProps> = ({ autoT
                         translateRequest={translateRequest}
                         key={source}
                         remove={() => handleRemoveSource(source)}
-                        readText={(text, from) => sendAudio(text, { source, from })}
+                        readText={(text, from) => playAudio({ text, source, from })}
                         retry={() => handleRetry(source)}
                         setText={handleSetText}
                     />

diff --git a/src/entry/popup/SingleTranslateResult/index.tsx b/src/entry/popup/SingleTranslateResult/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import LanguageSelection from '../../../components/LanguageSelection';
-import { sendAudio, sendTranslate } from '../../../public/send';
+import { sendTranslate } from '../../../public/send';
 import RawText from '../../../components/RawText';
 import TsResult from '../../../components/TsResult';
 import { langCode } from '../../../constants/langCode';
@@ -11,6 +11,7 @@ import { textPreprocessing } from '../../../public/text-preprocessing';
 import { useAppDispatch, useAppSelector } from '../../../public/react-use';
 import { stRequestError, stRequestFinish, stRequestStart, stSetFromAndTo, stSetSourceFromTo, stSetText } from '../../../redux/slice/singleTranslateSlice';
 import { callOutPanel } from '../../../redux/slice/panelStatusSlice';
+import { playAudio } from '../../../public/play-audio';
 
 type SingleTranslateResultProps = {
     autoTranslateAfterInput: boolean;
@@ -47,7 +48,7 @@ const SingleTranslateResult: React.FC<SingleTranslateResultProps> = ({ autoTrans
     }, [dispatch]);
 
     const handleReadText = useCallback((text: string, from: string) => {
-        sendAudio(text, { source, from });
+        playAudio({ text, source, from });
     }, [source]);
 
     const handleSourceChange = useCallback((targetSource: string) => {

diff --git a/src/entry/separate/HandleCommands/index.tsx b/src/entry/separate/HandleCommands/index.tsx
@@ -7,8 +7,8 @@ import {
     SCTS_SEPARATE_WINDOW_SET_TEXT,
     SCTS_TRANSLATE_COMMAND_KEY_PRESSED
 } from '../../../constants/chromeSendMessageTypes';
+import { playAudio } from '../../../public/play-audio';
 import { useAppDispatch, useOnExtensionMessage } from '../../../public/react-use';
-import { sendAudio } from '../../../public/send';
 import { getSelectedText } from '../../../public/utils/get-selection';
 import { mtSetText } from '../../../redux/slice/multipleTranslateSlice';
 import { callOutPanel } from '../../../redux/slice/panelStatusSlice';
@@ -33,7 +33,7 @@ const HandleCommands: React.FC = () => {
                 break;
             case SCTS_AUDIO_COMMAND_KEY_PRESSED:
                 text = getSelectedText();
-                text && sendAudio(text, {});
+                text && playAudio({ text });
                 break;
             case SCTS_CALL_OUT_COMMAND_KEY_PRESSED:
                 dispatch(callOutPanel());

diff --git a/src/entry/separate/Separate/index.tsx b/src/entry/separate/Separate/index.tsx
@@ -6,7 +6,7 @@ import MtResult from '../../../components/MtResult';
 import RawText from '../../../components/RawText';
 import { mtLangCode } from '../../../constants/langCode';
 import { openOptionsPage, setLocalStorage } from '../../../public/chrome-call';
-import { sendAudio, sendTranslate } from '../../../public/send';
+import { sendTranslate } from '../../../public/send';
 import './style.css';
 import '../../../components/PopupHeader/style.css';
 import { useAppDispatch, useAppSelector, useOptions } from '../../../public/react-use';
@@ -16,6 +16,7 @@ import { textPreprocessing } from '../../../public/text-preprocessing';
 import { mtAddSource, mtRemoveSource, mtRequestError, mtRequestFinish, mtRequestStart, mtSetFromAndTo, mtSetText } from '../../../redux/slice/multipleTranslateSlice';
 import { DefaultOptions } from '../../../types';
 import { callOutPanel } from '../../../redux/slice/panelStatusSlice';
+import { playAudio } from '../../../public/play-audio';
 
 type PickedOptions = Pick<DefaultOptions, 'styleVarsList' | 'styleVarsIndex' | 'rememberStwSizeAndPosition' | 'autoTranslateAfterInput'>;
 const useOptionsDependency: (keyof PickedOptions)[] = ['styleVarsList', 'styleVarsIndex', 'rememberStwSizeAndPosition', 'autoTranslateAfterInput'];
@@ -159,7 +160,7 @@ const Separate: React.FC = () => {
                             translateRequest={translateRequest}
                             key={source}
                             remove={() => handleRemoveSource(source)}
-                            readText={(text, from) => sendAudio(text, { source, from })}
+                            readText={(text, from) => playAudio({ text, source, from })}
                             retry={() => handleRetry(source)}
                             setText={handleSetText}
                         />