Skip to content

Commit 86619a6

Browse files
christian-feichristian-fei
committed
chore: unify components
1 parent 03f9695 commit 86619a6

6 files changed

+65
-40
lines changed

‎client/components/add-channel-form.js

+8-3
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,21 @@ class AddChannelForm extends HTMLElement {
44
}
55
connectedCallback () {
66
this.render()
7-
this.registerEvents()
87
}
98
disconnectedCallback () {
109
this.unregisterEvents()
1110
}
1211
registerEvents () {
13-
this.querySelector('form').addEventListener('submit', this.addChannelHandler.bind(this))
12+
if (this.querySelector('form'))
13+
this.querySelector('form').addEventListener('submit', this.addChannelHandler.bind(this))
1414
}
1515
unregisterEvents () {
16-
this.querySelector('form').removeEventListener('submit', this.addChannelHandler.bind(this))
16+
if (this.querySelector('form'))
17+
this.querySelector('form').removeEventListener('submit', this.addChannelHandler.bind(this))
1718
}
1819
render () {
20+
this.unregisterEvents()
21+
1922
this.innerHTML = /*html*/`
2023
<form id="add-channel-form">
2124
<div class="flex space-between">
@@ -26,6 +29,8 @@ class AddChannelForm extends HTMLElement {
2629
<div class="status"></div>
2730
</form>
2831
`
32+
33+
this.registerEvents()
2934
}
3035

