Skip to content

Commit 88e9384

Browse files
ikreymerikreymer
committed
refactor: split WrRecColl from coll-info to coll.js
1 parent 7e1ad12 commit 88e9384

File tree

3 files changed

+148
-137
lines changed

3 files changed

+148
-137
lines changed

‎src/ui/app.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import fasPlus from "@fortawesome/fontawesome-free/svgs/solid/plus.svg";
99
import fasUpload from "@fortawesome/fontawesome-free/svgs/solid/upload.svg";
1010
//import fasCog from "@fortawesome/fontawesome-free/svgs/solid/cog.svg";
1111

12+
import "./coll";
1213
import "./coll-info";
1314
import "./coll-index";
1415
import "./recordembed";

‎src/ui/coll-info.js‎

Lines changed: 3 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { Coll, CollInfo } from "replaywebpage";
2-
3-
import { html, css, wrapCss, clickOnSpacebarPress, apiPrefix } from "replaywebpage/src/misc";
1+
import { html, css, wrapCss, apiPrefix } from "replaywebpage/src/misc";
42

53
import prettyBytes from "pretty-bytes";
64

@@ -14,140 +12,10 @@ import fasShare from "@fortawesome/fontawesome-free/svgs/solid/share.svg";
1412
import fasReshare from "@fortawesome/fontawesome-free/svgs/solid/retweet.svg";
1513
import fasX from "@fortawesome/fontawesome-free/svgs/solid/times.svg";
1614

15+
import { CollInfo } from "replaywebpage";
1716
import wrRec from "../../assets/recLogo.svg";
1817

1918

20-
//============================================================================
21-
class WrRecColl extends Coll
22-
{
23-
constructor() {
24-
super();
25-
this.browsable = false;
26-
this._sizeUpdater = null;
27-
this.totalSize = 0;
28-
}
29-
30-
static get properties() {
31-
return {
32-
...Coll.properties,
33-
34-
totalSize: { type: Number }
35-
};
36-
}
37-
38-
static get styles() {
39-
return wrapCss(WrRecColl.compStyles);
40-
}
41-
42-
static get compStyles() {
43-
return css`
44-
.rec-button {
45-
display: flex;
46-
flex-direction: row;
47-
margin: 0 1px;
48-
align-items: center;
49-
border: 1px darkgrey solid;
50-
border-radius: 16px;
51-
padding: 0 0.5em;
52-
min-width: max-content;
53-
}
54-
55-
.size-label {
56-
margin-left: 0.5em;
57-
font-weight: bold;
58-
}
59-
60-
${Coll.compStyles}
61-
`;
62-
}
63-
64-
updated(changedProperties) {
65-
if (changedProperties.has("embed")) {
66-
if (this.embed && !this._sizeUpdater) {
67-
this._sizeUpdater = this.runSizeUpdater();
68-
}
69-
}
70-
71-
super.updated(changedProperties);
72-
}
73-
74-
async runSizeUpdater() {
75-
try {
76-
while (this.embed) {
77-
if (this.coll) {
78-
const resp = await fetch(`${apiPrefix}/c/${this.coll}`);
79-
const json = await resp.json();
80-
this.totalSize = json.size || 0;
81-
}
82-
await new Promise(resolve => setTimeout(resolve, 3000));
83-
}
84-
} finally {
85-
this._sizeUpdater = null;
86-
}
87-
}
88-
89-
renderExtraToolbar(isDropdown = false) {
90-
if (this.embed) {
91-
if (!isDropdown) {
92-
return html`
93-
<span class="rec-button" title="Recording">
94-
<span class="icon is-small" title="Recording">
95-
<fa-icon size="1.2em" aria-hidden="true" .svg="${wrRec}"></fa-icon>
96-
</span>
97-
<span class="size-label">${prettyBytes(this.totalSize)}</span>
98-
</span>
99-
`;
100-
} else {
101-
return html`
102-
<a href="${apiPrefix}/c/${this.coll}/dl?format=wacz&pages=all" role="button" class="dropdown-item" @keyup="${clickOnSpacebarPress}">
103-
<span class="icon is-small">
104-
<fa-icon size="1.0em" class="has-text-grey" aria-hidden="true" .svg="${fasDownload}"></fa-icon>
105-
</span>
106-
<span>Download Archive</span>
107-
</a>
108-
<hr class="dropdown-divider">
109-
`;
110-
}
111-
}
112-
113-
if (isDropdown) {
114-
return "";
115-
}
116-
117-
return html`
118-
<a href="#" role="button"
119-
class="${!isDropdown ? "button narrow is-borderless" : "dropdown-item is-hidden-tablet"}"
120-
title="Start Recording" aria-label="Start Recording" aria-controls="record"
121-
@click="${this.onShowStart}" @keyup="${clickOnSpacebarPress}">
122-
<span class="icon is-small">
123-
<fa-icon size="1.2em" aria-hidden="true" .svg="${wrRec}"></fa-icon>
124-
</span>
125-
</a>`;
126-
}
127-
128-
renderCollInfo() {
129-
return html`
130-
<div class="info-bg">
131-
<wr-rec-coll-info
132-
class="is-list"
133-
.coll="${this.collInfo}"
134-
?detailed="${true}"
135-
></wr-rec-coll-info>
136-
</div>`;
137-
}
138-
139-
onShowStart() {
140-
if (this.embed) {
141-
return;
142-
}
143-
144-
const coll = this.coll;
145-
const title = this.collInfo.title;
146-
const url = this.tabData.url;
147-
this.dispatchEvent(new CustomEvent("show-start", {detail: {coll, title, url}}));
148-
}
149-
}
150-
15119
//============================================================================
15220
class WrRecCollInfo extends CollInfo
15321
{
@@ -524,8 +392,6 @@ class WrRecCollInfo extends CollInfo
524392
}
525393
}
526394

