Fix sketchy pagination (#31)

* Fix test watcher and notifications on linux

* Improve pagination; no items are repeated, items loaded ahead are kept and many calculations have been moved to subscriptions

Closes #28

karma.conf.js

@@ -9,7 +9,7 @@ module.exports = function (config) {
     plugins: [
       'karma-cljs-test',
       'karma-chrome-launcher',
-      'karma-growl-reporter'
+      'karma-notify-reporter' // reporters are set in package.json
     ],
     colors: true,
     logLevel: config.LOG_INFO,

package-lock.json

@@ -123,6 +123,12 @@
       "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
       "dev": true
     },
+    "ansicolors": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.3.2.tgz",
+      "integrity": "sha1-ZlWX3oap/+Oqm/vmyuXG6kJrSXk=",
+      "dev": true
+    },
     "anymatch": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
@@ -843,6 +849,16 @@
         "map-obj": "^1.0.0"
       }
     },
+    "cardinal": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz",
+      "integrity": "sha1-fMEFXYItISlU0HsIXeolHMe8VQU=",
+      "dev": true,
+      "requires": {
+        "ansicolors": "~0.3.2",
+        "redeyed": "~2.1.0"
+      }
+    },
     "caseless": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
@@ -923,6 +939,33 @@
         }
       }
     },
+    "cli-table": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/cli-table/-/cli-table-0.3.1.tgz",
+      "integrity": "sha1-9TsFJmqLGguTSz0IIebi3FkUriM=",
+      "dev": true,
+      "requires": {
+        "colors": "1.0.3"
+      },
+      "dependencies": {
+        "colors": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
+          "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=",
+          "dev": true
+        }
+      }
+    },
+    "cli-usage": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/cli-usage/-/cli-usage-0.1.8.tgz",
+      "integrity": "sha512-EZJ+ty1TsqdnhZNt2QbI+ed3IUNHTH31blSOJLVph3oL4IExskPRyCDGJH7RuCBPy3QBmWgpbeUxXPhK0isXIw==",
+      "dev": true,
+      "requires": {
+        "marked": "^0.5.0",
+        "marked-terminal": "^3.0.0"
+      }
+    },
     "cliui": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@@ -2841,12 +2884,6 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
       "dev": true
     },
-    "growly": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/growly/-/growly-1.1.1.tgz",
-      "integrity": "sha1-60NKDlbwJB2Chky/1BEscJESQvo=",
-      "dev": true
-    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -3645,13 +3682,13 @@
       "integrity": "sha1-y4YF7w4R+ab20o9Wul298m84mSM=",
       "dev": true
     },
-    "karma-growl-reporter": {
+    "karma-notify-reporter": {
-      "version": "1.0.0",
+      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/karma-growl-reporter/-/karma-growl-reporter-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/karma-notify-reporter/-/karma-notify-reporter-1.0.1.tgz",
-      "integrity": "sha1-w4fel2epG8ScSpYwmg4dXXO03/I=",
+      "integrity": "sha1-2b+0UrxTU2cUO25gMl3UAPSfIMg=",
       "dev": true,
       "requires": {
-        "growly": "~1.1.0"
+        "node-notifier": "^4.5.0"
       }
     },
     "kind-of": {
@@ -3730,6 +3767,66 @@
       "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
       "dev": true
     },
+    "lodash._arraycopy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz",
+      "integrity": "sha1-due3wfH7klRzdIeKVi7Qaj5Q9uE=",
+      "dev": true
+    },
+    "lodash._arrayeach": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._arrayeach/-/lodash._arrayeach-3.0.0.tgz",
+      "integrity": "sha1-urFWsqkNPxu9XGU0AzSeXlkz754=",
+      "dev": true
+    },
+    "lodash._baseassign": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz",
+      "integrity": "sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=",
+      "dev": true,
+      "requires": {
+        "lodash._basecopy": "^3.0.0",
+        "lodash.keys": "^3.0.0"
+      }
+    },
+    "lodash._baseclone": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseclone/-/lodash._baseclone-3.3.0.tgz",
+      "integrity": "sha1-MDUZv2OT/n5C802LYw73eU41Qrc=",
+      "dev": true,
+      "requires": {
+        "lodash._arraycopy": "^3.0.0",
+        "lodash._arrayeach": "^3.0.0",
+        "lodash._baseassign": "^3.0.0",
+        "lodash._basefor": "^3.0.0",
+        "lodash.isarray": "^3.0.0",
+        "lodash.keys": "^3.0.0"
+      }
+    },
+    "lodash._basecopy": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
+      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
+      "dev": true
+    },
+    "lodash._basefor": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash._basefor/-/lodash._basefor-3.0.3.tgz",
+      "integrity": "sha1-dVC06SGO8J+tJDQ7YSAhx5tMIMI=",
+      "dev": true
+    },
+    "lodash._bindcallback": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz",
+      "integrity": "sha1-5THCdkTPi1epnhftlbNcdIeJOS4=",
+      "dev": true
+    },
+    "lodash._getnative": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
+      "dev": true
+    },
     "lodash.assign": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
