Update links and UI

xennygrimmato · Jan 29, 2020 · a0f96fc · a0f96fc
1 parent ed60510
commit a0f96fc
Show file tree

Hide file tree

Showing 11 changed files with 174 additions and 50 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@smui/checkbox": "^1.0.0-beta.19",
     "@smui/form-field": "^1.0.0-beta.19",
     "@smui/list": "^1.0.0-beta.19",
+    "@smui/snackbar": "^1.0.0-beta.19",
     "@smui/tab": "^1.0.0-beta.19",
     "@smui/tab-bar": "^1.0.0-beta.19",
     "@smui/textfield": "^1.0.0-beta.19",

diff --git a/src/img/brand.png b/src/img/brand.png
diff --git a/src/img/microphone_guide.png b/src/img/microphone_guide.png
diff --git a/src/js/plugins/query.js b/src/js/plugins/query.js
@@ -32,9 +32,7 @@ async function loadAndParsePage(url) {
 }
 
 async function generateGoogleLuckyUrl(query) {
-  const parsedResponse = await loadAndParsePage(
-    "https://www.google.com/"
-  );
+  const parsedResponse = await loadAndParsePage("https://www.google.com/");
   const sxsrf = parsedResponse("input[name='sxsrf']").attr("value");
   const ei = parsedResponse("input[name='ei']").attr("value");
   const iflsig = parsedResponse("input[name='iflsig']").attr("value");
@@ -359,18 +357,30 @@ plugins.push({
         "*query at *site"
       ],
       callback: async (query, site) => {
-        commander.openTabWithUrl(await generateGoogleLuckyUrl(query + " on " + site));
+        commander.openTabWithUrl(
+          await generateGoogleLuckyUrl(query + " on " + site)
+        );
       },
       priority: 0.3
     },
     {
       commands: ["search for *query", "google *query", "*query"],
       callback: query => {
-        commander.openTabWithUrl(
-          "https://www.google.com/search?gs_ivs=1&q=" +
-            encodeURIComponent(query)
-        );
-        commander.clearNotifications();
+        chrome.storage.local.get(["tts"], result => {
+          // If TTS is enabled, we need to clear notifications to avoid the TTS to feedback into the command.
+          if (result.tts) {
+            commander.openTabWithUrl(
+              "https://www.google.com/search?gs_ivs=1&q=" +
+                encodeURIComponent(query)
+            );
+            commander.clearNotifications();
+          } else {
+            commander.openTabWithUrl(
+              "https://www.google.com/search?q=" +
+                encodeURIComponent(query)
+            );
+          }
+        });
       },
       priority: 0.2
     }

diff --git a/src/manifest.json b/src/manifest.json
@@ -45,7 +45,8 @@
     "storage"
   ],
   "web_accessible_resources": [
-    "notification_ui.html"
+    "notification_ui.html",
+    "img/*"
   ],
   "optional_permissions": ["bookmarks"],
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

diff --git a/src/svelte/OptionCard.svelte b/src/svelte/OptionCard.svelte
@@ -17,7 +17,10 @@
 
 <style>
   :global(.card) {
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
+      0 2px 10px 0 rgba(0, 0, 0, 0.12);
     margin: 5px;
+    padding-top: 5px;
     text-align: center;
   }
 
@@ -41,7 +44,9 @@
 </style>
 
 <Card class="card">
-  <PrimaryAction on:click={onClick} class="{!option.disableClick ? 'clickable' : ''}">
+  <PrimaryAction
+    on:click={onClick}
+    class={!option.disableClick ? 'clickable' : ''}>
     <Media>
       <MdiIcon size="48" icon={option.icon} color={ICON_COLOR} />
       {#if option.enabled}

diff --git a/src/svelte/OptionPlugin.svelte b/src/svelte/OptionPlugin.svelte
@@ -8,6 +8,8 @@
 
 <style>
   :global(.option-plugin-card) {
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
+      0 2px 10px 0 rgba(0, 0, 0, 0.12);
     margin: 2px;
     flex-grow: 5;
     width: calc(50% - 4px);

diff --git a/src/svelte/Options.svelte b/src/svelte/Options.svelte
@@ -5,9 +5,11 @@
     mdiBellRing,
     mdiPencil,
     mdiKeyboard,
-    mdiComment
+    mdiTextToSpeech,
+    mdiThumbUp
   } from "@mdi/js";
   import Card, { Content } from "@smui/card";
+  import Snackbar, { Label as SnackbarLabel } from "@smui/snackbar";
   import Textfield from "@smui/textfield";
   import Tab, { Icon, Label as TabLabel } from "@smui/tab";
   import TabBar from "@smui/tab-bar";
@@ -19,6 +21,7 @@
   import { DEBUG, ICON_COLOR, storage } from "../js/common";
   import { allPlugins } from "../js/plugins";
 
+  let micPermissionGrantedSnackbar;
   let tabs = ["Options", "Supported commands"];
   const tabIndex = new URL(window.location).searchParams.get("tab") || 0;
   let activeTab = tabs[tabIndex];
@@ -41,14 +44,27 @@
   let hotword = {
     icon: mdiMicrophone,
     title: '"Hey buddy" hotword detection',
-    caption: 'We will listen to "Hey buddy" hotword command in the background.',
+    caption:
+      'We will listen to "Hey buddy" hotword command in the background. Click here to disable hotword detection.',
     errorCaption:
-      "Hotword detection is not enabled. Click here to trigger by saying the hotword",
+      "Hotword detection is disabled. Click here to enable hotword detection",
     onClick: enabled => {
       storage.set({ hotword: enabled });
     }
   };
 
+  let tts = {
+    icon: mdiTextToSpeech,
+    title: 'Voice response on search result',
+    caption:
+      'Auto play voice response on Google search result page if available.',
+    errorCaption:
+      "Voice response is disabled. Click here to enable voice response on Google search result.",
+    onClick: enabled => {
+      storage.set({ tts: enabled });
+    }
+  };
+
   let shortcut = {
     icon: mdiKeyboard,
     title: "Keyboard shortcut",
@@ -78,13 +94,11 @@
     shortcut.enabled = !!shortcut.caption;
   });
 
