Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style Touchups #113

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

Style Touchups #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f31dd44
Start making surfaces larger
ConnorsApps Dec 25, 2024
8d3f050
wip
ConnorsApps Dec 26, 2024
a8433fe
More stuff for phone
ConnorsApps Dec 26, 2024
ee44d51
resize song titles
ConnorsApps Dec 29, 2024
3e88b2b
resize
ConnorsApps Dec 29, 2024
b07abde
use sx
ConnorsApps Dec 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
#VITE_APP_SNAPSERVER_HOST = localhost:1780
#VITE_APP_SNAPSERVER_HOST=localhost:1780
#VITE_APP_TITLE="Snapcast"
VITE_APP_VERSION=$npm_package_version
VITE_APP_NAME=$npm_package_name
64 changes: 40 additions & 24 deletions src/components/Client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,32 +86,42 @@ export default function Client(props: ClientProps) {
}

const menuitems = [];
menuitems.push(<MenuItem key='Menu-Details' onClick={() => { handleDetailsClicked() }}>Details</MenuItem>);
menuitems.push(
<MenuItem
key='Menu-Details'
onClick={() => handleDetailsClicked()}
sx={{ minWidth: "12rem", fontSize: "large" }}
>
Details
</MenuItem>
);
if (!props.client.connected)
menuitems.push(<MenuItem key='Menu-Delete' onClick={() => { props.onDelete(); setAnchorEl(null); setOpen(false); }}>Delete</MenuItem>);
menuitems.push(
<MenuItem
key='Menu-Delete'
onClick={() => {
props.onDelete();
setAnchorEl(null);
setOpen(false);
}}
sx={{ minWidth: "12rem", fontSize: "large" }}
>
Delete
</MenuItem>
);

// console.debug("Render Client " + props.client.host.name + ", id: " + props.client.id);

