Update src/components/loader/tw-progress-monitor.js

src/components/loader/tw-progress-monitor.js

@@ -1,25 +1,32 @@
-
-// グローバルな進行状況管理変数
 let total = 0;
 let complete = 0;
+
+// 0 - none
+// 1 - load json
+// 2 - load assets
 let state = 0;
+
 let currentProgress = 0;
+
 let progressHandler = (state, progress, complete, total) => {};
 
-// 進行状況ハンドラを設定する関数
 export const setProgressHandler = newHandler => {
     progressHandler = newHandler;
     progressHandler(state, currentProgress, complete, total);
 };
 
-// 進行状況更新をキューに入れる関数
+let progressHandlerTimeout = null;
+const fireProgressHandler = () => {
+    progressHandler(state, currentProgress, complete, total);
+    progressHandlerTimeout = null;
+};
+
 const queueProgressHandlerUpdate = () => {
     if (progressHandlerTimeout === null) {
         progressHandlerTimeout = requestAnimationFrame(fireProgressHandler);
     }
 };
 
-// 進行状況を更新する関数
 const setProgress = progress => {
     if (progress < 0) {
         progress = 0;
@@ -31,7 +38,6 @@ const setProgress = progress => {
     queueProgressHandlerUpdate();
 };
 
-// ステータスを設定する関数
 const setState = newState => {
     if (state === newState) {
         return;
@@ -42,16 +48,16 @@ const setState = newState => {
     setProgress(0);
 };
 
-// 進行状況を管理する関数
-const fetchWithProgress = url => {
+export const fetchWithProgress = url => {
+    // プロキシURLを指定
+    const proxyUrl = `https://public-soiz1-cors-proxy.hf.space/?url=` + encodeURIComponent(url); // ここで公開されているプロキシを使用
+    // const proxyUrl = `https://cors-anywhere.herokuapp.com/` + encodeURIComponent(url); // こちらを使いたい場合
+    // const proxyUrl = `https://cors-proxy.htmldriven.com/?url=` + encodeURIComponent(url); // 別のプロキシURL
+    // const proxyUrl = `https://api.allorigins.win/raw?url=` + encodeURIComponent(url); // 別のプロキシURL
+
     setState(1);
-    
-    // 使用するCORSプロキシURL
-    const proxyUrl = `https://public-soiz1-cors-proxy.hf.space/?url=` + encodeURIComponent(url);  // ここで公開されているプロキシを使用
-    //const proxyUrl = `https://cors-anywhere.herokuapp.com/` + encodeURIComponent(url);
-    // const proxyUrl = `https://cors-proxy.htmldriven.com/?url=` + encodeURIComponent(url); // 別のプロキシURLを使いたい場合はこちらを使用
-    // const proxyUrl = `https://api.allorigins.win/raw?url=` + encodeURIComponent(url); // 別のプロキシURLを使いたい場合はこちらを使用    
     return new Promise((resolve, reject) => {
+        // XMLHttpRequestの進行状況処理
         const xhr = new XMLHttpRequest();
         xhr.responseType = 'blob';
         xhr.onload = () => {
@@ -61,13 +67,13 @@ const fetchWithProgress = url => {
             }));
         };
         xhr.onloadend = () => setProgress(1);
-        xhr.onerror = () => reject(new Error('[tw-progress-monitor] xhr failed with status ' + xhr.status));
+        xhr.onerror = () => reject(new Error('[tw-progress-monitor] xhr failed with status' + xhr.status));
         xhr.onprogress = e => {
             if (e.lengthComputable) {
                 setProgress(e.loaded / e.total);
             }
         };
-        xhr.open('GET', proxyUrl);
+        xhr.open('GET', proxyUrl);  // ここでプロキシURLを使用
         xhr.send();
     });
 };
@@ -83,7 +89,6 @@ window.fetch = (url, opts) => {
     return originalFetch(url, opts);
 };
 
-
 // Web Workerのメッセージ処理
 const handleWorkerMessage = e => {
     const data = e.data;