Skip to content

Commit

Permalink
tmp
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmallios
gmallios committed Jul 19, 2024
1 parent e4d0d1e commit 739e22c
Show file tree
Hide file tree
Showing 15 changed files with 3,987 additions and 156 deletions.
5 changes: 5 additions & 0 deletions manager-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,13 @@
"@fontsource/roboto": "^4.5.8",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.12.0",
"@nextui-org/react": "^2.4.2",
"@tanstack/react-query": "^4.20.4",
"@tanstack/react-query-devtools": "^4.20.4",
"@tauri-apps/api": "^1.5.0",
"chart.js": "~3.9.1",
"chartjs-plugin-dragdata": "^2.2.4",
"framer-motion": "^11.3.2",
"react": "^18.2.0",
"react-chartjs-2": "^4.3.1",
"react-dom": "^18.2.0",
Expand All @@ -48,12 +50,15 @@
"@typescript-eslint/parser": "^7.1.0",
"@vitejs/plugin-react": "^4.0.0",
"@vitejs/plugin-react-swc": "^3.7.0",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.33.2",
"jsdom": "^24.0.0",
"postcss": "^8.4.39",
"prettier": "^3.2.5",
"tailwindcss": "^3.4.5",
"typescript": "^5.0.4",
"vite": "^5.1.5",
"vite-plugin-top-level-await": "^1.4.1",
Expand Down
6 changes: 6 additions & 0 deletions manager-ui/postcss.config.cjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};
72 changes: 49 additions & 23 deletions manager-ui/src/WebApp.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,28 @@
/// <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 } from '@wasm/manager_wasm';
import { useWebManagerStore } from '@stores/web/useWebManagerStore';
import { DeviceStateCard } from '@components/DeviceStateCard/deviceStateCard';
import { SoundModeCard } from '@components/SoundModeCard/soundModeCard';
import { BLEDevice } from './ble/bleDevice';
import { BLEDeviceFactory } from './ble/bleDevice';
import { Box } from '@mui/material';
import { EqualizerCard } from '@components/EqualizerCard/equalizerCard';
import { Button, Navbar, NavbarBrand, NavbarContent, NavbarItem, Spinner } from '@nextui-org/react';

enum ConnectionDialogStatus {
DIALOG_OPEN,
CONNECTING,
CLOSED
}

export const WebApp: React.FC = () => {
const state = useWebManagerStore((state) => state.currentState);
const setDevice = useWebManagerStore((state) => state.setDevice);
const [isConnecting, setIsConnecting] = useState(false);
const { state, device, setDevice } = useWebManagerStore((state) => ({
state: state.currentState,
device: state.device,
setDevice: state.setDevice
}));
const [isConnecting, setIsConnecting] = useState(ConnectionDialogStatus.CLOSED);
const scan = async () => {
setIsConnecting(ConnectionDialogStatus.DIALOG_OPEN);
// The serviceUuids must contain the target service for it to be
// discoverable and connectable. The companyIdentifiers are used
// to filter the devices in the scan dialog.
Expand All @@ -30,28 +39,45 @@ export const WebApp: React.FC = () => {
})),
optionalServices: soundcoreServiceUuids
});
setIsConnecting(true);
setDevice(new BLEDevice(await WebBLEDevice.new(device)));
setIsConnecting(false);
setIsConnecting(ConnectionDialogStatus.CONNECTING);
setDevice(await BLEDeviceFactory(device));
setIsConnecting(ConnectionDialogStatus.CLOSED);
} catch (e) {
setIsConnecting(false);
// TODO: Inform the user in some way (toast?)
setIsConnecting(ConnectionDialogStatus.CLOSED);
}
};

