feat: Multi WACZ json Front End Support (#214)

Better display for Multi WACZ collections, including showing:
- File size of combined WACZ
- List of all WACZ files (with downloadable links)
- Use collection title instead of filename for all names (collection index, breadcrumb, sidebar)
- Display collection description (if available) on sidebar + info page

src/appmain.js

@@ -619,7 +619,8 @@ class ReplayWebApp extends LitElement {
   onCollLoaded(event) {
     this.loadInfo = null;
     if (event.detail.collInfo) {
-      this.collTitle = event.detail.collInfo.title;
+      this.collTitle =
+        event.detail.collInfo.name || event.detail.collInfo.title;
     }
 
     if (event.detail.alreadyLoaded) {

src/coll-index.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { wrapCss, apiPrefix } from "./misc";
+import { map } from "lit/directives/map.js";
 
 import prettyBytes from "pretty-bytes";
 
@@ -461,7 +462,7 @@ class CollInfo extends LitElement {
       </div>
       <div class="column is-2">
         <p class="minihead">Total Size</p>
-        ${prettyBytes(Number(coll.size || 0))}
+        ${prettyBytes(Number(coll.totalSize || coll.size || 0))}
       </div>
     `;
   }
@@ -473,7 +474,7 @@ class CollInfo extends LitElement {
       <div class="column col-title is-4">
         <span class="subtitle has-text-weight-bold">
           <a href="?source=${encodeURIComponent(coll.sourceUrl)}"
-            >${coll.title || coll.filename}</a
+            >${coll.name || coll.title || coll.filename}</a
           >
         </span>
       </div>
@@ -503,7 +504,7 @@ class CollInfo extends LitElement {
     return html` <div class="columns">
       <div class="column col-title is-4">
         <span class="subtitle has-text-weight-bold">
-          ${coll.title || coll.filename}
+          ${coll.name || coll.title || coll.filename}
         </span>
       </div>
       ${coll.desc
@@ -512,10 +513,30 @@ class CollInfo extends LitElement {
             ${coll.desc}
           </div>`
         : html``}
-      <div class="column">
+      ${coll.description
+        ? html`<div class="column">
+            <p class="minihead">Description</p>
+            ${coll.description}
+          </div>`
+        : html``}
+      <!--  Only show filename if coll.resources doesn't exist -->
+      ${coll.resources
+        ? html`<div class="column">
+            <p class="minihead">Files</p>
+            <ol style="padding: revert">
+              ${map(
+                coll.resources,
+                (resource) =>
+                  html`<li>
+                    <a href="${resource.path}">${resource.name + "\n"}</a>
+                  </li>`,
+              )}
+            </ol>
+          </div>`
+        : html`<div class="column">
             <p class="minihead">Filename</p>
             ${coll.filename}
-      </div>
+          </div>`}
       ${this.renderSource(coll)}
       ${domain
         ? html`

src/pages.js

@@ -471,9 +471,15 @@ class Pages extends LitElement {
         display: flex;
         flex-direction: column;
       }
+
       .flex-auto {
         flex: auto;
       }
+
+      .index-bar-description {
+        margin-bottom: 20px;
+        font-style: italic;
+      }
     `);
   }
 
@@ -582,8 +588,16 @@ class Pages extends LitElement {
                   class="index-bar-title"
                   @dblclick="${() => (this.editing = true)}"
                 >
-                ${this.collInfo.title}
-              </div>`}
+                  ${this.collInfo.name || this.collInfo.title}
+                </div>
+                ${this.collInfo.description
+                  ? html`<div
+                      class="index-bar-description"
+                      @dblclick="${() => (this.editing = true)}"
+                    >
+                      ${this.collInfo.description}
+                    </div>`
+                  : html``}`}
           ${this.editable
             ? html`<fa-icon class="editIcon" .svg="${fasEdit}"></fa-icon>`
             : html``}
@@ -607,7 +621,6 @@ class Pages extends LitElement {
             aria-atomic="true"
             >${this.formatResults()}</span
           >
-
           ${this.editable
             ? html` <div class="index-bar-actions">
                 ${this.renderDownloadMenu()}