WIP: album color gradient for waveform

The effect is neat but not super noticable / pleasing.

Dependencies on color-thief and multiple.js.

HACK: I have hand-copied the `multiple.css` file over to my resources;
an automated build step to copy it over from node_modules would be
better.

Author: Sam Adams

package-lock.json

@@ -8,7 +8,10 @@
 		"ci": "npx shadow-cljs compile karma-test && npx karma start --single-run --reporters junit,dots"
 	},
 	"dependencies": {
+		"colorthief": "^2.3.2",
 		"highlight.js": "10.7.1",
+		"multiple.js": "0.0.1",
+		"node-vibrant": "^3.2.1-alpha.1",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
 		"spotify-web-api-js": "^1.5.2"

package.json

@@ -44,7 +44,8 @@
       }(window.location))
     </script>
     <!-- End Single Page Apps for GitHub Pages -->
-    
+
+    <link href="./multiple.css" rel="stylesheet">
     <script src="/js/compiled/app.js"></script>
   </body>
 </html>

resources/public/index.html

@@ -0,0 +1,64 @@
+.multiple-desktop {
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+}
+
+/* http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html */
+.multiple-desktop-text {
+    background: -webkit-linear-gradient(transparent, transparent);
+    background: -o-linear-gradient(transparent, transparent);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+}
+
+.multiple-mobile-wrapper {
+    position: relative;
+    height: 100%; 
+}
+
+/* http://stackoverflow.com/a/23859719/1221082
+ * http://stackoverflow.com/a/23795792/1221082
+ */
+.multiple-mobile {
+    /* old browsers */
+    clip: rect(0 auto auto 0);
+    clip: rect(0, auto, auto, 0);
+    /* ios workaround */
+    -webkit-mask-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
+    /* new browsers */
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    overflow: hidden;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    z-index: -1;
+}
+
+.multiple-mobile-content {
+    height: 100%;
+}
+
+.multiple-mobile:before {
+    content: '';
+    
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}

resources/public/multiple.css

@@ -57,6 +57,9 @@
 ;; TODO
 (s/def ::track-analysis any?)
 
+(s/def ::album-colors (s/nilable (s/coll-of
+                                   (s/coll-of integer?))))
+
 (s/def ::player-pos-query-interval-id (s/nilable any?))
 
 (s/def ::is-seeking boolean?)
@@ -123,6 +126,7 @@
    :external-playback-state nil
    :track-analysis nil
    :recently-played nil
+   :album-colors nil
 
    ;; Player ----------------------------------------------
    :player nil

src/practaid/db.cljs

@@ -8,9 +8,9 @@
     [reitit.frontend.easy :as rfe]
     [reitit.frontend.controllers :as rfc]
     [cljs.core.async :refer [go <!]]
-    [cljs.core.async.interop :refer-macros [<p!]])
-  (:require ["spotify-web-api-js" :as SpotifyWebApi]
-            [cljs.spec.alpha :as s]))
+    [cljs.core.async.interop :refer-macros [<p!]]
+    [cljs.spec.alpha :as s]
+    ["colorthief/dist/color-thief.mjs" :default ColorThief]))
 
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -239,6 +239,15 @@
 
 ;; Looper page---------------------------------------------
 
+(rf/reg-event-fx
+  ::album-cover-img-loaded
+  [check-db-spec-interceptor]
+  (fn [{:keys [db]} [_ img-element]]
+    (let [palette (-> (new ColorThief)
+                      (. getPalette img-element 2)
+                      (js->clj))]
+      {:db (assoc db :album-colors palette)})))
+
 (rf/reg-event-fx
   ::seek-player
   [check-db-spec-interceptor]

src/practaid/events.cljs

@@ -72,6 +72,11 @@
   (fn [db]
     (q/is-paused db)))
 
+(rf/reg-sub
+  ::album-colors
+  (fn [db]
+    (:album-colors db)))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Tier 2
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

src/practaid/subs.cljs

@@ -3,7 +3,8 @@
             [spade.core :refer [defclass defkeyframes]]
             [re-frame.core :as rf]
             [clojure.string :as str]
