Merge pull request #372 from blackcandy-org/playing-behavior

Add new playing begin with behavior on songs in album or playlist

app/controllers/current_playlist/songs/albums_controller.rb

@@ -7,7 +7,11 @@ class CurrentPlaylist::Songs::AlbumsController < ApplicationController
 
   def update
     @current_playlist.replace(@album.song_ids)
-    redirect_to current_playlist_songs_path(should_play_all: true)
+
+    redirect_to current_playlist_songs_path(
+      should_play: params[:should_play],
+      song_id: params[:song_id]
+    )
   end
 
   private

app/controllers/current_playlist/songs/playlists_controller.rb

@@ -6,7 +6,10 @@ class CurrentPlaylist::Songs::PlaylistsController < ApplicationController
 
   def update
     @current_playlist.replace(@playlist.song_ids)
-    redirect_to current_playlist_songs_path(should_play_all: true)
+    redirect_to current_playlist_songs_path(
+      should_play: params[:should_play],
+      song_id: params[:song_id]
+    )
   end
 
   private

app/controllers/current_playlist/songs_controller.rb

@@ -7,6 +7,8 @@ class CurrentPlaylist::SongsController < Playlists::SongsController
 
   def index
     @songs = @playlist.songs_with_favorite
+    @should_play = params[:should_play] == "true"
+    @should_play_song_id = params[:song_id].to_i if @should_play
   end
 
   def create
@@ -21,7 +23,7 @@ def create
 
     flash.now[:success] = t("notice.added_to_playlist")
 
-    redirect_to action: "index", should_play_all: params[:should_play] if @playlist.songs.count == 1
+    redirect_to action: "index", should_play: params[:should_play] if @playlist.songs.count == 1
   rescue ActiveRecord::RecordNotUnique
     flash.now[:error] = t("error.already_in_playlist")
     render turbo_stream: render_flash

app/javascript/controllers/album_bridge_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+import { installEventHandler } from './mixins/event_handler'
+import { isNativeApp } from '../helper'
+
+export default class extends Controller {
+  static get shouldLoad () {
+    return isNativeApp()
+  }
+
+  static values = {
+    id: Number
+  }
+
+  initialize () {
+    installEventHandler(this)
+  }
+
+  connect () {
+    this.handleEvent('click', {
+      on: this.element,
+      with: this.playBeginWith,
+      delegation: true
+    })
+  }
+
+  play () {
+    App.nativeBridge.playAlbum(this.idValue)
+  }
+
+  playBeginWith = (event) => {
+    const { songId } = event.target.closest('[data-song-id]').dataset
+    App.nativeBridge.playAlbumBeginWith(this.idValue, songId)
+  }
+}

app/javascript/controllers/current_playlist_songs_controller.js

