From e5690754edf56cbbb538855448fdb1f507c077f9 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 15 May 2024 18:15:33 -0300 Subject: client: move fetchWithProgress into xhr-util importable file --- src/static/client4.js | 64 +------------------------------------------------- src/static/xhr-util.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 63 deletions(-) create mode 100644 src/static/xhr-util.js (limited to 'src') diff --git a/src/static/client4.js b/src/static/client4.js index b7b01011..729836b5 100644 --- a/src/static/client4.js +++ b/src/static/client4.js @@ -7,6 +7,7 @@ import {accumulateSum, empty, filterMultipleArrays, stitchArrays} from '../util/sugar.js'; +import {fetchWithProgress} from './xhr-util.js'; const clientInfo = window.hsmusicClientInfo = Object.create(null); @@ -2859,69 +2860,6 @@ function updateFileSizeInformation(fileSize) { addImageOverlayClickHandlers(); -/** - * This fetch function is adapted from a `loadImage` function - * credited to Parziphal, Feb 13, 2017. - * https://stackoverflow.com/a/42196770 - * - * The callback is generally run with the loading progress as a decimal 0-1. - * However, if it's not possible to compute the progress ration (which might - * only become apparent after a progress amount *has* been sent!), - * the callback will be run with the value -1. - * - * The return promise resolves to a manually instantiated Response object - * which generally behaves the same as a normal fetch response; access headers, - * text, blob, arrayBuffer as usual. Accordingly, non-200 responses do *not* - * reject the prmoise, so be sure to check the response status yourself. - */ -function fetchWithProgress(url, progressCallback) { - return new Promise(resolve => { - const xhr = new XMLHttpRequest(); - let notifiedNotComputable = false; - - xhr.open('GET', url, true); - xhr.responseType = 'arraybuffer'; - - xhr.onprogress = event => { - if (notifiedNotComputable) { - return; - } - - if (!event.lengthComputable) { - notifiedNotComputable = true; - progressCallback(-1); - return; - } - - progressCallback(event.loaded / event.total); - }; - - xhr.onloadend = () => { - const body = xhr.response; - - const options = { - status: xhr.status, - headers: - parseResponseHeaders(xhr.getAllResponseHeaders()), - }; - - resolve(new Response(body, options)); - }; - - xhr.send(); - }); - - function parseResponseHeaders(headers) { - return ( - Object.fromEntries( - headers - .trim() - .split(/[\r\n]+/) - .map(line => line.match(/(.+?):\s*(.+)/)) - .map(match => [match[1], match[2]]))); - } -} - // "Additional names" box --------------------------------- const additionalNamesBoxInfo = initInfo('additionalNamesBox', { diff --git a/src/static/xhr-util.js b/src/static/xhr-util.js new file mode 100644 index 00000000..bc0698da --- /dev/null +++ b/src/static/xhr-util.js @@ -0,0 +1,62 @@ +/** + * This fetch function is adapted from a `loadImage` function + * credited to Parziphal, Feb 13, 2017. + * https://stackoverflow.com/a/42196770 + * + * The callback is generally run with the loading progress as a decimal 0-1. + * However, if it's not possible to compute the progress ration (which might + * only become apparent after a progress amount *has* been sent!), + * the callback will be run with the value -1. + * + * The return promise resolves to a manually instantiated Response object + * which generally behaves the same as a normal fetch response; access headers, + * text, blob, arrayBuffer as usual. Accordingly, non-200 responses do *not* + * reject the prmoise, so be sure to check the response status yourself. + */ +export function fetchWithProgress(url, progressCallback) { + return new Promise(resolve => { + const xhr = new XMLHttpRequest(); + let notifiedNotComputable = false; + + xhr.open('GET', url, true); + xhr.responseType = 'arraybuffer'; + + xhr.onprogress = event => { + if (notifiedNotComputable) { + return; + } + + if (!event.lengthComputable) { + notifiedNotComputable = true; + progressCallback(-1); + return; + } + + progressCallback(event.loaded / event.total); + }; + + xhr.onloadend = () => { + const body = xhr.response; + + const options = { + status: xhr.status, + headers: + parseResponseHeaders(xhr.getAllResponseHeaders()), + }; + + resolve(new Response(body, options)); + }; + + xhr.send(); + }); + + function parseResponseHeaders(headers) { + return ( + Object.fromEntries( + headers + .trim() + .split(/[\r\n]+/) + .map(line => line.match(/(.+?):\s*(.+)/)) + .map(match => [match[1], match[2]]))); + } +} -- cgit 1.3.0-6-gf8a5