Implement sounds in Boson

.erb/configs/webpack.config.renderer.dev.ts

@@ -89,6 +89,11 @@ const configuration: webpack.Configuration = {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
         type: 'asset/resource',
       },
+      // Sounds
+      {
+        test: /\.(ogg|mp3|wav)$/i,
+        type: 'asset/resource',
+      },
       // Images
       {
         test: /\.(png|jpg|jpeg|gif)$/i,

.erb/configs/webpack.config.renderer.prod.ts

@@ -65,6 +65,11 @@ const configuration: webpack.Configuration = {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
         type: 'asset/resource',
       },
+      // Sounds
+      {
+        test: /\.(ogg|mp3|wav)$/i,
+        type: 'asset/resource',
+      },
       // Images
       {
         test: /\.(png|jpg|jpeg|gif)$/i,

package.json

@@ -93,6 +93,7 @@
     "react-highlight-words": "^0.20.0",
     "react-router-dom": "^6.12.1",
     "react-virtuoso": "^4.3.10",
+    "sound-play": "^1.1.0",
     "unique-names-generator": "^4.7.1"
   },
   "devDependencies": {
@@ -111,6 +112,7 @@
     "@types/react-dom": "^18.2.4",
     "@types/react-highlight-words": "^0.16.4",
     "@types/react-test-renderer": "^18.0.0",
+    "@types/sound-play": "^1.1.0",
     "@types/terser-webpack-plugin": "^5.2.0",
     "@types/webpack-bundle-analyzer": "^4.6.0",
     "@typescript-eslint/eslint-plugin": "^5.59.9",

src/audio.d.ts

@@ -0,0 +1,9 @@
+declare module '*.mp3' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.wav' {
+  const src: string;
+  export default src;
+}

src/main/events.ts

@@ -22,6 +22,7 @@ import { config, store, subscriptions as storeSubscriptions } from './store';
 import connectAndAuthorise from './tron/tools';
 import { tron } from './tron/tron';
 import { CommandStatus } from './tron/types';
+import { playSound } from './utils';
 
 export default function loadEvents() {
   // app events
@@ -139,7 +140,7 @@ export default function loadEvents() {
     keytar.setPassword('boson', key, value);
   });
 
-  // tools
+  // Tools
   ipcMain.on('tools:get-uuid', async (event) => {
     event.returnValue = randomUUID();
   });
@@ -157,9 +158,12 @@ export default function loadEvents() {
       return stdout;
     }
   );
