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

Implement toggling of volume controls

Browse source
This commit is contained in:
heyarne 2019-02-20 18:31:37 +01:00
commit 51372d3e7f
2 changed files with 37 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
(ns airsonic-ui.components.audio-player.views (ns airsonic-ui.components.audio-player.views
(:require [re-frame.core :refer [subscribe dispatch]] (:require [re-frame.core :refer [subscribe dispatch]]
[reagent.core :as r]
[airsonic-ui.routes :as routes] [airsonic-ui.routes :as routes]
[airsonic-ui.helpers :as h] [airsonic-ui.helpers :as h]
[airsonic-ui.views.cover :refer [cover]] [airsonic-ui.views.cover :refer [cover]]
@ -83,27 +84,35 @@
(.. ev -target getBoundingClientRect -height))] (.. ev -target getBoundingClientRect -height))]
(dispatch [:audio-player/set-volume (- 1 y-ratio)]))) (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
;; fire the on-mouse-move only when left mouse button is pressed
:on-mouse-move #(when (= 1 (.-buttons %))
(set-volume %))}]]))
(defn volume-controls [playback-status] (defn volume-controls [playback-status]
(let [y-pos (* (- 1 (:volume playback-status)) 100)] [:div.button-controls.volume-controls
[:div.button-controls.volume-controls (when @volume-slider-visible?
[:div.button-menu [:div.button-menu
[:svg.volume-bar {:width "100%", :height "100%"} [:div.button-menu-closer {:on-click #(reset! volume-slider-visible? false)}]
;; the translate(...) makes the 1px rects look smoother [volume-slider (:volume playback-status)]])
[:g {:transform "translate(-0.5,0)"} [:p.control>button.button.is-light
;; background line {:on-click #(swap! volume-slider-visible? not)}
[:rect.inactive {:x "50%", :y 0, :width 1, :height "100%"}] [icon :volume-high]]])
;; 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
;; fire the on-mouse-move only when left mouse button is pressed
:on-mouse-move #(when (= 1 (.-buttons %))
(set-volume %))}]]]
[:p.control>button.button.is-light
[icon :volume-high]]]))
(defn playback-mode-controls [playlist] (defn playback-mode-controls [playlist]
(let [{:keys [repeat-mode playback-mode]} playlist (let [{:keys [repeat-mode playback-mode]} playlist

9
src/sass/app.sass
View file

@ -144,6 +144,15 @@
cursor: pointer cursor: pointer
fill: transparent fill: transparent
.button-menu-closer
// this element is needed so we can have a "click-outside"
position: fixed
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
.button-menu .button-menu
position: absolute position: absolute
z-index: 100 z-index: 100