refactor: extract video-quality-form

Author: christian-fei

client/components/video-quality-form.js

@@ -0,0 +1,61 @@
+class VideoQualityForm extends HTMLElement {
+  constructor () {
+    super()
+  }
+  connectedCallback () {
+    this.render()
+    this.registerEvents()
+
+    window.fetch('/api/video-quality', {
+      method: 'GET'
+    }).then(response => response.json())
+    .then((videoQuality) => {
+      console.log('video quality', videoQuality)
+      this.querySelector('#video-quality').value = +videoQuality
+    })
+    .catch(error => console.error('Error:', error))
+  }
+  disconnectedCallback () {
+    this.unregisterEvents()
+  }
+  registerEvents () {
+    this.querySelector('#video-quality')
+    .addEventListener('change', this.setVideoQualityHandler.bind(this))
+  }
+  unregisterEvents () {
+    this.querySelector('#video-quality')
+    .removeEventListener('change', this.setVideoQualityHandler.bind(this))
+  }
+  render () {
+    this.innerHTML = /*html*/`
+      <form>
+        <div class="flex space-between">
+          <div>
+            Video quality
+          </div>
+          <select name="video-quality" id="video-quality">
+            <option value="360">360</option>
+            <option value="480">480</option>
+            <option value="720">720</option>
+            <option value="1080">1080</option>
+            <option value="1440">1440</option>
+            <option value="2160">2160</option>
+          </select>
+        </div>
+      </form>
+    `
+  }
+
+  setVideoQualityHandler (event) {
+    event.preventDefault()
+    console.log('change video quality', event.target.value)
+    window.fetch('/api/video-quality', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: event.target.value
+    })
+  }
+}
+customElements.define('video-quality-form', VideoQualityForm)

client/index.html

@@ -68,21 +68,7 @@ <h2>Settings </h2>
         <div><small>Show the creators chosen thumbnail, or a neutral one based on the actual video frames</small></div>
       </form>
       <br>
-      <form>
-        <div class="flex space-between">
-          <div>
-            Video quality
-          </div>
-          <select name="video-quality" id="video-quality">
-            <option value="360">360</option>
-            <option value="480">480</option>
-            <option value="720">720</option>
-            <option value="1080">1080</option>
-            <option value="1440">1440</option>
-            <option value="2160">2160</option>
-          </select>
-        </div>
-      </form>
+      <video-quality-form></video-quality-form>
       <br>
       <form>
         <div class="flex space-between">
@@ -121,6 +107,7 @@ <h1>404 Not Found</h1>
   <script type="module" src="/components/channels-list.js"></script>
   <script type="module" src="/components/video-element.js"></script>
   <script type="module" src="/components/add-channel-form.js"></script>
+  <script type="module" src="/components/video-quality-form.js"></script>
   <script type="module" src="/main.js"></script>
   <script type="module" src="/lib/router.js"></script>
 </body>

client/lib/router.js

@@ -69,29 +69,6 @@ const routes = {
     $showOriginalThumbnail.addEventListener('click', (event) => {
       store.toggle(store.showOriginalThumbnailKey)
     })
-
-    const $videoQuality = document.getElementById('video-quality')
-    $videoQuality.addEventListener('change', (event) => {
-      console.log('change video quality', event.target.value)
-      window.fetch('/api/video-quality', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: event.target.value
-      })
-    })
-    window.fetch('/api/video-quality', {
-      method: 'GET'
-    }).then(response => response.json())
-    .then((videoQuality) => {
-      console.log('video quality', videoQuality)
-      $videoQuality.value = +videoQuality
-    })
-    .catch(error => console.error('Error:', error))
-
-
-
 
     const $reclaimDiskSpace = document.getElementById('reclaim-disk-space')
     const $diskUsage = document.getElementById('disk-usage')

lib/server.js

@@ -78,6 +78,8 @@ export function createServer ({repo, connections = []}) {
       return fileHandler('client/components/video-element.js', 'application/javascript')(req, res)
     if (url.pathname === '/components/add-channel-form.js') 
       return fileHandler('client/components/add-channel-form.js', 'application/javascript')(req, res)
+    if (url.pathname === '/components/video-quality-form.js') 
+      return fileHandler('client/components/video-quality-form.js', 'application/javascript')(req, res)
     if (url.pathname === '/components/search-videos.js') 
       return fileHandler('client/components/search-videos.js', 'application/javascript')(req, res)
     if (url.pathname === '/components/channels-list.js')