Merge pull request #10 from pexip/6-add-support-for-i18n

feat: add support for i18n

Author: marcos-cereijo-pexip

package-lock.json

@@ -13,16 +13,17 @@
   "license": "ISC",
   "type": "module",
   "dependencies": {
-    "@pexip/plugin-api": "21.1.1",
+    "@pexip/plugin-api": "21.1.2",
+    "i18next": "^25.3.2",
+    "i18next-http-backend": "^3.0.2",
     "pino": "^9.7.0"
   },
   "devDependencies": {
-    "eslint": "^9.31.0",
+    "eslint": "^9.32.0",
     "eslint-config-love": "^121.0.0",
-    "eslint-config-prettier": "^10.1.5",
+    "eslint-config-prettier": "^10.1.8",
     "prettier": "^3.6.2",
     "typescript": "^5.8.3",
-    "vite": "^7.0.4",
-    "vite-plugin-mkcert": "^1.17.8"
+    "vite": "^7.0.6"
   }
 }

package.json

@@ -0,0 +1,17 @@
+{
+  "setMessageOverlay": "Set message overlay",
+  "roomMessage": "Room message",
+  "message": "message",
+  "enterYourMessage": "Enter your message",
+  "selectRoom": "Select room",
+  "allRooms": "All rooms",
+  "mainRoom": "Main room",
+  "submit": "Submit",
+  "choose": "Choose",
+  "inputMessageForm": {
+    "description": "Write your message overlay text below. If you would like to get a new line press enter or make a new line in the textarea."
+  },
+  "selectRoomForm": {
+    "description": "Choose the room you want to set the message overlay for."
+  }
+}

public/locales/en/translation.json

@@ -0,0 +1,17 @@
+{
+  "setMessageOverlay": "Stel berichtoverlay in",
+  "roomMessage": "Kamerbericht",
+  "message": "bericht",
+  "enterYourMessage": "Voer uw bericht in",
+  "selectRoom": "Selecteer kamer",
+  "allRooms": "Alle kamers",
+  "mainRoom": "Hoofdkamer",
+  "submit": "Verzenden",
+  "choose": "Kiezen",
+  "inputMessageForm": {
+    "description": "Schrijf hieronder uw berichtoverlaytekst. Als u een nieuwe regel wilt, druk op enter of maak een nieuwe regel in het tekstvak."
+  },
+  "selectRoomForm": {
+    "description": "Kies de kamer waarvoor u de berichtoverlay wilt instellen."
+  }
+}

public/locales/nl/translation.json

@@ -1,6 +1,7 @@
 import { logger } from '../logger'
 import { setMessageOverlay } from '../messageOverlay'
 import { plugin } from '../plugin'