return (
<Box>
{state ? (
<>
<DeviceStateCard state={state} />
<SoundModeCard state={state} />
<EqualizerCard state={state} />
</>
) : (
<>
<button onClick={scan}>Connect</button>
{isConnecting && <a>Connecting...</a>}
</>
)}
<Navbar>
<NavbarBrand>Soundcore Manager</NavbarBrand>
<NavbarContent justify="end">
<NavbarItem>
<Button color="primary" href="#" variant="flat" onClick={scan}>
Connect to a device
</Button>
</NavbarItem>
</NavbarContent>
</Navbar>
<div className={'min-h-screen flex flex-col items-center justify-start p-4'}>
{state ? (
<>
<DeviceStateCard state={state} />
{/*<SoundModeCard state={state} />*/}
{/*<EqualizerCard state={state} />*/}
</>
) : (
<>
{isConnecting != ConnectionDialogStatus.CLOSED &&
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-opacity-75 backdrop-blur-sm transition-all">
{isConnecting === ConnectionDialogStatus.CONNECTING && <Spinner size={'lg'} label={'Connecting...'} />}
</div>
}
</>
)}
</div>
</Box>
);
};
1 change: 1 addition & 0 deletions manager-ui/src/assets/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@ declare module '*.svg';
declare module '*.gif';
declare module '*.jpeg';
declare module '*.webp';
declare module '*.json'
67 changes: 67 additions & 0 deletions manager-ui/src/assets/productNames.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
{
"A3004": "soundcore Q20i",
"A3025": "Soundcore Life Q20+",
"A3027": "Soundcore Life Q35",
"A3028": "Soundcore Life Q30",
"A3029": "Soundcore Life Tune",
"A3030": "Soundcore Life Tune Pro",
"A3033": "Soundcore Life 2 Neo",
"A3040": "Soundcore Space Q45",
"A3116": "Soundcore Motion+",
"A3117": "Soundcore 3",
"A3118": "Soundcore Motion Boom",
"A3119": "Soundcore Mini 3",
"A3123": "Soundcore Icon+",
"A3125": "Soundcore Select 2",
"A3126": "Soundcore Select Pro",
"A3127": "Soundcore Mini 3 Pro",
"A3129": "Soundcore Motion Boom Plus",
"A3130": "soundcore Motion X600",
"A3145": "Anker Soundcore Boost",
"A3161": "Soundcore Flare",
"A3162": "Soundcore Flare +",
"A3163": "Soundcore Flare S+",
"A3165": "Soundcore Flare 2",
"A3167": "Soundcore Flare Mini",
"A3201": "Soundcore Life NC",
"A3300": "Soundcore Wakey",
"A3301": "Anker PowerConf",
"A3302": "Anker PowerConf S3",
"A3372": "Soundcore Infini Pro",
"A3390": "Soundcore Rave mini",
"A3391": "Soundcore Rave",
"A3392": "Soundcore Mega",
"A3393": "Soundcore Trance",
"A3395": "Soundcore Rave Neo",
"A3396": "Soundcore Trance Go",
"A3398": "Soundcore R30",
"A3399": "Soundcore Rave Party 2",
"A3600": "Soundcore Frames",
"A3850": "Soundcore VR P10",
"A3909": "Soundcore Liberty 2 Pro",
"A3910": "Soundcore Liberty Air 2",
"A3913": "Soundcore Liberty 2",
"A3926": "Soundcore Liberty Neo 2",
"A3927": "Soundcore Life A1",
"A3930": "Soundcore Liberty 2 Pro+",
"A3931": "Soundcore Life Dot 2 NC",
"A3933": "Soundcore Life Note 3",
"A3935": "Soundcore Life A2 NC",
"A3936": "Soundcore Space A40",
"A3939": "Soundcore Life P3",
"A3943": "soundcore Life Note C",
"A3944": "soundcore Life P2 Mini",
"A3945": "Soundcore Life Note 3S",
"A3947": "soundcore Liberty 4 NC",
"A3948": "soundcore A20i",
"A3949": "soundcore P20i",
"A3951": "Soundcore Liberty Air 2 Pro",
"A3952": "Soundcore Liberty 3 Pro",
"A3953": "Soundcore Liberty 4",
"A3961": "Soundcore Sport X10",
"A3982": "Soundcore Life Dot 3i",
"A3983": "Soundcore Life Note 3i",
"A3992": "Soundcore Life A3i",
"A3993": "Soundcore Life P3i",
"A6610": "Soundcore Sleep A10"
}
10 changes: 8 additions & 2 deletions manager-ui/src/ble/bleDevice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import { useWebManagerStore } from '@stores/web/useWebManagerStore';

