feat: add support i18n (#1468)

src/renderer.ts

@@ -1,3 +1,5 @@
+import i18next from 'i18next';
+
 import { startingPages } from './providers/extracted-data';
 import setupSongInfo from './providers/song-info-front';
 import {
@@ -9,6 +11,8 @@ import {
   loadAllRendererPlugins,
 } from './loader/renderer';
 
+import { loadI18n, setLanguage, t as i18t } from '@/i18n';
+
 import type { PluginConfig } from '@/types/plugins';
 import type { YoutubePlayer } from '@/types/youtube-player';
 
@@ -151,7 +155,32 @@ async function onApiLoaded() {
   }
 }
 
+/**
+ * YouTube Music still using ES5, so we need to define custom elements using ES5 style
+ */
+const defineYTMDTransElements = () => {
+  const YTMDTrans = function() {};
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  YTMDTrans.prototype = Object.create(HTMLElement.prototype);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  YTMDTrans.prototype.connectedCallback = function() {
+    const that = (this as HTMLElement);
+    const key = that.getAttribute('key');
+    if (key) {
+      that.innerHTML = i18t(key);
+    }
+  };
+  customElements.define('ytmd-trans', YTMDTrans as unknown as CustomElementConstructor);
+};
+
 (async () => {
+  await loadI18n();
+  await setLanguage(window.mainConfig.get('options.language') ?? 'en');
+  window.i18n = {
+    t: i18t.bind(i18next),
+  };
+  defineYTMDTransElements();
+
   await loadAllRendererPlugins();
   isPluginLoaded = true;