v0.11.40

README.md

@@ -202,14 +202,19 @@ the browser has the following hotkeys
 * when playing audio:
   * `J/L` prev/next song
   * `U/O` skip 10sec back/forward
-  * `0..9` jump to 10%..90%
+  * `0..9` jump to 0%..90%
   * `P` play/pause (also starts playing the folder)
 * when viewing images / playing videos:
   * `J/L, Left/Right` prev/next file
   * `Home/End` first/last file
-  * `U/O` skip 10sec back/forward
-  * `P/K/Space` play/pause video
   * `Esc` close viewer
+  * videos:
+    * `U/O` skip 10sec back/forward
+    * `P/K/Space` play/pause
+    * `F` fullscreen
+    * `C` continue playing next video
+    * `R` loop
+    * `M` mute
 * when tree-sidebar is open:
   * `A/D` adjust tree width
 * in the grid view:
@@ -230,7 +235,7 @@ click `[-]` and `[+]` (or hotkeys `A`/`D`) to adjust the size, and the `[a]` tog
 
 it does static images with Pillow and uses FFmpeg for video files, so you may want to `--no-thumb` or maybe just `--no-vthumb` depending on how destructive your users are
 
-images named `folder.jpg` and `folder.png` become the thumbnail of the folder they're in
+images with the following names (see `--th-covers`) become the thumbnail of the folder they're in: `folder.png`, `folder.jpg`, `cover.png`, `cover.jpg`
 
 in the grid/thumbnail view, if the audio player panel is open, songs will start playing when clicked
 

copyparty/__version__.py

@@ -1,8 +1,8 @@
 # coding: utf-8
 
-VERSION = (0, 11, 39)
+VERSION = (0, 11, 40)
 CODENAME = "the grid"
-BUILD_DT = (2021, 7, 13)
+BUILD_DT = (2021, 7, 15)
 
 S_VERSION = ".".join(map(str, VERSION))
 S_BUILD_DT = "{0:04d}-{1:02d}-{2:02d}".format(*BUILD_DT)

copyparty/web/baguettebox.js

