From ef966d70c3694cfda05989812885b208ede045aa Mon Sep 17 00:00:00 2001 From: LeapwardKoex Date: Wed, 8 Jan 2025 20:59:41 +1300 Subject: [PATCH] Improve platform detection and improve guide for installing other languages --- src/interfaces/browserInfo.ts | 22 ++++++++++++ src/ui/index.ts | 67 +++++++++++++++++------------------ 2 files changed, 55 insertions(+), 34 deletions(-) create mode 100644 src/interfaces/browserInfo.ts diff --git a/src/interfaces/browserInfo.ts b/src/interfaces/browserInfo.ts new file mode 100644 index 0000000..6a4ccfc --- /dev/null +++ b/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()); +} \ No newline at end of file diff --git a/src/ui/index.ts b/src/ui/index.ts index c6b236f..ed73899 100644 --- a/src/ui/index.ts +++ b/src/ui/index.ts @@ -2,6 +2,7 @@ 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; @@ -9,7 +10,7 @@ document.addEventListener('DOMContentLoaded', () => { 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 here 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('.voice-selection-container')!.hidden = true; }