@@ -3748,12 +3845,41 @@
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
       "dev": true
     },
+    "lodash.isarguments": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=",
+      "dev": true
+    },
+    "lodash.isarray": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
+      "dev": true
+    },
+    "lodash.keys": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
+      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+      "dev": true,
+      "requires": {
+        "lodash._getnative": "^3.0.0",
+        "lodash.isarguments": "^3.0.0",
+        "lodash.isarray": "^3.0.0"
+      }
+    },
     "lodash.mergewith": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
       "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
       "dev": true
     },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
+      "dev": true
+    },
     "log4js": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/log4js/-/log4js-2.11.0.tgz",
@@ -3952,6 +4078,56 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.5.1.tgz",
+      "integrity": "sha512-iUkBZegCZou4AdwbKTwSW/lNDcz5OuRSl3qdcl31Ia0B2QPG0Jn+tKblh/9/eP9/6+4h27vpoh8wel/vQOV0vw==",
+      "dev": true
+    },
+    "marked-terminal": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-3.1.1.tgz",
+      "integrity": "sha512-7UBFww1rdx0w9HehLMCVYa8/AxXaiDigDfMsJcj82/wgLQG9cj+oiMAVlJpeWD57VFJY2OYY+bKeEVIjIlxi+w==",
+      "dev": true,
+      "requires": {
+        "cardinal": "^2.1.1",
+        "chalk": "^2.4.1",
+        "cli-table": "^0.3.1",
+        "lodash.assign": "^4.2.0",
+        "node-emoji": "^1.4.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
+          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "md5.js": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz",
@@ -4153,6 +4329,15 @@
       "dev": true,
       "optional": true
     },
+    "node-emoji": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.8.1.tgz",
+      "integrity": "sha512-+ktMAh1Jwas+TnGodfCfjUbJKoANqPaJFN0z0iqh41eqD8dvguNzcitVSBSVK1pidz0AqGbLKcoVuVLRVZ/aVg==",
+      "dev": true,
+      "requires": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
     "node-fetch": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
@@ -4221,6 +4406,45 @@
         "vm-browserify": "0.0.4"
       }
     },
+    "node-notifier": {
+      "version": "4.6.1",
+      "resolved": "http://registry.npmjs.org/node-notifier/-/node-notifier-4.6.1.tgz",
+      "integrity": "sha1-BW0UJE89zBzq3+aK+c/wxUc6M/M=",
+      "dev": true,
+      "requires": {
+        "cli-usage": "^0.1.1",
+        "growly": "^1.2.0",
+        "lodash.clonedeep": "^3.0.0",
+        "minimist": "^1.1.1",
+        "semver": "^5.1.0",
+        "shellwords": "^0.1.0",
+        "which": "^1.0.5"
+      },
+      "dependencies": {
+        "growly": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
+          "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
+          "dev": true
+        },
+        "lodash.clonedeep": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-3.0.2.tgz",
+          "integrity": "sha1-oKHkDYKl6on/WxR7hETtY9koJ9s=",
+          "dev": true,
+          "requires": {
+            "lodash._baseclone": "^3.0.0",
+            "lodash._bindcallback": "^3.0.0"
+          }
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "dev": true
+        }
+      }
+    },
     "node-sass": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.2.tgz",
