From f31dd4460d0e76243180ad9e6549f69b7cf2eab3 Mon Sep 17 00:00:00 2001
From: ConnorsApps <ConnorSkees@icloud.com>
Date: Wed, 25 Dec 2024 09:41:05 -0500
Subject: [PATCH 1/6] Start making surfaces larger

---
 src/components/Client.tsx |  4 ++--
 src/components/Group.tsx  | 20 +++++++++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/Client.tsx b/src/components/Client.tsx
index 9d0c6d3..f33b14f 100644
--- a/src/components/Client.tsx
+++ b/src/components/Client.tsx
@@ -93,10 +93,10 @@ export default function Client(props: ClientProps) {
   // console.debug("Render Client " + props.client.host.name + ", id: " + props.client.id);
 
   return (
-    <Box sx={{ opacity: props.client.connected ? 1.0 : 0.5 }} >
+    <Box margin={1} 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">
+          <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}
diff --git a/src/components/Group.tsx b/src/components/Group.tsx
index 3831e3a..15f6352 100644
--- a/src/components/Group.tsx
+++ b/src/components/Group.tsx
@@ -245,14 +245,19 @@ 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 />
               </IconButton>
@@ -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: 120, p: 1 }}
                   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={{ p: 2 }}
+                    >
+                      {stream.id}
+                    </MenuItem>
+                  ))}
                 </Select>
               </FormControl>
             </Stack>

From 8d3f05044aa318b9fb6f27c30c4f44d7841f6aff Mon Sep 17 00:00:00 2001
From: ConnorsApps <ConnorSkees@icloud.com>
Date: Wed, 25 Dec 2024 19:50:30 -0500
Subject: [PATCH 2/6] wip

---
 .env                        |  3 +-
 src/components/Client.tsx   | 34 +++++++++++---
 src/components/Group.tsx    | 22 +++++-----
 src/components/Settings.tsx |  4 +-
 src/components/SnapWeb.tsx  | 88 ++++++++++++++++++++-----------------
 5 files changed, 89 insertions(+), 62 deletions(-)

diff --git a/.env b/.env
index 749c50d..1077b5d 100644
--- a/.env
+++ b/.env
@@ -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
diff --git a/src/components/Client.tsx b/src/components/Client.tsx
index f33b14f..a7e2530 100644
--- a/src/components/Client.tsx
+++ b/src/components/Client.tsx
@@ -86,9 +86,29 @@ 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);
 
@@ -103,15 +123,15 @@ export default function Client(props: ClientProps) {
             </Typography>
             <Stack spacing={2} direction="row" alignItems="center">
               <IconButton aria-label="Mute" onClick={() => { handleMuteClicked() }}>
-                {props.client.config.volume.muted ? <VolumeOffIcon /> : <VolumeUpIcon />}
+                {props.client.config.volume.muted ? <VolumeOffIcon fontSize="large" /> : <VolumeUpIcon fontSize="large" />}
               </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) }} />
+              <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>
         </Grid>
         <Grid item>
           <IconButton aria-label="Options" onClick={(event) => { handleOptionsClicked(event); }}>
-            <MoreVertIcon />
+            <MoreVertIcon fontSize="large" />
           </IconButton>
           <Menu
             id="basic-menu"