@@ -13,7 +13,7 @@ window.baguetteBox = (function () {
             captions: true,
             buttons: 'auto',
             noScrollbars: false,
-            bodyClass: 'baguetteBox-open',
+            bodyClass: 'bbox-open',
             titleTag: false,
             async: false,
             preload: 2,
@@ -22,7 +22,7 @@ window.baguetteBox = (function () {
             afterHide: null,
             onChange: null,
         },
-        overlay, slider, previousButton, nextButton, closeButton,
+        overlay, slider, btnPrev, btnNext, btnVmode, btnClose,
         currentGallery = [],
         currentIndex = 0,
         isOverlayVisible = false,
@@ -33,32 +33,35 @@ window.baguetteBox = (function () {
         data = {},  // all galleries
         imagesElements = [],
         documentLastFocus = null,
-        isFullscreen = false;
+        isFullscreen = false,
+        vmute = false,
+        vloop = false,
+        vnext = false,
+        resume_mp = false;
 
     var onFSC = function (e) {
         isFullscreen = !!document.fullscreenElement;
     };
 
-    var overlayClickHandler = function (event) {
+    var overlayClickHandler = function (e) {
-        if (event.target.id.indexOf('baguette-img') !== -1) {
+        if (e.target.id.indexOf('baguette-img') !== -1)
             hideOverlay();
-        }
     };
 
-    var touchstartHandler = function (event) {
+    var touchstartHandler = function (e) {
         touch.count++;
-        if (touch.count > 1) {
+        if (touch.count > 1)
             touch.multitouch = true;
-        }
+
-        touch.startX = event.changedTouches[0].pageX;
+        touch.startX = e.changedTouches[0].pageX;
-        touch.startY = event.changedTouches[0].pageY;
+        touch.startY = e.changedTouches[0].pageY;
     };
-    var touchmoveHandler = function (event) {
+    var touchmoveHandler = function (e) {
-        if (touchFlag || touch.multitouch) {
+        if (touchFlag || touch.multitouch)
             return;
-        }
+
-        event.preventDefault ? event.preventDefault() : event.returnValue = false;
+        e.preventDefault ? e.preventDefault() : e.returnValue = false;
-        var touchEvent = event.touches[0] || event.changedTouches[0];
+        var touchEvent = e.touches[0] || e.changedTouches[0];
         if (touchEvent.pageX - touch.startX > 40) {
             touchFlag = true;
             showPreviousImage();
@@ -71,19 +74,19 @@ window.baguetteBox = (function () {
     };
     var touchendHandler = function () {
         touch.count--;
-        if (touch.count <= 0) {
+        if (touch.count <= 0)
             touch.multitouch = false;
-        }
+
         touchFlag = false;
     };
     var contextmenuHandler = function () {
         touchendHandler();
     };
 
-    var trapFocusInsideOverlay = function (event) {
+    var trapFocusInsideOverlay = function (e) {
-        if (overlay.style.display === 'block' && (overlay.contains && !overlay.contains(event.target))) {
+        if (overlay.style.display === 'block' && (overlay.contains && !overlay.contains(e.target))) {
-            event.stopPropagation();
+            e.stopPropagation();
-            initFocus();
+            btnClose.focus();
         }
     };
 
@@ -103,28 +106,25 @@ window.baguetteBox = (function () {
 
         [].forEach.call(galleryNodeList, function (galleryElement) {
             var tagsNodeList = [];
-            if (galleryElement.tagName === 'A') {
+            if (galleryElement.tagName === 'A')
                 tagsNodeList = [galleryElement];
-            } else {
+            else
                 tagsNodeList = galleryElement.getElementsByTagName('a');
-            }
 
             tagsNodeList = [].filter.call(tagsNodeList, function (element) {
-                if (element.className.indexOf(userOptions && userOptions.ignoreClass) === -1) {
+                if (element.className.indexOf(userOptions && userOptions.ignoreClass) === -1)
                     return re_i.test(element.href) || re_v.test(element.href);
-                }
             });
-            if (tagsNodeList.length === 0) {
+            if (!tagsNodeList.length)
                 return;
-            }
 
             var gallery = [];
             [].forEach.call(tagsNodeList, function (imageElement, imageIndex) {
-                var imageElementClickHandler = function (event) {
+                var imageElementClickHandler = function (e) {
-                    if (event && (event.ctrlKey || event.metaKey))
+                    if (ctrl(e))
                         return true;
 
-                    event.preventDefault ? event.preventDefault() : event.returnValue = false;
+                    e.preventDefault ? e.preventDefault() : e.returnValue = false;
                     prepareOverlay(gallery, userOptions);
                     showOverlay(imageIndex);
                 };
@@ -142,72 +142,51 @@ window.baguetteBox = (function () {
     }
 
     function clearCachedData() {
-        for (var selector in data) {
+        for (var selector in data)
-            if (data.hasOwnProperty(selector)) {
+            if (data.hasOwnProperty(selector))
                 removeFromCache(selector);
-            }
-        }
     }
 
     function removeFromCache(selector) {
-        if (!data.hasOwnProperty(selector)) {
+        if (!data.hasOwnProperty(selector))
             return;
-        }
+
         var galleries = data[selector].galleries;
         [].forEach.call(galleries, function (gallery) {
             [].forEach.call(gallery, function (imageItem) {
                 unbind(imageItem.imageElement, 'click', imageItem.eventHandler);
             });
 
-            if (currentGallery === gallery) {
+            if (currentGallery === gallery)
                 currentGallery = [];
-            }
         });
 
         delete data[selector];
     }
 
     function buildOverlay() {
-        overlay = ebi('baguetteBox-overlay');
+        overlay = ebi('bbox-overlay');
-        if (overlay) {
+        if (!overlay) {
-            slider = ebi('baguetteBox-slider');
+            var ctr = mknod('div');
-            previousButton = ebi('previous-button');
+            ctr.innerHTML = (
-            nextButton = ebi('next-button');
+                '<div id="bbox-overlay" role="dialog">' +
-            closeButton = ebi('close-button');
+                '<div id="bbox-slider"></div>' +
-            return;
+                '<button id="bbox-prev" class="bbox-btn" type="button" aria-label="Previous">&lt;</button>' +
+                '<button id="bbox-next" class="bbox-btn" type="button" aria-label="Next">&gt;</button>' +
+                '<div id="bbox-btns">' +
+                '<button id="bbox-vmode" type="button" tt="a"></button>' +
+                '<button id="bbox-close" type="button" aria-label="Close">&times;</button>' +
+                '</div></div>'
+            );
+            overlay = ctr.firstChild;
+            QS('body').appendChild(overlay);
+            tt.init();
         }
-        overlay = mknod('div');
+        slider = ebi('bbox-slider');
-        overlay.setAttribute('role', 'dialog');
+        btnPrev = ebi('bbox-prev');
-        overlay.id = 'baguetteBox-overlay';
+        btnNext = ebi('bbox-next');
-        document.getElementsByTagName('body')[0].appendChild(overlay);
+        btnVmode = ebi('bbox-vmode');
-
+        btnClose = ebi('bbox-close');
-        slider = mknod('div');
-        slider.id = 'baguetteBox-slider';
-        overlay.appendChild(slider);
-
-        previousButton = mknod('button');
-        previousButton.setAttribute('type', 'button');
-        previousButton.id = 'previous-button';
-        previousButton.setAttribute('aria-label', 'Previous');
-        previousButton.innerHTML = '&lt;';
-        overlay.appendChild(previousButton);
-
-        nextButton = mknod('button');
-        nextButton.setAttribute('type', 'button');
-        nextButton.id = 'next-button';
-        nextButton.setAttribute('aria-label', 'Next');
-        nextButton.innerHTML = '&gt;';
-        overlay.appendChild(nextButton);
-
-        closeButton = mknod('button');
-        closeButton.setAttribute('type', 'button');
-        closeButton.id = 'close-button';
-        closeButton.setAttribute('aria-label', 'Close');
-        closeButton.innerHTML = '&times;';
-        overlay.appendChild(closeButton);
-
-        previousButton.className = nextButton.className = closeButton.className = 'baguetteBox-button';
-
         bindEvents();
     }
 
@@ -215,7 +194,7 @@ window.baguetteBox = (function () {
         if (e.ctrlKey || e.altKey || e.metaKey || e.isComposing)
             return;
 
-        var k = e.code + '';
+        var k = e.code + '', v = vid();
 
         if (k == "ArrowLeft" || k == "KeyJ")
             showPreviousImage();
@@ -231,18 +210,73 @@ window.baguetteBox = (function () {
             playpause();
         else if (k == "KeyU" || k == "KeyO")
             relseek(k == "KeyU" ? -10 : 10);
-        else if (k == "KeyM" && vid())
+        else if (k == "KeyM" && v) {
-            vid().muted = !vid().muted;
+            v.muted = vmute = !vmute;
+            mp_ctl();
+        }
+        else if (k == "KeyR" && v) {
+            vloop = !vloop;
+            vnext = vnext && !vloop;
+            setVmode();
+        }
+        else if (k == "KeyC" && v) {
+            vnext = !vnext;
+            vloop = vloop && !vnext;
+            setVmode();
+        }
         else if (k == "KeyF")
             try {
                 if (isFullscreen)
                     document.exitFullscreen();
                 else
-                    vid().requestFullscreen();
+                    v.requestFullscreen();
             }
             catch (ex) { }
     }
 
+    function setVmode() {
+        var v = vid();
+        ebi('bbox-vmode').style.display = v ? '' : 'none';
+        if (!v)
+            return;
+
+        var msg = 'When video ends, ', lbl;
+        if (vloop) {
+            lbl = 'Loop';
+            msg += 'repeat it';
+        }
+        else if (vnext) {
+            lbl = 'Cont';
+            msg += 'continue to next';
+        }
+        else {
+            lbl = 'Stop';
+            msg += 'just stop'
+        }
+        btnVmode.setAttribute('aria-label', msg);
+        btnVmode.setAttribute('tt', msg);
+        btnVmode.textContent = lbl;
+
+        v.loop = vloop
+        if (vloop && v.paused)
+            v.play();
+    }
+
+    function tglVmode() {
+        if (vloop) {
+            vnext = true;
+            vloop = false;
+        }
+        else if (vnext)
+            vnext = false;
+        else
+            vloop = true;
+
+        setVmode();
+        if (tt.en)
+            tt.show.bind(this)();
+    }
+
     function keyUpHandler(e) {
         if (e.ctrlKey || e.altKey || e.metaKey || e.isComposing)
             return;
@@ -272,9 +306,10 @@ window.baguetteBox = (function () {
 
     function bindEvents() {
         bind(overlay, 'click', overlayClickHandler);
-        bind(previousButton, 'click', showPreviousImage);
+        bind(btnPrev, 'click', showPreviousImage);
-        bind(nextButton, 'click', showNextImage);
+        bind(btnNext, 'click', showNextImage);
-        bind(closeButton, 'click', hideOverlay);
+        bind(btnClose, 'click', hideOverlay);
+        bind(btnVmode, 'click', tglVmode);
         bind(slider, 'contextmenu', contextmenuHandler);
         bind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent);
         bind(overlay, 'touchmove', touchmoveHandler, passiveEvent);
@@ -284,9 +319,10 @@ window.baguetteBox = (function () {
 
     function unbindEvents() {
         unbind(overlay, 'click', overlayClickHandler);
-        unbind(previousButton, 'click', showPreviousImage);
+        unbind(btnPrev, 'click', showPreviousImage);
-        unbind(nextButton, 'click', showNextImage);
+        unbind(btnNext, 'click', showNextImage);
-        unbind(closeButton, 'click', hideOverlay);
+        unbind(btnClose, 'click', hideOverlay);
+        unbind(btnVmode, 'click', tglVmode);
         unbind(slider, 'contextmenu', contextmenuHandler);
         unbind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent);
         unbind(overlay, 'touchmove', touchmoveHandler, passiveEvent);
@@ -295,9 +331,9 @@ window.baguetteBox = (function () {
     }
 
     function prepareOverlay(gallery, userOptions) {
-        if (currentGallery === gallery) {
+        if (currentGallery === gallery)
             return;
-        }
+
         currentGallery = gallery;
         setOptions(userOptions);
         slider.innerHTML = '';
@@ -311,8 +347,8 @@ window.baguetteBox = (function () {
             fullImage.id = 'baguette-img-' + i;
             imagesElements.push(fullImage);
 
-            imagesFiguresIds.push('baguetteBox-figure-' + i);
+            imagesFiguresIds.push('bbox-figure-' + i);
-            imagesCaptionsIds.push('baguetteBox-figcaption-' + i);
+            imagesCaptionsIds.push('bbox-figcaption-' + i);
             slider.appendChild(imagesElements[i]);
         }
         overlay.setAttribute('aria-labelledby', imagesFiguresIds.join(' '));
@@ -320,23 +356,21 @@ window.baguetteBox = (function () {
     }
 
     function setOptions(newOptions) {
-        if (!newOptions) {
+        if (!newOptions)
             newOptions = {};
-        }
+
         for (var item in defaults) {
             options[item] = defaults[item];
-            if (typeof newOptions[item] !== 'undefined') {
+            if (typeof newOptions[item] !== 'undefined')
                 options[item] = newOptions[item];
-            }
         }
         slider.style.transition = (options.animation === 'fadeIn' ? 'opacity .4s ease' :
             options.animation === 'slideIn' ? '' : 'none');
 
-        if (options.buttons === 'auto' && ('ontouchstart' in window || currentGallery.length === 1)) {
+        if (options.buttons === 'auto' && ('ontouchstart' in window || currentGallery.length === 1))
             options.buttons = false;
-        }
 
-        previousButton.style.display = nextButton.style.display = (options.buttons ? '' : 'none');
+        btnPrev.style.display = btnNext.style.display = (options.buttons ? '' : 'none');
     }
 
     function showOverlay(chosenImageIndex) {
@@ -344,9 +378,8 @@ window.baguetteBox = (function () {
             document.documentElement.style.overflowY = 'hidden';
             document.body.style.overflowY = 'scroll';
         }
-        if (overlay.style.display === 'block') {
+        if (overlay.style.display === 'block')
             return;
-        }
 
         bind(document, 'keydown', keyDownHandler);
         bind(document, 'keyup', keyUpHandler);
@@ -367,27 +400,19 @@ window.baguetteBox = (function () {
         // Fade in overlay
         setTimeout(function () {
             overlay.className = 'visible';
-            if (options.bodyClass && document.body.classList) {
+            if (options.bodyClass && document.body.classList)
                 document.body.classList.add(options.bodyClass);
-            }
-            if (options.afterShow) {
-                options.afterShow();
-            }
-        }, 50);
-        if (options.onChange) {
-            options.onChange(currentIndex, imagesElements.length);
-        }
-        documentLastFocus = document.activeElement;
-        initFocus();
-        isOverlayVisible = true;
-    }
 
-    function initFocus() {
+            if (options.afterShow)
-        if (options.buttons) {
+                options.afterShow();
-            previousButton.focus();
+        }, 50);
-        } else {
+
-            closeButton.focus();
+        if (options.onChange)
-        }
+            options.onChange(currentIndex, imagesElements.length);
+
+        documentLastFocus = document.activeElement;
+        btnClose.focus();
+        isOverlayVisible = true;
     }
 
     function hideOverlay(e) {
@@ -397,9 +422,8 @@ window.baguetteBox = (function () {
             document.documentElement.style.overflowY = 'auto';
             document.body.style.overflowY = 'auto';
         }
-        if (overlay.style.display === 'none') {
+        if (overlay.style.display === 'none')
             return;
-        }
 
         unbind(document, 'keydown', keyDownHandler);
         unbind(document, 'keyup', keyUpHandler);
@@ -408,12 +432,12 @@ window.baguetteBox = (function () {
         overlay.className = '';
         setTimeout(function () {
             overlay.style.display = 'none';
-            if (options.bodyClass && document.body.classList) {
+            if (options.bodyClass && document.body.classList)
                 document.body.classList.remove(options.bodyClass);
-            }
+
-            if (options.afterHide) {
+            if (options.afterHide)
                 options.afterHide();
-            }
+
             documentLastFocus && documentLastFocus.focus();
             isOverlayVisible = false;
         }, 500);
@@ -423,63 +447,68 @@ window.baguetteBox = (function () {
         var imageContainer = imagesElements[index];
         var galleryItem = currentGallery[index];
 
-        if (typeof imageContainer === 'undefined' || typeof galleryItem === 'undefined') {
+        if (typeof imageContainer === 'undefined' || typeof galleryItem === 'undefined')
             return;  // out-of-bounds or gallery dirty
-        }
 
-        if (imageContainer.querySelector('img, video')) {
+        if (imageContainer.querySelector('img, video'))
             // was loaded, cb and bail
-            if (callback) {
+            return callback ? callback() : null;
-                callback();
+
-            }
+        // maybe unloaded video
-            return;
+        while (imageContainer.firstChild)
-        }
+            imageContainer.removeChild(imageContainer.firstChild);
 
         var imageElement = galleryItem.imageElement,
             imageSrc = imageElement.href,
+            is_vid = re_v.test(imageSrc),
             thumbnailElement = imageElement.querySelector('img, video'),
             imageCaption = typeof options.captions === 'function' ?
                 options.captions.call(currentGallery, imageElement) :
                 imageElement.getAttribute('data-caption') || imageElement.title;
 
+        imageSrc += imageSrc.indexOf('?') < 0 ? '?cache' : '&cache';
+
+        if (is_vid && index != currentIndex)
+            return;  // no preload
+
         var figure = mknod('figure');
-        figure.id = 'baguetteBox-figure-' + index;
+        figure.id = 'bbox-figure-' + index;
-        figure.innerHTML = '<div class="baguetteBox-spinner">' +
+        figure.innerHTML = '<div class="bbox-spinner">' +
-            '<div class="baguetteBox-double-bounce1"></div>' +
+            '<div class="bbox-double-bounce1"></div>' +
-            '<div class="baguetteBox-double-bounce2"></div>' +
+            '<div class="bbox-double-bounce2"></div>' +
             '</div>';
 
         if (options.captions && imageCaption) {
             var figcaption = mknod('figcaption');
-            figcaption.id = 'baguetteBox-figcaption-' + index;
+            figcaption.id = 'bbox-figcaption-' + index;
             figcaption.innerHTML = imageCaption;
             figure.appendChild(figcaption);
         }
         imageContainer.appendChild(figure);
 
-        var is_vid = re_v.test(imageSrc),
+        var image = mknod(is_vid ? 'video' : 'img');
-            image = mknod(is_vid ? 'video' : 'img');
-
         clmod(imageContainer, 'vid', is_vid);
 
         image.addEventListener(is_vid ? 'loadedmetadata' : 'load', function () {
             // Remove loader element
-            var spinner = document.querySelector('#baguette-img-' + index + ' .baguetteBox-spinner');
+            var spinner = document.querySelector('#baguette-img-' + index + ' .bbox-spinner');
             figure.removeChild(spinner);
             if (!options.async && callback)
                 callback();
         });
         image.setAttribute('src', imageSrc);
-        image.setAttribute('controls', 'controls');
+        if (is_vid) {
-        image.alt = thumbnailElement ? thumbnailElement.alt || '' : '';
+            image.setAttribute('controls', 'controls');
-        if (options.titleTag && imageCaption) {
+            image.onended = vidEnd;
-            image.title = imageCaption;
         }
+        image.alt = thumbnailElement ? thumbnailElement.alt || '' : '';
+        if (options.titleTag && imageCaption)
+            image.title = imageCaption;
+
         figure.appendChild(image);
 
-        if (options.async && callback) {
+        if (options.async && callback)
             callback();
-        }
     }
 
     function showNextImage(e) {
@@ -492,26 +521,20 @@ window.baguetteBox = (function () {
         return show(currentIndex - 1);
     }
 
-    function showFirstImage(event) {
+    function showFirstImage(e) {
-        if (event) {
+        if (e)
-            event.preventDefault();
+            e.preventDefault();
-        }
+
         return show(0);
     }
 
-    function showLastImage(event) {
+    function showLastImage(e) {
-        if (event) {
+        if (e)
-            event.preventDefault();
+            e.preventDefault();
-        }
+
         return show(currentGallery.length - 1);
     }
 
-    /**
-     * Move the gallery to a specific index
-     * @param `index` {number} - the position of the image
-     * @param `gallery` {array} - gallery which should be opened, if omitted assumes the currently opened one
-     * @return {boolean} - true on success or false if the index is invalid
-     */
     function show(index, gallery) {
         if (!isOverlayVisible && index >= 0 && index < gallery.length) {
             prepareOverlay(gallery, options);
@@ -519,19 +542,25 @@ window.baguetteBox = (function () {
             return true;
         }
         if (index < 0) {
-            if (options.animation) {
+            if (options.animation)
                 bounceAnimation('left');
-            }
+
             return false;
         }
         if (index >= imagesElements.length) {
-            if (options.animation) {
+            if (options.animation)
                 bounceAnimation('right');
-            }
+
             return false;
         }
 
-        playvid(false);
+        var v = vid();
+        if (v) {
+            v.src = '';
+            v.load();
+            v.parentNode.removeChild(v);
+        }
+
         currentIndex = index;
         loadImage(currentIndex, function () {
             preloadNext(currentIndex);
@@ -539,9 +568,8 @@ window.baguetteBox = (function () {
         });
         updateOffset();
 
-        if (options.onChange) {
+        if (options.onChange)
             options.onChange(currentIndex, imagesElements.length);
-        }
 
         return true;
     }
@@ -566,10 +594,23 @@ window.baguetteBox = (function () {
             vid().currentTime += sec;
     }
 
-    /**
+    function vidEnd() {
-     * Triggers the bounce animation
+        if (this == vid() && vnext)
-     * @param {('left'|'right')} direction - Direction of the movement
+            showNextImage();
-     */
+    }
+
+    function mp_ctl() {
+        var v = vid();
+        if (!vmute && v && mp.au && !mp.au.paused) {
+            mp.fade_out();
+            resume_mp = true;
+        }
+        else if (resume_mp && (vmute || !v) && mp.au && mp.au.paused) {
+            mp.fade_in();
+            resume_mp = false;
+        }
+    }
+
     function bounceAnimation(direction) {
         slider.className = 'bounce-from-' + direction;
         setTimeout(function () {
@@ -589,22 +630,29 @@ window.baguetteBox = (function () {
             slider.style.transform = 'translate3d(' + offset + ',0,0)';
         }
         playvid(false);
-        playvid(true);
+        var v = vid();
+        if (v) {
+            playvid(true);
+            v.muted = vmute;
+            v.loop = vloop;
+        }
+        mp_ctl();
+        setVmode();
     }
 
     function preloadNext(index) {
-        if (index - currentIndex >= options.preload) {
+        if (index - currentIndex >= options.preload)
             return;
-        }
+
         loadImage(index + 1, function () {
             preloadNext(index + 1);
         });
     }
 
     function preloadPrev(index) {
-        if (currentIndex - index >= options.preload) {
+        if (currentIndex - index >= options.preload)
             return;
-        }
+
         loadImage(index - 1, function () {
             preloadPrev(index - 1);
         });
@@ -623,7 +671,7 @@ window.baguetteBox = (function () {
         clearCachedData();
         unbind(document, 'keydown', keyDownHandler);
         unbind(document, 'keyup', keyUpHandler);
-        document.getElementsByTagName('body')[0].removeChild(ebi('baguetteBox-overlay'));
+        document.getElementsByTagName('body')[0].removeChild(ebi('bbox-overlay'));
         data = {};
         currentGallery = [];
         currentIndex = 0;

copyparty/web/browser.css

@@ -902,7 +902,8 @@ html.light #ggrid a:hover {
 #pvol,
 #barbuf,
 #barpos,
-#u2conf label {
+#u2conf label,
+#ops {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -1145,7 +1146,7 @@ html.light #tree::-webkit-scrollbar {
 
 
 
-#baguetteBox-overlay {
+#bbox-overlay {
 	display: none;
 	opacity: 0;
 	position: fixed;
@@ -1155,27 +1156,27 @@ html.light #tree::-webkit-scrollbar {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	z-index: 1000000;
+	z-index: 10;
 	background: rgba(0, 0, 0, 0.8);
 	transition: opacity .3s ease;
 }
-#baguetteBox-overlay.visible {
+#bbox-overlay.visible {
 	opacity: 1;
 }
-#baguetteBox-overlay .full-image {
+.full-image {
     display: inline-block;
     position: relative;
     width: 100%;
     height: 100%;
     text-align: center;
 }
-#baguetteBox-overlay .full-image figure {
+.full-image figure {
 	display: inline;
 	margin: 0;
 	height: 100%;
 }
-#baguetteBox-overlay .full-image img,
+.full-image img,
-#baguetteBox-overlay .full-image video {
+.full-image video {
 	display: inline-block;
 	width: auto;
 	height: auto;
@@ -1186,10 +1187,10 @@ html.light #tree::-webkit-scrollbar {
 	vertical-align: middle;
 	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 }
-#baguetteBox-overlay .full-image video {
+.full-image video {
 	background: #333;
 }
-#baguetteBox-overlay .full-image figcaption {
+.full-image figcaption {
 	display: block;
 	position: fixed;
 	bottom: .1em;
@@ -1198,20 +1199,23 @@ html.light #tree::-webkit-scrollbar {
 	white-space: normal;
 	color: #ccc;
 }
-#baguetteBox-overlay figcaption a {
+#bbox-overlay figcaption a {
 	background: rgba(0, 0, 0, 0.6);
 	border-radius: .4em;
 	padding: .3em .6em;
 }
-#baguetteBox-overlay .full-image:before {
+html.light #bbox-overlay figcaption a {
+	color: #0bf;
+}
+.full-image:before {
 	content: "";
 	display: inline-block;
 	height: 50%;
 	width: 1px;
 	margin-right: -1px;
 }
-#baguetteBox-slider {
+#bbox-slider {
-	position: absolute;
+	position: fixed;
 	left: 0;
 	top: 0;
 	height: 100%;
@@ -1219,10 +1223,10 @@ html.light #tree::-webkit-scrollbar {
 	white-space: nowrap;
 	transition: left .2s ease, transform .2s ease;
 }
-#baguetteBox-slider.bounce-from-right {
+.bounce-from-right {
 	animation: bounceFromRight .4s ease-out;
 }
-#baguetteBox-slider.bounce-from-left {
+.bounce-from-left {
 	animation: bounceFromLeft .4s ease-out;
 }
 @keyframes bounceFromRight {
@@ -1235,48 +1239,51 @@ html.light #tree::-webkit-scrollbar {
 	50% {margin-left: 30px}
 	100% {margin-left: 0}
 }
-.baguetteBox-button#next-button,
+#bbox-next,
-.baguetteBox-button#previous-button {
+#bbox-prev {
 	top: 50%;
 	top: calc(50% - 30px);
 	width: 44px;
 	height: 60px;
 } 
-.baguetteBox-button {
+.bbox-btn {
-	position: absolute;
+	position: fixed;
+}
+.bbox-btn,
+#bbox-btns>button {
 	cursor: pointer;
 	outline: none;
-	padding: 0;
+	padding: 0 .3em;
-	margin: 0;
+	margin: 0 .4em;
 	border: 0;
 	border-radius: 15%;
 	background: rgba(50, 50, 50, 0.5);
 	color: #ddd;
 	font: 1.6em sans-serif;
 	transition: background-color .3s ease;
+	line-height: 1em;
+	vertical-align: top;
 }
-.baguetteBox-button:focus,
+.bbox-btn:focus,
-.baguetteBox-button:hover {
+.bbox-btn:hover {
 	background: rgba(50, 50, 50, 0.9);
 }
-#next-button {
+button#bbox-vmode {
+	font-size: 1em;
+	line-height: 1.6em;
+}
+#bbox-next {
+	right: 1%;
+}
+#bbox-prev {
+	left: 1%;
+}
+#bbox-btns {
+	top: .5em;
 	right: 2%;
+	position: fixed;
 }
-#previous-button {
+.bbox-spinner {
-	left: 2%;
-}
-#close-button {
-	top: 20px;
-	right: 2%;
-	width: 30px;
-	height: 30px;
-}
-.baguetteBox-button svg {
-	position: absolute;
-	left: 0;
-	top: 0;
-}
-.baguetteBox-spinner {
 	width: 40px;
 	height: 40px;
 	display: inline-block;
@@ -1286,8 +1293,8 @@ html.light #tree::-webkit-scrollbar {
 	margin-top: -20px;
 	margin-left: -20px;
 }
-.baguetteBox-double-bounce1,
+.bbox-double-bounce1,
-.baguetteBox-double-bounce2 {
+.bbox-double-bounce2 {
 	width: 100%;
 	height: 100%;
 	border-radius: 50%;
@@ -1298,7 +1305,7 @@ html.light #tree::-webkit-scrollbar {
 	left: 0;
 	animation: bounce 2s infinite ease-in-out;
 }
-.baguetteBox-double-bounce2 {
+.bbox-double-bounce2 {
 	animation-delay: -1s;
 }
 @keyframes bounce {

copyparty/web/browser.js

@@ -167,12 +167,13 @@ ebi('tree').innerHTML = (
 
 
 function opclick(e) {
-	ev(e);
-
 	var dest = this.getAttribute('data-dest');
-	goto(dest);
-
 	swrite('opmode', dest || null);
+	if (ctrl(e))
+		return;
+
+	ev(e);
+	goto(dest);
 
 	var input = QS('.opview.act input:not([type="hidden"])')
 	if (input && !is_touch)
@@ -1756,6 +1757,9 @@ document.onkeydown = function (e) {
 	if (e.ctrlKey || e.altKey || e.metaKey || e.isComposing)
 		return;
 
+	if (QS('#bbox-overlay.visible'))
+		return;
+
 	var k = e.code + '', pos = -1, n;
 
 	if (e.shiftKey && k != 'KeyA' && k != 'KeyD')

copyparty/web/util.js

@@ -27,21 +27,20 @@ function vis_exh(msg, url, lineNo, columnNo, error) {
 
     window.onerror = undefined;
     window['vis_exh'] = null;
-    var html = ['<h1>you hit a bug!</h1><p>please send me a screenshot arigathanks gozaimuch: <code>ed/irc.rizon.net</code> or <code>ed#2644</code><br />&nbsp; (and if you can, press F12 and include the "Console" tab in the screenshot too)</p><p>',
+    var html = ['<h1>you hit a bug!</h1><p style="font-size:1.3em;margin:0">try to <a href="#" onclick="localStorage.clear();location.reload();" style="text-decoration:underline;color:#fc0">reset copyparty settings</a> if you are stuck here</p><p>please send me a screenshot arigathanks gozaimuch: <code>ed/irc.rizon.net</code> or <code>ed#2644</code><br />&nbsp; (and if you can, press F12 and include the "Console" tab in the screenshot too)</p><p>',
-        esc(String(msg)), '</p><p>', esc(url + ' @' + lineNo + ':' + columnNo), '</p>'];
+        esc(url + ' @' + lineNo + ':' + columnNo), '<br />' + esc(String(msg)) + '</p>'];
 
     if (error) {
         var find = ['desc', 'stack', 'trace'];
         for (var a = 0; a < find.length; a++)
             if (String(error[find[a]]) !== 'undefined')
-                html.push('<h2>' + find[a] + '</h2>' +
+                html.push('<h3>' + find[a] + '</h3>' +
                     esc(String(error[find[a]])).replace(/\n/g, '<br />\n'));
     }
-    html.push('<p style="border-top:1px solid #999;margin-top:1.5em;font-size:1.4em">if you are stuck here, try to <a href="#" onclick="localStorage.clear();location.reload();">reset copyparty settings</a></p>');
     document.body.innerHTML = html.join('\n');
 
     var s = mknod('style');
-    s.innerHTML = 'body{background:#333;color:#ddd;font-family:sans-serif;font-size:0.8em;padding:0 1em 1em 1em} code{color:#bf7;background:#222;padding:.1em;margin:.2em;font-size:1.1em;font-family:monospace,monospace} *{line-height:1.5em}';
+    s.innerHTML = 'body{background:#333;color:#ddd;font-family:sans-serif;font-size:0.8em;padding:0 1em 1em 1em} h1{margin:.5em 1em 0 0;padding:0} h3{border-top:1px solid #999;margin:0} code{color:#bf7;background:#222;padding:.1em;margin:.2em;font-size:1.1em;font-family:monospace,monospace} *{line-height:1.5em}';
     document.head.appendChild(s);
 
     throw 'fatal_err';
@@ -54,6 +53,11 @@ var ebi = document.getElementById.bind(document),
     mknod = document.createElement.bind(document);
 
 
+function ctrl(e) {
+    return e && (e.ctrlKey || e.metaKey);
+}
+
+
 function ev(e) {
     e = e || window.event;
     if (!e)
@@ -504,7 +508,7 @@ var tt = (function () {
     r.tt.setAttribute('id', 'tt');
     document.body.appendChild(r.tt);
 
-    function show() {
+    r.show = function () {
         var cfg = sread('tooltips');
         if (cfg !== null && cfg != '1')
             return;
@@ -526,11 +530,11 @@ var tt = (function () {
 
         r.tt.innerHTML = msg.replace(/\$N/g, "<br />");
         clmod(r.tt, 'show', 1);
-    }
+    };
 
-    function hide() {
+    r.hide = function () {
         clmod(r.tt, 'show');
-    }
+    };
 
     r.init = function () {
         var ttb = ebi('tooltips');
@@ -544,8 +548,8 @@ var tt = (function () {
             r.en = bcfg_get('tooltips', true)
         }
 
-        var _show = r.en ? show : null,
+        var _show = r.en ? r.show : null,
-            _hide = r.en ? hide : null;
+            _hide = r.en ? r.hide : null;
 
         var o = QSA('*[tt]');
         for (var a = o.length - 1; a >= 0; a--) {
@@ -554,7 +558,7 @@ var tt = (function () {
             o[a].onmouseenter = _show;
             o[a].onmouseleave = _hide;
         }
-        hide();
+        r.hide();
     };
 
     return r;

scripts/sfx.py

@@ -6,8 +6,8 @@ import re, os, sys, time, shutil, signal, threading, tarfile, hashlib, platform,
 import subprocess as sp
 
 """
-pls don't edit this file with a text editor,
+to edit this file, use HxD or "vim -b"
-  it breaks the compressed stuff at the end
+  (there is compressed stuff at the end)
 
 run me with any version of python, i will unpack and run copyparty