Dynamic icon for playing/pause

joelpurra · Dec 31, 2016 · 4c1d1f6 · 4c1d1f6
1 parent 838926f
commit 4c1d1f6
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 43 deletions.
diff --git a/manifest.json b/manifest.json
@@ -20,7 +20,16 @@
     "offline_enabled": true,
     "browser_action": {
         "default_title": "Speak text selection",
-        "default_icon": "src/resource/icon/icon-play/icon-32x32.png"
+        "default_icon": {
+            "16": "src/resource/icon/icon-play/icon-16x16.png",
+            "32": "src/resource/icon/icon-play/icon-32x32.png",
+            "48": "src/resource/icon/icon-play/icon-48x48.png",
+            "64": "src/resource/icon/icon-play/icon-64x64.png",
+            "128": "src/resource/icon/icon-play/icon-128x128.png",
+            "256": "src/resource/icon/icon-play/icon-256x256.png",
+            "512": "src/resource/icon/icon-play/icon-512x512.png",
+            "1024": "src/resource/icon/icon-play/icon-1024x1024.png"
+        }
     },
     "icons": {
         "16": "src/resource/icon/icon-play/icon-16x16.png",

diff --git a/src/background.js b/src/background.js
@@ -76,14 +76,14 @@ const setup = () => new Promise(
 
             log("Done", "Setup");
 
-            resolve(synthesizer);
+            return resolve(synthesizer);
         };
 
         const handleError = (event) => {
             delete synthesizer.onerror;
             delete synthesizer.onvoiceschanged;
 
-            reject();
+            return reject();
         };
 
         synthesizer.onerror = reject;
@@ -109,16 +109,18 @@ const speak = (synthesizer = null, text = "", language = null) => new Promise(
 
             log("End", `Speak text (length ${text.length}) spoken in ${event.elapsedTime} milliseconds.`);
 
-            resolve();
+            return setIconModePaused()
+            .then(() => resolve());
         };
 
         const handleError = (event) => {
             delete utterance.onend;
             delete utterance.onerror;
 
-            log("End", `Speak text (length ${text.length}) spoken in ${event.elapsedTime} milliseconds.`);
+            log("Error", `Speak text (length ${text.length})`, event);
 
-            resolve();
+            return setIconModePaused()
+            .then(() => resolve());
         };
 
         utterance.onend = handleEnd;
@@ -147,7 +149,7 @@ const detectPageLanguage = () => new Promise(
                 return null;
             }
 
-            resolve(language);
+            return resolve(language);
         });
     }
 );
@@ -167,48 +169,89 @@ const getFramesSelectionTextAndLanguage = () => new Promise(
     }
 );
 
-const speakSelection = (synthesizer) => {
-    try {
-        log("Start", "Speaking selection");
+const speakSelection = (synthesizer) => new Promise(
+    (resolve, reject) => {
+        try {
+            log("Start", "Speaking selection");
+
+            const speakAllSelections = (selections = [], detectedPageLanguage = null) => {
+                log("Start", "Speaking all selections");
+
+                log("Variable", `selections (length ${selections && selections.length || 0}) ${selections}`);
+
+                let result = [];
+
+                result = selections.map((selection) => {
+                    log("Text", "Speaking selection:", selection);
 
-        const speakAllSelections = (selections = [], detectedPageLanguage = null) => {
-            log("Start", "Speaking all selections");
+                    const text = selection.text;
+                    const language = selection.language || detectedPageLanguage || null;
 
-            log("Variable", `selections (length ${selections && selections.length || 0}) ${selections}`);
+                    log("Language", language);
 
-            let result = [];
+                    return speak(synthesizer, text, language);
+                });
 
-            result = selections.map((selection) => {
-                log("Text", "Speaking selection:", selection);
+                log("Done", "Speaking all selections");
 
-                const text = selection.text;
-                const language = selection.language || detectedPageLanguage || null;
+                return result;
+            };
 
-                log("Language", language);
+            log("Done", "Speaking selection");
 
-                return speak(synthesizer, text, language);
-            });
+            return resolve(Promise.all(
+                [
+                    getFramesSelectionTextAndLanguage(),
+                    detectPageLanguage(),
+                ]
+            )
+            .then(([framesSelectionTextAndLanguage, detectedPageLanguage]) => {
+                return speakAllSelections(framesSelectionTextAndLanguage, detectedPageLanguage);
+            }));
+        } catch(error) {
+            logError("speakSelection", error);
 
-            log("Done", "Speaking all selections");
+            return reject(error);
+        }
+    }
+);
 
-            return result;
+const getIconModePaths = (name) => {
+    return {
+        "16": `src/resource/icon/icon-${name}/icon-16x16.png`,
+        "32": `src/resource/icon/icon-${name}/icon-32x32.png`,
+        "48": `src/resource/icon/icon-${name}/icon-48x48.png`,
+        "64": `src/resource/icon/icon-${name}/icon-64x64.png`,
+        "128": `src/resource/icon/icon-${name}/icon-128x128.png`,
+        "256": `src/resource/icon/icon-${name}/icon-256x256.png`,
+        "512": `src/resource/icon/icon-${name}/icon-512x512.png`,
+        "1024": `src/resource/icon/icon-${name}/icon-1024x1024.png`
+    };
+}
+
+const setIconMode = (name) => new Promise(
+    (resolve, reject) =>
+    {
+        log("Start", "Changing icon to", name);
+
+        const paths = getIconModePaths(name);
+        const details = {
+            path: paths,
         };
 
-        return Promise.all(
-            [
-                getFramesSelectionTextAndLanguage(),
-                detectPageLanguage(),
-            ]
-        )
-        .then(([framesSelectionTextAndLanguage, detectedPageLanguage]) => {
-            return speakAllSelections(framesSelectionTextAndLanguage, detectedPageLanguage);
-        });
+        chrome.browserAction.setIcon(
+            details,
+            () => {
+                log("Done", "Changing icon to", name);
 
-        log("Done", "Speaking selection");
-    } catch(error) {
-        logError("speakSelection", error);
+                resolve();
+            }
+        );
     }
-};
+);
+
+const setIconModePlaying = () => setIconMode("pause");
+const setIconModePaused = () => setIconMode("play");
 
 let rootChain = Promise.resolve();
 
@@ -225,16 +268,21 @@ const chain = (promise) => {
 chain(
     () => setup()
     .then((synthesizer) => {
-        const handleIconClick = (tab) => {
-            const wasSpeaking = synthesizer.speaking;
+        const handleIconClick = (tab) => chain(() => new Promise(
+            (resolve, reject) => {
+                const wasSpeaking = synthesizer.speaking;
 
-            // Clear all old text.
-            synthesizer.cancel();
+                // Clear all old text.
+                synthesizer.cancel();
 
-            if (!wasSpeaking) {
-                chain(speakSelection(synthesizer));
+                if (!wasSpeaking) {
+                    return setIconModePlaying()
+                    .then(() => speakSelection(synthesizer));
+                }
+
+                return setIconModePaused();
             }
-        };
+        ));
 
         chrome.browserAction.onClicked.addListener(handleIconClick);
     })