[CastIt.Server.ClientApp] Continue migrating to styled and sx

Wolfteam · Apr 28, 2024 · 4224470 · 4224470
1 parent 5eabd90
commit 4224470
Show file tree

Hide file tree

Showing 14 changed files with 305 additions and 428 deletions.
diff --git a/CastIt.Server/ClientApp/src/components/dialogs/app_dialog_title.tsx b/CastIt.Server/ClientApp/src/components/dialogs/app_dialog_title.tsx
@@ -1,20 +1,5 @@
 import { Close } from '@mui/icons-material';
 import { DialogTitle, Grid, IconButton, Typography } from '@mui/material';
-import { createStyles, makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles((theme) =>
-    createStyles({
-        dialogTitle: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            backgroundColor: theme.palette.primary.main,
-        },
-        title: {
-            paddingLeft: 10,
-        },
-    })
-);
 
 interface Props {
     icon: JSX.Element;
@@ -24,12 +9,18 @@ interface Props {
 }
 
 function AppDialogTitle(props: Props) {
-    const classes = useStyles();
     return (
-        <DialogTitle className={classes.dialogTitle}>
+        <DialogTitle
+            sx={(theme) => ({
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                backgroundColor: `${theme.palette.primary.main}`,
+            })}
+        >
             <Grid container alignItems="center">
                 {props.icon}
-                <Typography className={classes.title} variant="h6">
+                <Typography variant="h6" sx={{ paddingLeft: 2 }}>
                     {props.title}
                 </Typography>
             </Grid>

diff --git a/CastIt.Server/ClientApp/src/components/file/file_item.tsx b/CastIt.Server/ClientApp/src/components/file/file_item.tsx
@@ -1,5 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { Typography, Divider, ListItem, ListItemText, Avatar, ListItemAvatar, Tooltip, Menu, MenuItem, useTheme, ListItemButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import {
+    Typography,
+    Divider,
+    ListItemText,
+    Avatar,
+    ListItemAvatar,
+    Tooltip,
+    Menu,
+    MenuItem,
+    useTheme,
+    ListItemButton,
+} from '@mui/material';
 import { IFileItemResponseDto } from '../../models';
 import { onFileChanged, onFileEndReached, onPlayerStatusChanged } from '../../services/castithub.service';
 import { Add, ClearAll, Delete, FileCopy, Loop, PlayArrow, Refresh } from '@mui/icons-material';
@@ -10,22 +22,10 @@ import FileItemSubtitle from './file_item_subtitle';
 import FileItemDuration from './file_item_duration';
 import { useCastItHub } from '../../context/castit_hub.context';
 import { useSnackbar } from 'notistack';
-import { createStyles, makeStyles } from '@mui/styles';
 
-const useStyles = makeStyles((theme) =>
-    createStyles({
-        position: {
-            color: theme.palette.getContrastText(theme.palette.primary.main),
-            backgroundColor: theme.palette.primary.main,
-        },
-        beingPlayed: {
-            backgroundColor: theme.palette.primary.light,
-        },
-        menuItemText: {
-            marginLeft: 10,
-        },
-    })
-);
+const StyledListItemText = styled(ListItemText)({
+    marginLeft: 10,
+});
 
 interface Props {
     index: number;
@@ -73,7 +73,6 @@ const initialContextMenuState: ContextMenuState = {
 };
 
 function FileItem(props: Props) {
-    const classes = useStyles();
     const theme = useTheme();
     const [state, setState] = useState<State>(initialState);
     const [contextMenu, setContextMenu] = useState(initialContextMenuState);
@@ -237,7 +236,7 @@ function FileItem(props: Props) {
     const toggleLoopMenuItem = state.isBeingPlayed ? (
         <MenuItem onClick={handleToggleLoop}>
             <Loop fontSize="small" />
-            <ListItemText className={classes.menuItemText} primary={!state.loop ? translations.loop : translations.disableLoop} />
+            <StyledListItemText primary={!state.loop ? translations.loop : translations.disableLoop} />
         </MenuItem>
     ) : null;
 
@@ -254,13 +253,20 @@ function FileItem(props: Props) {
                 >
                     <ListItemButton
                         onDoubleClick={() => handlePlay()}
-                        className={state.isBeingPlayed ? classes.beingPlayed : ''}
+                        sx={state.isBeingPlayed ? { backgroundColor: 'primary.light' } : null}
                         style={{
                             backgroundColor: snapshot.isDragging ? theme.palette.primary.dark : '',
                         }}
                     >
                         <ListItemAvatar>
-                            <Avatar className={classes.position}>{state.position}</Avatar>
+                            <Avatar
+                                sx={(theme) => ({
+                                    color: theme.palette.getContrastText(theme.palette.primary.main),
+                                    backgroundColor: theme.palette.primary.main
+                                })}
+                            >
+                                {state.position}
+                            </Avatar>
                         </ListItemAvatar>
                         <ListItemText
                             primary={title}
@@ -291,31 +297,31 @@ function FileItem(props: Props) {
                         >
                             <MenuItem onClick={() => handlePlay()}>
                                 <PlayArrow fontSize="small" />
-                                <ListItemText className={classes.menuItemText} primary={translations.play} />
+                                <StyledListItemText primary={translations.play} />
                             </MenuItem>
                             <MenuItem onClick={() => handlePlay(true)}>
                                 <Refresh fontSize="small" />
-                                <ListItemText className={classes.menuItemText} primary={translations.playFromTheStart} />
+                                <StyledListItemText primary={translations.playFromTheStart} />
                             </MenuItem>
                             {toggleLoopMenuItem}
                             <MenuItem onClick={handleShowAddFilesDialog}>
                                 <Add fontSize="small" />
-                                <ListItemText className={classes.menuItemText} primary={translations.addFiles} />
+                                <StyledListItemText primary={translations.addFiles} />
                             </MenuItem>
                             {secure ? (
                                 <MenuItem onClick={handleCopy}>
                                     <FileCopy fontSize="small" />
-                                    <ListItemText className={classes.menuItemText} primary={translations.copyPath} />
+                                    <StyledListItemText primary={translations.copyPath} />
                                 </MenuItem>
                             ) : null}
                             {/* TODO: REMOVE ALL SELECTED AND SELECT ALL */}
                             <MenuItem onClick={handleDelete}>
                                 <Delete fontSize="small" />
-                                <ListItemText className={classes.menuItemText} primary={translations.remove} />
+                                <StyledListItemText primary={translations.remove} />
                             </MenuItem>
                             <MenuItem onClick={handleRemoveAllMissing}>
                                 <ClearAll fontSize="small" />
-                                <ListItemText className={classes.menuItemText} primary={translations.removeAllMissing} />
+                                <StyledListItemText primary={translations.removeAllMissing} />
                             </MenuItem>
                         </Menu>
                     )}

diff --git a/CastIt.Server/ClientApp/src/components/file/file_item_duration.tsx b/CastIt.Server/ClientApp/src/components/file/file_item_duration.tsx
@@ -1,26 +1,16 @@
 import { Typography, ListItemSecondaryAction, Grid, useMediaQuery, Theme } from '@mui/material';
-import { createStyles, makeStyles } from '@mui/styles';
 import { Loop } from '@mui/icons-material';
 
-const useStyles = makeStyles((theme) =>
-    createStyles({
-        duration: {
-            top: '44%',
-        },
-    })
-);
-
 interface Props {
     loop: boolean;
     fullTotalDuration: string;
 }
 
 function FileItemDuration(props: Props) {
-    const classes = useStyles();
     const hideDuration = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));
 
     return (
-        <ListItemSecondaryAction className={classes.duration}>
+        <ListItemSecondaryAction sx={{ top: '44%' }}>
             <Grid container justifyContent="center" alignItems="center" className={'text-overflow-elipsis'}>
                 {props.loop ? <Loop fontSize="small" /> : null}
                 {!hideDuration ? <Typography>{props.fullTotalDuration}</Typography> : null}

diff --git a/CastIt.Server/ClientApp/src/components/file/file_item_slider.tsx b/CastIt.Server/ClientApp/src/components/file/file_item_slider.tsx
@@ -1,14 +1,4 @@
 import { Grid, Typography, Slider, Theme, useMediaQuery } from '@mui/material';
-import { createStyles, makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles((theme) =>
-    createStyles({
-        slider: {
-            color: `${theme.palette.primary.main} !important`,
-            padding: 0,
-        },
-    })
-);
 
 interface Props {
     playedTime: string;
@@ -17,10 +7,18 @@ interface Props {
 }
 
 function FileItemSlider(props: Props) {
-    const classes = useStyles();
     const showInlineDurations = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));
-
-    const slider = <Slider size="small" value={props.playedPercentage} disabled className={classes.slider} />;
+    const slider = (
+        <Slider
+            size="small"
+            value={props.playedPercentage}
+            disabled
+            sx={(theme) => ({
+                color: `${theme.palette.primary.main} !important`,
+                padding: 0,
+            })}
+        />
+    );
     if (!showInlineDurations) {
         return slider;
     }

diff --git a/CastIt.Server/ClientApp/src/components/player/player.tsx b/CastIt.Server/ClientApp/src/components/player/player.tsx
@@ -8,27 +8,6 @@ import PlayerCurrentFile from './player_current_file';
 import PlayerFileOptions from './player_file_options';
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import { useState } from 'react';
-import { createStyles, makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles((theme) =>
-    createStyles({
-        root: {
-            backgroundColor: theme.palette.primary.dark,
-        },
-        expandButton: {
-            bottom: 0,
-            position: 'absolute',
-            overflowX: 'clip',
-            marginBottom: 30,
-            padding: 0,
-            zIndex: theme.zIndex.fab * 2,
-            backgroundColor: theme.palette.primary.dark,
-            '&:hover': {
-                backgroundColor: theme.palette.primary.dark,
-            },
-        },
-    })
-);
 
 interface State {
     isExpanded: boolean;
@@ -39,7 +18,6 @@ const initialState: State = {
 };
 
 function Player() {
-    const classes = useStyles();
     const [state, setState] = useState(initialState);
 
     const handleToggleExpand = () =>
@@ -49,14 +27,26 @@ function Player() {
 
     if (!state.isExpanded) {
         return (
-            <Box className={classes.root}>
+            <Box sx={(theme) => ({ backgroundColor: theme.palette.primary.dark })}>
                 <PlayerProgressIndicator />
                 <Grid container justifyContent="center">
                     <Button
                         disableRipple={true}
                         disableTouchRipple={true}
                         disableFocusRipple={true}
-                        className={classes.expandButton}
+                        sx={(theme) => ({
+                            bottom: 0,
+                            position: 'absolute',
+                            overflowX: 'clip',
+                            marginBottom: 5,
+                            padding: 0,
+                            zIndex: theme.zIndex.fab * 2,
+                            backgroundColor: theme.palette.primary.dark,
+                            borderRadius: '15px 15px 0px 0px',
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.dark,
+                            },
+                        })}
                         onClick={handleToggleExpand}
                     >
                         <ExpandLess fontSize="large" htmlColor="white" />
@@ -67,7 +57,7 @@ function Player() {
     }
 
     return (
-        <Grid container className={classes.root} justifyContent="center" alignItems="center">
+        <Grid container justifyContent="center" alignItems="center" sx={(theme) => ({ backgroundColor: theme.palette.primary.dark })}>
             <Grid item xs={12} md={3}>
                 <PlayerCurrentFile />
             </Grid>

diff --git a/CastIt.Server/ClientApp/src/components/player/player_current_file.tsx b/CastIt.Server/ClientApp/src/components/player/player_current_file.tsx
@@ -1,25 +1,13 @@
-import {Grid, LinearProgress, Tooltip, Typography} from '@mui/material';
-import {useEffect, useState} from 'react';
-import {
-    onPlayerStatusChanged,
-    onFileEndReached,
-    onFileLoading,
-    onFileLoaded,
-    onStoppedPlayback
-} from '../../services/castithub.service';
-import {defaultImg} from '../../utils/app_constants';
-import {makeStyles} from '@mui/styles';
+import { Grid, LinearProgress, Tooltip, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useEffect, useState } from 'react';
+import { onPlayerStatusChanged, onFileEndReached, onFileLoading, onFileLoaded, onStoppedPlayback } from '../../services/castithub.service';
+import { defaultImg } from '../../utils/app_constants';
 
-const useStyles = makeStyles({
-    image: {
-        height: 100,
-        objectFit: 'contain',
-    },
-    text: {
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-    },
+const StyledTypography = styled(Typography)({
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
 });
 
 interface State {
@@ -35,7 +23,6 @@ const initialState: State = {
 };
 
 function PlayerCurrentFile() {
-    const classes = useStyles();
     const [state, setState] = useState(initialState);
 
     useEffect(() => {
@@ -53,11 +40,11 @@ function PlayerCurrentFile() {
         });
 
         const onFileLoadingSubscription = onFileLoading.subscribe((_) => {
-            setState((s) => ({...s, loading: true}));
+            setState((s) => ({ ...s, loading: true }));
         });
 
         const onFileLoadedSubscription = onFileLoaded.subscribe((_) => {
-            setState((s) => ({...s, loading: false}));
+            setState((s) => ({ ...s, loading: false }));
         });
 
         const onFileEndReachedSubscription = onFileEndReached.subscribe((_) => setState(initialState));
@@ -76,21 +63,19 @@ function PlayerCurrentFile() {
 
     return (
         <Grid container wrap="nowrap" alignItems="center">
-            <Grid item style={{display: 'flex'}}>
-                <img className={classes.image} src={image} alt="Current file"/>
+            <Grid item style={{ display: 'flex' }}>
+                <img style={{ height: 100, objectFit: 'contain' }} src={image} alt="Current file" />
             </Grid>
-            <Grid item className={classes.text} style={{paddingLeft: '10px'}}>
+            <Grid item style={{ paddingLeft: '10px' }}>
                 <Tooltip title={state.title}>
-                    <Typography variant="h5" component="h2" className={classes.text}>
+                    <StyledTypography variant="h5" component="h2">
                         {state.title}
-                    </Typography>
+                    </StyledTypography>
                 </Tooltip>
                 <Tooltip title={state.subtitle}>
-                    <Typography color="textSecondary" className={classes.text}>
-                        {state.subtitle}
-                    </Typography>
+                    <StyledTypography color="textSecondary">{state.subtitle}</StyledTypography>
                 </Tooltip>
-                {state.loading ? <LinearProgress/> : null}
+                {state.loading ? <LinearProgress /> : null}
             </Grid>
         </Grid>
     );