Unified progress bar logic

src/packager/P4.svelte

@@ -3,7 +3,8 @@
   import Section from './Section.svelte';
   import SelectProject from './SelectProject.svelte';
   import PackagerOptions from './PackagerOptions.svelte';
-  import {error} from './stores';
+  import Progress from './Progress.svelte';
+  import {error, progress} from './stores';
   import {UserError} from './errors';
 
   let projectData;
@@ -139,6 +140,12 @@
     </div>
   {/if}
 
+  {#if $progress.visible}
+    <Section>
+      <Progress progress={$progress.progress} text={$progress.text} />
+    </Section>
+  {/if}
+
   <footer>
     <a href="https://scratch.mit.edu/users/GarboMuffin/#comments">Feedback & Bugs</a>
     -

src/packager/PackagerOptions.svelte

@@ -1,11 +1,10 @@
 <script>
   import {slide, fade} from 'svelte/transition';
   import Section from './Section.svelte';
-  import Progress from './Progress.svelte';
   import Button from './Button.svelte';
   import Packager from './packager';
   import writablePersistentStore from './persistent-store';
-  import {error} from './stores';
+  import {error, progress} from './stores';
   import Preview from './preview';
 
   export let projectData;
@@ -37,32 +36,29 @@
 
   let result = null;
   let url = null;
-  let progressVisible = false;
-  let progress = 0;
-  let progressText = '';
   let previewer = null;
   let iconFiles = null;
   $: $options.app.icon = iconFiles ? iconFiles[0] : null;
   $: if (previewer) {
-    previewer.setProgress(progress, progressText);
+    previewer.setProgress($progress.progress, $progress.text);
   }
 
   const handleLargeAssetFetchProgress = ({detail}) => {
     if (detail.asset.startsWith('nwjs-')) {
-      progressText = 'Loading NW.js';
+      $progress.text = 'Loading NW.js';
     } else if (detail.asset === 'scaffolding') {
-      progressText = 'Loading TurboWarp';
+      $progress.text = 'Loading TurboWarp';
     } else if (detail.asset === 'addons') {
-      progressText = 'Loading addons';
+      $progress.text = 'Loading addons';
     } else {
-      progressText = `Loading large asset ${detail.asset}`
+      $progress.text = `Loading large asset ${detail.asset}`
     }
-    progress = detail.progress;
+    $progress.progress = detail.progress;
   };
 
   const handleZipProgress = ({detail}) => {
-    progressText = 'Compressing project';
-    progress = detail.progress;
+    $progress.text = 'Compressing project';
+    $progress.progress = detail.progress;
   };
 
   const downloadURL = (filename, url) => {
@@ -76,9 +72,9 @@
 
   const runPackager = async (packager) => {
     try {
-      progressVisible = true;
-      progressText = 'Packaging project';
-      progress = 0;
+      $progress.visible = true;
+      $progress.text = 'Packaging project';
+
       if (url) {
         URL.revokeObjectURL(url);
       }
@@ -93,7 +89,7 @@
     } catch (e) {
       $error = e;
     }
-    progressVisible = false;
+    progress.reset();
   };
 
   const pack = async () => {
@@ -372,8 +368,8 @@
 {/if}
 
 <Section>
-  <Button on:click={pack} disabled={progressVisible}>Package</Button>
-  <Button on:click={preview} disabled={progressVisible} secondary>Preview</Button>
+  <Button on:click={pack} disabled={$progress.visible}>Package</Button>
+  <Button on:click={preview} disabled={$progress.visible} secondary>Preview</Button>
   <Button on:click={reset} danger>Reset</Button>
 </Section>
 
@@ -383,11 +379,7 @@
       <a href={url} download={result.filename}>Download {result.filename} ({(result.blob.size / 1024 / 1024).toFixed(2)}MiB)</a>
     </div>
   </Section>
-{:else if progressVisible}
-  <Section>
-    <Progress progress={progress} text={progressText} />
-  </Section>
-{:else}
+{:else if !$progress.visible}
   <Section caption>
     <p>Downloads will appear here</p>
   </Section>

src/packager/SelectProject.svelte

@@ -3,7 +3,7 @@
   import Progress from './Progress.svelte';
   import Button from './Button.svelte';
   import writablePersistentStore from './persistent-store';
-  import {error} from './stores';
+  import {error, progress} from './stores';
   import loadProject from './load-project';
   import xhr from './lib/xhr';
   import {UserError} from './errors';
@@ -18,18 +18,13 @@
     projectData = null;
   };
 
-  let progressVisible = false;
-  let progress = 0;
-  let progressText = '';
-
   // Reset project whenever an input changes
   $: files, $projectId, $type, reset();
 
   const load = async () => {
     try {
       reset();
-      progressVisible = true;
-      progress = 0;
+      $progress.visible = true;
 
       let data;
       let uniqueId = '';
@@ -44,7 +39,7 @@
         id = match[0];
         uniqueId = `#${id}`;
 
-        progressText = 'Loading project metadata';
+        $progress.text = 'Loading project metadata';
         try {
           const meta = await xhr({
             url: `https://trampoline.turbowarp.org/proxy/projects/${id}`,
@@ -57,12 +52,12 @@
           console.warn(e);
         }
 
-        progressText = 'Loading project data';
+        $progress.text = 'Loading project data';
         data = await xhr({
           url: `https://projects.scratch.mit.edu/${id}`,
           type: 'arraybuffer',
           progressCallback: (p) => {
-            progress = p;
+            $progress.progress = p;
           }
         });
       } else {
@@ -72,17 +67,17 @@
         const file = files[0];
         uniqueId = `@${file.name}`;
         projectTitle = file.name;
-        progressText = 'Reading project';
+        $progress.text = 'Reading project';
         data = await readAsArrayBuffer(file);
       }
 
-      progressText = 'Loading packager';
+      $progress.text = 'Loading packager';
       const vm = await loadProject(data, (loadedAssets, totalAssets) => {
-        progressText = `Loading assets (${loadedAssets}/${totalAssets})`;
-        progress = loadedAssets / totalAssets;
+        $progress.text = `Loading assets (${loadedAssets}/${totalAssets})`;
+        $progress.progress = loadedAssets / totalAssets;
       });
 
-      progressText = 'Compressing project';
+      $progress.text = 'Compressing project';
       const serialized = await vm.saveProjectSb3();
 
       projectData = {
@@ -96,7 +91,7 @@
       $error = e;
     }
 
-    progressVisible = false;
+    progress.reset();
   };
 </script>
 
@@ -127,15 +122,11 @@
   </div>
 
   <p>
-    <Button on:click={load} disabled={progressVisible}>Load Project</Button>
+    <Button on:click={load} disabled={$progress.visible}>Load Project</Button>
   </p>
 </Section>
 
-{#if progressVisible}
-  <Section>
-    <Progress progress={progress} text={progressText} />
-  </Section>
-{:else if !projectData}
+{#if !$progress.visible && !projectData}
   <Section caption>
     <p>Load a project to continue</p>
   </Section>

src/packager/stores.js

@@ -1,7 +1,20 @@
 import {writable} from 'svelte/store';
 
 const error = writable(null);
+const progress = writable({
+  progress: 0,
+  visible: false,
+  text: ''
+});
+progress.reset = () => {
+  progress.set({
+    progress: 0,
+    visible: false,
+    text: ''
+  });
+};
 
 export {
-  error
+  error,
+  progress
 };