viewer: load on file select but defer popup start

This seems to please both Firefox and Chrome.

1 files changed, 21 insertions, 12 deletions

diff --git a/beamer/viewer/viewer.js b/beamer/viewer/viewer.js
index ee79d47..85f4a91 100644
--- a/beamer/viewer/viewer.js
+++ b/beamer/viewer/viewer.js
@@ -23,13 +23,16 @@ class Viewer {
     this.fileInput = document.getElementById("fileInput");
     this.startButton = document.getElementById("startButton");
 
+    this.fileReader = new FileReader();
+    this.presentation = null;
+
     this._listenForInput();
   }
 
   load(source) {
+    const self = this;
     pdfjsLib.getDocument(source).then(function(pdf) {
-      const presentation = new Presentation(pdf);
-      presentation.start();
+      self.presentation = new Presentation(pdf);
     }).catch(function(error) {
       console.error(error);
       window.alert("Error while loading presentation:\n\n" + error.message);
@@ -38,24 +41,30 @@ class Viewer {
   }
 
   _readFile(file) {
-    const fileReader = new FileReader();
     const self = this;
-    fileReader.onload = function() {
-      const byteArray = new Uint8Array(this.result);
-      self.load(byteArray);
+    this.fileReader.onload = function() {
+      self._onFileLoaded(new Uint8Array(this.result));
     }
-  
-    fileReader.readAsArrayBuffer(file);
+
+    this.fileReader.abort();
+    this.fileReader.readAsArrayBuffer(file);
+  }
+
+  _onFileLoaded(bytes) {
+    this.load(bytes);
+    this.startButton.disabled = false;
   }
 
   _listenForInput() {
     const self = this;
-    fileInput.addEventListener("change", function(_event) {
-      self.startButton.disabled = false;
+    fileInput.addEventListener("change", function(event) {
+      self._readFile(event.target.files[0]);
     });
 
-    startButton.addEventListener("click", function(_event) {
-      self._readFile(self.fileInput.files[0]);
+    startButton.addEventListener("click", function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      self.presentation.start();
     });
 
     document.body.addEventListener("drop", function(event) {