Volume Controls (#46)

* Implement always-visible volume controls

* Implement toggling of volume controls

* Change icon based on volume level

* Add volume control keyboard shortcuts

* Check left mouse button for all events fired when changing the volume

src/cljs/airsonic_ui/components/audio_player/events.cljs

@@ -67,3 +67,18 @@
  (fn [{:keys [db]} [_ percentage]]
    (let [duration (:duration (playlist/peek (get-in db [:audio :playlist])))]
      {:audio/seek [percentage duration]})))
+
+(rf/reg-event-fx
+ :audio-player/set-volume
+ (fn [_ [_ percentage]]
+   {:audio/set-volume percentage}))
+
+(rf/reg-event-fx
+ :audio-player/increase-volume
+ (fn [_ _]
+   {:audio/increase-volume nil}))
+
+(rf/reg-event-fx
+ :audio-player/decrease-volume
+ (fn [_ _]
+   {:audio/decrease-volume nil}))

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

@@ -1,5 +1,6 @@
 (ns airsonic-ui.components.audio-player.views
   (:require [re-frame.core :refer [subscribe dispatch]]
+            [reagent.core :as r]
             [airsonic-ui.routes :as routes]
             [airsonic-ui.helpers :as h]
             [airsonic-ui.views.cover :refer [cover]]
@@ -53,7 +54,7 @@
      [:span.song-title (:title song)]]]])
 
 (defn playback-controls [is-playing?]
-  [:div.playback-controls
+  [:div.button-controls.playback-controls
    [:div.field.has-addons
     (let [buttons [[:media-step-backward :audio-player/previous-song]
                    [(if is-playing? :media-pause :media-play) :audio-player/toggle-play-pause]
@@ -78,19 +79,61 @@
                        (second))]
     (h/muted-dispatch [:audio-player/set-repeat-mode next-mode])))
 
+(defn set-volume [ev]
+  (when (= 1 (.-buttons ev)) ;; only on left-click
+    (let [y-ratio (/ (.. ev -nativeEvent -offsetY)
+                     (.. ev -target getBoundingClientRect -height))]
+      (dispatch [:audio-player/set-volume (- 1 y-ratio)]))))
+
+(defonce volume-slider-visible? (r/atom false))
+
+(defn volume-slider [volume]
+  (let [y-pos (* (- 1 volume) 100)]
+    [:svg.volume-bar {:width "100%", :height "100%"}
+     ;; the translate(...) makes the 1px rects look smoother
+     [:g {:transform "translate(-0.5,0)"}
+      ;; background line
+      [:rect.inactive {:x "50%", :y 0, :width 1, :height "100%"}]
+      ;; below are the line and circle that show the current volume
+      [:rect.active {:x "50%", :y (str y-pos "%"),
+                     :width 1, :height (str (- 100 y-pos) "%")}]]
+     [:circle.active {:cx "50%", :cy (str y-pos "%"), :r 3}]
+     [:rect.click-dummy {:x 0, :y 0, :width "100%", :height "100%"
+                         :on-mouse-down set-volume
+                         :on-mouse-up set-volume
+                         :on-mouse-move 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 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
         button :p.control>button.button.is-light
         shuffle-button (h/add-classes button (when (= playback-mode :shuffled) :is-primary))
         repeat-button (h/add-classes button (case repeat-mode
-                                            :repeat-single :is-info
-                                            :repeat-all :is-primary
-                                            nil))
+                                              :repeat-single :is-info
+                                              :repeat-all :is-primary
+                                              nil))
         repeat-title (case repeat-mode
                        :repeat-all "Repeating current queue, click to repeat current track"
                        :repeat-single "Repeating current track, click to repeat none"
                        "Click to repeat current queue")]
-    [:div.playback-mode-controls
+    [:div.button-controls.playback-mode-controls
      [:div.button-group>div.field.has-addons
       ^{:key :shuffle-button} [shuffle-button {:on-click (toggle-shuffle playback-mode)
                                                :title "Shuffle"} [icon :random]]
@@ -109,6 +152,7 @@
         [playback-info current-song playback-status]
         [progress-indicators current-song playback-status]
         [playback-controls is-playing?]
+        [volume-controls playback-status]
         [playback-mode-controls playlist]]
        ;; not playing anything
        [:p.navbar-item.idle-notification "No audio playing"])]))

src/cljs/airsonic_ui/components/keyboard_shortcuts/config.cljs

@@ -14,6 +14,12 @@
    ["→" "Next song"
     [:audio-player/next-song]
     [{:keyCode 39}]]
+   ["+" "Increase volume"
+    [:audio-player/increase-volume]
+    [{:keyCode 171}]]
+   ["-" "Decrease volume"
+    [:audio-player/decrease-volume]
+    [{:keyCode 173}]]
    ["?" "Show / hide keyboard shortcut help"
     [:bulma.modal.events/toggle :keyboard-shortcuts-help]
     [{:keyCode 63}]]])