WIP: feat: add an option to change UI language

src/helpers/createGetMessage.ts

@@ -0,0 +1,42 @@
+import type { Settings } from '@/settings';
+import { getMessageNative } from './getMessageNative';
+
+const browserPolyfill = (typeof browser !== 'undefined' ? browser : chrome);
+
+// TODO make an npm module of this.
+
+// export default function createGetMessage(settings: Pick<Settings, 'language'>): {
+// TODO cache (lodash/once)
+export async function createGetMessage(overrideLanguage?: ReturnType<typeof browser.i18n.getUILanguage>) {
+  if (!overrideLanguage) {
+    return getMessageNative;
+  }
+  // TODO but this import call is gonna be processed by Webpack, so it's gonna try to bundle the i18n files twice.
+  // Use `fetch`?
+  // const locale = await import(`_locales/${overrideLanguage}`);
+  // const localeP = import(`_locales/${overrideLanguage}/messages.json`);
+  const localeP = fetch(browserPolyfill.runtime.getURL(`_locales/${overrideLanguage}/messages.json`));
+  let locale: { [key: string]: { message: string }};
+  try {
+    locale = await (await localeP).json();
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error('Failed to fetch i18n JSON, falling back to default', e);
+    }
+    return getMessageNative;
+  }
+
+  // TODO placeholder substitution.
+  // TODO defaulting to `default_locale`.
+
+  // // const transformed = locale
+  // for (const [key, value] of Object.entries(locale)) {
+  //   // locale[key] = (value as { message: string }).message;
+  // }
+
+  // const transformedEntries = Object.entries(locale).map(([key, value]) => [key, value.message])
+  // const transformed = Object.fromEntries(transformedEntries);
+
+  // return (messageName: string) => locale[mesageName];
+  return (messageName: string) => locale[messageName].message;
+}

src/helpers/getMessageNative.ts

@@ -0,0 +1,2 @@
+// import browser from '@/webextensions-api';
+export const getMessageNative = (typeof browser !== 'undefined' ? browser : chrome).i18n.getMessage;

src/helpers/index.ts

@@ -29,4 +29,5 @@ export * from './filterOutUnchangedValues';
 export * from './speedName';
 export * from './getGeckoMajorVersion';
 export * from './getGeckoLikelyMaxNonMutedPlaybackRate';
-export * from './getMessage';
+export * from './getMessageNative';
+export * from './createGetMessage';

src/hotkeys/hotkeyActionToString.ts

@@ -1,6 +1,8 @@
-import { getMessage } from '@/helpers';
+import { createGetMessage } from '@/helpers';
 import { HotkeyAction } from './HotkeyAction';
 
+const getMessage = await createGetMessage();
+
 export const hotkeyActionToString: Record<HotkeyAction, string> = {
   // TODO check if emojis are ok with screen readers, though I think they should be.
 

src/local-file-player/App.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
   import { tick, onMount } from 'svelte';
   // TODO get rid of svelte?
-  import { getMessage } from '@/helpers';
+  import { createGetMessage, getMessageNative } from '@/helpers';
+
+  let getMessage = getMessageNative;
+  createGetMessage().then(r => getMessage = r);
 
   const defaultDocumentTitle = 'Jump Cutter: local video player'; // TODO translate?
   document.title = defaultDocumentTitle;

src/manifest.json

@@ -26,7 +26,8 @@
   "web_accessible_resources": [
     "content/SilenceDetectorProcessor.js",
     "content/VolumeFilterProcessor.js",
-    "chunks/*.js"
+    "chunks/*.js",
+    "_locales/*/messages.json"
   ],
   "options_ui": {
     "page": "options/index.html",

src/options/App.svelte

@@ -5,11 +5,14 @@
   import CheckboxField from './components/CheckboxField.svelte';
   import NumberField from './components/NumberField.svelte';
   import InputFieldBase from './components/InputFieldBase.svelte';
-  import { cloneDeepJson, assertDev, assertNever, getMessage } from '@/helpers';
+  import { cloneDeepJson, assertDev, assertNever, createGetMessage, getMessageNative } from '@/helpers';
   import { defaultSettings, filterOutLocalStorageOnlySettings, getSettings, setSettings, Settings } from '@/settings';
   import debounce from 'lodash/debounce';
   import { getDecayTimeConstant as getTimeSavedDataWeightDecayTimeConstant } from '@/content/TimeSavedTracker';
 
+  let getMessage = getMessageNative;
+  createGetMessage().then(r => getMessage = r);
+
   let unsaved = false;
   let formValid = true;
   let formEl: HTMLFormElement;

src/options/components/HotkeysTable.svelte

@@ -10,7 +10,10 @@
     eventToCombination, combinationToString, HotkeyBinding, hotkeyActionToString, HotkeyAction, NoArgumentAction,
     allNoArgumentActions,
   } from '@/hotkeys';
-  import { getMessage } from '@/helpers';
+  import { createGetMessage, getMessageNative } from '@/helpers';
+
+  let getMessage = getMessageNative;
+  createGetMessage().then(r => getMessage = r);
 
   export let hotkeys: PotentiallyInvalidHotkeyBinding[];
   export let displayOverrideWebsiteHotkeysColumn: boolean;

src/popup/App.svelte

@@ -15,7 +15,10 @@
   import debounce from 'lodash/debounce';
   import throttle from 'lodash/throttle';
   import { fromS } from 'hh-mm-ss'; // TODO it could be lighter. Make a MR or merge it directly and modify.
-  import { getMessage } from '@/helpers';
+  import { createGetMessage, getMessageNative } from '@/helpers';
+
+  let getMessage = getMessageNative;
+  createGetMessage('en').then(r => getMessage = r);
 
   let settings: Settings;
 

src/popup/MediaUnsupportedMessage.svelte

@@ -2,7 +2,10 @@
 import { createEventDispatcher } from 'svelte';
 import { Settings, ControllerKind_CLONING, ControllerKind_STRETCHING, } from '@/settings';
 import type { TelemetryMessage } from '@/content/AllMediaElementsController';
-import { assertNever, getMessage } from '@/helpers';
+import { assertNever, createGetMessage, getMessageNative } from '@/helpers';
+
+let getMessage = getMessageNative;
+createGetMessage().then(r => getMessage = r);
 
 export let settings: Pick<Settings,
   'experimentalControllerType'

webpack.config.js

@@ -19,6 +19,10 @@ module.exports = env => {
   });
 
   return {
+    experiments: {
+      topLevelAwait: true,
+    },
+
     devtool: process.env.NODE_ENV === 'production'
       ? undefined
       // The default one ('eval') doesn't work because "'unsafe-eval' is not an allowed source of script in the following