@@ -5215,6 +5439,23 @@
         "strip-indent": "^1.0.1"
       }
     },
+    "redeyed": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/redeyed/-/redeyed-2.1.1.tgz",
+      "integrity": "sha1-iYS1gV2ZyyIEacme7v/jiRPmzAs=",
+      "dev": true,
+      "requires": {
+        "esprima": "~4.0.0"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+          "dev": true
+        }
+      }
+    },
     "redis": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/redis/-/redis-2.8.0.tgz",
@@ -5587,6 +5828,12 @@
         "jsonify": "~0.0.0"
       }
     },
+    "shellwords": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
+      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
+      "dev": true
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",

package.json

@@ -12,8 +12,8 @@
     "deploy": "npm run build && gh-pages -d public -m \"Deploying $(git rev-parse --short HEAD)\"",
     "dev:cljs": "shadow-cljs watch app test",
     "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:test": "karma start --reporters notify,progress --auto-watch",
-    "dev": "rm -r public/*; npm-run-all copy:* -p dev:*",
+    "dev": "rm -r public/*; 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"
@@ -37,7 +37,7 @@
     "karma": "^2.0.5",
     "karma-chrome-launcher": "^2.2.0",
     "karma-cljs-test": "^0.1.0",
-    "karma-growl-reporter": "^1.0.0",
+    "karma-notify-reporter": "^1.0.1",
     "node-sass": "^4.9.2",
     "npm-run-all": "^4.1.2",
     "react-flip-move": "^3.0.1",

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

@@ -2,21 +2,40 @@
   (:require [re-frame.core :as re-frame]
             [airsonic-ui.config :as conf]))
 
-(defn complete-library
+;; first some helper functions to make the structure a bit clearer
-  "Concatenates all responses of one type of library to make paging through
+
-  it a bit easier."
+(defn filter-response-kind
-  [responses [_ kind]]
+  "Takes all library responses and returns only the ones matching a specific kind"
-  (let [sorted-albums (->> (filter (fn [[[_ params] _]]
+  [kind responses]
-                                     (= kind (:type params))) responses)
+  (filter (fn [[[_ params] _]]
+            (= kind (:type params))) responses))
+
+(defn partition-responses
+  "Returns a map of responses, where each response is neatly mapped to the page
+  it show on."
+  [kind responses]
+  (->> (filter-response-kind kind responses)
        (sort-by (fn [[[_ params] _]] (:offset params)))
-                           (map (comp :album val)))]
+       (mapcat (fn [[[_ params] {albums :album}]]
-    ;; NOTE: we concatenate this manually to avoid duplication; we have to do
+                 (let [start-page (/ (:offset params) conf/albums-per-page)]
-    ;; this because fetch more than conf/albums-per-page per page, otherwise we
+                   (zipmap (drop start-page (range))
-    ;; can't know whether to show a link to the next page
+                           (partition-all conf/albums-per-page albums)))))
-    (concat (mapcat (partial take conf/albums-per-page) (butlast sorted-albums))
+       (into (sorted-map))))
-            (last sorted-albums))))
+
+;; `complete-library` is the subscription that is actually exported
+
+(defn paginated-library
+  "Returns a sorted map that can be used to access the library content loaded
+  from the server. Each key represents a page and the associated value
+  represents the page's content."
+  [responses [_ kind]]
+  ;; note that we "humanize" the keys, meaning page 1 is the page with offset 0
+  (->> (partition-responses kind responses)
+       (map (fn [[k v]] [(inc k) v]))
+       (into (sorted-map))))
 
 (re-frame/reg-sub
- :library/complete
+ :library/paginated
  :<- [:api/responses-for-endpoint "getAlbumList2"]
- complete-library)
+ paginated-library)
+

