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

21
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,10 +84,10 @@
(.. ev -target getBoundingClientRect -height))] (.. ev -target getBoundingClientRect -height))]
(dispatch [:audio-player/set-volume (- 1 y-ratio)]))) (dispatch [:audio-player/set-volume (- 1 y-ratio)])))
(defn volume-controls [playback-status] (defonce volume-slider-visible? (r/atom false))
(let [y-pos (* (- 1 (:volume playback-status)) 100)]
[:div.button-controls.volume-controls (defn volume-slider [volume]
[:div.button-menu (let [y-pos (* (- 1 volume) 100)]
[:svg.volume-bar {:width "100%", :height "100%"} [:svg.volume-bar {:width "100%", :height "100%"}
;; the translate(...) makes the 1px rects look smoother ;; the translate(...) makes the 1px rects look smoother
[:g {:transform "translate(-0.5,0)"} [:g {:transform "translate(-0.5,0)"}
@ -101,9 +102,17 @@
:on-mouse-up set-volume :on-mouse-up set-volume
;; fire the on-mouse-move only when left mouse button is pressed ;; fire the on-mouse-move only when left mouse button is pressed
:on-mouse-move #(when (= 1 (.-buttons %)) :on-mouse-move #(when (= 1 (.-buttons %))
(set-volume %))}]]] (set-volume %))}]]))
(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 [:p.control>button.button.is-light
[icon :volume-high]]])) {:on-click #(swap! volume-slider-visible? not)}
[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