jekyll: move jekyll back to root, but simpler setup, exclude via _config.yml
app: bundle jekyll docs into app, add 'yarn run docs' to build ui: add back/forward arrows for app only, adjust responsiveness for app, add IS_APP flag injected via preload ui: add animated logo, friendly message on empty replay frame app: improve serve logic: - serve static files from static root - serve replay from http localhost instead to avoid proxying https for remote requests - serve local lookup from http prefix also - catch any fallthrough from replay as 404 - add timestamp to response channels to ensure uniqness
This commit is contained in:
Ilya Kreymer
+2
-2
@@ -1,12 +1,12 @@
|
||||
*.har
|
||||
*.warc
|
||||
*.warc.gz
|
||||
!docs/examples/*.warc
|
||||
!examples/*.warc
|
||||
**/node_modules
|
||||
yarn-error.log
|
||||
coverage/
|
||||
**/local-examples/
|
||||
**/.DS_Store
|
||||
**/.sass-cache/
|
||||
docs/_site/
|
||||
_site/
|
||||
dist/
|
||||
|
||||
@@ -15,10 +15,28 @@ heading_anchors: true
|
||||
# Aux links for the upper right navigation
|
||||
aux_links:
|
||||
"Back to ReplayWeb.page":
|
||||
- "https://replayweb.page/"
|
||||
- "/"
|
||||
|
||||
logo: "/assets/logo.svg"
|
||||
|
||||
plugins:
|
||||
- jekyll-remote-theme
|
||||
|
||||
|
||||
baseUrl: '/'
|
||||
|
||||
exclude:
|
||||
- Gemfile
|
||||
- Gemfile.lock
|
||||
- package.json
|
||||
- run.sh
|
||||
- webpack.config.js
|
||||
- yarn-error.log
|
||||
- yarn.lock
|
||||
- local-examples/
|
||||
- build/
|
||||
- src/
|
||||
- dist/
|
||||
- node_modules/
|
||||
- plugins/
|
||||
|
||||
+32
-72
@@ -6,38 +6,32 @@
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
sodipodi:docname="logo.svg"
|
||||
inkscape:version="1.0rc1 (09960d6, 2020-04-09)"
|
||||
id="wrlogo"
|
||||
version="1.1"
|
||||
viewBox="0 0 66.712418 66.712418"
|
||||
width="66.712418mm"
|
||||
height="66.712418mm"
|
||||
width="66.712418mm">
|
||||
viewBox="0 0 66.712418 66.712418"
|
||||
version="1.1"
|
||||
id="wrlogo">
|
||||
<defs
|
||||
id="defs1341">
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient5691"
|
||||
id="linearGradient6615"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(0.70268446,0,0,0.70268446,72.622704,112.65806)"
|
||||
x1="2.9740067"
|
||||
y1="48.223869"
|
||||
y2="48.223869"
|
||||
x2="97.913383"
|
||||
y2="48.223869" />
|
||||
y1="48.223869"
|
||||
x1="2.9740067"
|
||||
gradientTransform="matrix(0.70268446,0,0,0.70268446,72.622704,112.65806)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
id="linearGradient6615"
|
||||
xlink:href="#linearGradient5691" />
|
||||
<linearGradient
|
||||
id="linearGradient5691"
|
||||
inkscape:collect="always">
|
||||
id="linearGradient5691">
|
||||
<stop
|
||||
id="stop5687"
|
||||
style="stop-color:#4876ff;stop-opacity:1"
|
||||
offset="0"
|
||||
style="stop-color:#4876ff;stop-opacity:1" />
|
||||
id="stop5687" />
|
||||
<stop
|
||||
id="stop5689"
|
||||
style="stop-color:#04cdff;stop-opacity:1"
|
||||
offset="1"
|
||||
style="stop-color:#04cdff;stop-opacity:1" />
|
||||
id="stop5689" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<metadata
|
||||
@@ -53,66 +47,32 @@
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(-72.477124,-114.81046)"
|
||||
id="layer1"
|
||||
inkscape:groupmode="layer"
|
||||
inkscape:label="Layer 1">
|
||||
transform="translate(-72.477124,-114.81046)">
|
||||
<circle
|
||||
style="fill:url(#linearGradient6615);fill-opacity:1;stroke:none;stroke-width:23.3824;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="path6016-0-7-6-9-11-2-8-67-6-50-4-33"
|
||||
cx="108.06871"
|
||||
cy="146.54422"
|
||||
transform="rotate(0.86915873)"
|
||||
r="33.356209"
|
||||
inkscape:transform-center-x="-2.7634129"
|
||||
inkscape:transform-center-y="2.8413144"
|
||||
transform="rotate(0.86915873)" />
|
||||
cy="146.54422"
|
||||
cx="108.06871"
|
||||
id="path6016-0-7-6-9-11-2-8-67-6-50-4-33"
|
||||
style="fill:url(#linearGradient6615);fill-opacity:1;stroke:none;stroke-width:23.3824;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
|
||||
<path
|
||||
sodipodi:nodetypes="cssssscscsssssccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path114-4-0-85-6-0-5-3-6-1-6"
|
||||
style="fill:#d2f9d6;fill-opacity:1;stroke-width:0.702683"
|
||||
d="m 119.62552,156.54036 h 5.46953 c 3.81136,0 6.91161,-3.10024 6.91161,-6.9116 0,-3.81136 -3.10025,-6.9116 -6.91161,-6.9116 h -15.59889 c -3.81136,0 -6.9116,3.10024 -6.9116,6.9116 0,1.96682 0.82917,3.73828 2.15161,4.9982 -0.83057,0.55722 -1.82557,0.88678 -2.89857,0.88678 h -2.082056 c -1.042775,-1.72016 -1.654819,-3.73054 -1.654819,-5.88498 0,-6.2834 5.112035,-11.39543 11.395435,-11.39543 h 15.59889 c 6.28341,0 11.39474,5.11132 11.39474,11.39543 0,6.28411 -5.11222,11.50105 -11.39474,11.39543 l -5.45665,0.14787 v -2.17722 z"
|
||||
style="fill:#d2f9d6;fill-opacity:1;stroke-width:0.702683" />
|
||||
id="path114-4-0-85-6-0-5-3-6-1-6" />
|
||||
<path
|
||||
sodipodi:nodetypes="cssssscscsssssccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path116-9-4-7-0-8-3-2-08-9-1"
|
||||
style="fill:#64e986;fill-opacity:1;stroke-width:0.702683"
|
||||
d="m 91.878825,142.66568 -4.893158,0.0515 c -3.811155,0.0401 -6.911605,3.10024 -6.911605,6.91231 0,3.81065 3.100238,6.91089 6.911605,6.91089 h 15.598893 c 3.81136,0 6.9116,-3.10024 6.9116,-6.91089 0,-1.96682 -0.82917,-3.73899 -2.15162,-4.9989 0.83057,-0.55723 1.82557,-0.88609 2.89857,-0.88609 h 2.08066 c 1.04348,1.71947 1.65552,3.72985 1.65552,5.88499 0,6.28269 -5.11132,11.39472 -11.39473,11.39472 H 86.985667 c -6.282704,0 -11.39544,-5.11132 -11.39544,-11.39472 0,-6.28411 5.112828,-11.49617 11.39544,-11.39614 l 4.893158,0.0779 v 2.17722 z"
|
||||
style="fill:#64e986;fill-opacity:1;stroke-width:0.702683" />
|
||||
id="path116-9-4-7-0-8-3-2-08-9-1" />
|
||||
<path
|
||||
transform="matrix(-0.38260367,0,0,0.3986412,118.95441,127.09397)"
|
||||
inkscape:transform-center-y="0.018337839"
|
||||
inkscape:transform-center-x="-1.9610825"
|
||||
d="m 73.728819,47.245763 -10.861072,-6.335289 -10.86107,-6.33529 10.917057,-6.238319 10.917057,-6.238318 -0.05599,12.573609 z"
|
||||
inkscape:randomized="0"
|
||||
inkscape:rounded="0"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:arg2="2.0988478"
|
||||
sodipodi:arg1="1.0516502"
|
||||
sodipodi:r2="7.2594481"
|
||||
sodipodi:r1="14.518896"
|
||||
sodipodi:cy="34.639832"
|
||||
sodipodi:cx="66.525429"
|
||||
sodipodi:sides="3"
|
||||
id="path3919-5-9-8-6-6-56-0-37-5-8"
|
||||
style="fill:#64e986;fill-opacity:1;stroke:none;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
sodipodi:type="star" />
|
||||
<path
|
||||
transform="matrix(0.4122212,0,0,-0.40812,91.057524,172.76152)"
|
||||
inkscape:transform-center-y="-0.01877307"
|
||||
inkscape:transform-center-x="2.1128909"
|
||||
id="path3919-5-9-8-6-6-56-0-37-5-8"
|
||||
d="m 73.728819,47.245763 -10.861072,-6.335289 -10.86107,-6.33529 10.917057,-6.238319 10.917057,-6.238318 -0.05599,12.573609 z"
|
||||
inkscape:randomized="0"
|
||||
inkscape:rounded="0"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:arg2="2.0988478"
|
||||
sodipodi:arg1="1.0516502"
|
||||
sodipodi:r2="7.2594481"
|
||||
sodipodi:r1="14.518896"
|
||||
sodipodi:cy="34.639832"
|
||||
sodipodi:cx="66.525429"
|
||||
sodipodi:sides="3"
|
||||
id="path3919-3-3-7-5-9-7-2-6-8-7-7"
|
||||
transform="matrix(-0.38260367,0,0,0.3986412,118.95441,127.09397)" />
|
||||
<path
|
||||
style="fill:#d2f9d6;fill-opacity:1;stroke:none;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
sodipodi:type="star" />
|
||||
id="path3919-3-3-7-5-9-7-2-6-8-7-7"
|
||||
d="m 73.728819,47.245763 -10.861072,-6.335289 -10.86107,-6.33529 10.917057,-6.238319 10.917057,-6.238318 -0.05599,12.573609 z"
|
||||
transform="matrix(0.4122212,0,0,-0.40812,91.057524,172.76152)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,82 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="66.712418mm"
|
||||
height="66.712418mm"
|
||||
viewBox="0 0 66.712418 66.712418"
|
||||
version="1.1"
|
||||
id="wrlogo">
|
||||
<defs
|
||||
id="defs1341">
|
||||
<linearGradient
|
||||
y2="48.223869"
|
||||
x2="97.913383"
|
||||
y1="48.223869"
|
||||
x1="2.9740067"
|
||||
gradientTransform="matrix(0.70268446,0,0,0.70268446,72.622704,112.65806)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
id="linearGradient6615"
|
||||
xlink:href="#linearGradient5691" />
|
||||
<linearGradient
|
||||
id="linearGradient5691">
|
||||
<stop
|
||||
style="stop-color:#4876ff;stop-opacity:1"
|
||||
offset="0"
|
||||
id="stop5687">
|
||||
<animate attributeName="stop-color" values="#4876ff; #1b0921; #4876ff; #04cdff; #4876ff; " dur="9s" repeatCount="indefinite" />
|
||||
</stop>
|
||||
<stop
|
||||
style="stop-color:#04cdff;stop-opacity:1"
|
||||
offset="1"
|
||||
id="stop5689">
|
||||
<animate attributeName="stop-color" values="#04cdff; #4876ff; #1b0921; #4876ff; #04cdff; " dur="9s" repeatCount="indefinite" />
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<metadata
|
||||
id="metadata1344">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-72.477124,-114.81046)">
|
||||
<circle
|
||||
transform="rotate(0.86915873)"
|
||||
r="33.356209"
|
||||
cy="146.54422"
|
||||
cx="108.06871"
|
||||
id="path6016-0-7-6-9-11-2-8-67-6-50-4-33"
|
||||
style="fill:url(#linearGradient6615);fill-opacity:1;stroke:none;stroke-width:23.3824;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
|
||||
<path
|
||||
style="fill:#d2f9d6;fill-opacity:1;stroke-width:0.702683"
|
||||
d="m 119.62552,156.54036 h 5.46953 c 3.81136,0 6.91161,-3.10024 6.91161,-6.9116 0,-3.81136 -3.10025,-6.9116 -6.91161,-6.9116 h -15.59889 c -3.81136,0 -6.9116,3.10024 -6.9116,6.9116 0,1.96682 0.82917,3.73828 2.15161,4.9982 -0.83057,0.55722 -1.82557,0.88678 -2.89857,0.88678 h -2.082056 c -1.042775,-1.72016 -1.654819,-3.73054 -1.654819,-5.88498 0,-6.2834 5.112035,-11.39543 11.395435,-11.39543 h 15.59889 c 6.28341,0 11.39474,5.11132 11.39474,11.39543 0,6.28411 -5.11222,11.50105 -11.39474,11.39543 l -5.45665,0.14787 v -2.17722 z"
|
||||
id="path114-4-0-85-6-0-5-3-6-1-6" />
|
||||
<path
|
||||
style="fill:#64e986;fill-opacity:1;stroke-width:0.702683"
|
||||
d="m 91.878825,142.66568 -4.893158,0.0515 c -3.811155,0.0401 -6.911605,3.10024 -6.911605,6.91231 0,3.81065 3.100238,6.91089 6.911605,6.91089 h 15.598893 c 3.81136,0 6.9116,-3.10024 6.9116,-6.91089 0,-1.96682 -0.82917,-3.73899 -2.15162,-4.9989 0.83057,-0.55723 1.82557,-0.88609 2.89857,-0.88609 h 2.08066 c 1.04348,1.71947 1.65552,3.72985 1.65552,5.88499 0,6.28269 -5.11132,11.39472 -11.39473,11.39472 H 86.985667 c -6.282704,0 -11.39544,-5.11132 -11.39544,-11.39472 0,-6.28411 5.112828,-11.49617 11.39544,-11.39614 l 4.893158,0.0779 v 2.17722 z"
|
||||
id="path116-9-4-7-0-8-3-2-08-9-1" />
|
||||
<path
|
||||
style="fill:#64e986;fill-opacity:1;stroke:none;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="path3919-5-9-8-6-6-56-0-37-5-8"
|
||||
d="m 73.728819,47.245763 -10.861072,-6.335289 -10.86107,-6.33529 10.917057,-6.238319 10.917057,-6.238318 -0.05599,12.573609 z"
|
||||
transform="matrix(-0.38260367,0,0,0.3986412,118.95441,127.09397)" />
|
||||
<path
|
||||
style="fill:#d2f9d6;fill-opacity:1;stroke:none;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="path3919-3-3-7-5-9-7-2-6-8-7-7"
|
||||
d="m 73.728819,47.245763 -10.861072,-6.335289 -10.86107,-6.33529 10.917057,-6.238319 10.917057,-6.238318 -0.05599,12.573609 z"
|
||||
transform="matrix(0.4122212,0,0,-0.40812,91.057524,172.76152)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
@@ -4,7 +4,7 @@ title: Usage
|
||||
nav_order: 1
|
||||
description: 'Usage'
|
||||
has_children: true
|
||||
permalink: /docs
|
||||
permalink: /docs/index.html
|
||||
---
|
||||
|
||||
# ReplayWeb.Page
|
||||
@@ -1,4 +1,4 @@
|
||||
!function(t,e){for(var s in e)t[s]=e[s]}(self,function(t){var e={};function s(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,s),r.l=!0,r.exports}return s.m=t,s.c=e,s.d=function(t,e,n){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},s.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)s.d(n,r,function(e){return t[e]}.bind(null,r));return n},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="/",s(s.s=108)}({0:function(t,e,s){"use strict";s.d(e,"c",(function(){return d.e})),s.d(e,"d",(function(){return N})),s.d(e,"b",(function(){return C})),s.d(e,"a",(function(){return E}));var n=s(5),r=s(1);function i(t,e){const{element:{content:s},parts:n}=t,r=document.createTreeWalker(s,133,null,!1);let i=a(n),o=n[i],c=-1,l=0;const u=[];let d=null;for(;r.nextNode();){c++;const t=r.currentNode;for(t.previousSibling===d&&(d=null),e.has(t)&&(u.push(t),null===d&&(d=t)),null!==d&&l++;void 0!==o&&o.index===c;)o.index=null!==d?-1:o.index-l,i=a(n,i),o=n[i]}u.forEach(t=>t.parentNode.removeChild(t))}const o=t=>{let e=11===t.nodeType?0:1;const s=document.createTreeWalker(t,133,null,!1);for(;s.nextNode();)e++;return e},a=(t,e=-1)=>{for(let s=e+1;s<t.length;s++){const e=t[s];if(Object(r.d)(e))return s}return-1};var c=s(9),l=s(8),u=s(13),d=s(6);
|
||||
!function(t,e){for(var s in e)t[s]=e[s]}(self,function(t){var e={};function s(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,s),r.l=!0,r.exports}return s.m=t,s.c=e,s.d=function(t,e,n){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},s.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)s.d(n,r,function(e){return t[e]}.bind(null,r));return n},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="/",s(s.s=111)}({0:function(t,e,s){"use strict";s.d(e,"c",(function(){return d.e})),s.d(e,"d",(function(){return N})),s.d(e,"b",(function(){return C})),s.d(e,"a",(function(){return E}));var n=s(5),r=s(1);function i(t,e){const{element:{content:s},parts:n}=t,r=document.createTreeWalker(s,133,null,!1);let i=a(n),o=n[i],c=-1,l=0;const u=[];let d=null;for(;r.nextNode();){c++;const t=r.currentNode;for(t.previousSibling===d&&(d=null),e.has(t)&&(u.push(t),null===d&&(d=t)),null!==d&&l++;void 0!==o&&o.index===c;)o.index=null!==d?-1:o.index-l,i=a(n,i),o=n[i]}u.forEach(t=>t.parentNode.removeChild(t))}const o=t=>{let e=11===t.nodeType?0:1;const s=document.createTreeWalker(t,133,null,!1);for(;s.nextNode();)e++;return e},a=(t,e=-1)=>{for(let s=e+1;s<t.length;s++){const e=t[s];if(Object(r.d)(e))return s}return-1};var c=s(9),l=s(8),u=s(13),d=s(6);
|
||||
/**
|
||||
* @license
|
||||
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
|
||||
@@ -65,7 +65,7 @@ const n=`{{lit-${String(Math.random()).slice(2)}}}`,r=`\x3c!--${n}--\x3e`,i=new
|
||||
* subject to an additional IP rights grant found at
|
||||
* http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
const n=new WeakMap,r=t=>(...e)=>{const s=t(...e);return n.set(s,!0),s},i=t=>"function"==typeof t&&n.has(t)},108:function(t,e,s){"use strict";s.r(e);var n=s(0);class r extends n.a{constructor(){super(),this.replayBase="http://localhost:9990/",this.view="replay",this.ts="",this.url="",this.config="",this.coll="",this.paramString=null,this.deepLink=!1}static get properties(){return{url:{type:String},ts:{type:String},source:{type:String},replayBase:{type:String},title:{type:String},coll:{type:String},config:{type:String},paramString:{type:String},hashString:{type:String},deepLink:{type:Boolean}}}firstUpdated(){window.addEventListener("message",t=>{const e=this.renderRoot.querySelector("iframe");if(e&&t.source===e.contentWindow){if(t.data.title&&(this.title=t.data.title),console.log(t.data),!this.deepLink)return;const e=new URLSearchParams({url:t.data.url,ts:t.data.ts}),s=new URL(window.location.href);s.hash="#"+e.toString(),window.history.replaceState({},"",s)}}),this.deepLink&&(this.updateFromHash(),window.addEventListener("hashchange",t=>this.updateFromHash()))}updateFromHash(){const t=new URLSearchParams(window.location.hash.slice(1));t.has("url")&&(this.url=t.get("url")),t.has("ts")&&(this.ts=t.get("ts"))}updated(t){(t.has("url")||t.has("ts")||t.has("source"))&&(this.paramString=new URLSearchParams({source:this.source,customColl:this.coll,config:this.config,embed:"true"}).toString(),this.hashString=new URLSearchParams({url:this.url,ts:this.ts,view:this.view}).toString())}static get styles(){return n.b`
|
||||
const n=new WeakMap,r=t=>(...e)=>{const s=t(...e);return n.set(s,!0),s},i=t=>"function"==typeof t&&n.has(t)},111:function(t,e,s){"use strict";s.r(e);var n=s(0);class r extends n.a{constructor(){super(),this.replayBase="http://localhost:9990/",this.view="replay",this.ts="",this.url="",this.config="",this.coll="",this.paramString=null,this.deepLink=!1}static get properties(){return{url:{type:String},ts:{type:String},source:{type:String},replayBase:{type:String},title:{type:String},coll:{type:String},config:{type:String},paramString:{type:String},hashString:{type:String},deepLink:{type:Boolean}}}firstUpdated(){window.addEventListener("message",t=>{const e=this.renderRoot.querySelector("iframe");if(e&&t.source===e.contentWindow){if(t.data.title&&(this.title=t.data.title),console.log(t.data),!this.deepLink)return;const e=new URLSearchParams({url:t.data.url,ts:t.data.ts}),s=new URL(window.location.href);s.hash="#"+e.toString(),window.history.replaceState({},"",s)}}),this.deepLink&&(this.updateFromHash(),window.addEventListener("hashchange",t=>this.updateFromHash()))}updateFromHash(){const t=new URLSearchParams(window.location.hash.slice(1));t.has("url")&&(this.url=t.get("url")),t.has("ts")&&(this.ts=t.get("ts"))}updated(t){(t.has("url")||t.has("ts")||t.has("source"))&&(this.paramString=new URLSearchParams({source:this.source,customColl:this.coll,config:this.config,embed:"true"}).toString(),this.hashString=new URLSearchParams({url:this.url,ts:this.ts,view:this.view}).toString())}static get styles(){return n.b`
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
+128
-70
File diff suppressed because one or more lines are too long
+15
-7
@@ -11,10 +11,10 @@
|
||||
"bulma": "^0.8.2",
|
||||
"lit-element": "^2.3.1",
|
||||
"marked": "^1.0.0",
|
||||
"mime-types": "^2.1.27",
|
||||
"pretty-bytes": "^5.3.0",
|
||||
"register-service-worker": "^1.7.1",
|
||||
"wabac": "github:https://github.com/webrecorder/wabac.js",
|
||||
"wombat": "github:https://github.com/webrecorder/wombat"
|
||||
"wabac": "github:https://github.com/webrecorder/wabac.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"css-loader": "^3.5.3",
|
||||
@@ -39,7 +39,9 @@
|
||||
"pack": "CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --publish never",
|
||||
"dist": "electron-builder",
|
||||
"start-electron": "NODE_ENV=development electron ./dist/electron.js",
|
||||
"build-electron": "yarn run build && yarn run pack"
|
||||
"build-electron": "yarn run build && yarn run pack",
|
||||
"docs": "bundle exec jekyll build",
|
||||
"all": "yarn run build && yarn run docs && yarn run pack"
|
||||
},
|
||||
"build": {
|
||||
"afterSign": "build/notarize.js",
|
||||
@@ -48,12 +50,18 @@
|
||||
"appId": "net.webrecorder.replaywebpage",
|
||||
"artifactName": "${name}-${version}.${ext}",
|
||||
"files": [
|
||||
"!**/*",
|
||||
"!**/node_modules/**/*",
|
||||
"package.json",
|
||||
"dist/*.js",
|
||||
"docs/*.js",
|
||||
"docs/index.html"
|
||||
"*.js",
|
||||
"*.html",
|
||||
{
|
||||
"from": "_site/docs",
|
||||
"to": "docs"
|
||||
},
|
||||
{
|
||||
"from": "_site/assets",
|
||||
"to": "assets"
|
||||
}
|
||||
],
|
||||
"extraResources": [
|
||||
"plugins"
|
||||
|
||||
+84
-68
@@ -1,27 +1,28 @@
|
||||
"use strict";
|
||||
|
||||
const {app, session, BrowserWindow, protocol, ipcMain} = require('electron');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const qs = require('querystring');
|
||||
import fetch from 'node-fetch';
|
||||
import { Headers } from 'node-fetch';
|
||||
|
||||
const { ArchiveResponse, Rewriter } = require('wabac/src/rewrite');
|
||||
import {app, session, BrowserWindow, ipcMain} from 'electron';
|
||||
|
||||
const { Headers } = require('node-fetch');
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import qs from 'querystring';
|
||||
|
||||
import { ArchiveResponse, Rewriter } from 'wabac/src/rewrite';
|
||||
|
||||
import { PassThrough } from 'stream';
|
||||
|
||||
import mime from 'mime-types';
|
||||
|
||||
global.Headers = Headers;
|
||||
|
||||
const { PassThrough } = require('stream');
|
||||
|
||||
const STATIC_PREFIX = `https://replayweb.page/`;
|
||||
const STATIC_PREFIX = "http://localhost:5471/";
|
||||
|
||||
const REPLAY_PREFIX = STATIC_PREFIX + "wabac/";
|
||||
|
||||
const STATIC_PATHS = {
|
||||
'index.html': 'text/html',
|
||||
'frontend.js': 'application/javascript',
|
||||
'sw.js': 'application/javascript'
|
||||
};
|
||||
const HTML_TYPE = 'text/html; charset="utf-8"';
|
||||
const JS_TYPE = 'application/javascript; charset="utf-8"';
|
||||
|
||||
const URL_RX = /([^\/]+)\/([\d]+)(?:\w\w_)?\/(.*)$/;
|
||||
|
||||
@@ -29,7 +30,7 @@ const appPath = app.getAppPath();
|
||||
|
||||
const projPath = path.join(appPath, "../");
|
||||
|
||||
const staticContentPath = path.join(__dirname, "../", "docs");
|
||||
const staticContentPath = path.join(__dirname, "../");
|
||||
|
||||
const pluginPath = path.join(projPath, "plugins", "PepperFlashPlayer.plugin");
|
||||
|
||||
@@ -51,7 +52,7 @@ app.commandLine.appendSwitch('ppapi-flash-path', pluginPath);
|
||||
var proxyColl;
|
||||
var proxyTS;
|
||||
|
||||
var mainContents;
|
||||
var mainWindow;
|
||||
|
||||
|
||||
function bufferToStream(data) {
|
||||
@@ -65,42 +66,50 @@ function bufferToStream(data) {
|
||||
|
||||
|
||||
async function doIntercept(request, callback) {
|
||||
console.log("request", request.url);
|
||||
console.log(`${request.method} ${request.url} from ${request.referrer}`);
|
||||
|
||||
// if local server
|
||||
if (request.url.startsWith(STATIC_PREFIX)) {
|
||||
let filename = request.url.slice(STATIC_PREFIX.length).split("?", 1)[0];
|
||||
if (filename === "") {
|
||||
filename = "index.html";
|
||||
}
|
||||
const type = STATIC_PATHS[filename];
|
||||
|
||||
if (type) {
|
||||
const fullPath = path.join(staticContentPath, filename);
|
||||
|
||||
console.log("fullPath: " + fullPath);
|
||||
|
||||
const data = fs.createReadStream(fullPath);
|
||||
|
||||
callback({statusCode: 200, headers: {"content-type": type}, data});
|
||||
return;
|
||||
|
||||
} else if (request.url.startsWith(REPLAY_PREFIX)) {
|
||||
//if replay prefix
|
||||
if (request.url.startsWith(REPLAY_PREFIX)) {
|
||||
const m = request.url.slice(REPLAY_PREFIX.length).match(URL_RX);
|
||||
if (m) {
|
||||
proxyColl = m[1];
|
||||
proxyTS = m[2];
|
||||
|
||||
//const data = bufferToStream(`<html><head><script>window.location.href = "${m[3]}";</script></head></html>`);
|
||||
//const statusCode = 200;
|
||||
//const headers = {"location": m[3], "cache-control": "no-cache"};
|
||||
|
||||
//callback({statusCode, headers, data});
|
||||
|
||||
request.url = m[3];
|
||||
await resolveResponse(request, callback);
|
||||
return;
|
||||
return await resolveArchiveResponse(request, callback);
|
||||
}
|
||||
} else {
|
||||
|
||||
// try serve static file from app dir
|
||||
let filename = request.url.slice(STATIC_PREFIX.length).split("?", 1)[0];
|
||||
|
||||
if (filename === "") {
|
||||
filename = "index.html";
|
||||
} else if (filename === "docs") {
|
||||
filename = "docs/index.html";
|
||||
}
|
||||
|
||||
let ext = path.extname(filename);
|
||||
if (!ext) {
|
||||
ext = ".html";
|
||||
filename += ext;
|
||||
}
|
||||
|
||||
const mimeType = mime.contentType(ext);
|
||||
|
||||
if (mimeType) {
|
||||
const fullPath = path.join(staticContentPath, filename);
|
||||
|
||||
console.log("fullPath: " + fullPath);
|
||||
|
||||
const data = fs.createReadStream(fullPath);
|
||||
|
||||
return callback({statusCode: 200, headers: {"content-type": mimeType}, data});
|
||||
}
|
||||
}
|
||||
|
||||
return notFound(request.url, callback);
|
||||
}
|
||||
|
||||
@@ -122,12 +131,30 @@ async function doIntercept(request, callback) {
|
||||
|
||||
const {statusCode, start, end} = parseRange(reqHeaders, headers, size);
|
||||
|
||||
const data = fs.createReadStream(filename, {start, end});
|
||||
const data = request.method === "HEAD" ? null : fs.createReadStream(filename, {start, end});
|
||||
|
||||
callback({statusCode, headers, data});
|
||||
return;
|
||||
}
|
||||
|
||||
await resolveResponse(request, callback);
|
||||
// possible 'live leak' attempt, just return not found
|
||||
if (request.referrer && request.referrer.startsWith(REPLAY_PREFIX)) {
|
||||
return notFound(request.url, callback);
|
||||
}
|
||||
|
||||
await proxyLive(request, callback);
|
||||
}
|
||||
|
||||
async function proxyLive(request, callback) {
|
||||
let headers = request.headers;
|
||||
|
||||
const method = request.method;
|
||||
const response = await fetch(request.url, {method, headers});
|
||||
const data = method === "HEAD" ? null : response.body;
|
||||
const statusCode = response.status;
|
||||
|
||||
headers = Object.fromEntries(response.headers.entries());
|
||||
callback({statusCode, headers, data});
|
||||
}
|
||||
|
||||
function notFound(url, callback) {
|
||||
@@ -136,9 +163,10 @@ function notFound(url, callback) {
|
||||
callback({statusCode: 404, headers: {"Content-Type": 'text/html; charset="utf-8"'}, data});
|
||||
}
|
||||
|
||||
async function resolveResponse(request, callback) {
|
||||
//mainContents.once("ipc-message", async (event, channel, status, headers, payload) => {
|
||||
ipcMain.once("req:" + request.url, async (event, status, headers, payload) => {
|
||||
async function resolveArchiveResponse(request, callback) {
|
||||
const channel = `req:${new Date().getTime()}:${request.url}`;
|
||||
|
||||
ipcMain.once(channel, async (event, status, headers, payload) => {
|
||||
const url = request.url;
|
||||
|
||||
if (status === 404 && !payload) {
|
||||
@@ -161,7 +189,6 @@ async function resolveResponse(request, callback) {
|
||||
useBaseRules: true
|
||||
});
|
||||
|
||||
//const timestamp = proxyTS;
|
||||
request.headers = new Headers(request.headers);
|
||||
|
||||
try {
|
||||
@@ -188,7 +215,7 @@ async function resolveResponse(request, callback) {
|
||||
|
||||
});
|
||||
|
||||
mainContents.send("getresponse", request, proxyColl, proxyTS);
|
||||
mainWindow.webContents.send("getresponse", request, proxyColl, proxyTS, channel);
|
||||
}
|
||||
|
||||
function parseRange(reqHeaders, headers, size) {
|
||||
@@ -215,28 +242,14 @@ function parseRange(reqHeaders, headers, size) {
|
||||
|
||||
|
||||
function createWindow () {
|
||||
//createServer();
|
||||
|
||||
const sesh = session.defaultSession;
|
||||
protocol.registerStreamProtocol("filex", async (request, callback) => {
|
||||
const filename = qs.unescape(request.url.slice("filex://-".length));
|
||||
console.log("filex", filename);
|
||||
|
||||
if (filename.endsWith("?redir")) {
|
||||
const newLoc = request.url.replace("?redir", "");
|
||||
console.log("redir to: " + newLoc);
|
||||
callback({statusCode: 304, headers: {"Location": newLoc}, data: bufferToStream(NOT_FOUND)});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
//sesh.protocol.interceptStreamProtocol("file", doIntercept);
|
||||
sesh.protocol.interceptStreamProtocol("http", doIntercept);
|
||||
sesh.protocol.interceptStreamProtocol("https", doIntercept);
|
||||
//sesh.protocol.interceptStreamProtocol("https", doIntercept);
|
||||
|
||||
// Create the browser window.
|
||||
const mainWindow = new BrowserWindow({
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 1024,
|
||||
height: 768,
|
||||
isMaximized: true,
|
||||
@@ -244,6 +257,8 @@ function createWindow () {
|
||||
webPreferences: {
|
||||
plugins: true,
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
nativeWindowOpen: true,
|
||||
contextIsolation: true
|
||||
}
|
||||
}).once('ready-to-show', () => {
|
||||
|
||||
@@ -289,11 +304,12 @@ app.on('window-all-closed', function () {
|
||||
app.quit();
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
app.on('web-contents-created', (event, contents) => {
|
||||
if (contents.getType() === "webview") {
|
||||
contents.openDevTools();
|
||||
} else if (contents.getType() === "window") {
|
||||
console.log("main contents set")
|
||||
mainContents = contents;
|
||||
}
|
||||
});
|
||||
});*/
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
|
||||
import { CollectionLoader } from 'wabac/src/loaders';
|
||||
|
||||
const { ipcRenderer } = require('electron');
|
||||
const { ipcRenderer, contextBridge } = require('electron');
|
||||
|
||||
contextBridge.exposeInMainWorld('electron', {'IS_APP': true});
|
||||
|
||||
const dbs = {};
|
||||
|
||||
@@ -17,7 +19,7 @@ async function getDB(name) {
|
||||
return dbs[name].store;
|
||||
}
|
||||
|
||||
async function getResponse(event, request, coll, ts) {
|
||||
async function getResponse(event, request, coll, ts, channel) {
|
||||
const db = await getDB(coll);
|
||||
await db.initing;
|
||||
|
||||
@@ -25,8 +27,6 @@ async function getResponse(event, request, coll, ts) {
|
||||
|
||||
const result = await db.getResource(req, "", {request});
|
||||
|
||||
const channel = "req:" + request.url;
|
||||
|
||||
if (!result) {
|
||||
ipcRenderer.send(channel, 404);
|
||||
return;
|
||||
|
||||
+139
-62
@@ -11,8 +11,13 @@ import marked from 'marked';
|
||||
|
||||
import allCssRaw from '../assets/main.scss';
|
||||
import rwpLogo from '../assets/logo.svg';
|
||||
import rwpAnimLogo from '../assets/logoa.svg';
|
||||
|
||||
import fasArrowLeft from '@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg';
|
||||
import fasArrowRight from '@fortawesome/fontawesome-free/svgs/solid/arrow-right.svg';
|
||||
|
||||
import fasInfoIcon from '@fortawesome/fontawesome-free/svgs/solid/info-circle.svg';
|
||||
|
||||
import fasArchiveIcon from '@fortawesome/fontawesome-free/svgs/solid/info-circle.svg';
|
||||
import fasRefresh from '@fortawesome/fontawesome-free/svgs/solid/redo-alt.svg';
|
||||
import fasFullscreen from '@fortawesome/fontawesome-free/svgs/solid/desktop.svg';
|
||||
import fasUnfullscreen from '@fortawesome/fontawesome-free/svgs/solid/compress-arrows-alt.svg';
|
||||
@@ -31,10 +36,7 @@ function wrapCss(custom) {
|
||||
return [allCss, custom];
|
||||
}
|
||||
|
||||
const GDRIVE_CLIENT_ID = "160798412227-tko4c82uopud11q105b2lvbogsj77hlg.apps.googleusercontent.com";
|
||||
|
||||
const HELPER_PROXY = "https://helper-proxy.webrecorder.workers.dev";
|
||||
|
||||
const IS_APP = window.electron && window.electron.IS_APP;
|
||||
|
||||
const dbworker = new Worker(__SW_PATH__);
|
||||
|
||||
@@ -87,9 +89,32 @@ class AppMain extends LitElement
|
||||
.navbar {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
.info-menu {
|
||||
padding: 0 1.0em;
|
||||
|
||||
div.navbar-menu fa-icon {
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
.menu-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.arrow-button {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.info-menu {
|
||||
padding: 0 1.0em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.wide-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
`);
|
||||
}
|
||||
|
||||
@@ -111,11 +136,21 @@ class AppMain extends LitElement
|
||||
</div>
|
||||
<div class="navbar-menu ${this.navMenuShown ? 'is-active' : ''}">
|
||||
<div class="navbar-start">
|
||||
${IS_APP ? html`
|
||||
<a class="navbar-item arrow-button" title="Go Back" @click="${(e) => window.history.back()}">
|
||||
<fa-icon .svg="${fasArrowLeft}"></fa-icon><span class="menu-only"> Go Back</span>
|
||||
</a>
|
||||
<a class="navbar-item arrow-button" title="Go Forward" @click="${(e) => window.history.forward()}">
|
||||
<fa-icon .svg="${fasArrowRight}"></fa-icon><span class="menu-only"> Go Forward</span>
|
||||
</a>
|
||||
` : ``}
|
||||
${this.sourceUrl && this.collInfo ? html`
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="info-menu navbar-link is-arrowless"><fa-icon size="1.2em" .svg="${fasArchiveIcon}"></fa-icon></a>
|
||||
<a class="info-menu navbar-link is-arrowless"><fa-icon size="1.2em" .svg="${fasInfoIcon}"></fa-icon>
|
||||
<span class="menu-only">About this Archive</span>
|
||||
</a>
|
||||
<div class="navbar-dropdown">
|
||||
<div class="navbar-item"><i>About this Archive</i></div>
|
||||
<div class="navbar-item wide-only"><i>About this Archive</i></div>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
Source: <b>${this.sourceUrl}</b>
|
||||
@@ -138,7 +173,7 @@ class AppMain extends LitElement
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<a href="/docs" target="_blank" class="navbar-item">
|
||||
<fa-icon .svg="${fasHelp}"></fa-icon> How it Works
|
||||
<fa-icon .svg="${fasHelp}"></fa-icon><span> How it Works</span>
|
||||
</a>
|
||||
<a href="?terms" @click="${(e) => { e.preventDefault(); this.showTerms = true} }"class="navbar-item">Terms</a>
|
||||
</div>
|
||||
@@ -193,6 +228,9 @@ class AppMain extends LitElement
|
||||
|
||||
firstUpdated() {
|
||||
this.initRoute();
|
||||
window.addEventListener("popstate", (event) => {
|
||||
this.initRoute();
|
||||
});
|
||||
}
|
||||
|
||||
updated(changedProperties) {
|
||||
@@ -268,10 +306,15 @@ class AppMain extends LitElement
|
||||
|
||||
onStartLoad(event) {
|
||||
// just redirect right away?
|
||||
this.pageParams.set("source", event.detail.sourceUrl);
|
||||
|
||||
if (!event.detail.isFile) {
|
||||
this.pageParams.set("source", event.detail.sourceUrl);
|
||||
window.location.search = this.pageParams.toString();
|
||||
return;
|
||||
} else {
|
||||
const url = new URL(window.location.href);
|
||||
url.search = this.pageParams.toString();
|
||||
window.history.pushState({}, "", url.toString());
|
||||
}
|
||||
|
||||
this.sourceUrl = event.detail.sourceUrl;
|
||||
@@ -289,7 +332,7 @@ class AppMain extends LitElement
|
||||
return;
|
||||
}
|
||||
|
||||
this.initRoute();
|
||||
//this.initRoute();
|
||||
|
||||
if (event.detail.sourceUrl !== this.sourceUrl) {
|
||||
this.pageParams.set("source", event.detail.sourceUrl);
|
||||
@@ -468,7 +511,7 @@ You can select a file to upload from the main page by clicking the \'Choose File
|
||||
return html`
|
||||
<section class="container">
|
||||
<div class="has-text-centered is-flex">
|
||||
<fa-icon class="logo" size="96px" .svg=${rwpLogo}></fa-icon>
|
||||
<fa-icon class="logo" size="96px" .svg=${rwpAnimLogo}></fa-icon>
|
||||
</div>
|
||||
<div class="level">
|
||||
<p class="level-item">Loading <b>${this.sourceUrl}</b>...</p>
|
||||
@@ -620,6 +663,9 @@ class WrIndex extends LitElement
|
||||
div.field.has-addons {
|
||||
flex: auto;
|
||||
}
|
||||
form {
|
||||
flex-grow: 1;
|
||||
}
|
||||
button.is-loading {
|
||||
line-height: 1.5em;
|
||||
height: 1.5em;
|
||||
@@ -645,46 +691,48 @@ class WrIndex extends LitElement
|
||||
render() {
|
||||
return html`
|
||||
<section class="section no-top-padding">
|
||||
<div class="container">
|
||||
<nav class="panel is-warning">
|
||||
<p class="panel-heading">Load Web Archive</p>
|
||||
<div class="extra-padding panel-block file has-name">
|
||||
<form class="container is-flex" @submit="${this.onStartLoad}">
|
||||
<label class="file-label">
|
||||
<input class="file-input"
|
||||
@click="${(e) => e.currentTarget.value = null}"
|
||||
@change=${this.onChooseFile} type="file" id="fileupload" name="fileupload">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<fa-icon size="0.9em" .svg=${fasUpload}></fa-icon>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose File...
|
||||
</span>
|
||||
${!IS_APP ? html`
|
||||
<p class="subtitle has-text-centered">Explore and Replay Interactive Archived Webpages Directly in your Browser.</p>
|
||||
` : ``}
|
||||
<nav class="panel is-warning">
|
||||
<p class="panel-heading">Load Web Archive</p>
|
||||
<div class="extra-padding panel-block file has-name">
|
||||
<form class="content is-flex" @submit="${this.onStartLoad}">
|
||||
<label class="file-label">
|
||||
<input class="file-input"
|
||||
@click="${(e) => e.currentTarget.value = null}"
|
||||
@change=${this.onChooseFile} type="file" id="fileupload" name="fileupload">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<fa-icon size="0.9em" .svg=${fasUpload}></fa-icon>
|
||||
</span>
|
||||
</label>
|
||||
<span class="file-label">
|
||||
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|s3):\/\/.*\.(warc|warc.gz|har|zip|waz))|(googledrive:\/\/[^\/\s]+)$"
|
||||
.value="${this.fileDisplayName}"
|
||||
@input="${this.onInput}"
|
||||
autocomplete="off"
|
||||
placeholder="Choose a local file or enter a URL for a (WARC, HAR, WBN, or ZIP) archive">
|
||||
</p>
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary">Load</button>
|
||||
</div>
|
||||
<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|s3):\/\/.*\.(warc|warc.gz|har|zip|wacz))|(googledrive:\/\/.+)"
|
||||
.value="${this.fileDisplayName}"
|
||||
@input="${this.onInput}"
|
||||
autocomplete="off"
|
||||
placeholder="Choose a local file or enter a URL for a (WARC, HAR, WBN, or WACZ) archive">
|
||||
</p>
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary">Load</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
<section class="container">
|
||||
|
||||
<section class="section no-top-padding">
|
||||
<nav class="panel is-light">
|
||||
<p class="panel-heading">Loaded Archives</p>
|
||||
<div class="coll-list">
|
||||
@@ -789,7 +837,7 @@ class WrColl extends LitElement
|
||||
const newHash = "#" + new URLSearchParams(this.tabData).toString();
|
||||
if (newHash !== this._locationHash) {
|
||||
this._locationHash = newHash;
|
||||
if (this._replaceLoc) {
|
||||
if (this._replaceLoc || Object.keys(changedProperties.get("tabData")).length === 0) {
|
||||
const newLoc = new URL(window.location.href);
|
||||
newLoc.hash = this._locationHash;
|
||||
window.history.replaceState({}, "", newLoc.href);
|
||||
@@ -900,13 +948,13 @@ class WrColl extends LitElement
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
@media screen and (min-width: ${!IS_APP ? css`1024px` : css`1134px`}) {
|
||||
.tab-label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 680px) {
|
||||
@media screen and (min-width: ${!IS_APP ? css`680px` : css`850px`}) {
|
||||
.main.tabs {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
@@ -997,7 +1045,7 @@ class WrColl extends LitElement
|
||||
<wr-coll-resources .collInfo="${this.collInfo}"
|
||||
urlSearch="${this.tabData.urlSearch || ""}"
|
||||
urlSearchType="${this.tabData.urlSearchType || ""}"
|
||||
.currMime="${this.tabData.currMime}"
|
||||
.currMime="${this.tabData.currMime || ""}"
|
||||
@coll-tab-nav="${this.onCollTabNav}" id="resources"
|
||||
class="is-paddingless ${this.tabData.view === 'resources' ? '' : 'is-hidden'}">
|
||||
</wr-coll-resources>
|
||||
@@ -1250,7 +1298,7 @@ class WrResources extends LitElement
|
||||
{
|
||||
static get filters() {
|
||||
return [
|
||||
{name: "HTML", filter: "text/html,text/xhtml"},
|
||||
{name: "HTML", filter: ""}, //default
|
||||
{name: "Images", filter: "image/"},
|
||||
{name: "Audio/Video", filter: "audio/,video/"},
|
||||
{name: "PDF", filter: "application/pdf"},
|
||||
@@ -1306,10 +1354,6 @@ class WrResources extends LitElement
|
||||
changedProperties.has("urlSearchType") ||
|
||||
changedProperties.has("currMime")) {
|
||||
|
||||
if (!this.currMime) {
|
||||
this.currMime = "text/html,text/xhtml";
|
||||
}
|
||||
|
||||
this.doLoadResources();
|
||||
const data = {
|
||||
urlSearch: this.urlSearch,
|
||||
@@ -1345,7 +1389,20 @@ class WrResources extends LitElement
|
||||
url = "https://" + url;
|
||||
}
|
||||
|
||||
const mime = this.currMime === "all" ? "" : this.currMime;
|
||||
let mime;
|
||||
|
||||
switch (this.currMime) {
|
||||
case "all":
|
||||
mime = "";
|
||||
break;
|
||||
|
||||
case "":
|
||||
mime = "text/html,text/xhtml";
|
||||
break;
|
||||
|
||||
default:
|
||||
mime = this.currMime;
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({
|
||||
mime,
|
||||
@@ -1753,6 +1810,21 @@ class WrReplayPage extends LitElement
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.intro-panel {
|
||||
min-width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.intro-panel .panel-heading {
|
||||
font-size: 1.0em;
|
||||
}
|
||||
|
||||
.intro-panel .panel-block {
|
||||
padding: 1.0em;
|
||||
}
|
||||
|
||||
#datetime {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
@@ -1776,7 +1848,7 @@ class WrReplayPage extends LitElement
|
||||
render() {
|
||||
return html`
|
||||
${this.embed !== "replayonly" ? html`
|
||||
<div class="container replay-bar">
|
||||
<div class="replay-bar">
|
||||
<form @submit="${this.onSubmit}">
|
||||
<div class="field has-addons">
|
||||
<a id="fullscreen" class="button is-borderless" @click="${this.onFullscreenToggle}">
|
||||
@@ -1803,7 +1875,12 @@ class WrReplayPage extends LitElement
|
||||
${this.iframeUrl ? html`
|
||||
<iframe @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen"
|
||||
src="${this.iframeUrl}"></iframe>
|
||||
` : ``}
|
||||
` : html`
|
||||
<nav class="panel intro-panel">
|
||||
<p class="panel-heading">Replay Web Page</p>
|
||||
<p class="panel-block">Enter a URL above to replay it from the web archive!</p>
|
||||
</nav>
|
||||
`}
|
||||
|
||||
${this.isAuthable ? html`
|
||||
<div class="modal ${this.showAuth ? 'is-active' : ''}">
|
||||
@@ -1878,7 +1955,7 @@ class WrGdrive extends LitElement
|
||||
try {
|
||||
const sourceUrl = this.sourceUrl;
|
||||
const fileId = sourceUrl.slice("googledrive://".length);
|
||||
const publicCheckUrl = `${HELPER_PROXY}/g/${fileId}`;
|
||||
const publicCheckUrl = `${__HELPER_PROXY__}/g/${fileId}`;
|
||||
|
||||
let resp = null;
|
||||
try {
|
||||
@@ -2007,7 +2084,7 @@ class WrGdrive extends LitElement
|
||||
gauth(prompt, callback) {
|
||||
gapi.load('auth2', () => {
|
||||
gapi.auth2.authorize({
|
||||
client_id: GDRIVE_CLIENT_ID,
|
||||
client_id: __GDRIVE_CLIENT_ID__,
|
||||
scope: "https://www.googleapis.com/auth/drive.file",
|
||||
response_type: "token",
|
||||
prompt
|
||||
|
||||
+4
-4
File diff suppressed because one or more lines are too long
+15
-6
@@ -4,12 +4,18 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
// fake url used in app to serve files
|
||||
// can not use custom scheme due to service worker issues
|
||||
const APP_FILE_SERVE_PREFIX = "https://files.replayweb.page";
|
||||
const APP_FILE_SERVE_PREFIX = "http://files.replayweb.page";
|
||||
//const APP_FILE_SERVE_PREFIX = "file://files.replayweb.page";
|
||||
|
||||
|
||||
// helper proxy URL, run locally for app
|
||||
const HELPER_PROXY = "https://helper-proxy.webrecorder.workers.dev";
|
||||
|
||||
// GDrive client-id
|
||||
const GDRIVE_CLIENT_ID = "160798412227-tko4c82uopud11q105b2lvbogsj77hlg.apps.googleusercontent.com";
|
||||
|
||||
|
||||
|
||||
// if running in dev-server, build sw.js in dist/sw.js
|
||||
// to support hot-reloading, otherwise, build sw.js in root
|
||||
const IS_DEV_SERVER = process.env.WEBPACK_DEV_SERVER;
|
||||
|
||||
|
||||
const electronMainConfig = (env, argv) => {
|
||||
@@ -30,6 +36,7 @@ const electronMainConfig = (env, argv) => {
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
__APP_FILE_SERVE_PREFIX__ : JSON.stringify(APP_FILE_SERVE_PREFIX),
|
||||
__HELPER_PROXY__ : JSON.stringify(HELPER_PROXY)
|
||||
})
|
||||
]
|
||||
}
|
||||
@@ -63,7 +70,7 @@ const browserConfig = (env, argv) => {
|
||||
},
|
||||
|
||||
output: {
|
||||
path: path.join(__dirname, 'docs'),
|
||||
path: path.join(__dirname),
|
||||
filename: '[name].js',
|
||||
libraryTarget: 'self',
|
||||
globalObject: 'self',
|
||||
@@ -78,7 +85,7 @@ const browserConfig = (env, argv) => {
|
||||
compress: true,
|
||||
port: 9990,
|
||||
open: false,
|
||||
contentBase: path.join(__dirname, 'docs'),
|
||||
contentBase: path.join(__dirname),
|
||||
publicPath: '/'
|
||||
},
|
||||
|
||||
@@ -87,6 +94,8 @@ const browserConfig = (env, argv) => {
|
||||
new webpack.DefinePlugin({
|
||||
__SW_PATH__: JSON.stringify('./sw.js'),
|
||||
__APP_FILE_SERVE_PREFIX__ : JSON.stringify(APP_FILE_SERVE_PREFIX),
|
||||
__HELPER_PROXY__ : JSON.stringify(HELPER_PROXY),
|
||||
__GDRIVE_CLIENT_ID__ : JSON.stringify(GDRIVE_CLIENT_ID)
|
||||
}),
|
||||
],
|
||||
|
||||
|
||||
@@ -3514,7 +3514,7 @@ mime-db@1.44.0, "mime-db@>= 1.43.0 < 2":
|
||||
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
|
||||
integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
|
||||
|
||||
mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
|
||||
mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
|
||||
version "2.1.27"
|
||||
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
|
||||
integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
|
||||
@@ -6063,10 +6063,6 @@ widest-line@^3.1.0:
|
||||
dependencies:
|
||||
string-width "^4.0.0"
|
||||
|
||||
"wombat@github:https://github.com/webrecorder/wombat":
|
||||
version "3.0.0"
|
||||
resolved "https://codeload.github.com/webrecorder/wombat/tar.gz/753ea8dd6ec0e257e21f589cb08a85f6a3f7443c"
|
||||
|
||||
worker-farm@^1.7.0:
|
||||
version "1.7.0"
|
||||
resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
|
||||
|
||||
Reference in New Issue
Block a user