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/__main__.py

@@ -23,7 +23,7 @@ from textwrap import dedent
 from .__init__ import E, WINDOWS, VT100, PY2, unicode
 from .__version__ import S_VERSION, S_BUILD_DT, CODENAME
 from .svchub import SvcHub
-from .util import py_desc, align_tab, IMPLICATIONS, alltrace
+from .util import py_desc, align_tab, IMPLICATIONS
 
 HAVE_SSL = True
 try:
@@ -191,16 +191,6 @@ def sighandler(sig=None, frame=None):
     print("\n".join(msg))
 
 
-def stackmon(fp, ival):
-    ctr = 0
-    while True:
-        ctr += 1
-        time.sleep(ival)
-        st = "{}, {}\n{}".format(ctr, time.time(), alltrace())
-        with open(fp, "wb") as f:
-            f.write(st.encode("utf-8", "replace"))
-
-
 def run_argparse(argv, formatter):
     ap = argparse.ArgumentParser(
         formatter_class=formatter,
@@ -346,6 +336,7 @@ def run_argparse(argv, formatter):
     ap2.add_argument("--no-fastboot", action="store_true", help="wait for up2k indexing")
     ap2.add_argument("--no-htp", action="store_true", help="disable httpserver threadpool, create threads as-needed instead")
     ap2.add_argument("--stackmon", metavar="P,S", type=u, help="write stacktrace to Path every S second")
+    ap2.add_argument("--log-thrs", metavar="SEC", type=float, help="list active threads every SEC")
     
     return ap.parse_args(args=argv[1:])
     # fmt: on
@@ -385,16 +376,6 @@ def main(argv=None):
     except AssertionError:
         al = run_argparse(argv, Dodge11874)
 
-    if al.stackmon:
-        fp, f = al.stackmon.rsplit(",", 1)
-        f = int(f)
-        t = threading.Thread(
-            target=stackmon,
-            args=(fp, f),
-        )
-        t.daemon = True
-        t.start()
-
     # propagate implications
     for k1, k2 in IMPLICATIONS:
         if getattr(al, k1):

copyparty/__version__.py

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

copyparty/broker_mp.py

@@ -27,18 +27,17 @@ class BrokerMp(object):
             cores = mp.cpu_count()
 
         self.log("broker", "booting {} subprocesses".format(cores))
-        for n in range(cores):
+        for n in range(1, cores + 1):
             q_pend = mp.Queue(1)
             q_yield = mp.Queue(64)
 
             proc = mp.Process(target=MpWorker, args=(q_pend, q_yield, self.args, n))
             proc.q_pend = q_pend
             proc.q_yield = q_yield
-            proc.nid = n
             proc.clients = {}
 
             thr = threading.Thread(
-                target=self.collector, args=(proc,), name="mp-collector"
+                target=self.collector, args=(proc,), name="mp-sink-{}".format(n)
             )
             thr.daemon = True
             thr.start()

copyparty/broker_mpw.py

@@ -35,7 +35,7 @@ class MpWorker(object):
         self.asrv = AuthSrv(args, None, False)
 
         # instantiate all services here (TODO: inheritance?)
-        self.httpsrv = HttpSrv(self, True)
+        self.httpsrv = HttpSrv(self, n)
 
         # on winxp and some other platforms,
         # use thr.join() to block all signals

copyparty/broker_thr.py

@@ -19,7 +19,7 @@ class BrokerThr(object):
         self.mutex = threading.Lock()
 
         # instantiate all services here (TODO: inheritance?)
-        self.httpsrv = HttpSrv(self)
+        self.httpsrv = HttpSrv(self, None)
 
     def shutdown(self):
         # self.log("broker", "shutting down")

copyparty/httpcli.py

@@ -37,7 +37,6 @@ class HttpCli(object):
         self.ip = conn.addr[0]
         self.addr = conn.addr  # type: tuple[str, int]
         self.args = conn.args
-        self.is_mp = conn.is_mp
         self.asrv = conn.asrv  # type: AuthSrv
         self.ico = conn.ico
         self.thumbcli = conn.thumbcli
@@ -343,6 +342,9 @@ class HttpCli(object):
         if "tree" in self.uparam:
             return self.tx_tree()
 
+        if "stack" in self.uparam:
+            return self.tx_stack()
+
         # conditional redirect to single volumes
         if self.vpath == "" and not self.ouparam:
             nread = len(self.rvol)
@@ -372,9 +374,6 @@ class HttpCli(object):
         if "scan" in self.uparam:
             return self.scanvol()
 
-        if "stack" in self.uparam:
-            return self.tx_stack()
-
         return self.tx_browser()
 
     def handle_options(self):

copyparty/httpconn.py

@@ -34,7 +34,6 @@ class HttpConn(object):
 
         self.args = hsrv.args
         self.asrv = hsrv.asrv
-        self.is_mp = hsrv.is_mp
         self.cert_path = hsrv.cert_path
 
         enth = HAVE_PIL and not self.args.no_thumb

copyparty/httpsrv.py

@@ -27,7 +27,7 @@ except ImportError:
     sys.exit(1)
 
 from .__init__ import E, PY2, MACOS
-from .util import spack, min_ex
+from .util import spack, min_ex, start_stackmon, start_log_thrs
 from .httpconn import HttpConn
 
 if PY2:
@@ -42,14 +42,14 @@ class HttpSrv(object):
     relying on MpSrv for performance (HttpSrv is just plain threads)
     """
 
-    def __init__(self, broker, is_mp=False):
+    def __init__(self, broker, nid):
         self.broker = broker
-        self.is_mp = is_mp
+        self.nid = nid
         self.args = broker.args
         self.log = broker.log
         self.asrv = broker.asrv
 
-        self.name = "httpsrv-i{:x}".format(os.getpid())
+        self.name = "httpsrv" + ("-n{}-i{:x}".format(nid, os.getpid()) if nid else "")
         self.mutex = threading.Lock()
         self.stopping = False
 
@@ -81,10 +81,18 @@ class HttpSrv(object):
         if self.tp_q:
             self.start_threads(4)
 
-            t = threading.Thread(target=self.thr_scaler)
+            name = "httpsrv-scaler" + ("-{}".format(nid) if nid else "")
+            t = threading.Thread(target=self.thr_scaler, name=name)
             t.daemon = True
             t.start()
 
+        if nid:
+            if self.args.stackmon:
+                start_stackmon(self.args.stackmon, nid)
+
+            if self.args.log_thrs:
+                start_log_thrs(self.log, self.args.log_thrs, nid)
+
     def start_threads(self, n):
         self.tp_nthr += n
         if self.args.log_htp:
@@ -93,7 +101,7 @@ class HttpSrv(object):
         for _ in range(n):
             thr = threading.Thread(
                 target=self.thr_poolw,
-                name="httpsrv-poolw",
+                name=self.name + "-poolw",
             )
             thr.daemon = True
             thr.start()
@@ -115,9 +123,14 @@ class HttpSrv(object):
                     self.stop_threads(4)
 
     def listen(self, sck, nlisteners):
+        ip, port = sck.getsockname()
         self.srvs.append(sck)
         self.nclimax = math.ceil(self.args.nc * 1.0 / nlisteners)
-        t = threading.Thread(target=self.thr_listen, args=(sck,))
+        t = threading.Thread(
+            target=self.thr_listen,
+            args=(sck,),
+            name="httpsrv-n{}-listen-{}-{}".format(self.nid or "0", ip, port),
+        )
         t.daemon = True
         t.start()
 
@@ -158,7 +171,7 @@ class HttpSrv(object):
         """takes an incoming tcp connection and creates a thread to handle it"""
         now = time.time()
 
-        if self.tp_time and now - self.tp_time > 300:
+        if now - (self.tp_time or now) > 300:
             self.tp_q = None
 
         if self.tp_q:
@@ -181,7 +194,7 @@ class HttpSrv(object):
         thr = threading.Thread(
             target=self.thr_client,
             args=(sck, addr),
-            name="httpsrv-{}-{}".format(addr[0].split(".", 2)[-1][-6:], addr[1]),
+            name="httpconn-{}-{}".format(addr[0].split(".", 2)[-1][-6:], addr[1]),
         )
         thr.daemon = True
         thr.start()
@@ -198,11 +211,11 @@ class HttpSrv(object):
             try:
                 sck, addr = task
                 me = threading.current_thread()
-                me.name = (
-                    "httpsrv-{}-{}".format(addr[0].split(".", 2)[-1][-6:], addr[1]),
+                me.name = "httpconn-{}-{}".format(
+                    addr[0].split(".", 2)[-1][-6:], addr[1]
                 )
                 self.thr_client(sck, addr)
-                me.name = "httpsrv-poolw"
+                me.name = self.name + "-poolw"
             except:
                 self.log(self.name, "thr_client: " + min_ex(), 3)
 
@@ -228,7 +241,7 @@ class HttpSrv(object):
                 if self.tp_q.empty():
                     break
 
-        self.log("httpsrv-i" + str(os.getpid()), "ok bye")
+        self.log(self.name, "ok bye")
 
     def thr_client(self, sck, addr):
         """thread managing one tcp client"""

copyparty/svchub.py

@@ -11,7 +11,7 @@ from datetime import datetime, timedelta
 import calendar
 
 from .__init__ import E, PY2, WINDOWS, MACOS, VT100
-from .util import mp
+from .util import mp, start_log_thrs, start_stackmon
 from .authsrv import AuthSrv
 from .tcpsrv import TcpSrv
 from .up2k import Up2k
@@ -42,6 +42,12 @@ class SvcHub(object):
         if args.lo:
             self._setup_logfile(printed)
 
+        if args.stackmon:
+            start_stackmon(args.stackmon, 0)
+
+        if args.log_thrs:
+            start_log_thrs(self.log, args.log_thrs, 0)
+
         # initiate all services to manage
         self.asrv = AuthSrv(self.args, self.log, False)
         if args.ls:

copyparty/util.py

@@ -16,6 +16,7 @@ import mimetypes
 import contextlib
 import subprocess as sp  # nosec
 from datetime import datetime
+from collections import Counter
 
 from .__init__ import PY2, WINDOWS, ANYWIN
 from .stolen import surrogateescape
@@ -282,6 +283,62 @@ def alltrace():
     return "\n".join(rret + bret)
 
 
+def start_stackmon(arg_str, nid):
+    suffix = "-{}".format(nid) if nid else ""
+    fp, f = arg_str.rsplit(",", 1)
+    f = int(f)
+    t = threading.Thread(
+        target=stackmon,
+        args=(fp, f, suffix),
+        name="stackmon" + suffix,
+    )
+    t.daemon = True
+    t.start()
+
+
+def stackmon(fp, ival, suffix):
+    ctr = 0
+    while True:
+        ctr += 1
+        time.sleep(ival)
+        st = "{}, {}\n{}".format(ctr, time.time(), alltrace())
+        with open(fp + suffix, "wb") as f:
+            f.write(st.encode("utf-8", "replace"))
+
+
+def start_log_thrs(logger, ival, nid):
+    ival = int(ival)
+    tname = lname = "log-thrs"
+    if nid:
+        tname = "logthr-n{}-i{:x}".format(nid, os.getpid())
+        lname = tname[3:]
+
+    t = threading.Thread(
+        target=log_thrs,
+        args=(logger, ival, lname),
+        name=tname,
+    )
+    t.daemon = True
+    t.start()
+
+
+def log_thrs(log, ival, name):
+    while True:
+        time.sleep(ival)
+        tv = [x.name for x in threading.enumerate()]
+        tv = [
+            x.split("-")[0]
+            if x.startswith("httpconn-") or x.startswith("thumb-")
+            else "listen"
+            if "-listen-" in x
+            else x
+            for x in tv
+            if not x.startswith("pydevd.")
+        ]
+        tv = ["{}\033[36m{}".format(v, k) for k, v in sorted(Counter(tv).items())]
+        log(name, "\033[0m \033[33m".join(tv), 3)
+
+
 def min_ex():
     et, ev, tb = sys.exc_info()
     tb = traceback.extract_tb(tb)

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,
@@ -32,28 +32,36 @@ window.baguetteBox = (function () {
         re_v = /.+\.(webm|mp4)(\?|$)/i,
         data = {},  // all galleries
         imagesElements = [],
-        documentLastFocus = null;
+        documentLastFocus = null,
+        isFullscreen = false,
+        vmute = false,
+        vloop = false,
+        vnext = false,
+        resume_mp = false;
 
-    var overlayClickHandler = function (event) {
-        if (event.target.id.indexOf('baguette-img') !== -1) {
+    var onFSC = function (e) {
+        isFullscreen = !!document.fullscreenElement;
+    };
+
+    var overlayClickHandler = function (e) {
+        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.startY = event.changedTouches[0].pageY;
+
+        touch.startX = e.changedTouches[0].pageX;
+        touch.startY = e.changedTouches[0].pageY;
     };
-    var touchmoveHandler = function (event) {
-        if (touchFlag || touch.multitouch) {
+    var touchmoveHandler = function (e) {
+        if (touchFlag || touch.multitouch)
             return;
-        }
-        event.preventDefault ? event.preventDefault() : event.returnValue = false;
-        var touchEvent = event.touches[0] || event.changedTouches[0];
+
+        e.preventDefault ? e.preventDefault() : e.returnValue = false;
+        var touchEvent = e.touches[0] || e.changedTouches[0];
         if (touchEvent.pageX - touch.startX > 40) {
             touchFlag = true;
             showPreviousImage();
@@ -66,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) {
-        if (overlay.style.display === 'block' && (overlay.contains && !overlay.contains(event.target))) {
-            event.stopPropagation();
-            initFocus();
+    var trapFocusInsideOverlay = function (e) {
+        if (overlay.style.display === 'block' && (overlay.contains && !overlay.contains(e.target))) {
+            e.stopPropagation();
+            btnClose.focus();
         }
     };
 
@@ -98,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) {
-                    if (event && (event.ctrlKey || event.metaKey))
+                var imageElementClickHandler = function (e) {
+                    if (ctrl(e))
                         return true;
 
-                    event.preventDefault ? event.preventDefault() : event.returnValue = false;
+                    e.preventDefault ? e.preventDefault() : e.returnValue = false;
                     prepareOverlay(gallery, userOptions);
                     showOverlay(imageIndex);
                 };
@@ -137,72 +142,51 @@ window.baguetteBox = (function () {
     }
 
     function clearCachedData() {
-        for (var selector in data) {
-            if (data.hasOwnProperty(selector)) {
+        for (var selector in data)
+            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');
-        if (overlay) {
-            slider = ebi('baguetteBox-slider');
-            previousButton = ebi('previous-button');
-            nextButton = ebi('next-button');
-            closeButton = ebi('close-button');
-            return;
+        overlay = ebi('bbox-overlay');
+        if (!overlay) {
+            var ctr = mknod('div');
+            ctr.innerHTML = (
+                '<div id="bbox-overlay" role="dialog">' +
+                '<div id="bbox-slider"></div>' +
+                '<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');
-        overlay.setAttribute('role', 'dialog');
-        overlay.id = 'baguetteBox-overlay';
-        document.getElementsByTagName('body')[0].appendChild(overlay);
-
-        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';
-
+        slider = ebi('bbox-slider');
+        btnPrev = ebi('bbox-prev');
+        btnNext = ebi('bbox-next');
+        btnVmode = ebi('bbox-vmode');
+        btnClose = ebi('bbox-close');
         bindEvents();
     }
 
@@ -210,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();
@@ -226,6 +210,71 @@ window.baguetteBox = (function () {
             playpause();
         else if (k == "KeyU" || k == "KeyO")
             relseek(k == "KeyU" ? -10 : 10);
+        else if (k == "KeyM" && v) {
+            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
+                    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) {
@@ -257,9 +306,10 @@ window.baguetteBox = (function () {
 
     function bindEvents() {
         bind(overlay, 'click', overlayClickHandler);
-        bind(previousButton, 'click', showPreviousImage);
-        bind(nextButton, 'click', showNextImage);
-        bind(closeButton, 'click', hideOverlay);
+        bind(btnPrev, 'click', showPreviousImage);
+        bind(btnNext, 'click', showNextImage);
+        bind(btnClose, 'click', hideOverlay);
+        bind(btnVmode, 'click', tglVmode);
         bind(slider, 'contextmenu', contextmenuHandler);
         bind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent);
         bind(overlay, 'touchmove', touchmoveHandler, passiveEvent);
@@ -269,9 +319,10 @@ window.baguetteBox = (function () {
 
     function unbindEvents() {
         unbind(overlay, 'click', overlayClickHandler);
-        unbind(previousButton, 'click', showPreviousImage);
-        unbind(nextButton, 'click', showNextImage);
-        unbind(closeButton, 'click', hideOverlay);
+        unbind(btnPrev, 'click', showPreviousImage);
+        unbind(btnNext, 'click', showNextImage);
+        unbind(btnClose, 'click', hideOverlay);
+        unbind(btnVmode, 'click', tglVmode);
         unbind(slider, 'contextmenu', contextmenuHandler);
         unbind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent);
         unbind(overlay, 'touchmove', touchmoveHandler, passiveEvent);
@@ -280,9 +331,9 @@ window.baguetteBox = (function () {
     }
 
     function prepareOverlay(gallery, userOptions) {
-        if (currentGallery === gallery) {
+        if (currentGallery === gallery)
             return;
-        }
+
         currentGallery = gallery;
         setOptions(userOptions);
         slider.innerHTML = '';
@@ -296,8 +347,8 @@ window.baguetteBox = (function () {
             fullImage.id = 'baguette-img-' + i;
             imagesElements.push(fullImage);
 
-            imagesFiguresIds.push('baguetteBox-figure-' + i);
-            imagesCaptionsIds.push('baguetteBox-figcaption-' + i);
+            imagesFiguresIds.push('bbox-figure-' + i);
+            imagesCaptionsIds.push('bbox-figcaption-' + i);
             slider.appendChild(imagesElements[i]);
         }
         overlay.setAttribute('aria-labelledby', imagesFiguresIds.join(' '));
@@ -305,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) {
@@ -329,12 +378,12 @@ 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);
+        bind(document, 'fullscreenchange', onFSC);
         currentIndex = chosenImageIndex;
         touch = {
             count: 0,
@@ -351,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.buttons) {
-            previousButton.focus();
-        } else {
-            closeButton.focus();
-        }
+            if (options.afterShow)
+                options.afterShow();
+        }, 50);
+
+        if (options.onChange)
+            options.onChange(currentIndex, imagesElements.length);
+
+        documentLastFocus = document.activeElement;
+        btnClose.focus();
+        isOverlayVisible = true;
     }
 
     function hideOverlay(e) {
@@ -381,22 +422,22 @@ 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);
+        unbind(document, 'fullscreenchange', onFSC);
         // Fade out and hide the overlay
         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);
@@ -406,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) {
-                callback();
-            }
-            return;
-        }
+            return callback ? callback() : null;
+
+        // maybe unloaded video
+        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.innerHTML = '<div class="baguetteBox-spinner">' +
-            '<div class="baguetteBox-double-bounce1"></div>' +
-            '<div class="baguetteBox-double-bounce2"></div>' +
+        figure.id = 'bbox-figure-' + index;
+        figure.innerHTML = '<div class="bbox-spinner">' +
+            '<div class="bbox-double-bounce1"></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),
-            image = mknod(is_vid ? 'video' : 'img');
-
+        var 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');
-        image.alt = thumbnailElement ? thumbnailElement.alt || '' : '';
-        if (options.titleTag && imageCaption) {
-            image.title = imageCaption;
+        if (is_vid) {
+            image.setAttribute('controls', 'controls');
+            image.onended = vidEnd;
         }
+        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) {
@@ -475,26 +521,20 @@ window.baguetteBox = (function () {
         return show(currentIndex - 1);
     }
 
-    function showFirstImage(event) {
-        if (event) {
-            event.preventDefault();
-        }
+    function showFirstImage(e) {
+        if (e)
+            e.preventDefault();
+
         return show(0);
     }
 
-    function showLastImage(event) {
-        if (event) {
-            event.preventDefault();
-        }
+    function showLastImage(e) {
+        if (e)
+            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);
@@ -502,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);
@@ -522,9 +568,8 @@ window.baguetteBox = (function () {
         });
         updateOffset();
 
-        if (options.onChange) {
+        if (options.onChange)
             options.onChange(currentIndex, imagesElements.length);
-        }
 
         return true;
     }
@@ -549,10 +594,23 @@ window.baguetteBox = (function () {
             vid().currentTime += sec;
     }
 
-    /**
-     * Triggers the bounce animation
-     * @param {('left'|'right')} direction - Direction of the movement
-     */
+    function vidEnd() {
+        if (this == vid() && vnext)
+            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 () {
@@ -572,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);
         });
@@ -606,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,62 +1156,66 @@ 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,
-#baguetteBox-overlay .full-image video {
+.full-image img,
+.full-image video {
 	display: inline-block;
 	width: auto;
 	height: auto;
-	max-height: 100%;
 	max-width: 100%;
+	max-height: 100%;
+	max-height: calc(100% - 1.4em);
+	margin-bottom: 1.4em;
 	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: absolute;
-	bottom: 0;
+	position: fixed;
+	bottom: .1em;
 	width: 100%;
 	text-align: center;
-	line-height: 1.8;
 	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 {
-	position: absolute;
+#bbox-slider {
+	position: fixed;
 	left: 0;
 	top: 0;
 	height: 100%;
@@ -1218,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 {
@@ -1234,48 +1239,51 @@ html.light #tree::-webkit-scrollbar {
 	50% {margin-left: 30px}
 	100% {margin-left: 0}
 }
-.baguetteBox-button#next-button,
-.baguetteBox-button#previous-button {
+#bbox-next,
+#bbox-prev {
 	top: 50%;
 	top: calc(50% - 30px);
 	width: 44px;
 	height: 60px;
 } 
-.baguetteBox-button {
-	position: absolute;
+.bbox-btn {
+	position: fixed;
+}
+.bbox-btn,
+#bbox-btns>button {
 	cursor: pointer;
 	outline: none;
-	padding: 0;
-	margin: 0;
+	padding: 0 .3em;
+	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,
-.baguetteBox-button:hover {
+.bbox-btn:focus,
+.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 {
-	left: 2%;
-}
-#close-button {
-	top: 20px;
-	right: 2%;
-	width: 30px;
-	height: 30px;
-}
-.baguetteBox-button svg {
-	position: absolute;
-	left: 0;
-	top: 0;
-}
-.baguetteBox-spinner {
+.bbox-spinner {
 	width: 40px;
 	height: 40px;
 	display: inline-block;
@@ -1285,8 +1293,8 @@ html.light #tree::-webkit-scrollbar {
 	margin-top: -20px;
 	margin-left: -20px;
 }
-.baguetteBox-double-bounce1,
-.baguetteBox-double-bounce2 {
+.bbox-double-bounce1,
+.bbox-double-bounce2 {
 	width: 100%;
 	height: 100%;
 	border-radius: 50%;
@@ -1297,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,20 +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>',
-        esc(String(msg)), '</p><p>', esc(url + ' @' + lineNo + ':' + columnNo), '</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(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'));
     }
     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';
@@ -53,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)
@@ -503,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;
@@ -525,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');
@@ -543,8 +548,8 @@ var tt = (function () {
             r.en = bcfg_get('tooltips', true)
         }
 
-        var _show = r.en ? show : null,
-            _hide = r.en ? hide : null;
+        var _show = r.en ? r.show : null,
+            _hide = r.en ? r.hide : null;
 
         var o = QSA('*[tt]');
         for (var a = o.length - 1; a >= 0; a--) {
@@ -553,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,
-  it breaks the compressed stuff at the end
+to edit this file, use HxD or "vim -b"
+  (there is compressed stuff at the end)
 
 run me with any version of python, i will unpack and run copyparty