src/cljs/airsonic_ui/components/library/views.cljs

@@ -12,45 +12,43 @@
             ^{:key idx} [:li (when (= params active-item)
                                {:class-name "is-active"})
                          [:a {:href (apply url-for route)} label]]))]])
-
+;; this variable determines how many pages before the first known page we should list 
-;; the pagination should be used like this
+(def page-padding 2)
-;; [pagination {:per-page 12
-;;              :max-pages nil
-;;              :url-fn generate-url
-;;              :current-page 0
-;;              :items [,,,]}]
-
-(defn num-pages [items per-page max-pages]
-  (min (Math/ceil (/ (count items) per-page)) max-pages))
 
 (defn pagination
   "Builds a pagination, calling `url-fn` for every rendered page link with the
   page as its argument. When `max-pages` is `nil` an infinite pagination
   will be rendered."
-  [{:keys [items per-page max-pages current-page url-fn]
+  [{:keys [items current-page url-fn]}]
-    :or {max-pages (.-MAX_VALUE js/Number)}}]
+  ;; NOTE: This is currently slightly flawed. We don't have any good way to
-  (let [num-pages (num-pages items per-page max-pages)
+  ;; know whether we're on the last possible page so we take the last loaded
+  ;; page instead 
+  (let [num-pages (last (keys items))
         first-page? (= current-page 1)
-        last-page? (= current-page num-pages)]
+        pages (range (max 1 (- current-page page-padding))
-    [:nav.pagination {:role "pagination", :aria-label "pagination"}
+                     (min (inc (+ current-page page-padding)) (inc num-pages))) ]
+    [:nav.pagination.is-centered {:role "pagination", :aria-label "pagination"}
+     ;; now we add buttons to progress one page in each direction
      [:a.pagination-previous (if first-page?
                                {:disabled true}
                                {:href (url-fn (dec current-page))}) "Previous page"]
-     [:a.pagination-next (if last-page?
+     [:a.pagination-next {:href (url-fn (inc current-page))} "Next page"]
-                           {:disabled true}
+     ;; and here we modify the links around our current page
-                           {:href (url-fn (inc current-page))}) "Next page"]
      [:ul.pagination-list
-      (when (> current-page 3)
+      ;; some indication that there are previous pages
-        ^{:key "ellipsis-before"} [:li>span.pagination-ellipsis "…"])
+      (when (> current-page (inc page-padding))
-      (for [page (range (max 1 (- current-page 2))
+        [:li>span.pagination-ellipsis "…"])
-                        (min (+ current-page 3) (inc num-pages)))]
+      ;; all pagination links around our current page
+      (for [page pages]
         (let [current-page? (= page current-page)]
           ^{:key page} [(cond-> :li>a.pagination-link
                           current-page? (add-classes :is-current))
                         (cond-> {:href (url-fn page), :aria-label (str "Page " page)}
                           current-page? (assoc :aria-current "page")) page]))
-      (when (< current-page (- num-pages 2))
+      ;; some indication that there are more pages after
-        ^{:key "ellipsis-after"} [:li>span.pagination-ellipsis "…"])]]))
+      (when (< current-page (- num-pages page-padding))
+        [:li>span.pagination-ellipsis "…"])]]))
+      
 
 (def tab-items [[[::routes/library {:kind "recent"} nil] "Recently played"]
                 [[::routes/library {:kind "newest"} nil] "Newest additions"]
@@ -63,13 +61,11 @@
   [[_ {:keys [kind]} {:keys [page]
                       :or {page 1}}]
    {:keys [scan-status]}]
-  (let [library @(subscribe [:library/complete kind])
+  (let [page (int page)
-        ;; FIXME: vv Views shouldn't do calculations vv
+        library @(subscribe [:library/paginated kind])
-        visible (->> (drop (* (dec (int page)) conf/albums-per-page) library)
+        current-items (get library page)
-                     (take conf/albums-per-page))
         url-fn #(url-for ::routes/library {:kind kind} {:page %})
-        pagination [pagination {:current-page (int page)
+        pagination [pagination {:current-page page
-                                :per-page conf/albums-per-page
                                 :items library
                                 :url-fn url-fn}]]
     [:div
@@ -82,5 +78,5 @@
      [:section.section>div.container
       [tabs {:items tab-items :active-item {:kind kind}}]
       pagination
-      [:section.section [collection/listing visible]]
+      [:section.section [collection/listing current-items]
-      pagination]]))
+      pagination]]]))

src/cljs/airsonic_ui/config.cljs

@@ -5,3 +5,4 @@
 
 ;; how many covers are shown per page when browsing the library
 (def albums-per-page 20)
+(def albums-prefetch-factor 5)

src/cljs/airsonic_ui/routes.cljs

@@ -49,7 +49,7 @@
      ;; we fetch more than just the albums needed for the current page so we can
      ;; page through it faster
      [:api/request "getAlbumList2" {:type kind
-                                    :size (* 3 conf/albums-per-page)
+                                    :size (* conf/albums-prefetch-factor conf/albums-per-page)
                                     :offset (* (dec (int page)) conf/albums-per-page)}]]
     [:routes/do-navigation [route-id {:kind "recent"} {:page 1}]]))
 

