Add new playing behavior on songs in album or playlist

Right now click song in album or playlist will add the specific song to the current playlist to play. Change the behavior to add all songs from the album or playlist and stated to play the specific song instead.

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/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/playlist_songs_bridge_controller.js

@@ -7,14 +7,25 @@ export default class extends Controller {
     return isNativeApp()
   }
 
+  static values = {
+    resourceType: String,
+    resourceId: Number
+  }
+
   initialize () {
     installEventHandler(this)
   }
 
   connect () {
     this.handleEvent('click', {
       on: this.element,
-      with: this.playSong,
+      with: this.playResourceBeginWith,
+      delegation: true
+    })
+
+    this.handleEvent('click', {
+      on: this.element,
+      with: this.playNow,
       delegation: true
     })
 
@@ -31,13 +42,18 @@ export default class extends Controller {
     })
   }
 
-  playAll ({ params }) {
-    App.nativeBridge.playAll(params.resourceType, params.resourceId)
+  playResource () {
+    App.nativeBridge.playResource(this.resourceTypeValue, this.resourceIdValue)
+  }
+
+  playResourceBeginWith = (event) => {
+    const { songId } = event.target.closest('[data-song-id]').dataset
+    App.nativeBridge.playResourceBeginWith(this.resourceTypeValue, this.resourceIdValue, songId)
   }
 
-  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,45 @@
 import { isAndroidApp, isiOSApp } from './helper'
 
 class NativeBridge {
-  playAll (resourceType, resourceId) {
+  playResource (resourceType, resourceId) {
     if (isiOSApp()) {
       window.webkit.messageHandlers.nativeApp.postMessage({
-        name: 'playAll',
+        name: 'playResource',
         resourceType,
         resourceId: Number(resourceId)
       })
     }
 
     if (isAndroidApp()) {
-      window.NativeBridge.playAll(resourceType, Number(resourceId))
+      window.NativeBridge.playResource(resourceType, Number(resourceId))
     }
   }
 
-  playSong (songId) {
+  playResourceBeginWith (resourceType, resourceId, songId) {
     if (isiOSApp()) {
       window.webkit.messageHandlers.nativeApp.postMessage({
-        name: 'playSong',
+        name: 'playResourceBeginWith',
+        resourceType,
+        resourceId: Number(resourceId),
+        songId: Number(songId)
+      })
+    }
+
+    if (isAndroidApp()) {
+      window.NativeBridge.playResourceBeginWith(resourceType, Number(resourceId), Number(songId))
+    }
+  }
+
+  playNow (songId) {
+    if (isiOSApp()) {
+      window.webkit.messageHandlers.nativeApp.postMessage({
+        name: 'playNow',
         songId: Number(songId)
       })
     }
 
     if (isAndroidApp()) {
-      window.NativeBridge.playSong(Number(songId))
+      window.NativeBridge.playNow(Number(songId))
     }
   }
 

app/views/albums/show.html.erb

@@ -1,6 +1,6 @@
 <% page_title_tag @album.name %>
 
-<div class='o-container o-container--narrow' data-controller='playlist-songs playlist-songs-bridge'>
+<div class='o-container o-container--narrow' data-controller='playlist-songs playlist-songs-bridge' data-playlist-songs-bridge-resource-type-value='album' data-playlist-songs-bridge-resource-id-value='<%= @album.id %>'>
   <div class='c-card c-card--horizontal c-card--center@narrow u-my-large'>
     <%= cover_image_tag @album, class: "c-card__image u-image-medium", data: {"test-id" => "album_image"} %>
     <div class='c-card__body'>
@@ -13,18 +13,16 @@
       </div>
       <div class='u-mt-large'>
         <%= button_to(
-              t("button.play_all"),
-              current_playlist_album_path(@album),
+              t("button.play"),
+              current_playlist_album_path(@album, should_play: true),
               method: :put,
               form_class: "u-display-inline-block",
               class: "c-button c-button--primary",
               form: {
                 data: {
                   "disabled-on-native" => "true",
                   "turbo-frame" => "turbo-playlist",
-                  "action" => "playlist-songs-bridge#playAll",
-                  "playlist-songs-bridge-resource-type-param" => "album",
-                  "playlist-songs-bridge-resource-id-param" => @album.id
+                  "action" => "playlist-songs-bridge#playResource"
                 }
               }
             ) %>
@@ -44,12 +42,13 @@
         <li class='c-list__item' data-playlist-songs-target='item' data-song-id='<%= song.id %>' data-test-id='album_song'>
           <div class='o-flex o-flex--justify-between o-flex--align-center'>
             <%= button_to(
-                  current_playlist_songs_path(song_id: song.id, should_play: true),
+                  current_playlist_album_path(@album, should_play: true, song_id: song.id),
+                  method: :put,
                   class: "c-button c-button--link u-w-100",
                   form_class: "o-flex__item--grow-1",
                   form: {
                     data: {
-                      "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay click->playlist-songs-bridge#playSong",
+                      "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay click->playlist-songs-bridge#playResourceBeginWith",
                       "turbo-frame" => "turbo-playlist",
                       "disabled-on-native" => "true"
                     }
@@ -75,16 +74,17 @@
                 <%= icon_tag "more-vertical", size: "small", title: t("label.more") %>
               </summary>
               <div class='c-dropdown__menu' data-dropdown-target="menu">
-                <%= link_to(
-                      t("label.go_to_artist"),
-                      artist_path(song.artist),
-                      class: "c-dropdown__item"
-                    ) %>
-                <%= link_to(
-                      t("label.add_to_playlist"),
-                      dialog_playlists_path(song_id: song.id, referer_url: current_url),
-                      data: {"turbo-frame" => ("turbo-dialog" unless native_app?)},
-                      class: "c-dropdown__item"
+                <%= button_to(
+                      t("button.play_now"),
+                      current_playlist_songs_path(song_id: song.id, should_play: true),
+                      form_class: "c-dropdown__item",
+                      form: {
+                        data: {
+                          "turbo-frame" => "turbo-playlist",
+                          "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay click->playlist-songs-bridge#playNow",
+                          "disabled-on-native" => "true"
+                        }
+                      }
                     ) %>
                 <%= button_to(
                       t("button.play_next"),
@@ -110,6 +110,17 @@
                         }
                       }
                     ) %>
+                <%= link_to(
+                      t("label.add_to_playlist"),
+                      dialog_playlists_path(song_id: song.id, referer_url: current_url),
+                      data: {"turbo-frame" => ("turbo-dialog" unless native_app?)},
+                      class: "c-dropdown__item"
+                    ) %>
+                <%= link_to(
+                      t("label.go_to_artist"),
+                      artist_path(song.artist),
+                      class: "c-dropdown__item"
+                    ) %>
               </div>
             </details>
           </div>

app/views/current_playlist/songs/_song.html.erb

@@ -3,7 +3,7 @@
   data-current-playlist-songs-target='item'
   data-song-id='<%= song.id %>'
   data-song-json='<%= song_json_builder(song).target! %>'
-  data-should-play='<%= params[:should_play] %>'
+  data-should-play='<%= local_assigns[:should_play] ? should_play : false %>'
   draggable='true'
   data-test-id='current_playlist_song'>
 

app/views/current_playlist/songs/create.turbo_stream.erb

@@ -2,10 +2,10 @@
   <%= turbo_stream.after "#{dom_id(@playlist)}_#{dom_id(@playlist.songs.second_to_last)}", partial: 'current_playlist/songs/song', locals: { song: @song, playlist: @playlist } %>
 <% else %>
   <% if @current_song_position.zero? %>
-    <%= turbo_stream.before "#{dom_id(@playlist)}_#{dom_id(@playlist.songs.second)}", partial: 'current_playlist/songs/song', locals: { song: @song, playlist: @playlist } %>
+    <%= turbo_stream.before "#{dom_id(@playlist)}_#{dom_id(@playlist.songs.second)}", partial: 'current_playlist/songs/song', locals: { song: @song, playlist: @playlist, should_play: params[:should_play] } %>
   <% else %>
     <%# add song next to the current_song %>
-    <%= turbo_stream.after "#{dom_id(@playlist)}_song_#{params[:current_song_id]}", partial: 'current_playlist/songs/song', locals: { song: @song, playlist: @playlist } %>
+    <%= turbo_stream.after "#{dom_id(@playlist)}_song_#{params[:current_song_id]}", partial: 'current_playlist/songs/song', locals: { song: @song, playlist: @playlist, should_play: params[:should_play] } %>
   <% end %>
 <% end %>
 

app/views/current_playlist/songs/index.html.erb

@@ -1,7 +1,7 @@
 <div
   data-test-id='current_playlist'
   data-controller='current-playlist-songs'
-  data-current-playlist-songs-should-play-all-value='<%= params[:should_play_all] || false %>'>
+  data-current-playlist-songs-should-play-value='<%= @should_play %>'>
   <% if @songs.empty? %>
     <%= empty_alert_tag %>
   <% else %>
@@ -17,6 +17,10 @@
         </div>
       </details>
     </div>
-    <%= render partial: "current_playlist/songs/list", locals: {playlist: @playlist, songs: @songs} %>
+    <ul class="c-list u-my-tiny" data-controller="playlist-sortable" data-playlist-id='<%= @playlist.id %>'>
+      <% @songs.each do |song| %>
+        <%= render partial: "current_playlist/songs/song", locals: {song: song, playlist: @playlist, should_play: @should_play_song_id == song.id} %>
+      <% end %>
+    </ul>
   <% end %>
 </div>

app/views/favorite_playlist/songs/index.html.erb

@@ -1,5 +1,5 @@
 <div class='o-container o-container--narrow' data-test-id='favorite_playlist'>
-  <div data-controller='playlist-songs playlist-songs-bridge'>
+  <div data-controller='playlist-songs playlist-songs-bridge' data-playlist-songs-bridge-resource-type-value='playlist' data-playlist-songs-bridge-resource-id-value='<%= @playlist.id %>'>
     <div class="c-card c-card--horizontal u-my-large">
       <div class='c-card__body'>
         <h1 class='c-card__body__title' data-test-id='playlist_name'><%= @playlist.name %></h1>
@@ -12,18 +12,16 @@
         <div class='u-mt-large'>
           <% unless @songs.blank? %>
             <%= button_to(
-                  t("button.play_all"),
-                  current_playlist_playlist_path(@playlist),
+                  t("button.play"),
+                  current_playlist_playlist_path(@playlist, should_play: true),
                   method: :put,
                   class: "c-button c-button--primary",
                   form_class: "u-display-inline-block",
                   form: {
                     data: {
                       "disabled-on-native" => "true",
                       "turbo-frame" => "turbo-playlist",
-                      "action" => "playlist-songs-bridge#playAll",
-                      "playlist-songs-bridge-resource-type-param" => "playlist",
-                      "playlist-songs-bridge-resource-id-param" => @playlist.id
+                      "action" => "playlist-songs-bridge#playResource"
                     }
                   }
                 ) %>