From b662bcbf7014e267ada31f5177cd9b9cdb9c3d2f Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 15 May 2024 18:13:06 -0300 Subject: client: make image overlay use fetchWithProgress --- src/static/client4.js | 46 +++++++++++++++++++++++++++++++++------------- 1 file changed, 33 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/static/client4.js b/src/static/client4.js index 02144e16..41c79c3a 100644 --- a/src/static/client4.js +++ b/src/static/client4.js @@ -2653,7 +2653,7 @@ function addImageOverlayClickHandlers() { } } -function handleImageLinkClicked(evt) { +async function handleImageLinkClicked(evt) { if (evt.metaKey || evt.shiftKey || evt.altKey) { return; } @@ -2720,26 +2720,46 @@ function handleImageLinkClicked(evt) { mainImage.addEventListener('load', handleMainImageLoaded); mainImage.addEventListener('error', handleMainImageErrored); - container.style.setProperty('--download-progress', '0%'); - loadImage(mainSrc, progress => { - container.style.setProperty('--download-progress', (20 + 0.8 * progress) + '%'); - }).then( - blobUrl => { - mainImage.src = blobUrl; - container.style.setProperty('--download-progress', '100%'); - }, - handleMainImageErrored); + const showProgress = amount => { + cssProp(container, '--download-progress', `${amount * 100}%`); + }; + + showProgress(0.00); + + const response = + await fetchWithProgress(mainSrc, progress => { + if (progress === -1) { + // TODO: Indeterminate response progress cue + showProgress(0.00); + } else { + showProgress(0.20 + 0.80 * progress); + } + }); + + if (!response.status.toString().startsWith('2')) { + handleMainImageErrored(); + return; + } + + const blob = await response.blob(); + const blobSrc = URL.createObjectURL(blob); + + mainImage.src = blobSrc; + showProgress(1.00); function handleMainImageLoaded() { - mainImage.removeEventListener('load', handleMainImageLoaded); - mainImage.removeEventListener('error', handleMainImageErrored); container.classList.add('loaded'); + removeEventListeners(); } function handleMainImageErrored() { + container.classList.add('errored'); + removeEventListeners(); + } + + function removeEventListeners() { mainImage.removeEventListener('load', handleMainImageLoaded); mainImage.removeEventListener('error', handleMainImageErrored); - container.classList.add('errored'); } } -- cgit 1.3.0-6-gf8a5