@@ -188,8 +208,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>
diff --git a/src/components/Group.tsx b/src/components/Group.tsx
index 15f6352..36ba9b7 100644
--- a/src/components/Group.tsx
+++ b/src/components/Group.tsx
@@ -259,7 +259,7 @@ export default function Group(props: GroupProps) {
               alignItems="center"
             >
               <IconButton aria-label="Options" onClick={(event) => { handleSettingsClicked(event); }}>
-                <SettingsIcon />
+                <SettingsIcon fontSize="large" />
               </IconButton>
 
               <FormControl variant="standard">
@@ -268,7 +268,7 @@ export default function Group(props: GroupProps) {
                   value={props.group.stream_id}
                   label="Active stream"
                   inputProps={{ 'aria-label': 'Active stream' }}
-                  sx={{ minWidth: 120, p: 1 }}
+                  sx={{ minWidth: "12rem" }}
                   onChange={(event) => {
                     const stream: string = event.target.value;
                     setStreamId(stream);
@@ -279,7 +279,7 @@ export default function Group(props: GroupProps) {
                     <MenuItem
                       key={stream.id}
                       value={stream.id}
-                      sx={{ p: 2 }}
+                      sx={{ minWidth: "12rem", fontSize: "large", p: 2 }}
                     >
                       {stream.id}
                     </MenuItem>
@@ -322,11 +322,11 @@ export default function Group(props: GroupProps) {
             </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 &&
@@ -342,16 +342,16 @@ 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>
@@ -359,8 +359,8 @@ export default function Group(props: GroupProps) {
           </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()}
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 305644d..e1e4ce5 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -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>
diff --git a/src/components/SnapWeb.tsx b/src/components/SnapWeb.tsx
index 73a302e..49a8dc1 100644
--- a/src/components/SnapWeb.tsx
+++ b/src/components/SnapWeb.tsx
@@ -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,
@@ -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',
@@ -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
-      }
-    }
-  }
 });
 
 
@@ -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>
@@ -356,10 +362,10 @@ export default function SnapWeb() {
               sx={{ mr: 2 }}
               onClick={(_) => { setDrawerOpen(true); }}
             >
-              <MenuIcon />
+              <MenuIcon fontSize="large" />
             </IconButton>
             <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-              Snapcast
+              {appTitle}
             </Typography>
             {isConnected ?
               <IconButton

From a8433fe6188bf8b98c77345e00d472038b2d22e3 Mon Sep 17 00:00:00 2001
From: ConnorsApps <ConnorSkees@icloud.com>
Date: Wed, 25 Dec 2024 20:04:15 -0500
Subject: [PATCH 3/6] More stuff for phone

---
 src/components/Client.tsx | 32 ++++++++++++++------------------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/components/Client.tsx b/src/components/Client.tsx
index a7e2530..9b342ef 100644
--- a/src/components/Client.tsx
+++ b/src/components/Client.tsx
@@ -114,22 +114,12 @@ export default function Client(props: ClientProps) {
 
   return (
     <Box margin={1} 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 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>
-        </Grid>
-        <Grid item>
+      <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 fontSize="large" />
           </IconButton>
@@ -144,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>

From ee44d514409af49a3a29be2ae8e5ac593d0b5139 Mon Sep 17 00:00:00 2001
From: ConnorsApps <ConnorSkees@icloud.com>
Date: Sun, 29 Dec 2024 08:44:26 -0500
Subject: [PATCH 4/6] resize song titles

---
 src/components/Group.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/Group.tsx b/src/components/Group.tsx
index 36ba9b7..465a73d 100644
--- a/src/components/Group.tsx
+++ b/src/components/Group.tsx
@@ -312,10 +312,29 @@ 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: '3.5vw',
+                    },
+                  }}
+                  variant="subtitle1"
+                  align="left"
+                >
                   {title}
                 </Typography>
-                <Typography noWrap variant="body1" align="left">
+                <Typography
+                  noWrap
+                  sx={{
+                    '@media (max-width:600px)': {
+                      fontSize: '3vw',
+                    },
+                  }}
+                  variant="body1"
+                  align="left"
+                >
                   {artist}
                 </Typography>
               </Stack>

From 3e88b2b7580e799b06fe0e3da52f3e5ae6625e03 Mon Sep 17 00:00:00 2001
From: ConnorsApps <ConnorSkees@icloud.com>
Date: Sun, 29 Dec 2024 08:47:48 -0500
Subject: [PATCH 5/6] resize

---
 src/components/Group.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Group.tsx b/src/components/Group.tsx
index 465a73d..26c7e31 100644
--- a/src/components/Group.tsx
+++ b/src/components/Group.tsx
@@ -317,7 +317,7 @@ export default function Group(props: GroupProps) {
                   sx={{
                     // Resize for mobile to fit long song titles
                     '@media (max-width:600px)': {
-                      fontSize: '3.5vw',
+                      fontSize: '4vw',
                     },
                   }}
                   variant="subtitle1"
@@ -329,7 +329,7 @@ export default function Group(props: GroupProps) {
                   noWrap
                   sx={{
                     '@media (max-width:600px)': {
-                      fontSize: '3vw',
+                      fontSize: '3.5vw',
                     },
                   }}
                   variant="body1"

From b07abdec634c5d4b99da15437bcc1a01f9ae7a6d Mon Sep 17 00:00:00 2001
From: ConnorsApps <ConnorSkees@icloud.com>
Date: Sun, 29 Dec 2024 08:49:12 -0500
Subject: [PATCH 6/6] use sx

---
 src/components/SnapWeb.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SnapWeb.tsx b/src/components/SnapWeb.tsx
index 49a8dc1..fbdb6e6 100644
--- a/src/components/SnapWeb.tsx
+++ b/src/components/SnapWeb.tsx
@@ -362,7 +362,7 @@ export default function SnapWeb() {
               sx={{ mr: 2 }}
               onClick={(_) => { setDrawerOpen(true); }}
             >
-              <MenuIcon fontSize="large" />
+              <MenuIcon sx={{ fontSize: "large" }} />
             </IconButton>
             <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
               {appTitle}
@@ -376,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>