Change icon based on volume level

src/cljs/airsonic_ui/audio/core.cljs

@@ -93,7 +93,7 @@
 
 (rf/reg-sub
  :audio/playlist
- (fn [_ _] (rf/subscribe [:audio/summary]))
+ :<- [:audio/summary]
  playlist)
 
 (defn current-song
@@ -104,7 +104,7 @@
 
 (rf/reg-sub
  :audio/current-song
- (fn [_ _] (rf/subscribe [:audio/playlist]))
+ :<- [:audio/playlist]
  current-song)
 
 (defn playback-status
@@ -114,7 +114,7 @@
 
 (rf/reg-sub
  :audio/playback-status
- (fn [_ _] (rf/subscribe [:audio/summary]))
+ :<- [:audio/summary]
  playback-status)
 
 (defn is-playing?
@@ -125,5 +125,5 @@
 
 (rf/reg-sub
  :audio/is-playing?
- (fn [_ _] (rf/subscribe [:audio/playback-status]))
+ :<- [:audio/playback-status]
  is-playing?)

src/cljs/airsonic_ui/components/audio_player/views.cljs

@@ -104,15 +104,23 @@
                          :on-mouse-move #(when (= 1 (.-buttons %))
                                            (set-volume %))}]]))
 
+(def toggle-volume-slider #(swap! volume-slider-visible? not))
+(def hide-volume-slider #(reset! volume-slider-visible? false))
+
 (defn volume-controls [playback-status]
+  (let [volume (:volume playback-status)
+        volume-icon (cond
+                      (> volume 0.66) :volume-high
+                      (> volume 0.1)  :volume-low
+                      :else           :volume-off)]
     [:div.button-controls.volume-controls
      (when @volume-slider-visible?
        [:div.button-menu
-      [:div.button-menu-closer {:on-click #(reset! volume-slider-visible? false)}]
-      [volume-slider (:volume playback-status)]])
+        [:div.button-menu-closer {:on-click hide-volume-slider}]
+        [volume-slider volume]])
      [:p.control>button.button.is-light
-    {:on-click #(swap! volume-slider-visible? not)}
-    [icon :volume-high]]])
+      {:on-click toggle-volume-slider}
+      [icon volume-icon]]]))
 
 (defn playback-mode-controls [playlist]
   (let [{:keys [repeat-mode playback-mode]} playlist