Merge pull request #2 from kylebakerio/glitch

🚘🏈 set hooks to run when scene is already rendering, minor style fixes, better error handling for video loading in some cases (still haven't really nailed the video element loading handling)
kylebakerio · Oct 12, 2022 · c28524c · c28524c
2 parents 04ea2b0 + 51ddcc0
commit c28524c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/a-load-screen.js b/a-load-screen.js
@@ -72,7 +72,7 @@
     document.head.appendChild(style);
   }
 
-  function init(
+  async function init(
     options={}
   ) {
     // defaults overridden on declaration
@@ -184,7 +184,11 @@
     debug('log',scene, scene.renderStarted)
     if (scene.renderStarted) {
       debug('error','scene is already rendering, skipping load screen altogether');
-      debug('warn','all loading screen hooks are skipped');
+      debug('warn','will run all hooks sequentially right away');
+      await opts.onFilesLoaded();
+      await opts.onAframeLoaded();
+      await opts.onAframeRenderStart();
+      debug('warn','completed loading hooks')
       // note: they may be depending on the hooks running, we should probably default to executing those
       return;
     }
@@ -425,21 +429,26 @@
       let loadedPercentage;
       try {
         loadedPercentage = (evt.detail.loadedBytes / evt.detail.totalBytes) * 100;
+        globalLoadRegister.bytes[name][0] = evt.detail.loadedBytes;
+        globalLoadRegister.bytes[name][1] = evt.detail.totalBytes;
+        updateBytes(name, bytesToMegabytes(evt.detail.loadedBytes, true), bytesToMegabytes(evt.detail.totalBytes, true));
+        updateGlobalLoader();
+        if (firstByte) {
+          firstByte = false;
+          cacheFileSize(el, globalLoadRegister.bytes[name][1])
+        }
       } catch (e) {
         debug('warn','progress error, assuming this is a video and using experimental video load attempt',e)
-        loadedPercentage = (el.buffered.end(0) / el.duration) * 100;
+        try {
+          loadedPercentage = (el.buffered.end(0) / el.duration) * 100;
+        } catch (e) {
+          // todo: this still isn't really quite worked out yet...
+          console.error("problem using buffered.end(0)",e)
+          console.log(el.buffered?.end)
+        }
         debug('warn', loadedPercentage);
       }
-      bar.set(loadedPercentage, false);
-      globalLoadRegister.bytes[name][0] = evt.detail.loadedBytes;
-      globalLoadRegister.bytes[name][1] = evt.detail.totalBytes;
-      // todo: update to using common utility functions:
-      updateBytes(name, Math.round(evt.detail.loadedBytes / 10000) / 100, Math.round(evt.detail.totalBytes / 10000) / 100);
-      updateGlobalLoader();
-      if (firstByte) {
-        firstByte = false;
-        cacheFileSize(el, globalLoadRegister.bytes[name][1])
-      }
+      if (loadedPercentage) bar.set(loadedPercentage, false);
     });
     el.addEventListener("loaded", evt => {
       // emitted by a-asset-item
@@ -763,7 +772,8 @@
         fileBarEls.push(barEl);
       // }
       if (opts.showFilenames) {
-        fileBarEls.push( createEl('p',{style:`width:${filenameWidth};white-space:nowrap;text-overflow:elipses;`}, opts.useFilename ? getFilename(el) : el.id) );
+        // note: width:filenameWidth was broken before, so... now that it's fixed, make sure it doesn't break anything. also, text-overflow:ellipses was mispelled, make sure you like it now.
+        fileBarEls.push( createEl('p',{style:`width:${filenameWidth}px;white-space:nowrap;text-overflow:ellipses;`}, opts.useFilename ? getFilename(el) : el.id) );
       }
       if (fileBarEls.length) {
 

diff --git a/index.html b/index.html
@@ -72,7 +72,7 @@
 
 
     <!--   github octo-cat overlay   -->
-    <a href="https://github.com/kylebakerio/a-load-screen" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="z-index: 2; fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+    <a style="z-index:100000;" href="https://github.com/kylebakerio/a-load-screen" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="z-index: 100000; fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 
     <!--   REMIX BUTTON   -->
     <style>