From 968923eec63ba5745ba9b7184ba9efce7c44a6c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arne=20Schl=C3=BCter?= Date: Sun, 14 Oct 2018 11:05:26 +0200 Subject: [PATCH] Seek to actual click position --- src/cljs/airsonic_ui/components/audio_player/views.cljs | 9 ++++++--- src/sass/app.sass | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/cljs/airsonic_ui/components/audio_player/views.cljs b/src/cljs/airsonic_ui/components/audio_player/views.cljs index 34d3f48..ab11cbb 100644 --- a/src/cljs/airsonic_ui/components/audio_player/views.cljs +++ b/src/cljs/airsonic_ui/components/audio_player/views.cljs @@ -53,18 +53,21 @@ [canvas {:class-name "current-progress-canvas" :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 "Calculates the position of the click and sets current playback accordingly" [ev] (let [x (- (.. ev -nativeEvent -pageX) (.. 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)]))) (defn buffered-part [seekable duration] - [:div.buffered-part {:on-click seek - :style {:width (str (min 100 (* (/ seekable duration) 100)) "%")}}]) + (let [width (min 100 (* (/ seekable duration) 100))] + [:div.buffered-part {:on-click seek + :style {:width (str "calc(" width "% - 1rem - 10px)")}}])) (defn current-song-info [song status] (let [current-time (:current-time status) diff --git a/src/sass/app.sass b/src/sass/app.sass index de43d68..a55e88e 100644 --- a/src/sass/app.sass +++ b/src/sass/app.sass @@ -89,7 +89,7 @@ .buffered-part position: absolute top: .5rem - left: .5rem + left: calc(.5rem + 5px) height: 1rem cursor: pointer