From 6e1664327f776f4b51dc110e82470d85b7ed0d87 Mon Sep 17 00:00:00 2001
From: heyarne <arne@schlueter.is>
Date: Wed, 20 Feb 2019 18:51:39 +0100
Subject: [PATCH] Change icon based on volume level

---
 src/cljs/airsonic_ui/audio/core.cljs          |  8 +++----
 .../components/audio_player/views.cljs        | 24 ++++++++++++-------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/cljs/airsonic_ui/audio/core.cljs b/src/cljs/airsonic_ui/audio/core.cljs
index 6715e93..ba0fe2d 100644
--- a/src/cljs/airsonic_ui/audio/core.cljs
+++ b/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?)
diff --git a/src/cljs/airsonic_ui/components/audio_player/views.cljs b/src/cljs/airsonic_ui/components/audio_player/views.cljs
index ba4d0c0..b632021 100644
--- a/src/cljs/airsonic_ui/components/audio_player/views.cljs
+++ b/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]
-  [: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)]])
-   [:p.control>button.button.is-light
-    {:on-click #(swap! volume-slider-visible? not)}
-    [icon :volume-high]]])
+  (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 hide-volume-slider}]
+        [volume-slider volume]])
+     [:p.control>button.button.is-light
+      {:on-click toggle-volume-slider}
+      [icon volume-icon]]]))
 
 (defn playback-mode-controls [playlist]
   (let [{:keys [repeat-mode playback-mode]} playlist