fix(fix related to popup and translate): changes made to fix issues 4…

…6,47 and 51 (#52) fix/46_47_51 Co-authored-by: Sathya Shanmugha <[email protected]>
awslabs · Feb 22, 2023 · ca8510a · ca8510a
1 parent aaf3741
commit ca8510a
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 17 deletions.
diff --git a/src/_contracts/translate.ts b/src/_contracts/translate.ts
@@ -8,6 +8,12 @@ export interface TranslateData {
 
 export type Documents = string[];
 
+export type TranslatedDocuments = {
+  translatedText: Documents;
+  sourceLanguage: string;
+};
+
+export type SourceLanguauge = string;
 export interface NodeMap {
   [key: string]: Node;
 }

diff --git a/src/background/main.ts b/src/background/main.ts
@@ -170,7 +170,7 @@ browser.contextMenus.onClicked.addListener((info): void => {
 
       void sendMessage(
         'translate-selection',
-        { translatedText: escape(translatedDocs[0]) },
+        { translatedText: escape(translatedDocs.translatedText[0]) },
         {
           context: 'content-script',
           tabId,
@@ -179,4 +179,3 @@ browser.contextMenus.onClicked.addListener((info): void => {
     }
   })();
 });
-// }
diff --git a/src/contentScripts/functions.ts b/src/contentScripts/functions.ts
@@ -16,6 +16,7 @@ import {
   PageMap,
   CacheLangs,
   CacheTextMap,
+  TranslatedDocuments,
 } from '../_contracts';
 import { IGNORED_NODES, DOC_BOUNDARY, PAGE_SPLIT_PATTERN } from '../constants';
 
@@ -114,25 +115,28 @@ export async function translateMany(
   SourceLanguageCode: string,
   TargetLanguageCode: string,
   docs: Documents
-): Promise<Documents> {
+): Promise<TranslatedDocuments> {
   const client = new TranslateClient(creds);
   const responses = await sendDocumentsToTranslate(
     client,
     SourceLanguageCode,
     TargetLanguageCode,
     docs
   );
-
   if (responses.some(res => res.status === 'rejected')) {
     throw new Error('One or more parts of the document failed to translate.');
   }
 
-  return responses.reduce((docs, response) => {
+  let sourceLanguageResponse = '';
+
+  const translateTextResponse = responses.reduce((docs, response) => {
     if (response.status === 'fulfilled') {
+      sourceLanguageResponse = response.value.SourceLanguageCode ?? '';
       return docs.concat([response.value.TranslatedText ?? '']);
     }
     return docs;
   }, [] as Documents);
+  return { translatedText: translateTextResponse, sourceLanguage: sourceLanguageResponse };
 }
 
 /**

diff --git a/src/contentScripts/translate.ts b/src/contentScripts/translate.ts
@@ -84,22 +84,26 @@ async function translateFromApi(
   const tDocs = await translateMany(creds, langs.source, langs.target, docs);
 
   // Break the translated documents back into pages
-  const tPagesRaw = breakDocuments(tDocs);
-
+  const tPagesRaw = breakDocuments(tDocs.translatedText);
   // Sanitize the pages returned from Amazon Translate
   const tPagesSanitized = tPagesRaw.map(page => sanitizePage(page));
-
   // Break the pages into tuples of the node ID and the translated text
   const translatedPageMap = createPageMap(tPagesSanitized);
-
   // Make a cache text map for the selected language pair
   const textMap = makeCacheTextMap(pageMap, translatedPageMap);
 
   // Cache the translated text map
-  cacheTranslation(window.location.href, langs.source, langs.target, textMap);
+  cacheTranslation(window.location.href, tDocs.sourceLanguage, langs.target, textMap);
 
   // Apply the translated documents to the DOM
   tPagesSanitized.forEach(page =>
     pageIsValid(page) ? swapText(nodeMap, ...splitPage(page)) : undefined
   );
+
+  /**
+   * Caching the text map on the reverse order to avoid an extra api call.
+   * If the initial request is from English -> German it will cached along with German -> English
+   */
+  const textMapReverse = makeCacheTextMap(translatedPageMap, pageMap);
+  cacheTranslation(window.location.href, langs.target, tDocs.sourceLanguage, textMapReverse);
 }
diff --git a/src/popup/Popup.vue b/src/popup/Popup.vue
@@ -24,6 +24,7 @@
           targetLang: 'en',
         },
         languages,
+        prevtargetLang:'',
       };
     },
     mounted() {
@@ -33,7 +34,8 @@
       this.form.sourceLang = lockr.get(ExtensionOptions.DEFAULT_SOURCE_LANG, 'auto');
       this.form.targetLang = lockr.get(ExtensionOptions.DEFAULT_TARGET_LANG, 'en');
       this.cachingEnabled = lockr.get(ExtensionOptions.CACHING_ENABLED, false);
-
+      this.prevtargetLang = lockr.get(ExtensionOptions.DEFAULT_SOURCE_LANG, 'auto');
+
       onMessage('status', async ({ data: _data }) => {
         const data = _data as unknown;
         const { status, message } = data as TranslateStatusData;
@@ -47,15 +49,20 @@
        * the Amazon Translate API. After the credentials are decrypted it sends them via a message
        * to the content-script along with the selected source and target language codes.
        */
+
       async translatePage(e: Event) {
         try {
           e.preventDefault();
           this.status = '';
-          this.message = '';
-
+          this.message = '';          
           if ([this.region, this.accessKeyId, this.secretAccessKey].includes('')) {
             throw new Error('Your credentials are invalid.');
           }
+          if (this.prevtargetLang === this.form.targetLang) {            
+            this.status = 'complete';
+            this.message = `Translation already in target language`;
+            return
+          }         
 
           const credentials = {
             accessKeyId: this.accessKeyId,
@@ -71,13 +78,16 @@
           const message = {
             creds: config,
             langs: {
-              source: this.form.sourceLang,
+              source: this.form.sourceLang === lockr.get(ExtensionOptions.DEFAULT_SOURCE_LANG, 'auto')? 
+                      this.prevtargetLang : this.form.sourceLang,
               target: this.form.targetLang,
             },
             tabId,
             cachingEnabled: this.cachingEnabled,
           };
-
+
+          this.prevtargetLang = this.form.targetLang;
+
           sendMessage('translate', message, {
             context: 'content-script',
             tabId,
@@ -135,7 +145,6 @@
           </option>
         </select>
       </div>
-
       <div>
         <select v-model="form.targetLang" class="aws-field">
           <option
@@ -147,7 +156,6 @@
           </option>
         </select>
       </div>
-
       <div>
         <aws-button
           class="submit-button"