bbox: try to detect media load errors

listen for errors from <img> and <video> in the media gallery and
show an error-toast to indicate that the file isn't going to appear

unfortunately, when iOS-Safari fails to decode an unsupported video,
Safari itself appears to believe that everything is fine, and doesn't
issue the expected error-event, meaning we cannot detect this...

for example, trying to play non-yuv420p vp9 webm will silently fail,
with the only symptom being the play() promise throwing as the
<video> is destroyed during cleanup (bbox-close or media unload)
This commit is contained in:
ed 2025-01-31 21:13:35 +00:00
parent 20ddeb6e1b
commit 4ef3526354

View file

@ -633,6 +633,9 @@ window.baguetteBox = (function () {
catch (ex) { }
isFullscreen = false;
if (toast.tag == 'bb-ded')
toast.hide();
if (dtor || overlay.style.display === 'none')
return;
@ -668,6 +671,7 @@ window.baguetteBox = (function () {
if (v == keep)
continue;
unbind(v, 'error', lerr);
v.src = '';
v.load();
@ -695,6 +699,28 @@ window.baguetteBox = (function () {
}
}
function lerr() {
var t;
try {
t = this.getAttribute('src');
t = uricom_dec(t.split('/').pop().split('?')[0]);
}
catch (ex) { }
t = 'Failed to open ' + (t?t:'file');
console.log('bb-ded', t);
t += '\n\nEither the file is corrupt, or your browser does not understand the file format or codec';
try {
t += "\n\nerr#" + this.error.code + ", " + this.error.message;
}
catch (ex) { }
this.ded = esc(t);
if (this === vidimg())
toast.err(20, this.ded, 'bb-ded');
}
function loadImage(index, callback) {
var imageContainer = imagesElements[index];
var galleryItem = currentGallery[index];
@ -739,7 +765,8 @@ window.baguetteBox = (function () {
var image = mknod(is_vid ? 'video' : 'img');
clmod(imageContainer, 'vid', is_vid);
image.addEventListener(is_vid ? 'loadedmetadata' : 'load', function () {
bind(image, 'error', lerr);
bind(image, is_vid ? 'loadedmetadata' : 'load', function () {
// Remove loader element
qsr('#baguette-img-' + index + ' .bbox-spinner');
if (!options.async && callback)
@ -816,6 +843,12 @@ window.baguetteBox = (function () {
});
updateOffset();
var im = vidimg();
if (im && im.ded)
toast.err(20, im.ded, 'bb-ded');
else if (toast.tag == 'bb-ded')
toast.hide();
if (options.animation == 'none')
unvid(vid());
else