From 8b98cacfd30ac044eee5890125289d345533c130 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Thu, 21 May 2020 04:29:44 +0300 Subject: [PATCH] reworked image load error handling... still not done... Signed-off-by: Alex A. Naanou --- ui (gen4)/features/filesystem.js | 6 ++++- ui (gen4)/imagegrid/ribbons.js | 45 +++++++++++++++++++++++++------- 2 files changed, 40 insertions(+), 11 deletions(-) diff --git a/ui (gen4)/features/filesystem.js b/ui (gen4)/features/filesystem.js index d407dedd..0bde2062 100755 --- a/ui (gen4)/features/filesystem.js +++ b/ui (gen4)/features/filesystem.js @@ -771,7 +771,11 @@ var FileSystemLoaderActions = actions.Actions({ // ...do not touch the fs // XXX this does not give the logger to render... can't seem to make this // not block the browser render... - // XXX set changes... + // XXX trigger this on .ribbons.imageLoadErrorCallback ... + // this.ribbos.imageLoadErrorCallback = function(){ + // // XXX prevent calling too often... + // // XXX + // that.checkIndex() } checkIndex: ['File/Check index consistency', core.doc`Check index consistency... diff --git a/ui (gen4)/imagegrid/ribbons.js b/ui (gen4)/imagegrid/ribbons.js index 0d2d86e2..57ce21a8 100755 --- a/ui (gen4)/imagegrid/ribbons.js +++ b/ui (gen4)/imagegrid/ribbons.js @@ -1461,8 +1461,7 @@ var RibbonsPrototype = { return image }, - _loadImagePreviewURL: function(image, url){ - var recovery_tried + _loadImagePreviewURL: function(image, url, other, callback){ url = util.path2url(url) // pre-cache and load image... // NOTE: this will make images load without a blackout... @@ -1473,12 +1472,18 @@ var RibbonsPrototype = { // NOTE: these do not account for rotation... i.setAttribute('preview-width', img.width) i.setAttribute('preview-height', img.height) } - // error -> load placeholder... + // error -> try other images -> load placeholder... img.onerror = function(){ - !recovery_tried - && (img.src = images.MISSING) - // give up after retry try... - recovery_tried = true } + other = other instanceof Function ? + [...other(), images.MISSING] + : other + other + && other.length > 0 + && (img.src = other.shift()) + // call the callback once... + callback + && callback() + callback = null } img.src = url return img }, @@ -1513,6 +1518,9 @@ var RibbonsPrototype = { // // If this is set to true image previews will be loaded synchronously... load_img_sync: false, + // handle image load errors... + // XXX revise... + imageLoadErrorCallback: undefined, // // XXX this depends on .images... // ...a good candidate to move to images, but not yet sure... @@ -1540,6 +1548,10 @@ var RibbonsPrototype = { options = options || {} var pre_updaters_callback = options.pre_updaters_callback + var error_update_callback = options.error_update_callback + || this.imageLoadErrorCallback + error_update_callback = error_update_callback + && error_update_callback.bind(this) // reduce the length of input image set... // NOTE: this will make things substantially faster for very large @@ -1628,6 +1640,12 @@ var RibbonsPrototype = { // stage background image update... // XXX add support for basic templating here... var p_url = (that.images.getBestPreview(img_data.id, size, img_data, true) || {}).url + // XXX sort the previews by size... + var alt_url = function(){ + return [...Object.values(img_data.preview || {}), img_data.path] + .map(function(u){ + return (img_data.base_path || '') + u }) + .filter(function(u){ return u != p_url }) } // no preview -> reset bg... if(p_url == null){ image[0].style.backgroundImage = '' @@ -1642,7 +1660,11 @@ var RibbonsPrototype = { // sync... if(sync){ - that._loadImagePreviewURL(image, p_url) + that._loadImagePreviewURL( + image, + p_url, + alt_url, + error_update_callback) // async... // NOTE: storing the url in .data() makes the image load the @@ -1656,8 +1678,11 @@ var RibbonsPrototype = { } else { image.data().loading = p_url setTimeout(function(){ - that._loadImagePreviewURL(image, image.data().loading) - }, 0) + that._loadImagePreviewURL( + image, + image.data().loading, + alt_url, + error_update_callback) }, 0) } } })