feat: create new section for client app options

4 years ago · 15ae99ea13
parent 692340c5aa
commit 15ae99ea13
3 changed files with 116 additions and 77 deletions
--- a/src/_locales/en/messages-firefox.json
+++ b/src/_locales/en/messages-firefox.json
@ -0,0 +1,6 @@
+{
+  "optionSectionTitle_client": {
+    "message": "Client App",
+    "description": "Title of the options section."
+  }
+}
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@ -174,28 +174,38 @@
    "description": "Value of the option."
  },

-  "optionSectionTitle_misc": {
-    "message": "Miscellaneous",
+  "optionSectionTitle_client": {
+    "message": "Client app",
    "description": "Title of the options section."
  },

-  "optionTitle_loadEnglishChallenge": {
-    "message": "Load challenge in English",
+  "optionSectionDescription_client": {
+    "message": "The client app enables you to simulate user interactions and improves the success rate of the extension.",
+    "description": "Description of the options section."
+  },
+
+  "optionTitle_simulateUserInput": {
+    "message": "Simulate user interactions",
    "description": "Title of the option."
  },

-  "optionTitle_tryEnglishSpeechModel": {
-    "message": "Retry speech recognition with English model",
+  "optionTitle_autoUpdateClientApp": {
+    "message": "Auto-update client app",
    "description": "Title of the option."
  },

-  "optionTitle_simulateUserInput": {
-    "message": "Simulate user input",
+  "optionSectionTitle_misc": {
+    "message": "Miscellaneous",
+    "description": "Title of the options section."
+  },
+
+  "optionTitle_loadEnglishChallenge": {
+    "message": "Load challenge in English",
    "description": "Title of the option."
  },

-  "optionTitle_autoUpdateClientApp": {
-    "message": "Automatically update client app",
+  "optionTitle_tryEnglishSpeechModel": {
+    "message": "Retry speech recognition with English model",
    "description": "Title of the option."
  },

@ -411,7 +421,7 @@
  },

  "pageContent_optionClientAppDownloadDesc": {
-    "message": "Download and install the client app to enable user input simulation. $INSTALLGUIDE$",
+    "message": "Download and install the client app to get started. $INSTALLGUIDE$",
    "description": "Page content.",
    "placeholders": {
      "installGuide": {
@ -432,7 +442,7 @@
  },

  "pageContent_installDesc": {
-    "message": "The client app enables Buster to simulate user input and helps improve the success rate of the extension and lower the occurrence of temporary blocks.",
+    "message": "The client app enables you to simulate user interactions and improves the success rate of the extension.",
    "description": "Page content."
  },

@ -497,7 +507,7 @@
  },

  "error_missingApiKey": {
-    "message": "API key missing. Visit the options page to configure the service.",
+    "message": "API key missing. Visit the extension's options to configure the service.",
    "description": "Error message."
  },

@ -507,17 +517,17 @@
  },

  "error_missingClientApp": {
-    "message": "Cannot connect to client app. Finish setting up the app or turn off user input simulation from the extension's options page.",
+    "message": "Cannot connect to client app. Finish setting up the app or turn off the simulation of user interactions from the extension's options.",
    "description": "Error message."
  },

  "error_outdatedClientApp": {
-    "message": "The client app is outdated. Download and install the latest version from the extension's options page.",
+    "message": "The client app is outdated. Download and install the latest version from the extension's options.",
    "description": "Error message."
  },

  "error_clientAppUpdateFailed": {
-    "message": "The client app cannot be updated. Download and install the latest version from the extension's options page.",
+    "message": "The client app cannot be updated. Download and install the latest version from the extension's options.",
    "description": "Error message."
  },

--- a/src/options/App.vue
+++ b/src/options/App.vue
@ -105,34 +105,19 @@

    <div class="section">
      <div class="section-title" v-once>
-        {{ getText('optionSectionTitle_misc') }}
+        {{ getText('optionSectionTitle_client') }}
+      </div>
+      <div class="section-desc" v-once>
+        {{ getText('optionSectionDescription_client') }}
      </div>
      <div class="option-wrap">
-        <div class="option">
-          <v-form-field
-            input-id="lec"
-            :label="getText('optionTitle_loadEnglishChallenge')"
-          >
-            <v-switch
-              id="lec"
-              v-model="options.loadEnglishChallenge"
-            ></v-switch>
-          </v-form-field>
-        </div>
-
-        <div class="option" v-if="!options.loadEnglishChallenge">
-          <v-form-field
-            input-id="esm"
-            :label="getText('optionTitle_tryEnglishSpeechModel')"
-          >
-            <v-switch
-              id="esm"
-              v-model="options.tryEnglishSpeechModel"
-            ></v-switch>
-          </v-form-field>
-        </div>
-
-        <div class="option">
+        <div
+          class="option"
+          v-if="
+            clientAppInstalled ||
+            (clientAppVerified && options.simulateUserInput)
+          "
+        >
          <v-form-field
            input-id="si"
            :label="getText('optionTitle_simulateUserInput')"
@ -141,17 +126,19 @@
          </v-form-field>
        </div>

-        <div class="option">
+        <div class="option" v-if="clientAppInstalled">
          <v-form-field
            input-id="auc"
-            v-if="options.simulateUserInput"
            :label="getText('optionTitle_autoUpdateClientApp')"
          >
            <v-switch id="auc" v-model="options.autoUpdateClientApp"></v-switch>
          </v-form-field>
        </div>

-        <div class="client-download" v-if="showClientAppNotice">
+        <div
+          class="client-download"
+          v-if="clientAppVerified && !clientAppInstalled"
+        >
          <div
            class="download-desc"
            v-html="
@ -184,6 +171,37 @@
        </div>
      </div>
    </div>
+
+    <div class="section">
+      <div class="section-title" v-once>
+        {{ getText('optionSectionTitle_misc') }}
+      </div>
+      <div class="option-wrap">
+        <div class="option">
+          <v-form-field
+            input-id="lec"
+            :label="getText('optionTitle_loadEnglishChallenge')"
+          >
+            <v-switch
+              id="lec"
+              v-model="options.loadEnglishChallenge"
+            ></v-switch>
+          </v-form-field>
+        </div>
+
+        <div class="option" v-if="!options.loadEnglishChallenge">
+          <v-form-field
+            input-id="esm"
+            :label="getText('optionTitle_tryEnglishSpeechModel')"
+          >
+            <v-switch
+              id="esm"
+              v-model="options.tryEnglishSpeechModel"
+            ></v-switch>
+          </v-form-field>
+        </div>
+      </div>
+    </div>
  </div>
 </template>

@ -210,7 +228,7 @@ export default {
    [TextField.name]: TextField
  },

-  data: function() {
+  data: function () {
    return {
      dataLoaded: false,

@ -260,7 +278,8 @@ export default {
      witSpeechApiLang: '',
      witSpeechApis: [],

-      showClientAppNotice: false,
+      clientAppVerified: false,
+      clientAppInstalled: false,
      clientAppDownloadUrl: '',
      installGuideUrl: '',

@ -280,48 +299,46 @@ export default {
    };
  },

-  watch: {
-    'options.simulateUserInput': async function(value) {
-      if (value) {
-        try {
-          await pingClientApp();
-        } catch (e) {
-          if (!this.clientAppDownloadUrl) {
-            const {os, arch} = await getPlatform();
-            if (clientAppPlatforms.includes(`${os}/${arch}`)) {
-              this.installGuideUrl = `https://github.com/dessant/buster-client/wiki/Installing-the-client-app#${os}`;
-              this.clientAppDownloadUrl = `https://github.com/dessant/buster-client/releases/download/v${clientAppVersion}/buster-client-setup-v${clientAppVersion}-${os}-${arch}`;
-              if (os === 'windows') {
-                this.clientAppDownloadUrl += '.exe';
-              }
+  methods: {
+    getText,
+
+    verifyClientApp: async function () {
+      try {
+        await pingClientApp();
+        this.clientAppInstalled = true;
+      } catch (e) {
+        if (!this.installGuideUrl) {
+          this.installGuideUrl =
+            'https://github.com/dessant/buster/wiki/Installing-the-client-app';
+          const {os, arch} = await getPlatform();
+          if (clientAppPlatforms.includes(`${os}/${arch}`)) {
+            this.installGuideUrl += `#${os}`;
+            this.clientAppDownloadUrl = `https://github.com/dessant/buster-client/releases/download/v${clientAppVersion}/buster-client-setup-v${clientAppVersion}-${os}-${arch}`;
+            if (os === 'windows') {
+              this.clientAppDownloadUrl += '.exe';
            }
          }
-
-          this.showClientAppNotice = true;
-          return;
        }
-      }

-      this.showClientAppNotice = false;
-    }
-  },
+        this.clientAppInstalled = false;
+      }

-  methods: {
-    getText,
+      this.clientAppVerified = true;
+    },

-    setWitSpeechApiLangOptions: function() {
+    setWitSpeechApiLangOptions: function () {
      this.selectOptions.witSpeechApiLang = this.selectOptions.witSpeechApiLang.filter(
        item => !this.witSpeechApis.includes(item.id)
      );
    },

-    addWitSpeechApi: function() {
+    addWitSpeechApi: function () {
      this.witSpeechApis.push(this.witSpeechApiLang);
      this.witSpeechApiLang = '';
      this.setWitSpeechApiLangOptions();
    },

-    saveWitSpeechApiKey: function(value, lang) {
+    saveWitSpeechApiKey: function (value, lang) {
      const apiKeys = this.options.witSpeechApiKeys;
      if (value) {
        this.options.witSpeechApiKeys = Object.assign({}, apiKeys, {
@ -334,12 +351,12 @@ export default {
    }
  },

-  created: async function() {
+  created: async function () {
    const options = await storage.get(optionKeys, 'sync');

    for (const option of Object.keys(this.options)) {
      this.options[option] = options[option];
-      this.$watch(`options.${option}`, async function(value) {
+      this.$watch(`options.${option}`, async function (value) {
        await storage.set({[option]: value}, 'sync');
      });
    }
@ -352,6 +369,8 @@ export default {
      getText('extensionName')
    ]);

+    this.verifyClientApp();
+
    this.dataLoaded = true;
  }
 };
@ -395,6 +414,7 @@ body {
 .section-desc {
  @include mdc-typography(body2);
  padding-top: 8px;
+  max-width: 380px;
 }

 .option-wrap {
@ -453,14 +473,17 @@ body {
 }

 .client-download {
-  margin-left: 48px;
+  min-width: 300px;
 }

 .download-desc,
 .download-error {
  @include mdc-theme-prop(color, text-primary-on-light);
  @include mdc-typography(body2);
-  min-width: 300px;
+}
+
+.download-desc {
+  max-width: 240px;
 }

 .download-error {