tray menu options now have translations when a user changes their lan…

…guage (#1545)
nukeop · Jan 31, 2024 · 759c6b7 · 759c6b7
1 parent 4c84ecc
commit 759c6b7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/packages/app/app/components/Settings/index.tsx b/packages/app/app/components/Settings/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { remote } from 'electron';
+import { ipcRenderer, remote } from 'electron';
 import { Button, Input, Radio, Segment, Icon } from 'semantic-ui-react';
 import cx from 'classnames';
 import _ from 'lodash';
@@ -99,7 +99,16 @@ const Settings: React.FC<SettingsProps> = ({
       placeholder={t(placeholder)}
       value={i18n.language}
       options={options}
-      onChange={(e, { value }) => i18n.changeLanguage(value as string)}
+      onChange={(e, { value }) => {
+        i18n.changeLanguage(value as string);
+        ipcRenderer.send('tray-menu-translations-update', {
+          'play': i18n.t('command-palette:actions.play'),
+          'pause': i18n.t('command-palette:actions.pause'),
+          'next': i18n.t('command-palette:actions.next'),
+          'previous': i18n.t('command-palette:actions.previous'),
+          'quit': i18n.t('command-palette:actions.quit')
+        });
+      }}
     />
   );
 

diff --git a/packages/main/src/services/trayMenu/index.ts b/packages/main/src/services/trayMenu/index.ts
@@ -1,12 +1,11 @@
 import { injectable, inject } from 'inversify';
-import { Menu, app, Tray, nativeImage } from 'electron';
+import { Menu, app, Tray, nativeImage, ipcMain } from 'electron';
 import { NuclearMeta, IpcEvents} from '@nuclear/core';
 import HttpApi from '../http';
 import Config from '../config';
 import Platform from '../platform';
 import Window from '../window';
 
-
 type PlayerContext = {
   isPlaying?: boolean;
   track?: NuclearMeta
@@ -18,6 +17,14 @@ class TrayMenu {
 
   private playerContext: PlayerContext;
 
+  private trayMenuTranslations = {
+    'pause': 'Pause',
+    'play': 'Play',
+    'next': 'Next',
+    'previous': 'Previous',
+    'quit': 'Quit'
+  };
+
   constructor(
     @inject(Config) private config: Config,
     @inject(HttpApi) private httpApi: HttpApi,
@@ -39,6 +46,12 @@ class TrayMenu {
     });
     this.tray.setToolTip(this.getToolTipString());
     this.tray.setContextMenu(this.getMenu());
+
+    // apply tray menu translations when user changes language from language settings
+    ipcMain.on('tray-menu-translations-update', (e, translations) => {
+      this.trayMenuTranslations = translations;
+      this.update();
+    });
   }
 
   getMenu() {
@@ -69,7 +82,7 @@ class TrayMenu {
     if (this.playerContext.track) {
       if (this.playerContext.isPlaying) {
         template.push({
-          label: 'Pause',
+          label: this.trayMenuTranslations.pause,
           type: 'normal',
           click: async () => {
             this.window.send(IpcEvents.PAUSE);
@@ -78,7 +91,7 @@ class TrayMenu {
         });
       } else {
         template.push({
-          label: 'Play',
+          label: this.trayMenuTranslations.play,
           type: 'normal',
           click: async () => {
             this.window.send(IpcEvents.PLAY);
@@ -88,15 +101,15 @@ class TrayMenu {
       }
 
       template.push({
-        label: 'Next',
+        label: this.trayMenuTranslations.next,
         type: 'normal',
         click: async () => {
           this.window.send(IpcEvents.NEXT);
         }
       });
 
       template.push({
-        label: 'Previous',
+        label: this.trayMenuTranslations.previous,
         type: 'normal',
         click: async () => {
           this.window.send(IpcEvents.PREVIOUS);
@@ -110,7 +123,7 @@ class TrayMenu {
 
     // Quit button
     template.push({
-      label: 'Quit',
+      label: this.trayMenuTranslations.quit,
       type: 'normal',
       click: async () => {
         await this.httpApi.close();