Skip to content

Commit b83e251

Browse files
kristiankielhofnerkristiankielhofner
authored
Merge pull request #12 from toverainc/feature/performance_optimizations
Refactors to substantially improve performance and efficiency
2 parents 2bc3f20 + 4aeb256 commit b83e251

File tree

15 files changed

+1037
-154
lines changed

15 files changed

+1037
-154
lines changed

‎appcomponents/notifyapp/pagecomponents/AudioSource.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ export default function AudioSource({
6262
}
6363
};
6464

65+
const speakerVolumeValueFormat = (value: number) => {
66+
return `${value}%`;
67+
};
68+
6569
// TTS URL Generation
6670
function handleAudioTtsUrlChange(
6771
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
@@ -145,6 +149,8 @@ export default function AudioSource({
145149
min={0}
146150
max={100}
147151
size="small"
152+
getAriaValueText={speakerVolumeValueFormat}
153+
valueLabelFormat={speakerVolumeValueFormat}
148154
valueLabelDisplay="auto"
149155
/>
150156
<VolumeUp />
@@ -160,7 +166,9 @@ export default function AudioSource({
160166
type: 'number',
161167
'aria-labelledby': 'input-slider',
162168
}}
169+
sx={{ width: 60 }}
163170
/>
171+
%
164172
<HelpTooltip tooltip="If an audio source is defined this sets the volume level for the speaker on the client. Defaults to your configured speaker volume from Configuration General Settings." />
165173
</Stack>
166174
</>

‎components/ClientCard.tsx‎

Lines changed: 68 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import DownloadIcon from '@mui/icons-material/Download';
22
import MoreVertIcon from '@mui/icons-material/MoreVert';
3-
import { CardActions, Stack, Tooltip } from '@mui/material';
3+
import { CardActions, Fade, Stack, Tooltip } from '@mui/material';
44
import Card from '@mui/material/Card';
55
import CardContent from '@mui/material/CardContent';
66
import CardHeader from '@mui/material/CardHeader';
@@ -12,6 +12,7 @@ import Menu from '@mui/material/Menu';
1212
import MenuItem from '@mui/material/MenuItem';
1313
import Image from 'next/image';
1414
import * as React from 'react';
15+
import { ClientImages } from '../misc/clientimages';
1516
import { Client, ReleaseAsset } from '../misc/model';
1617
import {
1718
ApplyConfigDialog,
@@ -112,63 +113,71 @@ export default function ClientCard({
112113
const [openOtaDialog, setOpenOtaDialog] = React.useState<boolean>(false);
113114

114115
return (
115-
<Card sx={{ maxWidth: 500, minHeight: 230, boxShadow: 4 }}>
116-
<CardHeader
117-
avatar={
118-
<Image
119-
src={'static/' + client.platform + '.png'}
120-
width={50}
121-
height={50}
122-
alt={client.platform}
123-
loading="eager"></Image>
124-
}
125-
action={<ClientMenu client={client}></ClientMenu>}
126-
title={client.label || client.hostname}
127-
subheader={client.mac_addr}
128-
sx={{ paddingBottom: 0 }}
129-
/>
130-
<CardContent sx={{ paddingLeft: 1, paddingBottom: 0, minWidth: 'max-content' }}>
131-
<List dense={true}>
132-
<ListItem sx={{ paddingTop: 0, paddingBottom: 0, maxWidth: 300 }}>
133-
<ListItemText sx={{ margin: 0 }} primary={'Hostname: ' + client.hostname} />
134-
</ListItem>
135-
<ListItem sx={{ paddingTop: 0, paddingBottom: 0, maxWidth: 300 }}>
136-
<ListItemText sx={{ margin: 0 }} primary={'IP Address: ' + client.ip} />
137-
</ListItem>
138-
<ListItem sx={{ paddingTop: 0, paddingBottom: 0, maxWidth: 300 }}>
139-
<ListItemText sx={{ margin: 0 }} primary={'Platform: ' + client.platform} />
140-
</ListItem>
141-
<ListItem sx={{ paddingTop: 0, paddingBottom: 0, maxWidth: 300 }}>
142-
<ListItemText sx={{ margin: 0 }} primary={'Version: ' + client.version} />
143-
</ListItem>
144-
</List>
145-
</CardContent>
146-
<CardActions sx={{ paddingLeft: 1, paddingTop: 0 }}>
147-
{latestReleaseAsset !== undefined &&
148-
latestReleaseName !== undefined &&
149-
latestReleaseName !== client.version && (
150-
<Stack spacing={2} sx={{ padding: 0 }}>
151-
<Tooltip
152-
style={{ boxShadow: 'none' }}
153-
title={'Upgrade to ' + latestReleaseName}
154-
enterTouchDelay={0}>
155-
<IconButton
156-
edge="end"
157-
aria-label="delete"
158-
onClick={() => {
159-
setOpenOtaDialog(true);
160-
}}>
161-
<DownloadIcon />
162-
</IconButton>
163-
</Tooltip>
164-
<OtaDialog
165-
client={client}
166-
open={openOtaDialog}
167-
selectedRelease={latestReleaseAsset}
168-
onClose={() => setOpenOtaDialog(false)}></OtaDialog>
169-
</Stack>
170-
)}
171-
</CardActions>
172-
</Card>
116+
<Fade in={true} timeout={1000}>
117+
<Card
118+
sx={{
119+
maxWidth: 500,
120+
minHeight: 230,
121+
boxShadow: 4,
122+
}}>
123+
<CardHeader
124+
avatar={
125+
<Image
126+
src={ClientImages[client.platform]}
127+
width={50}
128+
height={50}
129+
alt={client.platform}
130+
priority={true}
131+
placeholder="blur"></Image>
132+
}
133+
action={<ClientMenu client={client}></ClientMenu>}
134+
title={client.label || client.hostname}
135+
subheader={client.mac_addr}
136+
sx={{ paddingBottom: 0 }}
137+
/>
138+
<CardContent sx={{ paddingLeft: 1, paddingBottom: 0, minWidth: 'max-content' }}>
139+
<List dense={true}>
140+
<ListItem sx={{ paddingTop: 0, paddingBottom: 0, maxWidth: 300 }}>
141+
<ListItemText sx={{ margin: 0 }} primary={'Hostname: ' + client.hostname} />
142+
</ListItem>
143+
<ListItem sx={{ paddingTop: 0, paddingBottom: 0, maxWidth: 300 }}>
144+
<ListItemText sx={{ margin: 0 }} primary={'IP Address: ' + client.ip} />
145+
</ListItem>
146+
<ListItem sx={{ paddingTop: 0, paddingBottom: 0, maxWidth: 300 }}>
147+
<ListItemText sx={{ margin: 0 }} primary={'Platform: ' + client.platform} />
148+
</ListItem>
149+
<ListItem sx={{ paddingTop: 0, paddingBottom: 0, maxWidth: 300 }}>
150+
<ListItemText sx={{ margin: 0 }} primary={'Version: ' + client.version} />
151+
</ListItem>
152+
</List>
153+
</CardContent>
154+
<CardActions sx={{ paddingLeft: 1, paddingTop: 0 }}>
155+
{latestReleaseAsset !== undefined &&
156+
latestReleaseName !== undefined &&
157+
latestReleaseName !== client.version && (
158+
<Stack spacing={2} sx={{ padding: 0 }}>
159+
<Tooltip
160+
style={{ boxShadow: 'none' }}
161+
title={'Upgrade to ' + latestReleaseName}
162+
enterTouchDelay={0}>
163+
<IconButton
164+
edge="end"
165+
aria-label="delete"
166+
onClick={() => {
167+
setOpenOtaDialog(true);
168+
}}>
169+
<DownloadIcon />
170+
</IconButton>
171+
</Tooltip>
172+
<OtaDialog
173+
client={client}
174+
open={openOtaDialog}
175+
selectedRelease={latestReleaseAsset}
176+
onClose={() => setOpenOtaDialog(false)}></OtaDialog>
177+
</Stack>
178+
)}
179+
</CardActions>
180+
</Card>
181+
</Fade>
173182
);
174183
}

‎misc/clientimages.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import ESP32_S3_BOX from '../public/static/ESP32-S3-BOX.png';
2+
import ESP32_S3_BOX_3 from '../public/static/ESP32-S3-BOX-3.png';
3+
import ESP32_S3_BOX_LITE from '../public/static/ESP32-S3-BOX-LITE.png';
4+
import M5STACK_CORES3 from '../public/static/M5STACK-CORES3.png';
5+
import { StaticImageData } from 'next/image';
6+
7+
export const ClientImages: { [key: string]: StaticImageData } = {
8+
'ESP32-S3-BOX': ESP32_S3_BOX,
9+
'ESP32-S3-BOX-3': ESP32_S3_BOX_3,
10+
'ESP32-S3-BOX-LITE': ESP32_S3_BOX_LITE,
11+
'M5STACK-CORES3': M5STACK_CORES3,
12+
};

‎misc/model.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,3 +128,9 @@ export interface FormErrorStates {
128128
MqttHostError: FormErrorState;
129129
MqttPortError: FormErrorState;
130130
}
131+
132+
export interface OnboardingState {
133+
isNvsComplete: boolean;
134+
isGeneralConfigComplete: boolean;
135+
isOnboardingComplete: boolean;
136+
}

0 commit comments

Comments
 (0)