[CastIt.Server.ClientApp] Updated npm packages.

Minor fixes

CastIt.Server/ClientApp/package.json

@@ -3,26 +3,28 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@microsoft/signalr": "^5.0.8",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "format-duration": "^1.4.0",
-    "material-ui-popup-state": "^1.9.0",
-    "notistack": "^1.0.10",
-    "react": "^17.0.2",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@microsoft/signalr": "^6.0.4",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/user-event": "^14.1.1",
+    "format-duration": "^2.0.0",
+    "material-ui-popup-state": "^2.0.0",
+    "notistack": "^2.0.4",
+    "react": "^18.1.0",
     "react-beautiful-dnd": "^13.1.0",
-    "react-device-detect": "^1.17.0",
-    "react-dom": "^17.0.2",
-    "react-localization": "^1.0.17",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "rxjs": "^7.3.0",
-    "typescript": "^4.3.5",
+    "react-device-detect": "^2.2.2",
+    "react-dom": "^18.1.0",
+    "react-localization": "^1.0.19",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
+    "rxjs": "^7.5.5",
+    "typescript": "^4.6.4",
     "typescript-string-operations": "^1.4.1",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -49,10 +51,10 @@
     ]
   },
   "devDependencies": {
-    "@types/react": "^17.0.15",
-    "@types/react-beautiful-dnd": "^13.1.1",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-router-dom": "^5.1.8",
+    "@types/react": "^18.0.8",
+    "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react-dom": "^18.0.3",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-window": "^1.8.5"
   }
 }

CastIt.Server/ClientApp/src/components/file/file_item_slider.tsx

@@ -31,7 +31,7 @@ function FileItemSlider(props: Props) {
                     {props.playedTime}
                 </Typography>
             </Grid>
-            <Grid item xs={8} style={{ marginBottom: 7 }}>
+            <Grid item xs={8} style={{ marginBottom: 7, paddingRight: '5px' }}>
                 {slider}
             </Grid>
             <Grid item xs={2}>

CastIt.Server/ClientApp/src/components/player/player.tsx

@@ -51,7 +51,7 @@ function Player() {
                 <Grid item xs={10} md={11}>
                     <PlayerProgressIndicator />
                 </Grid>
-                <Grid item xs={1} style={{ textAlign: 'center' }}>
+                <Grid item xs={2} md={1} style={{ textAlign: 'center' }}>
                     {toggleExpandButton}
                 </Grid>
             </Grid>

CastIt.Server/ClientApp/src/components/player/player_current_file.tsx

@@ -64,7 +64,7 @@ function PlayerCurrentFile() {
             onStoppedPlaybackSubscription.unsubscribe();
         };
     }, []);
