near/airsonic-ui
1
0
Fork 0
mirror of https://github.com/heyarne/airsonic-ui.git synced 2026-05-07 02:33:39 +02:00
Code Issues Projects Releases Wiki Activity

Volume Controls (#46)

Browse source 
* 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
This commit is contained in:
heyarne 2019-03-02 10:28:13 +01:00 • committed by GitHub
commit 53748941c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 152 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/cljs/airsonic_ui/components/audio_player/views.cljs
View file

@ -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"])]))