Seek to actual click position

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]
+  (let [width (min 100 (* (/ seekable duration) 100))]
     [:div.buffered-part {:on-click seek
-                       :style {:width (str (min 100 (* (/ seekable duration) 100)) "%")}}])
+                         :style {:width (str "calc(" width "% - 1rem - 10px)")}}]))
 
 (defn current-song-info [song status]
   (let [current-time (:current-time status)

src/sass/app.sass

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