Lazy load thumbnails

router/api.js

@@ -38,6 +38,7 @@ module.exports = { register: app => {
                 return app.routerUtils.onPageNotFound(res);
             res.setHeader("Content-Type", "image/png");
             res.setHeader("Content-Length", fs.statSync(thumbnail.name)?.size || undefined);
+            res.setHeader("Cache-Control", "private, max-age=2630000"); // 1 month cache
             let rd = fs.createReadStream(thumbnail.name);
             rd.once('end', () => thumbnail.removeCallback());
             rd.pipe(res);

static/public/css/style.css

@@ -0,0 +1,33 @@
+#pch-mediaList {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+#pch-mediaList > .pch-image {
+    display: flex;
+    height: 450px;
+    justify-content: center;
+}
+
+.pch-image {
+    position: relative;
+}
+
+.pch-image .spinner {
+    display: none;
+}
+
+.pch-image.loading .spinner {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.pch-image.loading img {
+    visibility: hidden;
+}
+

static/public/js/common.js

@@ -2,7 +2,7 @@
 function RebuildAccess() {
     LoadingTasks.push(() => {
         $.get("/api/access/list", data => {
-            console.log(data);
+            console.log("Access list => ", data);
         });
     });
 }
@@ -12,7 +12,6 @@ function ReadMediaList() {
         $.get("/api/media/list", data => {
             MediaStorage.Instance.pushAll(data.data.map(i => new Media(i)));
             $.get("/api/media/thumbnail/" + MediaStorage.Instance.newest.md5sum +".png");
-            console.log(MediaStorage.Instance);
         });
     });
 }

static/public/js/medias.js

@@ -1,26 +1,35 @@
 
-function MediaStorage()
-{
-    this.medias = [];
-    this.oldest = null;
-    this.newest = null;
+class Media {
+    constructor(data) {
+        this.date = new Date(data.date);
+        this.md5sum = data.md5sum;
+        this.path = data.path;
+        this.meta = data.meta || {};
+        this.tags = data.tags || [];
+        this.thumbnail = `/api/media/thumbnail/${data.md5sum}.png`;
+        this.ui = null;
+    }
 }
 
-MediaStorage.prototype.pushAll = function(arr) {
-    for (let i of arr) {
-        this.medias.push(i);
-        this.oldest = !this.oldest || this.oldest.date.getTime() < i.date.getTime() ? i : this.oldest;
-        this.newest = !this.newest || this.newest.date.getTime() > i.date.getTime() ? i : this.newest;
+class MediaStorage extends EventTarget
+{
+    constructor() {
+        super();
+        this.medias = [];
+        this.oldest = null;
+        this.newest = null;
+    }
+
+    pushAll(arr) {
+        for (let i of arr) {
+            this.medias.push(i);
+            this.oldest = !this.oldest || this.oldest.date.getTime() < i.date.getTime() ? i : this.oldest;
+            this.newest = !this.newest || this.newest.date.getTime() > i.date.getTime() ? i : this.newest;
+        }
+        for (let i of arr)
+            this.dispatchEvent(new CustomEvent("newMedia", { detail: i }));
     }
 }
 
 MediaStorage.Instance = new MediaStorage();
 
-function Media(data) {
-    this.date = new Date(data.date);
-    this.md5sum = data.md5sum;
-    this.path = data.path;
-    this.meta = data.meta || {};
-    this.tags = data.tags || [];
-    this.thumbnail = data.thumbnail;
-}

templates/footer.js

@@ -4,6 +4,7 @@ module.exports = `
 <script src="/public/bootstrap/bootstrap.min.js"></script>
 <script src="/public/js/taskQueue.js"></script>
 <script src="/public/js/medias.js"></script>
+<script src="/public/js/uiMedia.js"></script>
 <script src="/public/js/common.js"></script>
 </body></html>`;
 

templates/index.js

@@ -1,3 +1,5 @@
 
-module.exports = require('./header.js') +require('./menu.js') +``+require('./footer.js');
+module.exports = require('./header.js') +require('./menu.js')
+    +`<ul id="pch-mediaList"></ul>`
+    +require('./footer.js');