Add open-iconic and use icons for playback control buttons

package-lock.json

@@ -4608,6 +4608,11 @@
         "wrappy": "1"
       }
     },
+    "open-iconic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/open-iconic/-/open-iconic-1.1.1.tgz",
+      "integrity": "sha1-nc/Ix808Yc20ojaxo0eJTJetwMY="
+    },
     "optimist": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",

package.json

@@ -7,13 +7,14 @@
     "build:cljs": "shadow-cljs release app",
     "build:html": "sed 's/\"\\/app\\//\".\\/app\\//g' src/html/index.html > public/index.html",
     "build:sass": "node-sass --output-style compressed src/sass/app.sass public/app/style.css",
-    "build": "rm -r public/*; run-p build:*; ",
+    "build": "rm -r public/*; run-p copy:* build:*",
+    "copy:icons": "cp -R node_modules/open-iconic/font/fonts public",
     "deploy": "npm run build && gh-pages -d public -m \"Deploying $(git rev-parse --short HEAD)\"",
     "dev:cljs": "shadow-cljs watch app test",
     "dev:html": "sed 's/\"\\.\\/app\\//\"\\/app\\//g' src/html/index.html > public/index.html",
     "dev:sass": "npm run build:sass; node-sass -w src/sass/app.sass public/app/style.css",
     "dev:test": "karma start --reporters growl,progress --auto-watch",
-    "dev": "npm-run-all test:compile -p dev:*",
+    "dev": "npm-run-all copy:* test:compile -p dev:*",
     "test": "run-s test:compile test:run",
     "test:compile": "shadow-cljs compile test",
     "test:run": "karma start --single-run"
@@ -28,6 +29,7 @@
     "@hugojosefson/color-hash": "^2.0.3",
     "bulma": "^0.7.1",
     "create-react-class": "^15.6.3",
+    "open-iconic": "^1.1.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "shadow-cljs": "^2.3.19"

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]
+   (let [buttons [[:media-step-backward ::events/previous-song]
-                  ["play / pause" ::events/toggle-play-pause]
+                  [(if is-playing? :media-pause :media-play) ::events/toggle-play-pause]
-                  ["next" ::events/next-song]]]
+                  [:media-step-forward ::events/next-song]]]
-     (map (fn [[label event]]
+     (map (fn [[icon-glyph event]]
-            [:p.control>button.button.is-light {:on-click #(dispatch [event])} label])
+            [: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