[CastIt.Server.ClientApp] More bug fixes

Wolfteam · Mar 17, 2024 · ac9920b · ac9920b
1 parent f2a15bd
commit ac9920b
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 127 deletions.
diff --git a/CastIt.Server/ClientApp/package-lock.json b/CastIt.Server/ClientApp/package-lock.json
diff --git a/CastIt.Server/ClientApp/package.json b/CastIt.Server/ClientApp/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@hello-pangea/dnd": "^16.5.0",
     "@microsoft/signalr": "^6.0.4",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
@@ -16,7 +17,6 @@
     "material-ui-popup-state": "^5.0.10",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.1.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-localization": "^1.0.19",
@@ -50,7 +50,6 @@
   },
   "devDependencies": {
     "@types/react": "^18.2.55",
-    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-window": "^1.8.8",

diff --git a/CastIt.Server/ClientApp/src/components/dialogs/reorder_playlist_dialog.tsx b/CastIt.Server/ClientApp/src/components/dialogs/reorder_playlist_dialog.tsx
@@ -1,9 +1,9 @@
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, ListItem, List, Typography } from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, ListItem, List, Typography, useTheme } from '@mui/material';
 import { useEffect, useState } from 'react';
 import translations from '../../services/translations';
 import { useCastItHub } from '../../context/castit_hub.context';
 import { IGetAllPlayListResponseDto } from '../../models';
-import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd';
 import { DragIndicator } from '@mui/icons-material';
 
 interface Props {
@@ -61,16 +61,9 @@ function ReOrderPlayListDialog(props: Props) {
         return null;
     }
 
-    const items = state.positions.map((item, index) => (
-        <Draggable index={index} draggableId={`${item.id}_${item.name}`}>
-            {(provided) => (
-                <ListItem ref={provided.innerRef} {...provided.dragHandleProps} {...provided.draggableProps}>
-                    <DragIndicator />
-                    <Typography>{item.name}</Typography>
-                </ListItem>
-            )}
-        </Draggable>
-    ));
+    const items = state.positions.map((item, index) => {
+        return <Item key={item.id} index={index} playlist={item} />;
+    });
 
     return (
         <Dialog open={props.isOpen} onClose={() => props.onClose()} maxWidth="sm" fullWidth>
@@ -79,7 +72,7 @@ function ReOrderPlayListDialog(props: Props) {
                 <DragDropContext onDragEnd={handleDragEnd}>
                     <Droppable droppableId="playlists-droppable" direction="vertical">
                         {(provided) => (
-                            <List {...provided.droppableProps}>
+                            <List {...provided.droppableProps} ref={provided.innerRef}>
                                 {items}
                                 {provided.placeholder}
                             </List>
@@ -96,4 +89,29 @@ function ReOrderPlayListDialog(props: Props) {
     );
 }
 
+interface ItemProps {
+    index: number;
+    playlist: IPlayListPosition;
+}
+
+function Item(props: ItemProps) {
+    const theme = useTheme();
+    return (
+        <Draggable index={props.index} draggableId={`${props.playlist.id}_${props.playlist.name}`}>
+            {(provided, snapshot) => (
+                <div ref={provided.innerRef} {...provided.dragHandleProps} {...provided.draggableProps}>
+                    <ListItem
+                        style={{
+                            backgroundColor: snapshot.isDragging ? theme.palette.primary.dark : '',
+                        }}
+                    >
+                        <DragIndicator />
+                        <Typography>{props.playlist.name}</Typography>
+                    </ListItem>
+                </div>
+            )}
+        </Draggable>
+    );
+}
+
 export default ReOrderPlayListDialog;
diff --git a/CastIt.Server/ClientApp/src/components/file/file_item.tsx b/CastIt.Server/ClientApp/src/components/file/file_item.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Typography, Divider, ListItem, ListItemText, Avatar, ListItemAvatar, Tooltip, Menu, MenuItem, useTheme } from '@mui/material';
+import { Typography, Divider, ListItem, 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';
 import translations from '../../services/translations';
 import AddFilesDialog from '../dialogs/add_files_dialog';
-import { Draggable } from 'react-beautiful-dnd';
+import { Draggable } from '@hello-pangea/dnd';
 import FileItemSubtitle from './file_item_subtitle';
 import FileItemDuration from './file_item_duration';
 import { useCastItHub } from '../../context/castit_hub.context';
@@ -252,8 +252,7 @@ function FileItem(props: Props) {
                     {...provided.draggableProps}
                     ref={provided.innerRef}
                 >
-                    <ListItem
-                        button
+                    <ListItemButton
                         onDoubleClick={() => handlePlay()}
                         className={state.isBeingPlayed ? classes.beingPlayed : ''}
                         style={{
@@ -277,7 +276,7 @@ function FileItem(props: Props) {
                             }
                         />
                         <FileItemDuration fullTotalDuration={state.fullTotalDuration} loop={state.loop} />
-                    </ListItem>
+                    </ListItemButton>
                     {contextMenu.mouseY === null ? null : (
                         <Menu
                             keepMounted

diff --git a/CastIt.Server/ClientApp/src/components/player/player.tsx b/CastIt.Server/ClientApp/src/components/player/player.tsx
@@ -21,6 +21,7 @@ const useStyles = makeStyles((theme) =>
             overflowX: 'clip',
             marginBottom: 30,
             padding: 0,
+            zIndex: theme.zIndex.fab * 2,
             backgroundColor: theme.palette.primary.dark,
             '&:hover': {
                 backgroundColor: theme.palette.primary.dark,