diff options
author | (quasar) nebula <qznebula@protonmail.com> | 2024-05-15 18:13:06 -0300 |
---|---|---|
committer | (quasar) nebula <qznebula@protonmail.com> | 2024-05-15 18:15:52 -0300 |
commit | b662bcbf7014e267ada31f5177cd9b9cdb9c3d2f (patch) | |
tree | 89c7c26378ed84abf893743fa16a1807e6b6a85e /src/static | |
parent | 25bc1e3391819f55fdd51a3313bea874b2db1e65 (diff) |
client: make image overlay use fetchWithProgress
Diffstat (limited to 'src/static')
-rw-r--r-- | src/static/client4.js | 46 |
1 files changed, 33 insertions, 13 deletions
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'); } } |