Merge pull request #395 from ReadAlongs/dev.ej/streamline-bundle

joanise · web-flow · commit 68abb9bd536d · 2025-04-10T13:16:21.000-04:00
Streamline the bundles in the Offline HTML file: don't b64 encode what doesn't need to be, and clean up the formatting of the whole HTML file.
diff --git a/packages/studio-web/src/app/b64.service.ts b/packages/studio-web/src/app/b64.service.ts
@@ -23,16 +23,18 @@ export class B64Service {
     private fileService: FileService,
   ) {
     this.getBundle$().subscribe((bundle) => {
-      this.jsAndFontsBundle$.next(bundle);
+      this.jsAndFontsBundle$.next([
+        this.indent(bundle[0], 6), //apply the indentation to the js bundle
+        this.indent(bundle[1], 6),
+      ]);
     });
   }
   getBundle$(): Observable<[string, string]> {
     return forkJoin([
       this.http
         .get(this.JS_BUNDLE_URL, { responseType: "blob" })
-        .pipe(
-          switchMap((blob: Blob) => this.fileService.readFileAsData$(blob)),
-        ),
+        .pipe(switchMap((blob: Blob) => this.fileService.readFile$(blob))),
+
       this.http
         .get(this.FONTS_BUNDLE_URL, { responseType: "blob" })
         .pipe(switchMap((blob: Blob) => this.fileService.readFile$(blob))),
@@ -69,4 +71,13 @@ export class B64Service {
       reader.readAsDataURL(blob);
     });
   }
+
+  indent(str: string, level: number) {
+    const indent = " ".repeat(level);
+
+    return str
+      .split("\n")
+      .map((line) => (line.trim() ? indent + line : line))
+      .join("\n");
+  }
 }
diff --git a/packages/studio-web/src/app/shared/download/download.service.ts b/packages/studio-web/src/app/shared/download/download.service.ts
@@ -219,13 +219,22 @@ Please host all assets on your server, include the font and package imports defi
                 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
                 <meta name="generator" content="@readalongs/studio-web ${environment.packageJson.singleFileBundleVersion}">
                 <title>${slots.title}</title>
-                <style>${this.b64Service.jsAndFontsBundle$.value[1]}</style>
-                <script src="${this.b64Service.jsAndFontsBundle$.value[0]}" version="${environment.packageJson.singleFileBundleVersion}" timestamp="${environment.packageJson.singleFileBundleTimestamp}"></script>
+                <style>
+            ${this.b64Service.jsAndFontsBundle$.value[1]}
+                </style>
+                <script name="@readalongs/web-component" version="${environment.packageJson.singleFileBundleVersion}" timestamp="${environment.packageJson.singleFileBundleTimestamp}">
+            ${this.b64Service.jsAndFontsBundle$.value[0]}
+                </script>
               </head>
               <body>
-                <read-along version="${environment.packageJson.singleFileBundleVersion}"  href="data:application/readalong+xml;base64,${rasB64}" audio="${b64Audio}" image-assets-folder="">
-                <span slot="read-along-header">${slots.title}</span>
-                <span slot="read-along-subheader">${slots.subtitle}</span>
+                <read-along
+                  version="${environment.packageJson.singleFileBundleVersion}"
+                  href="data:application/readalong+xml;base64,${rasB64}"
+                  audio="${b64Audio}"
+                  image-assets-folder=""
+                >
+                  <span slot="read-along-header">${slots.title}</span>
+                  <span slot="read-along-subheader">${slots.subtitle}</span>
                 </read-along>
               </body>
             </html>
@@ -351,8 +360,14 @@ Please host all assets on your server, include the font and package imports defi
           </head>
 
           <body>
-            <!-- Here is how you declare the Web Component. Supported languages: en, fr -->
-            <read-along href="assets/${basename}.readalong" audio="assets/${basename}.${audioExtension}" theme="light" language="en" image-assets-folder="assets/">
+            <!-- Here is how you declare the Web Component. Supported languages: eng, fra, spa -->
+            <read-along
+              href="assets/${basename}.readalong"
+              audio="assets/${basename}.${audioExtension}"
+              theme="light"
+              language="eng"
+              image-assets-folder="assets/"
+            >
               <span slot='read-along-header'>${slots.title}</span>
               <span slot='read-along-subheader'>${slots.subtitle}</span>
             </read-along>
