Image placeholder

simon987 · Nov 10, 2019 · fc22e52 · fc22e52
1 parent ba81748
commit fc22e52
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/src/io/store.c b/src/io/store.c
@@ -15,7 +15,7 @@ store_t *store_create(char *path) {
     );
 
     if (open_ret != 0) {
-        fprintf(stderr, "Error while opening store: %s", mdb_strerror(open_ret));
+        fprintf(stderr, "Error while opening store: %s (%s)\n", mdb_strerror(open_ret), path);
         exit(1);
     }
 

diff --git a/src/main.c b/src/main.c
@@ -10,7 +10,7 @@
 #define EPILOG "Made by simon987 <me@simon987.net>. Released under GPL-3.0"
 
 
-static const char *const Version = "1.1.3";
+static const char *const Version = "1.1.4";
 static const char *const usage[] = {
         "sist2 scan [OPTION]... PATH",
         "sist2 index [OPTION]... INDEX",

diff --git a/src/web/static_generated.c b/src/web/static_generated.c
diff --git a/web/js/dom.js b/web/js/dom.js
@@ -75,6 +75,18 @@ function shouldPlayVideo(hit) {
     return videoc !== "hevc" && videoc !== "mpeg2video" && videoc !== "wmv3";
 }
 
+function makePlaceholder(w, h) {
+    const calc = w > h
+        ? (175 / w / h) >= 272
+            ? (175 * w / h)
+            : 175
+        : 175;
+
+    const el = document.createElement("div");
+    el.setAttribute("style", `height: ${calc}px`);
+    return el;
+}
+
 /**
  *
  * @param hit
@@ -119,14 +131,22 @@ function createDocCard(hit) {
             thumbnail = document.createElement("video");
             addVidSrc("f/" + hit["_id"], hit["_source"]["mime"], thumbnail);
 
+            const placeholder = makePlaceholder(hit["_source"]["width"], hit["_source"]["height"]);
+            imgWrapper.appendChild(placeholder);
+
             thumbnail.setAttribute("class", "fit");
-            thumbnail.setAttribute("loop", "");
             thumbnail.setAttribute("controls", "");
             thumbnail.setAttribute("preload", "none");
             thumbnail.setAttribute("poster", `t/${hit["_source"]["index"]}/${hit["_id"]}`);
             thumbnail.addEventListener("dblclick", function () {
                 thumbnail.webkitRequestFullScreen();
             });
+            const poster = new Image();
+            poster.src = thumbnail.getAttribute('poster');
+            poster.addEventListener("load", function () {
+                placeholder.remove();
+                imgWrapper.appendChild(thumbnail);
+            });
         } else if ((hit["_source"].hasOwnProperty("width") && hit["_source"]["width"] > 20 && hit["_source"]["height"] > 20)
             || hit["_source"]["mime"] === "application/pdf"
             || hit["_source"]["mime"] === "application/epub+zip"
@@ -136,9 +156,17 @@ function createDocCard(hit) {
             thumbnail = document.createElement("img");
             thumbnail.setAttribute("class", "card-img-top fit");
             thumbnail.setAttribute("src", `t/${hit["_source"]["index"]}/${hit["_id"]}`);
+
+            const placeholder = makePlaceholder(hit["_source"]["width"], hit["_source"]["height"]);
+            imgWrapper.appendChild(placeholder);
+
             thumbnail.addEventListener("error", () => {
                 imgWrapper.remove();
             });
+            thumbnail.addEventListener("load", () => {
+                placeholder.remove();
+                imgWrapper.appendChild(thumbnail);
+            });
         }
 
         //Thumbnail overlay
@@ -206,7 +234,6 @@ function createDocCard(hit) {
         }
 
         if (thumbnail !== null) {
-            imgWrapper.appendChild(thumbnail);
             docCard.appendChild(imgWrapper);
         }