Update components/playlist/PlaylistMenu.tsx

components/playlist/PlaylistMenu.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef, useState } from "react"
 import { MediaElement, Playlist, RoomState } from "../../lib/types"
-import { DragDropContext as _DragDropContext, Droppable as _Droppable, DragDropContextProps, DroppableProps } from "react-beautiful-dnd"
+import { DragDropContext, Droppable } from "@hello-pangea/dnd"
 import classNames from "classnames"
 import { Socket } from "socket.io-client"
 import {
@@ -13,10 +13,6 @@ import IconChevron from "../icon/IconChevron"
 import PlaylistItem from "./PlaylistItem"
 import InputUrl from "../input/InputUrl"
 
-// HACK: this fixes type incompatibility
-const DragDropContext = _DragDropContext as unknown as FC<DragDropContextProps>
-const Droppable = _Droppable as unknown as FC<DroppableProps>
-
 interface Props {
   socket: Socket<ServerToClientEvents, ClientToServerEvents>
 }
@@ -109,70 +105,56 @@ const PlaylistMenu: FC<Props> = ({ socket }) => {
               )
 
               if (
-                playlist.currentIndex > result.source.index &&
-                playlist.currentIndex < result.destination.index
-              ) {
-                newPlaylist.currentIndex--
-              } else if (
-                playlist.currentIndex < result.source.index &&
-                playlist.currentIndex > result.destination.index
+                newPlaylist.currentIndex === result.source.index ||
+                newPlaylist.currentIndex === result.destination.index
               ) {
-                newPlaylist.currentIndex++
-              } else if (playlist.currentIndex === result.source.index) {
-                newPlaylist.currentIndex = result.destination.index
+                // keep currentIndex pointing to the same item after reorder
+                const movedFrom = result.source.index
+                const movedTo = result.destination.index
+                if (newPlaylist.currentIndex === movedFrom) {
+                  newPlaylist.currentIndex = movedTo
+                } else if (
+                  movedFrom < newPlaylist.currentIndex &&
+                  movedTo >= newPlaylist.currentIndex
+                ) {
+                  newPlaylist.currentIndex -= 1
+                } else if (
+                  movedFrom > newPlaylist.currentIndex &&
+                  movedTo <= newPlaylist.currentIndex
+                ) {
+                  newPlaylist.currentIndex += 1
+                }
               }
 
-              console.log("Playlist updated to:", newPlaylist)
               socket.emit("updatePlaylist", newPlaylist)
             }}
           >
             <Droppable droppableId={"playlistMenu"}>
-              {(provided, snapshot) => (
-                <div
-                  {...provided.droppableProps}
-                  ref={provided.innerRef}
-                  className={classNames(
-                    "flex flex-col rounded gap-1",
-                    snapshot.isDraggingOver && "bg-dark-800"
-                  )}
-                >
-                  <>
-                    {playlist.items.map((item, index) => (
-                      <PlaylistItem
-                        key={item.src[0].src + "-" + index}
-                        playing={playlist.currentIndex === index}
-                        item={item}
-                        index={index}
-                        deleteItem={(index) => {
-                          if (index < 0 || index >= playlist.items.length) {
-                            return
-                          }
-
-                          const newPlaylist: Playlist = JSON.parse(
-                            JSON.stringify(playlist)
-                          )
-                          newPlaylist.items.splice(index, 1)
-                          if (newPlaylist.currentIndex === index) {
-                            newPlaylist.currentIndex = -1
-                          } else if (newPlaylist.currentIndex > index) {
-                            newPlaylist.currentIndex--
-                          }
-                          socket.emit("updatePlaylist", newPlaylist)
-                        }}
-                        updateTitle={(newTitle) => {
-                          const newPlaylist: Playlist = JSON.parse(
-                            JSON.stringify(playlist)
-                          )
-                          newPlaylist.items[index].title = newTitle
-                          socket.emit("updatePlaylist", newPlaylist)
-                        }}
-                        play={() => {
-                          playItemFromPlaylist(socket, playlist, index)
-                        }}
-                      />
-                    ))}
-                    {provided.placeholder}
-                  </>
+              {(provided) => (
+                <div ref={provided.innerRef} {...provided.droppableProps} className={"flex flex-col gap-1"}>
+                  {playlist.items.map((item, index) => (
+                    <PlaylistItem
+                      key={item.src[0].src + "-" + index}
+                      item={item}
+                      index={index}
+                      updateTitle={(title: string) => {
+                        const newPlaylist: Playlist = JSON.parse(JSON.stringify(playlist))
+                        newPlaylist.items[index].title = title
+                        socket.emit("updatePlaylist", newPlaylist)
+                      }}
+                      deleteItem={(i: number) => {
+                        const newPlaylist: Playlist = JSON.parse(JSON.stringify(playlist))
+                        newPlaylist.items.splice(i, 1)
+                        if (newPlaylist.currentIndex >= newPlaylist.items.length) {
+                          newPlaylist.currentIndex = newPlaylist.items.length - 1
+                        }
+                        socket.emit("updatePlaylist", newPlaylist)
+                      }}
+                      playing={playlist.currentIndex === index}
+                      play={() => playItemFromPlaylist(socket, index)}
+                    />
+                  ))}
+                  {provided.placeholder}
                 </div>
               )}
             </Droppable>
@@ -183,4 +165,4 @@ const PlaylistMenu: FC<Props> = ({ socket }) => {
   )
 }
 
-export default PlaylistMenu
+export default PlaylistMenu