Implement progress bar with svg

src/cljs/airsonic_ui/components/audio_player/views.cljs

@@ -17,6 +17,18 @@
 (defn- ratio->width [ratio]
   (str (.toFixed (min 100 (* 100 ratio)) 2) "%"))
 
+(defn progress-bars [buffered-width played-width]
+  [:svg.progress-bars {:aria-hidden "true"}
+   [:svg.complete-song-bar
+    [:rect {:x 0, :y "50%", :width "100%", :height 1}]]
+   [:svg.buffered-part-bar
+    [:rect.click-dummy {:on-click seek
+                        :x 0, :y 0, :width buffered-width, :height "100%"}]
+    [:rect {:x 0, :y "50%", :width buffered-width, :height 1}]]
+   [:svg.played-back-bar
+    [:rect {:x 0, :y "50%", :width played-width, :height 1}]
+    [:circle {:cx played-width, :cy "50%", :r 2.5}]]])
+
 (defn progress-indicators [song status]
   (let [current-time (:current-time status)
         buffered (:buffered status)
@@ -26,13 +38,8 @@
                            (h/format-duration duration :brief? true))
         buffered-width (ratio->width (/ buffered duration))
         played-width (ratio->width (/ current-time duration))]
-    [:article.progress-indicators {:aria-hidden "true"}
+    [:article.progress-indicators
-     [:div.progress-bars
+     [progress-bars buffered-width played-width]
-      [:div.complete-song-bar]
-      [:div.buffered-part-bar {:style {:width buffered-width}
-                               :on-click seek}]
-      [:div.played-back-bar {:style {:width played-width}}
-       [:div.played-back-knob]]]
      [:div.progress-info-text.duration-text progress-text]]))
 
 (defn playback-info [song status]

src/sass/app.sass

@@ -48,6 +48,7 @@
     // shows cover and current track
     align-items: center
     flex-grow: 1
+    flex-basis: 25%
     color: inherit
 
     .media-left
@@ -71,15 +72,18 @@
     +tablet
       display: flex
 
-    flex-grow: 3
+    flex-basis: 75%
     height: 1rem
 
     .progress-info-text
-      color: whitesmoke
+      color: $dark-invert
       font-size: $size-7
       flex-shrink: 0
       flex-grow: 0
 
+    svg
+      overflow: visible
+
     .progress-bars
       margin-left: .6rem
       margin-right: .6rem
@@ -90,47 +94,27 @@
     .buffered-part-bar,
     .played-back-bar
       height: 1rem
-      position: absolute
-      top: 0
-      left: 0
-
-      // these are the actual bars
-      &:after
-        content: ''
-        display: block
-        height: 1px
-        position: relative
-        top: 50%
-
 
     .complete-song-bar
       width: 100%
 
-      &:after
+      rect
-        background: rgb(93,93,93)
+        fill: rgb(93,93,93)
 
     .buffered-part-bar
-      cursor: pointer
+      rect
+        fill: rgb(143,143,143)
 
-      &:after
+      .click-dummy
-        background: rgb(143,143,143)
+        cursor: pointer
+        fill: transparent
 
     .played-back-bar
       pointer-events: none
 
-      &:after
+      circle,
-        background: whitesmoke
+      rect
-
+        fill: $dark-invert
-      .played-back-knob
-        position: absolute
-        width: 5px
-        height: 5px
-        left: 100%
-        top: 50%
-        margin-left: -2.5px
-        margin-top: -2.5px
-        background: whitesmoke
-        border-radius: 100%
 
   // buttons to control current playback and playlist behavior
   .playback-controls,