diff --git a/README.md b/README.md index c28827ff..0c051bfb 100644 --- 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 index 2220a6c5..421f5765 100644 --- a/assets/js/controllers/audio_controller.js +++ b/assets/js/controllers/audio_controller.js @@ -9,9 +9,25 @@ 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 @@ -19,7 +35,13 @@ export default class extends Controller { 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 index 7258d809..b2bd5466 100644 --- 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 %>
  • +
    +

    -

    -

    <%= track_playlists.track.title %>

    -

    - <%= live_redirect track_playlists.track.user.username, - to: Routes.profile_index_path(@socket, :index, track_playlists.track.user.username) %> -

    -
    -
    + + <%= track_playlists.track.title %> + +

    +

    + <%= live_redirect track_playlists.track.user.username, + to: Routes.profile_index_path(@socket, :index, track_playlists.track.user.username) + + %> +

  • diff --git a/lib/rauversion_web/live/playlist_live/show.ex b/lib/rauversion_web/live/playlist_live/show.ex index e3441e23..f39a6d2f 100644 --- 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 index 456b0c4b..f1a2ee31 100644 --- 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 %>