Naming playlists

ui/assets/css/theme.scss

@@ -30,11 +30,6 @@ section.player {
   padding-bottom: 10px;
 }
 
-form button,
-a.button {
-  margin-top: 20px;
-}
-
-table button.is-small {
-  padding-top: .2em;
+table {
+  width: 100%;
 }

ui/lib/musicbox/player.ex

@@ -22,6 +22,7 @@ defmodule Musicbox.Player do
   def list_playlists, do: GenServer.call(__MODULE__, {:list_playlists})
   def shuffle, do: GenServer.cast(__MODULE__, {:shuffle})
   def create_playlist(name), do: GenServer.call(__MODULE__, {:create_playlist, name})
+  def rename_playlist(playlist), do: GenServer.call(__MODULE__, {:rename_playlist, playlist})
   def volume_up(step \\ 5), do: GenServer.call(__MODULE__, {:volume_up, step})
   def volume_down(step \\ 5), do: GenServer.call(__MODULE__, {:volume_down, step})
   def volume, do: GenServer.call(__MODULE__, {:current_volume})
@@ -119,6 +120,13 @@ defmodule Musicbox.Player do
     {:reply, info, state}
   end
 
+  def handle_call({:rename_playlist, %{"id" => id, "name" => name}}, _from, state) do
+    {id, playlist_name} = set_playlist_name(id, name)
+
+    MpdClient.Playlists.rename(id, playlist_name)
+    {:reply, playlist_name, state}
+  end
+
   def handle_call({:current_volume}, _from, state) do
     {:reply, current_volume(), state}
   end
@@ -217,6 +225,7 @@ defmodule Musicbox.Player do
 
       %{
         id: id,
+        name: maybe_display_name(id),
         song_count: Enum.count(songs),
         duration: duration,
         songs: get_playlist_songs(id)
@@ -231,7 +240,7 @@ defmodule Musicbox.Player do
     |> Enum.filter(&valid_song?/1)
     |> Enum.map(fn item ->
       song = Musicbox.Song.from_mpd(item)
-      %{ song | playlists: get_playlist_from_song(song) }
+      %{song | playlists: get_playlist_from_song(song)}
     end)
   end
 
@@ -246,6 +255,41 @@ defmodule Musicbox.Player do
       {:ok, song_list} = MpdClient.Playlists.list(item["playlist"])
       Enum.member?(song_list, path)
     end)
-    |> Enum.map(fn playlist -> playlist["playlist"] end)
+    |> Enum.map(fn playlist -> maybe_display_name(playlist["playlist"]) end)
+  end
+
+  defp set_playlist_name(id, name) do
+    new_name = case String.starts_with?(id, "#") do
+      true -> rename_changed_playlist(id, name)
+      false -> new_playlist_name(id, name)
+    end
+
+    {id, new_name}
+  end
+
+  defp rename_changed_playlist(old_name, new_name) do
+    [id | _] = String.split(old_name)
+
+    id
+    |> String.slice(1..-1)
+    |> new_playlist_name(new_name)
+  end
+
+  defp new_playlist_name(id, name) do
+    "#" <> id <> " - " <> name
+  end
+
+  defp maybe_display_name(name) do
+    case String.starts_with?(name, "#") do
+      true -> extract_playlist_name(name)
+      _ -> name
+    end
+  end
+
+  defp extract_playlist_name(name) do
+    case Regex.run(~r/(?<= - ).*$/, name) do
+      [h] -> h
+      _ -> name
+    end
   end
 end

ui/lib/musicbox_web/live/playlists_live.ex

@@ -29,7 +29,25 @@ defmodule MusicboxWeb.PlaylistsLive do
                   </span>
                 </button>
               </td>
-              <td><%= playlist.id %></td>
+              <td>
+                <%= if @edit_playlist == playlist.id do %>
+                  <form phx-submit="set_playlist_name">
+                    <input name="id" type="hidden" value="<%= playlist.id %>">
+                    <div class="field has-addons">
+                      <div class="control">
+                        <input name="name" autocomplete="off" class="input" placeholder="<%= playlist.name %>" />
+                      </div>
+                      <div class="control">
+                        <button class="button" type="submit">Update name</button>
+                      </div>
+                    </div>
+                  </form>
+                <% else %>
+                  <button phx-click="edit_playlist_name" value="<%= playlist.id %>" class="button">
+                    <%= playlist.name %>
+                  </button>
+                <% end %>
+              </td>
               <td><%= playlist.song_count %></td>
               <td><%= duration playlist.duration %></td>
             </tr>
@@ -41,10 +59,13 @@ defmodule MusicboxWeb.PlaylistsLive do
 
   def mount(_session, socket) do
     if connected?(socket), do: :timer.send_interval(10_000, self(), :tick)
-
     Player.subscribe(self())
 
-    {:ok, put_status(socket)}
+    socket = socket
+    |> put_status()
+    |> set_edit_playlist()
+
+    {:ok, socket}
   end
 
   def handle_info(:tick, socket) do
@@ -62,10 +83,33 @@ defmodule MusicboxWeb.PlaylistsLive do
     {:noreply, socket}
   end
 
+  def handle_event("edit_playlist_name", playlist, socket) when is_binary(playlist) do
+    {:noreply, set_edit_playlist(socket, playlist)}
+  end
+  def handle_event("edit_playlist_name", _, socket) do
+    {:noreply, socket}
+  end
+
+  def handle_event("set_playlist_name", playlist, socket) do
+    Player.rename_playlist(playlist)
+    {:noreply, socket}
+  end
+
   defp put_status(socket) do
     assign(socket, player: Player.status())
   end
 
+  defp set_edit_playlist(socket) do
+    assign(socket, edit_playlist: nil)
+  end
+
+  defp set_edit_playlist(socket, playlist) when is_binary(playlist) do
+    assign(socket, edit_playlist: playlist)
+  end
+  defp set_edit_playlist(socket, _playlist) do
+    assign(socket, edit_playlist: nil)
+  end
+
   defp duration(seconds) when is_binary(seconds) do
     {seconds, _} = Integer.parse(seconds)
     duration(seconds)

ui/lib/musicbox_web/live/songs_live.ex

@@ -43,7 +43,7 @@ defmodule MusicboxWeb.SongsLive do
                   <select name="playlist" id="playlist">
                     <option value="" selected>-- Select a Playlist --</option>
                     <%= for playlist <- @playlists do %>
-                      <option value="<%= playlist.id %>"><%= playlist.id %></option>
+                      <option value="<%= playlist.id %>"><%= playlist.name %></option>
                     <% end %>
                   </select>
                 </form>

ui/lib/musicbox_web/templates/song/new.html.eex

@@ -6,7 +6,8 @@
     <%= file_input f, :file, multiple: true, accept: ".mp3" %>
   </div>
 
-  <div>
+  <!-- lols until we change something here -->
+  <div style="margin-top: 20px;">
     <%= submit "Submit", class: "button is-primary" %>
   </div>
 <% end %>