-            [practaid.player :refer [playback-pos-refresh-interval-ms]]))
+            [practaid.player :refer [playback-pos-refresh-interval-ms]]
+            ["multiple.js" :as Multiple]))
 
 (defclass playback-metadata-style []
   {:display "flex"
@@ -28,7 +29,11 @@
   [:div {:class (playback-metadata-style)}
    (and album-cover-url
         [:div.album-cover-container
-         [:img.album-cover-image {:src album-cover-url}]])
+         [:img.album-cover-image {:src album-cover-url
+                                  :crossOrigin "Anonymous"
+                                  :on-load #(rf/dispatch [:practaid.events/album-cover-img-loaded
+                                                          (-> js/document
+                                                              (. querySelector "img.album-cover-image"))])}]])
    [:div.text-metadata-container
     [:a {:href (str "https://open.spotify.com/track/" track-id)
          :title "Play on Spotify"}
@@ -111,18 +116,24 @@
 ;(defkeyframes)
 
 
-(defn waveform [{:keys [loudnesses loop-start-frac loop-end-frac player-pos-frac handle-click should-smooth-motion]}]
-  [:div {:class (waveform-style)
-         :on-click handle-click}
-   [waveform-pos-marker {:location loop-start-frac :color "black"}]
-   [waveform-pos-marker {:location loop-end-frac :color "black"}]
-   [playback-pos-marker {:location player-pos-frac
-                         :should-smooth-motion should-smooth-motion}]
-   (for [[i loudness] (map-indexed vector loudnesses)]
-     [:div.wave {:key i
-                 :class (wave-style)
-                 ;; TODO move me?
-                 :style {:height (str (int (* loudness 100)) "%")}}])])
+(defn waveform [{:keys [loudnesses loop-start-frac loop-end-frac player-pos-frac handle-click should-smooth-motion album-colors]}]
+  (let [rgbs (map #(str "rgb(" (str/join ", " %) ")")
+                  album-colors)
+        background (when rgbs (str "linear-gradient(to right," (str/join ", " rgbs)  ")"))
+        waveform-style (waveform-style)
+        _ (when rgbs (new ^js Multiple (clj->js {:selector "div.wave"
+                                                 :background background})))]
+    [:div {:class waveform-style
+           :on-click handle-click}
+     [waveform-pos-marker {:location loop-start-frac :color "black"}]
+     [waveform-pos-marker {:location loop-end-frac :color "black"}]
+     [playback-pos-marker {:location player-pos-frac
+                           :should-smooth-motion should-smooth-motion}]
+     (for [[i loudness] (map-indexed vector loudnesses)]
+       [:div.wave {:key i
+                   :class (wave-style)
+                   ;; TODO move me?
+                   :style {:height (str (int (* loudness 100)) "%")}}])]))
 
 
 
@@ -181,7 +192,8 @@
         defaulted-loop-start-frac @(rf/subscribe [:practaid.subs/defaulted-loop-start-frac])
         defaulted-loop-end-frac @(rf/subscribe [:practaid.subs/defaulted-loop-end-frac])
         player-pos-frac @(rf/subscribe [:practaid.subs/player-pos-frac])
-        should-smooth-motion @(rf/subscribe [:practaid.subs/should-smooth-motion])]
+        should-smooth-motion @(rf/subscribe [:practaid.subs/should-smooth-motion])
+        album-colors @(rf/subscribe [:practaid.subs/album-colors])]
     [page-wrapper
      [:div {:class (looper-page-style)}
       [:div.connection-status
@@ -210,7 +222,8 @@
                                                defaulted-loop-end-ms])
                      :on-commit #(rf/dispatch [:practaid.events/reset-looper])
                      :disabled  (not is-playback-ours)}]
-            [waveform {:loudnesses      loudnesses
+            [waveform {:album-colors album-colors
+                       :loudnesses      loudnesses
                        :loop-start-frac defaulted-loop-start-frac
                        :loop-end-frac   defaulted-loop-end-frac
                        :player-pos-frac player-pos-frac