Polish and lipstick (#7)

* Add dark sidebar

* Add generated covers for items that have none

* Fix small spacing issue with generated covers

* Set up different sidebar sections and improve styling of bottom bar

* Add open-iconic and use icons for playback control buttons

* Make sure sidebar always extends to complete height

* Simplify album listing view function, add text-overflow to thumbs

* Use better identifier for generated covers

Makes sure that covers look the same, no matter if generated from an album or
individual track

* Move shadow-cljs to devDependencies

* Display all album titles in a table

* Make progress bar take up all available space

src/cljs/airsonic_ui/views/cover.cljs

@@ -1,15 +1,69 @@
 (ns airsonic-ui.views.cover
-  (:require [re-frame.core :refer [subscribe]]
+  (:require [clojure.string :as str]
+            [re-frame.core :refer [subscribe]]
+            [reagent.core :as reagent]
             [airsonic-ui.subs :as subs]
-            [airsonic-ui.utils.api :as api]))
+            [airsonic-ui.utils.api :as api]
+            ["@hugojosefson/color-hash" :as ColorHash]))
+
+(def color-hash (ColorHash.))
+
+(defn palette
+  "Generate a hsl palette of two colors that's unique for a given item"
+  [item]
+  (let [identifier (str (:artistId item) "-" (or (:albumId item) (:id item)))
+        [h s l] (js->clj (.hsl color-hash identifier))
+        s (str (* 100 s) "%")
+        l (str (* 100 l) "%")]
+    (->>
+     [[h s l]
+      [(mod (+ h (* h 0.3) 10) 360) s l]]
+     (map #(str "hsl(" (str/join "," %) ")")))))
 
 ;; FIXME: The direct dependency on these subs is a bit ugly
 
+(defn generate-cover [canvas item]
+  (let [ctx (.getContext canvas "2d")
+        size (.-clientWidth canvas)
+        [a b] (palette item)
+        pad (* 0.02 size)
+        gradient (doto (.createLinearGradient ctx pad 0 (- size pad) size)
+                   (.addColorStop 0 a)
+                   (.addColorStop 1 b))]
+    (set! (.-fillStyle ctx) gradient)
+    (.fillRect ctx 0 0 size size)))
+
+(defn missing-cover
+  [item size]
+  (let [dom-node (reagent/atom nil)]
+    (reagent/create-class
+     {:component-did-update
+      (fn [this]
+        (let [canvas @dom-node]
+          (set! (.. canvas -style -width) "100%")
+          (set! (. canvas -width) (.-offsetWidth canvas))
+          (set! (. canvas -height) (.-offsetWidth canvas))
+          (generate-cover canvas item)))
+
+      :component-did-mount
+      (fn [this]
+        (reset! dom-node (reagent/dom-node this)))
+
+      :reagent-render
+      (fn []
+        @dom-node
+        [:canvas.missing-cover])})))
+
+(defn has-cover? [item]
+  (:coverArt item))
+
 (defn cover
   [item size]
   (let [server @(subscribe [::subs/server])
         login @(subscribe [::subs/login])
         url (partial api/cover-url server login item)]
     [:figure {:class-name (str "image is-" size "x" size)}
-     [:img {:src (url size)
-            :srcset (str (url size) ", " (url (* 2 size)) " 2x")}]]))
+     (if (has-cover? item)
+       [:img {:src (url size)
+              :srcSet (str (url size) ", " (url (* 2 size)) " 2x")}]
+       [missing-cover item size])]))