From cda46b7c4576b2b7a864a6396c761de3e7fa27d7 Mon Sep 17 00:00:00 2001 From: Lee Araneta Date: Fri, 2 Aug 2024 09:35:10 -0400 Subject: [PATCH] feat: adjust playback when device is not connected --- assets/js/app.js | 7 +++- lib/snippit/spotify_api.ex | 6 ++- lib/snippit_web/live/add_snippet_live.ex | 47 ++++++++++++++++-------- lib/snippit_web/live/home_live.ex | 18 ++------- lib/snippit_web/live/snippets_live.ex | 25 +++++++++++-- 5 files changed, 67 insertions(+), 36 deletions(-) diff --git a/assets/js/app.js b/assets/js/app.js index e79512a..d41d7b3 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -80,6 +80,7 @@ hooks.root = { const player_url = track_window.current_track.uri checkForOutOfBoundsTrack(position) updatePlayId({ paused, position }) + console.log(paused, position, loading, track_window) this.pushEvent('player_state_changed', { paused, position, loading, player_url }) } @@ -104,7 +105,7 @@ hooks.root = { startMs = start_ms endMs = end_ms this.player.pause().then(() => { - this.player.seek(start_ms) + this.player.seek(startMs) }) }) @@ -171,6 +172,7 @@ hooks.root = { }) this.handleEvent('seek', ({ ms }) => { + console.log('hi', ms) this.player.seek(ms) }) @@ -286,11 +288,14 @@ hooks.track = { backgroundEl.addEventListener('mousedown', (e) => { const x = e.clientX - rect.left applyXTransformToMarker('track', x) + isPlaying = false state.track.isDragging = true }) this.handleEvent('initialize_audio', ({ end_ms, spotify_url }) => { this.spotifyUrl = spotify_url + applyXTransformToMarker('track', 0) + isPlaying = false durationMs = end_ms }) diff --git a/lib/snippit/spotify_api.ex b/lib/snippit/spotify_api.ex index 57eed3b..35e0200 100644 --- a/lib/snippit/spotify_api.ex +++ b/lib/snippit/spotify_api.ex @@ -62,7 +62,6 @@ defmodule Snippit.SpotifyApi do } end - @spec search_tracks(any(), map()) :: list() def search_tracks(token, search_params) do keys = ["track", "album", "artist"] search_query = search_params @@ -86,6 +85,11 @@ defmodule Snippit.SpotifyApi do put(token, "https://api.spotify.com/v1/me/player/play", body, params) end + def pause(token, device_id) do + params = %{device_id: device_id} + put(token, "https://api.spotify.com/v1/me/player/play", %{}, params) + end + def set_device_id(token, device_id) do body = %{device_ids: [device_id]} put(token, "https://api.spotify.com/v1/me/player", body) diff --git a/lib/snippit_web/live/add_snippet_live.ex b/lib/snippit_web/live/add_snippet_live.ex index d2c85cd..774f34f 100644 --- a/lib/snippit_web/live/add_snippet_live.ex +++ b/lib/snippit_web/live/add_snippet_live.ex @@ -18,6 +18,7 @@ defmodule SnippitWeb.AddSnippet do |> assign(:track_search_results, []) |> assign(:selected_track, nil) |> assign(:start_ms, 0) + |> assign(:track_ms, 0) |> assign(:end_ms, nil) |> assign(:track_width_px, 0) |> assign(:collection_to_associate, nil) @@ -49,8 +50,8 @@ defmodule SnippitWeb.AddSnippet do end def handle_event("track_selected", %{"idx" => idx}, socket) do - %{user_token: user_token, device_id: device_id} = socket.assigns - SpotifyApi.set_device_id(user_token, device_id) + IO.inspect(socket.assigns.device_id) + # SpotifyApi.set_device_id(user_token, device_id) |> IO.inspect() selected_track = socket.assigns.track_search_results |> Enum.at(String.to_integer(idx)) @@ -119,7 +120,11 @@ defmodule SnippitWeb.AddSnippet do end def handle_event("track_marker_changed", ms, socket) do - {:noreply, push_event(socket, "seek", %{ms: ms})} + if !socket.assigns.device_connected? do + {:noreply, assign(socket, :track_ms, ms)} + else + {:noreply, push_event(socket, "seek", %{ms: ms})} + end end def handle_event("position_updated", ms, socket) do @@ -127,19 +132,29 @@ defmodule SnippitWeb.AddSnippet do end def handle_event("toggle_play", _, socket) do - if socket.assigns.player_url == socket.assigns.selected_track.spotify_url do - {:noreply, push_event(socket, "toggle_play", %{})} - else - Task.start(fn -> - SpotifyApi.play_track_from_ms( - socket.assigns.user_token, - socket.assigns.device_id, - socket.assigns.selected_track.spotify_url, - socket.assigns.start_ms - ) - end) - {:noreply, socket} - end + %{ + device_connected?: device_connected?, + player_url: player_url, + selected_track: selected_track, + playing?: playing?, + user_token: user_token, + device_id: device_id, + track_ms: track_ms + } = socket.assigns + cond do + device_connected? && player_url == selected_track.spotify_url -> + {:noreply, push_event(socket, "toggle_play", %{})} + !device_connected? && playing? -> + Task.start(fn -> + SpotifyApi.pause(user_token, device_id) + end) + {:noreply, socket} + true -> + Task.start(fn -> + SpotifyApi.play_track_from_ms(user_token, device_id, selected_track.spotify_url, track_ms) + end) + {:noreply, socket} + end end def handle_event("backward", _, socket) do diff --git a/lib/snippit_web/live/home_live.ex b/lib/snippit_web/live/home_live.ex index f42c518..ea604b3 100644 --- a/lib/snippit_web/live/home_live.ex +++ b/lib/snippit_web/live/home_live.ex @@ -32,6 +32,7 @@ defmodule SnippitWeb.HomeLive do |> assign(:collection_snippets, []) |> assign(:user_token, session["user_token"]) |> assign(:device_id, nil) + |> assign(:device_connected?, false) |> assign(:playing?, false) |> assign(:loading?, false) |> assign(:player_url, nil) @@ -84,11 +85,12 @@ defmodule SnippitWeb.HomeLive do def handle_event("device_not_connected", _, socket) do - {:noreply, reset_audio_state(socket)} + {:noreply, assign(socket, :device_connected?, false)} end def handle_event("player_state_changed", state, socket) do socket = socket + |> assign(:device_connected?, true) |> assign(:playing?, !state["paused"]) |> assign(:player_url, state["player_url"]) |> assign(:loading?, state["loading"]) @@ -97,19 +99,6 @@ defmodule SnippitWeb.HomeLive do {:noreply, socket} end - defp reset_audio_state(socket) do - socket - |> assign(:player_url, nil) - |> assign(:playing?, false) - end - - def handle_event("track_clicked", %{"url" => url}, socket) do - socket = socket - |> reset_audio_state() - |> push_event("track_clicked", %{"url" => url}) - {:noreply, socket} - end - def handle_info({:snippet_deleted, %CollectionSnippet{id: id}}, socket) do socket = Phoenix.Component.update(socket, :collection_snippets, fn collection_snippets -> Enum.filter(collection_snippets, fn collection_snippet -> @@ -289,6 +278,7 @@ defmodule SnippitWeb.HomeLive do audio_ms={@audio_ms} player_url={@player_url} device_id={@device_id} + device_connected?={@device_connected?} playing?={@playing?} loading?={@loading?} /> diff --git a/lib/snippit_web/live/snippets_live.ex b/lib/snippit_web/live/snippets_live.ex index 70c4738..a920d93 100644 --- a/lib/snippit_web/live/snippets_live.ex +++ b/lib/snippit_web/live/snippets_live.ex @@ -18,8 +18,16 @@ defmodule SnippitWeb.SnippetsLive do end def play_snippet(socket, snippet) do - socket = if socket.assigns.player_url == snippet.snippet.spotify_url do - if socket.assigns.playing? do + %{ + player_url: player_url, + user_token: user_token, + device_id: device_id, + device_connected?: device_connected?, + playing?: playing? + } = socket.assigns + + socket = if player_url == snippet.snippet.spotify_url && device_connected? do + if playing? do push_event(socket, "pause", %{}) else push_event(socket, "restart", %{}) @@ -27,8 +35,8 @@ defmodule SnippitWeb.SnippetsLive do else Task.start(fn -> SpotifyApi.play_track_from_ms( - socket.assigns.user_token, - socket.assigns.device_id, + user_token, + device_id, snippet.snippet.spotify_url, snippet.snippet.start_ms ) @@ -98,6 +106,13 @@ defmodule SnippitWeb.SnippetsLive do {:noreply, socket} end + def handle_event("track_clicked", %{"url" => url}, socket) do + socket = socket + |> assign(:now_playing_snippet, nil) + |> push_event("track_clicked", %{"url" => url}) + {:noreply, socket} + end + defp get_human_readable_time(ms) do secs = trunc(ms / 1000) remainder = rem(secs, 60) @@ -128,6 +143,7 @@ defmodule SnippitWeb.SnippetsLive do collections={@collections} selected_collection={@selected_collection} device_id={@device_id} + device_connected?={@device_connected?} playing?={@playing?} player_url={@player_url} track_ms={@audio_ms} @@ -237,6 +253,7 @@ defmodule SnippitWeb.SnippetsLive do
<.track_display