diff --git a/src/_locales/en/messages-firefox.json b/src/_locales/en/messages-firefox.json new file mode 100644 index 0000000..bff2798 --- /dev/null +++ b/src/_locales/en/messages-firefox.json @@ -0,0 +1,6 @@ +{ + "optionSectionTitle_client": { + "message": "Client App", + "description": "Title of the options section." + } +} diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 69792e4..246b455 100644 --- 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." }, diff --git a/src/options/App.vue b/src/options/App.vue index a9f2869..5a6a0c0 100644 --- a/src/options/App.vue +++ b/src/options/App.vue @@ -105,34 +105,19 @@
- {{ getText('optionSectionTitle_misc') }} + {{ getText('optionSectionTitle_client') }} +
+
+ {{ getText('optionSectionDescription_client') }}
-
- - - -
- -
- - - -
- -
+
-
+
-
+
+
+ {{ getText('optionSectionTitle_misc') }} +
+
+
+ + + +
+ +
+ + + +
+
+
@@ -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 {