archivalo-oss/replayweb.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

loading: fix cancel button broken by worker-based loading

Browse Source
This commit is contained in:
Ilya Kreymer
2021-11-27 17:25:10 -08:00
parent 178d0507eb
commit b60a0ee7d3
2 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/loader.js
+2 -1
View File
@@ -59,6 +59,7 @@ class Loader extends LitElement
// if (!navigator.serviceWorker) {
// return;
// }
// eslint-disable-next-line no-undef
this.worker = new Worker(__SW_NAME__);
this.worker.addEventListener("message", (event) => {
@@ -214,7 +215,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
onCancel() {
//if (navigator.serviceWorker && navigator.serviceWorker.controller) {
if (this.worker) {
this.worker.controller.postMessage({"msg_type": "cancelLoad", "name": this.coll});
this.worker.postMessage({"msg_type": "cancelLoad", "name": this.coll});
// if (this.pingInterval) {
// clearInterval(this.pingInterval);
// }
ui.js
+1 -1
View File
@@ -1312,7 +1312,7 @@ class re extends ie{}re.directiveName="unsafeSVG",re.resultType=2;const oe=ee(re
<span class="icon"><fa-icon .svg="${Mt()}"></fa-icon></span>
<span>Authorize Google Drive</span>
</button>
`}`}script(){if("trypublic"===this.state||this.scriptLoaded)return L``;const e=document.createElement("script");return e.onload=()=>this.onLoad(),e.src="https://apis.google.com/js/platform.js",e}gauth(e,t){self.gapi.load("auth2",(()=>{self.gapi.auth2.authorize({client_id:"160798412227-tko4c82uopud11q105b2lvbogsj77hlg.apps.googleusercontent.com",scope:"https://www.googleapis.com/auth/drive.file",response_type:"token",prompt:e},t)}))}}customElements.define("wr-gdrive",jt);class Ht extends J{constructor(){super(),this.progress=0,this.total=0,this.percent=0,this.coll="",this.state="waiting",this.loadInfo=null,this.currentSize=0,this.totalSize=0,this.tryFileHandle=!!window.showOpenFilePicker,this.fileHandle=null,this.errorAllowRetry=!1,this.pingInterval=""}static get properties(){return{sourceUrl:{type:String},loadInfo:{type:Object},state:{type:String},progress:{type:Number},percent:{type:Number},currentSize:{type:Number},totalSize:{type:Number},error:{type:String},total:{type:Number},status:{type:String},coll:{type:String},embed:{type:String},tryFileHandle:{type:Boolean},errorAllowRetry:{type:Boolean},extraMsg:{type:String}}}firstUpdated(){this.initMessages()}initMessages(){this.worker=new Worker("sw.js"),this.worker.addEventListener("message",(e=>{switch(e.data.msg_type){case"collProgress":if(e.data.name===this.coll){if(this.percent=e.data.percent,e.data.error)if(this.error=e.data.error,this.state="errored",this.errorAllowRetry=!0,this.fileHandle=e.data.fileHandle,"missing_local_file"===this.error)this.tryFileHandle=!1;else if("permission_needed"===this.error&&e.data.fileHandle){this.state="permission_needed";break}e.data.currentSize&&e.data.totalSize&&(this.currentSize=e.data.currentSize,this.totalSize=e.data.totalSize),this.extraMsg=e.data.extraMsg}break;case"collAdded":e.data.name===this.coll&&(this.total||(this.total=100),this.progress=this.total,this.percent=100,this.pingInterval&&clearInterval(this.pingInterval),this.dispatchEvent(new CustomEvent("coll-loaded",{detail:e.data})),this.worker.terminate())}}))}async doLoad(){let e=this.sourceUrl,t=null;if(this.percent=this.currentSize=this.totalSize=0,!navigator.serviceWorker)return this.state="errored","http:"===window.location.protocol?this.error=`Sorry, the ReplayWeb.page system must be loaded from an HTTPS URL, but was loaded from: ${window.location.host}.\nPlease try loading this page from an HTTPS URL`:this.error="Sorry, this browser is not supported. Please try a different browser\n(If you're using Firefox, try without Private Mode)",void(this.errorAllowRetry=!1);try{const{scheme:i,host:a,path:r}=function(e){let t=e.indexOf("://"),i=0,a="",r="",o="";return t>=0?(a=e.slice(0,t),t+=3):(t++,e.startsWith("//")&&(t+=2)),i=e.indexOf("/",t),i>0?(r=e.slice(t,i),o=e.slice(i)):(r=e.slice(t),o=""),{scheme:a,host:r,path:o}}(e);switch(i){case"googledrive":this.state="googledrive",t=await this.googledriveInit();break;case"s3":t={sourceUrl:e,loadUrl:`https://${a}.s3.amazonaws.com${r}`,name:this.sourceUrl};break;case"file":if(!this.loadInfo&&!this.tryFileHandle)return this.state="errored",this.error="File URLs can not be entered directly or shared.\nYou can select a file to upload from the main page by clicking the 'Choose File...' button.",void(this.errorAllowRetry=!1);t=this.loadInfo;break;case"ipfs":if(he){const i=new URL("http://files.replayweb.page/"),a=e.split("#",1)[0];i.searchParams.set("ipfs",a.slice("ipfs://".length)),t={sourceUrl:e,loadUrl:i.href}}}}catch(e){console.log(e)}t||(t={sourceUrl:e}),t.newFullImport=this.loadInfo&&this.loadInfo.newFullImport,this.state="started";const i={msg_type:"addColl",name:this.coll,skipExisting:!0,file:t};this.loadInfo&&this.loadInfo.extraConfig&&(i.extraConfig=this.loadInfo.extraConfig),navigator.serviceWorker.controller||await new Promise((e=>{navigator.serviceWorker.addEventListener("controllerchange",(()=>e()))})),this.worker.postMessage(i)}googledriveInit(){return this._gdWait=new Promise((e=>this._gdResolve=e)),this._gdWait}async onLoadReady(e){this._gdResolve&&this._gdResolve(e.detail)}onCancel(){this.worker&&this.worker.controller.postMessage({msg_type:"cancelLoad",name:this.coll})}updated(e){(this.sourceUrl&&e.has("sourceUrl")||e.has("tryFileHandle"))&&this.doLoad()}static get styles(){return ue(o`
`}`}script(){if("trypublic"===this.state||this.scriptLoaded)return L``;const e=document.createElement("script");return e.onload=()=>this.onLoad(),e.src="https://apis.google.com/js/platform.js",e}gauth(e,t){self.gapi.load("auth2",(()=>{self.gapi.auth2.authorize({client_id:"160798412227-tko4c82uopud11q105b2lvbogsj77hlg.apps.googleusercontent.com",scope:"https://www.googleapis.com/auth/drive.file",response_type:"token",prompt:e},t)}))}}customElements.define("wr-gdrive",jt);class Ht extends J{constructor(){super(),this.progress=0,this.total=0,this.percent=0,this.coll="",this.state="waiting",this.loadInfo=null,this.currentSize=0,this.totalSize=0,this.tryFileHandle=!!window.showOpenFilePicker,this.fileHandle=null,this.errorAllowRetry=!1,this.pingInterval=""}static get properties(){return{sourceUrl:{type:String},loadInfo:{type:Object},state:{type:String},progress:{type:Number},percent:{type:Number},currentSize:{type:Number},totalSize:{type:Number},error:{type:String},total:{type:Number},status:{type:String},coll:{type:String},embed:{type:String},tryFileHandle:{type:Boolean},errorAllowRetry:{type:Boolean},extraMsg:{type:String}}}firstUpdated(){this.initMessages()}initMessages(){this.worker=new Worker("sw.js"),this.worker.addEventListener("message",(e=>{switch(e.data.msg_type){case"collProgress":if(e.data.name===this.coll){if(this.percent=e.data.percent,e.data.error)if(this.error=e.data.error,this.state="errored",this.errorAllowRetry=!0,this.fileHandle=e.data.fileHandle,"missing_local_file"===this.error)this.tryFileHandle=!1;else if("permission_needed"===this.error&&e.data.fileHandle){this.state="permission_needed";break}e.data.currentSize&&e.data.totalSize&&(this.currentSize=e.data.currentSize,this.totalSize=e.data.totalSize),this.extraMsg=e.data.extraMsg}break;case"collAdded":e.data.name===this.coll&&(this.total||(this.total=100),this.progress=this.total,this.percent=100,this.pingInterval&&clearInterval(this.pingInterval),this.dispatchEvent(new CustomEvent("coll-loaded",{detail:e.data})),this.worker.terminate())}}))}async doLoad(){let e=this.sourceUrl,t=null;if(this.percent=this.currentSize=this.totalSize=0,!navigator.serviceWorker)return this.state="errored","http:"===window.location.protocol?this.error=`Sorry, the ReplayWeb.page system must be loaded from an HTTPS URL, but was loaded from: ${window.location.host}.\nPlease try loading this page from an HTTPS URL`:this.error="Sorry, this browser is not supported. Please try a different browser\n(If you're using Firefox, try without Private Mode)",void(this.errorAllowRetry=!1);try{const{scheme:i,host:a,path:r}=function(e){let t=e.indexOf("://"),i=0,a="",r="",o="";return t>=0?(a=e.slice(0,t),t+=3):(t++,e.startsWith("//")&&(t+=2)),i=e.indexOf("/",t),i>0?(r=e.slice(t,i),o=e.slice(i)):(r=e.slice(t),o=""),{scheme:a,host:r,path:o}}(e);switch(i){case"googledrive":this.state="googledrive",t=await this.googledriveInit();break;case"s3":t={sourceUrl:e,loadUrl:`https://${a}.s3.amazonaws.com${r}`,name:this.sourceUrl};break;case"file":if(!this.loadInfo&&!this.tryFileHandle)return this.state="errored",this.error="File URLs can not be entered directly or shared.\nYou can select a file to upload from the main page by clicking the 'Choose File...' button.",void(this.errorAllowRetry=!1);t=this.loadInfo;break;case"ipfs":if(he){const i=new URL("http://files.replayweb.page/"),a=e.split("#",1)[0];i.searchParams.set("ipfs",a.slice("ipfs://".length)),t={sourceUrl:e,loadUrl:i.href}}}}catch(e){console.log(e)}t||(t={sourceUrl:e}),t.newFullImport=this.loadInfo&&this.loadInfo.newFullImport,this.state="started";const i={msg_type:"addColl",name:this.coll,skipExisting:!0,file:t};this.loadInfo&&this.loadInfo.extraConfig&&(i.extraConfig=this.loadInfo.extraConfig),navigator.serviceWorker.controller||await new Promise((e=>{navigator.serviceWorker.addEventListener("controllerchange",(()=>e()))})),this.worker.postMessage(i)}googledriveInit(){return this._gdWait=new Promise((e=>this._gdResolve=e)),this._gdWait}async onLoadReady(e){this._gdResolve&&this._gdResolve(e.detail)}onCancel(){this.worker&&this.worker.postMessage({msg_type:"cancelLoad",name:this.coll})}updated(e){(this.sourceUrl&&e.has("sourceUrl")||e.has("tryFileHandle"))&&this.doLoad()}static get styles(){return ue(o`
:host {
height: 100%;
display: flex;