+import { i18next } from '../i18n'
 
 export const createInputMessageForm = async (
   roomId: string,
@@ -9,27 +10,28 @@ export const createInputMessageForm = async (
   breakoutRooms?: Map<string, string>
 ): Promise<void> => {
   const messageName =
-    roomName != null ? `"${roomName}" message` : 'Room message'
+    roomName != null
+      ? `"${roomName}" ${i18next.t('message')}`
+      : i18next.t('roomMessage')
 
   if (plugin == null) {
     throw new Error('Plugin is not initialized.')
   }
 
   const form = await plugin.ui.addForm({
-    title: 'Set message overlay',
-    description:
-      'Write your message overlay text below. If you would like to get a new line press enter or make a new line in the textarea',
+    title: i18next.t('setMessageOverlay'),
+    description: i18next.t('inputMessageForm.description'),
     form: {
       elements: {
         message: {
           name: messageName,
           type: 'textarea',
           isOptional: true,
-          placeholder: 'Enter your message',
+          placeholder: i18next.t('enterYourMessage'),
           value: currentMessage
         }
       },
-      submitBtnTitle: 'Submit'
+      submitBtnTitle: i18next.t('submit')
     }
   })
 

src/forms/createInputMessageForm.ts

@@ -2,6 +2,7 @@ import { createInputMessageForm } from './createInputMessageForm'
 import { getMessageOverlay } from '../messageOverlay'
 import { plugin } from '../plugin'
 import { logger } from '../logger'
+import { i18next } from '../i18n'
 
 export const createSelectRoomForm = async (
   breakoutRooms: Map<string, string>
@@ -11,22 +12,22 @@ export const createSelectRoomForm = async (
   }
 
   const form = await plugin.ui.addForm({
-    title: 'Set message overlay',
-    description: 'Choose the room you want to set the message overlay for.',
+    title: i18next.t('setMessageOverlay'),
+    description: i18next.t('selectRoomForm.description'),
     form: {
       elements: {
         room: {
-          name: 'Select room',
+          name: i18next.t('selectRoom'),
           type: 'select',
           isOptional: true,
           options: [
             {
               id: '',
-              label: 'All rooms'
+              label: i18next.t('allRooms')
             },
             {
               id: 'main',
-              label: 'Main room'
+              label: i18next.t('mainRoom')
             },
             ...Array.from(breakoutRooms).map(([roomId, roomName]) => ({
               id: roomId,
@@ -35,7 +36,7 @@ export const createSelectRoomForm = async (
           ]
         }
       },
-      submitBtnTitle: 'Choose'
+      submitBtnTitle: i18next.t('choose')
     }
   })
 
@@ -55,9 +56,9 @@ export const createSelectRoomForm = async (
 
     const roomName =
       roomId === ''
-        ? 'All rooms'
+        ? i18next.t('allRooms')
         : roomId === 'main'
-          ? 'Main room'
+          ? i18next.t('mainRoom')
           : breakoutRooms.get(roomId)
 
     await createInputMessageForm(roomId, currentMessage, roomName)

src/forms/createSelectRoomForm.ts

@@ -0,0 +1,19 @@
+import i18next from 'i18next'
+import Backend from 'i18next-http-backend'
+import { logger } from './logger'
+
+export const initI18n = async (): Promise<void> => {
+  logger.info('Initializing i18n...')
+  await i18next.use(Backend).init({
+    fallbackLng: 'en',
+    backend: {
+      loadPath: 'locales/{{lng}}/{{ns}}.json'
+    }
+  })
+}
+
+initI18n().catch((error: unknown) => {
+  logger.error('Failed to initialize i18n:', error)
+})
+
+export { i18next }

src/i18n.ts

@@ -4,6 +4,7 @@ import { getMessageOverlay } from './messageOverlay'
 import { createInputMessageForm } from './forms/createInputMessageForm'
 import { setPlugin } from './plugin'
 import { logger } from './logger'
+import { i18next } from './i18n'
 
 const version = 1
 
@@ -43,6 +44,14 @@ plugin.events.conferenceStatus.add(async ({ id, status }) => {
   }
 })
 
+plugin.events.languageSelect.add(async (language) => {
+  await i18next.changeLanguage(language).catch(logger.error)
+  if (button != null) {
+    await removeButton()
+    await addButton()
+  }
+})
+
 const addButton = async (): Promise<void> => {
   if (button != null || creatingButton) {
     return
@@ -51,7 +60,7 @@ const addButton = async (): Promise<void> => {
     creatingButton = true
     button = await plugin.ui.addButton({
       position: 'settingsMenu',
-      label: 'Set message overlay',
+      label: i18next.t('setMessageOverlay'),
       inMeetingOnly: true,
       roles: ['chair']
     })

src/index.ts

@@ -1,13 +1,9 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 import { defineConfig } from 'vite'
-import mkcert from 'vite-plugin-mkcert'
 
 export default defineConfig({
   base: './',
   build: {
     target: 'esnext'
-  },
-  plugins: [
-    mkcert()
-  ]
+  }
 })