Refactoring

src/js/background/model/player.js

@@ -15,6 +15,8 @@ define(function(require) {
                 //  Need to set the ID for Backbone.LocalStorage
                 id: 'Player',
                 //  Returns the elapsed time of the currently loaded song. Returns 0 if no song is playing
+                //  High-precision is sync'ed with the <video> element, regular is rounded up to the nearest second.
+                currentTimeHighPrecision: 0,
                 currentTime: 0,
                 //  API will fire a 'ready' event after initialization which indicates the player can now respond accept commands
                 ready: false,
@@ -98,6 +100,7 @@ define(function(require) {
                     //  It's helpful to keep currentTime set here because the progress bar in foreground might be visually set,
                     //  but until the song actually loads -- current time isn't set.
                     currentTime: timeInSeconds || 0,
+                    currentTimeHighPrecision: timeInSeconds || 0,
                     playOnActivate: false,
                     songToActivate: null
                 });
@@ -138,6 +141,7 @@ define(function(require) {
             this.set({
                 loadedSong: null,
                 currentTime: 0,
+                currentTimeHighPrecision: 0,
                 state: PlayerState.Unstarted
             });
         },
@@ -167,7 +171,10 @@ define(function(require) {
                     this.get('youTubePlayer').seekTo(timeInSeconds);
                 }
             } else {
-                this.set('currentTime', timeInSeconds);
+                this.set({
+                    currentTime: timeInSeconds,
+                    currentTimeHighPrecision: timeInSeconds
+                });
             }
         },
 
@@ -272,7 +279,10 @@ define(function(require) {
         _onYouTubeIFrameMessage: function(message) {
             //  It's better to be told when time updates rather than poll YouTube's API for the currentTime.
             if (!_.isUndefined(message.currentTime)) {
-                this.set('currentTime', message.currentTime);
+                this.set({
+                    currentTimeHighPrecision: message.currentTime,
+                    currentTime: Math.ceil(message.currentTime)
+                });
             }
 
             //  YouTube's API for seeking/buffering doesn't fire events reliably.

src/js/background/model/youTubePlayer.js

@@ -18,9 +18,6 @@
                 loading: false,
                 api: new YouTubePlayerAPI(),
                 iframeId: '',
-                //  Match on my specific iframe or else else this logic can leak into outside webpages and corrupt other YouTube embeds.
-                //  TODO: Keep this DRY with other area + leave comment for manifest.json.
-                youTubeEmbedUrl: '*://*.youtube.com/embed/*?enablejsapi=1&origin=chrome-extension://' + chrome.runtime.id,
                 //  Wait 6 seconds before each load attempt so that total time elapsed is one minute
                 maxLoadAttempts: 10,
                 loadAttemptDelay: 6000,

src/js/foreground/view/foregroundAreaView.js

@@ -104,6 +104,7 @@
             this.settings = Streamus.backgroundPage.settings;
             this.bindEntityEvents(this.player, this.playerEvents);
 
+            //  TODO: Pretty sure I should not be assigning like this.
             window.onunload = this._onWindowUnload.bind(this);
             window.onresize = this._onWindowResize.bind(this);
             window.onerror = this._onWindowError.bind(this);

src/js/inject/youTubeIFrameInject.js

@@ -15,26 +15,15 @@ $(function() {
                 flashLoaded: false
             });
 
-            var lastPostedTime = null;
-
-            videoStream.on('loadstart', function() {
-                lastPostedTime = null;
-            });
-
             //  TimeUpdate has awesome resolution, but we only display to the nearest second.
             //  So, round currentTime and only send a message when the rounded value has changed, not the actual value.
             videoStream.on('timeupdate', function() {
-                var currentTime = Math.ceil(this.currentTime);
-
-                if (currentTime !== lastPostedTime) {
-                    youTubeIFrameConnectRequestPort.postMessage({
-                        currentTime: currentTime
-                    });
-
-                    lastPostedTime = currentTime;
-                }
+                youTubeIFrameConnectRequestPort.postMessage({
+                    currentTime: this.currentTime
+                });
             });
 
+            //  TODO: I forget why I need this.
             videoStream.on('seeking', function() {
                 youTubeIFrameConnectRequestPort.postMessage({
                     seeking: true