527-
customElements.define("wr-rec-coll", WrRecColl);
528-
529395
customElements.define("wr-rec-coll-info", WrRecCollInfo);
530396

531-
export { WrRecColl, WrRecCollInfo, wrRec };
397+
export { WrRecCollInfo, wrRec };

‎src/ui/coll.js‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import { html, css, wrapCss, clickOnSpacebarPress, apiPrefix } from "replaywebpage/src/misc";
2+
3+
import fasDownload from "@fortawesome/fontawesome-free/svgs/solid/download.svg";
4+
5+
import prettyBytes from "pretty-bytes";
6+
7+
import { Coll } from "replaywebpage";
8+
import wrRec from "../../assets/recLogo.svg";
9+
10+
11+
//============================================================================
12+
class WrRecColl extends Coll
13+
{
14+
constructor() {
15+
super();
16+
this.browsable = false;
17+
this._sizeUpdater = null;
18+
this.totalSize = 0;
19+
}
20+
21+
static get properties() {
22+
return {
23+
...Coll.properties,
24+
25+
totalSize: { type: Number }
26+
};
27+
}
28+
29+
static get styles() {
30+
return wrapCss(WrRecColl.compStyles);
31+
}
32+
33+
static get compStyles() {
34+
return css`
35+
.rec-button {
36+
display: flex;
37+
flex-direction: row;
38+
margin: 0 1px;
39+
align-items: center;
40+
border: 1px darkgrey solid;
41+
border-radius: 16px;
42+
padding: 0 0.5em;
43+
min-width: max-content;
44+
}
45+
46+
.size-label {
47+
margin-left: 0.5em;
48+
font-weight: bold;
49+
}
50+
51+
${Coll.compStyles}
52+
`;
53+
}
54+
55+
updated(changedProperties) {
56+
if (changedProperties.has("embed")) {
57+
if (this.embed && !this._sizeUpdater) {
58+
this._sizeUpdater = this.runSizeUpdater();
59+
}
60+
}
61+
62+
super.updated(changedProperties);
63+
}
64+
65+
async runSizeUpdater() {
66+
try {
67+
while (this.embed) {
68+
if (this.coll) {
69+
const resp = await fetch(`${apiPrefix}/c/${this.coll}`);
70+
const json = await resp.json();
71+
this.totalSize = json.size || 0;
72+
}
73+
await new Promise(resolve => setTimeout(resolve, 3000));
74+
}
75+
} finally {
76+
this._sizeUpdater = null;
77+
}
78+
}
79+
80+
renderExtraToolbar(isDropdown = false) {
81+
if (this.embed) {
82+
if (!isDropdown) {
83+
return html`
84+
<span class="rec-button" title="Recording">
85+
<span class="icon is-small" title="Recording">
86+
<fa-icon size="1.2em" aria-hidden="true" .svg="${wrRec}"></fa-icon>
87+
</span>
88+
<span class="size-label">${prettyBytes(this.totalSize)}</span>
89+
</span>
90+
`;
91+
} else {
92+
return html`
93+
<a href="${apiPrefix}/c/${this.coll}/dl?format=wacz&pages=all" role="button" class="dropdown-item" @keyup="${clickOnSpacebarPress}">
94+
<span class="icon is-small">
95+
<fa-icon size="1.0em" class="has-text-grey" aria-hidden="true" .svg="${fasDownload}"></fa-icon>
96+
</span>
97+
<span>Download Archive</span>
98+
</a>
99+
<hr class="dropdown-divider">
100+
`;
101+
}
102+
}
103+
104+
if (isDropdown) {
105+
return "";
106+
}
107+
108+
return html`
109+
<a href="#" role="button"
110+
class="${!isDropdown ? "button narrow is-borderless" : "dropdown-item is-hidden-tablet"}"
111+
title="Start Recording" aria-label="Start Recording" aria-controls="record"
112+
@click="${this.onShowStart}" @keyup="${clickOnSpacebarPress}">
113+
<span class="icon is-small">
114+
<fa-icon size="1.2em" aria-hidden="true" .svg="${wrRec}"></fa-icon>
115+
</span>
116+
</a>`;
117+
}
118+
119+
renderCollInfo() {
120+
return html`
121+
<div class="info-bg">
122+
<wr-rec-coll-info
123+
class="is-list"
124+
.coll="${this.collInfo}"
125+
?detailed="${true}"
126+
></wr-rec-coll-info>
127+
</div>`;
128+
}
129+
130+
onShowStart() {
131+
if (this.embed) {
132+
return;
133+
}
134+
135+
const coll = this.coll;
136+
const title = this.collInfo.title;
137+
const url = this.tabData.url;
138+
this.dispatchEvent(new CustomEvent("show-start", {detail: {coll, title, url}}));
139+
}
140+
}
141+
142+
customElements.define("wr-rec-coll", WrRecColl);
143+
144+
export { WrRecColl };

0 commit comments

Comments
 (0)