CodeMirror/ArchiveBox
1
0
Fork 0
mirror of synced 2024-07-05 06:20:37 +12:00
Code Issues Projects Releases Wiki Activity
ArchiveBox/archivebox/templates/static/ui.js

3390 lines
463 KiB
JavaScript
Raw Normal View History

replaywebpage js files
2024-01-20 03:45:23 +13:00
/*! 'ui.js is part of ReplayWeb.page (https://replayweb.page) Copyright (C) 2020-2023, Webrecorder Software. Licensed under the Affero General Public License v3.' */(()=>{var __webpack_modules__={274:(e,t,i)=>{"use strict";i.d(t,{Z:()=>o});var a=i(645),r=i.n(a)()((function(e){return e[1]}));r.push([e.id,'.input::placeholder,.textarea::placeholder,.select select::placeholder{opacity:1}a:focus{color:#363636}.file-label:focus-within .file-cta{background-color:#e8e8e8;color:#363636}.button.is-primary:focus,.button.is-primary:hover,.button.is-primary:active{background-color:#459558 !important;color:white !important}.replay-bar .button{margin:0 1px}.replay-bar .button:focus{box-shadow:none !important;outline:1px dotted #4876ff;outline:-webkit-focus-ring-color auto 1px}.skip-link{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}.skip-link:focus{background-color:black;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,0.6);clip:auto !important;clip-path:none;color:white;display:block;font-family:inherit;font-size:1.3em;font-weight:bold;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}.main-scroll{flex:1;scroll-behavior:smooth;overflow-y:auto;max-height:100vh;height:100%;display:flex;flex-direction:column;overflow-x:hidden}/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */.button,.input,.textarea,.select select,.file-cta,.file-name,.pagination-previous,.pagination-next,.pagination-link,.pagination-ellipsis{-moz-appearance:none;-webkit-appearance:none;align-items:center;border:1px solid transparent;border-radius:4px;box-shadow:none;display:inline-flex;font-size:1rem;height:2.5em;justify-content:flex-start;line-height:1.5;padding-bottom:calc(0.5em - 1px);padding-left:calc(0.75em - 1px);padding-right:calc(0.75em - 1px);padding-top:calc(0.5em - 1px);position:relative;vertical-align:top}.button:focus,.input:focus,.textarea:focus,.select select:focus,.file-cta:focus,.file-name:focus,.pagination-previous:focus,.pagination-next:focus,.pagination-link:focus,.pagination-ellipsis:focus,.is-focused.button,.is-focused.input,.is-focused.textarea,.select select.is-focused,.is-focused.file-cta,.is-focused.file-name,.is-focused.pagination-previous,.is-focused.pagination-next,.is-focused.pagination-link,.is-focused.pagination-ellipsis,.button:active,.input:active,.textarea:active,.select select:active,.file-cta:active,.file-name:active,.pagination-previous:active,.pagination-next:active,.pagination-link:active,.pagination-ellipsis:active,.is-active.button,.is-active.input,.is-active.textarea,.select select.is-active,.is-active.file-cta,.is-active.file-name,.is-active.pagination-previous,.is-active.pagination-next,.is-active.pagination-link,.is-active.pagination-ellipsis{outline:none}.button[disabled],.input[disabled],.textarea[disabled],.select select[disabled],.file-cta[disabled],.file-name[disabled],.pagination-previous[disabled],.pagination-next[disabled],.pagination-link[disabled],.pagination-ellipsis[disabled],fieldset[disabled] .button,fieldset[disabled] .input,fieldset[disabled] .textarea,fieldset[disabled] .select select,.select fieldset[disabled] select,fieldset[disabled] .file-cta,fieldset[disabled] .file-name,fieldset[disabled] .pagination-previous,fieldset[disabled] .pagination-next,fieldset[disabled] .pagination-link,fieldset[disabled] .pagination-ellipsis{cursor:not-allowed}.button,.file,.breadcrumb,.pagination-previous,.pagination-next,.pagination-link,.pagination-ellipsis,.tabs,.is-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.select:not(.is-multiple):not(.is-loading)::after,.navbar-link:not(.is-arrowless)::after{border:3px solid rgba(0,0,0,0);border-radius:2px;border-right:0;border-top:0;content:" ";display:block;height:0.625em;margin-top:-0.4375em;pointer-events:none;position:absolute;top:50%;transform:rotate(-45deg);transform-origin:center;widt
/**!
* FlexSearch.js v0.7.31 (Bundle)
* Copyright 2018-2022 Nextapps GmbH
* Author: Thomas Wilkerling
* Licence: Apache-2.0
* https://github.com/nextapps-de/flexsearch
*/
function _f(self){"use strict";try{module&&(self=module)}catch(e){}var t;function u(e){return void 0===e||e}function aa(e){const t=Array(e);for(let i=0;i<e;i++)t[i]=v();return t}function v(){return Object.create(null)}function ba(e,t){return t.length-e.length}function x(e){return"string"==typeof e}function C(e){return"object"==typeof e}function D(e){return"function"==typeof e}function ca(e,t){var i=da;if(e&&(t&&(e=E(e,t)),this.H&&(e=E(e,this.H)),this.J&&1<e.length&&(e=E(e,this.J)),i||""===i)){if(e=e.split(i),this.filter){t=this.filter,i=e.length;const a=[];for(let r=0,o=0;r<i;r++){const i=e[r];i&&!t[i]&&(a[o++]=i)}e=a}return e}return e}self._factory=_f;const da=/[\p{Z}\p{S}\p{P}\p{C}]+/u,ea=/[\u0300-\u036f]/g;function fa(e,t){const i=Object.keys(e),a=i.length,r=[];let o="",n=0;for(let s,l,c=0;c<a;c++)s=i[c],(l=e[s])?(r[n++]=F(t?"(?!\\b)"+s+"(\\b|_)":s),r[n++]=l):o+=(o?"|":"")+s;return o&&(r[n++]=F(t?"(?!\\b)("+o+")(\\b|_)":"("+o+")"),r[n]=""),r}function E(e,t){for(let i=0,a=t.length;i<a&&(e=e.replace(t[i],t[i+1]));i+=2);return e}function F(e){return new RegExp(e,"g")}function ha(e){let t="",i="";for(let a,r=0,o=e.length;r<o;r++)(a=e[r])!==i&&(t+=i=a);return t}var ja={encode:ia,F:!1,G:""};function ia(e){return ca.call(this,(""+e).toLowerCase(),!1)}const ka={},G={};function la(e){I(e,"add"),I(e,"append"),I(e,"search"),I(e,"update"),I(e,"remove")}function I(e,t){e[t+"Async"]=function(){const e=this,i=arguments;var a=i[i.length-1];let r;return D(a)&&(r=a,delete i[i.length-1]),a=new Promise((function(a){setTimeout((function(){e.async=!0;const r=e[t].apply(e,i);e.async=!1,a(r)}))})),r?(a.then(r),this):a}}function ma(e,t,i,a){const r=e.length;let o,n,s=[],l=0;a&&(a=[]);for(let c=r-1;0<=c;c--){const d=e[c],h=d.length,f=v();let b=!o;for(let e=0;e<h;e++){const h=d[e],u=h.length;if(u)for(let e,d,p=0;p<u;p++)if(d=h[p],o){if(o[d]){if(!c)if(i)i--;else if(s[l++]=d,l===t)return s;(c||a)&&(f[d]=1),b=!0}if(a&&(e=(n[d]||0)+1,n[d]=e,e<r)){const t=a[e-2]||(a[e-2]=[]);t[t.length]=d}}else f[d]=1}if(a)o||(n=f);else if(!b)return[];o=f}if(a)for(let e,r,n=a.length-1;0<=n;n--){e=a[n],r=e.length;for(let a,n=0;n<r;n++)if(a=e[n],!o[a]){if(i)i--;else if(s[l++]=a,l===t)return s;o[a]=1}}return s}function na(e,t){const i=v(),a=v(),r=[];for(let t=0;t<e.length;t++)i[e[t]]=1;for(let e,o=0;o<t.length;o++){e=t[o];for(let t,o=0;o<e.length;o++)t=e[o],i[t]&&!a[t]&&(a[t]=1,r[r.length]=t)}return r}function J(e){this.l=!0!==e&&e,this.cache=v(),this.h=[]}function oa(e,t,i){C(e)&&(e=e.query);let a=this.cache.get(e);return a||(a=this.search(e,t,i),this.cache.set(e,a)),a}J.prototype.set=function(e,t){if(!this.cache[e]){var i=this.h.length;for(i===this.l?delete this.cache[this.h[i-1]]:i++,--i;0<i;i--)this.h[i]=this.h[i-1];this.h[0]=e}this.cache[e]=t},J.prototype.get=function(e){const t=this.cache[e];if(this.l&&t&&(e=this.h.indexOf(e))){const t=this.h[e-1];this.h[e-1]=this.h[e],this.h[e]=t}return t};const qa={memory:{charset:"latin:extra",D:3,B:4,m:!1},performance:{D:3,B:3,s:!1,context:{depth:2,D:1}},match:{charset:"latin:extra",G:"reverse"},score:{charset:"latin:advanced",D:20,B:3,context:{depth:3,D:9}},default:{}};function ra(e,t,i,a,r,o,n){setTimeout((function(){const s=e(i?i+"."+a:a,JSON.stringify(n));s&&s.then?s.then((function(){t.export(e,t,i,r,o+1)})):t.export(e,t,i,r,o+1)}))}function K(e,t){if(!(this instanceof K))return new K(e);var i;if(e){x(e)?e=qa[e]:(i=e.preset)&&(e=Object.assign({},i[i],e)),i=e.charset;var a=e.lang;x(i)&&(-1===i.indexOf(":")&&(i+=":default"),i=G[i]),x(a)&&(a=ka[a])}else e={};let r,o,n=e.context||{};if(this.encode=e.encode||i&&i.encode||ia,this.register=t||v(),this.D=r=e.resolution||9,this.G=t=i&&i.G||e.tokenize||"strict",this.depth="strict"===t&&n.depth,this.l=u(n.bidirectional),this.s=o=u(e.optimize),this.m=u(e.fastupdate),this.B=e.minlength||1,this.C=e.boost,this.map=o?aa(r):v(),this.A=r=n.resolution||1,this.h=o?aa(r):v(),this.F=i&&i.F||e.rtl,this.H=(t=e.matcher||a&&a.H)&&fa(t,!1),this.J=(t=e.stemmer||a&&a.J)&&fa(t,!0),i=t=e.filter||a&&a.filter){i=t,a=v();for(let e=0,t=i.length;e<t;e++)a[i[e]]=1;i=a}this.filter=i,this.cache=(t=e.cache)&&n
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const e=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,t=Symbol(),i=new Map;class a{constructor(e,i){if(this._$cssResult$=!0,i!==t)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e}get styleSheet(){let t=i.get(this.cssText);return e&&void 0===t&&(i.set(this.cssText,t=new CSSStyleSheet),t.replaceSync(this.cssText)),t}toString(){return this.cssText}}const r=e=>new a("string"==typeof e?e:e+"",t),o=(e,...i)=>{const r=1===e.length?e[0]:i.reduce(((t,i,a)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+e[a+1]),e[0]);return new a(r,t)},n=e?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return r(t)})(e):e;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var s;const l=window.trustedTypes,c=l?l.emptyScript:"",d=window.reactiveElementPolyfillSupport,h={toAttribute(e,t){switch(t){case Boolean:e=e?c:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},f=(e,t)=>t!==e&&(t==t||e==e),b={attribute:!0,type:String,converter:h,reflect:!1,hasChanged:f};class u extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(e){var t;null!==(t=this.l)&&void 0!==t||(this.l=[]),this.l.push(e)}static get observedAttributes(){this.finalize();const e=[];return this.elementProperties.forEach(((t,i)=>{const a=this._$Eh(i,t);void 0!==a&&(this._$Eu.set(a,i),e.push(a))})),e}static createProperty(e,t=b){if(t.state&&(t.attribute=!1),this.finalize(),this.elementProperties.set(e,t),!t.noAccessor&&!this.prototype.hasOwnProperty(e)){const i="symbol"==typeof e?Symbol():"__"+e,a=this.getPropertyDescriptor(e,i,t);void 0!==a&&Object.defineProperty(this.prototype,e,a)}}static getPropertyDescriptor(e,t,i){return{get(){return this[t]},set(a){const r=this[e];this[t]=a,this.requestUpdate(e,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)||b}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const e=Object.getPrototypeOf(this);if(e.finalize(),this.elementProperties=new Map(e.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const e=this.properties,t=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const i of t)this.createProperty(i,e[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(n(e))}else void 0!==e&&t.push(n(e));return t}static _$Eh(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}o(){var e;this._$Ep=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$Em(),this.requestUpdate(),null===(e=this.constructor.l)||void 0===e||e.forEach((e=>e(this)))}addController(e){var t,i;(null!==(t=this._$Eg)&&void 0!==t?t:this._$Eg=[]).push(e),void 0!==this.renderRoot&&this.isConnected&&(null===(i=e.hostConnected)||void 0===i||i.call(e))}removeController(e){var t;null===(t=this._$Eg)||void 0===t||t.splice(this._$Eg.indexOf(e)>>>0,1)}_$Em(){this.constructor.elementProperties.forEach(((e,t)=>{this.hasOwnProperty(t)&&(this._$Et.set(t,this[t]),delete this[t])}))}createRenderRoot(){var t;const i=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{e?t.adoptedStyleSheets=i.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet)):i.forEach((e=>{const i=document.createElement("style"),a=window.litNonce;void 0!==a&&i.setAttribute("nonce",a),i.textContent=e.cssText,t.appendChild(i)}))})(i,this.constructor.elementStyles),i}connectedCallback(){var e;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(e=this._$Eg)||void 0===e||e.forEach((e=>{var t;return null===(t=e.hostConnected)||void 0===t?void 0:t.call(e)}))}enableUpdating(e){}disconnectedCallback(){var e;null===(e=this._$Eg)||void 0===e||e.forEach((e=>{var t;return null===(t=e.hostDisconnected)||void 0===t?void 0:t.call(e)}))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ES(e,t,i=b){var a,r;const o=this.constructor._$Eh(e,i);if(void 0!==o&&!0===i.reflect){const n=(null!==(r=null===(a=i.converter)||void 0===a?void 0:a.toAttribute)&&void 0!==r?r:h.toAttribute)(t,i.type);this._$Ei=e,null==n?this.removeAttribute(o):this.setAttribute(o,n),this._$Ei=null}}_$AK(e,t){var i,a,r;const o=this.constructor,n=o._$Eu.get(e);if(void 0!==n&&this._$Ei!==n){const e=o.getPropertyOptions(n),s=e.converter,l=null!==(r=null!==(a=null===(i=s)||void 0===i?void 0:i.fromAttribute)&&void 0!=
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var p;u.finalized=!0,u.elementProperties=new Map,u.elementStyles=[],u.shadowRootOptions={mode:"open"},null==d||d({ReactiveElement:u}),(null!==(s=globalThis.reactiveElementVersions)&&void 0!==s?s:globalThis.reactiveElementVersions=[]).push("1.1.1");const m=globalThis.trustedTypes,g=m?m.createPolicy("lit-html",{createHTML:e=>e}):void 0,v=`lit$${(Math.random()+"").slice(9)}$`,w="?"+v,x=`<${w}>`,k=document,y=(e="")=>k.createComment(e),$=e=>null===e||"object"!=typeof e&&"function"!=typeof e,_=Array.isArray,S=e=>{var t;return _(e)||"function"==typeof(null===(t=e)||void 0===t?void 0:t[Symbol.iterator])},z=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,C=/-->/g,A=/>/g,D=/>|[ \n \r](?:([^\s"'>=/]+)([ \n \r]*=[ \n \r]*(?:[^ \n \r"'`<>=]|("|')|))|$)/g,E=/'/g,I=/"/g,P=/^(?:script|style|textarea)$/i,L=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),T=L(1),U=(L(2),Symbol.for("lit-noChange")),R=Symbol.for("lit-nothing"),q=new WeakMap,M=k.createTreeWalker(k,129,null,!1),j=(e,t)=>{const i=e.length-1,a=[];let r,o=2===t?"<svg>":"",n=z;for(let t=0;t<i;t++){const i=e[t];let s,l,c=-1,d=0;for(;d<i.length&&(n.lastIndex=d,l=n.exec(i),null!==l);)d=n.lastIndex,n===z?"!--"===l[1]?n=C:void 0!==l[1]?n=A:void 0!==l[2]?(P.test(l[2])&&(r=RegExp("</"+l[2],"g")),n=D):void 0!==l[3]&&(n=D):n===D?">"===l[0]?(n=null!=r?r:z,c=-1):void 0===l[1]?c=-2:(c=n.lastIndex-l[2].length,s=l[1],n=void 0===l[3]?D:'"'===l[3]?I:E):n===I||n===E?n=D:n===C||n===A?n=z:(n=D,r=void 0);const h=n===D&&e[t+1].startsWith("/>")?" ":"";o+=n===z?i+x:c>=0?(a.push(s),i.slice(0,c)+"$lit$"+i.slice(c)+v+h):i+v+(-2===c?(a.push(void 0),t):h)}const s=o+(e[i]||"<?>")+(2===t?"</svg>":"");if(!Array.isArray(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==g?g.createHTML(s):s,a]};class O{constructor({strings:e,_$litType$:t},i){let a;this.parts=[];let r=0,o=0;const n=e.length-1,s=this.parts,[l,c]=j(e,t);if(this.el=O.createElement(l,i),M.currentNode=this.el.content,2===t){const e=this.el.content,t=e.firstChild;t.remove(),e.append(...t.childNodes)}for(;null!==(a=M.nextNode())&&s.length<n;){if(1===a.nodeType){if(a.hasAttributes()){const e=[];for(const t of a.getAttributeNames())if(t.endsWith("$lit$")||t.startsWith(v)){const i=c[o++];if(e.push(t),void 0!==i){const e=a.getAttribute(i.toLowerCase()+"$lit$").split(v),t=/([.?@])?(.*)/.exec(i);s.push({type:1,index:r,name:t[2],strings:e,ctor:"."===t[1]?W:"?"===t[1]?K:"@"===t[1]?V:H})}else s.push({type:6,index:r})}for(const t of e)a.removeAttribute(t)}if(P.test(a.tagName)){const e=a.textContent.split(v),t=e.length-1;if(t>0){a.textContent=m?m.emptyScript:"";for(let i=0;i<t;i++)a.append(e[i],y()),M.nextNode(),s.push({type:2,index:++r});a.append(e[t],y())}}}else if(8===a.nodeType)if(a.data===w)s.push({type:2,index:r});else{let e=-1;for(;-1!==(e=a.data.indexOf(v,e+1));)s.push({type:7,index:r}),e+=v.length-1}r++}}static createElement(e,t){const i=k.createElement("template");return i.innerHTML=e,i}}function N(e,t,i=e,a){var r,o,n,s;if(t===U)return t;let l=void 0!==a?null===(r=i._$Cl)||void 0===r?void 0:r[a]:i._$Cu;const c=$(t)?void 0:t._$litDirective$;return(null==l?void 0:l.constructor)!==c&&(null===(o=null==l?void 0:l._$AO)||void 0===o||o.call(l,!1),void 0===c?l=void 0:(l=new c(e),l._$AT(e,i,a)),void 0!==a?(null!==(n=(s=i)._$Cl)&&void 0!==n?n:s._$Cl=[])[a]=l:i._$Cu=l),void 0!==l&&(t=N(e,l._$AS(e,t.values),l,a)),t}class B{constructor(e,t){this.v=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(e){var t;const{el:{content:i},parts:a}=this._$AD,r=(null!==(t=null==e?void 0:e.creationScope)&&void 0!==t?t:k).importNode(i,!0);M.currentNode=r;let o=M.nextNode(),n=0,s=0,l=a[0];for(;void 0!==l;){if(n===l.index){let t;2===l.type?t=new F(o,o.nextSibling,this,e):1===l.type?t=new l.ctor(o,l.name,l.strings,this,e):6===l.type&&(t=new Z(o,this,e)),this.v.push(t),l=a[++s]}n!==(null==l?void 0:l.index)&&(o=M.nextNode(),n++)}return r}m(e){let t=0;for(const i of this.v)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var J,Y;null==Q||Q(O,F),(null!==(p=globalThis.litHtmlVersions)&&void 0!==p?p:globalThis.litHtmlVersions=[]).push("2.1.1");class X extends u{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var e,t;const i=super.createRenderRoot();return null!==(e=(t=this.renderOptions).renderBefore)&&void 0!==e||(t.renderBefore=i.firstChild),i}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Dt=((e,t,i)=>{var a,r;const o=null!==(a=null==i?void 0:i.renderBefore)&&void 0!==a?a:t;let n=o._$litPart$;if(void 0===n){const e=null!==(r=null==i?void 0:i.renderBefore)&&void 0!==r?r:null;o._$litPart$=n=new F(t.insertBefore(y(),e),e,void 0,null!=i?i:{})}return n._$AI(e),n})(t,this.renderRoot,this.renderOptions)}connectedCallback(){var e;super.connectedCallback(),null===(e=this._$Dt)||void 0===e||e.setConnected(!0)}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this._$Dt)||void 0===e||e.setConnected(!1)}render(){return U}}X.finalized=!0,X._$litElement$=!0,null===(J=globalThis.litElementHydrateSupport)||void 0===J||J.call(globalThis,{LitElement:X});const ee=globalThis.litElementPolyfillSupport;null==ee||ee({LitElement:X});(null!==(Y=globalThis.litElementVersions)&&void 0!==Y?Y:globalThis.litElementVersions=[]).push("3.1.1");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const te=1,ie=2,ae=e=>(...t)=>({_$litDirective$:e,values:t});class re{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,i){this._$Ct=e,this._$AM=t,this._$Ci=i}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
class oe extends re{constructor(e){if(super(e),this.it=R,e.type!==ie)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===R||null==e)return this.vt=void 0,this.it=e;if(e===U)return e;if("string"!=typeof e)throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this.vt;this.it=e;const t=[e];return t.raw=t,this.vt={_$litType$:this.constructor.resultType,strings:t,values:[]}}}oe.directiveName="unsafeHTML",oe.resultType=1;const ne=ae(oe);
/**
* @license
* 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__(274),he=__webpack_require__(29),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.14";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;
margin: 0;
line-height: 1em;
}
:host svg {
fill: var(--fa-icon-fill-color, currentcolor);
width: var(--fa-icon-width, 19px);
height: var(--fa-icon-height, 19px);
}
`}render(){if(!this.svg)return T``;const e={};return this.size?(e.width=this.size,e.height=this.size):(this.width&&(e.width=this.width),this.height&&(e.height=this.height)),T`<svg style="${ce(e)}">
<g>${le(this.svg)}</g>
</svg>`}}customElements.define("fa-icon",ve),customElements.define("wr-anim-logo",class extends ve{constructor(){super(),this.svg=fe()}static get styles(){return o`
#wrlogo #stop5687 {
animation: animLeft 7s linear infinite;
}
#wrlogo #stop5689 {
animation: animRight 7s linear infinite;
}
@keyframes animLeft {
0% {
stop-color: #4876ff;
}
25% {
stop-color: #1b0921;
}
50% {
stop-color: #4876ff;
}
75% {
stop-color: #04cdff;
}
100% {
stop-color: #4876ff;
}
}
@keyframes animRight {
0% {
stop-color: #04cdff;
}
25% {
stop-color: #4876ff;
}
50% {
stop-color: #1b0921;
}
75% {
stop-color: #4876ff;
}
100% {
stop-color: #04cdff;
}
}
`}}),customElements.define("wr-modal",class extends X{constructor(){super(),this.title="",this.bgClass="",this.noBgClose=!1}static get properties(){return{title:{type:String},bgClass:{type:String},noBgClose:{type:Boolean}}}static get styles(){return ue(o`
.modal-background {
background-color: rgba(10, 10, 10, 0.5);
}
.modal-card-head {
background-color: var(--background, #97a1ff);
}
.modal-card {
width: 100%;
max-width: var(--modal-width, 640px);
}
`)}render(){return T` <div class="modal is-active">
<div
class="modal-background"
@click="${()=>!this.noBgClose&&this.onClose()}"
></div>
<div class="modal-card">
<header class="modal-card-head ${this.bgClass}">
<p class="modal-card-title is-3">${this.title}</p>
<button
class="delete"
aria-label="close"
@click="${this.onClose}"
></button>
</header>
<section class="modal-card-body">
<slot></slot>
</section>
</div>
</div>`}onClose(){this.dispatchEvent(new CustomEvent("modal-closed"))}});var we,xe=__webpack_require__(200),ke=__webpack_require__.n(xe),ye=__webpack_require__(878),$e=__webpack_require__.n(ye),_e=__webpack_require__(124),Se=__webpack_require__.n(_e);function ze(e,t){void 0===t&&(t={});var i=t.registrationOptions;void 0===i&&(i={}),delete t.registrationOptions;var a=function(e){for(var i=[],a=arguments.length-1;a-- >0;)i[a]=arguments[a+1];t&&t[e]&&t[e].apply(t,i)};"serviceWorker"in navigator&&we.then((function(){Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/))?(!function(e,t,i){fetch(e).then((function(a){404===a.status?(t("error",new Error("Service worker not found at "+e)),De()):-1===a.headers.get("content-type").indexOf("javascript")?(t("error",new Error("Expected "+e+" to have javascript content-type, but received "+a.headers.get("content-type"))),De()):Ae(e,t,i)})).catch((function(e){return Ce(t,e)}))}(e,a,i),navigator.serviceWorker.ready.then((function(e){a("ready",e)})).catch((function(e){return Ce(a,e)}))):(Ae(e,a,i),navigator.serviceWorker.ready.then((function(e){a("ready",e)})).catch((function(e){return Ce(a,e)})))}))}function Ce(e,t){navigator.onLine||e("offline"),e("error",t)}function Ae(e,t,i){navigator.serviceWorker.register(e,i).then((function(e){t("registered",e),e.waiting?t("updated",e):e.onupdatefound=function(){t("updatefound",e);var i=e.installing;i.onstatechange=function(){"installed"===i.state&&(navigator.serviceWorker.controller?t("updated",e):t("cached",e))}}})).catch((function(e){return Ce(t,e)}))}function De(){"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()})).catch((function(e){return Ce(emit,e)}))}"undefined"!=typeof window&&(we="undefined"!=typeof Promise?new Promise((function(e){return window.addEventListener("load",e)})):{then:function(e){return window.addEventListener("load",e)}});class Ee{constructor({name:e="sw.js",scope:t="./",appName:i="ReplayWeb.page",requireSubdomainIframe:a=!1}={}){this.name=e,this.scope=t,this.appName=i,this.requireSubdomainIframe=a,this.errorMsg=null}setAppName(e){this.appName=e}register(){let e,t;const i=new Promise(((i,a)=>{e=i,t=a}));this.errorMsg=this.getSWErrorMsg(),this.errorMsg&&(console.error(this.errorMsg),t(this.errorMsg));const a=e=>{console.error("Error during service worker registration:",e),this.errorMsg=this.getCrossOriginIframeMsg(),this.errorMsg||(this.errorMsg=`${this.appName} could not be loaded due to the following error:\n${e.toString()}`),t(this.errorMsg)};return ze(this.scope+this.name,{registrationOptions:{scope:this.scope},registered(){console.log("Service worker is registered"),e()},error(e){a(e)}}),i}getCrossOriginIframeMsg(){return this.isCrossOriginIframe()?` Sorry, Service Workers can not be used in cross-origin iframes.\n This web archive embed is loaded from ${window.location.origin} but the top page is on a different origin.\n The embed must be loaded from the same origin or a subdomain.`:null}isCrossOriginIframe(){if(window.parent===window)return!1;try{return""===window.top.location.href}catch(e){return!0}}getSWErrorMsg(){if(navigator.serviceWorker)return this.requireSubdomainIframe&&!this.isCrossOriginIframe()?`Sorry, due to security settings, this ${this.appName} embed only be viewed within a subdomain iframe.`:null;const e=this.getCrossOriginIframeMsg();return e||(window.isSecureContext?"MozAppearance"in document.documentElement.style?"Sorry, Service Workers are disabled in Firefox in Private Mode. Please try loading this page in regular mode instead.":`Sorry, ${this.appName} won't work in this browser as Service Workers are not supported in this window.\n Please try a different browser.`:`\n Sorry, the ${this.appName} system must be loaded from an HTTPS URL (or localhost), but was loaded from: ${window.location.host}.\n Please try loading this page from an HTTPS URL`)}renderErrorReport(e,t){const i=this.errorMsg||t;return i?T`
<section class="is-fullwidth">
<div class="has-text-centered">
<fa-icon
style="margin: 1em;flex-grow: 1;"
id="wrlogo"
size="2.5rem"
.svg=${e}
aria-hidden="true"
></fa-icon>
</div>
<div style="white-space: pre-wrap; text-align: center">${i}</div>
</section>
`:""}}class Ie extends X{constructor(e="sw.js"){super(),this.sourceUrl=null,this.collTitle=null,this.showAbout=!1,this.showFileDropOverlay=!1,this.pageParams=new URLSearchParams,this.inited=!1,this.navMenuShown=!1,this.collPageUrl="",this.pageTitle="",this.pageReplay=!1,this.loadInfo=null,this.swName=e,this.swmanager=null,this.skipRuffle=!1,this.useRuffle=!1,this.safariKeyframes(),this.addEventListener("dragenter",(e=>{this.maybeStartFileDrop(e)})),this.addEventListener("dragover",(e=>{this.maybeStartFileDrop(e)})),this.addEventListener("dragleave",(()=>{this.showFileDropOverlay=!1})),this.addEventListener("dragend",(()=>{this.showFileDropOverlay=!1})),this.addEventListener("drop",(e=>{this.droppedFile=e.dataTransfer.files[0],this.showFileDropOverlay=!1,e.preventDefault()})),this.maybeStartFileDrop=e=>{this.sourceUrl||(this.showFileDropOverlay=!0,e.preventDefault())}}get appName(){return"ReplayWeb.page"}get homeUrl(){return window.location.pathname}static get properties(){return{inited:{type:Boolean},pageParams:{type:Object},sourceUrl:{type:String},navMenuShown:{type:Boolean},showAbout:{type:Boolean},showFileDropOverlay:{type:Boolean},collTitle:{type:String},loadInfo:{type:Object},embed:{type:String},collPageUrl:{type:String},pageTitle:{type:String},pageReplay:{type:Boolean},source:{type:String},skipRuffle:{type:Boolean},swErrorMsg:{type:Object}}}static get styles(){return ue(Ie.appStyles)}static get appStyles(){return o`
#wrlogo {
max-height: 1rem;
}
.navbar {
height: 1.5rem;
}
.navbar-brand {
height: 1.5rem;
display: flex;
align-items: center;
}
.wr-logo-item {
padding: 0 8px 0 0;
}
.no-wrap {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.has-allcaps {
font-variant-caps: small-caps;
}
:host {
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
display: flex;
min-width: 0px;
flex-direction: column;
}
wr-coll {
height: 100%;
}
.navbar {
padding: 0 0.5em;
}
div.navbar-menu fa-icon {
vertical-align: sub;
}
.tagline {
margin-top: 1rem;
}
.drop-file-overlay {
position: relative;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
inset: 0;
z-index: 50;
font-weight: bold;
font-size: 1.5rem;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(2px);
}
.drop-file-overlay:after {
pointer-events: none;
content: " ";
position: absolute;
inset: 0;
border: 5px dashed #aaa;
margin: 15px;
}
@media screen and (min-width: 840px) {
.menu-only {
display: none;
}
a.arrow-button {
padding-left: 4px;
padding-right: 4px;
}
.info-menu {
padding: 0 1em;
}
.logo-text {
padding-left: 0px;
margin-left: 6px;
}
a.navbar-item.logo-text:hover {
background-color: initial;
}
}
@media screen and (max-width: 840px) {
.wide-only {
display: none !important;
}
}
`}get mainLogo(){return fe()}renderNavBrand(){return T` <span
id="home"
class="logo-text has-text-weight-bold is-size-6 has-allcaps wide-only"
>
<span class="has-text-primary">replay</span>
<span class="has-text-link">web.page</span>
<span class="is-sr-only">Home</span>
</span>`}renderNavBar(){return T` <a
href="#skip-main-target"
@click=${this.skipMenu}
class="skip-link"
>Skip main navigation</a
>
<nav class="navbar has-background-info" aria-label="main">
<div class="navbar-brand">
${this.embed?T`
<span class="navbar-item wr-logo-item">
<fa-icon
id="wrlogo"
size="1.0rem"
.svg=${this.mainLogo}
aria-hidden="true"
></fa-icon>
</span>
`:T`
<a
href="${this.homeUrl}"
class="navbar-item wr-logo-item"
aria-labelledby="home"
>
<fa-icon
id="wrlogo"
size="1.0rem"
.svg=${this.mainLogo}
aria-hidden="true"
></fa-icon>
${this.renderNavBrand()}
</a>
${this.collTitle?T`
<a
href="${this.collPageUrl}"
class="no-wrap is-size-6 has-text-black"
>/&nbsp;&nbsp;<i>${this.collTitle}</i></a
>
<span class="no-wrap is-size-6"
>&nbsp;&nbsp;/&nbsp;
${this.pageReplay?T`<i>${this.pageTitle}</i>`:this.pageTitle}
</span>
`:""}
`}
<a
href="#"
role="button"
id="menu-button"
@click="${this.onNavMenu}"
@keyup="${ge}"
class="navbar-burger burger ${this.navMenuShown?"is-active":""}"
aria-label="main menu"
aria-haspopup="true"
aria-expanded="${this.navMenuShown}"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
${this.sourceUrl?T``:T` <div
class="navbar-menu ${this.navMenuShown?"is-active":""}"
>
<div class="navbar-start">
${pe?T`
<a
role="button"
href="#"
class="navbar-item arrow-button"
title="Go Back"
@click="${()=>window.history.back()}"
@keyup="${ge}"
>
<fa-icon
size="1.0rem"
.svg="${$e()}"
aria-hidden="true"
></fa-icon
><span class="menu-only is-size-7">&nbsp;Go Back</span>
</a>
<a
role="button"
href="#"
class="navbar-item arrow-button"
title="Go Forward"
@click="${()=>window.history.forward()}"
@keyup="${ge}"
>
<fa-icon
size="1.0rem"
.svg="${Se()}"
aria-hidden="true"
></fa-icon
><span class="menu-only is-size-7"
>&nbsp;Go Forward</span
>
</a>
`:""}
</div>
${this.embed?T``:T` <div class="navbar-end">${this.renderNavEnd()}</div>`}
</div>`}
</nav>
<p id="skip-main-target" tabindex="-1" class="is-sr-only">Skipped</p>`}renderNavEnd(){return T` <a href="/docs" target="_blank" class="navbar-item is-size-6">
<fa-icon .svg="${ke()}" aria-hidden="true"></fa-icon
><span>&nbsp;User Docs</span>
</a>
<!--
-- NB: the About modal is currently inaccessible to people using keyboards or screen readers.
-- Should all the JS and infrastructure for accessible modals be added, or should About be a normal page?
-->
<a
href="?terms"
@click="${e=>{e.preventDefault(),this.showAbout=!0}}"
class="navbar-item is-size-6"
>About
</a>`}renderColl(){return T` <wr-coll
.loadInfo="${this.loadInfo}"
sourceUrl="${this.sourceUrl}"
embed="${this.embed}"
appName="${this.appName}"
swName="${this.swName}"
.appLogo="${this.mainLogo}"
@replay-favicons=${this.onFavIcons}
@update-title=${this.onTitle}
@coll-loaded=${this.onCollLoaded}
@about-show=${()=>this.showAbout=!0}
></wr-coll>`}renderHomeIndex(){return T` <wr-coll-index>
${pe?"":T`
<p slot="header" class="tagline is-size-5 has-text-centered">
Explore and Replay Interactive Archived Webpages Directly in your
Browser.
<i
><a target="_blank" href="./docs/examples">(See Examples)</a></i
>
</p>
`}
<wr-chooser
slot="header"
.droppedFile=${this.droppedFile}
@did-drop-file="${()=>this.droppedFile=null}"
@load-start=${this.onStartLoad}
></wr-chooser>
</wr-coll-index>`}render(){return this.inited?this.embed&&this.swErrorMsg?this.swErrorMsg:T`
${this.embed&&"full"!==this.embed?"":this.renderNavBar()}
${this.sourceUrl?this.renderColl():this.renderHomeIndex()}
${this.showAbout?this.renderAbout():""}
${this.showFileDropOverlay?this.renderDropFileOverlay():""}
`:T``}firstUpdated(){this.initRoute();let e=this.swName;const t=new URLSearchParams;let i="";this.useRuffle&&t.set("injectScripts","ruffle/ruffle.js"),this.embed&&t.set("serveIndex","1"),i=t.toString(),i.length&&(e+="?"+i),this.swmanager=new Ee({name:e,appName:this.appName}),this.swmanager.register().catch((()=>this.swErrorMsg=this.swmanager.renderErrorReport(this.mainLogo))),window.addEventListener("popstate",(()=>{this.initRoute()}))}updated(e){e.has("sourceUrl")&&(this.collTitle=null)}onFavIcons(e){const t=document.querySelector("head"),i=document.querySelectorAll("link[rel*='icon']");for(const e of i)t.removeChild(e);for(const i of e.detail.icons){const e=document.createElement("link");e.rel=i.rel,e.href=i.href,t.appendChild(e)}}skipMenu(e){e.preventDefault(),this.renderRoot.querySelector("#skip-main-target").focus()}onNavMenu(e){e.preventDefault(),e.stopPropagation(),this.navMenuShown=!this.navMenuShown,this.navMenuShown&&(document.addEventListener("click",(e=>{e.preventDefault(),this.navMenuShown=!1,this.renderRoot.querySelector("#menu-button").focus()}),{once:!0}),document.addEventListener("keypress",(e=>{"Escape"==e.key&&(e.preventDefault(),this.navMenuShown=!1,this.renderRoot.querySelector("#menu-button").focus())}),{once:!0}))}initRoute(){this.inited=!0,this.pageParams=new URLSearchParams(window.location.search);let e=this.pageParams.get("state");if(e)try{if(e=JSON.parse(e),e.ids instanceof Array&&e.userId&&"open"===e.action)return this.pageParams.set("source","googledrive://"+e.ids[0]),this.pageParams.delete("state"),void(window.location.search=this.pageParams.toString())}catch(e){console.log(e)}if(this.source){this.pageParams.set("source",this.source);const e=new URL(window.location.href);e.search=this.pageParams.toString(),window.history.replaceState({},document.title,e.href)}if(this.sourceUrl=this.pageParams.get("source")||"",this.embed=this.pageParams.get("embed")||"",this.embed?this.useRuffle="1"===this.pageParams.get("ruffle"):this.useRuffle=!this.skipRuffle,this.pageParams.has("terms")&&(this.showAbout=!0),this.pageParams.has("embed")&&(this.loadInfo||(this.loadInfo={})),this.pageParams.get("config"))try{this.loadInfo.extraConfig=JSON.parse(this.pageParams.get("config"))}catch(e){console.log("invalid config: "+e)}this.pageParams.get("baseUrlSourcePrefix")&&(this.loadInfo.extraConfig=this.loadInfo.extraConfig||{},this.loadInfo.extraConfig.baseUrlSourcePrefix=this.pageParams.get("baseUrlSourcePrefix")),this.pageParams.get("basePageUrl")&&(this.loadInfo.extraConfig=this.loadInfo.extraConfig||{},this.loadInfo.extraConfig.baseUrl=this.pageParams.get("basePageUrl")),this.pageParams.get("customColl")&&(this.loadInfo.customColl=this.pageParams.get("customColl")),"1"===this.pageParams.get("noWebWorker")&&(this.loadInfo.noWebWorker=!0),"1"===this.pageParams.get("noCache")&&(this.loadInfo.noCache=!0),"1"===this.pageParams.get("hideOffscreen")&&(this.loadInfo.hideOffscreen=!0),"eager"===this.pageParams.get("loading")&&(this.loadInfo.loadEager=!0),this.pageParams.get("swName")&&(this.swName=this.pageParams.get("swName")),pe&&this.sourceUrl.startsWith("file://")&&(this.loadInfo={sourceUrl:this.sourceUrl,loadUrl:this.sourceUrl.replace("file://","file2://")})}onStartLoad(e){this.pageParams.set("source",e.detail.sourceUrl);const t=new URL(window.location.href);t.search=this.pageParams.toString(),this.collPageUrl=t.toString(),e.detail.isFile?(window.history.pushState({},"",this.collPageUrl),this.sourceUrl=e.detail.sourceUrl,this.loadInfo=e.detail):window.location.search=this.pageParams.toString()}onCollLoaded(e){this.loadInfo=null,e.detail.collInfo&&(this.collTitle=e.detail.collInfo.name||e.detail.collInfo.title),e.detail.alreadyLoaded||e.detail.sourceUrl!==this.sourceUrl&&(this.pageParams.set("source",e.detail.sourceUrl),window.location.search=this.pageParams.toString())}onTitle(e){e.detail.title&&(this.pageTitle=e.detail.title,this.pageReplay=e.detail.replayTitle,document.title=(e.detail.replayTitle?"Archive of ":"")+this.pageTitle+" | "+this.appName)}safariKeyframes(){const e=document.createElement("style");docum
<div class="modal is-active">
<div class="modal-background" @click="${this.onAboutClose}"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">About ReplayWeb.page ${pe?"App":""}</p>
<button class="delete" aria-label="close" @click="${this.onAboutClose}"></button>
</header>
<section class="modal-card-body">
<div class="container">
<div class="content">
<div style="display: flex">
<div class="has-text-centered" style="width: 220px">
<wr-anim-logo class="logo" size="48px"></wr-anim-logo>
<div style="font-size: smaller; margin-bottom: 1em">${pe?"App":""} v${me}</div>
</div>
${pe?T`
<p>
ReplayWeb.page App is a standalone app for Mac,
Windows and Linux that loads web archive files
provided by the user and renders them for replay.
</p>
`:T` <p>
<a href="https://replayweb.page" target="_blank"
>ReplayWeb.page</a
>
is a browser-based viewer that loads web archive
files provided by the user and renders them for
replay in the browser.
</p>`}
</div>
<p>Full source code is available at:
<a href="https://github.com/webrecorder/replayweb.page" target="_blank">https://github.com/webrecorder/replayweb.page</a>
</p>
<p>See the <a target="_blank" href="./docs">User Docs</a> or the GitHub README for more info on how it works.</p>
<p>ReplayWeb.page is part of the <a href="https://webrecorder.net/" target="_blank">Webrecorder Project</a>.</p>
<h3>Privacy</h3>
<p><b>No data is uploaded anywhere and no information is collected.</b></p>
<p>All content rendered stays directly in your browser.<br/>When loading an archive from Google Drive,
the site may ask for account authorization to download the specified file only.</p>
<h4>Disclaimer of Warranties</h4>
<p>The application is provided "as is" without any guarantees.</p>
<details>
<summary>Legalese:</summary>
<p style="font-size: 0.8rem">DISCLAIMER OF SOFTWARE WARRANTY. WEBRECORDER SOFTWARE PROVIDES THIS SOFTWARE TO YOU "AS AVAILABLE"
AND WITHOUT WARRANTY OF ANY KIND, EXPRESS, IMPLIED OR OTHERWISE,
INCLUDING WITHOUT LIMITATION ANY WARRANTY OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE.
</details>
<div class="has-text-centered">
<a class="button is-warning" href="#" @click="${this.onAboutClose}">Close</a>
</div>
</div>
</div>
</section>
</div>
</div>
</div>`}onAboutClose(){this.showAbout=!1}renderDropFileOverlay(){return T`
<div class="drop-file-overlay">Drop to load web archive</div>
`}}customElements.define("replay-app-main",Ie);var Pe=__webpack_require__(135),Le=__webpack_require__.n(Pe);class Te extends X{constructor(){super(),this.fileDisplayName="",this.file=null,this.droppedFile=null,this.hasNativeFS=!!window.showOpenFilePicker&&!pe,this.newFullImport=!1,this.noHead=!1,this.showOpenFilePickerOptions={types:[{description:"WARC, WACZ, HAR and WBN Files",accept:{"application/warc":[".warc",".gz"],"application/har":[".har"],"application/wacz":[".wacz"],"application/wbn":[".wbn"],"application/json":[".json"]}}]}}static get properties(){return{fileDisplayName:{type:String},droppedFile:{type:File},newFullImport:{type:Boolean},noHead:{type:Boolean}}}updated(e){e.has("droppedFile")&&this.droppedFile&&this.onDropFile()}onDropFile(){this.showOpenFilePickerOptions.types.map((e=>e.accept)).map(Object.values).flat(2).some((e=>this.droppedFile.name.endsWith(e)))&&(this.setFile(this.droppedFile),this.dispatchEvent(new CustomEvent("did-drop-file",{bubbles:!0,composed:!0})),this.onStartLoad())}onChooseFile(e){0!==e.currentTarget.files.length&&this.setFile(e.currentTarget.files[0])}setFile(e){this.file=e,this.fileDisplayName="file://"+(this.file.path||this.file.name)}async onChooseNativeFile(){if(!this.hasNativeFS)return;const[e]=await window.showOpenFilePicker(this.showOpenFilePickerOptions);this.fileHandle=e,this.file=await e.getFile(),this.fileDisplayName="file://"+e.name}randomId(){return Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)}onStartLoad(e){e&&e.preventDefault();const t={sourceUrl:this.fileDisplayName};return this.file&&(t.isFile=!0,this.file.path?(t.loadUrl="file2://"+this.file.path,t.noCache=!0):this.fileHandle?(t.loadUrl=this.fileDisplayName,t.extra={fileHandle:this.fileHandle},t.noCache=!1):(t.loadUrl=URL.createObjectURL(this.file),t.blob=this.file,t.noCache=!1),t.size=this.file.size,t.name=this.fileDisplayName),t.newFullImport=this.newFullImport,this.dispatchEvent(new CustomEvent("load-start",{bubbles:!0,composed:!0,detail:t})),!1}onInput(e){this.fileDisplayName=e.currentTarget.value,this.file&&this.fileDisplayName&&this.fileDisplayName.startsWith("file://")&&(this.file=null,this.fileDisplayName="")}static get styles(){return ue(o`
:host {
min-width: 0;
}
.extra-padding {
padding: 1.5em;
}
.less-padding {
padding-top: 1em;
padding-bottom: 1em;
}
div.field.has-addons {
flex: auto;
}
.panel-heading {
background-color: #cff3ff;
}
.message-header {
background-color: #cff3ff;
color: black;
}
.heading-size {
font-size: 0.85rem;
}
form {
flex-grow: 1;
flex-shrink: 0;
margin-bottom: 0;
}
p.control.is-expanded {
width: min-content;
}
input.input.file-name:invalid {
border: 1px dashed red;
}
input.input.file-name {
border-width: 1px;
margin-left: -1px;
max-width: 100%;
}
@media screen and (max-width: 1023px) {
.file-icon {
margin-right: 0px;
}
}
@media screen and (max-width: 768px) {
#filename {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
}
`)}render(){return T` <section
class="section ${this.noHead?"is-paddingless":"less-padding"}"
>
<div class="${this.noHead?"":"panel"}">
<div
class="${this.noHead?"is-hidden":"panel-heading"} heading-size"
>
${this.newFullImport?"Import Existing":"Load"} Web Archive
</div>
<div
class="${this.noHead?"":"panel-body extra-padding"} file has-name"
>
<form class="is-flex" @submit="${this.onStartLoad}">
<label class="file-label">
${this.hasNativeFS?"":T` <input
class="file-input"
@click="${e=>e.currentTarget.value=null}"
@change=${this.onChooseFile}
type="file"
id="fileupload"
name="fileupload"
/>`}
<span class="file-cta" @click="${this.onChooseNativeFile}">
<span class="file-icon">
<fa-icon
size="0.9em"
.svg=${Le()}
aria-hidden="true"
></fa-icon>
</span>
<span class="file-label is-hidden-touch"> Choose File... </span>
</span>
</label>
<div class="field has-addons">
<p class="control is-expanded">
<input
class="file-name input"
type="text"
name="filename"
id="filename"
pattern="((file|http|https|ipfs|s3)://.*.(warc|warc.gz|zip|wacz|har|wbn|json)([?#].*)?)|(googledrive://.+)|(ssb://.+)"
.value="${this.fileDisplayName}"
@input="${this.onInput}"
autocomplete="off"
placeholder="${this.newFullImport?"Click 'Choose File' to select a local archive to import":"Enter a URL or click 'Choose File' to select a WARC, WACZ, HAR or WBN archive source"}"
/>
</p>
<div class="control">
<button
type="submit"
class="button is-hidden-mobile is-primary"
>
${this.newFullImport?"Import":"Load"}
</button>
</div>
</div>
</form>
</div>
</div>
</section>`}}customElements.define("wr-chooser",Te);var Ue=__webpack_require__(600),Re=__webpack_require__.n(Ue),qe=__webpack_require__(734),Me=__webpack_require__.n(qe),je=__webpack_require__(921),Oe=__webpack_require__.n(je),Ne=__webpack_require__(536),Be=__webpack_require__.n(Ne),Fe=__webpack_require__(804),He=__webpack_require__.n(Fe);class We extends X{constructor(){super(),this.colls=[],this.filteredColls=[],this.sortedColls=null,this.query="",this.hideHeader="1"===localStorage.getItem("index:hideHeader"),this._deleting={},this.dateName="Date Loaded",this.headerName="Loaded Archives",this.typeFilter="",this.indexParams=""}get sortKeys(){return[{key:"title",name:"Title"},{key:"sourceUrl",name:"Source"},{key:"ctime",name:this.dateName},{key:"size",name:"Total Size"}]}static get properties(){return{colls:{type:Array},query:{type:String},filteredColls:{type:Array},sortedColls:{type:Array},hideHeader:{type:Boolean},_deleting:{type:Object},dateName:{type:String},headerName:{type:String}}}firstUpdated(){this.loadColls()}updated(e){e.has("hideHeader")&&localStorage.setItem("index:hideHeader",this.hideHeader?"1":"0"),(e.has("colls")||e.has("query"))&&this.filter()}filter(){if(this.query){this.filteredColls=[];for(const e of this.colls)(e.sourceUrl.indexOf(this.query)>=0||e.filename.indexOf(this.query)>=0||e.loadUrl&&e.loadUrl.indexOf(this.query)>=0||e.title&&e.title.indexOf(this.query)>=0)&&this.filteredColls.push(e)}else this.filteredColls=this.colls}async loadColls(){const e=await fetch(`./w/api/coll-index?${this.indexParams}`);try{if(200!==e.status)throw new Error("Invalid API Response, Retry");const t=await e.json();this.colls=t.colls.map((e=>(e.title=e.title||e.filename,e))),this._deleting={},this.sortedColls=[]}catch(e){setTimeout((()=>this.loadColls()),500)}}async onDeleteColl(e){if(e.preventDefault(),e.stopPropagation(),!this.sortedColls)return;const t=Number(e.currentTarget.getAttribute("data-coll-index")),i=this.sortedColls[t];if(!i||this._deleting[i.sourceUrl])return;this._deleting[i.sourceUrl]=!0,this.requestUpdate();const a=await fetch(`./w/api/c/${i.id}`,{method:"DELETE"});if(200===a.status){const e=await a.json();this.colls=e.colls}return!1}static get styles(){return ue(We.compStyles)}static get compStyles(){return o`
:host {
overflow-y: auto;
min-width: 0;
}
.size {
margin-right: 20px;
}
.extra-padding {
padding: 2em;
}
.no-top-padding {
padding-top: 1em;
}
.panel-heading {
font-size: 0.85rem;
}
.is-loading {
line-height: 1.5em;
height: 1.5em;
border: 0px;
background-color: transparent !important;
width: auto;
}
div.panel.is-light {
margin-bottom: 2em;
}
fa-icon {
vertical-align: middle;
}
.panel-color {
background-color: rgb(210, 249, 214);
}
.copy {
color: black;
margin: 0px;
margin: 0;
line-height: 0.4em;
padding: 6px;
border-radius: 10px;
display: none;
position: absolute;
}
.copy:active {
background-color: lightgray;
}
.sort-header {
padding: 0.3rem 0.3rem 0.3rem 0;
display: flex;
flex-direction: row;
flex-flow: row wrap;
}
.sort-header .control {
flex: auto;
padding-left: 0.3rem;
width: initial;
}
wr-sorter {
padding: 0.3rem;
}
a.button.is-small.collapse {
border-radius: 6px;
}
.icon.is-left {
margin-left: 0.5rem;
}
.coll-block {
position: relative;
}
.delete-button {
width: 32px;
position: absolute;
top: 10px;
right: 10px;
}
#sort-select::after {
display: none;
}
header {
transform: translate(0px, 0px);
transition: all 0.5s ease 0s;
visibility: visible;
display: flex;
flex-direction: column;
}
header.closed {
transform: translate(0, -100%);
transition: all 0.5s ease 0s;
visibility: visible;
height: 269px;
margin-top: -269px;
}
`}renderHeader(){return T`<h2 class="panel-heading panel-color">
<span>${this.headerName}</span>
</h2>`}renderSearchHeader(){return""}render(){const e=this.childElementCount>0;return T`
<header class="${this.hideHeader?"closed":""}">
<slot name="header"></slot>
</header>
<section class="section no-top-padding">
<div class="sort-header is-small">
${e?T`
<button @click=${()=>this.hideHeader=!this.hideHeader} class="collapse button is-small">
<span class="icon"><fa-icon .svg=${this.hideHeader?Be():Oe()}></span>
<span>${this.hideHeader?"Show ":"Hide"} <span class="is-sr-only">Header</span></span>
</button>`:""}
</div>
<div class="panel">
${this.renderHeader()}
${this.colls.length?T`
<div class="panel-block sort-header is-small">
${this.renderSearchHeader()}
<div class="control has-icons-left has-addons">
<input
type="text"
class="input is-small"
@input="${e=>this.query=e.currentTarget.value}"
.value="${this.query}"
placeholder="Search by Archive Title or Source"
/>
<span class="icon is-left is-small">
<fa-icon .svg="${He()}"></fa-icon>
</span>
</div>
<wr-sorter
id="index"
sortKey="ctime"
?sortDesc="${!0}"
.sortKeys="${this.sortKeys}"
.data="${this.filteredColls}"
@sort-changed="${e=>this.sortedColls=e.detail.sortedData}"
>
</wr-sorter>
</div>
<div class="coll-list">
${this.sortedColls&&this.sortedColls.map(((e,t)=>T`
<div class="coll-block panel-block">
${this.renderCollInfo(e)}
${this._deleting[e.sourceUrl]?T` <span
class="button delete-button is-loading is-static"
>
Deleting
</span>`:T`
<button
class="delete delete-button"
aria-label="Unload Collection"
title="Unload Collection"
data-coll-index="${t}"
@click="${this.onDeleteColl}"
></button>
`}
</div>
`))}
</div>
`:T`
<div class="panel-block extra-padding">
${null===this.sortedColls?T`<i>Loading Archives...</i>`:this.renderEmpty()}
</div>
`}
</div>
</section>
`}renderCollInfo(e){return T`<wr-coll-info .coll=${e}></wr-coll-info>`}renderEmpty(){return T`<i
>No Archives so far! Archives loaded in the section above will appear
here.</i
>`}}class Ge extends X{constructor(){super(),this.detailed=!1,this.canDelete=!1}static get properties(){return{coll:{type:Object},detailed:{type:Boolean},canDelete:{type:Boolean}}}static get styles(){return ue(Ge.compStyles)}static get compStyles(){return o`
.columns {
width: 100%;
}
.column {
word-break: break-word;
position: relative;
}
:host {
width: 100%;
height: 100%;
min-width: 0px;
}
:host(.is-list) .columns {
display: flex !important;
flex-direction: column;
}
:host(.is-list) .column {
width: 100% !important;
}
.col-title:hover {
}
.col-title a {
display: block;
height: 100%;
}
.column:hover > .copy,
.source-text:hover + .copy,
.copy:hover {
display: inline;
}
.copy {
color: black;
margin: 0px;
margin: 0;
line-height: 0.4em;
padding: 6px;
border-radius: 10px;
display: none;
position: absolute;
}
.copy:active {
background-color: lightgray;
}
.minihead {
font-size: 10px;
font-weight: bold;
}
`}renderSource(e){return T`
<div class="column is-4">
<span class="source-text"
><p class="minihead">Source</p>
${e.sourceUrl&&(e.sourceUrl.startsWith("http://")||e.sourceUrl.startsWith("https://"))?T` <a href="${e.sourceUrl}">${e.sourceUrl}&nbsp;</a>`:T` ${e.sourceUrl}&nbsp;`}
</span>
<a @click="${t=>this.onCopy(t,e.sourceUrl)}" class="copy">
<fa-icon .svg="${Me()}"></fa-icon>
</a>
${e.sourceUrl&&e.sourceUrl.startsWith("googledrive://")?T` <p><i>(${e.filename})</i></p>`:""}
</div>
<div class="column is-2">
<p class="minihead">Date Loaded</p>
${e.ctime?new Date(e.ctime).toLocaleString():""}
</div>
<div class="column is-2">
<p class="minihead">Total Size</p>
${Re()(Number(e.totalSize||e.size||0))}
</div>
`}renderSummaryView(){const e=this.coll;return T` <div class="columns">
<div class="column col-title is-4">
<span class="subtitle has-text-weight-bold">
<a href="?source=${encodeURIComponent(e.sourceUrl)}"
>${e.name||e.title||e.filename}</a
>
</span>
</div>
${this.renderSource(e)}
</div>`}renderDetailed(){const e=this.coll;let{numValid:t,numInvalid:i,domain:a,certFingerprint:r,datapackageHash:o,publicKey:n,software:s}=this.coll.verify||{};t=t||0,i=i||0;const l=r?`https://crt.sh/?q=${r}`:"";return T` <div class="columns">
<div class="column col-title is-4">
<span class="subtitle has-text-weight-bold">
${e.name||e.title||e.filename}
</span>
</div>
${e.desc?T` <div class="column">
<p class="minihead">Description</p>
${e.desc}
</div>`:T``}
${e.description?T`<div class="column">
<p class="minihead">Description</p>
${e.description}
</div>`:T``}
<!-- Only show filename if coll.resources doesn't exist -->
${e.resources?T`<div class="column">
<p class="minihead">Files</p>
<ol style="padding: revert">
${
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
function*(e,t){if(void 0!==e){let i=0;for(const a of e)yield t(a,i++)}}(e.resources,(e=>T`<li>
<a href="${e.path}">${e.name+"\n"}</a>
</li>`))}
</ol>
</div>`:T`<div class="column">
<p class="minihead">Filename</p>
${e.filename}
</div>`}
${this.renderSource(e)}
${a?T`
<div class="column">
<p class="minihead">Observed By</p>
<p>${a}</p>
${l?T`<span
><a target="_blank" href="${l}"
>View Certificate</a
></span
>`:""}
</div>
`:s?T`
<div class="column">
<p class="minihead">Created With</p>
${s||"Unknown"}
</div>
`:""}
<div class="column">
<p class="minihead">Validation</p>
${t>0||i>0?T` <p>
${t} hashes
verified${i?T`, ${i} invalid`:""}
</p>`:T` Not Available`}
</div>
<div class="column">
<p class="minihead">Package Hash</p>
${o||"Not Available"}
</div>
<div class="column">
<p class="minihead">Observer Public Key</p>
${n||"Not Available"}
</div>
<div class="column">
<p class="minihead">Loading Mode</p>
${e.onDemand?"Download On-Demand":"Fully Local"}
</div>
<div class="column">
<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){try{new URL(e)}catch(t){e=new URL(e,document.baseURI).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__(56),Xe=__webpack_require__.n(Ye),et=__webpack_require__(732),tt=__webpack_require__.n(et),it=__webpack_require__(561),at=__webpack_require__.n(it),rt=__webpack_require__(885),ot=__webpack_require__.n(rt),nt=__webpack_require__(636),st=__webpack_require__.n(nt),lt=__webpack_require__(615),ct=__webpack_require__.n(lt),dt=__webpack_require__(302),ht=__webpack_require__.n(dt),ft=__webpack_require__(368),bt=__webpack_require__.n(ft),ut=__webpack_require__(125),pt=__webpack_require__.n(ut),mt=__webpack_require__(998),gt=__webpack_require__.n(mt),vt=__webpack_require__(164),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__(795),St=__webpack_require__.n(_t),zt=__webpack_require__(529),Ct=__webpack_require__.n(zt),At=__webpack_require__(873),Dt=__webpack_require__.n(At),Et=__webpack_require__(575),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;
}
.icon {
vertical-align: text-top;
}
#embed-dropdown {
max-height: calc(100vh - 50px);
padding-top: 0;
margin-top: -0.5rem;
display: block;
z-index: 1;
pointer-events: none;
transition: all 0.3s linear;
transform-origin: left top;
transform: scaleY(0);
transition: all 300ms cubic-bezier(0.15, 0, 0.1, 1);
filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.15));
}
.dropdown.is-active #embed-dropdown {
transform: scaleY(1);
}
.embed-info-container {
width: 100%;
display: flex !important;
justify-content: center;
}
button.embed-info {
padding: 0;
background-color: white;
justify-content: space-between;
max-width: 40rem;
width: calc(100% - 1rem);
height: 42px;
border-color: #d1d5da;
border-width: 1px;
border-style: solid;
border-radius: 999px;
display: flex;
align-items: center;
text-overflow: ellipsis;
filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.15));
transition-duration: 50ms;
transition-timing-function: ease-out;
cursor: pointer;
z-index: 2;
}
button.embed-info:active {
color: initial;
}
button.embed-info:hover {
filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
transform: scale(1.01);
}
button.embed-info:hover:active {
transform: translateY(0.25rem);
}
.embed-info-buttontext {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
text-align: start;
font-size: 13px;
}
.embed-info-drop {
font-size: 14px;
padding: 1rem;
padding-top: 2rem;
max-width: 38rem;
max-height: 42rem;
width: calc(100% - 2rem);
border-top-right-radius: 0px;
border-top-left-radius: 0px;
pointer-events: auto;
overflow-y: auto;
}
.embed-info-drop > p {
font-size: 14px;
color: black;
}
.embed-info-drop > h2 {
margin-bottom: 0.25rem;
font-size: 16px;
font-weight: bold;
text-transform: none;
letter-spacing: 0;
color: #24292e;
}
.embed-info-drop-statscontainer > h3 {
font-size: 12px;
color: #394146;
}
.embed-info-drop-statscontainer > p {
font-size: 14px;
color: black;
}
.embed-info-drop a {
word-break: break-all;
}
.embed-info-drop .show-hash {
word-break: break-all;
font-family: monospace;
}
.embed-info-drop .show-key {
text-overflow: ellipsis;
overflow: hidden;
whitespace: nowrap;
font-family: monospace;
}
.embed-globe {
margin: 0.25rem;
padding: 7px;
background-color: #0366d6;
border-radius: 9999px;
color: white;
border-width: 1px;
border-color: #d1d5da;
border-style: solid;
line-height: 0.5em;
}
`}render(){let{numValid:e,numInvalid:t,domain:i,certFingerprint:a,datapackageHash:r,publicKey:o,software:n}=this.collInfo.verify||{};e=e||0,t=t||0;const s=this.collInfo.sourceUrl,l=a?`https://crt.sh/?q=${a}`:"",c=Ke(this.ts).toLocaleString();return T`
<div class="dropdown mb-4 ${this.active?"is-active":""}">
<div class="dropdown-trigger embed-info-container">
<button
class="embed-info is-small is-rounded mt-4"
aria-haspopup="true"
aria-controls="embed-dropdown"
@click="${this.onEmbedDrop}"
>
<fa-icon
class="menu-logo mr-2 embed-globe"
size="1rem"
aria-hidden="true"
.svg=${St()}
></fa-icon>
<span class="embed-info-buttontext">
This embed is part of a web archive. Click here to learn more.
</span>
<span class="icon is-small mr-4 ml-2">
<fa-icon
title="Toggle"
.svg="${this.active?Dt():Ct()}"
aria-hidden="true"
></fa-icon>
</span>
</button>
</div>
<div
class="dropdown-menu embed-info-container"
id="embed-dropdown"
role="menu"
>
<div class="dropdown-content embed-info-drop">
<p class="mb-4">
Even if the original page goes offline or is changed, the content
below will remain unchanged as it is loaded from a web archive.
</p>
<hr class="dropdown-divider" />
<h2 class="mt-4">Get A Copy!</h2>
<p class="mt-2">
After downloading, this web archive can be loaded and viewed
directly in your browser via
<a
style="white-space: nowrap;"
target="_blank"
href="https://replayweb.page"
>replayweb.page</a
>.
</p>
<a
href="${s}"
class="button is-primary mt-4"
@keyup="${ge}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
aria-hidden="true"
.svg="${tt()}"
></fa-icon>
</span>
<span>Download Archive</span>
</a>
<hr class="dropdown-divider mt-4" />
<h2 class="mt-4">Technical Information</h2>
<div class="embed-info-drop-statscontainer mb-4">
<h3>Original URL:</h3>
<p><a target="_blank" href="${this.url}">${this.url}</a></p>
<h3 class="mt-2">Archived On:</h3>
<p>${c}</p>
${i?T`
<h3 class="mt-2">Observed By:</h3>
<p>${i}</p>
${l?T` <p>
<a target="_blank" href="${l}"
>View Certificate</a
>
</p>`:""}
`:n?T` <h3 class="mt-2">Created With:</h3>
<p>${n}</p>`:""}
${!i&&o?T` <h3 class="mt-2">Observer Public Key:</h3>
<p class="show-key">${o}</p>`:""}
<h3 class="mt-2">Validation:</h3>
${e>0||t>0?T` <p>
${e} hashes
verified${t?T`, ${t} invalid`:""}
</p>`:T` <p>Not Available</p> `}
<h3 class="mt-2">Package Hash:</h3>
<p class="show-hash">${r}</p>
<h3 class="mt-2">Size</h3>
<p>${Re()(Number(this.collInfo.size||0))}</p>
</div>
${s?T``:""}
<p
class="is-size-7 is-flex is-justify-content-space-between"
style="margin-top: 40px"
>
<span>
<a
class="has-text-black"
target="_blank"
href="https://github.com/webrecorder/replayweb.page"
>
<fa-icon
class="menu-logo mr-1"
size="1.0rem"
aria-hidden="true"
.svg=${this.appLogo}
></fa-icon>
Powered by ReplayWeb.page
</a>
</span>
<span>
<a
class="has-text-black"
target="_blank"
href="https://github.com/webrecorder/replayweb.page"
>Source Code
<fa-icon
class="menu-logo ml-1"
size="1.0rem"
aria-hidden="true"
.svg=${It()}
></fa-icon>
</a>
</span>
</p>
</div>
</div>
</div>
`}onEmbedDrop(e){e.stopPropagation(),this.active=!this.active}}customElements.define("rwp-embed-receipt",Pt);var Lt="undefined"!=typeof window?window:null,Tt=null===Lt,Ut=Tt?void 0:Lt.document,Rt="horizontal",qt=function(){return!1},Mt=Tt?"calc":["","-webkit-","-moz-","-o-"].filter((function(e){var t=Ut.createElement("div");return t.style.cssText="width:"+e+"calc(9px)",!!t.style.length})).shift()+"calc",jt=function(e){return"string"==typeof e||e instanceof String},Ot=function(e){if(jt(e)){var t=Ut.querySelector(e);if(!t)throw new Error("Selector "+e+" did not match a DOM element");return t}return e},Nt=function(e,t,i){var a=e[t];return void 0!==a?a:i},Bt=function(e,t,i,a){if(t){if("end"===a)return 0;if("center"===a)return e/2}else if(i){if("start"===a)return 0;if("center"===a)return e/2}return e},Ft=function(e,t){var i=Ut.createElement("div");return i.className="gutter gutter-"+t,i},Ht=function(e,t,i){var a={};return jt(t)?a[e]=t:a[e]=Mt+"("+t+"% - "+i+"px)",a},Wt=function(e,t){var i;return(i={})[e]=t+"px",i};const Gt=function(e,t){if(void 0===t&&(t={}),Tt)return{};var i,a,r,o,n,s,l=e;Array.from&&(l=Array.from(l));var c=Ot(l[0]).parentNode,d=getComputedStyle?getComputedStyle(c):null,h=d?d.flexDirection:null,f=Nt(t,"sizes")||l.map((function(){return 100/l.length})),b=Nt(t,"minSize",100),u=Array.isArray(b)?b:l.map((function(){return b})),p=Nt(t,"maxSize",1/0),m=Array.isArray(p)?p:l.map((function(){return p})),g=Nt(t,"expandToMin",!1),v=Nt(t,"gutterSize",10),w=Nt(t,"gutterAlign","center"),x=Nt(t,"snapOffset",30),k=Nt(t,"dragInterval",1),y=Nt(t,"direction",Rt),$=Nt(t,"cursor",y===Rt?"col-resize":"row-resize"),_=Nt(t,"gutter",Ft),S=Nt(t,"elementStyle",Ht),z=Nt(t,"gutterStyle",Wt);function C(e,t,a,r){var o=S(i,t,a,r);Object.keys(o).forEach((function(t){e.style[t]=o[t]}))}function A(){return s.map((function(e){return e.size}))}function D(e){return"touches"in e?e.touches[0][a]:e[a]}function E(e){var t=s[this.a],i=s[this.b],a=t.size+i.size;t.size=e/this.size*a,i.size=a-e/this.size*a,C(t.element,t.size,this._b,t.i),C(i.element,i.size,this._c,i.i)}function I(e){var i,a=s[this.a],r=s[this.b];this.dragging&&(i=D(e)-this.start+(this._b-this.dragOffset),k>1&&(i=Math.round(i/k)*k),i<=a.minSize+x+this._b?i=a.minSize+this._b:i>=this.size-(r.minSize+x+this._c)&&(i=this.size-(r.minSize+this._c)),i>=a.maxSize-x+this._b?i=a.maxSize+this._b:i<=this.size-(r.maxSize-x+this._c)&&(i=this.size-(r.maxSize+this._c)),E.call(this,i),Nt(t,"onDrag",qt)(A()))}function P(){var e=s[this.a].element,t=s[this.b].element,a=e.getBoundingClientRect(),n=t.getBoundingClientRect();this.size=a[i]+n[i]+this._b+this._c,this.start=a[r],this.end=a[o]}function L(e){var t=function(e){if(!getComputedStyle)return null;var t=getComputedStyle(e);if(!t)return null;var i=e[n];return 0===i?null:i-=y===Rt?parseFloat(t.paddingLeft)+parseFloat(t.paddingRight):parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}(c);if(null===t)return e;if(u.reduce((function(e,t){return e+t}),0)>t)return e;var i=0,a=[],r=e.map((function(r,o){var n=t*r/100,s=Bt(v,0===o,o===e.length-1,w),l=u[o]+s;return n<l?(i+=l-n,a.push(0),l):(a.push(n-l),n)}));return 0===i?e:r.map((function(e,r){var o=e;if(i>0&&a[r]-i>0){var n=Math.min(i,a[r]-i);i-=n,o=e-n}return o/t*100}))}function T(){var e=this,i=s[e.a].element,a=s[e.b].element;e.dragging&&Nt(t,"onDragEnd",qt)(A()),e.dragging=!1,Lt.removeEventListener("mouseup",e.stop),Lt.removeEventListener("touchend",e.stop),Lt.removeEventListener("touchcancel",e.stop),Lt.removeEventListener("mousemove",e.move),Lt.removeEventListener("touchmove",e.move),e.stop=null,e.move=null,i.removeEventListener("selectstart",qt),i.removeEventListener("dragstart",qt),a.removeEventListener("selectstart",qt),a.removeEventListener("dragstart",qt),i.style.userSelect="",i.style.webkitUserSelect="",i.style.MozUserSelect="",i.style.pointerEvents="",a.style.userSelect="",a.style.webkitUserSelect="",a.style.MozUserSelect="",a.style.pointerEvents="",e.gutter.style.cursor="",e.parent.style.cursor="",Ut.body.style.cursor=""}function U(e){if(!("button"in e)||0===e.button){var i=this,a=s[i.a].element
:host {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0px;
}
.icon {
vertical-align: text-top;
}
.back fa-icon {
width: 1.5em;
vertical-align: bottom;
line-height: 0.5em;
}
li.is-active {
font-weight: bold;
}
.tab-label {
display: inline;
}
@media screen and (max-width: ${pe?o`1163px`:o`1053px`}) {
.tab-label {
display: none;
}
.main.tabs span.icon {
margin: 0px;
}
}
.main.tabs {
display: flex;
flex-direction: row;
margin-bottom: 0px;
}
.main.tabs ul {
position: relative;
}
.main.tabs li {
line-height: 1.5;
padding: 8px 0 6px 0;
}
@media screen and (max-width: 319px) {
.main.tabs li a {
padding-right: 4px;
padding-left: 4px;
}
}
.sidebar.main.tabs li a {
padding-right: 6px;
padding-left: 6px;
}
#contents {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
min-height: 0px;
flex: auto;
background-color: white;
}
#tabContents {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
min-height: 0px;
flex: auto;
}
rwp-embed-receipt {
flex-direction: column;
display: flex;
}
${Pt.embedStyles}
${Vt.replayBarStyles}
`}static get replayBarStyles(){return o`
.breadbar {
display: flex;
align-items: center;
height: 35px;
width: 100%;
background-color: aliceblue;
padding: 0.5em;
}
.replay-bar {
padding: 0.5em 0em 0.5em 0.5em;
max-width: none;
border-bottom: solid 0.1rem #97989a;
width: 100%;
background-color: white;
}
input#url {
border-radius: 4px;
}
.favicon img {
width: 20px;
height: 20px;
margin: 8px;
/*filter: drop-shadow(1px 1px 2px grey);*/
}
#datetime {
position: absolute;
right: 1em;
z-index: 10;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
#fff 15%,
#fff
);
margin: -35px 0 0 0px;
padding-left: 3em;
line-height: 2;
}
.menu-head {
font-size: 10px;
font-weight: bold;
display: block;
}
.menu-logo {
vertical-align: middle;
}
.menu-version {
font-size: 10px;
}
.dropdown-item.info {
font-style: italic;
}
input:focus + #datetime {
display: none;
}
.grey-disabled {
--fa-icon-fill-color: lightgrey;
color: lightgrey;
}
.replay-bar .button:focus {
box-shadow: none;
}
.is-borderless {
border: 0px;
}
.narrow {
padding: calc(0.5em - 1px) 0.8em;
}
form {
width: 100%;
margin: 0 0 0 0.5em;
}
.gutter.gutter-horizontal {
cursor: col-resize;
float: left;
background-color: rgb(151, 152, 154);
}
.gutter.gutter-horizontal:hover {
cursor: col-resize;
}
main,
wr-coll-replay {
width: 100%;
}
.info-bg {
background-color: whitesmoke;
width: 100%;
height: 100%;
display: flex;
overflow: auto;
}
.is-list {
margin: 1em;
background-color: whitesmoke;
height: fit-content;
}
#contents.full-pages {
width: 100% !important;
}
.sidebar-nav {
position: absolute;
vertical-align: middle;
}
.sidebar-nav a {
display: inline-block;
border-bottom: 0px;
}
.sidebar-nav span.nav-hover {
font-size: smaller;
display: none;
}
.sidebar-nav:hover span.nav-hover,
.sidebar-nav:focus-within span.nav-hover {
display: initial;
color: rgb(72, 118, 255);
}
.sidebar-nav fa-icon {
vertical-align: bottom;
}
.sidebar-nav:hover fa-icon {
color: rgb(72, 118, 255);
}
.sidebar-nav.left {
left: 8px;
}
.sidebar-nav.right {
right: 8px;
}
/* Since the replay sometimes programmatically receives keyboard focus,
and that is visually unexpected for mouse-users, and since this won't
particularly trip up keyboard users, just remove the focus style. */
wr-coll-replay:focus {
outline: none;
}
/* Some keyboard-users may see this replacement style */
wr-coll-replay:focus-visible {
outline: 1px solid rgb(72, 118, 255);
}
`}render(){if(!this.inited)return T``;const e=!!this.tabData.url,t=e&&this.showSidebar;if(!e&&this.tabData&&this.tabData.view){const e={title:this.tabLabels[this.tabData.view],replayTitle:!1};this.dispatchEvent(new CustomEvent("update-title",{bubbles:!0,composed:!0,detail:e}))}return this.collInfo&&!this.collInfo.coll?T` <wr-loader
.loadInfo="${this.loadInfo}"
embed="${this.embed}"
swName="${this.swName}"
.coll="${this.coll}"
.sourceUrl="${this.sourceUrl}"
@coll-loaded=${this.onCollLoaded}
></wr-loader>`:this.collInfo?T`
${this.renderLocationBar()} ${this.renderVerifyInfo()}
<div id="tabContents">
<div
id="contents"
class="is-light ${t?"sidebar":e?"is-hidden":"full-pages"}"
role="${t?"complementary":""}"
aria-label="${t?"Browse Contents":""}"
>
${this.renderTabHeader(t)}
${t||!e?this.renderCollTabs(t):T``}
</div>
${e&&this.isVisible?T`
<wr-coll-replay
role="main"
tabindex="-1"
.collInfo="${this.collInfo}"
sourceUrl="${this.sourceUrl}"
url="${this.tabData.url||""}"
ts="${this.tabData.ts||""}"
@coll-tab-nav="${this.onCollTabNav}"
id="replay"
@replay-loading="${e=>this.isLoading=e.detail.loading}"
@replay-favicons="${this.onFavIcons}"
>
</wr-coll-replay>
`:""}
</div>
`:T``}renderTabHeader(e){return T` <nav
class="main tabs is-centered ${e?"sidebar":""}"
aria-label="tabs"
>
<ul>
${e?T` <li class="sidebar-nav left">
<a
role="button"
href="#"
@click="${this.onHideSidebar}"
@keyup="${ge}"
class="is-marginless is-size-6 is-paddingless"
>
<fa-icon
title="Hide"
.svg="${kt()}"
aria-hidden="true"
></fa-icon>
<span class="nav-hover" aria-hidden="true">Hide</span>
<span class="is-sr-only">Hide Sidebar</span>
</a>
</li>`:""}
${this.hasStory?T` <li
class="${"story"===this.tabData.view?"is-active":""}"
>
<a
@click="${this.onTabClick}"
href="#story"
class="is-size-6"
aria-label="Story"
aria-current="${"story"===this.tabData.view?"location":""}"
>
<span class="icon"
><fa-icon
.svg="${Xe()}"
aria-hidden="true"
title="Story"
></fa-icon
></span>
<span
class="tab-label ${e?"is-hidden":""}"
title="Story"
>Story</span
>
</a>
</li>`:""}
<li class="${"pages"===this.tabData.view?"is-active":""}">
<a
@click="${this.onTabClick}"
href="#pages"
class="is-size-6"
aria-label="Pages"
aria-current="${"pages"===this.tabData.view?"location":""}"
>
<span class="icon"
><fa-icon
.svg="${st()}"
aria-hidden="true"
title="Pages"
></fa-icon
></span>
<span
class="tab-label ${e?"is-hidden":""}"
title="Pages"
>Pages</span
>
</a>
</li>
<li class="${"resources"===this.tabData.view?"is-active":""}">
<a
@click="${this.onTabClick}"
href="#resources"
class="is-size-6"
aria-label="URLs"
aria-current="${"resources"===this.tabData.view?"location":""}"
>
<span class="icon"
><fa-icon
.svg="${ot()}"
aria-hidden="true"
title="URLs"
></fa-icon
></span>
<span class="tab-label ${e?"is-hidden":""}" title="URLs"
>URLs</span
>
</a>
</li>
<li class="${"info"===this.tabData.view?"is-active":""}">
<a
@click="${this.onTabClick}"
href="#info"
class="is-size-6"
aria-label="Archive Info"
aria-current="${"info"===this.tabData.view?"location":""}"
>
<span class="icon"
><fa-icon
.svg="${ct()}"
aria-hidden="true"
title="Archive Info"
></fa-icon
></span>
<span
class="tab-label ${e?"is-hidden":""}"
title="Archive Info"
>Info</span
>
</a>
</li>
${e?T` <li class="sidebar-nav right">
<a
role="button"
href="#"
@click="${this.onFullPageView}"
@keyup="${ge}"
class="is-marginless is-size-6 is-paddingless"
>
<span class="nav-hover" aria-hidden="true">Expand</span>
<span class="is-sr-only">Expand Sidebar to Full View</span>
<fa-icon
title="Expand"
.svg="${$t()}"
aria-hidden="true"
></fa-icon>
</a>
</li>`:""}
</ul>
</nav>`}renderLocationBar(){if("replayonly"===this.embed||"replay-with-info"==this.embed)return"";const e=Ke(this.ts).toLocaleString(),t=!!this.tabData.url,i=t&&this.favIconUrl;return T` <a
class="skip-link"
href="#skip-replay-target"
@click="${this.skipMenu}"
>Skip replay navigation</a
>
<nav class="replay-bar" aria-label="replay">
<div class="field has-addons">
<a
href="#"
role="button"
class="button narrow is-borderless is-hidden-touch"
id="fullscreen"
@click="${this.onFullscreenToggle}"
@keyup="${ge}"
title="${this.isFullscreen?"Exit Full Screen":"Full Screen"}"
aria-label="${this.isFullscreen?"Exit Fullscreen":"Fullscreen"}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${this.isFullscreen?gt():pt()}"
></fa-icon>
</span>
</a>
<a
href="#"
role="button"
class="button narrow is-borderless is-hidden-mobile"
@click="${this.onGoBack}"
@keyup="${ge}"
title="Back"
aria-label="Back"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${$e()}"
></fa-icon>
</span>
</a>
<a
href="#"
role="button"
class="button narrow is-borderless is-hidden-mobile"
@click="${this.onGoForward}"
@keyup="${ge}"
title="Forward"
aria-label="Forward"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${Se()}"
></fa-icon>
</span>
</a>
<a
href="#"
role="button"
class="button narrow is-borderless ${this.isLoading?"is-loading":"is-hidden-mobile"}"
id="refresh"
@click="${this.onRefresh}"
@keyup="${ge}"
title="Reload"
aria-label="Reload"
>
<span class="icon is-small">
${this.isLoading?"":T`
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${bt()}"
></fa-icon>
`}
</span>
</a>
${this.browsable?T` <a
href="#"
role="button"
class="button narrow is-borderless is-hidden-mobile ${t?"":"grey-disabled"}"
@click="${this.onShowPages}"
@keyup="${ge}"
?disabled="${!t}"
title="Browse Contents"
aria-label="Browse Contents"
aria-controls="contents"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${at()}"
></fa-icon>
</span>
</a>`:""}
${this.renderExtraToolbar(!1)}
<form @submit="${this.onSubmit}">
<div
class="control is-expanded ${i?"has-icons-left":""}"
>
<input
id="url"
class="input"
type="text"
@keydown="${this.onKeyDown}"
@blur="${this.onLostFocus}"
.value="${this.url}"
placeholder="Enter text to search or a URL to replay"
/>
${t?T`<p id="datetime" class="control is-hidden-mobile">
${e}
</p>`:T``}
${i?T` <span class="favicon icon is-small is-left">
<img src="${this.favIconUrl}" />
</span>`:T``}
</div>
</form>
<div
class="dropdown is-right ${this.menuActive?"is-active":""}"
@click="${()=>this.menuActive=!1}"
>
<div class="dropdown-trigger">
<button
class="button is-borderless"
aria-haspopup="true"
aria-controls="menu-dropdown"
aria-expanded="${this.menuActive}"
@click="${this.onMenu}"
aria-label="more replay controls"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${wt()}"
></fa-icon>
</span>
</button>
</div>
<div class="dropdown-menu" id="menu-dropdown">
<div class="dropdown-content">
<a
href="#"
role="button"
class="dropdown-item is-hidden-desktop"
@click="${this.onFullscreenToggle}"
@keyup="${ge}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${this.isFullscreen?gt():pt()}"
></fa-icon>
</span>
<span>Full Screen</span>
</a>
<a
href="#"
role="button"
class="dropdown-item is-hidden-tablet"
@click="${this.onGoBack}"
@keyup="${ge}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${$e()}"
></fa-icon>
</span>
<span>Back</span>
</a>
<a
href="#"
role="button"
class="dropdown-item is-hidden-tablet"
@click="${this.onGoForward}"
@keyup="${ge}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${Se()}"
></fa-icon>
</span>
<span>Forward</span>
</a>
<a
href="#"
role="button"
class="dropdown-item is-hidden-tablet"
@click="${this.onRefresh}"
@keyup="${ge}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${bt()}"
></fa-icon>
</span>
<span>Reload</span>
</a>
${this.browsable?T` <a
href="#"
role="button"
class="dropdown-item is-hidden-tablet ${t?"":"grey-disabled"}"
@click="${this.onShowPages}"
@keyup="${ge}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${at()}"
></fa-icon>
</span>
<span>Browse Contents</span>
</a>`:""}
${this.renderExtraToolbar(!0)}
${this.clearable?T` <hr class="dropdown-divider is-hidden-desktop" />
<a
href="#"
role="button"
class="dropdown-item"
@click="${this.onPurgeCache}"
@keyup="${ge}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${ht()}"
></fa-icon>
</span>
<span>Purge Cache + Full Reload</span>
</a>`:T``}
${!this.editable&&this.sourceUrl.startsWith("http://")||this.sourceUrl.startsWith("https://")?T` <hr class="dropdown-divider" />
<a
href="${this.sourceUrl}"
role="button"
class="dropdown-item"
@keyup="${ge}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${tt()}"
></fa-icon>
</span>
<span>Download Archive</span>
</a>`:T``}
${e?T` <hr class="dropdown-divider is-hidden-desktop" />
<div class="dropdown-item info is-hidden-desktop">
<span class="menu-head">Capture Date</span>${e}
</div>`:""}
<hr class="dropdown-divider" />
<a
href="#"
role="button"
class="dropdown-item"
@click="${this.onAbout}"
>
<fa-icon
class="menu-logo"
size="1.0rem"
aria-hidden="true"
.svg=${this.appLogo}
></fa-icon>
<span>&nbsp;About ${this.appName}</span>
<span class="menu-version">(${this.appVersion})</span>
</a>
</div>
</div>
</div>
</div>
</nav>
<p id="skip-replay-target" tabindex="-1" class="is-sr-only">Skipped</p>`}renderVerifyInfo(){return"replay-with-info"!==this.embed?"":T`<rwp-embed-receipt
.collInfo=${this.collInfo}
url=${this.url}
ts=${this.ts}
.appLogo=${this.appLogo}
>
</rwp-embed-receipt>`}dragStart(){const e=this.renderRoot.querySelector("wr-coll-replay");e&&e.setDisablePointer(!0)}dragEnd(){const e=this.renderRoot.querySelector("wr-coll-replay");e&&e.setDisablePointer(!1)}renderCollInfo(){return T` <div class="info-bg">
<wr-coll-info
class="is-list"
.coll="${this.collInfo}"
?detailed="${!0}"
?canDelete="${!this.embed}"
@coll-purge="${this.onPurgeCache}"
></wr-coll-info>
</div>`}renderExtraToolbar(){return""}renderCollTabs(e){const t=this.hasStory&&"story"===this.tabData.view,i="pages"===this.tabData.view,a="resources"===this.tabData.view,r="info"===this.tabData.view;return T`
${r?this.renderCollInfo():T``}
${t?T` <wr-coll-story
.collInfo="${this.collInfo}"
.active="${t}"
currList="${this.tabData.currList||0}"
@coll-tab-nav="${this.onCollTabNav}"
id="story"
.isSidebar="${e}"
class="${t?"":"is-hidden"} ${e?"sidebar":""}"
role="${e?"":"main"}"
>
</wr-coll-story>`:""}
${a?T` <wr-coll-resources
.collInfo="${this.collInfo}"
.active="${a}"
query="${this.tabData.query||""}"
urlSearchType="${this.tabData.urlSearchType||""}"
.currMime="${this.tabData.currMime||""}"
@coll-tab-nav="${this.onCollTabNav}"
id="resources"
.isSidebar="${e}"
class="is-paddingless ${a?"":"is-hidden"} ${e?"sidebar":""}"
role="${e?"":"main"}"
>
</wr-coll-resources>`:""}
${i?T` <wr-page-view
.collInfo="${this.collInfo}"
.active="${i}"
.editable="${this.editable}"
.isSidebar="${e}"
currList="${this.tabData.currList||0}"
query="${this.tabData.query||""}"
.url="${this.tabData.url||""}"
.ts="${this.tabData.ts||""}"
@coll-tab-nav="${this.onCollTabNav}"
id="pages"
@coll-update="${this.onCollUpdate}"
class="${i?"":"is-hidden"} ${e?"sidebar":""}"
role="${e?"":"main"}"
>
</wr-page-view>`:""}
`}skipMenu(e){e.preventDefault(),this.renderRoot.querySelector("#skip-replay-target").focus()}onKeyDown(e){"Esc"!==e.key&&"Escape"!==e.key||(e.preventDefault(),e.currentTarget.value=this.url)}onMenu(e){e.stopPropagation(),this.menuActive=!this.menuActive,this.menuActive&&document.addEventListener("click",(()=>{this.menuActive=!1}),{once:!0})}onFullscreenToggle(e){e.preventDefault(),this.menuActive=!1,this.isFullscreen?document.exitFullscreen():this.requestFullscreen()}onGoBack(e){e.preventDefault(),this.menuActive=!1,window.history.back()}onGoForward(e){e.preventDefault(),this.menuActive=!1,window.history.forward()}onShowPages(e){e.preventDefault(),this.showSidebar||document.documentElement.clientWidth>=769?this.showSidebar=!this.showSidebar:(this.showSidebar=!1,this.updateTabData({url:"",ts:""}))}onFullPageView(e){e.preventDefault(),this.updateTabData({url:"",ts:""})}onHideSidebar(e){e.preventDefault(),this.showSidebar=!1}async onFavIcons(e){for(const t of e.detail.icons){const e=await fetch(t.href);if(200===e.status){const i=e.headers.get("Content-Type");if(i&&!i.startsWith("text/"))return void(this.favIconUrl=t.href)}}this.favIconUrl=""}onPurgeCache(e){e.preventDefault();const t=!e.detail||void 0===e.detail.reload||e.detail.reload;this.deleteFully(t)}async deleteFully(e=!1){const t=this.collInfo.apiPrefix+(e?"?reload=1":""),i=await fetch(t,{method:"DELETE"});200!==i.status&&console.warn("purge failed: "+i.status),e||this.embed?window.location.reload():window.location.search=""}onSubmit(e){e.preventDefault();const t=this.renderRoot.querySelector("input");return t.value?this.navigateTo(t.value):t.value=this.url,!1}onLostFocus(e){e.currentTarget.value||(e.currentTarget.value=this.url)}navigateTo(e){let t;if(e.startsWith("http://")||e.startsWith("https://")){if(t={url:e},e===this.tabData.url){const e=this.renderRoot.querySelector("wr-coll-replay");return void(e&&e.refresh())}}else t=e.startsWith(Kt)?this._stringToParams(e):{query:e,view:"pages"};this.updateTabData(t)}_stringToParams(e){const t=new URLSearchParams(e.slice(Kt.length)),i={url:"",ts:""};for(const e of["query","view","currList","currMime","urlSearchType"])t.has(e)&&(i[e]=t.get(e));return i}_paramsToString(e){const t=new URLSearchParams;for(const i of["query","view","currList","currMime","urlSearchType"])i in e&&t.set(i,e[i]);return t.toString()}onRefresh(e,t=!1){if(e&&e.preventDefault(),this.menuActive=!1,this.tabData.url){const e=this.renderRoot.querySelector("wr-coll-replay");e&&e.refresh()}else t||window.location.reload()}onAbout(){this.dispatchEvent(new CustomEvent("about-show"))}}function Zt(){return{baseUrl:null,breaks:!1,extensions:null,gfm:!0,headerIds:!0,headerPrefix:"",highlight:null,langPrefix:"language-",mangle:!0,pedantic:!1,renderer:null,sanitize:!1,sanitizer:null,silent:!1,smartLists:!1,smartypants:!1,tokenizer:null,walkTokens:null,xhtml:!1}}customElements.define("wr-coll",Vt);let Qt={baseUrl:null,breaks:!1,extensions:null,gfm:!0,headerIds:!0,headerPrefix:"",highlight:null,langPrefix:"language-",mangle:!0,pedantic:!1,renderer:null,sanitize:!1,sanitizer:null,silent:!1,smartLists:!1,smartypants:!1,tokenizer:null,walkTokens:null,xhtml:!1};const Jt=/[&<>"']/,Yt=/[&<>"']/g,Xt=/[<>"']|&(?!#?\w+;)/,ei=/[<>"']|&(?!#?\w+;)/g,ti={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},ii=e=>ti[e];function ai(e,t){if(t){if(Jt.test(e))return e.replace(Yt,ii)}else if(Xt.test(e))return e.replace(ei,ii);return e}const ri=/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/gi;function oi(e){return e.replace(ri,((e,t)=>"colon"===(t=t.toLowerCase())?":":"#"===t.charAt(0)?"x"===t.charAt(1)?String.fromCharCode(parseInt(t.substring(2),16)):String.fromCharCode(+t.substring(1)):""))}const ni=/(^|[^\[])\^/g;function si(e,t){e=e.source||e,t=t||"";const i={replace:(t,a)=>(a=(a=a.source||a).replace(ni,"$1"),e=e.replace(t,a),i),getRegex:()=>new RegExp(e,t)};return i}const li=/[^\w:]/g,ci=/^$|^[a-z][a-z0-9+.-]*:|^[?#]/i;function di(e,t,i){if(e){let e;try{e=decodeURIComponent(oi(i)).replace(li,"").toLowerCase()}catch(e){return null}if(0===e.indexOf("javascript:")||0===e.index
:host {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
min-width: 0px;
justify-content: flex-start;
align-items: center;
}
:host(.sidebar) .columns {
display: flex !important;
flex-direction: column;
}
:host(.sidebar) .column.sidebar.is-one-fifth {
width: 100% !important;
}
${Li.sidebarStyles(r(":host(.sidebar)"))}
.desc p {
margin-bottom: 1em;
}
.columns {
width: 100%;
height: 100%;
justify-self: stretch;
margin: 1em 0 0 0 !important;
min-height: 0;
}
.column.main-content {
min-height: 0;
display: flex;
flex-direction: column;
padding: 0px;
margin-left: 0.75em;
}
.column.main-content.main-scroll {
padding-right: 0.75em;
word-break: break-all;
}
ul.menu-list a.is-active {
background-color: #55be6f;
}
ol {
margin-left: 30px;
}
@media screen and (min-width: 769px) {
.columns {
margin-top: 0.75em;
}
.column.sidebar {
max-height: 100%;
overflow-y: auto;
}
}
@media screen and (max-width: 768px) {
${Li.sidebarStyles()}
}
.gutter.gutter-vertical:hover {
cursor: row-resize;
}
.gutter.gutter-horizontal:hover {
cursor: col-resize;
}
`)}static sidebarStyles(e=o``){return o`
${e} .columns {
position: relative;
}
${e} .column.sidebar {
overflow-y: auto;
margin-top: 0.75em;
}
${e} .column.main-content {
position: relative;
overflow-y: auto;
border-top: 1px solid black;
height: 100%;
}
${e} .menu {
font-size: 0.8rem;
}
`}render(){const e=this.currList;return T`
<div
class="is-sr-only"
role="heading"
aria-level="${this.isSidebar?"2":"1"}"
>
Story for ${this.collInfo.title}
</div>
<div class="columns">
<div class="column sidebar is-one-fifth">
<aside class="menu">
<ul class="menu-list">
<li>
<a
href="#list-0"
data-list="0"
class="${0===e?"is-active":""} menu-label is-size-4"
@click=${this.onClickScroll}
>${this.collInfo.title}</a
>
<ul class="menu-list">
${this.collInfo.lists.map((t=>T` <li>
<a
@click=${this.onClickScroll}
href="#list-${t.id}"
data-list="${t.id}"
class="${e===t.id?"is-active":""}"
>${t.title}</a
>
</li>`))}
</ul>
</li>
</ul>
</aside>
</div>
<div @scroll=${this.onScroll} class="column main-content main-scroll">
<section id="list-0" class="desc">
<h2 class="has-text-centered title is-3">${this.collInfo.title}</h2>
${this.collInfo.desc?ne(Pi(this.collInfo.desc)):""}
</section>
${this.renderLists()}
</div>
</div>
`}renderLists(){return T` ${this.collInfo.lists.map((e=>T`
<article id="list-${e.id}">
<div class="content">
<hr />
<h3>${e.title}</h3>
<p>${e.desc}</p>
<ol>
${this.curatedPageMap[e.id]?this.curatedPageMap[e.id].map((e=>this.renderCPage(e))):T``}
</ol>
</div>
</article>
`))}`}renderCPage(e){const t=new Date(e.ts),i=Ze(t.toISOString());return T` <li>
<div class="content">
<a
@click="${this.onReplay}"
data-url="${e.url}"
data-ts="${i}"
href="${Qe("story",e.url,i)}"
>
<p class="is-size-6 has-text-weight-bold has-text-link">${e.title}</p>
<p class="has-text-dark">${e.url}</p>
</a>
<p>${t.toLocaleString()}</p>
<p>${e.desc}</p>
</div>
<hr />
</li>`}onReplay(e){e.preventDefault();const t={url:e.currentTarget.getAttribute("data-url"),ts:e.currentTarget.getAttribute("data-ts")};return this.sendChangeEvent(t),!1}sendChangeEvent(e){this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{data:e}}))}onClickScroll(e){return e.preventDefault(),this.currList=Number(e.currentTarget.getAttribute("data-list")),this.scrollToList(),!1}scrollToList(){this.currList>this.collInfo.lists.length&&(this.currList=0);const e={behavior:"smooth",block:"nearest",inline:"nearest"};this.clickTime=(new Date).getTime();const t=this.renderRoot.getElementById("list-"+this.currList);t&&t.scrollIntoView(e)}onScroll(e){const t=e.currentTarget,i=this.renderRoot.getElementById("list-"+this.currList);if(!i)return;let a=i;const r=t.offsetTop,o=t.scrollTop;if(o>this.lastST)for(;a.nextElementSibling&&a.nextElementSibling.getBoundingClientRect().top<r;)a=a.nextElementSibling;else for(;a.previousElementSibling&&a.previousElementSibling.getBoundingClientRect().bottom>=r;)a=a.previousElementSibling;if(this.lastST=o,a&&a!=i&&a.id.startsWith("list-")&&(this.currList=Number(a.id.slice(5))),(new Date).getTime()-this.clickTime<1e3)return;const n=this.renderRoot.querySelector(`a[data-list="${this.currList}"]`);if(n){const e={behavior:"smooth",block:"nearest",inline:"nearest"};n.scrollIntoView(e)}}}customElements.define("wr-coll-story",Li);var Ti=__webpack_require__(199),Ui=__webpack_require__.n(Ti);class Ri extends X{constructor(){super(),this.state="trypublic",this.sourceUrl="",this.scriptLoaded=!1,this.error=!1}static get properties(){return{state:{type:String},sourceUrl:{type:String},error:{type:Boolean},reauth:{type:Boolean}}}updated(e){e.has("sourceUrl")&&(this.error=!1,this.state="trypublic",this.tryPublicAccess().then((e=>{e||(this.state="tryauto",this.requestUpdate())})))}async tryPublicAccess(){try{const e=this.sourceUrl,t=`https://helper-proxy.webrecorder.workers.dev/g/${e.slice("googledrive://".length)}`;let i=null;try{i=await fetch(t)}catch(e){return!1}const a=await i.json();if(!a.url||!a.name||!a.size)return!1;if(a.size>15e6)return!1;const r=a.url;try{const e=new AbortController,t=e.signal;if(i=await fetch(r,{signal:t}),e.abort(),200!=i.status)return!1}catch(e){return!1}const o=a.name,n={publicUrl:r},s=Number(a.size);return this.dispatchEvent(new CustomEvent("load-ready",{detail:{name:o,extra:n,size:s,sourceUrl:e}})),!0}catch(e){return!1}}onLoad(){this.scriptLoaded=!0,this.gauth("none",(e=>{e.error?"implicitonly"!==this.state&&(this.state="trymanual"):this.authed(e)}))}onClickAuth(){this.gauth("select_account",(e=>{e.error||this.authed(e)}))}async authed(e){const t=this.sourceUrl,i=`https://www.googleapis.com/drive/v3/files/${t.slice("googledrive://".length)}`,a={Authorization:`Bearer ${e.access_token}`},r=await fetch(i+"?fields=name,size&supportsAllDrives=true",{headers:a});if(404===r.status||403==r.status)return"implicitonly"!==this.state&&(this.state="trymanual"),void(this.error=!0);this.error=!1;const o=await r.json(),n=o.name,s=Number(o.size);this.dispatchEvent(new CustomEvent("load-ready",{detail:{sourceUrl:t,headers:a,size:s,name:n}}))}static get styles(){return ue(o``)}render(){return T` ${this.script()}
${"trymanual"!==this.state?T` <p>Connecting to Google Drive...</p> `:T`
${this.error?T`
<div class="error has-text-danger">
<p>
${this.reauth?"Some resources are loaded on demand from Google Drive, which requires reauthorization.":"Could not access this file with the current Google Drive account."}
</p>
<p>
If you have multiple Google Drive accounts, be sure to
select the correct one.
</p>
</div>
<br />
`:""}
<button
class="button is-warning is-rounded"
@click="${this.onClickAuth}"
>
<span class="icon"
><fa-icon .svg="${Ui()}"></fa-icon
></span>
<span>Authorize Google Drive</span>
</button>
`}`}script(){if("trypublic"===this.state||this.scriptLoaded)return T``;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",Ri);class qi extends X{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=0,this.noWebWorker=!1}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},swName:{type:String}}}firstUpdated(){this.initMessages()}initMessages(){if(this.noWebWorker=this.loadInfo&&this.loadInfo.noWebWorker,this.noWebWorker){if(!navigator.serviceWorker)return;this.worker=navigator.serviceWorker}else this.worker=new Worker(this.swName);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.dispatchEvent(new CustomEvent("coll-loaded",{detail:e.data})),this.noWebWorker?this.pingInterval&&clearInterval(this.pingInterval):this.worker.terminate(),this.worker=null)}}))}async doLoad(){let e,t,i=this.sourceUrl,a=null;if(this.percent=this.currentSize=this.totalSize=0,this.loadInfo&&this.loadInfo.swError)return this.state="errored",this.error=this.loadInfo.swError,void(this.errorAllowRetry=!1);try{const{scheme:e,host:t,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}}(i);switch(e){case"googledrive":this.state="googledrive",a=await this.googledriveInit();break;case"s3":a={sourceUrl:i,loadUrl:`https://${t}.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);a=this.loadInfo;break;case"proxy":i="proxy:"+i.slice("proxy://".length)}}catch(e){console.log(e)}a||(a={sourceUrl:i}),this.state="started",this.loadInfo&&(a.newFullImport=this.loadInfo.newFullImport,a.loadEager=this.loadInfo.loadEager,a.noCache=this.loadInfo.noCache,this.loadInfo.extraConfig&&(t=this.loadInfo.extraConfig),i.startsWith("proxy:")&&t&&t.recording&&(e="recordingproxy"));const r={msg_type:"addColl",name:this.coll,extraConfig:t,type:e,skipExisting:!0,file:a};navigator.serviceWorker.controller||await new Promise((e=>{navigator.serviceWorker.addEventListener("controllerchange",(()=>e()))})),this.worker&&(this.noWebWorker?(navigator.serviceWorker.controller.postMessage(r),this.pingInterval=setInterval((()=>{navigator.serviceWorker.controller.postMessage({msg_type:"ping"})}),15e3)):this.worker.postMessage(r))}googledriveInit(){return this._gdWait=new Promise((
:host {
height: 100%;
display: flex;
}
.logo {
width: 96px;
height: 96px;
margin: 1em;
flex-grow: 1;
}
.progress-div {
position: relative;
width: 400px !important;
}
.progress-label {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: calc(1.5rem / 1.5);
line-height: 1.5rem;
}
.loaded-prog {
margin-bottom: 1em;
}
.error {
white-space: pre-wrap;
margin-bottom: 2em;
}
section.container {
margin: auto;
}
.extra-msg {
font-size: 0.8rem;
}
`)}render(){return T`
<section class="container">
<div class="has-text-centered is-flex">
<wr-anim-logo class="logo" size="96px"></wr-anim-logo>
</div>
${this.embed?"":T` <div class="level">
<p class="level-item">Loading&nbsp;<b>${this.sourceUrl}</b>...</p>
</div>`}
<div class="level">
<div class="level-item has-text-centered">
${this.renderContent()}
</div>
</div>
</section>
`}renderContent(){switch(this.state){case"googledrive":return T`<wr-gdrive
.sourceUrl=${this.sourceUrl}
@load-ready=${this.onLoadReady}
></wr-gdrive>`;case"started":return T` <div class="progress-div">
<progress
id="progress"
class="progress is-primary is-large"
value="${this.percent}"
max="100"
></progress>
<label class="progress-label" for="progress">${this.percent}%</label>
${this.currentSize&&this.totalSize?T` <div class="loaded-prog">
Loaded <b>${Re()(this.currentSize)}</b> of
<b>${Re()(this.totalSize)}</b>
${this.extraMsg&&T` <p class="extra-msg">(${this.extraMsg})</p> `}
</div>`:T``}
${this.embed?"":T` <button @click="${this.onCancel}" class="button is-danger">
Cancel
</button>`}
</div>`;case"errored":return T` <div class="has-text-left">
<div class="error has-text-danger">${this.error}</div>
<div>
${this.errorAllowRetry?T` <a
class="button is-warning"
@click=${()=>window.parent.location.reload()}
>Try Again</a
>`:""}
${this.embed?T``:T` <a href="/" class="button is-warning">Back</a>`}
</div>
</div>`;case"permission_needed":return T` <div class="has-text-left">
<div class="">
Permission is needed to reload the archive file. (Click
<i>Cancel</i> to cancel loading this archive.)
</div>
<button @click="${this.onAskPermission}" class="button is-primary">
Show Permission
</button>
<a href="/" class="button is-danger">Cancel</a>
</div>`;default:return T`<progress
class="progress is-primary is-large"
style="max-width: 400px"
></progress>`}}async onAskPermission(){"granted"===await this.fileHandle.requestPermission({mode:"read"})&&this.doLoad()}}customElements.define("wr-loader",qi);var Mi=__webpack_require__(746),ji=__webpack_require__.n(Mi),Oi=__webpack_require__(304),Ni=__webpack_require__(442),Bi=__webpack_require__.n(Ni),Fi=__webpack_require__(638),Hi=__webpack_require__.n(Fi);class Wi extends X{constructor(){super(),this.filteredPages=[],this.sortedPages=[],this.query="",this.flex=null,this.textPages=null,this.newQuery=null,this.loading=!1,this.updatingSearch=!1,this.showAllPages=!1,this.hasExtraPages=!1,this.currList=0,this.active=!1,this.editable=!1,this.changeNeeded=!1,this.selectedPages=new Set,this.menuActive=!1,this.sortKey="date",this.sortDesc=!0,this.isSidebar=!1,this.url="",this.ts="",this.editing=!1,this.toDeletePages=null,this.toDeletePage=null}static get sortKeys(){return[{key:"",name:"Best Match"},{key:"title",name:"Title"},{key:"date",name:"Date"}]}static get properties(){return{active:{type:Boolean},collInfo:{type:Object},currList:{type:Number},filteredPages:{type:Array},sortedPages:{type:Array},showAllPages:{type:Boolean},query:{type:String},defaultKey:{type:String},loading:{type:Boolean},updatingSearch:{type:Boolean},editable:{type:Boolean},selectedPages:{type:Set},allSelected:{type:Boolean},menuActive:{type:Boolean},sortKey:{type:String},sortDesc:{type:Boolean},isSidebar:{type:Boolean},url:{type:String},ts:{type:String},editing:{type:Boolean},toDeletePages:{type:Object},toDeletePage:{type:Object}}}_timedUpdate(){null!==this.newQuery&&(this.query=this.newQuery,this.newQuery=null,this.filter())}async updated(e){if(e.has("collInfo")?this.updateTextSearch():(e.has("query")||e.has("currList")||e.has("showAllPages"))&&this.filter(),e.has("active")&&this.active&&this.changeNeeded&&this.filter(),e.has("query")){this.query?(this.sortKey="",this.sortDesc=!1):(this.sortKey="date",this.sortDesc=!0);const e=this.renderRoot.querySelector("wr-sorter");e&&(e.sortKey=this.sortKey,e.sortDesc=this.sortDesc)}if(e.has("sortedPages")&&this.isSidebar){const e=this.renderRoot.querySelector(".current");if(e){const t={behavior:"smooth",block:"nearest",inline:"nearest"};setTimeout((()=>e.scrollIntoView(t)),100)}}}onChangeQuery(e){this.newQuery=e.currentTarget.value,this._ival&&window.clearTimeout(this._ival),this._ival=window.setTimeout((()=>this._timedUpdate()),250)}async filter(){if(this.loading)return;if(this.active||(this.changeNeeded=!0),this.loading=!0,this.flex&&this.query&&this.textPages){const e=await this.flex.searchAsync(this.query,25);this.filteredPages=e.map((e=>this.textPages[e]))}else this.showAllPages&&this.hasExtraPages?this.filteredPages=[...this.textPages]:this.filteredPages=[...this.collInfo.pages];0!==this.currList&&await this.filterCurated();for(const e of this.filteredPages){const{timestamp:t,date:i}=Ve(e);e.timestamp=t,e.date=i}this.loading=!1,this.changeNeeded=!1;const e={query:this.query,currList:this.currList};this.sendChangeEvent(e)}async filterCurated(){const e=await fetch(`${this.collInfo.apiPrefix}/curated/${this.currList}`),t=(await e.json()).curated;this.filteredPages=t}sendChangeEvent(e){this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{data:e}}))}addPages(e){const t=new Oi.Index;return this.flex=t,this.textPages=e,this.hasExtraPages=this.textPages&&this.collInfo&&this.collInfo.pages&&this.textPages.length>this.collInfo.pages.length,Promise.all(e.map(((e,i)=>{let a=e.url;return e.title&&(a+=" "+e.title),e.text&&(a+=" "+e.text),t.addAsync(i,a)})))}async updateTextSearch(){if(this.updatingSearch)return;this.updatingSearch=!0;let e=0;try{const t=await caches.open("cache:"+this.collInfo.coll),i=`${this.collInfo.apiPrefix}/textIndex`;let a=await t.match(i);a&&Number(a.headers.get("Content-Length"))||(a=await fetch(i),200===a.status&&Number(a.headers.get("Content-Length"))&&t.put(i,a.clone()));const r=[];for await(const t of ji()(a.body.getReader()))t.url&&(t.id=++e,r.push(t));await this.addPages(r)}catch(e){console.warn(e)}finally{0===e&&await this.addPages(this.collInfo.pages),this.updatingSearch=!
:host {
width: 100%;
height: 100%;
display: flex;
min-width: 0px;
flex-direction: column;
box-sizing: border-box !important;
}
div[role="main"],
#contents div[role="complementary"] {
height: 100%;
}
.main.columns {
width: 100%;
justify-self: stretch;
min-height: 0px;
margin: 0px;
}
.header.columns {
width: 100%;
margin-bottom: 0px;
}
.header a {
color: black;
}
.header .column.pagetitle {
margin-left: 2.5em;
}
.column.main-content {
min-height: 0px;
display: flex;
flex-direction: column;
padding: 0px;
margin-top: 0.5em;
margin-left: 0.75em;
}
.index-bar {
display: flex;
flex-direction: column;
border-right: 3px solid rgb(237, 237, 237);
background-color: whitesmoke;
padding-right: 0px;
position: relative;
}
.index-bar-title {
font-size: 1.25rem;
text-transform: uppercase;
margin-bottom: 1rem;
word-break: break-word;
}
.index-bar-title:hover + .editIcon {
display: block;
}
.editIcon {
display: none;
position: absolute;
right: 8px;
top: 8px;
}
.index-bar-status {
display: flex;
flex-direction: row;
margin-bottom: 0.5rem;
padding-right: 0.75em;
}
.index-bar-menu {
margin-top: 1rem;
}
#filter-label {
margin-bottom: 0px;
}
.num-results {
font-style: italic;
font-weight: normal;
line-height: 2.5;
}
.asc:after {
content: "▼";
font-size: 0.75em;
}
.desc:after {
content: "▲";
font-size: 0.75em;
}
@media screen and (min-width: 769px) {
.main.columns {
max-height: 100%;
height: 100%;
}
.index-bar-menu {
max-height: 100%;
overflow-y: auto;
}
}
@media screen and (max-width: 768px) {
${Wi.sidebarStyles()}
}
${Wi.sidebarStyles(r`:host(.sidebar)`)}
.mobile-lists {
display: block !important;
}
:host(.sidebar) .columns.is-hidden-mobile,
:host(.sidebar) .is-hidden-mobile {
display: none !important;
}
:host(.sidebar) .mobile-header {
display: flex !important;
}
:host(.sidebar) .columns {
display: flex !important;
}
.scroller {
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
flex: auto;
padding-bottom: 1em;
min-height: 0px;
}
.page-entry {
padding-bottom: 1.5rem;
}
.selected {
background-color: rgb(207, 243, 255);
}
.is-disabled {
pointer-events: none;
opacity: 0.65;
}
.page-header {
display: flex;
flex-direction: row;
align-items: baseline;
width: 100%;
min-height: fit-content;
margin-bottom: 1em;
border-bottom: 3px solid rgb(237, 237, 237);
}
.check-select {
padding: 0 1em 0 0.5em;
}
.search-bar {
width: auto;
display: flex;
flex-direction: column;
}
.flex-auto {
flex: auto;
}
.index-bar-description {
margin-bottom: 20px;
font-style: italic;
}
`)}static sidebarStyles(e=o``){return o`
${e} .main.columns {
position: relative;
max-height: 100%;
height: 100%;
}
${e} .index-bar-menu {
max-height: 75px;
overflow-y: auto;
margin-top: 0.75em;
}
${e} .column.main-content {
position: relative;
overflow-y: auto;
width: 100%;
min-height: 0px;
height: 100%;
padding: 0px;
margin: 0px;
}
${e} .mobile-header {
margin: 0.5rem;
margin-left: 1rem;
align-items: center;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
min-height: 24px;
width: 100%;
}
${e} .menu {
font-size: 0.8rem;
}
`}onSelectList(e){e.preventDefault(),this.currList=Number(e.currentTarget.getAttribute("data-list"))}onSelectListDrop(e){e.preventDefault(),this.currList=Number(e.currentTarget.value)}render(){const e=this.currList;return T`
<div
class="is-sr-only"
role="heading"
aria-level="${this.isSidebar?"2":"1"}"
>
Pages in ${this.collInfo.title}
</div>
<div class="search-bar notification is-marginless">
${this.isSidebar?T`<h3 class="is-sr-only">Search and Filter Pages</h3>`:""}
<div class="field flex-auto">
<div
class="control has-icons-left ${this.loading?"is-loading":""}"
>
<input
class="input"
@input="${this.onChangeQuery}"
.value="${this.query}"
type="text"
placeholder="Search by Page URL, Title or Text"
/>
<span class="icon is-left"
><fa-icon .svg="${He()}" aria-hidden="true"></fa-icon
></span>
</div>
</div>
</div>
<div class="main columns">
<div
class="column index-bar is-one-fifth ${this.isSidebar?"is-hidden-mobile":""}"
>
${this.editable&&this.editing?T`
<form @submit="${this.onUpdateTitle}">
<input
id="titleEdit"
class="input"
value="${this.collInfo.title}"
@blur="${this.onUpdateTitle}"
/>
</form>
`:T` <div
class="index-bar-title"
@dblclick="${()=>this.editing=!0}"
>
${this.collInfo.name||this.collInfo.title}
</div>
${this.collInfo.description?T`<div
class="index-bar-description"
@dblclick="${()=>this.editing=!0}"
>
${this.collInfo.description}
</div>`:T``}`}
${this.editable?T`<fa-icon class="editIcon" .svg="${Hi()}"></fa-icon>`:T``}
${this.hasExtraPages?T` <span class="check-select">
<label class="checkbox">
<input
@change=${e=>this.showAllPages=e.currentTarget.checked}
type="checkbox"
.checked="${this.showAllPages}"
/>
Show Non-Seed Pages
</label>
</span>`:""}
<span
class="num-results is-hidden-mobile"
aria-live="polite"
aria-atomic="true"
>${this.formatResults()}</span
>
${this.editable?T` <div class="index-bar-actions">
${this.renderDownloadMenu()}
</div>`:""}
${this.collInfo.lists.length?T`
<p id="filter-label" class="menu-label">Filter By List:</p>
<div class="index-bar-menu menu">
<ul class="menu-list">
<li>
<a
href="#list-0"
data-list="0"
class="${0===e?"is-active":""}"
@click=${this.onSelectList}
><i>All Pages</i></a
>
</li>
${this.collInfo.lists.map((t=>T` <li>
<a
@click=${this.onSelectList}
href="#list-${t.id}"
data-list="${t.id}"
class="${e===t.id?"is-active":""}"
>${t.title}</a
>
</li>`))}
</ul>
</div>
`:""}
</div>
<div class="column main-content">
<div
class="is-sr-only"
role="heading"
aria-level="${this.isSidebar?"3":"2"}"
>
Page List
</div>
${this.renderPages()}
</div>
</div>
${this.renderDeleteModal()}
`}renderDownloadMenu(){return T` <div class="dropdown ${this.menuActive?"is-active":""}">
<div class="dropdown-trigger">
<button
@click="${this.onMenu}"
class="button is-small"
aria-haspopup="true"
aria-expanded="${this.menuActive}"
aria-controls="dropdown-menu"
>
<span>Download</span>
<span class="icon is-small">
<fa-icon .svg="${Bi()}" aria-hidden="true"></fa-icon>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu">
<div class="dropdown-content">
<a
role="button"
href="#"
@click="${e=>this.onDownload(e,"wacz")}"
@keyup="${ge}"
class="dropdown-item"
>
Download ${0===this.selectedPages.size?"All":"Selected"} as
WACZ (Web Archive Collection Zip)
</a>
<a
role="button"
href="#"
@click="${e=>this.onDownload(e,"warc")}"
@keyup="${ge}"
class="dropdown-item"
>
Download ${0===this.selectedPages.size?"All":"Selected"} as
WARC 1.1 Only
</a>
<a
role="button"
href="#"
@click="${e=>this.onDownload(e,"warc1.0")}"
@keyup="${ge}"
class="dropdown-item"
>
Download ${0===this.selectedPages.size?"All":"Selected"} as
WARC 1.0 Only
</a>
</div>
</div>
</div>`}renderPageHeader(){return T`
${!this.isSidebar&&this.editable&&this.filteredPages.length?T` <div class="check-select">
<label class="checkbox">
<input
@change=${this.onSelectAll}
type="checkbox"
.checked="${this.allSelected}"
/>
</label>
</div>`:T``}
<div class="header columns is-hidden-mobile">
${this.query?T` <a
role="button"
href="#"
@click="${this.onSort}"
@keyup="${ge}"
data-key=""
class="column is-1 ${""===this.sortKey?this.sortDesc?"desc":"asc":""}"
>Match</a
>`:""}
<a
role="button"
href="#"
@click="${this.onSort}"
@keyup="${ge}"
data-key="date"
class="column is-2 ${"date"===this.sortKey?this.sortDesc?"desc":"asc":""}"
>Date</a
>
<a
role="button"
href="#"
@click="${this.onSort}"
@keyup="${ge}"
data-key="title"
class="column is-6 pagetitle ${"title"===this.sortKey?this.sortDesc?"desc":"asc":""}"
>Page Title</a
>
</div>
<div class="is-hidden-tablet mobile-header">
<div class="num-results" aria-live="polite" aria-atomic="true">
${this.formatResults()}
</div>
<wr-sorter
id="pages"
.sortKey="${this.sortKey}"
.sortDesc="${this.sortDesc}"
.sortKeys="${Wi.sortKeys}"
.data="${this.filteredPages}"
pageResults="100"
@sort-changed="${this.onSortChanged}"
class="${this.filteredPages.length?"":"is-hidden"}"
>
</wr-sorter>
</div>
`}renderDeleteModal(){return this.toDeletePages?T` <wr-modal
bgClass="has-background-grey-lighter"
@modal-closed="${()=>this.toDeletePages=this.toDeletePage=null}"
title="Confirm Delete"
>
${this.toDeletePage?T` <p>
Are you sure you want to delete the page
<b>${this.toDeletePage.title}</b>? (Size:
<b>${Re()(this.toDeletePage.size)}</b>)
</p>`:T`
<p>
Are you sure you want to delete the
<b>${this.toDeletePages.size}</b> selected pages?
</p>
`}
<p>This operation can not be undone.</p>
<button @click="${this.onDeletePages}" class="button is-danger">
Delete
</button>
<button
@click="${()=>this.toDeletePages=this.toDeletePage=null}"
class="button"
>
Cancel
</button>
</wr-modal>`:T``}isCurrPage(e){if(this.isSidebar&&e.url===this.url){let t=e.timestamp;return!t&&e.date?t=Ze(e.date):"string"==typeof e.ts&&(t=Ze(e.ts)),t===this.ts}return!1}renderPages(){return T`
<div class="page-header has-text-weight-bold">
${this.renderPageHeader()}
</div>
<ul class="scroller" @scroll="${this.onScroll}">
${this.sortedPages.length?T` ${this.sortedPages.map(((e,t)=>{const i=this.selectedPages.has(e.id);return T` <li class="page-entry ${i?"selected":""}">
<wr-page-entry
.index="${this.query||this.isSidebar?t+1:0}"
.editable="${this.editable}"
.selected="${i}"
.isCurrent="${this.isCurrPage(e)}"
.isSidebar="${this.isSidebar}"
.page="${e}"
pid="${e.id}"
@sel-page="${this.onSelectToggle}"
@delete-page="${this.onDeleteConfirm}"
replayPrefix="${this.collInfo.replayPrefix}"
query="${this.query}"
class="${this.isSidebar?"sidebar":""}"
>
</wr-page-entry>
</li>`}))}`:T`<p class="mobile-header">${this.getNoResultsMessage()}</p>`}
</ul>
`}onUpdateTitle(e){if(e.preventDefault(),this.editing=!1,!this.editable)return;const t=this.renderRoot.querySelector("#titleEdit");if(!t||!t.value.trim())return;const i=t.value,a=JSON.stringify({title:i});fetch(`${this.collInfo.apiPrefix}/metadata`,{method:"POST",body:a}).then((e=>{200===e.status&&this.dispatchEvent(new CustomEvent("coll-update",{detail:{title:i}}))}))}onMenu(e){e.stopPropagation(),this.menuActive=!this.menuActive,this.menuActive&&document.addEventListener("click",(()=>{this.menuActive=!1}),{once:!0})}onSort(e){e.preventDefault();const t=e.currentTarget.getAttribute("data-key")||"";t===this.sortKey?this.sortDesc=!this.sortDesc:(this.sortDesc=!1,this.sortKey=t)}onSortChanged(e){this.sortedPages=e.detail.sortedData,this.sortKey=e.detail.sortKey,this.sortDesc=e.detail.sortDesc}onSelectToggle(e){const{page:t,selected:i}=e.detail;i?this.selectedPages.add(t):this.selectedPages.delete(t),this.allSelected=this.selectedPages.size===this.sortedPages.length,this.requestUpdate()}onSelectAll(e){this.allSelected=e.currentTarget.checked,this.allSelected?this.sortedPages.forEach((e=>{this.selectedPages.add(e.id)})):this.selectedPages.clear(),this.requestUpdate()}async onDownload(e,t){e.preventDefault();const i=this.selectedPages.size>0,a=new URLSearchParams;a.set("pages",i?Array.from(this.selectedPages.keys()).join(","):"all"),a.set("format",t),this.collInfo.filename&&a.set("filename",this.collInfo.filename),window.location.href=`${this.collInfo.apiPrefix}/dl?`+a.toString()}onDeleteConfirm(e){const t=e.currentTarget.page;this.selectedPages.has(t.id)?(this.toDeletePages=this.selectedPages,this.toDeletePage=null):(this.toDeletePages=[t.id],this.toDeletePage=t)}async onDeletePages(){const e={};for(const t of this.toDeletePages){const i=this.renderRoot.querySelector(`wr-page-entry[pid="${t}"]`);i&&(i.deleting=!0,e[t]=i)}for(const t of this.toDeletePages){const i=await fetch(`${this.collInfo.apiPrefix}/page/${t}`,{method:"DELETE"}),a=await i.json();if(a.error){console.warn(a.error);continue}const r=e[t];if(!r)continue;const o=this.collInfo.pages.indexOf(r);o<0||this.collInfo.pages.splice(o,1)}this.toDeletePages=null,this.toDeletePage=null,this.updateTextSearch(),this.requestUpdate()}formatResults(){if(!this.query){const e=this.filteredPages.length;return e===this.sortedPages.length?`${e} Page${1!==e?"s":""}`:`${this.sortedPages.length} of ${e} Pages Shown`}return 1===this.sortedPages.length?"1 Page":`${this.sortedPages.length} Pages`}getNoResultsMessage(){return this.collInfo&&this.collInfo.pages.length?this.updatingSearch?"Initializing Search...":this.loading?"Searching...":this.query?T`<span class="fix-text-wrapping"
>No matching pages found. Try changing the search query, or
<a href="#view=resources">browse by URL</a>.</span
>`:"No Pages Found":T`<span class="fix-text-wrapping"
>No Pages are defined in this archive. The archive may be empty.
<a href="#view=resources">Try browsing by URL</a>.</span
>`}onScroll(e){const t=e.currentTarget;if(t.scrollHeight-t.scrollTop-t.clientHeight<40){const e=this.renderRoot.querySelector("wr-sorter");e&&e.getMore()}}}customElements.define("wr-page-view",Wi);const Gi=new RegExp(`[${["-","[","]","/","{","}","(",")","*","+","?",".","\\","^","$","|"].join("\\")}]`,"g"),Ki=e=>e.replace(Gi,"\\$&");class Vi extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get observedAttributes(){return["keywords","delimiter"]}get keywords(){var e;return null!==(e=this.getAttribute("keywords"))&&void 0!==e?e:""}set keywords(e){this.setAttribute("keywords",e)}get delimiter(){var e;return null!==(e=this.getAttribute("delimiter"))&&void 0!==e?e:""}set delimiter(e){this.setAttribute("delimiter",e)}attributeChangedCallback(e,t,i){"keywords"!==e&&"delimiter"!==e||i!==t&&this._render()}connectedCallback(){this._render(),this.__observer=new MutationObserver((()=>{this._render()})),this.__observer.observe(this,{childList:!0,characterData:!0,subtree:!0})}disconnectedCallback(){this.__observer&&(this.__observer.disconnect(),this.__observer=void 0)}_render(){if(!this.shadowRoot)return;const e=this.textContent||"",t=this.getAttribute("keywords"),i=this.getAttribute("delimiter")||/\s+/;if(!t)return void(this.shadowRoot.textContent=e);const a=e.toLowerCase(),r=t.toLowerCase().split(i).sort(((e,t)=>t.length-e.length)),o=new RegExp(`${r.map(Ki).join("|")}`,"gi"),n=e.split(o),s=document.createElement("div");let l=0;for(const t of n)if(s.appendChild(document.createTextNode(t)),l+=t.length,l<a.length){const t=a.substring(l),i=r.find((e=>t.startsWith(e)));if(i){const t=document.createElement("mark");t.textContent=e.substr(l,i.length),s.appendChild(t),l+=i.length}}this.shadowRoot.innerHTML=`\n <style>\n mark {\n color: var(--keyword-mark-color);\n background: var(--keyword-mark-background, yellow);\n }\n </style>\n ${s.innerHTML}\n `}}customElements.define("keyword-mark",Vi);class Zi extends X{constructor(){super(),this.query="",this.textSnippet="",this.page=null,this.replayPrefix="",this.deleting=!1,this.editable=!1,this.iconValid=!1,this.index=0,this.isCurrent=!1,this.isSidebar=!1}static get properties(){return{query:{type:String},textSnippet:{type:String},page:{type:Object},replayPrefix:{type:String},deleting:{type:Boolean},selected:{type:Boolean},editable:{type:Boolean},iconValid:{type:Boolean},index:{type:Number},isCurrent:{type:Boolean},isSidebar:{type:Boolean}}}static get styles(){return ue(o`
:host {
min-height: min-content;
width: 100%;
word-break: break-all;
position: relative;
display: flex;
flex-direction: row;
background: transparent;
}
:host(.sidebar) .column {
width: unset !important;
}
:host(.sidebar) {
width: 100%;
}
.check-select {
padding: 0 1em 0 0.5em;
height: 100%;
margin: auto 0 auto 0;
}
.columns {
width: 100%;
}
/* Overrde Bulma to add the tiniest margin, so the focus indicator isn't obscured */
.columns {
margin-top: calc(-0.75rem + 2px);
}
.columns:last-child {
margin-bottom: calc(-0.75rem + 2px);
}
.favicon {
width: 24px !important;
height: 24px !important;
display: inline-block;
vertical-align: text-bottom;
}
img.favicon {
filter: drop-shadow(1px 1px 2px grey);
}
.media-left {
align-self: center;
}
.delete-button {
position: absolute;
top: 8px;
right: 8px;
}
.delete:hover {
background-color: rgb(241, 70, 104);
}
.is-loading {
line-height: 1.5em;
height: 1.5em;
border: 0px;
background-color: transparent !important;
width: auto;
}
@media screen and (max-width: 768px) {
${Zi.sidebarStyles()}
}
${Zi.sidebarStyles(r`:host(.sidebar)`)}
.current a {
background-color: rgb(207, 243, 255);
font-style: italic;
display: block;
}
.current .curr-page {
font-style: italic;
font-size: 9px;
color: black;
}
.is-inline-date {
display: none;
}
.media-content a {
display: block;
}
`)}static sidebarStyles(e=o``){return o`
${e} .col-date {
margin-left: calc(24px + 1rem);
display: none;
}
${e} .col-date div {
display: inline;
}
${e} .col-index {
position: absolute;
top: 0px;
left: 0px;
margin-top: -0.75em;
}
${e} .columns {
display: flex;
flex-direction: column-reverse;
}
${e} .is-inline-date {
display: initial !important;
font-style: italic;
}
`}updated(e){(e.has("page")||e.has("query"))&&(this.updateSnippet(),this.iconValid=!!this.page.favIconUrl,this.deleting=!1)}render(){const e=this.page,t=this.page.date,i="number"==typeof e.size,a=this.editable&&!this.isSidebar;return T`
${a?T` <div class="check-select">
<label class="checkbox">
<input
@change=${this.onSendSelToggle}
type="checkbox"
.checked="${this.selected}"
/>
</label>
</div>`:""}
<div class="columns">
${this.index?T`
<div class="column col-index is-1 is-size-7">${this.index}.</div>
`:""}
<div class="column col-date is-2">
<div>${t?t.toLocaleDateString():""}</div>
<div>${t?t.toLocaleTimeString():""}</div>
</div>
<div class="column">
<div class="media">
<figure class="media-left">
<p class="">
${this.iconValid?T` <img
class="favicon"
@error="${()=>this.iconValid=!1}"
src="${this.replayPrefix}/${this.page.timestamp}id_/${e.favIconUrl}"
/>`:T` <span class="favicon"></span>`}
</p>
</figure>
<div class="media-content ${this.isCurrent?"current":""}">
<div role="heading" aria-level="${this.isSidebar?"4":"3"}">
<a
@dblclick="${this.onReload}"
@click="${this.onReplay}"
href="${Qe("pages",this.page.url,this.page.timestamp)}"
>
<p class="is-size-6 has-text-weight-bold has-text-link text">
<keyword-mark keywords="${this.query}"
>${e.title||e.url}</keyword-mark
>
</p>
<p class="has-text-dark text">
<keyword-mark keywords="${this.query}"
>${e.url}</keyword-mark
>
</p>
<p class="has-text-grey-dark text is-inline-date">
${t?t.toLocaleString():""}
</p>
</a>
${this.textSnippet?T` <div class="text">
<keyword-mark keywords="${this.query}"
>${this.textSnippet}</keyword-mark
>
</div>`:T``}
</div>
${i?T` <div class="media-right" style="margin-right: 2em">
${Re()(e.size)}
</div>`:""}
</div>
</div>
</div>
${a?T` ${this.deleting?T`
<button
class="button is-loading delete-button is-static"
></button>
`:T` <button
@click="${this.onSendDeletePage}"
class="delete delete-button"
></button>`}`:""}
</div>
`}async updateFavIcon(){if(!this.page.favIconUrl)return void(this.favIconData=null);const e=await fetch(`${this.replayPrefix}/${this.page.timestamp}id_/${this.page.favIconUrl}`);if(200!=e.status)return void(this.favIconData=null);const t=await e.arrayBuffer(),i=e.headers.get("content-type");try{this.favIconData=`data:${i};base64,${btoa(String.fromCharCode.apply(null,t))}`}catch(e){console.log(e),this.favIconData=null}}updateSnippet(){const e=this.textSnippet;if(!this.query||!this.page.text)return this.textSnippet=null,void this.requestUpdate("textSnippet",e);let t=this.page.text,i=this.query,a=t.indexOf(this.query);if(a<0){let r=t.toLowerCase(),o=i.toLowerCase();if(a=r.indexOf(o),a<0)return this.textSnippet=null,void this.requestUpdate("textSnippet",e);t=r,i=o}let r=a;a=Math.max(a-100,0),r=Math.min(r+200,t.length),0===a&&r===t.length?this.textSnippet=t:this.textSnippet="..."+t.slice(a,r)+"...",this.requestUpdate("textSnippet",e)}onReplay(e,t=!1){e.preventDefault();const i={url:this.page.url,ts:this.page.timestamp};return this.sendChangeEvent(i,t),!1}onReload(e){return this.onReplay(e,!0)}sendChangeEvent(e,t){this.dispatchEvent(new CustomEvent("coll-tab-nav",{bubbles:!0,composed:!0,detail:{data:e,reload:t}}))}onSendDeletePage(){const e=this.page;this.dispatchEvent(new CustomEvent("delete-page",{detail:{page:e}}))}onSendSelToggle(e){const t=this.page.id,i=e.currentTarget.checked;this.dispatchEvent(new CustomEvent("sel-page",{detail:{page:t,selected:i}}))}}customElements.define("wr-page-entry",Zi);class Qi extends X{constructor(){super(),this.replayUrl="",this.replayTS="",this.actualTS="",this.url="",this.ts="",this.title="",this.collInfo=null,this.showAuth=!1,this.reauthWait=null,this.authFileHandle=null}static get properties(){return{collInfo:{type:Object},sourceUrl:{type:String},url:{type:String},ts:{type:String},replayUrl:{type:String},replayTS:{type:String},actualTS:{type:String},title:{type:String},iframeUrl:{type:String},showAuth:{type:Boolean},authFileHandle:{type:Object}}}firstUpdated(){window.addEventListener("message",(e=>this.onReplayMessage(e))),navigator.serviceWorker.addEventListener("message",(e=>this.handleAuthMessage(e)))}async handleAuthMessage(e){if("authneeded"===e.data.type&&this.collInfo&&e.data.coll===this.collInfo.coll){if(e.data.fileHandle){this.authFileHandle=e.data.fileHandle;try{if("granted"===await this.authFileHandle.requestPermission({mode:"read"}))return this.showAuth=!1,this.reauthWait=null,void this.refresh()}catch(e){console.warn(e)}}else this.authFileHandle=null;this.reauthWait?await this.reauthWait:this.showAuth=!0}}doSetIframeUrl(){this.iframeUrl=this.url?`${this.collInfo.replayPrefix}/${this.ts||""}mp_/${this.url}`:""}updated(e){if((e.has("sourceUrl")||e.has("collInfo"))&&(this.reauthWait=null),!this.url||this.replayUrl==this.url&&this.replayTS==this.ts||!e.has("url")&&!e.has("ts")||(this.replayUrl=this.url,this.replayTS=this.ts,this.showAuth=!1,this.reauthWait=null,this.doSetIframeUrl()),this.iframeUrl&&e.has("iframeUrl")){this.waitForLoad();const e={title:"Archived Page",replayTitle:!1};this.dispatchEvent(new CustomEvent("update-title",{bubbles:!0,composed:!0,detail:e}))}if(this.replayUrl&&e.has("replayUrl")||this.replayTS&&e.has("replayTS")){const e={url:this.replayUrl,ts:this.replayTS};this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{replaceLoc:!0,data:e}}))}if(this.title&&(e.has("title")||e.has("actualTS"))){const e={title:this.title,url:this.replayUrl,ts:this.actualTS,replayTitle:!0};this.dispatchEvent(new CustomEvent("update-title",{bubbles:!0,composed:!0,detail:e}))}}setDisablePointer(e){const t=this.renderRoot.querySelector("iframe");t&&(t.style.pointerEvents=e?"none":"all")}onReplayMessage(e){const t=this.renderRoot.querySelector("iframe");if(t&&e.source===t.contentWindow)if("load"===e.data.wb_type||"replace-url"===e.data.wb_type){if(this.replayTS=e.data.is_live?"":e.data.ts,this.actualTS=e.data.ts,this.replayUrl=e.data.url,this.title=e.data.title||this.title,this.clearLoading(t.contentWindow),e.data.icons){const t=e.data.icons;this.dispatchEvent(new CustomEve
:host {
display: flex;
flex-direction: column;
height: 100%;
}
.iframe-container {
position: relative;
width: 100%;
height: 100%;
border: 0px;
}
.iframe-main {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
.intro-panel .panel-heading {
font-size: 1em;
display: inline-block;
}
.iframe-main.modal-bg {
z-index: 200;
background-color: rgba(10, 10, 10, 0.7);
}
#wrlogo {
vertical-align: middle;
}
.intro-panel .panel-block {
padding: 1em;
flex-direction: column;
line-height: 2.5em;
}
div.intro-panel.panel {
min-width: 40%;
display: flex;
flex-direction: column;
margin: 3em;
background-color: white;
}
`)}render(){const e=`Replay of ${this.title?`${this.title}:`:""} ${this.url}`;return T` <h1 id="replay-heading" class="is-sr-only">${e}</h1>
${this.iframeUrl?T`
<div class="iframe-container">
<iframe
class="iframe-main"
name="___wb_replay_top_frame"
@message="${this.onReplayMessage}"
allow="autoplay 'self'; fullscreen"
allowfullscreen
src="${this.iframeUrl}"
title="${e}"
></iframe>
${this.showAuth?T`
<div class="iframe-main modal-bg">
<div class="panel intro-panel">
<p class="panel-heading">
<fa-icon
id="wrlogo"
size="1.5rem"
.svg=${fe()}
aria-hidden="true"
></fa-icon>
Authorization Needed
</p>
<div class="panel-block">
${this.authFileHandle?T`
<p>
This archive is loaded from a local file:
<b>${this.authFileHandle.name}</b>
</p>
<p>
The browser needs to confirm your permission
to continue loading from this file.
</p>
<button
class="button is-warning is-rounded"
@click="${this.onReAuthed}"
>
Show Confirmation
</button>
`:T` <wr-gdrive
.sourceUrl="${this.sourceUrl}"
.state="trymanual"
.reauth="${!0}"
@load-ready="${this.onReAuthed}"
></wr-gdrive>`}
</div>
</div>
</div>
`:""}
</div>
`:T` <div class="panel intro-panel">
<p class="panel-heading">Replay Web Page</p>
<div class="panel-block">
<p>Enter a URL above to replay it from the web archive!</p>
<p>
(Or, check out <a href="#view=pages">Pages</a> or
<a href="#view=resources">URLs</a> to explore the contents of
this archive.)
</p>
</div>
</div>`}`}}customElements.define("wr-coll-replay",Qi);var Ji=__webpack_require__(690),Yi=__webpack_require__.n(Ji),Xi=__webpack_require__(761),ea=__webpack_require__.n(Xi);class ta extends X{constructor(){super(),this.sortedData=[],this.data=[],this.pageResults=0,this.numResults=0,this.sortKey=null,this.sortDesc=null}static get properties(){return{id:{type:String},pageResults:{type:Number},data:{type:Array},sortedData:{type:Array},sortKey:{type:String},sortDesc:{type:Boolean}}}firstUpdated(){if(this.id){const e=localStorage.getItem(`${this.id}:sortKey`);null!==e&&(this.sortKey=e);const t=localStorage.getItem(`${this.id}:sortDesc`);null!==t&&(this.sortDesc="1"===t)}}updated(e){const t=e.has("sortKey"),i=e.has("sortDesc"),a=e.has("data");t&&null!==this.sortKey&&localStorage.setItem(`${this.id}:sortKey`,this.sortKey),i&&null!==this.sortDesc&&localStorage.setItem(`${this.id}:sortDesc`,this.sortDesc?"1":"0"),(t||i||a)&&this.sortData()}sortData(){this.sortedData=[...this.data],this.numResults=this.pageResults,""===this.sortKey?this.sortDesc&&this.sortedData.reverse():this.sortedData.sort(((e,t)=>e[this.sortKey]===t[this.sortKey]?0:this.sortDesc==e[this.sortKey]<t[this.sortKey]?1:-1)),this.sendSortChanged()}sendSortChanged(){const e={sortKey:this.sortKey,sortDesc:this.sortDesc,sortedData:this.numResults?this.sortedData.slice(0,this.numResults):this.sortedData};this.dispatchEvent(new CustomEvent("sort-changed",{detail:e}))}getMore(e=100){this.pageResults&&this.numResults>=this.sortedData.length||(this.numResults+=e,this.sendSortChanged())}static get styles(){return ue(o`
:host {
min-width: 100px;
box-sizing: border-box !important;
}
button.button.is-small {
border-radius: 4px;
}
`)}render(){return T`
<div class="select is-small">
<select id="sort-select" @change=${e=>this.sortKey=e.currentTarget.value}>
${this.sortKeys.map((e=>T`
<option value="${e.key}" ?selected="${e.key===this.sortKey}">
Sort By: ${e.name}
</option>
`))}
</select>
</div>
<button @click=${()=>this.sortDesc=!this.sortDesc} class="button is-small">
<span>Order:</span>
<span class="is-sr-only">${this.sortDesc?"Ascending":"Descending"}</span>
<span class="icon"><fa-icon aria-hidden="true" .svg=${this.sortDesc?ea():Yi()}></span>
</button>`}}customElements.define("wr-sorter",ta);class ia extends X{static get filters(){return[{name:"HTML",filter:"text/html,text/xhtml"},{name:"Images",filter:"image/"},{name:"Audio/Video",filter:"audio/,video/"},{name:"PDF",filter:"application/pdf"},{name:"Javascript",filter:"application/javascript,application/x-javascript"},{name:"CSS",filter:"text/css"},{name:"Fonts",filter:"font/,application/font-woff"},{name:"Plain Text",filter:"text/plain"},{name:"JSON",filter:"application/json"},{name:"DASH/HLS",filter:"application/dash+xml,application/x-mpegURL,application/vnd.apple.mpegurl"},{name:"All URLs",filter:""}]}static get sortKeys(){return[{key:"url",name:"URL"},{key:"ts",name:"Date"},{key:"mime",name:"Mime Type"},{key:"status",name:"Status"}]}constructor(){super(),this.collInfo=null,this.isSidebar=!1,this.currMime="",this.query="",this.urlSearchType="",this.filteredResults=[],this.sortedResults=[],this.results=[],this.newQuery=null,this.tryMore=!1,this.loading=!1,this.sortKey="url",this.sortDesc=!1}static get properties(){return{collInfo:{type:Object},isSidebar:{type:Boolean},currMime:{type:String},query:{type:String},urlSearchType:{type:String},filteredResults:{type:Array},sortedResults:{type:Array},loading:{type:Boolean},sortKey:{type:String},sortDesc:{type:Boolean}}}firstUpdated(){""===this.urlSearchType&&(this.urlSearchType="prefix")}_timedUpdate(){null!==this.newQuery&&(this.query=this.newQuery,this.newQuery=null)}updated(e){if(e.has("query")||e.has("urlSearchType")||e.has("currMime")){this.doLoadResources();const t={query:this.query,urlSearchType:this.urlSearchType,currMime:this.currMime},i=!e.has("currMime")&&!e.has("urlSearchType");this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{replaceLoc:i,data:t}}))}(e.has("sortKey")||e.has("sortDesc"))&&this.filter()}async doLoadResources(e=!1){if(e&&(!this.tryMore||!this.results.length))return;if(this.loading)return;this.loading=!0;let t="contains"!==this.urlSearchType?this.query:"";const i=t&&"prefix"===this.urlSearchType?1:0;t&&!t.startsWith("http")&&(t="https://"+t);const a=this.currMime,r=new URLSearchParams({mime:a,url:t,prefix:i,count:100});if(e){const e=this.results[this.results.length-1];r.set("fromMime",e.mime),r.set("fromUrl",e.url),r.set("fromStatus",e.status),r.set("fromTs",new Date(e.date).getTime())}let o=await fetch(`${this.collInfo.apiPrefix}/urls?${r.toString()}`);o=await o.json(),this.results=e?this.results.concat(o.urls):o.urls,this.tryMore=o.urls.length>=100,this.filter(),this.loading=!1}onChangeTypeSearch(e){this.currMime=e.currentTarget.value}onChangeQuery(e){this.newQuery=e.currentTarget.value,this._ival&&window.clearTimeout(this._ival),this._ival=window.setTimeout((()=>this._timedUpdate()),250)}onClickUrlType(e){this.urlSearchType=e.currentTarget.value}filter(){const e=[],t="contains"===this.urlSearchType?this.query:"";for(const i of this.results)(!t||i.url.indexOf(t)>=0)&&e.push(i);this.filteredResults=e}onScroll(e){const t=e.currentTarget,i=t.scrollHeight-t.scrollTop-t.clientHeight;this.tryMore&&i<40&&this.doLoadResources(!0)}static get styles(){return ue(o`
:host {
width: 100%;
height: 100%;
display: flex;
min-width: 0px;
flex-direction: column;
}
:host(.sidebar) .is-hidden-tablet {
display: flex !important;
}
:host(.sidebar) .is-hidden-mobile {
display: none !important;
}
:host(.sidebar) .level,
:host(.sidebar) .level-left,
:host(.sidebar) .level-right {
display: block !important;
}
:host(.sidebar) .columns {
display: flex !important;
flex-direction: column;
}
:host(.sidebar) .column {
width: 100% !important;
}
.notification {
width: 100%;
}
.all-results {
margin: 0 0 0 0.5em;
display: flex;
flex-direction: column;
min-height: 0;
}
.main-scroll {
flex-grow: 1;
}
.minihead {
font-size: 10px;
font-weight: bold;
}
.columns {
margin: 0px;
}
thead {
margin-bottom: 24px;
}
table th:not([align]) {
text-align: left;
}
.result {
border-bottom: 1px #dbdbdb solid;
min-height: fit-content;
}
.results-head {
border-bottom: 2px #dbdbdb solid;
margin-right: 16px;
min-height: fit-content;
display: block;
width: 100%;
}
.results-head a {
color: black;
}
.all-results .column {
word-break: break-word;
}
div.sort-header {
padding: 10px;
margin-bottom: 0px !important;
min-height: fit-content;
}
.flex-auto {
flex: auto;
}
.asc:after {
content: "▼";
font-size: 0.75em;
}
.desc:after {
content: "▲";
font-size: 0.75em;
}
.num-results {
margin-left: 1em;
font-style: italic;
}
`)}render(){return T`
<div
role="heading"
aria-level="${this.isSidebar?"2":"1"}"
class="is-sr-only"
>
URLs in ${this.collInfo.title}
</div>
<div
role="heading"
aria-level="${this.isSidebar?"3":"2"}"
class="is-sr-only"
>
Search and Filter
</div>
<div class="notification level is-marginless">
<div class="level-left flex-auto">
<div class="level-item flex-auto">
<span class="is-hidden-mobile">Search:&nbsp;&nbsp;</span>
<div class="select">
<select @change="${this.onChangeTypeSearch}">
${ia.filters.map((e=>T`
<option
value="${e.filter}"
?selected="${e.filter===this.currMime}"
>
${e.name}
</option>
`))}
</select>
</div>
<div class="field flex-auto">
<div
class="control has-icons-left ${this.loading?"is-loading":""}"
>
<input
type="text"
class="input"
@input="${this.onChangeQuery}"
.value="${this.query}"
placeholder="Enter URL to Search"
/>
<span class="icon is-left"
><fa-icon .svg="${He()}"></fa-icon
></span>
</div>
</div>
</div>
</div>
<div class="control level-right">
<div style="margin-left: 1em" class="control">
<label class="radio has-text-left"
><input
type="radio"
name="urltype"
value="contains"
?checked="${"contains"===this.urlSearchType}"
@click="${this.onClickUrlType}"
/>&nbsp;Contains</label
>
<label class="radio has-text-left"
><input
type="radio"
name="urltype"
value="prefix"
?checked="${"prefix"===this.urlSearchType}"
@click="${this.onClickUrlType}"
/>&nbsp;Prefix</label
>
<label class="radio has-text-left"
><input
type="radio"
name="urltype"
value="exact"
?checked="${"exact"===this.urlSearchType}"
@click="${this.onClickUrlType}"
/>&nbsp;Exact</label
>
<span
id="num-results"
class="num-results"
is-pulled-right
aria-live="polite"
aria-atomic="true"
>${this.filteredResults.length} Result(s)</span
>
</div>
</div>
</div>
<div class="sort-header is-hidden-tablet">
<wr-sorter
id="urls"
.sortKey="${this.sortKey}"
.sortDesc="${this.sortDesc}"
.sortKeys="${ia.sortKeys}"
.data="${this.filteredResults}"
@sort-changed="${this.onSortChanged}"
>
</wr-sorter>
</div>
<div
role="heading"
aria-level="${this.isSidebar?"3":"2"}"
id="results-heading"
class="is-sr-only"
>
Results
</div>
<table class="all-results" aria-labelledby="results-heading num-results">
<thead>
<tr class="columns results-head has-text-weight-bold">
<th scope="col" class="column col-url is-6 is-hidden-mobile">
<a
role="button"
href="#"
@click="${this.onSort}"
@keyup="${ge}"
data-key="url"
class="${"url"===this.sortKey?this.sortDesc?"desc":"asc":""}"
>URL</a
>
</th>
<th scope="col" class="column col-ts is-2 is-hidden-mobile">
<a
role="button"
href="#"
@click="${this.onSort}"
@keyup="${ge}"
data-key="ts"
class="${"ts"===this.sortKey?this.sortDesc?"desc":"asc":""}"
>Date</a
>
</th>
<th scope="col" class="column col-mime is-3 is-hidden-mobile">
<a
role="button"
href="#"
@click="${this.onSort}"
@keyup="${ge}"
data-key="mime"
class="${"mime"===this.sortKey?this.sortDesc?"desc":"asc":""}"
>Mime Type</a
>
</th>
<th scope="col" class="column col-status is-1 is-hidden-mobile">
<a
role="button"
href="#"
@click="${this.onSort}"
@keyup="${ge}"
data-key="status"
class="${"status"===this.sortKey?this.sortDesc?"desc":"asc":""}"
>Status</a
>
</th>
</tr>
</thead>
<tbody class="main-scroll" @scroll="${this.onScroll}">
${this.sortedResults.length?this.sortedResults.map((e=>T`
<tr class="columns result">
<td class="column col-url is-6">
<p class="minihead is-hidden-tablet">URL</p>
<a
@click="${this.onReplay}"
data-url="${e.url}"
data-ts="${e.ts}"
href="${Qe("resources",e.url,e.ts)}"
>
<keyword-mark keywords="${this.query}"
>${e.url}</keyword-mark
>
</a>
</td>
<td class="column col-ts is-2">
<p class="minihead is-hidden-tablet">Date</p>
${new Date(e.date).toLocaleString()}
</td>
<td class="column col-mime is-3">
<p class="minihead is-hidden-tablet">Mime Type</p>
${e.mime}
</td>
<td class="column col-status is-1">
<p class="minihead is-hidden-tablet">Status</p>
${e.status}
</td>
</tr>
`)):T`<tr class="section">
<td colspan="4"><i>No Results Found.</i></td>
</tr>`}
</tbody>
</table>
`}onSort(e){e.preventDefault();const t=e.currentTarget.getAttribute("data-key");t===this.sortKey?this.sortDesc=!this.sortDesc:(this.sortDesc=!1,this.sortKey=t)}onSortChanged(e){this.sortedResults=e.detail.sortedData,this.sortKey=e.detail.sortKey,this.sortDesc=e.detail.sortDesc}onReplay(e){e.preventDefault();const t={url:e.currentTarget.getAttribute("data-url"),ts:e.currentTarget.getAttribute("data-ts")};return this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{data:t}})),!1}}customElements.define("wr-coll-resources",ia);var aa=document.currentScript&&document.currentScript.src,ra="";class oa extends X{constructor(){super(),this.replaybase="./replay/",this.replayfile=ra,this.swName="sw.js",this.mainElementName="replay-app-main",this.appName="ReplayWeb.page",this.view="replay",this.ts="",this.url="",this.query="",this.config="",this.customConfig=null,this.coll="",this.paramString=null,this.deepLink=!1,this.newWindowBase="",this.inited=!1,this.embed=null,this.reloadCount=0,this.sandbox=!1,this.noWebWorker=!1,this.noCache=!1,this.noSandbox=null,this.logo=fe(),this.loading="",this.useRuffle=!1}static setDefaultReplayFile(e){ra=e}static get properties(){return{url:{type:String},ts:{type:String},query:{type:String},source:{type:String},src:{type:String},view:{type:String},embed:{type:String},replaybase:{type:String},swName:{type:String},title:{type:String},coll:{type:String},config:{type:String},inited:{type:Boolean},paramString:{type:String},hashString:{type:String},deepLink:{type:Boolean},sandbox:{type:Boolean},noSandbox:{type:Boolean},noWebWorker:{type:Boolean},noCache:{type:Boolean},hideOffscreen:{type:Boolean},newWindowBase:{type:String},errorMessage:{type:String},requireSubdomainIframe:{type:Boolean},loading:{type:String},useRuffle:{type:Boolean}}}async doRegister(){const e=new URL(this.replaybase,window.location.href);if(this.isCrossOrigin=e.origin!==window.location.origin,this.isCrossOrigin)return void(this.inited=!0);const t=this.swName+"?serveIndex=1",i=this.appName,a=this.replaybase,r=this.requireSubdomainIframe;this.swmanager=new Ee({name:t,scope:a,requireSubdomainIframe:r,appName:i});try{await this.swmanager.register(),this.inited=!0}catch(e){this.errorMessage=this.swmanager.renderErrorReport(this.logo)}}handleMessage(e){const t=this.renderRoot.querySelector("iframe");if(t&&e.source===t.contentWindow){if(!e.data.view)return;if(e.data.title&&(this.title=e.data.title),!this.deepLink)return;const t=new URLSearchParams(e.data),i=new URL(window.location.href);i.hash="#"+t.toString(),window.history.replaceState({},"",i)}}firstUpdated(){this.noSandbox&&console.warn("The noSandbox flag is deprecated. ReplayWeb.page does not add a sandbox by default. To enable sandboxing, use 'sandbox' flag instead. This may result in PDFs not loading and pages opening in new windows, but may be more secure in some situations"),this.doRegister(),window.addEventListener("message",(e=>this.handleMessage(e))),this.deepLink&&(this.updateFromHash(),window.addEventListener("hashchange",(()=>this.updateFromHash()))),this.loadBrowserDefaults()}loadBrowserDefaults(){void 0!==window.GestureEvent&&void 0===window.SharedWorker&&(this.noWebWorker=!0),navigator.storage&&navigator.storage.estimate||(this.noCache=!0)}updateFromHash(){const e=new URLSearchParams(window.location.hash.slice(1));e.has("url")&&(this.url=e.get("url")),e.has("ts")&&(this.ts=e.get("ts")),e.has("query")&&(this.query=e.get("query")),e.has("view")&&(this.view=e.get("view"))}mergeConfigs(){if(!this.customConfig)return this.config;if(this.config){const e={...this.customConfig,...JSON.parse(this.config)};return JSON.stringify(e)}return JSON.stringify(this.customConfig)}updated(e){if(e.has("url")||e.has("ts")||e.has("query")||e.has("view")||e.has("source")||e.has("src")){this.embed=this.embed||"default",this.src&&(this.source=this.src);const e=new URL(this.source,document.baseURI),t=this.mergeConfigs(),i={source:e,customColl:this.coll,config:t,basePageUrl:window.location.href.split("#")[0],baseUrlSourcePrefix:this.newWindowBase,embed:this.embed};this.deepLink||i.baseUrlSourc
.logo {
margin: 1em;
flex-grow: 1;
}
.error {
white-space: pre-wrap;
text-align: center;
}
.full-width {
width: 100%;
}
iframe {
width: 100%;
height: 100%;
border: 0px;
padding: 0px;
margin: 0px;
}
:host {
width: 100%;
height: 100%;
display: block;
}
`)}render(){return T`
${this.paramString&&this.hashString&&this.inited?T`
<iframe
sandbox="${(e=>null!=e?e:R)(this.sandbox?"allow-downloads allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-same-origin allow-forms":void 0)}"
@load="${this.onLoad}"
src="${this.replaybase}${this.replayfile}?${this.paramString}#${this.hashString}"
allow="autoplay *; fullscreen"
title="Replay of ${this.title?`${this.title}:`:""} ${this.url}"
></iframe>
`:T``}
${this.errorMessage}
`}onLoad(e){if(this.isCrossOrigin)return;const t=e.target.contentWindow,i=e.target.contentDocument;if(t.navigator.serviceWorker&&!t.navigator.serviceWorker.controller&&this.reloadCount<=2)return this.reloadCount++,void setTimeout((()=>t.location.reload()),100);if(this.reloadCount=0,t.customElements.get(this.mainElementName))return;const a=i.createElement("script");a.src=aa,i.head.appendChild(a)}}!async function(){customElements.define("replay-web-page",oa)}()})();var __webpack_export_target__=self;for(var i in __webpack_exports__)__webpack_export_target__[i]=__webpack_exports__[i];__webpack_exports__.__esModule&&Object.defineProperty(__webpack_export_target__,"__esModule",{value:!0})})();
Reference in a new issue Copy permalink