mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-08-18 17:32:20 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

gallery: option to autoplay next video on end

Browse source
This commit is contained in:
ed 2021-07-15 00:04:33 +02:00
parent a91b80a311
commit 0f5026cd20
3 changed files with 146 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
copyparty/web/baguettebox.js
View file

@ -13,7 +13,7 @@ window.baguetteBox = (function () {
captions: true, captions: true,
buttons: 'auto', buttons: 'auto',
noScrollbars: false, noScrollbars: false,
bodyClass: 'baguetteBox-open', bodyClass: 'bbox-open',
titleTag: false, titleTag: false,
async: false, async: false,
preload: 2, preload: 2,
@ -22,7 +22,7 @@ window.baguetteBox = (function () {
afterHide: null, afterHide: null,
onChange: null, onChange: null,
}, },
overlay, slider, previousButton, nextButton, closeButton, overlay, slider, previousButton, nextButton, vmodeButton, closeButton,
currentGallery = [], currentGallery = [],
currentIndex = 0, currentIndex = 0,
isOverlayVisible = false, isOverlayVisible = false,
@ -36,6 +36,7 @@ window.baguetteBox = (function () {
isFullscreen = false, isFullscreen = false,
vmute = false, vmute = false,
vloop = false, vloop = false,
vnext = false,
resume_mp = false; resume_mp = false;
var onFSC = function (e) { var onFSC = function (e) {
@ -171,46 +172,28 @@ window.baguetteBox = (function () {
} }
function buildOverlay() { 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'); previousButton = ebi('bbox-prev');
overlay.id = 'baguetteBox-overlay'; nextButton = ebi('bbox-next');
document.getElementsByTagName('body')[0].appendChild(overlay); vmodeButton = ebi('bbox-vmode');
closeButton = 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(); bindEvents();
} }
@ -239,9 +222,14 @@ window.baguetteBox = (function () {
mp_ctl(); mp_ctl();
} }
else if (k == "KeyR" && v) { else if (k == "KeyR" && v) {
v.loop = vloop = !vloop; vloop = !vloop;
if (vloop && v.paused) vnext = vnext && !vloop;
v.play(); setVmode();
}
else if (k == "KeyC" && v) {
vnext = !vnext;
vloop = vloop && !vnext;
setVmode();
} }
else if (k == "KeyF") else if (k == "KeyF")
try { try {
@ -253,6 +241,49 @@ window.baguetteBox = (function () {
catch (ex) { } 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'
}
vmodeButton.setAttribute('aria-label', msg);
vmodeButton.setAttribute('tt', msg);
vmodeButton.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) { function keyUpHandler(e) {
if (e.ctrlKey || e.altKey || e.metaKey || e.isComposing) if (e.ctrlKey || e.altKey || e.metaKey || e.isComposing)
return; return;
@ -285,6 +316,7 @@ window.baguetteBox = (function () {
bind(previousButton, 'click', showPreviousImage); bind(previousButton, 'click', showPreviousImage);
bind(nextButton, 'click', showNextImage); bind(nextButton, 'click', showNextImage);
bind(closeButton, 'click', hideOverlay); bind(closeButton, 'click', hideOverlay);
bind(vmodeButton, 'click', tglVmode);
bind(slider, 'contextmenu', contextmenuHandler); bind(slider, 'contextmenu', contextmenuHandler);
bind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent); bind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent);
bind(overlay, 'touchmove', touchmoveHandler, passiveEvent); bind(overlay, 'touchmove', touchmoveHandler, passiveEvent);
@ -297,6 +329,7 @@ window.baguetteBox = (function () {
unbind(previousButton, 'click', showPreviousImage); unbind(previousButton, 'click', showPreviousImage);
unbind(nextButton, 'click', showNextImage); unbind(nextButton, 'click', showNextImage);
unbind(closeButton, 'click', hideOverlay); unbind(closeButton, 'click', hideOverlay);
unbind(vmodeButton, 'click', tglVmode);
unbind(slider, 'contextmenu', contextmenuHandler); unbind(slider, 'contextmenu', contextmenuHandler);
unbind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent); unbind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent);
unbind(overlay, 'touchmove', touchmoveHandler, passiveEvent); unbind(overlay, 'touchmove', touchmoveHandler, passiveEvent);
@ -321,8 +354,8 @@ window.baguetteBox = (function () {
fullImage.id = 'baguette-img-' + i; fullImage.id = 'baguette-img-' + i;
imagesElements.push(fullImage); 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]); slider.appendChild(imagesElements[i]);
} }
overlay.setAttribute('aria-labelledby', imagesFiguresIds.join(' ')); overlay.setAttribute('aria-labelledby', imagesFiguresIds.join(' '));
@ -445,15 +478,15 @@ window.baguetteBox = (function () {
imageElement.getAttribute('data-caption') || imageElement.title; imageElement.getAttribute('data-caption') || imageElement.title;
var figure = mknod('figure'); 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>'; '</div>';
if (options.captions && imageCaption) { if (options.captions && imageCaption) {
var figcaption = mknod('figcaption'); var figcaption = mknod('figcaption');
figcaption.id = 'baguetteBox-figcaption-' + index; figcaption.id = 'bbox-figcaption-' + index;
figcaption.innerHTML = imageCaption; figcaption.innerHTML = imageCaption;
figure.appendChild(figcaption); figure.appendChild(figcaption);
} }
@ -466,13 +499,16 @@ window.baguetteBox = (function () {
image.addEventListener(is_vid ? 'loadedmetadata' : 'load', function () { image.addEventListener(is_vid ? 'loadedmetadata' : 'load', function () {
// Remove loader element // Remove loader element
var spinner = document.querySelector('#baguette-img-' + index + ' .baguetteBox-spinner'); var spinner = document.querySelector('#baguette-img-' + index + ' .bbox-spinner');
figure.removeChild(spinner); figure.removeChild(spinner);
if (!options.async && callback) if (!options.async && callback)
callback(); callback();
}); });
image.setAttribute('src', imageSrc); image.setAttribute('src', imageSrc);
image.setAttribute('controls', 'controls'); if (is_vid) {
image.setAttribute('controls', 'controls');
image.onended = vidEnd;
}
image.alt = thumbnailElement ? thumbnailElement.alt || '' : ''; image.alt = thumbnailElement ? thumbnailElement.alt || '' : '';
if (options.titleTag && imageCaption) { if (options.titleTag && imageCaption) {
image.title = imageCaption; image.title = imageCaption;
@ -568,6 +604,11 @@ window.baguetteBox = (function () {
vid().currentTime += sec; vid().currentTime += sec;
} }
function vidEnd() {
if (this == vid() && vnext)
showNextImage();
}
function mp_ctl() { function mp_ctl() {
var v = vid(); var v = vid();
if (!vmute && v && mp.au && !mp.au.paused) { if (!vmute && v && mp.au && !mp.au.paused) {
@ -610,6 +651,7 @@ window.baguetteBox = (function () {
v.loop = vloop; v.loop = vloop;
} }
mp_ctl(); mp_ctl();
setVmode();
} }
function preloadNext(index) { function preloadNext(index) {
@ -643,7 +685,7 @@ window.baguetteBox = (function () {
clearCachedData(); clearCachedData();
unbind(document, 'keydown', keyDownHandler); unbind(document, 'keydown', keyDownHandler);
unbind(document, 'keyup', keyUpHandler); unbind(document, 'keyup', keyUpHandler);
document.getElementsByTagName('body')[0].removeChild(ebi('baguetteBox-overlay')); document.getElementsByTagName('body')[0].removeChild(ebi('bbox-overlay'));
data = {}; data = {};
currentGallery = []; currentGallery = [];
currentIndex = 0; currentIndex = 0;

87
copyparty/web/browser.css
View file

@ -1145,7 +1145,7 @@ html.light #tree::-webkit-scrollbar {
#baguetteBox-overlay { #bbox-overlay {
display: none; display: none;
opacity: 0; opacity: 0;
position: fixed; position: fixed;
@ -1155,27 +1155,27 @@ html.light #tree::-webkit-scrollbar {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1000000; z-index: 10;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
transition: opacity .3s ease; transition: opacity .3s ease;
} }
#baguetteBox-overlay.visible { #bbox-overlay.visible {
opacity: 1; opacity: 1;
} }
#baguetteBox-overlay .full-image { .full-image {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
} }
#baguetteBox-overlay .full-image figure { .full-image figure {
display: inline; display: inline;
margin: 0; margin: 0;
height: 100%; height: 100%;
} }
#baguetteBox-overlay .full-image img, .full-image img,
#baguetteBox-overlay .full-image video { .full-image video {
display: inline-block; display: inline-block;
width: auto; width: auto;
height: auto; height: auto;
@ -1186,10 +1186,10 @@ html.light #tree::-webkit-scrollbar {
vertical-align: middle; vertical-align: middle;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
} }
#baguetteBox-overlay .full-image video { .full-image video {
background: #333; background: #333;
} }
#baguetteBox-overlay .full-image figcaption { .full-image figcaption {
display: block; display: block;
position: fixed; position: fixed;
bottom: .1em; bottom: .1em;
@ -1198,20 +1198,20 @@ html.light #tree::-webkit-scrollbar {
white-space: normal; white-space: normal;
color: #ccc; color: #ccc;
} }
#baguetteBox-overlay figcaption a { #bbox-overlay figcaption a {
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
border-radius: .4em; border-radius: .4em;
padding: .3em .6em; padding: .3em .6em;
} }
#baguetteBox-overlay .full-image:before { .full-image:before {
content: ""; content: "";
display: inline-block; display: inline-block;
height: 50%; height: 50%;
width: 1px; width: 1px;
margin-right: -1px; margin-right: -1px;
} }
#baguetteBox-slider { #bbox-slider {
position: absolute; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
height: 100%; height: 100%;
@ -1219,10 +1219,10 @@ html.light #tree::-webkit-scrollbar {
white-space: nowrap; white-space: nowrap;
transition: left .2s ease, transform .2s ease; transition: left .2s ease, transform .2s ease;
} }
#baguetteBox-slider.bounce-from-right { .bounce-from-right {
animation: bounceFromRight .4s ease-out; animation: bounceFromRight .4s ease-out;
} }
#baguetteBox-slider.bounce-from-left { .bounce-from-left {
animation: bounceFromLeft .4s ease-out; animation: bounceFromLeft .4s ease-out;
} }
@keyframes bounceFromRight { @keyframes bounceFromRight {
@ -1235,48 +1235,51 @@ html.light #tree::-webkit-scrollbar {
50% {margin-left: 30px} 50% {margin-left: 30px}
100% {margin-left: 0} 100% {margin-left: 0}
} }
.baguetteBox-button#next-button, #bbox-next,
.baguetteBox-button#previous-button { #bbox-prev {
top: 50%; top: 50%;
top: calc(50% - 30px); top: calc(50% - 30px);
width: 44px; width: 44px;
height: 60px; height: 60px;
} }
.baguetteBox-button { .bbox-btn {
position: absolute; position: fixed;
}
.bbox-btn,
#bbox-btns>button {
cursor: pointer; cursor: pointer;
outline: none; outline: none;
padding: 0; padding: 0 .3em;
margin: 0; margin: 0 .4em;
border: 0; border: 0;
border-radius: 15%; border-radius: 15%;
background: rgba(50, 50, 50, 0.5); background: rgba(50, 50, 50, 0.5);
color: #ddd; color: #ddd;
font: 1.6em sans-serif; font: 1.6em sans-serif;
transition: background-color .3s ease; 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); 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%; 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; width: 40px;
height: 40px; height: 40px;
display: inline-block; display: inline-block;
@ -1286,8 +1289,8 @@ html.light #tree::-webkit-scrollbar {
margin-top: -20px; margin-top: -20px;
margin-left: -20px; margin-left: -20px;
} }
.baguetteBox-double-bounce1, .bbox-double-bounce1,
.baguetteBox-double-bounce2 { .bbox-double-bounce2 {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
@ -1298,7 +1301,7 @@ html.light #tree::-webkit-scrollbar {
left: 0; left: 0;
animation: bounce 2s infinite ease-in-out; animation: bounce 2s infinite ease-in-out;
} }
.baguetteBox-double-bounce2 { .bbox-double-bounce2 {
animation-delay: -1s; animation-delay: -1s;
} }
@keyframes bounce { @keyframes bounce {

10
copyparty/web/util.js
View file

@ -503,7 +503,7 @@ var tt = (function () {
r.tt.setAttribute('id', 'tt'); r.tt.setAttribute('id', 'tt');
document.body.appendChild(r.tt); document.body.appendChild(r.tt);
function show() { r.show = function () {
var cfg = sread('tooltips'); var cfg = sread('tooltips');
if (cfg !== null && cfg != '1') if (cfg !== null && cfg != '1')
return; return;
@ -527,7 +527,7 @@ var tt = (function () {
clmod(r.tt, 'show', 1); clmod(r.tt, 'show', 1);
} }
function hide() { r.hide = function () {
clmod(r.tt, 'show'); clmod(r.tt, 'show');
} }
@ -543,8 +543,8 @@ var tt = (function () {
r.en = bcfg_get('tooltips', true) 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]'); var o = QSA('*[tt]');
for (var a = o.length - 1; a >= 0; a--) { for (var a = o.length - 1; a >= 0; a--) {
@ -553,7 +553,7 @@ var tt = (function () {
o[a].onmouseenter = _show; o[a].onmouseenter = _show;
o[a].onmouseleave = _hide; o[a].onmouseleave = _hide;
} }
hide(); r.hide();
}; };
return r; return r;