additional client-side replay fixes from feedback:

- pass swScope directly to loadWabac
- pass collection name to loadWabac
- support running with non-root prefix
- support new 'baseUrlAppendReplay' flag in wabac.js
- support '$root' collection, both in pywb and wabac.js same path

pywb/apps/rewriterapp.py

@@ -936,7 +936,7 @@ class RewriterApp(object):
                                                         self.frame_mod,
                                                         self.replay_mod,
                                                         self.client_side_replay,
-                                                        coll='',
+                                                        coll=kwargs.get("coll"),
                                                         extra_params=extra_params)
 
         return None

pywb/rewrite/templateview.py

@@ -427,7 +427,9 @@ class TopFrameView(BaseInsertView):
                   'is_proxy': is_proxy,
                   'client_side_replay': client_side_replay,
                   'timestamp': timestamp,
-                  'url': wb_url.get_url()
+                  'url': wb_url.get_url(),
+
+                  'sw_prefix': env.get('pywb.app_prefix', '') + "/"
                  }
 
         if extra_params:

pywb/static/loadWabac.js

@@ -1,18 +1,24 @@
 class WabacReplay
 {
-  constructor(prefix, url, ts, staticPrefix) {
+  constructor(prefix, url, ts, staticPrefix, coll, swScopePrefix) {
     this.prefix = prefix;
     this.url = url;
     this.ts = ts;
     this.staticPrefix = staticPrefix;
-    this.collName = new URL(prefix, "http://dummy").pathname.split('/')[1];
+    this.collName = coll;
+    this.isRoot = coll === "$root";
+    this.archivePrefix = this.isRoot ? "/" : `/${this.collName}/`;
+    this.swScope = swScopePrefix;
     this.adblockUrl = undefined;
 
     this.queryParams = {};
+    if (this.isRoot) {
+      this.queryParams["root"] = "$root";
+    }
   }
 
   async init() {
-    const scope = "/";
+    const scope = this.swScope;
 
     await navigator.serviceWorker.register(
       `${this.staticPrefix}/sw.js?` + new URLSearchParams(this.queryParams).toString(),
@@ -30,24 +36,22 @@ class WabacReplay
       }
     });
 
-    const baseUrl = new URL(window.location);
-    baseUrl.hash = "";
-
     const proxyPrefix = "";
 
     const msg = {
       msg_type: "addColl",
       name: this.collName,
       type: "live",
+      root: this.isRoot,
       file: {"sourceUrl": `proxy:${proxyPrefix}`},
       skipExisting: true,
       extraConfig: {
         prefix: proxyPrefix,
         isLive: false,
-        baseUrl: baseUrl.href,
+        baseUrl: this.prefix,
-        baseUrlHashReplay: true,
+        baseUrlAppendReplay: true,
         noPostToGet: false,
-        archivePrefix: `/${this.collName}/`,
+        archivePrefix: this.archivePrefix,
         archiveMod: "ir_",
         adblockUrl: this.adblockUrl
       },
@@ -80,6 +84,6 @@ class WabacReplay
   // called by the Vue banner when the timeline is clicked
   load_url(url, ts) {
     const iframe = document.querySelector('#replay_iframe');
-    iframe.src = `/w/${this.collName}/${ts}mp_/${url}`;
+    iframe.src = `${this.swScope}w${this.archivePrefix}${ts}mp_/${url}`;
   }
 }

pywb/templates/frame_insert.html

@@ -16,7 +16,7 @@ html, body
 {% if client_side_replay %}
 <script src='{{ static_prefix }}/loadWabac.js'></script>
 <script>
-  new WabacReplay("{{ wb_prefix }}", "{{ url }}", "{{ timestamp }}", "{{ static_prefix }}").init();
+  new WabacReplay("{{ wb_prefix }}", "{{ url }}", "{{ timestamp }}", "{{ static_prefix }}", "{{ coll }}", "{{ sw_prefix }}").init();
 </script>
 {% else %}
 <script src='{{ static_prefix }}/wb_frame.js'> </script>