Add open-iconic and use icons for playback control buttons

src/cljs/airsonic_ui/subs.cljs

@@ -33,10 +33,19 @@
 (re-frame/reg-sub
  ::current-content
  (fn [db]
-   (-> db :response)))
+   (db :response)))
 
 (re-frame/reg-sub
  ; returns info on the current song as is (basically the metadata you can read from the file system)
  ::currently-playing
  (fn [db]
-   (-> db :currently-playing)))
+   (db :currently-playing)))
+
+(re-frame/reg-sub
+ ::is-playing?
+ (fn [query-v _]
+   [(re-frame/subscribe [::currently-playing])])
+ (fn [[currently-playing]]
+   (let [status (:status currently-playing)]
+     (and (not (:paused? status))
+          (not (:ended? status))))))

src/cljs/airsonic_ui/views/bottom_bar.cljs

@@ -2,7 +2,8 @@
   (:require [re-frame.core :refer [dispatch subscribe]]
             [airsonic-ui.events :as events]
             [airsonic-ui.subs :as subs]
-            [airsonic-ui.views.cover :refer [cover]]))
+            [airsonic-ui.views.cover :refer [cover]]
+            [airsonic-ui.views.icon :refer [icon]]))
 
 ;; currently playing / coming next / audio controls...
 
@@ -12,19 +13,23 @@
    [:progress.progress.is-tiny {:value (:current-time status)
                                  :max (:duration item)}]])
 
-(defn playback-controls []
+(defn playback-controls [is-playing?]
+  ;; TODO: Toggle play pause icon based on playback status
   [:div.field.has-addons
-   (let [buttons [["previous" ::events/previous-song]
-                  ["play / pause" ::events/toggle-play-pause]
-                  ["next" ::events/next-song]]]
-     (map (fn [[label event]]
-            [:p.control>button.button.is-light {:on-click #(dispatch [event])} label])
+   (let [buttons [[:media-step-backward ::events/previous-song]
+                  [(if is-playing? :media-pause :media-play) ::events/toggle-play-pause]
+                  [:media-step-forward ::events/next-song]]]
+     (map (fn [[icon-glyph event]]
+            [:p.control>button.button.is-light {:on-click #(dispatch [event])}
+             [icon icon-glyph]])
           buttons))])
 
   (def logo-url "https://airsonic.github.io/airsonic-ui/assets/images/logo/airsonic-light-350x100.png")
 
 (defn bottom-bar []
-  (let [currently-playing @(subscribe [::subs/currently-playing])]
+  (let [currently-playing @(subscribe [::subs/currently-playing])
+        is-playing? @(subscribe [::subs/is-playing?])]
+    (println "is-playing?" is-playing?)
     [:nav.navbar.is-fixed-bottom.playback-area
      [:div.navbar-brand
       [:div.navbar-item
@@ -36,6 +41,6 @@
          [:div.level-left>article.media
           [:div.media-left [cover (:item currently-playing) 48]]
           [:div.media-content [current-song-info currently-playing]]]
-         [:div.level-right [playback-controls]]]
+         [:div.level-right [playback-controls is-playing?]]]
         ;; not playing anything
         [:p.idle-notification "Currently no song selected"])]]))

src/cljs/airsonic_ui/views/icon.cljs

@@ -0,0 +1,4 @@
+(ns airsonic-ui.views.icon)
+
+(defn icon [glyph]
+  [:span.icon [:span.oi {:data-glyph (name glyph)}]])

src/sass/app.sass

@@ -1,4 +1,5 @@
 @import "../../node_modules/bulma/bulma"
+@import "../../node_modules/open-iconic/font/css/open-iconic.scss"
 
 // area holding content & side navi
 #app main
@@ -27,9 +28,12 @@
     .level-right
       flex-grow: 0
       flex-shrink: 1
+      padding-left: .5rem
+      padding-left: .5rem
+      padding-right: .5rem
 
 .progress.is-tiny
-  height: 0.25rem
+  height: .25rem
 
 // cover images
 .image.is-256x256