Break event listeners up into separate functions

1 files changed, 49 insertions, 25 deletions

diff --git a/ui.js b/ui.js
index 4f73fe0..65f62cf 100644
--- a/ui.js
+++ b/ui.js
@@ -139,36 +139,14 @@ class AppElement extends FocusElement {
 
     this.backend = backend
 
+    this.bindListeners()
+    this.attachListeners()
+
     this.config = Object.assign({
       menubarColor: 4, // blue
       stopPlayingUponQuit: true
     }, config)
 
-    this.backend.on('playing', (track, oldTrack) => {
-      if (track) {
-        this.playbackInfoElement.updateTrack(track)
-        if (this.queueListingElement.currentItem === oldTrack) {
-          this.queueListingElement.selectAndShow(track)
-        }
-      } else {
-        this.playbackInfoElement.clearInfo()
-      }
-      this.updateQueueLengthLabel()
-    })
-
-    this.backend.on('printStatusLine', data => {
-      this.playbackInfoElement.updateProgress(data, this.backend.player)
-      this.updateQueueLengthLabel()
-    })
-
-    this.backend.on('processMetadata progress', remaining => {
-      this.metadataStatusLabel.text = `Processing metadata - ${remaining} to go.`
-    })
-
-    this.backend.on('queue updated', () => {
-      this.queueListingElement.buildItems()
-    })
-
     // TODO: Move edit mode stuff to the backend!
     this.undoManager = new UndoManager()
     this.markGrouplike = {name: 'Marked', items: []}
@@ -308,6 +286,52 @@ class AppElement extends FocusElement {
     })
   }
 
+  bindListeners() {
+    this.handlePlaying = this.handlePlaying.bind(this)
+    this.handlePrintStatusLine = this.handlePrintStatusLine.bind(this)
+    this.handleProcessMetadataProgress = this.handleProcessMetadataProgress.bind(this)
+    this.handleQueueUpdated = this.handleQueueUpdated.bind(this)
+  }
+
+  attachListeners() {
+    this.backend.on('playing', this.handlePlaying)
+    this.backend.on('printStatusLine', this.handlePrintStatusLine)
+    this.backend.on('processMetadata progress', this.handleProcessMetadataProgress)
+    this.backend.on('queue updated', this.handleQueueUpdated)
+  }
+
+  removeListeners() {
+    this.backend.removeListener('playing', this.handlePlaying)
+    this.backend.removeListener('printStatusLine', this.handlePrintStatusLine)
+    this.backend.removeListener('processMetadata progress', this.handleProcessMetadataProgress)
+    this.backend.removeListener('queue updated', this.handleQueueUpdated)
+  }
+
+  handlePlaying(track, oldTrack) {
+    if (track) {
+      this.playbackInfoElement.updateTrack(track)
+      if (this.queueListingElement.currentItem === oldTrack) {
+        this.queueListingElement.selectAndShow(track)
+      }
+    } else {
+      this.playbackInfoElement.clearInfo()
+    }
+    this.updateQueueLengthLabel()
+  }
+
+  handlePrintStatusLine(data) {
+    this.playbackInfoElement.updateProgress(data, this.backend.player)
+    this.updateQueueLengthLabel()
+  }
+
+  handleProcessMetadataProgress(remaining) {
+    this.metadataStatusLabel.text = `Processing metadata - ${remaining} to go.`
+  }
+
+  handleQueueUpdated() {
+    this.queueListingElement.buildItems()
+  }
+
   selected() {
     this.root.select(this.tabber)
   }