2.7.2 patch release (#787)

* Fix 2.7.1 regressions * Bump to 2.7.2 * fix redirect-to-exact false: - check if current loaded timestamp is the same as to-redirected to timestamp, and avoid reload * additional ui fixes: - location bar: reload with current timestamp, instead of going to calendar - ensure calendar popup on replay view is scrollable - 'Live' mode fixes: don't cache live cdx entry, don't add timestamp when navigating in live mode without timestamp - remember timeline view toggle on replay - title: add 'Archived Page: ' prefix to document.title, consistent with old version - ensure 'Archived Page: ' text is localizable - ui: change ',' to '|' on capture display * update CHANGES for 2.7.2 Co-authored-by: Ilya Kreymer <[email protected]>
webrecorder · Dec 9, 2022 · 3c94da0 · 3c94da0
1 parent 2d19b6b
commit 3c94da0
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 115 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -1,3 +1,15 @@
+pywb 2.7.2 changelist
+~~~~~~~~~~~~~~~~~~~~~
+
+* Fix regression introduced by improper wombat update in 2.7.1
+* Fix `redirect_to_exact: false` functionality: if not set, UI will stay on current timestamp, but will display info on actual capture.
+* Location bar nav now keeps current timestamp instead of defaulting to calendar view.
+* 'Live' mode fixes, no longer cache live cdx entry, don't add timestamp when navigating in live mode without timestamp
+* Calendar dropdown on replay now scrollable.
+* Timeline toggle on replay is 'sticky', will stay on if toggled on replay.
+* Capture text: use '|' as in 'Current Capture: [title] | [capture date]'
+* Document title: Add 'Archived Page: ' prefix to avoid confusion with live pages.
+
 pywb 2.7.1 changelist
 ~~~~~~~~~~~~~~~~~~~~~
 

diff --git a/pywb/apps/frontendapp.py b/pywb/apps/frontendapp.py
@@ -414,6 +414,14 @@ def serve_cdx(self, environ, coll='$root'):
  # if coll == self.all_coll:
  # coll = '*'
 
+ config = self.warcserver.get_coll_config(coll)
+ is_live = config.get("index") == "$live"
+
+ if is_live:
+ cache_control = "no-store, no-cache"
+ else:
+ cache_control = "max-age=86400, must-revalidate"
+
  cdx_url = base_url.format(coll=coll)
 
  if environ.get('QUERY_STRING'):
@@ -433,7 +441,7 @@ def serve_cdx(self, environ, coll='$root'):
  return WbResponse.bin_stream(StreamIter(res.raw),
  content_type=content_type,
  status=status_line,
- headers=[("Cache-Control", "max-age=86400, must-revalidate")])
+ headers=[("Cache-Control", cache_control)])
 
  except Exception as e:
  return WbResponse.text_response('Error: ' + str(e), status='400 Bad Request')

diff --git a/pywb/rewrite/templateview.py b/pywb/rewrite/templateview.py
@@ -408,6 +408,8 @@ def get_top_frame(self, wb_url,
  timestamp = ''
  if wb_url.timestamp:
  timestamp = wb_url.timestamp
+ #else:
+ # timestamp = timestamp_now()
 
  is_proxy = 'wsgiprox.proxy_host' in env
 

diff --git a/pywb/static/vue/vueui.js b/pywb/static/vue/vueui.js
diff --git a/pywb/static/wombat.js b/pywb/static/wombat.js
diff --git a/pywb/templates/vue_loc.html b/pywb/templates/vue_loc.html
@@ -61,6 +61,7 @@
  "capture": "{{ _Q('capture') }}",
  "captures": "{{ _Q('captures') }}",
  "from {hour1} to {hour2}": "{{ _Q('from {hour1} to {hour2}') }}",
- "no captures": "{{ _Q('no captures') }}"
+ "no captures": "{{ _Q('no captures') }}",
+ "Archived Page: ": "{{ _Q('Archived Page: ') }}"
  }
 </script>
diff --git a/pywb/version.py b/pywb/version.py
@@ -1,4 +1,4 @@
-__version__ = '2.7.1'
+__version__ = '2.7.2'
 
 if __name__ == '__main__':
  print(__version__)
diff --git a/pywb/vueui/src/App.vue b/pywb/vueui/src/App.vue
@@ -69,7 +69,7 @@
  class="btn btn-sm"
  :class="{active: showTimelineView, 'btn-outline-light': lightButtons, 'btn-outline-dark': !lightButtons}"
  :aria-pressed="showTimelineView"
- @click="showTimelineView = !showTimelineView"
+ @click="toggleTimelineView"
  :title="(showTimelineView ? _('Hide timeline') : _('Show timeline'))">
  <i class="far fa-chart-bar"></i>
  </button>
@@ -113,7 +113,7 @@
  {{ config.title }}
  </span>
  </span>
- <span class="mr-1" v-if="config.title">,</span>
+ <span class="mr-1" v-if="config.title">|</span>
  {{currentSnapshot.getTimeDateFormatted()}}
  </span>
  </nav>