export class BLEDevice {
private readonly webBLEDevice: WebBLEDevice;
private readonly device: BluetoothDevice;

constructor(webBLEDevice: WebBLEDevice) {
constructor(webBLEDevice: WebBLEDevice, device: BluetoothDevice) {
this.webBLEDevice = webBLEDevice;
this.device = device;

void webBLEDevice.setOnStateChange((state: SoundcoreDeviceState) => {
console.log('onStateChange');
useWebManagerStore.getState().setCurrentState(state);
});

Expand All @@ -30,3 +31,8 @@ export class BLEDevice {
return this.webBLEDevice.setEqualizerPreset(JSON.stringify(profile));
}
}

export const BLEDeviceFactory = async (device: BluetoothDevice): Promise<BLEDevice> => {
const webBleDevice = await WebBLEDevice.new(device);
return new BLEDevice(webBleDevice, device);
};
25 changes: 13 additions & 12 deletions manager-ui/src/components/DeviceStateCard/batteryIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import BatteryCharging80Icon from '@mui/icons-material/BatteryCharging80';
import BatteryFullIcon from '@mui/icons-material/BatteryFull';
import BatteryChargingFullIcon from '@mui/icons-material/BatteryChargingFull';
import BatteryUnknownIcon from '@mui/icons-material/BatteryUnknown';
import { Grid, Typography } from '@mui/material';
import { SingleBattery } from '@generated-types/soundcore-lib';

export const BatteryIcon: React.FC<{ battery: SingleBattery }> = ({ battery }) => {
Expand All @@ -20,34 +19,36 @@ export const BatteryIcon: React.FC<{ battery: SingleBattery }> = ({ battery }) =
// Reported battery level ranges between 0-5
switch (level) {
case 0:
icon = !isCharging ? <BatteryAlertIcon /> : <BatteryCharging20Icon />;
icon = !isCharging ? <BatteryAlertIcon rotate={90} /> : <BatteryCharging20Icon />;
break;
case 1:
icon = !isCharging ? <Battery20Icon /> : <BatteryCharging20Icon />;
icon = !isCharging ? <Battery20Icon rotate={90} /> : <BatteryCharging20Icon />;
break;
case 2:
icon = !isCharging ? <Battery30Icon /> : <BatteryCharging30Icon />;
icon = !isCharging ? <Battery30Icon rotate={90} /> : <BatteryCharging30Icon />;
break;
case 3:
icon = !isCharging ? <Battery60Icon /> : <BatteryCharging60Icon />;
icon = !isCharging ? <Battery60Icon rotate={90} /> : <BatteryCharging60Icon />;
break;
case 4:
icon = !isCharging ? <Battery80Icon /> : <BatteryCharging80Icon />;
icon = !isCharging ? <Battery80Icon rotate={90} /> : <BatteryCharging80Icon />;
break;
case 5:
icon = !isCharging ? <BatteryFullIcon /> : <BatteryChargingFullIcon />;
icon = !isCharging ? <BatteryFullIcon rotate={90} /> : <BatteryChargingFullIcon />;
break;
default:
icon = <BatteryUnknownIcon />;
break;
}

return (
<Grid item>
{icon}
<Typography variant="body2" color="text.secondary">
<div className={'flex items-center gap-1'}>
<p className={'text-small text-foreground/80'}>
{level * 2 * 10}%
</Typography>
</Grid>
</p>
<div className={'rotate-90'}>
{icon}
</div>
</div>
);
};
Loading

0 comments on commit 739e22c

Please sign in to comment.