Fix Vue app issue with redirect_to_exact: false

Fixes #779

Undated URLs were resulting in a broken calendar and timeline in the
Vue app when redirect_to_exact was set to false. This was due to
TopFrameView using the current datetime if no timestamp was included,
which caused a failed snapshot lookup in the Vue app.

This commit changes the default timestamp in TopFrameView to None and
adds additional logic in the Vue app to use the last snapshot's
timestamp as the default if one is not present to match the snapshot
that pywb loads by default under the same conditions.

pywb/rewrite/templateview.py

@@ -405,10 +405,9 @@ def get_top_frame(self, wb_url,
 
         embed_url = wb_url.to_str(mod=replay_mod)
 
+        timestamp = None
         if wb_url.timestamp:
             timestamp = wb_url.timestamp
-        else:
-            timestamp = timestamp_now()
 
         is_proxy = 'wsgiprox.proxy_host' in env
 

pywb/templates/frame_insert.html

@@ -25,7 +25,7 @@
 
 <div id="app" style="width: 100%; height: 200px"></div>
 <script>
-    VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ wb_prefix }}", "{{ timestamp }}", "{{ ui.logo }}", "{{ ui.navbar_background_hex | default('f8f9fa') }}", "{{ ui.navbar_color_hex | default('212529') }}", "{{ ui.navbar_light_buttons }}", "{{ env.pywb_lang | default('en') }}",
+    VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ wb_prefix }}", "{{ timestamp | default(undefined) }}", "{{ ui.logo }}", "{{ ui.navbar_background_hex | default('f8f9fa') }}", "{{ ui.navbar_color_hex | default('212529') }}", "{{ ui.navbar_light_buttons }}", "{{ env.pywb_lang | default('en') }}",
       allLocales, i18nStrings);
 </script>
 

pywb/vueui/src/App.vue

@@ -330,7 +330,9 @@ export default {
       this.config.url = view.url;
 
       let periodToChangeTo = this.currentPeriod.findByFullId(snapshot.getFullId());
-      this.gotoPeriod(periodToChangeTo, false /* onlyZoomToPeriod */);
+      if (periodToChangeTo) {
+        this.gotoPeriod(periodToChangeTo, false /* onlyZoomToPeriod */);
+      }
     },
     setTimelineView() {
       this.showTimelineView = !this.showTimelineView;

pywb/vueui/src/index.js

@@ -39,6 +39,7 @@ class CDXLoader {
     }
 
     let queryURL;
+    let isQueryURL = window.location.href.indexOf("*") > -1 ? true : false;
 
     // query form *?=url...
     if (window.location.href.indexOf("*?") > 0) {
@@ -61,7 +62,7 @@ class CDXLoader {
 
     this.app = this.initApp({logoImg, navbarBackground, navbarColor, navbarLightButtons, url, allLocales});
     this.loadCDX(queryURL).then((cdxList) => {
-      this.setAppData(cdxList, timestamp ? {url, timestamp}:null);
+      this.setAppData(cdxList, url, isQueryURL, timestamp == "None" ? null : timestamp);
     });
   }
 
@@ -100,18 +101,26 @@ class CDXLoader {
     params.set("url", url);
     params.set("output", "json");
     const queryURL = this.prefix + "cdx?" + params.toString();
+    let isQueryURL = window.location.href.indexOf("*") > -1 ? true : false;
 
     const cdxList = await this.loadCDX(queryURL);
 
-    this.setAppData(cdxList, {url, timestamp});
+    this.setAppData(cdxList, url, isQueryURL, timestamp);
   }
 
-  setAppData(cdxList, snapshot=null) {
+  setAppData(cdxList, url, isQueryURL, timestamp=null) {
     this.app.setData(new PywbData(cdxList));
 
-    if (snapshot) {
+    // if this is a capture but we don't have a timestamp (e.g. if redirect_to_exact is false)
+    // set the timestamp to the latest capture
+    if ((!timestamp) && (!isQueryURL)) {
+      const lastSnapshot = cdxList[cdxList.length - 1];
+      timestamp = lastSnapshot.timestamp;
+    }
+
+    if (timestamp) {
       this.app.hideBannerUtilities();
-      this.app.setSnapshot(snapshot);
+      this.app.setSnapshot({url, timestamp});
     }
   }