-
+    
     const image = state.imageUrl ?? defaultImg;
 
     return (

CastIt.Server/ClientApp/src/components/player/player_progress_indicator.tsx

@@ -83,6 +83,7 @@ function PlayerProgressIndicator() {
                     max={state.mediaDuration}
                     step={1}
                     valueLabelDisplay="auto"
+                    style={{marginTop: '5px'}}
                     disabled={!state.isPlayingOrPaused}
                     value={state.elapsedSeconds}
                     onChange={(e, val) => handleValueChanged(val as number)}

CastIt.Server/ClientApp/src/components/player/player_progress_indicator_thumbnail.tsx

@@ -9,17 +9,12 @@ import { thumbnailImgHeight, thumbnailImgWidth } from '../../utils/app_constants
 const useStyles = makeStyles(() =>
     createStyles({
         root: {
-            display: 'inline-block',
-            position: 'relative',
             overflow: 'hidden',
-            width: thumbnailImgWidth,
-            height: thumbnailImgHeight,
             borderRadius: 20,
         },
         image: {
             width: thumbnailImgWidth,
             height: thumbnailImgHeight,
-            position: 'absolute',
             transformOrigin: 'left top',
         },
         text: {

CastIt.Server/ClientApp/src/components/player/player_progress_indicator_value.tsx

@@ -15,15 +15,21 @@ const CustomTooltip = withStyles({
         height: thumbnailImgHeight,
         padding: 0,
         margin: 0,
-    },
+    }
 })(Tooltip);
 
 function PlayerProgressIndicatorValue(props: Props) {
     const { children, open, value } = props;
     const second = value < 0 ? 0 : Math.round(value);
-    
+
     return (
-        <CustomTooltip open={open} enterTouchDelay={0} placement="top" arrow title={<PlayerProgressIndicatorThumbnail second={second} />}>
+        <CustomTooltip
+            open={open}
+            enterTouchDelay={0}
+            placement="top"
+            arrow
+            title={<PlayerProgressIndicatorThumbnail second={second} />}
+        >
             {children}
         </CustomTooltip>
     );

CastIt.Server/ClientApp/src/components/player/player_volume.tsx

@@ -69,7 +69,7 @@ function PlayerVolume() {
 
     return (
         <Fragment>
-            <IconButton {...bindTrigger(popupState)}>
+            <IconButton disabled={!state.isConnected} {...bindTrigger(popupState)}>
                 <VolumeUp fontSize="large" />
             </IconButton>
             <Popover

CastIt.Server/ClientApp/src/components/playlist/playlist_appbar.tsx

@@ -2,7 +2,7 @@ import { alpha, AppBar, createStyles, IconButton, InputBase, makeStyles, Theme,
 import SearchIcon from '@material-ui/icons/Search';
 import { Add, ArrowBack, ArrowUpward, Redo } from '@material-ui/icons';
 import { playListsPath } from '../../routes';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import React, { Fragment, useEffect, useState } from 'react';
 import PlayListLoopShuffleButton from './playlist_loop_shuffle_button';
 import translations from '../../services/translations';
@@ -83,7 +83,7 @@ interface State {
 
 function PlayListAppBar(props: Props) {
     const classes = useStyles();
-    const history = useHistory();
+    const navigate = useNavigate();
     const [search, setSearch] = useState<string>('');
     const [state, setState] = useState<State>({
         canGoToPlayedFile: false,
@@ -131,8 +131,7 @@ function PlayListAppBar(props: Props) {
     };
 
     const handleGoBackClick = () => {
-        console.log(history);
-        history.push(playListsPath);
+        navigate(playListsPath);
     };
 
     const handleGoToPlayedFile = () => {

CastIt.Server/ClientApp/src/components/playlist/playlist_card_item.tsx

@@ -15,7 +15,7 @@ import {
 } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { Add, Delete, MoreVert, Edit, Sort } from '@material-ui/icons';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { playListPath } from '../../routes';
 import RenamePlayListDialog from '../dialogs/rename_playlist_dialog';
 import { onPlayerStatusChanged } from '../../services/castithub.service';
@@ -92,7 +92,7 @@ const initialState: State = {
 
 function PlayListCardItem(props: Props): JSX.Element {
     const classes = useStyles();
-    const history = useHistory();
+    const navigate = useNavigate();
     const [anchorEl, setAnchorEl] = useState<HTMLElement>();
 
     const [state, setState] = useState(initialState);
@@ -137,7 +137,7 @@ function PlayListCardItem(props: Props): JSX.Element {
 
     const handleClick = (): void => {
         const route = playListPath.replace(':id', `${state.id}`);
-        history.push(route);
+        navigate(route);
     };
 
     const toggleRaised = (): void => {

CastIt.Server/ClientApp/src/index.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import './index.css';
 import App from './app';
 import reportWebVitals from './reportWebVitals';
+import { createRoot } from 'react-dom/client';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

CastIt.Server/ClientApp/src/pages/page_content.tsx

@@ -18,9 +18,11 @@ function PageContent(props: Props) {
     const classes = useStyles();
     if (props.useContainer) {
         return (
-            <Container id="page-content" maxWidth="xl" className={classes.root}>
-                {props.children}
-            </Container>
+            <div className={classes.root}>
+                <Container id="page-content" maxWidth="xl">
+                    {props.children}
+                </Container>
+            </div>
         );
     }
     return (

CastIt.Server/ClientApp/src/pages/playlist.tsx

@@ -1,6 +1,6 @@
 import { useSnackbar } from 'notistack';
 import { Fragment, useCallback, useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { Params, useParams } from 'react-router-dom';
 import { IFileItemResponseDto, IGetAllPlayListResponseDto, IPlayListItemResponseDto } from '../models';
 import { onPlayListsChanged, onPlayListChanged, onFileAdded, onFilesChanged, onFileDeleted } from '../services/castithub.service';
 import FileItem from '../components/file/file_item';
@@ -27,7 +27,7 @@ const useStyles = makeStyles(() =>
     })
 );
 
-interface Params {
+interface ComponentParams extends Params {
     id: string;
 }
 
@@ -45,14 +45,14 @@ function PlayList() {
     const [state, setState] = useState(initialState);
     const castItHub = useCastItHub();
     const { enqueueSnackbar } = useSnackbar();
-    const params = useParams<Params>();
+    const params = useParams<ComponentParams>();
 
     const [showAddFilesDialog, setShowAddFilesDialog] = useState(false);
 
     const classes = useStyles();
 
     const loadPlayList = useCallback(async () => {
-        const playList = await castItHub.connection.getPlayList(+params.id);
+        const playList = await castItHub.connection.getPlayList(+params.id!);
         setState((s) => ({
             ...s,
             playList: playList,
@@ -158,7 +158,7 @@ function PlayList() {
         };
     }, [state.playList]);
 
-    if (+params.id <= 0) {
+    if (+params.id! <= 0) {
         enqueueSnackbar(translations.invalidPlayList, { variant: 'warning' });
     }
 

CastIt.Server/ClientApp/src/pages/playlists.tsx

@@ -105,13 +105,13 @@ function PlayLists() {
     }, []);
 
     const items = state.playLists.map((pl, index) => (
-        <Grid key={pl.id} item xs={6} sm={6} md={4} lg={3} xl={2}>
+        <Grid key={pl.id} item xs={12} sm={4} md={4} lg={3} xl={2}>
             <PlayListCardItem index={index} playList={pl} onReOrderClick={handleReOrderClick} />
         </Grid>
     ));
 
     const addNew = (
-        <Grid key="AddNewItem" item xs={6} sm={6} md={4} lg={3} xl={2} style={{ alignSelf: 'center' }}>
+        <Grid key="AddNewItem" item xs={12} sm={4} md={4} lg={3} xl={2} style={{ alignSelf: 'center' }}>
             <PlayListCardItem
                 playList={{
                     id: 0,

CastIt.Server/ClientApp/src/routes.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
 export const playListsPath = '/';
-export const playListPath = '/playlist/:id';
+export const playListPath = 'playlist/:id';
 
 const PlayLists = React.lazy(() => import('./pages/playlists'));
 const PlayList = React.lazy(() => import('./pages/playlist'));
@@ -11,19 +11,19 @@ const Player = React.lazy(() => import('./components/player/player'));
 
 export const AppRoutes: React.FC = () => {
     return (
-        <Switch>
-            <Route exact path={playListPath} component={PlayList} key="playlists" />
-            <Route exact path={playListsPath} component={PlayLists} key="playlist" />
-            <Route path="*" component={NotFound} key="notfound" />
-        </Switch>
+        <Routes>
+            <Route path={playListPath} element={<PlayList />} key="playlists" />
+            <Route path={playListsPath} element={<PlayLists />} key="playlist" />
+            <Route path="*" element={<NotFound />} key="notfound" />
+        </Routes>
     );
 };
 
 export const PlayerRoutes: React.FC = () => {
     return (
-        <Switch>
-            <Route exact path={playListPath} component={Player} />
-            <Route exact path={playListsPath} component={Player} />
-        </Switch>
+        <Routes>
+            <Route path={playListPath} element={<Player />} />
+            <Route path={playListsPath} element={<Player />} />
+        </Routes>
     );
 };