feat: initial eq implementation for web

manager-ui/.eslintrc.cjs

@@ -37,5 +37,6 @@ module.exports = {
     react: {
       version: 'detect'
     }
-  }
+  },
+  ignorePatterns: ['wasm/', 'dist/']
 };

manager-ui/src/WebApp.tsx

@@ -1,7 +1,11 @@
 /// <reference types="web-bluetooth" />
 
 import React, { useState } from 'react';
-import { generate_soundcore_service_uuids, getSoundcoreMacPrefixes, WebBLEDevice } from '@wasm/manager_wasm';
+import {
+  generate_soundcore_service_uuids,
+  getSoundcoreMacPrefixes,
+  WebBLEDevice
+} from '@wasm/manager_wasm';
 import { useWebManagerStore } from '@stores/web/useWebManagerStore';
 import { DeviceStateCard } from '@components/DeviceStateCard/deviceStateCard';
 import { SoundModeCard } from '@components/SoundModeCard/soundModeCard';
@@ -10,7 +14,6 @@ import { Box } from '@mui/material';
 import { EqualizerCard } from '@components/EqualizerCard/equalizerCard';
 
 export const WebApp: React.FC = () => {
-
   const state = useWebManagerStore((state) => state.currentState);
   const setDevice = useWebManagerStore((state) => state.setDevice);
   const [isConnecting, setIsConnecting] = useState(false);
@@ -21,7 +24,6 @@ export const WebApp: React.FC = () => {
     const soundcoreServiceUuids = generate_soundcore_service_uuids();
     const companyIdentifiers = getSoundcoreMacPrefixes();
     try {
-
       const device = await navigator.bluetooth.requestDevice({
         filters: companyIdentifiers.map((prefix) => ({
           manufacturerData: [
@@ -56,4 +58,4 @@ export const WebApp: React.FC = () => {
       )}
     </Box>
   );
-};
+};

manager-ui/src/ble/bleDevice.ts

@@ -29,4 +29,4 @@ export class BLEDevice {
   public async setEqualizerPreset(profile: EQProfile): Promise<void> {
     return this.webBLEDevice.setEqualizerPreset(JSON.stringify(profile));
   }
-}
+}

manager-ui/src/components/DeviceStateCard/deviceStateCard.tsx

@@ -7,18 +7,13 @@ import React from 'react';
 export const DeviceStateCard: React.FC<{
   state: SoundcoreDeviceState | null;
 }> = ({ state }) => {
-
   return (
     <>
       <Box sx={{ display: 'block', maxWidth: '300px', margin: 'auto', mb: 0 }}>
         <Paper
           sx={{ display: 'flex', margin: 1.5, justifyContent: 'center', alignItems: 'center' }}
-          elevation={0}
-        >
-          <ProductImageWithBattery
-            model={state?.serial?.model}
-            battery={state?.battery}
-          />
+          elevation={0}>
+          <ProductImageWithBattery model={state?.serial?.model} battery={state?.battery} />
         </Paper>
       </Box>
     </>

manager-ui/src/components/EqualizerCard/equalizerCard.tsx

@@ -12,9 +12,9 @@ export interface EqualizerCardProps {
 }
 
 export const EqualizerCard = ({ state }: EqualizerCardProps): JSX.Element => {
-  const deviceAddrOrDevice: BluetoothAdrr | BLEDevice | null = window.isTauri ?
-    useTauriManagerStore((state) => state.currentViewedDevice) :
-    useWebManagerStore((state) => state.device);
+  const deviceAddrOrDevice: BluetoothAdrr | BLEDevice | null = window.isTauri
+    ? useTauriManagerStore((state) => state.currentViewedDevice)
+    : useWebManagerStore((state) => state.device);
 
   if (!deviceAddrOrDevice) {
     return <></>;
@@ -25,7 +25,7 @@ export const EqualizerCard = ({ state }: EqualizerCardProps): JSX.Element => {
 
   const onCustomEqualizerChange = useCallback((output: number[]) => {
     if (isOnCustom) {
-      const new_eq = output.map(v => v * 10);
+      const new_eq = output.map((v) => v * 10);
       useUpdateCustomEqualizer(deviceAddrOrDevice, new_eq);
     }
   }, []);
@@ -73,12 +73,11 @@ export const EqualizerCard = ({ state }: EqualizerCardProps): JSX.Element => {
     <Paper sx={{ display: 'flex', margin: 3, justifyContent: 'center', alignItems: 'center' }}>
       <Stack sx={{ width: '100%' }}>
         <Select value={state.eqConfiguration.value.profile} onChange={onSelectedEqProfileChange}>
-          {eqProfiles
-            .map((profile) => (
-              <MenuItem key={profile} value={profile}>
-                {profile}
-              </MenuItem>
-            ))}
+          {eqProfiles.map((profile) => (
+            <MenuItem key={profile} value={profile}>
+              {profile}
+            </MenuItem>
+          ))}
         </Select>
         {state.featureSet.equalizerFeatures && (
           <Collapse in={isOnCustom} timeout="auto">

manager-ui/src/components/SoundModeCard/soundModeCard.tsx

@@ -4,7 +4,12 @@ import ANCIcon from '@assets/ambient_icon_anc.png';
 import NormalIcon from '@assets/ambient_icon_off.png';
 import TransIcon from '@assets/ambient_icon_trans.png';
 import React, { useCallback, useEffect, useState } from 'react';
-import { BluetoothAdrr, CurrentSoundMode, SoundcoreDeviceState, SoundMode } from '@generated-types/soundcore-lib';
+import {
+  BluetoothAdrr,
+  CurrentSoundMode,
+  SoundcoreDeviceState,
+  SoundMode
+} from '@generated-types/soundcore-lib';
 import { useUpdateDeviceSoundMode } from '@hooks/useDeviceCommand';
 import { useWebManagerStore } from '@stores/web/useWebManagerStore';
 import { BLEDevice } from '../../ble/bleDevice';
@@ -27,11 +32,17 @@ export const SoundModeCard = ({ state }: SoundModeCardProps): JSX.Element => {
     }
   } = state;
 
-  const deviceAddrOrDevice: BluetoothAdrr | BLEDevice | null = window.isTauri ?
-    useTauriManagerStore((state) => state.currentViewedDevice) :
-    useWebManagerStore((state) => state.device);
+  const deviceAddrOrDevice: BluetoothAdrr | BLEDevice | null = window.isTauri
+    ? useTauriManagerStore((state) => state.currentViewedDevice)
+    : useWebManagerStore((state) => state.device);
 
-  if (!soundModeState || !deviceAddrOrDevice || !ancFeatures || !transparencyFeatures || !hasNormalMode) {
+  if (
+    !soundModeState ||
+    !deviceAddrOrDevice ||
+    !ancFeatures ||
+    !transparencyFeatures ||
+    !hasNormalMode
+  ) {
     return <></>;
   }
 
@@ -151,8 +162,7 @@ export const SoundModeCard = ({ state }: SoundModeCardProps): JSX.Element => {
         minWidth: 275,
         justifyContent: 'center',
         alignItems: 'center'
-      }}
-    >
+      }}>
       <Grid sx={{ paddingLeft: 0, justifyContent: 'center' }}>
         <Grid item>
           <SliderSelectorWrapper>
@@ -166,19 +176,15 @@ export const SoundModeCard = ({ state }: SoundModeCardProps): JSX.Element => {
                 position="left"
                 icon={ANCIcon}
                 setSliderIcon={setIcon}
-                setSliderPosition={() =>
-                  handleCurrentSoundModeChange(CurrentSoundMode.ANC)
-                }
+                setSliderPosition={() => handleCurrentSoundModeChange(CurrentSoundMode.ANC)}
               />
             )}
             {hasNormalMode && (
               <SliderButton
                 position="center"
                 icon={NormalIcon}
                 setSliderIcon={setIcon}
-                setSliderPosition={() =>
-                  handleCurrentSoundModeChange(CurrentSoundMode.Normal)
-                }
+                setSliderPosition={() => handleCurrentSoundModeChange(CurrentSoundMode.Normal)}
               />
             )}
             {transparencyFeatures.length > 0 && (
@@ -234,14 +240,12 @@ const ModeGroupButtons: React.FC<{
           container
           direction="row"
           spacing={1}
-          sx={{ display: 'flex', justifyContent: 'space-evenly', pt: 2 }}
-        >
+          sx={{ display: 'flex', justifyContent: 'space-evenly', pt: 2 }}>
           {buttons.map((button) => (
             <ModeGroupButton
               key={button.value}
               active={selectedValue === button.value}
-              onClick={() => onClick(button.value)}
-            >
+              onClick={() => onClick(button.value)}>
               {button.title}
             </ModeGroupButton>
           ))}
@@ -261,7 +265,7 @@ const ModeGroupButton = styled(Button, {
 export type AllowedSliderPositions = 'left' | 'right' | 'center';
 
 const SliderSelectorWrapper = styled('div')(({ theme }) => ({
-  width: (window.innerWidth - 35) - (window.innerWidth - 35) / 3,
+  width: window.innerWidth - 35 - (window.innerWidth - 35) / 3,
   height: 55,
   display: 'flex',
   flexDirection: 'row',
@@ -285,17 +289,17 @@ const SliderSelector = styled('div', {
   height: 53,
   alignItems: 'center',
   justifyContent: 'center',
-  width: ((window.innerWidth - 35) - (window.innerWidth - 35) / 3) / 3,
+  width: (window.innerWidth - 35 - (window.innerWidth - 35) / 3) / 3,
   elevation: 4,
   shadowColor: 'black',
   shadowRadius: 10,
   shadowOpacity: 0.31,
   transition: 'transform 0.32s cubic-bezier(0.87, 0, 0.13, 1)',
   ...(position == 'left' && {
-    transform: `translateX(-${((window.innerWidth - 35) - (window.innerWidth - 35) / 3) / 3}px)`
+    transform: `translateX(-${(window.innerWidth - 35 - (window.innerWidth - 35) / 3) / 3}px)`
   }),
   ...(position == 'right' && {
-    transform: `translateX(${(((window.innerWidth - 35) - (window.innerWidth - 35) / 3) / 3)}px)`
+    transform: `translateX(${(window.innerWidth - 35 - (window.innerWidth - 35) / 3) / 3}px)`
   }),
   ...(position == 'center' && {
     transform: 'translateX(0)'
@@ -307,7 +311,7 @@ const SliderButtonInner = styled(Button, {
 })<{ position: AllowedSliderPositions }>(({ position }) => ({
   display: 'flex',
   flex: 1,
-  width: ((window.innerWidth - 35) - (window.innerWidth - 35) / 3) / 3,
+  width: (window.innerWidth - 35 - (window.innerWidth - 35) / 3) / 3,
   height: 54,
   justifyContent: 'center',
   alignItems: 'center',
@@ -335,8 +339,7 @@ const SliderButton: React.FC<{
       onClick={() => {
         setSliderPosition && setSliderPosition(position);
         setSliderIcon(icon);
-      }}
-    >
+      }}>
       <Icon sx={{ display: 'flex', width: 32, height: 32, zIndex: 0 }}>
         <img src={icon} height="32" />
       </Icon>

manager-ui/src/hooks/useDeviceCommand.tsx

@@ -18,7 +18,10 @@ export const useUpdateDeviceSoundMode = async (ref: BluetoothAdrr | BLEDevice, m
   }
 };
 
-export const useUpdatePresetEqualizer = async (ref: BluetoothAdrr | BLEDevice, preset: EQProfile) => {
+export const useUpdatePresetEqualizer = async (
+  ref: BluetoothAdrr | BLEDevice,
+  preset: EQProfile
+) => {
   if (window.isTauri && 'address' in ref) {
     return useAsyncBridgeRequest({
       command: 'setEqualizer',
@@ -39,7 +42,10 @@ export const useUpdatePresetEqualizer = async (ref: BluetoothAdrr | BLEDevice, p
  * Set custom EQ values
  * @param values The values should be in range -60..=60
  */
-export const useUpdateCustomEqualizer = async (ref: BluetoothAdrr | BLEDevice, values: number[]) => {
+export const useUpdateCustomEqualizer = async (
+  ref: BluetoothAdrr | BLEDevice,
+  values: number[]
+) => {
   if (window.isTauri) {
     return useAsyncBridgeRequest({
       command: 'setEqualizer',

manager-ui/src/main.tsx

@@ -30,10 +30,9 @@ const queryClient = new QueryClient({
   }
 });
 
-
 if (window.isTauri) {
   // Tauri-specific setup
-  let _ = attachConsole();
+  const _ = attachConsole();
   (async () => {
     const logDir = await appLogDir();
     console.log(
@@ -42,7 +41,6 @@ if (window.isTauri) {
   })();
 }
 
-
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <ThemeProvider theme={darkTheme}>
     <CssBaseline />

manager-ui/src/screens/bluetoothSearch.tsx

@@ -80,17 +80,15 @@ export const BluetoothSearchScreen: React.FC = () => {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
-          }}
-        >
+          }}>
           <Container
             sx={{
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
               flexDirection: 'column',
               gap: '0.5rem'
-            }}
-          >
+            }}>
             <Typography color="text.secondary">Connecting...</Typography>
             <LinearProgress sx={{ width: '100vw', height: '0.15rem' }} />
           </Container>
@@ -113,17 +111,15 @@ export const BluetoothSearchScreen: React.FC = () => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center'
-        }}
-      >
+        }}>
         <Container
           sx={{
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             flexDirection: 'column',
             gap: '0.5rem'
-          }}
-        >
+          }}>
           <Typography color="text.secondary">Select a connected device...</Typography>
           {isScanLoading && <LinearProgress sx={{ width: '100vw', height: '0.15rem' }} />}
           {!isScanLoading && <div style={{ width: '100vw', height: '0.15rem' }}></div>}
@@ -138,8 +134,7 @@ export const BluetoothSearchScreen: React.FC = () => {
           color="primary"
           aria-label="add"
           disabled={!selectedDevice || isConnecting}
-          sx={{ position: 'absolute', bottom: 16, right: 16 }}
-        >
+          sx={{ position: 'absolute', bottom: 16, right: 16 }}>
           Connect
           <ArrowForwardIcon sx={{ ml: 1 }} />
         </Fab>
@@ -150,8 +145,7 @@ export const BluetoothSearchScreen: React.FC = () => {
           color="primary"
           aria-label="add"
           disabled={isScanLoading}
-          sx={{ position: 'absolute', bottom: 16, left: 16 }}
-        >
+          sx={{ position: 'absolute', bottom: 16, left: 16 }}>
           Refresh List
         </Fab>
       </Stack>

manager-ui/src/stores/web/useWebManagerStore.tsx

@@ -14,4 +14,4 @@ export const useWebManagerStore = create<WebManagerStore>((set) => ({
   currentState: null,
   setDevice: (device) => set({ device }),
   setCurrentState: (currentState) => set({ currentState })
-}));
+}));