-  ipcMain.handle('tools:open-in-browser', async (event, path: string) =>
-    shell.openExternal(path)
+  ipcMain.handle('tools:open-in-browser', async (event, extPath: string) =>
+    shell.openExternal(extPath)
   );
+  ipcMain.handle('tools:play-sound', async (event, type: string) => {
+    playSound(type);
+  });
 
   // Dialogs
   ipcMain.handle(

src/main/main.ts

@@ -24,7 +24,7 @@ import loadEvents from './events';
 import MenuBuilder from './menu/menu';
 import { config, store } from './store';
 import { WindowNames, WindowParams } from './types';
-import { resolveHtmlPath } from './util';
+import { resolveHtmlPath } from './utils';
 
 // For now disable log rotation
 log.transports.file.maxSize = 0;

src/main/menu/menu.ts

@@ -2,6 +2,7 @@
 
 import { app, BrowserWindow, Menu, MenuItemConstructorOptions } from 'electron';
 import { createWindow } from '../main';
+import { store } from '../store';
 import {
   checkForUpdates,
   clearLogs,
@@ -37,6 +38,15 @@ export default class MenuBuilder {
     const menu = Menu.buildFromTemplate(template);
     Menu.setApplicationMenu(menu);
 
+    store.onDidChange('audio', (newValue) => {
+      if (!newValue) return;
+
+      const mutedSoundsItem = menu.getMenuItemById('mute-sounds');
+      if (mutedSoundsItem) {
+        mutedSoundsItem.checked = newValue.muted;
+      }
+    });
+
     return menu;
   }
 
@@ -74,6 +84,17 @@ export default class MenuBuilder {
           click: () => createWindow('preferences'),
         },
         { type: 'separator' },
+        {
+          id: 'mute-sounds',
+          label: 'Mute sounds',
+          type: 'checkbox',
+          checked: store.get('audio.muted'),
+          click: () => {
+            const current = store.get('audio.muted') as boolean;
+            store.set('audio.muted', !current);
+          },
+          accelerator: 'Command+Shift+M',
+        },
         {
           label: 'Save window positions',
           click: saveWindows,

src/main/preload.ts

@@ -145,6 +145,9 @@ const ElectronAPI = {
     openInApplication: (command: string) => {
       return ipcRenderer.invoke('tools:open-in-application', command);
     },
+    playSound: (type: string) => {
+      return ipcRenderer.invoke('tools:play-sound', type);
+    },
   },
   dialog: {
     showMessageBox: async (

src/main/store/store.ts

@@ -33,6 +33,16 @@ const store = new Store({
       st.set('hal.allowGotoFieldAutoMode', true);
       st.delete('hal.useAutoMode' as keyof typeof userConfig);
     },
+    '>=0.3.3': (st) => {
+      st.set('audio', {
+        mode: 'on',
+        muted: false,
+        minimal: ['error'],
+        sounds: {
+          error: 'error.wav',
+        },
+      });
+    },
   },
 });
 
@@ -49,4 +59,4 @@ if (!(store.get('windows.openWindows') as string[]).includes('main')) {
 
 const subscriptions = new Map<string, () => EventEmitter>();
 
-export { store, defaultConfig, subscriptions };
+export { defaultConfig, store, subscriptions };

src/main/store/user.json

@@ -40,6 +40,14 @@
   "chat": {
     "notifications": true
   },
+  "audio": {
+    "mode": "on",
+    "muted": false,
+    "minimal": ["error"],
+    "sounds": {
+      "error": "error.wav"
+    }
+  },
   "maxLogMessages": 50000,
   "updateChannel": "stable",
   "profiles": {}

src/main/tron/tron.ts

@@ -17,6 +17,7 @@ import {
   uniqueNamesGenerator,
 } from 'unique-names-generator';
 import { config, store } from '../store';
+import { playSound } from '../utils';
 import Command from './command';
 import parseLine from './keywords';
 import Reply from './reply';
@@ -354,6 +355,11 @@ export class TronConnection {
         keywords
       );
 
+      // If message is error, play sound.
+      if (reply.code === ReplyCode.Error || reply.code === ReplyCode.Failed) {
+        playSound('error');
+      }
+
       // Update reply date to match TCC TAI.
       reply.date += this.taiOffset * 1000;
 

src/main/utils.ts

@@ -0,0 +1,45 @@
+/* eslint import/prefer-default-export: off */
+import path from 'path';
+import sound from 'sound-play';
+import { URL } from 'url';
+import { store } from './store';
+
+export function resolveHtmlPath(htmlFileName: string) {
+  if (process.env.NODE_ENV === 'development') {
+    const port = process.env.PORT || 1212;
+    const url = new URL(`http://localhost:${port}/${htmlFileName}`);
+    url.pathname = htmlFileName;
+    return url.href;
+  }
+  return `file://${path.resolve(
+    __dirname,
+    `../renderer/index.html?${htmlFileName}`
+  )}`;
+}
+
+export interface PlaySoundOpts {
+  overrideMode: boolean;
+}
+
+export function playSound(type: string, opts?: PlaySoundOpts) {
+  const { overrideMode = false } = opts || {};
+
+  const file = store.get(`audio.sounds.${type}`, null);
+  if (!file) return;
+
+  const mode: string = store.get('audio.mode');
+  const minimals: string[] = store.get('audio.minimal');
+  const muted = store.get('audio.muted');
+
+  if (!overrideMode) {
+    if (muted) return;
+    if (mode === 'off') return;
+    if (mode === 'minimal' && !minimals.includes(type)) return;
+  }
+
+  if (path.isAbsolute(file)) {
+    sound.play(file);
+  } else {
+    sound.play(path.join(__dirname, '../sounds', file));
+  }
+}

src/renderer/Preferences/Components/BooleanOption.tsx

@@ -19,10 +19,20 @@ export default function BooleanOption(props: BooleanOptionProps) {
   const { title, param, description } = props;
 
   return (
-    <Grid container pt={1} minHeight={50} alignContent='center'>
-      <Grid item xs={9}>
-        <TypographyTitle>{title}</TypographyTitle>
-        <TypographyDescription>{description}</TypographyDescription>
+    <Grid
+      container
+      pt={1}
+      minHeight={50}
+      alignItems='center'
+      alignContent='center'
+    >
+      <Grid item xs={9} alignContent='center' alignItems='center'>
+        <TypographyTitle gutterBottom={description !== undefined}>
+          {title}
+        </TypographyTitle>
+        {description && (
+          <TypographyDescription>{description}</TypographyDescription>
+        )}
       </Grid>
       <Grid
         item

src/renderer/Preferences/Components/TypographyTitle.tsx

@@ -12,8 +12,12 @@ type PreferencesTypographyType = {
   children?: React.ReactNode;
 };
 
-export function TypographyTitle(props: PreferencesTypographyType) {
-  const { children } = props;
+type PreferencesTypographyTitleType = PreferencesTypographyType & {
+  gutterBottom?: boolean;
+};
+
+export function TypographyTitle(props: PreferencesTypographyTitleType) {
+  const { children, gutterBottom = true } = props;
 
   return (
     <Typography
@@ -25,7 +29,7 @@ export function TypographyTitle(props: PreferencesTypographyType) {
         userSelect: 'none',
         alignSelf: 'center',
       })}
-      gutterBottom
+      gutterBottom={gutterBottom}
     >
       {children}
     </Typography>

src/renderer/Preferences/Panes/InterfacePane.tsx

@@ -20,6 +20,7 @@ import Grid from '@mui/system/Unstable_Grid';
 import React from 'react';
 import { ColorModeValues } from 'renderer/App';
 import { useStore } from 'renderer/hooks';
+import BooleanOption from '../Components/BooleanOption';
 import Pane from '../Components/Pane';
 import PreferencesFormControlLabel from '../Components/PreferencesFormControlLabel';
 import PreferencesRadioGroup from '../Components/PreferencesRadioGroup';
@@ -31,7 +32,9 @@ import {
 
 function ThemeMode() {
   const theme = useTheme();
-  const [themeMode, setThemeMode] = React.useState<ColorModeValues>('system');
+  const [themeMode, setThemeMode] = React.useState<ColorModeValues>(
+    window.electron.store.get('interface.mode') || 'system'
+  );
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setThemeMode(event.target.value as ColorModeValues);
@@ -69,6 +72,48 @@ function ThemeMode() {
   );
 }
 
+function AudioMode() {
+  const key = 'audio.mode';
+  const [audioMode, setAudioMode] = React.useState<string>(
+    window.electron.store.get(key) || 'on'
+  );
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setAudioMode(event.target.value);
+    window.electron.store.set(key, event.target.value);
+  };
+
+  return (
+    <Stack>
+      <Typography variant='button' color='text.secondary' fontSize='13px'>
+        Sounds
+      </Typography>
+      <FormControl sx={{ paddingTop: 1 }}>
+        <PreferencesRadioGroup value={audioMode} onChange={handleChange}>
+          <PreferencesFormControlLabel
+            value='on'
+            control={<Radio />}
+            label='On'
+          />
+          <PreferencesFormControlLabel
+            value='minimal'
+            control={<Radio />}
+            label='Minimal'
+          />
+          <PreferencesFormControlLabel
+            value='off'
+            control={<Radio />}
+            label='Off'
+          />
+        </PreferencesRadioGroup>
+      </FormControl>
+      <Box px={1} pr={2}>
+        <BooleanOption param='audio.muted' title='Mute all sounds' />
+      </Box>
+    </Stack>
+  );
+}
+
 function WindowManagement() {
   const [saveOnlyOnRequest] = useStore<boolean>('interface.saveOnlyOnRequest');
 
@@ -157,6 +202,8 @@ export default function InterfacePane() {
             <Stack width='100%' direction='column'>
               <ThemeMode />
               <Divider sx={{ my: 4 }} />
+              <AudioMode />
+              <Divider sx={{ my: 4 }} />
               <WindowManagement />
             </Stack>
           </Grid>

src/renderer/Preferences/Preferences.tsx

@@ -19,7 +19,7 @@ function MenuItemPreferences(props: {
   name: string;
   title: string;
   selectedPane: string;
-  setSelectedPane: (string) => void;
+  setSelectedPane: (arg0: string) => void;
 }) {
   const { name, title, selectedPane, setSelectedPane } = props;
   const DEFAULT_PANE = 'connection';