@@ -6,7 +6,7 @@ export default class extends Controller {
   static targets = ['item']
 
   static values = {
-    shouldPlayAll: Boolean
+    shouldPlay: Boolean
   }
 
   initialize () {
@@ -16,21 +16,24 @@ export default class extends Controller {
 
   itemTargetConnected (target) {
     const song = JSON.parse(target.dataset.songJson)
-    const shouldPlay = target.dataset.shouldPlay === 'true'
+    const songShouldPlay = target.dataset.shouldPlay === 'true'
     const targetIndex = this.itemTargets.indexOf(target)
 
     this.playlist.insert(targetIndex, song)
 
-    if (shouldPlay) {
+    if (songShouldPlay) {
       this.player.skipTo(targetIndex)
+
       delete target.dataset.shouldPlay
+      this.shouldPlayValue = false
     }
   }
 
   connect () {
-    if (this.shouldPlayAllValue) {
+    if (this.shouldPlayValue) {
+      // If no particular song is set to play, play the first song
       this.player.skipTo(0)
-      this.shouldPlayAllValue = false
+      this.shouldPlayValue = false
     }
 
     this.handleEvent('click', {

app/javascript/controllers/index.js

@@ -18,15 +18,19 @@ import MiniPlayerController from './mini_player_controller.js'
 
 import PlayerController from './player_controller.js'
 
-import PlaylistSongsController from './playlist_songs_controller.js'
+import SongsController from './songs_controller.js'
 
 import CurrentPlaylistSongsController from './current_playlist_songs_controller.js'
 
 import PlaylistSortableController from './playlist_sortable_controller.js'
 
 import SearchController from './search_controller.js'
 
-import PlaylistSongsBridgeController from './playlist_songs_bridge_controller.js'
+import SongsBridgeController from './songs_bridge_controller.js'
+
+import AlbumBridgeController from './album_bridge_controller.js'
+
+import PlaylistBridgeController from './playlist_bridge_controller.js'
 
 import FlashBridgeController from './flash_bridge_controller.js'
 
@@ -52,15 +56,19 @@ application.register('mini-player', MiniPlayerController)
 
 application.register('player', PlayerController)
 
-application.register('playlist-songs', PlaylistSongsController)
+application.register('songs', SongsController)
 
 application.register('current-playlist-songs', CurrentPlaylistSongsController)
 
 application.register('playlist-sortable', PlaylistSortableController)
 
 application.register('search', SearchController)
 
-application.register('playlist-songs-bridge', PlaylistSongsBridgeController)
+application.register('songs-bridge', SongsBridgeController)
+
+application.register('album-bridge', AlbumBridgeController)
+
+application.register('playlist-bridge', PlaylistBridgeController)
 
 application.register('flash-bridge', FlashBridgeController)
 

app/javascript/controllers/mixins/playing_song_indicator.js

@@ -11,13 +11,13 @@ export const installPlayingSongIndicator = (controller, getSongElements = () =>
   }
 
   const addPlayingSongIndicatorEventListener = () => {
-    document.addEventListener('playlistSongs:showPlaying', showPlayingSong)
-    document.addEventListener('playlistSongs:hidePlaying', hidePlayingSong)
+    document.addEventListener('songs:showPlaying', showPlayingSong)
+    document.addEventListener('songs:hidePlaying', hidePlayingSong)
   }
 
   const removePlayingSongIndicatorEventListener = () => {
-    document.removeEventListener('playlistSongs:showPlaying', showPlayingSong)
-    document.removeEventListener('playlistSongs:hidePlaying', hidePlayingSong)
+    document.removeEventListener('songs:showPlaying', showPlayingSong)
+    document.removeEventListener('songs:hidePlaying', hidePlayingSong)
   }
 
   const controllerConnectCallback = controller.connect.bind(controller)

app/javascript/controllers/player_controller.js

@@ -147,7 +147,7 @@ export default class extends Controller {
     this.timerInterval = setInterval(this.#setTimer.bind(this), 1000)
 
     // let playlist can show current playing song
-    dispatchEvent(document, 'playlistSongs:showPlaying')
+    dispatchEvent(document, 'songs:showPlaying')
   }
 
   #setPauseStatus = () => {
@@ -162,7 +162,7 @@ export default class extends Controller {
 
     if (!this.currentSong.id) {
       this.headerTarget.classList.remove('is-expanded')
-      dispatchEvent(document, 'playlistSongs:hidePlaying')
+      dispatchEvent(document, 'songs:hidePlaying')
     }
   }
 

app/javascript/controllers/playlist_bridge_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+import { installEventHandler } from './mixins/event_handler'
+import { isNativeApp } from '../helper'
+
+export default class extends Controller {
+  static get shouldLoad () {
+    return isNativeApp()
+  }
+
+  static values = {
+    id: Number
+  }
+
+  initialize () {
+    installEventHandler(this)
+  }
+
+  connect () {
+    this.handleEvent('click', {
+      on: this.element,
+      with: this.playBeginWith,
+      delegation: true
+    })
+  }
+
+  play () {
+    App.nativeBridge.playPlaylist(this.idValue)
+  }
+
+  playBeginWith = (event) => {
+    const { songId } = event.target.closest('[data-song-id]').dataset
+    App.nativeBridge.playPlaylistBeginWith(this.idValue, songId)
+  }
+}

app/javascript/controllers/playlist_songs_bridge_controller.js → app/javascript/controllers/songs_bridge_controller.js

@@ -14,7 +14,7 @@ export default class extends Controller {
   connect () {
     this.handleEvent('click', {
       on: this.element,
-      with: this.playSong,
+      with: this.playNow,
       delegation: true
     })
 
@@ -31,13 +31,9 @@ export default class extends Controller {
     })
   }
 
-  playAll ({ params }) {
-    App.nativeBridge.playAll(params.resourceType, params.resourceId)
-  }
-
-  playSong (event) {
+  playNow (event) {
     const { songId } = event.target.closest('[data-song-id]').dataset
-    App.nativeBridge.playSong(songId)
+    App.nativeBridge.playNow(songId)
   }
 
   playNext (event) {

app/javascript/native_bridge.js

@@ -1,30 +1,70 @@
 import { isAndroidApp, isiOSApp } from './helper'
 
 class NativeBridge {
-  playAll (resourceType, resourceId) {
+  playAlbum (albumId) {
     if (isiOSApp()) {
       window.webkit.messageHandlers.nativeApp.postMessage({
-        name: 'playAll',
-        resourceType,
-        resourceId: Number(resourceId)
+        name: 'playAlbum',
+        albumId: Number(albumId)
       })
     }
 
     if (isAndroidApp()) {
-      window.NativeBridge.playAll(resourceType, Number(resourceId))
+      window.NativeBridge.playAlbum(Number(albumId))
     }
   }
 
-  playSong (songId) {
+  playAlbumBeginWith (albumId, songId) {
     if (isiOSApp()) {
       window.webkit.messageHandlers.nativeApp.postMessage({
-        name: 'playSong',
+        name: 'playAlbumBeginWith',
+        albumId: Number(albumId),
         songId: Number(songId)
       })
     }
 
     if (isAndroidApp()) {
-      window.NativeBridge.playSong(Number(songId))
+      window.NativeBridge.playAlbumBeginWith(Number(albumId), Number(songId))
+    }
+  }
+
+  playPlaylist (playlistId) {
+    if (isiOSApp()) {
+      window.webkit.messageHandlers.nativeApp.postMessage({
+        name: 'playPlaylist',
+        playlistId: Number(playlistId)
+      })
+    }
+
+    if (isAndroidApp()) {
+      window.NativeBridge.playPlaylist(Number(playlistId))
+    }
+  }
+
+  playPlaylistBeginWith (playlistId, songId) {
+    if (isiOSApp()) {
+      window.webkit.messageHandlers.nativeApp.postMessage({
+        name: 'playPlaylistBeginWith',
+        playlistId: Number(playlistId),
+        songId: Number(songId)
+      })
+    }
+
+    if (isAndroidApp()) {
+      window.NativeBridge.playPlaylistBeginWith(Number(playlistId), Number(songId))
+    }
+  }
+
+  playNow (songId) {
+    if (isiOSApp()) {
+      window.webkit.messageHandlers.nativeApp.postMessage({
+        name: 'playNow',
+        songId: Number(songId)
+      })
+    }
+
+    if (isAndroidApp()) {
+      window.NativeBridge.playNow(Number(songId))
     }
   }