refactor: unify custom elements

Author: christian-fei

client/components/add-channel-form.js

@@ -9,16 +9,12 @@ class AddChannelForm extends HTMLElement {
     this.unregisterEvents()
   }
   registerEvents () {
-    if (this.querySelector('form'))
-      this.querySelector('form').addEventListener('submit', this.addChannelHandler.bind(this))
+    this.querySelector('form').addEventListener('submit', this.addChannelHandler.bind(this))
   }
   unregisterEvents () {
-    if (this.querySelector('form'))
-      this.querySelector('form').removeEventListener('submit', this.addChannelHandler.bind(this))
+    this.querySelector('form').removeEventListener('submit', this.addChannelHandler.bind(this))
   }
   render () {
-    this.unregisterEvents()
-
     this.innerHTML = /*html*/`
       <form id="add-channel-form">
         <div class="flex space-between">

client/components/channels-list.js

@@ -9,29 +9,11 @@ class ChannelsList extends HTMLElement {
   disconnectedCallback () {
     this.unregisterEvents()
   }
-
-  static get observedAttributes() {
-    return ['data-list'];
-  }
-
-  attributeChangedCallback(name, _, newValue) {
-    if (name === 'data-list') {
-      const channels = JSON.parse(newValue).filter(Boolean)
-      channels.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
-      this.channels = channels
-      this.render()
-    }
-  }
+  
   render () {
-    this.unregisterEvents()
-
-    if (this.channels.length === 0) {
-      this.classList.add('hide')
-      return this.innerHTML = ``
-    }
-    this.classList.remove('hide')
+    if (this.channels.length === 0) this.classList.add('hide')
+    else this.classList.remove('hide')
 
-
     this.innerHTML = /*html*/`
       <details class="channels-container">
         <summary>Channels</summary>
@@ -42,6 +24,7 @@ class ChannelsList extends HTMLElement {
     this.registerEvents()
   }
   registerEvents() {
+
     const channels = this.querySelectorAll('.channel')
     channels.forEach(channel => window.utils.addClickListener(channel, this.channelClick.bind(this)))
   }

client/components/search-videos.js

@@ -5,6 +5,7 @@ class SearchVideos extends HTMLElement {
   }
   connectedCallback () {
     this.render()
+    this.registerEvents()
   }
   disconnectedCallback () {
     this.unregisterEvents()
@@ -18,11 +19,7 @@ class SearchVideos extends HTMLElement {
       this.querySelector('input').removeEventListener('keyup', this.searchHandler.bind(this))
   }
   render () {
-    this.unregisterEvents()
-
     this.innerHTML = /*html*/`<input type="search" incremental="incremental" id="search" placeholder="Search videos or paste video url" autofocus>`
-
-    this.registerEvents()
   }
   searchHandler (event) {
     event.preventDefault()

client/components/video-filters.js

@@ -4,38 +4,29 @@ class VideoFilters extends HTMLElement {
   }
   connectedCallback () {
     this.render()
+    this.registerEvents()
   }
   disconnectedCallback () {
     this.unregisterEvents()
   }
   registerEvents () {
-    if (this.querySelector('#show-downloaded-videos'))
-      this.querySelector('#show-downloaded-videos').addEventListener('click', this.handleDownloadedVideos.bind(this))
-    if (this.querySelector('#show-summarized-videos'))
-      this.querySelector('#show-summarized-videos').addEventListener('click', this.handleSummarizedVideos.bind(this))
-    if (this.querySelector('#show-ignored-videos'))
-      this.querySelector('#show-ignored-videos').addEventListener('click', this.handleIgnoredVideos.bind(this))
+    this.querySelector('#show-downloaded-videos').addEventListener('click', this.handleDownloadedVideos.bind(this))
+    this.querySelector('#show-summarized-videos').addEventListener('click', this.handleSummarizedVideos.bind(this))
+    this.querySelector('#show-ignored-videos').addEventListener('click', this.handleIgnoredVideos.bind(this))
   }
   unregisterEvents () {
-    if (this.querySelector('#show-downloaded-videos'))
-      this.querySelector('#show-downloaded-videos').removeEventListener('click', this.handleDownloadedVideos.bind(this))
-    if (this.querySelector('#show-summarized-videos'))
-      this.querySelector('#show-summarized-videos').removeEventListener('click', this.handleSummarizedVideos.bind(this))
-    if (this.querySelector('#show-ignored-videos'))
-      this.querySelector('#show-ignored-videos').removeEventListener('click', this.handleIgnoredVideos.bind(this))
-  }
-  render () {
-    this.unregisterEvents()
-    
+    this.querySelector('#show-downloaded-videos').removeEventListener('click', this.handleDownloadedVideos.bind(this))
+    this.querySelector('#show-summarized-videos').removeEventListener('click', this.handleSummarizedVideos.bind(this))
+    this.querySelector('#show-ignored-videos').removeEventListener('click', this.handleIgnoredVideos.bind(this))
+  }
+  render () {    
     this.innerHTML = /*html*/`
       <div id="filters-container" class="flex space-around p-1">
         <button id="show-downloaded-videos">Downloaded videos</button>
         <button id="show-summarized-videos">Summarized videos</button>
         <button id="show-ignored-videos">Ignored videos</button>
       </div>
     `
-
-    this.registerEvents()
   }
   handleDownloadedVideos(event) {
     event.target.classList.toggle('active')

client/components/video-quality-form.js

@@ -4,6 +4,7 @@ class VideoQualityForm extends HTMLElement {
   }
   connectedCallback () {
     this.render()
+    this.registerEvents()
 
     window.fetch('/api/video-quality', {
       method: 'GET'
@@ -18,16 +19,12 @@ class VideoQualityForm extends HTMLElement {
     this.unregisterEvents()
   }
   registerEvents () {
-    if (this.querySelector('#video-quality'))
-      this.querySelector('#video-quality').addEventListener('change', this.setVideoQualityHandler.bind(this))
+    this.querySelector('#video-quality').addEventListener('change', this.setVideoQualityHandler.bind(this))
   }
   unregisterEvents () {
-    if (this.querySelector('#video-quality'))
-      this.querySelector('#video-quality').removeEventListener('change', this.setVideoQualityHandler.bind(this))
+    this.querySelector('#video-quality').removeEventListener('change', this.setVideoQualityHandler.bind(this))
   }
   render () {
-    this.unregisterEvents()
-
     this.innerHTML = /*html*/`
       <form>
         <div class="flex space-between">
@@ -45,8 +42,6 @@ class VideoQualityForm extends HTMLElement {
         </div>
       </form>
     `
-
-    this.registerEvents()
   }
 
   setVideoQualityHandler (event) {