return (
<Box sx={{ opacity: props.client.connected ? 1.0 : 0.5 }} >
<Grid container spacing={2} justifyContent="center" alignItems="center" >
<Grid item xs={true}>
<Stack spacing={-1} direction="column">
{/* item style={{ flexGrow: "1" }}> */}
<Typography variant="subtitle1" align='left' gutterBottom>
{props.client.config.name === "" ? props.client.host.name : props.client.config.name}
</Typography>
<Stack spacing={2} direction="row" alignItems="center">
<IconButton aria-label="Mute" onClick={() => { handleMuteClicked() }}>
{props.client.config.volume.muted ? <VolumeOffIcon /> : <VolumeUpIcon />}
</IconButton>
<Slider aria-label="Volume" color="secondary" min={0} max={100} size="small" key={"slider-" + props.client.id} value={props.client.config.volume.percent} onChange={(_, value) => { handleVolumeChange(value as number) }} />
</Stack>
</Stack>
</Grid>
<Grid item>
<Box margin={1} sx={{ opacity: props.client.connected ? 1.0 : 0.5 }} >
<Stack spacing={1} direction="column">
{/* item style={{ flexGrow: "1" }}> */}
<Stack spacing={2} direction="row" alignItems="center" justifyContent="space-between">
<Typography variant="subtitle1" align='left' gutterBottom>
{props.client.config.name === "" ? props.client.host.name : props.client.config.name}
</Typography>
<IconButton aria-label="Options" onClick={(event) => { handleOptionsClicked(event); }}>
<MoreVertIcon />
<MoreVertIcon fontSize="large" />
</IconButton>
<Menu
id="basic-menu"
Expand All @@ -124,8 +134,14 @@ export default function Client(props: ClientProps) {
>
{menuitems}
</Menu>
</Grid>
</Grid>
</Stack>
<Stack spacing={2} direction="row" alignItems="center">
<IconButton sx={{ p:0 }} aria-label="Mute" onClick={() => { handleMuteClicked() }}>
{props.client.config.volume.muted ? <VolumeOffIcon fontSize="large" /> : <VolumeUpIcon fontSize="large" />}
</IconButton>
<Slider aria-label="Volume" color="secondary" min={0} max={100} size="medium" key={"slider-" + props.client.id} value={props.client.config.volume.percent} onChange={(_, value) => { handleVolumeChange(value as number) }} />
</Stack>
</Stack>

<Dialog open={detailsOpen} onClose={() => { handleDetailsClose(false) }}>
<DialogTitle>Client settings</DialogTitle>
Expand Down Expand Up @@ -188,8 +204,8 @@ export default function Client(props: ClientProps) {
/>
</DialogContent>
<DialogActions>
<Button onClick={() => { handleDetailsClose(false) }}>Cancel</Button>
<Button onClick={() => { handleDetailsClose(true) }}>OK</Button>
<Button sx={{ minWidth: "8rem" }} onClick={() => { handleDetailsClose(false) }}>Cancel</Button>
<Button sx={{ minWidth: "7rem" }} onClick={() => { handleDetailsClose(true) }}>OK</Button>
</DialogActions>
</Dialog>
</Box>
Expand Down
61 changes: 47 additions & 14 deletions src/components/Group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,16 +245,21 @@ export default function Group(props: GroupProps) {
flexGrow: 1
}}>
{/* <Stack spacing={2} direction="column" alignItems="center"> */}
<Stack spacing={0} direction="column" alignItems="left">
<Stack spacing={1} direction="column" alignItems="left">
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Stack direction="row" justifyContent="center" alignItems="center" >
<Stack
sx={{ gap: 1 }}
direction="row"
justifyContent="center"
alignItems="center"
>
<IconButton aria-label="Options" onClick={(event) => { handleSettingsClicked(event); }}>
<SettingsIcon />
<SettingsIcon fontSize="large" />
</IconButton>

<FormControl variant="standard">
Expand All @@ -263,13 +268,22 @@ export default function Group(props: GroupProps) {
value={props.group.stream_id}
label="Active stream"
inputProps={{ 'aria-label': 'Active stream' }}
sx={{ minWidth: "12rem" }}
onChange={(event) => {
const stream: string = event.target.value;
setStreamId(stream);
props.snapcontrol.setStream(props.group.id, stream);
}}
>
{props.server.streams.map(stream => <MenuItem key={stream.id} value={stream.id}>{stream.id}</MenuItem>)}
{props.server.streams.map(stream => (
<MenuItem
key={stream.id}
value={stream.id}
sx={{ minWidth: "12rem", fontSize: "large", p: 2 }}
>
{stream.id}
</MenuItem>
))}
</Select>
</FormControl>
</Stack>
Expand Down Expand Up @@ -298,21 +312,40 @@ export default function Group(props: GroupProps) {
alt={title + " cover"}
/>
<Stack spacing={0} direction="column" justifyContent="center" sx={{ flexGrow: 1, overflow: 'hidden' }}>
<Typography noWrap variant="subtitle1" align="left">
<Typography
noWrap
sx={{
// Resize for mobile to fit long song titles
'@media (max-width:600px)': {
fontSize: '4vw',
},
}}
variant="subtitle1"
align="left"
>
{title}
</Typography>
<Typography noWrap variant="body1" align="left">
<Typography
noWrap
sx={{
'@media (max-width:600px)': {
fontSize: '3.5vw',
},
}}
variant="body1"
align="left"
>
{artist}
</Typography>
</Stack>
</Stack>
}
{groupClients.length > 1 &&
<Stack spacing={2} direction="row" alignItems="center">
<Stack spacing={2} py={1} direction="row" alignItems="center">
<IconButton aria-label="Mute" onClick={() => { handleMuteClicked() }}>
{props.group.muted ? <VolumeOffIcon /> : <VolumeUpIcon />}
{props.group.muted ? <VolumeOffIcon fontSize="large" /> : <VolumeUpIcon fontSize="large" />}
</IconButton>
<Slider aria-label="Volume" color="secondary" min={0} max={100} size="small" key={"slider-" + props.group.id} value={volume} onChange={(_, value) => { handleVolumeChange(value as number) }} onChangeCommitted={(_, value) => { handleVolumeChangeCommitted(value as number) }} />
<Slider aria-label="Volume" color="secondary" min={0} max={100} size="medium" key={"slider-" + props.group.id} value={volume} onChange={(_, value) => { handleVolumeChange(value as number) }} onChangeCommitted={(_, value) => { handleVolumeChangeCommitted(value as number) }} />
</Stack>
}
{groupClients.length === 1 &&
Expand All @@ -328,25 +361,25 @@ export default function Group(props: GroupProps) {
</Card >

<Dialog fullWidth open={settingsOpen} onClose={() => { handleSettingsClose(false) }}>
<DialogTitle>Group settings</DialogTitle>
<DialogTitle>Group Settings</DialogTitle>
<DialogContent>
<Divider textAlign="left">Stream</Divider>
<TextField
// label="Stream"
margin="dense" id="stream" select fullWidth variant="standard"
id="stream" select fullWidth variant="standard"
value={streamId}
onChange={(event) => { console.log('SetStream: ' + event.target.value); setStreamId(event.target.value) }}
>
{props.server.streams.map(stream => <MenuItem key={stream.id} value={stream.id}>{stream.id}</MenuItem>)}
{props.server.streams.map(stream => <MenuItem key={stream.id} value={stream.id} sx={{ fontSize: "large", p: 2 }}>{stream.id}</MenuItem>)}
</TextField>
<Divider textAlign="left">Clients</Divider>
<FormGroup>
{clients.map(client => <FormControlLabel control={<Checkbox checked={client.inGroup} key={"cb-" + client.client.id} onChange={(e: React.ChangeEvent<HTMLInputElement>) => { handleGroupClientChange(client.client, e.target.checked) }} />} label={client.client.getName()} key={"label-" + client.client.id} />)}
</FormGroup>
</DialogContent>
<DialogActions>
<Button onClick={() => { handleSettingsClose(false) }}>Cancel</Button>
<Button onClick={() => { handleSettingsClose(true) }}>OK</Button>
<Button sx={{ minWidth: "8rem" }} onClick={() => { handleSettingsClose(false) }}>Cancel</Button>
<Button sx={{ minWidth: "7rem" }} onClick={() => { handleSettingsClose(true) }}>OK</Button>
</DialogActions>
</Dialog>
{snackbar()}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ export default function SettingsDialog(props: { open: boolean, onClose: (_apply:
<FormControlLabel control={<Checkbox checked={showOffline} onChange={(_event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => setShowOffline(checked)} />} label="Show offline clients" />
</DialogContent>
<DialogActions>
<Button onClick={() => { handleClose(false) }}>Cancel</Button>
<Button onClick={() => { handleClose(true) }}>OK</Button>
<Button sx={{ minWidth: "8rem" }} onClick={() => { handleClose(false) }}>Cancel</Button>
<Button sx={{ minWidth: "7rem" }} onClick={() => { handleClose(true) }}>OK</Button>
</DialogActions>
</Dialog>
</div>
Expand Down
90 changes: 48 additions & 42 deletions src/components/SnapWeb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,22 @@ import useMediaQuery from '@mui/material/useMediaQuery';
import { Theme, config } from "../config";
import { SnapControl, Snapcast } from '../snapcontrol';
import { SnapStream } from '../snapstream';
import { AppBar, Box, Drawer, List, ListItem, ListItemButton, ListItemText, Toolbar, Typography, IconButton, Snackbar, Alert, Button } from '@mui/material';
import { AppBar, Box, Drawer, List, ListItem, ListItemButton, ListItemText, Toolbar, Typography, IconButton, Snackbar, Alert, Button, Divider } from '@mui/material';
import { PlayArrow as PlayArrowIcon, Stop as StopIcon, Menu as MenuIcon } from '@mui/icons-material';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { createTheme, CssVarsThemeOptions, ThemeOptions, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import silence from '../assets/10-seconds-of-silence.mp3';
import snapcast512 from '../assets/snapcast-512.png';

const appTitle = import.meta.env.VITE_APP_TITLE || "Snapcast";

const lightTheme = createTheme({
palette: {
primary: {
light: '#757ce8',
main: '#607d8b',
dark: '#002884',
contrastText: '#fff',
},
secondary: {
light: '#ff7961',
main: '#f44336',
dark: '#ba000d',
contrastText: '#000',
},
},
type CreateThemeOptions = Omit<ThemeOptions, 'components'> & Pick<CssVarsThemeOptions, 'defaultColorScheme' | 'colorSchemes' | 'components'> & {
cssVariables?: boolean | Pick<CssVarsThemeOptions, 'colorSchemeSelector' | 'rootSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar'>;}

const theme: CreateThemeOptions = {
typography: {
subtitle1: {
fontSize: 17,
fontSize: 20,
},
body1: {
fontWeight: 500,
Expand All @@ -46,13 +36,28 @@ const lightTheme = createTheme({
{
spellCheck: false
}
},
MuiButton: {
defaultProps: {
variant: "contained",
}
},
MuiSelect: {
defaultProps: {
slotProps: { input: { sx: { py: 1 } } }
}
},
MuiMenuItem: {
defaultProps: {
sx: { fontSize:"large", py: 2 }
}
}
}
});
};

const darkTheme = createTheme({
const lightTheme = createTheme({
...theme,
palette: {
mode: 'dark',
primary: {
light: '#757ce8',
main: '#607d8b',
Expand All @@ -66,25 +71,25 @@ const darkTheme = createTheme({
contrastText: '#000',
},
},
typography: {
subtitle1: {
fontSize: 17,
});

const darkTheme = createTheme({
...theme,
palette: {
mode: 'dark',
primary: {
light: '#757ce8',
main: '#607d8b',
dark: '#002884',
contrastText: '#fff',
},
body1: {
fontWeight: 500,
secondary: {
light: '#ff7961',
main: '#f44336',
dark: '#ba000d',
contrastText: '#000',
},
h5: {
fontWeight: 300,
}
},
components: {
MuiTextField: {
defaultProps:
{
spellCheck: false
}
}
}
});


Expand Down Expand Up @@ -305,12 +310,13 @@ export default function SnapWeb() {
// onKeyDown={toggleDrawer(anchor, false)}
>
<List>
<ListItem key="about" disablePadding>
<ListItem key="about">
<ListItemButton onClick={() => { setAboutOpen(true); setDrawerOpen(false); }}>
<ListItemText primary="About..." />
</ListItemButton>
</ListItem>
<ListItem key="settings" disablePadding>
<Divider variant='middle' />
<ListItem key="settings" sx={{ fontSize: "large" }}>
<ListItemButton onClick={() => { setSettingsOpen(true); setDrawerOpen(false); }}>
<ListItemText primary="Settings..." />
</ListItemButton>
Expand Down Expand Up @@ -356,10 +362,10 @@ export default function SnapWeb() {
sx={{ mr: 2 }}
onClick={(_) => { setDrawerOpen(true); }}
>
<MenuIcon />
<MenuIcon sx={{ fontSize: "large" }} />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Snapcast
{appTitle}
</Typography>
{isConnected ?
<IconButton
Expand All @@ -370,7 +376,7 @@ export default function SnapWeb() {
sx={{ mr: 2 }}
onClick={(_) => { setIsPlaying(!isPlaying); }}
>
{isPlaying ? <StopIcon fontSize="large" /> : <PlayArrowIcon fontSize="large" />}
{isPlaying ? <StopIcon sx={{ fontSize: "large" }} /> : <PlayArrowIcon sx={{ fontSize: "large" }} />}
</IconButton> : <IconButton></IconButton>}
</Toolbar>
</AppBar>
Expand Down