participate to set volume

assets/css/type.scss

@@ -215,11 +215,19 @@ a:hover .link {
       transform 200ms ease-in;
   }
 
-  &:hover {
+  &:hover:not(.button--vol--disabled) {
     cursor: pointer;
     .inner {
       background: $white;
       transform: scale(2);
     }
   }
+
+  &--disabled {
+    cursor: default;
+    .inner {
+      background: none;
+      border: 1px solid $border;
+    }
+  }
 }

lib/pr_web/live/user_header_live/user_header_live.ex

@@ -42,7 +42,7 @@ defmodule PRWeb.UserHeaderLive do
           <.play_pause play_state={@play_state} show_skip={@show_skip && @num_unplayed > 1} />
         <% end %>
         <%= if @show_volume or @current_user.is_trusted do %>
-          <.volume max_vol={@max_vol} />
+          <.volume max_vol={@max_vol} participated={@participated} />
         <% end %>
       </div>
       <.online_users users={@users} />
@@ -137,6 +137,7 @@ defmodule PRWeb.UserHeaderLive do
         super_likes: super_likes,
         play_state: play_state,
         num_unplayed: Queue.num_unplayed(),
+        participated: Queue.has_participated?(%User{id: user_id}),
         max_vol: max_vol()
       )
       # Empty map to append on join/leave
@@ -194,8 +195,15 @@ defmodule PRWeb.UserHeaderLive do
     {:noreply, assign(socket, play_state: play_state)}
   end
 
-  def handle_info({Music, num_unplayed, :queue_updated}, socket) do
-    {:noreply, assign(socket, num_unplayed: num_unplayed)}
+  def handle_info(
+        {Music, num_unplayed, :queue_updated},
+        %{assigns: %{current_user: %User{id: user_id}}} = socket
+      ) do
+    {:noreply,
+     assign(socket,
+       num_unplayed: num_unplayed,
+       participated: Queue.has_participated?(%User{id: user_id})
+     )}
   end
 
   def handle_info({Music, _, _}, socket) do
@@ -242,13 +250,17 @@ defmodule PRWeb.UserHeaderLive do
     {:noreply, socket}
   end
 
-  def handle_event("volume", %{"value" => volume}, socket) do
+  def handle_event("volume", %{"value" => volume}, %{assigns: %{participated: true}} = socket) do
     SonosAPI.set_volume(volume)
     %{assigns: %{current_user: %{first_name: name}}} = socket
     Logger.info("Vol #{volume} – #{name}")
     {:noreply, socket}
   end
 
+  def handle_event("volume", _, socket) do
+    {:noreply, socket}
+  end
+
   defp handle_joins(socket, joins) do
     Enum.reduce(joins, socket, fn {user, %{metas: _, user: user_data}}, socket ->
       assign(socket, :users, Map.put(socket.assigns.users, user, user_data))

lib/pr_web/live/user_header_live/volume.html.heex

@@ -4,10 +4,15 @@
   </span>
   <%= for volume <- 5..@max_vol//5 do %>
     <button
-      title={"Set volume to #{volume}"}
-      class="button--vol"
+      title={
+        if @participated,
+        do: "Set volume to #{volume}",
+        else: "Queue a track to set volume"
+      }
+      class={if @participated, do: "button--vol", else: "button--vol button--vol--disabled"}
       phx-click="volume"
       value={volume}
+      disabled={!@participated}
     >
       <span class="inner">Set to <%= volume %></span>
     </button>