refactor: extract manage-disk-space-form, reorder settings

Author: christian-fei

client/components/manage-disk-space-form.js

@@ -0,0 +1,56 @@
+class ManageDiskSpaceForm extends HTMLElement {
+  constructor () {
+    super()
+  }
+  connectedCallback () {
+    this.render()
+    this.registerEvents()
+
+    const $diskSpaceUsed = document.getElementById('disk-space-used')
+    window.fetch('/api/disk-usage')
+    .then(response => response.text())
+    .then((diskSpaceUsed) => {
+      $diskSpaceUsed.innerText = diskSpaceUsed
+    })
+    .catch(err => console.error(err))
+  }
+  disconnectedCallback () {
+    this.unregisterEvents()
+  }
+  registerEvents () {
+    this.querySelector('#reclaim-disk-space').addEventListener('click', this.reclaimDiskSpace.bind(this))
+  }
+  unregisterEvents () {
+    this.querySelector('#reclaim-disk-space').removeEventListener('click', this.reclaimDiskSpace.bind(this))
+  }
+  render () {
+    this.innerHTML = /*html*/`
+      <form>
+        <div class="flex space-between">
+          <div>
+            Delete downloaded videos you ignored to reclaim disk space
+          </div>
+          <button id="reclaim-disk-space" type="submit">Delete videos</button>
+        </div>
+        <div><small id="disk-usage">Currently <span id="disk-space-used"></span> of disk space used</small></div>
+      </form>
+    `
+  }
+
+  reclaimDiskSpace (event) {
+    event.preventDefault()
+    if (!confirm('About to delete downloaded videos, are you sure?')) return
+    console.log('reclaiming')
+    const $diskUsage = this.querySelector('#disk-usage')
+    window.fetch('/api/reclaim-disk-space', {
+      method: 'POST'
+    })
+    .then(() => {
+      $diskUsage.innerText = 'Successfully reclaimed disk space'
+    })
+    .catch((error) => {
+      $diskUsage.innerHTML = `Failed to reclaim disk space: <br><pre>${error.message}</pre>`
+    })
+  }
+}
+customElements.define('manage-disk-space-form', ManageDiskSpaceForm)

client/index.html

@@ -45,6 +45,10 @@ <h2>Settings </h2>
       <br>
       <add-channel-form></add-channel-form>
       <br>
+      <video-quality-form></video-quality-form>
+      <br>
+      <manage-disk-space-form></manage-disk-space-form>
+      <br>
       <form>
         <label for="show-thumbnails">
           Show video thumbnails 
@@ -67,19 +71,6 @@ <h2>Settings </h2>
         <input type="checkbox" id="show-original-thumbnail"/>
         <div><small>Show the creators chosen thumbnail, or a neutral one based on the actual video frames</small></div>
       </form>
-      <br>
-      <video-quality-form></video-quality-form>
-      <br>
-      <form>
-        <div class="flex space-between">
-          <div>
-            Delete downloaded videos you ignored to reclaim disk space
-          </div>
-          <button id="reclaim-disk-space" type="submit">Delete videos</button>
-        </div>
-        <div><small id="disk-usage">Currently <span id="disk-space-used"></span> of disk space used</small></div>
-      </form>
-      <br>
     </div>
   </template>
 
@@ -100,6 +91,7 @@ <h1>404 Not Found</h1>
   <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="/components/manage-disk-space-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 $reclaimDiskSpace = document.getElementById('reclaim-disk-space')
-    const $diskUsage = document.getElementById('disk-usage')
-    const $diskSpaceUsed = document.getElementById('disk-space-used')
-    window.fetch('/api/disk-usage')
-    .then(response => response.text())
-    .then((diskSpaceUsed) => {
-      $diskSpaceUsed.innerText = diskSpaceUsed
-    })
-    $reclaimDiskSpace.addEventListener('click', (event) => {
-      event.preventDefault()
-      if (!confirm('About to delete downloaded videos, are you sure?')) return
-      console.log('reclaiming')
-      window.fetch('/api/reclaim-disk-space', {
-        method: 'POST'
-      })
-      .then(() => {
-        $diskUsage.innerText = 'Successfully reclaimed disk space'
-      })
-      .catch((error) => {
-        $diskUsage.innerHTML = `Failed to reclaim disk space: <br><pre>${error.message}</pre>`
-      })
-    })    
   } },
   '/404': { template: document.getElementById('not-found-template'), async initialize () {
     document.getElementById('search').setAttribute('disabled', 'disabled')

lib/server.js

@@ -82,6 +82,8 @@ export function createServer ({repo, connections = []}) {
       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/manage-disk-space-form.js') 
+      return fileHandler('client/components/manage-disk-space-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')