feat: adjust playback when device is not connected

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
     })
 

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)

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,27 +120,41 @@ 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
     {:noreply, assign(socket, :track_ms, ms)}
   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

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?}
           />

lib/snippit_web/live/snippets_live.ex

@@ -18,17 +18,25 @@ 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", %{})
       end
     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
             <div
               class="flex-1 cursor-pointer"
               phx-click="track_clicked"
+              phx-target={@myself}
               phx-value-url={@now_playing_snippet.snippet.spotify_url}
             >
             <.track_display