3136
addChannelHandler (event) {

‎client/components/channels-list.js

+12-12
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ class ChannelsList extends HTMLElement {
66
connectedCallback () {
77
this.render()
88
}
9+
disconnectedCallback () {
10+
this.unregisterEvents()
11+
}
12+
913
static get observedAttributes() {
1014
return ['data-list'];
1115
}
@@ -18,28 +22,24 @@ class ChannelsList extends HTMLElement {
1822
this.render()
1923
}
2024
}
21-
disconnectedCallback () {
22-
this.deregisterEvents()
23-
}
24-
registerEvents () {
25-
}
26-
deregisterEvents () {
27-
}
2825
render () {
26+
this.unregisterEvents()
27+
2928
if (this.channels.length === 0) {
3029
this.classList.add('hide')
3130
return this.innerHTML = ``
3231
}
3332
this.classList.remove('hide')
3433

3534
this.$searchInput = document.querySelector('#search')
36-
this.unregisterEvents()
35+
3736
this.innerHTML = /*html*/`
38-
<details class="channels-container">
39-
<summary>Channels</summary>
40-
<div>${this.channels.map(channel => /*html*/`<span tabindex=0 data-channel="${channel}" class="channel">${channel}</span>`).join('')}</div>
41-
</details>
37+
<details class="channels-container">
38+
<summary>Channels</summary>
39+
<div>${this.channels.map(channel => /*html*/`<span tabindex=0 data-channel="${channel}" class="channel">${channel}</span>`).join('')}</div>
40+
</details>
4241
`
42+
4343
this.registerEvents()
4444
}
4545
registerEvents() {

‎client/components/search-videos.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,24 @@ class SearchVideos extends HTMLElement {
55
}
66
connectedCallback () {
77
this.render()
8-
this.registerEvents()
98
}
109
disconnectedCallback () {
11-
this.deregisterEvents()
10+
this.unregisterEvents()
1211
}
1312
registerEvents () {
14-
this.querySelector('input').addEventListener('keyup', this.searchHandler.bind(this))
13+
if (this.querySelector('input'))
14+
this.querySelector('input').addEventListener('keyup', this.searchHandler.bind(this))
1515
}
16-
deregisterEvents () {
17-
this.querySelector('input').removeEventListener('keyup', this.searchHandler.bind(this))
16+
unregisterEvents () {
17+
if (this.querySelector('input'))
18+
this.querySelector('input').removeEventListener('keyup', this.searchHandler.bind(this))
1819
}
1920
render () {
21+
this.unregisterEvents()
22+
2023
this.innerHTML = /*html*/`<input type="search" incremental="incremental" id="search" placeholder="Search videos or paste video url" autofocus>`
24+
25+
this.registerEvents()
2126
}
2227
searchHandler (event) {
2328
event.preventDefault()

‎client/components/video-element.js

+3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ class VideoElement extends HTMLElement {
3030
}
3131
render () {
3232
if (!this.video) return
33+
3334
this.unregisterEvents()
35+
3436
this.classList.add('video')
3537
this.dataset['videoId'] = this.video.id
3638
this.dataset['date'] = this.video.publishedAt
@@ -65,6 +67,7 @@ class VideoElement extends HTMLElement {
6567
<a href="https://www.youtube.com/watch?v=${this.video.id}" target="_blank">📺 external</a>
6668
</div>
6769
`
70+
6871
this.registerEvents()
6972
}
7073
registerEvents () {

‎client/components/video-filters.js

+24-15
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,38 @@ class VideoFilters extends HTMLElement {
44
}
55
connectedCallback () {
66
this.render()
7-
this.registerEvents()
87
}
98
disconnectedCallback () {
10-
this.deregisterEvents()
9+
this.unregisterEvents()
1110
}
1211
registerEvents () {
13-
this.querySelector('#show-downloaded-videos').addEventListener('click', this.handleDownloadedVideos.bind(this))
14-
this.querySelector('#show-summarized-videos').addEventListener('click', this.handleSummarizedVideos.bind(this))
15-
this.querySelector('#show-ignored-videos').addEventListener('click', this.handleIgnoredVideos.bind(this))
16-
}
17-
deregisterEvents () {
18-
this.querySelector('#show-downloaded-videos').removeEventListener('click', this.handleDownloadedVideos.bind(this))
19-
this.querySelector('#show-summarized-videos').removeEventListener('click', this.handleSummarizedVideos.bind(this))
20-
this.querySelector('#show-ignored-videos').removeEventListener('click', this.handleIgnoredVideos.bind(this))
12+
if (this.querySelector('#show-downloaded-videos'))
13+
this.querySelector('#show-downloaded-videos').addEventListener('click', this.handleDownloadedVideos.bind(this))
14+
if (this.querySelector('#show-summarized-videos'))
15+
this.querySelector('#show-summarized-videos').addEventListener('click', this.handleSummarizedVideos.bind(this))
16+
if (this.querySelector('#show-ignored-videos'))
17+
this.querySelector('#show-ignored-videos').addEventListener('click', this.handleIgnoredVideos.bind(this))
18+
}
19+
unregisterEvents () {
20+
if (this.querySelector('#show-downloaded-videos'))
21+
this.querySelector('#show-downloaded-videos').removeEventListener('click', this.handleDownloadedVideos.bind(this))
22+
if (this.querySelector('#show-summarized-videos'))
23+
this.querySelector('#show-summarized-videos').removeEventListener('click', this.handleSummarizedVideos.bind(this))
24+
if (this.querySelector('#show-ignored-videos'))
25+
this.querySelector('#show-ignored-videos').removeEventListener('click', this.handleIgnoredVideos.bind(this))
2126
}
2227
render () {
28+
this.unregisterEvents()
29+
2330
this.innerHTML = /*html*/`
24-
<div id="filters-container" class="flex space-around p-1">
25-
<button id="show-downloaded-videos">Downloaded videos</button>
26-
<button id="show-summarized-videos">Summarized videos</button>
27-
<button id="show-ignored-videos">Ignored videos</button>
28-
</div>
31+
<div id="filters-container" class="flex space-around p-1">
32+
<button id="show-downloaded-videos">Downloaded videos</button>
33+
<button id="show-summarized-videos">Summarized videos</button>
34+
<button id="show-ignored-videos">Ignored videos</button>
35+
</div>
2936
`
37+
38+
this.registerEvents()
3039
}
3140
handleDownloadedVideos(event) {
3241
event.target.classList.toggle('active')

‎client/components/video-quality-form.js

+8-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ class VideoQualityForm extends HTMLElement {
44
}
55
connectedCallback () {
66
this.render()
7-
this.registerEvents()
87

98
window.fetch('/api/video-quality', {
109
method: 'GET'
@@ -19,14 +18,16 @@ class VideoQualityForm extends HTMLElement {
1918
this.unregisterEvents()
2019
}
2120
registerEvents () {
22-
this.querySelector('#video-quality')
23-
.addEventListener('change', this.setVideoQualityHandler.bind(this))
21+
if (this.querySelector('#video-quality'))
22+
this.querySelector('#video-quality').addEventListener('change', this.setVideoQualityHandler.bind(this))
2423
}
2524
unregisterEvents () {
26-
this.querySelector('#video-quality')
27-
.removeEventListener('change', this.setVideoQualityHandler.bind(this))
25+
if (this.querySelector('#video-quality'))
26+
this.querySelector('#video-quality').removeEventListener('change', this.setVideoQualityHandler.bind(this))
2827
}
2928
render () {
29+
this.unregisterEvents()
30+
3031
this.innerHTML = /*html*/`
3132
<form>
3233
<div class="flex space-between">
@@ -44,6 +45,8 @@ class VideoQualityForm extends HTMLElement {
4445
</div>
4546
</form>
4647
`
48+
49+
this.registerEvents()
4750
}
4851

4952
setVideoQualityHandler (event) {

0 commit comments

Comments
 (0)