Improve platform detection and improve guide for installing other lan…

…guages

src/interfaces/browserInfo.ts

@@ -0,0 +1,22 @@
+export enum BrowserType {
+    Chrome,
+    Firefox,
+    Edge
+}
+
+export const getCurrentBrowser = () => {
+    if (/Firefox/.test(navigator.userAgent)) {
+        return BrowserType.Firefox;
+    }
+    else if (/Edge/.test(navigator.userAgent)) {
+        return BrowserType.Edge;
+    }
+    else {
+        return BrowserType.Chrome;
+    }
+}
+
+export const isWindows = () => {
+    const windowsPlatforms = /(win32|win64|windows|wince)/i;
+    return windowsPlatforms.test(globalThis.navigator.userAgent.toLowerCase());
+}

src/ui/index.ts

@@ -2,14 +2,15 @@ import { commands, runtime, storage, tabs } from "webextension-polyfill";
 import { Settings, StorageKey, UpscalingModeString } from "../interfaces/Storage";
 import { SpeechSynthesisHandler } from "../content/SpeechHandler";
 import { NamidaVoice, TTSWrapper } from "../content/TTSWrapper";
+import { BrowserType, getCurrentBrowser, isWindows } from "../interfaces/browserInfo";
 
 document.addEventListener('DOMContentLoaded', () => {
     const upscalingSelect = document.getElementById("upscaling-mode") as HTMLSelectElement;
     const pageSegSelect = document.getElementById("page-seg-mode") as HTMLSelectElement;
     const voiceSelect = document.getElementById("voice-selection") as HTMLSelectElement;
     const saveOcrCropCheckbox = document.getElementById("save-ocr-crop") as HTMLInputElement;
     const showSpeakButtonCheckbox = document.getElementById("show-speak-button") as HTMLInputElement;
-    const speechStatus = document.getElementById("speech-status") as HTMLElement | null;
+    const speechStatus = document.getElementById("speech-status") as HTMLSpanElement;
     const speakeDemoButton = document.getElementById("voice-demo-button") as HTMLButtonElement;
     const changeShortcut = document.getElementById("change-shortcut") as HTMLButtonElement;
 
@@ -53,29 +54,23 @@ document.addEventListener('DOMContentLoaded', () => {
         speechHandler.speak("こんにちは、NAMIDA OCRです。");
     });
 
-    runtime.getBrowserInfo().then((browserInfo) => {
-        const isFirefox = browserInfo.name.toLowerCase() == 'firefox';
-        const isChrome = browserInfo.name.toLowerCase() == 'chrome';
-        const isEdge = browserInfo.name.toLowerCase() == 'edge';
-
-        changeShortcut.addEventListener("click", async () => {
-            if (isChrome) {
-                tabs.create({ url: 'chrome://extensions/shortcuts' });
-            }
-            else if (isEdge) {
-                tabs.create({ url: 'edge://extensions/shortcuts' });
-            }
-        });
-
-        if (isFirefox) {
-            changeShortcut.hidden = true;
-            const firefoxExplanation = document.createElement('p');
-            firefoxExplanation.innerText = "To change the shortcut key combination, go to url 'about:addons' → click 'Extensions' → click the cog icon → click 'Manage Extension Shortcuts'.";
-            changeShortcut.parentElement?.insertBefore(firefoxExplanation, changeShortcut.nextElementSibling);
+    const browserType = getCurrentBrowser();
+    changeShortcut.addEventListener("click", async () => {
+        if (browserType == BrowserType.Chrome) {
+            tabs.create({ url: 'chrome://extensions/shortcuts' });
+        }
+        else if (browserType == BrowserType.Edge) {
+            tabs.create({ url: 'edge://extensions/shortcuts' });
         }
-
     });
 
+    if (browserType == BrowserType.Firefox) {
+        changeShortcut.hidden = true;
+        const firefoxExplanation = document.createElement('p');
+        firefoxExplanation.innerText = "To change the shortcut key combination, go to url 'about:addons' → click 'Extensions' → click the cog icon → click 'Manage Extension Shortcuts'.";
+        changeShortcut.parentElement?.insertBefore(firefoxExplanation, changeShortcut.nextElementSibling);
+    }
+
     commands.getAll().then((installedCommands) => {
         const snipCommand = installedCommands.find((installedCommand) => installedCommand.name == "toggle-feature");
         if (snipCommand && snipCommand.shortcut) {
@@ -87,23 +82,20 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     // Check for Japanese speech synthesis voice
-    if (speechStatus) {
-        // The voices may not be loaded immediately, so also listen for updates.
-        speechSynthesis.addEventListener("voiceschanged", () => {
-            checkJapaneseVoice(speechStatus);
-            // Also repopulate it when the voices change
-            Settings.getPreferredVoiceId().then(async (preferredVoiceUri) => {
-                const voices = await TTSWrapper.getVoices();
-                populateVoiceSelection(voiceSelect, preferredVoiceUri, voices);
-            });
-        });
+    // The voices may not be loaded immediately, so also listen for updates.
+    speechSynthesis.addEventListener("voiceschanged", () => {
         checkJapaneseVoice(speechStatus);
+        // Also repopulate it when the voices change
         Settings.getPreferredVoiceId().then(async (preferredVoiceUri) => {
             const voices = await TTSWrapper.getVoices();
             populateVoiceSelection(voiceSelect, preferredVoiceUri, voices);
         });
-
-    }
+    });
+    checkJapaneseVoice(speechStatus);
+    Settings.getPreferredVoiceId().then(async (preferredVoiceUri) => {
+        const voices = await TTSWrapper.getVoices();
+        populateVoiceSelection(voiceSelect, preferredVoiceUri, voices);
+    });
 });
 
 async function loadSettings(
@@ -135,9 +127,16 @@ async function checkJapaneseVoice(speechStatus: HTMLElement) {
     if (japaneseVoice) {
         speechStatus.textContent = "A Japanese speech synthesis voice is available!";
     } else {
-        speechStatus.textContent =
+        speechStatus.innerHTML =
             "No Japanese voice is available. Please install a Japanese language pack to your system" +
             "and restart your browser.";
+
+        if (isWindows()) {
+            speechStatus.innerHTML += " Click <a id=\"learn-install-pack\" href=\"https://support.microsoft.com/en-us/windows/language-packs-for-windows-a5094319-a92d-18de-5b53-1cfc697cfca8\">here</a> to learn how to install a language pack";
+            speechStatus.querySelector('#learn-install-pack')?.addEventListener('click', () => {
+                tabs.create({ url: "https://support.microsoft.com/en-us/windows/language-packs-for-windows-a5094319-a92d-18de-5b53-1cfc697cfca8" });
+            });
+        }
         document.querySelector<HTMLDivElement>('.voice-selection-container')!.hidden = true;
 
     }