tracks, playlist show

app/javascript/controllers/audio_player_controller.js

@@ -258,5 +258,18 @@ export default class extends Controller {
       ? playlist[playlist.length - 1]
       : playlist[currentTrackIndex - 1];
   }
+
+  removeSong(e) {
+    e.preventDefault()
+    const trackIdToRemove = e.currentTarget.dataset.value
+    const { playlist } = store.getState();
+
+    document.querySelector(`#sidebar-track-${trackIdToRemove}`).remove()
+
+    // Filter out the track ID to remove
+    const newPlaylist = playlist.filter(trackId => trackId !== trackIdToRemove);
+
+    store.setState({ playlist: newPlaylist });
+  }
 }
 

app/javascript/controllers/track_detector_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { get } from '@rails/request.js'
 
 // it locates and append tracks to the playlist sidebar
 export default class extends Controller {
@@ -14,4 +15,16 @@ export default class extends Controller {
     const playlist = new Set([...store.getState().playlist, ...newIds])
     store.setState({ playlist: Array.from(playlist) })
   }
+
+  async addGroup(e) {
+    const newIds = this.trackTargets.map((track) => track.dataset.trackId)
+    const playlist = new Set([...store.getState().playlist, ...newIds])
+    store.setState({ playlist: Array.from(playlist) })
+
+    console.log("Added group of tracks:", Array.from(newIds))
+
+    await get(e.currentTarget.dataset.trackInitPath, { 
+      responseKind: "turbo-stream", 
+    })
+  }
 }

app/models/track.rb

@@ -342,6 +342,10 @@ def self.get_tracks_by_tag(tag)
     includes(:user).where("? = ANY (tags)", tag)
   end
 
+  def duration
+    "xx;xx"
+  end
+
   def podcast_summarizer
     file_path = ActiveStorage::Blob.service.path_for(mp3_audio.key)
     summarizer = AudioSummarizer.new(file_path)

app/views/player/_sidebar.erb

@@ -57,7 +57,7 @@
                 class="-my-5 divide-y divide-gray-200 dark:divide-gray-800 h-full"
               >
                 <%= turbo_frame_tag "player-sidebar-tracks-list" do %>
-                  oliii
+                  ....
                 <% end %>
               </ul>
             </div>

app/views/player/_track.erb

@@ -18,7 +18,7 @@
 
       <div class="">
         <button
-          data-action="click->player#removeSong"
+          data-action="click->audio-player#removeSong"
           data-value="<%= item.id %>"
           class="inline-flex items-center shadow-sm border border-gray-300 dark:border-gray-700 rounded-full text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-300 dark:bg-black dark:hover:bg-gray-900"
         >

app/views/playlists/_products.erb

@@ -1,5 +1,5 @@
 <% if @playlist.products.any? %>
-  <div class="mt-8">
+  <div class="sm:mt-8">
     <h2 class="text-2xl font-bold mb-4">
       <%= t("playlists.available_products") %>
     </h2>