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

Draw buffered instead of seekable part; fixes #37

Browse source
This commit is contained in:
Arne Schlüter 2018-12-29 18:53:56 +01:00
commit d74ef2d41a
2 changed files with 19 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/cljs/airsonic_ui/audio/core.cljs
View file

@ -10,6 +10,11 @@
(defonce audio (atom nil)) (defonce audio (atom nil))
(defn normalize-time-ranges [time-ranges]
(if (> (.-length time-ranges) 0)
(.end time-ranges (dec (.-length time-ranges)))
0))
(defn ->status (defn ->status
"Takes an audio object and returns a map describing its current status" "Takes an audio object and returns a map describing its current status"
[elem] [elem]
@ -17,12 +22,10 @@
:paused? (.-paused elem) :paused? (.-paused elem)
:current-src (.-currentSrc elem) :current-src (.-currentSrc elem)
:current-time (.-currentTime elem) :current-time (.-currentTime elem)
:seekable (let [seekable (.-seekable elem)] :seekable (normalize-time-ranges (.-seekable elem))
(if (> (.-length seekable) 0) :buffered (normalize-time-ranges (.-buffered elem))})
(.end seekable (dec (.-length seekable)))
0))})
; explanation of these events: https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics ; explanation of these events: https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics
(defn attach-listeners! [el] (defn attach-listeners! [el]

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

@ -10,14 +10,14 @@
;; FIXME: Sometimes items don't have a duration ;; FIXME: Sometimes items don't have a duration
(def progress-bar-color "rgb(93,93,93)") (def progress-bar-color "rgb(93,93,93)")
(def progress-bar-color-buffered "rgb(123,123,123)") (def progress-bar-color-buffered "rgb(143,143,143)")
(def progress-bar-color-active "whitesmoke") (def progress-bar-color-active "whitesmoke")
(defn draw-progress [ctx current-time seekable duration] (defn draw-progress [ctx current-time buffered duration]
(let [width (.. ctx -canvas -clientWidth) (let [width (.. ctx -canvas -clientWidth)
height (.. ctx -canvas -clientHeight) height (.. ctx -canvas -clientHeight)
padding 5 padding 5
seekable-x (+ padding (* (- width (* 2 padding)) (min 1 (/ seekable duration)))) buffered-x (+ padding (* (- width (* 2 padding)) (min 1 (/ buffered duration))))
current-x (+ padding (* (- width (* 2 padding)) (min 1 (/ current-time duration))))] current-x (+ padding (* (- width (* 2 padding)) (min 1 (/ current-time duration))))]
;; vertically center everything ;; vertically center everything
(.translate ctx 0.5 (+ (Math/ceil (/ height 2)) 0.5)) (.translate ctx 0.5 (+ (Math/ceil (/ height 2)) 0.5))
@ -33,7 +33,7 @@
(doto ctx (doto ctx
(.beginPath) (.beginPath)
(.moveTo padding 0) (.moveTo padding 0)
(.lineTo seekable-x 0) (.lineTo buffered-x 0)
(.stroke)) (.stroke))
;; draw the part that's already played ;; draw the part that's already played
(set! (.-strokeStyle ctx) progress-bar-color-active) (set! (.-strokeStyle ctx) progress-bar-color-active)
@ -49,9 +49,9 @@
(.arc current-x 0 (/ padding 2) 0 (* Math/PI 2)) (.arc current-x 0 (/ padding 2) 0 (* Math/PI 2))
(.fill)))) (.fill))))
(defn current-progress [current-time seekable duration] (defn current-progress [current-time buffered duration]
[canvas {:class "current-progress-canvas" [canvas {:class "current-progress-canvas"
:draw #(draw-progress % current-time seekable duration)}]) :draw #(draw-progress % current-time buffered duration)}])
;; FIXME: It's ugly to have the canvas padding and styling scattered everywhere (sass, drawing code above, and here) ;; FIXME: It's ugly to have the canvas padding and styling scattered everywhere (sass, drawing code above, and here)
@ -64,20 +64,20 @@
(dispatch [:audio-player/seek (/ x width)]))) (dispatch [:audio-player/seek (/ x width)])))
(defn buffered-part (defn buffered-part
[seekable duration] [buffered duration]
(let [width (min 100 (* (/ seekable duration) 100))] (let [width (min 100 (* (/ buffered duration) 100))]
[:div.buffered-part {:on-click seek [:div.buffered-part {:on-click seek
:style {:width (str "calc(" width "% - 1rem - 10px)")}}])) :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)
seekable (:seekable status) buffered (:buffered status)
duration (:duration song)] duration (:duration song)]
[:article.current-song-info [:article.current-song-info
[:div.current-name (:artist song) [:br] (:title song)] [:div.current-name (:artist song) [:br] (:title song)]
[:div.current-progress [:div.current-progress
[buffered-part seekable duration] [buffered-part buffered duration]
[current-progress current-time seekable duration]]])) [current-progress current-time buffered duration]]]))
(defn song-controls [is-playing?] (defn song-controls [is-playing?]
[:div.field.has-addons [:div.field.has-addons