change tracks on playlist (rauversion#20)

* change tracks on the playlist
SupaMic · Jul 12, 2022 · 15e20fe · 15e20fe
1 parent eb23c1f
commit 15e20fe
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -53,7 +53,9 @@ Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
 - [ ] Playlists
   - [x] add to playlist select playlist / modal first tab
   - [ ] sort songs on playlist
-  - [ ] playlist player
+  - [ ] like button playlist/show
+  - [ ] share button playlist/show
+  - [x] playlist player
 - [ ] A WYSIWYG editor for Markdown for Track/Playlist description
 - [ ] Telemetry for dashboard
 - [ ] Centralized player, fixed (bottom) across navigation

diff --git a/assets/js/controllers/audio_controller.js b/assets/js/controllers/audio_controller.js
@@ -9,17 +9,39 @@ export default class extends Controller {
 
   _wave = null
 
-  initialize() {}
+  _listener = null
+
+  initialize() {
+
+  }
 
   connect() {
+
+    console.log("AUDIO PLAY", this.element)
+
+    this._listener = window.addEventListener(`phx:change-playlist-track`, (e)=>{
+      console.log(e.detail)
+      this.element.dataset.audioPeaks = e.detail.audio_peaks
+      this.element.dataset.audioUrl = e.detail.audio_url
+
+      this.destroyWave();
+      this.initWave();
+    })
+
     if(!this.data.get('url')) {
       console.error("skip player, no url found!")
       return
     }
     console.log("INIT WAVEEE")
     this.initWave()
   }
+
   disconnect() {
+    this.destroyWave()
+    window.removeEventListener(this._listener)
+  }
+
+  destroyWave() {
     this._wave && this._wave.destroy()
   }
 

diff --git a/lib/rauversion_web/live/playlist_live/playlist_show_items_component.ex b/lib/rauversion_web/live/playlist_live/playlist_show_items_component.ex
@@ -16,16 +16,22 @@ defmodule RauversionWeb.PlaylistLive.PlaylistShowItemsComponent do
                   <%= for track_playlists <- @playlist.track_playlists do %>
                     <li class="py-4">
                       <div class="flex items-center space-x-4">
+                        <div class="flex-1 min-w-0">
+                          <p class="text-sm font-medium text-gray-900 truncate">
 
-                          <div class="flex-1 min-w-0">
-                            <p class="text-sm font-medium text-gray-900 truncate"><%= track_playlists.track.title %></p>
-                            <p class="text-sm text-gray-500 truncate">
-                              <%= live_redirect track_playlists.track.user.username,
-                                to: Routes.profile_index_path(@socket, :index, track_playlists.track.user.username) %>
-                            </p>
-                          </div>
-                        <div>
+                            <a href="#"
+                              phx-click="change-track"
+                              phx-value-id={track_playlists.track.id}>
+                              <%= track_playlists.track.title %>
+                            </a>
 
+                          </p>
+                          <p class="text-sm text-gray-500 truncate">
+                            <%= live_redirect track_playlists.track.user.username,
+                              to: Routes.profile_index_path(@socket, :index, track_playlists.track.user.username)
+
+                            %>
+                          </p>
                         </div>
                       </div>
                     </li>

diff --git a/lib/rauversion_web/live/playlist_live/show.ex b/lib/rauversion_web/live/playlist_live/show.ex
@@ -11,11 +11,40 @@ defmodule RauversionWeb.PlaylistLive.Show do
 
   @impl true
   def handle_params(%{"id" => id}, _, socket) do
+    playlist = get_playlist(id)
+
+    track =
+      case playlist.track_playlists do
+        [tp | _] -> tp.track
+        _ -> nil
+      end
+
     {:noreply,
      socket
      |> assign(:current_tab, "basic-info-tab")
      |> assign(:page_title, page_title(socket.assigns.live_action))
-     |> assign(:playlist, get_playlist(id))}
+     |> assign(:playlist, playlist)
+     |> assign(:track, track)}
+  end
+
+  @impl true
+  def handle_event("change-track", %{"id" => id}, socket) do
+    track =
+      Rauversion.Tracks.get_track!(id)
+      |> Rauversion.Repo.preload([:user, :mp3_audio_blob, :cover_blob])
+
+    {
+      :noreply,
+      push_event(
+        socket,
+        "change-playlist-track",
+        %{
+          track_id: track.id,
+          audio_peaks: Jason.encode!(Rauversion.Tracks.metadata(track, :peaks)),
+          audio_url: Rauversion.Tracks.blob_proxy_url(track, "mp3_audio")
+        }
+      )
+    }
   end
 
   @impl true

diff --git a/lib/rauversion_web/live/playlist_live/show.html.heex b/lib/rauversion_web/live/playlist_live/show.html.heex
@@ -59,8 +59,9 @@
                                 "data-controller": "audio",
                                 "data-audio-target": "player",
                                 "data-audio-height-value": 250,
-                                "data-audio-peaks": Jason.encode!(Rauversion.Tracks.metadata(@playlist, :peaks)),
-                                "data-audio-url": 'Rauversion.Tracks.blob_proxy_url(@playlist, "mp3_audio")' do %>
+                                "data-audio-playlist": true,
+                                "data-audio-peaks": Jason.encode!(Rauversion.Tracks.metadata(@track, :peaks)),
+                                "data-audio-url": Rauversion.Tracks.blob_proxy_url(@track, "mp3_audio") do %>
               <div class='controls flex items-center'>
                 <span class="relative z-0 inline-flex ml-2 pl-6 pt-6">
                   <button type="button"