Fix some strange issues in player

app/javascript/controllers/current_playlist_songs_controller.js

@@ -19,9 +19,7 @@ export default class extends Controller {
     const shouldPlay = target.dataset.shouldPlay === 'true'
     const targetIndex = this.itemTargets.indexOf(target)
 
-    if (this.player.playlist.indexOf(song.id) !== -1) { return }
-
-    this.player.playlist.insert(targetIndex, song)
+    this.playlist.insert(targetIndex, song)
 
     if (shouldPlay) {
       this.player.skipTo(targetIndex)
@@ -44,24 +42,27 @@ export default class extends Controller {
 
   itemTargetDisconnected (target) {
     const songId = Number(target.dataset.songId)
+    const targetIsDragging = target.classList.contains('is-dragging-source')
 
-    if (this.player.playlist.indexOf(songId) === -1) { return }
-
-    const deleteSongIndex = this.player.playlist.deleteSong(songId)
+    this.playlist.deleteSong(songId)
 
-    if (this.player.currentSong.id === songId) {
-      this.player.skipTo(deleteSongIndex)
+    if (this.player.currentSong.id === songId && !targetIsDragging) {
+      this.player.stop()
     }
   }
 
   play = (event) => {
     const { songId } = event.target.closest('[data-song-id]').dataset
-    const playlistIndex = this.player.playlist.indexOf(songId)
+    const playlistIndex = this.playlist.indexOf(songId)
 
     this.player.skipTo(playlistIndex)
   }
 
   get player () {
     return App.player
   }
+
+  get playlist () {
+    return this.player.playlist
+  }
 }

app/javascript/controllers/player_controller.js

@@ -160,7 +160,7 @@ export default class extends Controller {
   #setStopStatus = () => {
     this.#setPauseStatus()
 
-    if (this.player.playlist.length === 0) {
+    if (!this.currentSong.id) {
       this.headerTarget.classList.remove('is-expanded')
     }
   }

app/javascript/controllers/playlist_sortable_controller.js

@@ -113,12 +113,10 @@ export default class extends Controller {
     const destinationSongId = target.dataset.songId
     const playlistId = this.element.dataset.playlistId
 
-    sourceElement.remove()
-
     if (sourceIndex < targetIndex) {
-      target.insertAdjacentElement('afterend', sourceElement)
+      target.after(sourceElement)
     } else {
-      target.insertAdjacentElement('beforebegin', sourceElement)
+      target.before(sourceElement)
     }
 
     fetchRequest(`/playlists/${playlistId}/songs/${songId}/move`, {

app/javascript/player.js

@@ -3,7 +3,6 @@ import { dispatchEvent } from './helper'
 import Playlist from './playlist'
 
 class Player {
-  currentIndex = 0
   currentSong = {}
   isPlaying = false
   playlist = new Playlist()
@@ -14,7 +13,6 @@ class Player {
     dispatchEvent(document, 'player:beforePlaying')
 
     const song = this.playlist.songs[index]
-    this.currentIndex = index
     this.currentSong = song
     this.isPlaying = true
 
@@ -52,9 +50,8 @@ class Player {
     this.isPlaying = false
     this.currentSong.howl && this.currentSong.howl.stop()
 
-    if (this.playlist.length === 0) {
+    if (!this.playlist.includes(this.currentSong.id)) {
       // reset current song
-      this.currentIndex = 0
       this.currentSong = {}
     }
   }
@@ -82,6 +79,10 @@ class Player {
   seek (seconds) {
     this.currentSong.howl.seek(seconds)
   }
+
+  get currentIndex () {
+    return Math.max(this.playlist.indexOf(this.currentSong.id), 0)
+  }
 }
 
 export default Player

app/javascript/playlist.js

@@ -6,11 +6,15 @@ class Playlist {
   isShuffled = false
 
   insert (index, song) {
+    if (this.includes(song.id)) { return }
+
     this.orderedSongs.splice(index, 0, song)
     this.shuffledSongs.splice(randomIndex(this.shuffledSongs.length), 0, song)
   }
 
   deleteSong (songId) {
+    if (!this.includes(songId)) { return -1 }
+
     const orderedSongsindex = this.#indexOfSongs(this.orderedSongs, songId)
     const shuffledSongsindex = this.#indexOfSongs(this.shuffledSongs, songId)
 
@@ -24,6 +28,10 @@ class Playlist {
     return this.#indexOfSongs(this.songs, songId)
   }
 
+  includes (songId) {
+    return this.indexOf(songId) !== -1
+  }
+
   #indexOfSongs (songs, songId) {
     return songs.map((song) => song.id).indexOf(Number(songId))
   }