@@ -142,7 +142,7 @@
  </div>
 
  <!-- Calendar -->
- <div class="card" v-if="currentPeriod && showFullView && currentPeriod.children.length">
+ <div class="card" id="calendar-card" v-if="currentPeriod && showFullView && currentPeriod.children.length">
  <div class="card-body" id="calendar-card-body">
  <CalendarYear
  :period="currentPeriod"
@@ -173,8 +173,8 @@ export default {
  currentSnapshot: null,
  currentSnapshotIndex: null,
  msgs: [],
- showFullView: true,
- showTimelineView: true,
+ showFullView: false,
+ showTimelineView: false,
  maxTimelineZoomLevel: PywbPeriod.Type.day,
  config: {
  title: "",
@@ -194,7 +194,7 @@ export default {
  },
  updated: function() {
  // set top frame title equal to value pulled from replay frame
- document.title = this.config.title;
+ document.title = this._("Archived Page: ") + this.config.title;
  },
  computed: {
  sessionStorageUrlKey() {
@@ -281,7 +281,7 @@ export default {
  if (reloadIFrame !== false) {
  this.$emit("show-snapshot", snapshot);
  }
- this.hideBannerUtilities();
+ this.initBannerState(true);
  },
  gotoPreviousSnapshot() {
  let periodToChangeTo = this.currentPeriod.findByFullId(this.previousSnapshot.getFullId());
@@ -294,10 +294,15 @@ export default {
  gotoUrl(event) {
  event.preventDefault();
  const newUrl = document.querySelector("#theurl").value;
- if (newUrl !== this.url) {
- window.location.href = this.config.prefix + "*/" + newUrl;
+ if (newUrl !== this.config.url) {
+ const ts = this.config.timestamp === undefined ? "*" : this.config.timestamp;
+ window.location.href = this.config.prefix + ts + (ts ? "/" : "") + newUrl;
  }
  },
+ toggleTimelineView() {
+ this.showTimelineView = !this.showTimelineView;
+ window.localStorage.setItem("showTimelineView", this.showTimelineView ? "1" : "0");
+ },
  setData(/** @type {PywbData} data */ data) {
 
  // data-set will usually happen at App INIT (from parent caller)
@@ -321,6 +326,10 @@ export default {
  }.bind(this));
  },
  setSnapshot(view) {
+ if (!this.currentPeriod) {
+ return false;
+ }
+
  // turn off calendar (aka full) view
  this.showFullView = false;
 
@@ -332,18 +341,20 @@ export default {
  let periodToChangeTo = this.currentPeriod.findByFullId(snapshot.getFullId());
  if (periodToChangeTo) {
  this.gotoPeriod(periodToChangeTo, false /* onlyZoomToPeriod */);
+ return true;
  }
+ return false;
  },
- setTimelineView() {
- this.showTimelineView = !this.showTimelineView;
- if (this.showTimelineView === true) {
+ initBannerState(isReplay) {
+ // if not replay, always show both
+ if (!isReplay) {
+ this.showFullView = true;
+ this.showTimelineView = true;
+ } else {
  this.showFullView = false;
+ this.showTimelineView = window.localStorage.getItem("showTimelineView") === "1";
  }
  },
- hideBannerUtilities() {
- this.showFullView = false;
- this.showTimelineView = false;
- },
  updateTitle(title) {
  this.config.title = title;
  }
@@ -361,7 +372,10 @@ export default {
  width: 100%;
  }
  .app.expanded {
- height: 130px;
+ /*height: 130px;*/
+ max-height: calc(100vh - 90px);
+ display: flex;
+ flex-direction: column;
  }
  .full-view {
  /*position: fixed;*/
@@ -449,6 +463,10 @@ export default {
  div.timeline-wrap div.card {
  margin-top: 55px;
  }
+ #calendar-card {
+ overflow-y: auto;
+ max-height: 100%;
+ }
  div.timeline-wrap div.card-body {
  display: flex;
  align-items: center;
@@ -459,6 +477,7 @@ export default {
  align-items: center;
  justify-content: center;
  }
+
  #calendar-card-body {
  padding: 0;
  }

diff --git a/pywb/vueui/src/components/CalendarYear.vue b/pywb/vueui/src/components/CalendarYear.vue
@@ -163,7 +163,7 @@ export default {
  flex: 1;
  flex-wrap: wrap;
  z-index: 10;
- overflow-y: scroll;
+ overflow-y: auto;
  width: 100%;
  background-color: white;
  padding-bottom: 1em;

diff --git a/pywb/vueui/src/index.js b/pywb/vueui/src/index.js
@@ -23,7 +23,8 @@ class CDXLoader {
  this.logoUrl = logoUrl;
  this.navbarBackground = navbarBackground;
  this.navbarColor = navbarColor;
- this.navbarLightButtons = navbarLightButtons
+ this.navbarLightButtons = navbarLightButtons;
+ this.timestamp = timestamp;
 
  this.isReplay = (timestamp !== undefined);
 
@@ -35,11 +36,10 @@ class CDXLoader {
  }, 500);
 
  if (this.isReplay) {
- window.WBBanner = new VueBannerWrapper(this, url);
+ window.WBBanner = new VueBannerWrapper(this, url, timestamp);
  }
 
  let queryURL;
- let isQueryURL = window.location.href.indexOf("*") > -1 ? true : false;
 
  // query form *?=url...
  if (window.location.href.indexOf("*?") > 0) {
@@ -60,9 +60,10 @@ class CDXLoader {
 
  const logoImg = this.staticPrefix + "/" + (this.logoUrl ? this.logoUrl : "pywb-logo-sm.png");
 
- this.app = this.initApp({logoImg, navbarBackground, navbarColor, navbarLightButtons, url, allLocales});
+ this.app = this.initApp({logoImg, navbarBackground, navbarColor, navbarLightButtons, url, allLocales, timestamp});
+
  this.loadCDX(queryURL).then((cdxList) => {
- this.setAppData(cdxList, url, isQueryURL, timestamp);
+ this.setAppData(cdxList, url, this.timestamp);
  });
  }
 
@@ -73,19 +74,7 @@ class CDXLoader {
 
  app.$mount("#app");
 
- // TODO (Ilya): make this work with in-page snapshot/capture/replay updates!
- // app.$on("show-snapshot", snapshot => {
- // const replayUrl = app.config.url;
- // const url = location.href.replace('/'+replayUrl, '').replace(/\d+$/, '') + snapshot.id + '/' + replayUrl;
- // window.history.pushState({url: replayUrl, timestamp: snapshot.id}, document.title, url);
- // if (!window.onpopstate) {
- // window.onpopstate = (ev) => {
- // updateSnapshot(ev.state.url, ev.state.timestamp);
- // };
- // }
- // });
-
- app.$on("show-snapshot", this.loadSnapshot.bind(this));
+ app.$on("show-snapshot", (snapshot) => this.loadSnapshot(snapshot));
  app.$on("data-set-and-render-completed", () => {
  if (this.loadingSpinner) {
  this.loadingSpinner.setOff(); // only turn off loading-spinner AFTER app has told us it is DONE DONE
@@ -101,31 +90,37 @@ 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, isQueryURL, timestamp);
+ this.setAppData(cdxList, url, timestamp);
  }
 
- setAppData(cdxList, url, isQueryURL, timestamp="") {
- this.app.setData(new PywbData(cdxList));
+ async updateTimestamp(url, timestamp) {
+ this.timestamp = timestamp;
 
- // 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 (this.cdxLoading) {
+ return;
  }
 
+ this.app.setSnapshot({url, timestamp});
+ }
+
+ setAppData(cdxList, url, timestamp) {
+ this.app.setData(new PywbData(cdxList));
+
+ this.app.initBannerState(this.isReplay);
+
+ // if set on initial load, may not have timestamp yet
+ // will be updated later
  if (timestamp) {
- this.app.hideBannerUtilities();
- this.app.setSnapshot({url, timestamp});
+ this.updateTimestamp(url, timestamp);
  }
  }
 
  async loadCDX(queryURL) {
  // this.loadingSpinner.setOn(); // start loading-spinner when CDX loading begins
+ this.cdxLoading = true;
  const queryWorker = new Worker(this.staticPrefix + "/queryWorker.js");
 
  const p = new Promise((resolve) => {
@@ -139,6 +134,7 @@ class CDXLoader {
  break;
 
  case "finished":
+ this.cdxLoading = false;
  resolve(cdxList);
  break;
  }
@@ -162,7 +158,10 @@ class CDXLoader {
  if (!this.isReplay) {
  window.location.href = this.prefix + snapshot.id + "/" + snapshot.url;
  } else if (window.cframe) {
- window.cframe.load_url(snapshot.url, snapshot.id + "", reloadIFrame);
+ const ts = snapshot.id + "";
+ if (ts !== this.timestamp) {
+ window.cframe.load_url(snapshot.url, ts, reloadIFrame);
+ }
  }
  }
 }
@@ -171,9 +170,10 @@ class CDXLoader {
 // ===========================================================================
 class VueBannerWrapper
 {
- constructor(loader, url) {
+ constructor(loader, url, ts) {
  this.loading = true;
  this.lastSurt = this.getSurt(url);
+ this.lastTs = ts;
  this.loader = loader;
  }
 
@@ -200,6 +200,9 @@ class VueBannerWrapper
  if (surt !== this.lastSurt) {
  this.loader.updateSnapshot(event.data.url, event.data.ts);
  this.lastSurt = surt;
+ } else if (event.data.ts !== this.lastTs) {
+ this.loader.updateTimestamp(event.data.url, event.data.ts);
+ this.lastTs = event.data.ts;
  }
  }
  }

diff --git a/wombat b/wombat