Merge pull request #366 from blackcandy-org/handle-playing-ended

Handle playing ended

Gemfile.lock

@@ -119,9 +119,9 @@ GEM
       ferrum (~> 0.13.0)
     daemons (1.4.1)
     date (3.3.3)
-    debug (1.8.0)
-      irb (>= 1.5.0)
-      reline (>= 0.3.1)
+    debug (1.9.2)
+      irb (~> 1.10)
+      reline (>= 0.3.8)
     docile (1.4.0)
     dotenv (2.8.1)
     drb (2.1.1)
@@ -159,10 +159,10 @@ GEM
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
-    io-console (0.6.0)
-    irb (1.8.3)
+    io-console (0.7.2)
+    irb (1.12.0)
       rdoc
-      reline (>= 0.3.8)
+      reline (>= 0.4.2)
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
@@ -238,7 +238,7 @@ GEM
       activesupport (>= 7.0.0)
       rack
       railties (>= 7.0.0)
-    psych (5.1.1.1)
+    psych (5.1.2)
       stringio
     public_suffix (5.0.3)
     puma (6.4.0)
@@ -290,10 +290,10 @@ GEM
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rdoc (6.5.0)
+    rdoc (6.6.3.1)
       psych (>= 4.0.0)
     regexp_parser (2.8.2)
-    reline (0.3.9)
+    reline (0.5.0)
       io-console (~> 0.5)
     rexml (3.2.6)
     rubocop (1.48.1)
@@ -347,7 +347,7 @@ GEM
       rubocop-rails (~> 2.20.2)
     stimulus-rails (1.2.2)
       railties (>= 6.0.0)
-    stringio (3.0.8)
+    stringio (3.1.0)
     thor (1.3.0)
     tilt (2.3.0)
     timeout (0.4.0)

app/javascript/controllers/mixins/playing_song_indicator.js

@@ -5,12 +5,19 @@ export const installPlayingSongIndicator = (controller, getSongElements = () =>
     })
   }
 
-  const addShowPlayingEventListener = () => {
+  const hidePlayingSong = () => {
+    const playingSongElement = getSongElements().find((element) => element.classList.contains('is-active'))
+    playingSongElement.classList.remove('is-active')
+  }
+
+  const addPlayingSongIndicatorEventListener = () => {
     document.addEventListener('playlistSongs:showPlaying', showPlayingSong)
+    document.addEventListener('playlistSongs:hidePlaying', hidePlayingSong)
   }
 
-  const removeShowPlayingEventListener = () => {
+  const removePlayingSongIndicatorEventListener = () => {
     document.removeEventListener('playlistSongs:showPlaying', showPlayingSong)
+    document.removeEventListener('playlistSongs:hidePlaying', hidePlayingSong)
   }
 
   const controllerConnectCallback = controller.connect.bind(controller)
@@ -20,12 +27,12 @@ export const installPlayingSongIndicator = (controller, getSongElements = () =>
     connect () {
       controllerConnectCallback()
       showPlayingSong()
-      addShowPlayingEventListener()
+      addPlayingSongIndicatorEventListener()
     },
 
     disconnect () {
       controllerDisconnectCallback()
-      removeShowPlayingEventListener()
+      removePlayingSongIndicatorEventListener()
     }
   })
 }

app/javascript/controllers/player_controller.js

@@ -162,6 +162,7 @@ export default class extends Controller {
 
     if (!this.currentSong.id) {
       this.headerTarget.classList.remove('is-expanded')
+      dispatchEvent(document, 'playlistSongs:hidePlaying')
     }
   }
 

app/javascript/player.js

@@ -1,4 +1,4 @@
-import { Howl } from 'howler'
+import { Howl, Howler } from 'howler'
 import { dispatchEvent } from './helper'
 import Playlist from './playlist'
 
@@ -48,12 +48,11 @@ class Player {
 
   stop () {
     this.isPlaying = false
-    this.currentSong.howl && this.currentSong.howl.stop()
 
-    if (!this.playlist.includes(this.currentSong.id)) {
-      // reset current song
-      this.currentSong = {}
-    }
+    Howler.stop()
+
+    // reset current song
+    this.currentSong = {}
   }
 
   next () {
@@ -65,7 +64,7 @@ class Player {
   }
 
   skipTo (index) {
-    this.stop()
+    this.currentSong.howl && this.currentSong.howl.stop()
 
     if (index >= this.playlist.length) {
       index = 0