Better lightbox, better video handler, random reloads fix

src/static/css/dark.css

@@ -456,3 +456,26 @@ option {
 svg {
     fill: white;
 }
+
+.play {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+}
+
+.play svg {
+    fill: rgba(255, 255, 255, 0.7);
+}
+
+.img-wrapper:hover svg {
+    fill: rgba(255, 255, 255, 1);
+}
+
+.pointer {
+    cursor: pointer;
+}
+

src/static/css/light.css

@@ -161,6 +161,11 @@ body {
     width: 100%;
 }
 
+@media screen and (max-width: 1200px) {
+    .bricklayer-column {
+        max-width: 100%;
+    }
+}
 
 @media screen and (min-width: 1500px) {
     .container {
@@ -295,6 +300,7 @@ mark {
     .small-btn {
         display: none;
     }
+
     .large-btn {
         display: inherit;
     }
@@ -304,6 +310,7 @@ mark {
     .small-btn {
         display: inherit;
     }
+
     .large-btn {
         display: none;
     }
@@ -316,3 +323,26 @@ mark {
 #pathTree .title {
     cursor: pointer;
 }
+
+.play {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+}
+
+.play svg {
+    fill: rgba(0, 0, 0, 0.7);
+}
+
+.img-wrapper:hover svg {
+    fill: rgba(0, 0, 0, 1);
+}
+
+.pointer {
+    cursor: pointer;
+}
+

src/static/css/lity.min.css

@@ -0,0 +1,3 @@
+/*! Lity - v2.4.0 - 2019-08-10
+* http://sorgalla.com/lity/
+* Copyright (c) 2015-2019 Jan Sorgalla; Licensed MIT */.lity{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap;background:#0b0b0b;background:rgba(0,0,0,0.9);outline:none !important;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity.lity-opened{opacity:1}.lity.lity-closed{opacity:0}.lity *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.lity-wrap{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;outline:none !important}.lity-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em}.lity-loader{z-index:9991;color:#fff;position:absolute;top:50%;margin-top:-0.8em;width:100%;text-align:center;font-size:14px;font-family:Arial,Helvetica,sans-serif;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity-loading .lity-loader{opacity:1}.lity-container{z-index:9992;position:relative;text-align:left;vertical-align:middle;display:inline-block;white-space:normal;max-width:100%;max-height:100%;outline:none !important}.lity-content{z-index:9993;width:100%;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:-o-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease}.lity-loading .lity-content,.lity-closed .lity-content{-webkit-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);transform:scale(.8)}.lity-content:after{content:'';position:absolute;left:0;top:0;bottom:0;display:block;right:0;width:auto;height:auto;z-index:-1;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6)}.lity-close{z-index:9994;width:35px;height:35px;position:fixed;right:0;top:0;-webkit-appearance:none;cursor:pointer;text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close::-moz-focus-inner{border:0;padding:0}.lity-close:hover,.lity-close:focus,.lity-close:active,.lity-close:visited{text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close:active{top:1px}.lity-image img{max-width:100%;display:block;line-height:0;border:0}.lity-iframe .lity-container,.lity-youtube .lity-container,.lity-vimeo .lity-container,.lity-facebookvideo .lity-container,.lity-googlemaps .lity-container{width:100%;max-width:964px}.lity-iframe-container{width:100%;height:0;padding-top:56.25%;overflow:hidden;pointer-events:all;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-overflow-scrolling:touch}.lity-iframe-container iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000}.lity-hide{display:none}

src/static/js/dom.js

@@ -72,11 +72,24 @@ function addVidSrc(url, mime, video) {
 
 function shouldPlayVideo(hit) {
     const videoc = hit["_source"]["videoc"];
-    return videoc !== "hevc" && videoc !== "mpeg2video" && videoc !== "wmv3";
+    const mime = hit["_source"]["mime"];
+
+    return mime &&
+        hit["_source"]["extension"] !== "mkv" &&
+        mime.startsWith("video/") &&
+        videoc !== "hevc" &&
+        videoc !== "mpeg2video" &&
+        videoc !== "wmv3";
 }
 
 function shouldDisplayRawImage(hit) {
-    return hit["_source"]["mime"] && hit["_source"]["mime"].startsWith("image/") && hit["_source"]["videoc"] !== "tiff";
+    const mime = hit["_source"]["mime"];
+
+    return mime &&
+        mime.startsWith("image/") &&
+        hit["_source"]["mime"] &&
+        !hit["_source"]["parent"] &&
+        hit["_source"]["videoc"] !== "tiff";
 }
 
 function makePlaceholder(w, h, small) {
@@ -229,6 +242,7 @@ function createDocCard(hit) {
         let thumbnailOverlay = null;
         let imgWrapper = document.createElement("div");
         imgWrapper.setAttribute("style", "position: relative");
+        imgWrapper.setAttribute("class", "img-wrapper");
 
         let mimeCategory = hit["_source"]["mime"].split("/")[0];
 
@@ -237,7 +251,6 @@ function createDocCard(hit) {
 
         //Thumbnail overlay
         switch (mimeCategory) {
-
             case "image":
                 thumbnailOverlay = document.createElement("div");
                 thumbnailOverlay.setAttribute("class", "card-img-overlay");
@@ -331,49 +344,11 @@ function createDocCard(hit) {
 
 function makeThumbnail(mimeCategory, hit, imgWrapper, small) {
     let thumbnail;
-    let isSubDocument = hit["_source"].hasOwnProperty("parent");
 
-    if (mimeCategory === "video" && shouldPlayVideo(hit) && !isSubDocument) {
-        thumbnail = document.createElement("video");
-        addVidSrc("f/" + hit["_id"], hit["_source"]["mime"], thumbnail);
-
-        const placeholder = makePlaceholder(hit["_source"]["width"], hit["_source"]["height"], small);
-        imgWrapper.appendChild(placeholder);
-
-        if (small) {
-            thumbnail.setAttribute("class", "fit-sm");
-        } else {
-            thumbnail.setAttribute("class", "fit");
-        }
-        if (small) {
-            thumbnail.style.cursor = "pointer";
-            thumbnail.title = "Enlarge";
-            thumbnail.addEventListener("click", function () {
-                imgWrapper.classList.remove("wrapper-sm", "mr-1");
-                imgWrapper.parentElement.classList.add("media-expanded");
-                thumbnail.setAttribute("class", "fit");
-                thumbnail.setAttribute("controls", "");
-            });
-        } else {
-            thumbnail.setAttribute("controls", "");
-        }
-        thumbnail.setAttribute("preload", "none");
-        thumbnail.setAttribute("poster", `t/${hit["_source"]["index"]}/${hit["_id"]}`);
-        thumbnail.addEventListener("dblclick", function () {
-            thumbnail.setAttribute("controls", "");
-            if (thumbnail.webkitRequestFullScreen) {
-                thumbnail.webkitRequestFullScreen();
-            } else {
-                thumbnail.requestFullscreen();
-            }
-        });
-        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"] > 32 && hit["_source"]["height"] > 32)
+    if (
+        //TODO: check tn field
+        mimeCategory === "video" ||
+        (hit["_source"].hasOwnProperty("width") && hit["_source"]["width"] > 32 && hit["_source"]["height"] > 32)
         || hit["_source"]["mime"] === "application/pdf"
         || hit["_source"]["mime"] === "application/epub+zip"
         || hit["_source"]["mime"] === "application/x-cbz"
@@ -388,13 +363,24 @@ function makeThumbnail(mimeCategory, hit, imgWrapper, small) {
         }
         thumbnail.setAttribute("src", `t/${hit["_source"]["index"]}/${hit["_id"]}`);
 
-        if (!hit["_source"]["parent"] && shouldDisplayRawImage(hit)) {
-            imgWrapper.setAttribute("id", "sp" + hit["_id"]);
-            imgWrapper.setAttribute("data-src", `t/${hit["_source"]["index"]}/${hit["_id"]}`);
-            imgWrapper.setAttribute("href", `f/${hit["_id"]}`);
-            imgWrapper.setAttribute("data-caption", hit["_source"]["path"] + "/" + hit["_source"]["name"] + ext(hit));
-            imgWrapper.setAttribute("data-group", "p" + Math.floor(docCount / SIZE));
-            imgWrapper.classList.add("sp");
+        if (shouldDisplayRawImage(hit)) {
+            thumbnail.addEventListener("click", () => {
+                const l = lity(`f/${hit["_id"]}#.jpg`);
+                window.addEventListener("scroll", () => l.close());
+            });
+
+            imgWrapper.classList.add("pointer");
+        } else if (shouldPlayVideo(hit)) {
+            thumbnail.addEventListener("click", () => lity(`f/${hit["_id"]}#.mp4`));
+
+            imgWrapper.classList.add("pointer");
+
+            if (!small) {
+                const playOverlay = document.createElement("div");
+                playOverlay.innerHTML = '<svg viewBox="0 0 494.942 494.942" xmlns="http://www.w3.org/2000/svg"><path d="m35.353 0 424.236 247.471-424.236 247.471z"/></svg>';
+                playOverlay.classList.add("play");
+                imgWrapper.prepend(playOverlay);
+            }
         }
 
         const placeholder = makePlaceholder(hit["_source"]["width"], hit["_source"]["height"], small);
@@ -407,6 +393,7 @@ function makeThumbnail(mimeCategory, hit, imgWrapper, small) {
             placeholder.remove();
             imgWrapper.appendChild(thumbnail);
         });
+
     }
 
     return thumbnail;
@@ -605,7 +592,7 @@ function makeStatsCard(searchResult) {
         item.appendChild(document.createTextNode(SORT_MODES[mode].text));
         sortModeMenu.appendChild(item);
 
-        item.onclick = function() {
+        item.onclick = function () {
             CONF.options.sort = mode;
             CONF.save();
             searchDebounced();

src/static/js/search.js

@@ -166,7 +166,11 @@ function getDocumentInfo(id) {
 }
 
 function handleTreeClick(tree) {
-    return (node) => {
+    return (node, e) => {
+        if (e !== "checked") {
+            return
+        }
+
         if (node.id === "any") {
             if (!node.itree.state.checked) {
                 tree.deselect();
@@ -460,10 +464,6 @@ function search(after = null) {
             resultContainer._brick = new Bricklayer(resultContainer);
         }
 
-        window.setTimeout(() => {
-            $(".sp").SmartPhoto({animationSpeed: 0, swipeTopToClose: true, showAnimation: false, forceInterval: 50});
-        }, 100);
-
         if (!after) {
             docCount = 0;
         }
@@ -632,8 +632,8 @@ function handlePathTreeClick(tree) {
     return (event, node, handler) => {
 
         if (node.depth !== 0) {
-            $("#pathBar").val(node.id)
-            $("#pathTreeModal").modal("hide")
+            $("#pathBar").val(node.id);
+            $("#pathTreeModal").modal("hide");
             searchDebounced();
         }