test/cljs/airsonic_ui/components/library/subs_test.cljs

@@ -1,12 +1,33 @@
 (ns airsonic-ui.components.library.subs-test
   (:require [cljs.test :refer-macros [deftest testing is]]
+            [airsonic-ui.config :as conf]
+            [airsonic-ui.components.library.fixtures :as fixtures]
             [airsonic-ui.components.library.subs :as sub]))
 
-(def responses {["getAlbumList2" {:type "recent" :offset 1}] {:album '(5 6 7 8)}
+(deftest partition-library
-                ["getAlbumList2" {:type "recent" :offset 0}] {:album '(1 2 3 4)}
+  (testing "Should give us a map of page -> content"
-                ["getAlbumList2" {:type "newest" :offset 1}] {:album '(9 8 7 6)}})
+    (let [pages (sub/partition-responses "recent" fixtures/responses)]
+      (is (map? pages))
+      (is (every? int? (keys pages)))
+      (is (every? seq? (vals pages)))))
+  (testing "Should map each response correctly to a page"
+    (let [first-response (select-keys fixtures/responses [["getAlbumList2" {:type "recent", :size 100, :offset 0}]])]
+      (is (= (range 5) (keys (sub/partition-responses "recent" first-response)))))
+    (let [first-and-third (select-keys fixtures/responses [["getAlbumList2" {:type "recent", :size 100, :offset 0}]
+                                                           ["getAlbumList2" {:type "recent", :size 100, :offset 40}]])]
+      ;; there will be overlapping content for pages 2, 3 and 4 (with a zero-based index)
+      (is (= (range 7) (keys (sub/partition-responses "recent" first-and-third)))))))
 
-(deftest complete-library
+(deftest paginated-library
-  (testing "Should concatenate all album list responses for a given type of list"
+  (testing "Should humanize page offsets"
-    (is (= '(1 2 3 4 5 6 7 8)
+    (let [responses (select-keys fixtures/responses [["getAlbumList2" {:type "recent", :size 100, :offset 0}]])
-           (sub/complete-library responses [:library/complete "recent"])))))
+          paginated (sub/paginated-library responses [:sub/paginated-library "recent"])]
+      (is (= [1 2 3 4 5] (keys paginated)))))
+  (testing "Should concatenate and deduplicate all album list responses"
+    (let [responses (select-keys fixtures/responses [["getAlbumList2" {:type "recent", :size 100, :offset 0}]
+                                                     ["getAlbumList2" {:type "recent", :size 100, :offset 20}]
+                                                     ["getAlbumList2" {:type "recent", :size 100, :offset 40}]])
+          paginated (sub/paginated-library responses [:sub/paginated-library "recent"])]
+      (is (= [1 2 3 4 5 6 7] (keys paginated)))
+      (is (= 140 (count (mapcat val paginated))))
+      (is (= 140 (count (set (mapcat val paginated))))))))