Compute unique collection id using full sourceUrl if relative url given (#179)

* loading: update sourceToId to resolve any pathname to absolute URL (via document.baseURI) for computing unique id (eg. to avoid conflicts of two 'webarchive.wacz' loaded from different paths) - matches behavior used in embed
embed demo: fix typo, don't change default service worker name

CHANGES.md

@@ -1,5 +1,8 @@
 ## CHANGES
 
+v1.8.1
+- Loading: Resolve sourceUrl to absolute url when computing default id
+
 v1.8.0
 - UI: Add 'Show All Pages' option to show non-seed pages that are previously only available via search
 - Embeds: add 'swName' option to allow customizing 'sw.js' to a different filename

_data/package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",

embed.html

@@ -9,7 +9,7 @@ body {
 </head>
 <body>
 
-<replay-web-page swname="custom.js" replaybase="./" embed="replay-with-info" src="./docs/assets/tweet-example.wacz" url="page:0"></replay-web-page>
+<replay-web-page replaybase="./" embed="replay-with-info" src="./docs/assets/tweet-example.wacz" url="page:0"></replay-web-page>
 
 </body>
 </html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",

src/pageutils.js

@@ -60,6 +60,13 @@ function getReplayLink(view, url, ts) {
 
 // ===========================================================================
 async function sourceToId(url) {
+  try {
+    new URL(url);
+  } catch (e) {
+    // if source is not a valid url, resolve as relative filename to current URL
+    url = new URL(url, document.baseURI).href;
+  }
+
   const digest = await digestMessage(url, "SHA-256");
   const coll = "id-" + digest.slice(0, 12);
   return {url, coll};

ui.js

@@ -48,7 +48,7 @@ class oe extends re{constructor(e){if(super(e),this.it=R,e.type!==ie)throw Error
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class se extends oe{}se.directiveName="unsafeSVG",se.resultType=2;const le=ae(se),ce=ae(class extends re{constructor(e){var t;if(super(e),e.type!==te||"style"!==e.name||(null===(t=e.strings)||void 0===t?void 0:t.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(e){return Object.keys(e).reduce(((t,i)=>{const a=e[i];return null==a?t:t+`${i=i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${a};`}),"")}update(e,[t]){const{style:i}=e.element;if(void 0===this.ct){this.ct=new Set;for(const e in t)this.ct.add(e);return this.render(t)}this.ct.forEach((e=>{null==t[e]&&(this.ct.delete(e),e.includes("-")?i.removeProperty(e):i[e]="")}));for(const e in t){const a=t[e];null!=a&&(this.ct.add(e),e.includes("-")?i.setProperty(e,a):i[e]=a)}return U}});var de=__webpack_require__(6274),he=__webpack_require__(3029),fe=__webpack_require__.n(he);const be=r(de.Z);function ue(e){return[be,e]}const pe=window.IS_APP||window.electron&&window.electron.IS_APP||window.matchMedia("(display-mode: standalone)").matches,me="1.8.0";function ge(e){" "==e.key&&(e.preventDefault(),e.target.click())}class ve extends X{constructor(){super(),this.size="1.1em",this.width=null,this.height=null}static get properties(){return{svg:{type:String},size:{type:String},width:{type:String},height:{type:String}}}static get styles(){return o`
+class se extends oe{}se.directiveName="unsafeSVG",se.resultType=2;const le=ae(se),ce=ae(class extends re{constructor(e){var t;if(super(e),e.type!==te||"style"!==e.name||(null===(t=e.strings)||void 0===t?void 0:t.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(e){return Object.keys(e).reduce(((t,i)=>{const a=e[i];return null==a?t:t+`${i=i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${a};`}),"")}update(e,[t]){const{style:i}=e.element;if(void 0===this.ct){this.ct=new Set;for(const e in t)this.ct.add(e);return this.render(t)}this.ct.forEach((e=>{null==t[e]&&(this.ct.delete(e),e.includes("-")?i.removeProperty(e):i[e]="")}));for(const e in t){const a=t[e];null!=a&&(this.ct.add(e),e.includes("-")?i.setProperty(e,a):i[e]=a)}return U}});var de=__webpack_require__(6274),he=__webpack_require__(3029),fe=__webpack_require__.n(he);const be=r(de.Z);function ue(e){return[be,e]}const pe=window.IS_APP||window.electron&&window.electron.IS_APP||window.matchMedia("(display-mode: standalone)").matches,me="1.8.1";function ge(e){" "==e.key&&(e.preventDefault(),e.target.click())}class ve extends X{constructor(){super(),this.size="1.1em",this.width=null,this.height=null}static get properties(){return{svg:{type:String},size:{type:String},width:{type:String},height:{type:String}}}static get styles(){return o`
     :host {
       display: inline-block;
       padding: 0;
@@ -716,7 +716,7 @@ class se extends oe{}se.directiveName="unsafeSVG",se.resultType=2;const le=ae(se
           <p class="minihead">Collection id</p>
           ${e.coll}
         </div>
-      </div>`}render(){return this.detailed?this.renderDetailed():this.renderSummaryView()}onCopy(e,t){return e.preventDefault(),e.stopPropagation(),navigator.clipboard.writeText(t),!1}onPurge(e){const t={reload:e};this.dispatchEvent(new CustomEvent("coll-purge",{detail:t}))}}function Ke(e){if(!e)return"";e.length<14&&(e+="00000101000000".substr(e.length));const t=e.substring(0,4)+"-"+e.substring(4,6)+"-"+e.substring(6,8)+"T"+e.substring(8,10)+":"+e.substring(10,12)+":"+e.substring(12,14)+"-00:00";return new Date(t)}function Ve(e){let t=null;try{t=new Date(e.ts||e.date)}catch(e){}const i=t&&!isNaN(t)?Ze(t.toISOString()):"";return{date:t,timestamp:i}}function Ze(e){return e.replace(/[-:T]/g,"").slice(0,14)}function Qe(e,t,i){const a=new URLSearchParams;return a.set("view",e),a.set("url",t),a.set("ts",i),"#"+a.toString()}async function Je(e){const t=await async function(e,t){const i=(new TextEncoder).encode(e),a=await crypto.subtle.digest(t,i),r=Array.from(new Uint8Array(a)).map((e=>e.toString(16).padStart(2,"0"))).join("");return r}(e,"SHA-256");return{url:e,coll:"id-"+t.slice(0,12)}}customElements.define("wr-coll-info",Ge),customElements.define("wr-coll-index",We);var Ye=__webpack_require__(5056),Xe=__webpack_require__.n(Ye),et=__webpack_require__(5732),tt=__webpack_require__.n(et),it=__webpack_require__(8561),at=__webpack_require__.n(it),rt=__webpack_require__(9885),ot=__webpack_require__.n(rt),nt=__webpack_require__(4636),st=__webpack_require__.n(nt),lt=__webpack_require__(1615),ct=__webpack_require__.n(lt),dt=__webpack_require__(2302),ht=__webpack_require__.n(dt),ft=__webpack_require__(6368),bt=__webpack_require__.n(ft),ut=__webpack_require__(9125),pt=__webpack_require__.n(ut),mt=__webpack_require__(9998),gt=__webpack_require__.n(mt),vt=__webpack_require__(2164),wt=__webpack_require__.n(vt),xt=__webpack_require__(426),kt=__webpack_require__.n(xt),yt=__webpack_require__(430),_t=__webpack_require__.n(yt),$t=__webpack_require__(1795),St=__webpack_require__.n($t),zt=__webpack_require__(7529),At=__webpack_require__.n(zt),Ct=__webpack_require__(6873),Dt=__webpack_require__.n(Ct),Et=__webpack_require__(4575),It=__webpack_require__.n(Et);class Pt extends X{constructor(){super(),this.collInfo=null,this.appLogo=null,this.ts=null,this.url=null,this.active=!1}get renderRoot(){return this}static get properties(){return{collInfo:{type:Object},appLogo:{type:Object},url:{type:String},ts:{type:String},active:{type:Boolean}}}static get embedStyles(){return o`
+      </div>`}render(){return this.detailed?this.renderDetailed():this.renderSummaryView()}onCopy(e,t){return e.preventDefault(),e.stopPropagation(),navigator.clipboard.writeText(t),!1}onPurge(e){const t={reload:e};this.dispatchEvent(new CustomEvent("coll-purge",{detail:t}))}}function Ke(e){if(!e)return"";e.length<14&&(e+="00000101000000".substr(e.length));const t=e.substring(0,4)+"-"+e.substring(4,6)+"-"+e.substring(6,8)+"T"+e.substring(8,10)+":"+e.substring(10,12)+":"+e.substring(12,14)+"-00:00";return new Date(t)}function Ve(e){let t=null;try{t=new Date(e.ts||e.date)}catch(e){}const i=t&&!isNaN(t)?Ze(t.toISOString()):"";return{date:t,timestamp:i}}function Ze(e){return e.replace(/[-:T]/g,"").slice(0,14)}function Qe(e,t,i){const a=new URLSearchParams;return a.set("view",e),a.set("url",t),a.set("ts",i),"#"+a.toString()}async function Je(e){try{new URL(e)}catch(t){e=new URL(e,window.location.href).href}const t=await async function(e,t){const i=(new TextEncoder).encode(e),a=await crypto.subtle.digest(t,i),r=Array.from(new Uint8Array(a)).map((e=>e.toString(16).padStart(2,"0"))).join("");return r}(e,"SHA-256");return{url:e,coll:"id-"+t.slice(0,12)}}customElements.define("wr-coll-info",Ge),customElements.define("wr-coll-index",We);var Ye=__webpack_require__(5056),Xe=__webpack_require__.n(Ye),et=__webpack_require__(5732),tt=__webpack_require__.n(et),it=__webpack_require__(8561),at=__webpack_require__.n(it),rt=__webpack_require__(9885),ot=__webpack_require__.n(rt),nt=__webpack_require__(4636),st=__webpack_require__.n(nt),lt=__webpack_require__(1615),ct=__webpack_require__.n(lt),dt=__webpack_require__(2302),ht=__webpack_require__.n(dt),ft=__webpack_require__(6368),bt=__webpack_require__.n(ft),ut=__webpack_require__(9125),pt=__webpack_require__.n(ut),mt=__webpack_require__(9998),gt=__webpack_require__.n(mt),vt=__webpack_require__(2164),wt=__webpack_require__.n(vt),xt=__webpack_require__(426),kt=__webpack_require__.n(xt),yt=__webpack_require__(430),_t=__webpack_require__.n(yt),$t=__webpack_require__(1795),St=__webpack_require__.n($t),zt=__webpack_require__(7529),At=__webpack_require__.n(zt),Ct=__webpack_require__(6873),Dt=__webpack_require__.n(Ct),Et=__webpack_require__(4575),It=__webpack_require__.n(Et);class Pt extends X{constructor(){super(),this.collInfo=null,this.appLogo=null,this.ts=null,this.url=null,this.active=!1}get renderRoot(){return this}static get properties(){return{collInfo:{type:Object},appLogo:{type:Object},url:{type:String},ts:{type:String},active:{type:Boolean}}}static get embedStyles(){return o`
     rwp-embed-receipt {
       display: flex;
       flex-direction: column;