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

Seek to actual click position

Browse source
This commit is contained in:
Arne Schlüter 2018-10-14 11:05:26 +02:00
commit 968923eec6
2 changed files with 7 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -53,18 +53,21 @@
[canvas {:class-name "current-progress-canvas" [canvas {:class-name "current-progress-canvas"
:draw draw-progress} current-time seekable duration]) :draw draw-progress} current-time seekable duration])
;; FIXME: It's ugly to have the canvas padding and styling scattered everywhere (sass, drawing code above, and here)
(defn seek (defn seek
"Calculates the position of the click and sets current playback accordingly" "Calculates the position of the click and sets current playback accordingly"
[ev] [ev]
(let [x (- (.. ev -nativeEvent -pageX) (let [x (- (.. ev -nativeEvent -pageX)
(.. ev -target getBoundingClientRect -left)) (.. ev -target getBoundingClientRect -left))
width (.. ev -target -nextElementSibling -clientWidth)] width (- (.. ev -target -nextElementSibling -clientWidth) 10)] ;; <- 10 = 2 * canvas-padding
(dispatch [:audio-player/seek (/ x width)]))) (dispatch [:audio-player/seek (/ x width)])))
(defn buffered-part (defn buffered-part
[seekable duration] [seekable duration]
[:div.buffered-part {:on-click seek (let [width (min 100 (* (/ seekable duration) 100))]
:style {:width (str (min 100 (* (/ seekable duration) 100)) "%")}}]) [:div.buffered-part {:on-click seek
:style {:width (str "calc(" width "% - 1rem - 10px)")}}]))
(defn current-song-info [song status] (defn current-song-info [song status]
(let [current-time (:current-time status) (let [current-time (:current-time status)

2
src/sass/app.sass
View file

@ -89,7 +89,7 @@
.buffered-part .buffered-part
position: absolute position: absolute
top: .5rem top: .5rem
left: .5rem left: calc(.5rem + 5px)
height: 1rem height: 1rem
cursor: pointer cursor: pointer