Fix seeking backwards breaking blur/glitch/colour, add some helpful whitespace

src/js/HuesCanvas.js

@@ -28,6 +28,7 @@
 class HuesCanvas {
     constructor(root, soundManager, core) {
         this.audio = soundManager;
+        soundManager.addEventListener("seek", this.onSeek.bind(this));
         core.addEventListener("newimage", this.setImage.bind(this));
         core.addEventListener("newcolour", this.setColour.bind(this));
         core.addEventListener("beat", this.beat.bind(this));
@@ -116,6 +117,17 @@ class HuesCanvas {
         this.trippyOn = localStorage["trippyMode"] == "on";
     }
     
+    onSeek() {
+        this.colourFadeStart = 0;
+        this.colourFade = false;
+        this.trippyStart = [0, 0];
+        this.sliceStart = 0;
+        this.blurStart = 0;
+        this.blurDistance = 0;
+        this.xBlur = false;
+        this.yBlur = false;
+    }
+
     resize() {
         // height is max 720px, we expand width to suit
         let height = this.core.root.clientHeight;

src/js/HuesCore.js

@@ -33,12 +33,14 @@ class HuesCore {
              * When everything has completely loaded and we're ready to go
              */
             loaded : [],
+            
             /* callback time(seconds)
              *
              * When the song time is updated - negative for buildup
              * Returns a floating point number denoting seconds
              */
             time : [],
+            
             /* callback blurUpdate(xPercent, yPercent)
              *
              * The current blur amounts, in percent of full blur
@@ -51,12 +53,14 @@ class HuesCore {
              * Song object is passed.
              */
             newsong : [],
+            
             /* callback newimage(image)
              *
              * Called on image change, whether user triggered or FULL AUTO mode.
              * Image object is passed.
              */
             newimage : [],
+            
             /* callback newcolour(colour, isFade)
              *
              * Called on colour change.
@@ -64,12 +68,14 @@ class HuesCore {
              * isFade: if the colour is fading from the previous value
              */
             newcolour : [],
+            
             /* callback newmode(mode)
              *
              * Called on mode change.
              * Mode is passed as a boolean.
              */
             newmode : [],
+            
             /* callback beat(beatString, beatIndex)
              *
              * Called on every new beat.
@@ -77,23 +83,27 @@ class HuesCore {
              * beatIndex is the beat index. Negative during buildups
              */
             beat : [],
+            
             /* callback invert(isInverted)
              *
              * Called whenever the invert state changes.
              * Invert state is passed as a boolean.
              */
             invert : [],
+            
             /* callback frame()
              *
              * Called on each new frame, at the end of all other frame processing
              */
             frame : [],
+            
             /* callback songstarted()
              *
              * Called when the song actually begins to play, not just when the
              * new song processing begins
              */
             songstarted : [],
+            
             /* callback settingsupdated()
              *
              * Called when settings are updated and should be re-read from localStorage

src/js/SoundManager.js

@@ -24,6 +24,15 @@
 
 class SoundManager {
     constructor(core) {
+        // Perhaps this will do more later
+        this.eventListeners = {
+            /* callback seek()
+            *
+            * Called when the audio has been seeked - reset time determined transforms
+            */
+            seek : []
+        }
+        
         this.core = core;
         this.playing = false;
         this.playbackRate = 1;
@@ -63,6 +72,33 @@ class SoundManager {
         this.maxBinLin = 0;
     }
     
+    callEventListeners(ev) {
+        let args = Array.prototype.slice.call(arguments, 1);
+        this.eventListeners[ev].forEach(function(callback) {
+            callback.apply(null, args);
+        });
+    }
+
+    addEventListener(ev, callback) {
+        ev = ev.toLowerCase();
+        if (typeof(this.eventListeners[ev]) !== "undefined") {
+            this.eventListeners[ev].push(callback);
+        } else {
+            throw Error("Unknown event: " + ev);
+        }
+    }
+
+    removeEventListener(ev, callback) {
+        ev = ev.toLowerCase();
+        if (typeof(this.eventListeners[ev]) !== "undefined") {
+            this.eventListeners[ev] = this.eventListeners[ev].filter(function(a) {
+                return (a !== callback);
+            });
+        } else {
+            throw Error("Unknown event: " + ev);
+        }
+    }
+
     init() {
         if(!this.initPromise) {
             this.initPromise = new Promise((resolve, reject) => {
@@ -235,6 +271,9 @@ class SoundManager {
         if(!this.song) {
             return;
         }
+        
+        this.callEventListeners("seek");
+        
         //console.log("Seeking to " + time);
         // Clamp the blighter
         time = Math.min(Math.max(time, -this.buildLength), this.loopLength);