mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2026-06-21 13:42:29 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

pixelated render toggle in bbox

Browse source
This commit is contained in:
Til Schmitter 2026-05-05 23:06:16 +02:00
parent 9e7524db6c
commit 61a95b324e
2 changed files with 31 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
copyparty/web/baguettebox.js
View file

@ -28,7 +28,7 @@ window.baguetteBox = (function () {
onChange: null, onChange: null,
readDirRtl: false, readDirRtl: false,
}, },
overlay, slider, btnPrev, btnNext, btnHelp, btnAnim, btnRotL, btnRotR, btnSel, btnFull, btnZoom, btnVmode, btnReadDir, btnClose, overlay, slider, btnPrev, btnNext, btnHelp, btnAnim, btnRotL, btnRotR, btnSel, btnFull, btnZoom, btnPixelated, btnVmode, btnReadDir, btnClose,
currentGallery = [], currentGallery = [],
currentIndex = 0, currentIndex = 0,
isOverlayVisible = false, isOverlayVisible = false,
@ -310,8 +310,9 @@ window.baguetteBox = (function () {
'<div id="bbox-btns">' + '<div id="bbox-btns">' +
'<a id="bbox-close" class="btn" aria-label="Close">✕</a>' + '<a id="bbox-close" class="btn" aria-label="Close">✕</a>' +
'<a id="bbox-vmode" class="btn" tt="a"></a>' + '<a id="bbox-vmode" class="btn" tt="a"></a>' +
'<a id="bbzoom" class="tgl btn" tt="zoom/stretch smaller images to fill screen">↕</a>' +
'<a id="bbox-full" class="btn" tt="full-screen">⛶</a>' + '<a id="bbox-full" class="btn" tt="full-screen">⛶</a>' +
'<a id="bbzoom" class="tgl btn" tt="zoom/stretch smaller images to fill screen">↕</a>' +
'<a id="bbpixelated" class="tgl btn" tt="pixelated rendering (good for pixel art)">👾</a>' +
'<a id="bbox-tsel" class="tgl btn">☑️sel</a>' + '<a id="bbox-tsel" class="tgl btn">☑️sel</a>' +
'<a id="bbox-rotr" class="btn">↷</a>' + '<a id="bbox-rotr" class="btn">↷</a>' +
'<a id="bbox-rotl" class="btn">↶</a>' + '<a id="bbox-rotl" class="btn">↶</a>' +
@ -335,10 +336,12 @@ window.baguetteBox = (function () {
btnSel = ebi('bbox-tsel'); btnSel = ebi('bbox-tsel');
btnFull = ebi('bbox-full'); btnFull = ebi('bbox-full');
btnZoom = ebi('bbzoom'); btnZoom = ebi('bbzoom');
btnPixelated = ebi('bbpixelated');
btnVmode = ebi('bbox-vmode'); btnVmode = ebi('bbox-vmode');
btnClose = ebi('bbox-close'); btnClose = ebi('bbox-close');
bcfg_bind(options, 'bbzoom', 'bbzoom', false, setzoom); bcfg_bind(options, 'bbzoom', 'bbzoom', false, setzoom);
bcfg_bind(options, 'bbpixelated', 'bbpixelated', false, setpixelated);
setzoom(); setzoom();
} }
@ -356,6 +359,7 @@ window.baguetteBox = (function () {
['R', 'rotate (shift=ccw)'], ['R', 'rotate (shift=ccw)'],
['F', 'toggle fullscreen'], ['F', 'toggle fullscreen'],
['Z', 'toggle zoom/stretch'], ['Z', 'toggle zoom/stretch'],
['X', 'toggle pixelated rendering'],
['S', 'toggle file selection'], ['S', 'toggle file selection'],
['space, P, K', 'video: play / pause'], ['space, P, K', 'video: play / pause'],
['U', 'video: seek 10sec back'], ['U', 'video: seek 10sec back'],
@ -440,6 +444,8 @@ window.baguetteBox = (function () {
tglfull(); tglfull();
else if (kl == "z") else if (kl == "z")
btnZoom.click(); btnZoom.click();
else if (kl == "x")
btnPixelated.click();
else if (kl == "s") else if (kl == "s")
tglsel(); tglsel();
else if (kl == "r") else if (kl == "r")
@ -553,6 +559,12 @@ window.baguetteBox = (function () {
btnState(btnZoom, sel); btnState(btnZoom, sel);
} }
function setpixelated() {
var sel = clgot(btnPixelated, 'on')
clmod(ebi('bbox-overlay'), 'pixelated', sel);
btnState(btnPixelated, sel);
}
function tglsel() { function tglsel() {
var o = findfile()[3]; var o = findfile()[3];
clmod(o.closest('tr'), 'sel', 't'); clmod(o.closest('tr'), 'sel', 't');

17
copyparty/web/browser.css
View file

@ -2521,6 +2521,17 @@ html.noscroll .sbar::-webkit-scrollbar {
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
#bbox-overlay:has(video) {
#bbox-next,
#bbox-prev {
height: 0;
}
}
#bbox-overlay.pixelated .full-image img,
#bbox-overlay.pixelated .full-image video {
-ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated;
}
html.bb_fsc .full-image img, html.bb_fsc .full-image img,
html.bb_fsc .full-image video { html.bb_fsc .full-image video {
max-height: 100%; max-height: 100%;
@ -2539,6 +2550,12 @@ html.bb_fsc figcaption {
.full-image video { .full-image video {
background: #222; background: #222;
} }
#bbox-overlay figcaption {
pointer-events: none;
}
#bbox-overlay figcaption * {
pointer-events: all;
}
.full-image figcaption { .full-image figcaption {
display: block; display: block;
position: fixed; position: fixed;