-  storage.get(
-    ["customHotword", "hotword"],
-    result => {
-      customHotword = result.customHotword || "";
-      hotword.enabled = result.hotword;
-    }
-  );
+  storage.get(["customHotword", "tts", "hotword"], result => {
+    customHotword = result.customHotword || "";
+    tts.enabled = result.tts;
+    hotword.enabled = result.hotword;
+  });
 
   navigator.mediaDevices
     .getUserMedia({ audio: true })
@@ -93,6 +107,18 @@
     })
     .catch(error => {
       voiceOption.enabled = false;
+      const intervalHandle = setInterval(async () => {
+        try {
+          const hasMicAccess = await navigator.mediaDevices.getUserMedia({
+            audio: true
+          });
+          voiceOption.enabled = true;
+          storage.set({ hotword: true }, () => {
+            chrome.tabs.update({ url: 'https://bewisse.com/heybuddy/thankyou/' });
+          });
+          clearInterval(intervalHandle);
+        } catch (ignored) {}
+      }, 1000);
     });
 
   $: storage.set({ customHotword });
@@ -137,17 +163,17 @@
 <div class="main-content">
   <h1 class="mdc-typography--headline6">
     <Button href="https://bewisse.com/heybuddy/">
-      <img class="logo" src="img/icon_128.png" height="32" alt="Logo" />
+      <img class="logo" src="/img/icon_128.png" height="32" alt="Logo" />
       &nbsp;
       <Label class="logo-text">Hey Buddy - Chrome Voice Assistant</Label>
     </Button>
     <Button
       class="reviews-button"
       href="https://chrome.google.com/webstore/detail/chrome-voice-assistant/aollofiafbblhopkofbfmlmbhbdcblem"
       target="_blank">
-      <MdiIcon size="24" icon={mdiComment} color={ICON_COLOR} />
+      <MdiIcon size="24" icon={mdiThumbUp} color={ICON_COLOR} />
       &nbsp;
-      <Label color={ICON_COLOR}>Review & Feedbacks</Label>
+      <Label color={ICON_COLOR}>Rate us!</Label>
     </Button>
   </h1>
 
@@ -159,32 +185,47 @@
   {#if activeTab === tabs[0]}
     <div class="transition-container" transition:fly={{ x: -200 }}>
       {#if !voiceOption.enabled}
+        <Card class="card">
+          <Content>
+            <div class="mdc-typography--subtitle1">
+              🎉 Thank you for installing Hey Buddy 🎉
+            </div>
+            <div class="mdc-typography--subtitle2">
+              We just need one more permission from you to access your
+              microphone
+            </div>
+          </Content>
+        </Card>
         <OptionCard option={voiceOption} />
       {:else}
+        <Snackbar bind:this={micPermissionGrantedSnackbar}>
+          <SnackbarLabel>Great! You are all set! Just say "Hey Buddy" to start!</SnackbarLabel>
+        </Snackbar>
         <OptionCard option={hotword} />
+        <OptionCard option={tts} />
+        <OptionCard option={shortcut} />
+        <Card class="card">
+          <Content>
+            <div class="mdc-typography--subtitle1">Hotwords</div>
+            <div class="mdc-typography--caption">
+              Say one of these hotwords to trigger Hey Buddy by voice.
+            </div>
+            <Textfield
+              variant="filled"
+              disabled
+              class="hotword-input"
+              value="Hey Buddy (default and cannot be changed)"
+              input$readonly
+              input$aria-readonly />
+            <Textfield
+              variant="outlined"
+              class="hotword-input"
+              input$placeholder="Set custom hotword"
+              bind:value={customHotword}
+              input$minlength="5" />
+          </Content>
+        </Card>
       {/if}
-      <OptionCard option={shortcut} />
-      <Card class="card">
-        <Content>
-          <div class="mdc-typography--subtitle1">Hotwords</div>
-          <div class="mdc-typography--caption">
-            Say one of these hotwords to trigger Hey Buddy by voice.
-          </div>
-          <Textfield
-            variant="filled"
-            disabled
-            class="hotword-input"
-            value="Hey Buddy (default and cannot be changed)"
-            input$readonly
-            input$aria-readonly />
-          <Textfield
-            variant="outlined"
-            class="hotword-input"
-            input$placeholder="Set custom hotword"
-            bind:value={customHotword}
-            input$minlength="5" />
-        </Content>
-      </Card>
     </div>
   {/if}
   {#if activeTab === tabs[1]}