Add keyboard shortcuts (#43)

* Use rf instead of re-frame

* Add bulma modal component

* Add option to toggle a modal

* Add rudimentary keyboard shortcuts; closes #41

src/cljs/airsonic_ui/components/audio_player/events.cljs

@@ -1,9 +1,9 @@
 (ns airsonic-ui.components.audio-player.events
-  (:require [re-frame.core :as re-frame]
+  (:require [re-frame.core :as rf]
             [airsonic-ui.audio.playlist :as playlist]
             [airsonic-ui.api.helpers :as api]))
 
-(re-frame/reg-event-fx
+(rf/reg-event-fx
  ; sets up the db, starts to play a song and adds the rest to a playlist
  :audio-player/play-all
  (fn [{:keys [db]} [_ songs start-idx]]
@@ -12,17 +12,17 @@
      {:audio/play (api/stream-url (:credentials db) (playlist/peek playlist))
       :db (assoc-in db [:audio :playlist] playlist)})))
 
-(re-frame/reg-event-db
+(rf/reg-event-db
  :audio-player/set-playback-mode
  (fn [db [_ playback-mode]]
    (update-in db [:audio :playlist] #(playlist/set-playback-mode % playback-mode))))
 
-(re-frame/reg-event-db
+(rf/reg-event-db
  :audio-player/set-repeat-mode
  (fn [db [_ repeat-mode]]
    (update-in db [:audio :playlist] #(playlist/set-repeat-mode % repeat-mode))))
 
-(re-frame/reg-event-fx
+(rf/reg-event-fx
  :audio-player/next-song
  (fn [{:keys [db]} _]
    (let [db (update-in db [:audio :playlist] playlist/next-song)
@@ -30,7 +30,7 @@
      {:db db
       :audio/play (api/stream-url (:credentials db) next)})))
 
-(re-frame/reg-event-fx
+(rf/reg-event-fx
  :audio-player/previous-song
  (fn [{:keys [db]} _]
    (let [db (update-in db [:audio :playlist] playlist/previous-song)
@@ -38,17 +38,17 @@
      {:db db
       :audio/play (api/stream-url (:credentials db) prev)})))
 
-(re-frame/reg-event-db
+(rf/reg-event-db
  :audio-player/enqueue-next
  (fn [db [_ song]]
    (update-in db [:audio :playlist] #(playlist/enqueue-next % song))))
 
-(re-frame/reg-event-db
+(rf/reg-event-db
  :audio-player/enqueue-last
  (fn [db [_ song]]
    (update-in db [:audio :playlist] #(playlist/enqueue-last % song))))
 
-(re-frame/reg-event-fx
+(rf/reg-event-fx
  :audio-player/toggle-play-pause
  (fn [_ _]
    {:audio/toggle-play-pause nil}))
@@ -60,9 +60,9 @@
   (cond-> {:db (assoc-in db [:audio :playback-status] status)}
     (:ended? status) (assoc :dispatch [:audio-player/next-song])))
 
-(re-frame/reg-event-fx :audio/update audio-update)
+(rf/reg-event-fx :audio/update audio-update)
 
-(re-frame/reg-event-fx
+(rf/reg-event-fx
  :audio-player/seek
  (fn [{:keys [db]} [_ percentage]]
    (let [duration (:duration (playlist/peek (get-in db [:audio :playlist])))]

src/cljs/airsonic_ui/components/keyboard_shortcuts/config.cljs

@@ -0,0 +1,19 @@
+(ns airsonic-ui.components.keyboard-shortcuts.config)
+
+;; this keymap has the following structure:
+;; [[readable-key readable-description event-vector event-keys]
+;;  ...]
+
+(def keymap
+  [["Space" "Toggle play / pause"
+    [:audio-player/toggle-play-pause]
+    [{:keyCode 32}]]
+   ["←" "Previous song"
+    [:audio-player/previous-song]
+    [{:keyCode 37}]]
+   ["→" "Next song"
+    [:audio-player/next-song]
+    [{:keyCode 39}]]
+   ["?" "Show / hide keyboard shortcut help"
+    [:bulma.modal.events/toggle :keyboard-shortcuts-help]
+    [{:keyCode 63}]]])

src/cljs/airsonic_ui/components/keyboard_shortcuts/events.cljs

@@ -0,0 +1,13 @@
+(ns airsonic-ui.components.keyboard-shortcuts.events
+  (:require [re-frame.core :as rf]
+            [re-pressed.core :as rp]
+            [airsonic-ui.components.keyboard-shortcuts.config :as config]))
+
+(rf/reg-event-fx
+ ::init-shortcuts
+ (fn []
+   (let [event-keys (map (juxt #(nth % 2) #(nth % 3)) config/keymap)
+         prevent-default-keys (mapcat last event-keys)]
+     {:dispatch-n [[::rp/add-keyboard-event-listener "keydown"]
+                   [::rp/set-keydown-rules {:event-keys event-keys
+                                            :prevent-default-keys prevent-default-keys}]]})))

src/cljs/airsonic_ui/components/keyboard_shortcuts/views.cljs

@@ -0,0 +1,12 @@
+(ns airsonic-ui.components.keyboard-shortcuts.views
+  (:require [bulma.modal.views :as bulma]
+            [airsonic-ui.components.keyboard-shortcuts.config :as config]))
+
+(defn help-modal []
+  [bulma/modal-card {:title "Keyboard Shortcuts"
+                     :modal-id :keyboard-shortcuts-help}
+   [:table.table.is-hoverable.is-fullwidth
+    [:thead [:tr [:th "Key"] [:th "Function"]]]
+    [:tbody
+     (for [[idx [k desc]] (map-indexed vector config/keymap)]
+       ^{:key idx} [:tr [:td>code k] [:td desc]])]]])

src/cljs/airsonic_ui/components/library/subs.cljs

@@ -1,5 +1,5 @@
 (ns airsonic-ui.components.library.subs
-  (:require [re-frame.core :as re-frame]
+  (:require [re-frame.core :as rf]
             [airsonic-ui.config :as conf]))
 
 ;; first some helper functions to make the structure a bit clearer
@@ -34,7 +34,7 @@
        (map (fn [[k v]] [(inc k) v]))
        (into (sorted-map))))
 
-(re-frame/reg-sub
+(rf/reg-sub
  :library/paginated
  :<- [:api/responses-for-endpoint "getAlbumList2"]
  paginated-library)