diff --git a/manager-ui/.eslintrc.cjs b/manager-ui/.eslintrc.cjs index 9edfb7b..2254a5a 100644 --- a/manager-ui/.eslintrc.cjs +++ b/manager-ui/.eslintrc.cjs @@ -37,5 +37,6 @@ module.exports = { react: { version: 'detect' } - } + }, + ignorePatterns: ['wasm/', 'dist/'] }; diff --git a/manager-ui/src/WebApp.tsx b/manager-ui/src/WebApp.tsx index 24546a5..b506871 100644 --- a/manager-ui/src/WebApp.tsx +++ b/manager-ui/src/WebApp.tsx @@ -1,7 +1,11 @@ /// 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 = () => { )} ); -}; \ No newline at end of file +}; diff --git a/manager-ui/src/ble/bleDevice.ts b/manager-ui/src/ble/bleDevice.ts index e4184d4..ef629e3 100644 --- a/manager-ui/src/ble/bleDevice.ts +++ b/manager-ui/src/ble/bleDevice.ts @@ -29,4 +29,4 @@ export class BLEDevice { public async setEqualizerPreset(profile: EQProfile): Promise { return this.webBLEDevice.setEqualizerPreset(JSON.stringify(profile)); } -} \ No newline at end of file +} diff --git a/manager-ui/src/components/DeviceStateCard/deviceStateCard.tsx b/manager-ui/src/components/DeviceStateCard/deviceStateCard.tsx index d93300e..485d850 100644 --- a/manager-ui/src/components/DeviceStateCard/deviceStateCard.tsx +++ b/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 ( <> - + elevation={0}> + diff --git a/manager-ui/src/components/EqualizerCard/equalizerCard.tsx b/manager-ui/src/components/EqualizerCard/equalizerCard.tsx index dce960d..717e4d0 100644 --- a/manager-ui/src/components/EqualizerCard/equalizerCard.tsx +++ b/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 => { {state.featureSet.equalizerFeatures && ( diff --git a/manager-ui/src/components/SoundModeCard/soundModeCard.tsx b/manager-ui/src/components/SoundModeCard/soundModeCard.tsx index 0e06fc4..895bdef 100644 --- a/manager-ui/src/components/SoundModeCard/soundModeCard.tsx +++ b/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' - }} - > + }}> @@ -166,9 +176,7 @@ export const SoundModeCard = ({ state }: SoundModeCardProps): JSX.Element => { position="left" icon={ANCIcon} setSliderIcon={setIcon} - setSliderPosition={() => - handleCurrentSoundModeChange(CurrentSoundMode.ANC) - } + setSliderPosition={() => handleCurrentSoundModeChange(CurrentSoundMode.ANC)} /> )} {hasNormalMode && ( @@ -176,9 +184,7 @@ export const SoundModeCard = ({ state }: SoundModeCardProps): JSX.Element => { 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) => ( onClick(button.value)} - > + onClick={() => onClick(button.value)}> {button.title} ))} @@ -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); - }} - > + }}> diff --git a/manager-ui/src/hooks/useDeviceCommand.tsx b/manager-ui/src/hooks/useDeviceCommand.tsx index 466ea27..60644ea 100644 --- a/manager-ui/src/hooks/useDeviceCommand.tsx +++ b/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', diff --git a/manager-ui/src/main.tsx b/manager-ui/src/main.tsx index 32b91f3..969f9e2 100644 --- a/manager-ui/src/main.tsx +++ b/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( diff --git a/manager-ui/src/screens/bluetoothSearch.tsx b/manager-ui/src/screens/bluetoothSearch.tsx index dd35ab0..24d432c 100644 --- a/manager-ui/src/screens/bluetoothSearch.tsx +++ b/manager-ui/src/screens/bluetoothSearch.tsx @@ -80,8 +80,7 @@ export const BluetoothSearchScreen: React.FC = () => { display: 'flex', alignItems: 'center', justifyContent: 'center' - }} - > + }}> { justifyContent: 'center', flexDirection: 'column', gap: '0.5rem' - }} - > + }}> Connecting... @@ -113,8 +111,7 @@ export const BluetoothSearchScreen: React.FC = () => { display: 'flex', alignItems: 'center', justifyContent: 'center' - }} - > + }}> { justifyContent: 'center', flexDirection: 'column', gap: '0.5rem' - }} - > + }}> Select a connected device... {isScanLoading && } {!isScanLoading &&
} @@ -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 @@ -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
diff --git a/manager-ui/src/stores/web/useWebManagerStore.tsx b/manager-ui/src/stores/web/useWebManagerStore.tsx index e965f50..d5c5289 100644 --- a/manager-ui/src/stores/web/useWebManagerStore.tsx +++ b/manager-ui/src/stores/web/useWebManagerStore.tsx @@ -14,4 +14,4 @@ export const useWebManagerStore = create((set) => ({ currentState: null, setDevice: (device) => set({ device }), setCurrentState: (currentState) => set({ currentState }) -})); \ No newline at end of file +}));