Finish refactoring player [untested]

www/assets/js/callbacks.js

@@ -853,30 +853,23 @@ Callbacks = {
         if(data.type != "sc" && PLAYER.type == "sc")
             // [](/goddamnitmango)
             fixSoundcloudShit();
+
         if(data.type != "jw" && PLAYER.type == "jw") {
             // Is it so hard to not mess up my DOM?
             $("<div/>").attr("id", "ytapiplayer")
                 .insertBefore($("#ytapiplayer_wrapper"));
             $("#ytapiplayer_wrapper").remove();
         }
+
         if(data.type != PLAYER.type) {
-            if(data.type === "vi" && typeof $f !== "function") {
+            loadMediaPlayer(data);
-                setTimeout(function () {
-                    Callbacks.changeMedia(data);
-                }, 100);
-                return;
-            }
-            PLAYER = new Player(data);
-        }
-        if(PLAYER.update) {
-            PLAYER.update(data);
         }
+
+        handleMediaUpdate(data);
     },
 
     mediaUpdate: function(data) {
-        if(PLAYER.update) {
+        handleMediaUpdate(data);
-            PLAYER.update(data);
-        }
     },
 
     setPlaylistLocked: function(data) {

www/assets/js/player.js

@@ -11,67 +11,24 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 var VIMEO_FLASH = false;
 
-var Player = function(data) {
+var constructors = {
-    if(!data) {
+    "yt": YouTubePlayer,
-        data = {
+    "vi": VIMEO_FLASH ? VimeoFlashPlayer : VimeoPlayer,
-            id: "",
+    "dm": DailymotionPlayer,
-            type: "null"
+    "sc": SouncloudPlayer,
-        };
+    "li": LivestreamPlayer,
-    }
+    "tw": TwitchTVPlayer,
-    this.id = data.id;
+    "jt": JustinTVPlayer,
-    this.type = data.type;
+    "us": UstreamPlayer,
-    this.length = data.length;
+    "rt": RTMPPlayer,
-    this.currentTime = data.currentTime || 0;
+    "im": ImgurPlayer,
-    this.diff = 0;
+    "cu": CustomPlayer
+};
 
-    function postInit() {
+function loadMediaPlayer(data) {
-        this.load(data);
+    if(data.type in constructors) {
-    }
+        PLAYER = new constructors[data.type](data);
-    postInit.bind(this);
+        PLAYER.type = data.type;
-
-    switch(this.type) {
-        case "yt":
-            this.initYouTube();
-            break;
-        case "vi":
-            if(VIMEO_FLASH)
-                this.initVimeoFlash();
-            else
-                this.initVimeo();
-            break;
-        case "dm":
-            this.initDailymotion();
-            break;
-        case "sc":
-            this.initSoundcloud();
-            break;
-        case "li":
-            this.initLivestream();
-            break;
-        case "tw":
-            this.initTwitch();
-            break;
-        case "jt":
-            this.initJustinTV();
-            break;
-        case "rt":
-            this.initRTMP();
-            break;
-        case "jw":
-            this.initJWPlayer();
-            break;
-        case "us":
-            this.initUstream();
-            break;
-        case "im":
-            this.initImgur();
-            break;
-        case "cu":
-            this.initCustom();
-            break;
-        default:
-            this.nullPlayer();
-            break;
     }
 }
 
@@ -473,302 +430,377 @@ var SoundcloudPlayer = function (data) {
     };
 };
 
-Player.prototype.initLivestream = function() {
+var LivestreamPlayer = function (data) {
-    this.removeOld();
+    removeOld();
-    var flashvars = {channel: this.id};
+    var self = this;
-    var params = {AllowScriptAccess: "always"};
+    self.videoId = data.id;
-    swfobject.embedSWF("http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf", "ytapiplayer", VWIDTH, VHEIGHT, "9.0.0", "expressInstall.swf", flashvars, params);
+    self.init = function () {
-
+        var flashvars = { channel: self.videoId };
-    this.load = function(data) {
+        var params = { AllowScriptAccess: "always" };
-        this.id = data.id;
+        swfobject.embedSWF(
-        this.initLivestream();
+            "http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf",
-    }
+            "ytapiplayer",
-
+            VWIDTH, VHEIGHT,
-    this.pause = function() { }
+            "9.0.0",
-
+            "expressInstall.swf",
-    this.play = function() { }
+            flashvars,
-
+            params
-    this.isPaused = function() { }
+        );
-
-    this.getTime = function() { }
-
-    this.seek = function() { }
-}
-
-Player.prototype.initTwitch = function() {
-    this.removeOld();
-    var url = "http://www.twitch.tv/widgets/live_embed_player.swf?channel="+this.id;
-    var params = {
-        allowFullScreen:"true",
-        allowScriptAccess:"always",
-        allowNetworking:"all",
-        movie:"http://www.twitch.tv/widgets/live_embed_player.swf",
-        id: "live_embed_player_flash",
-        flashvars:"hostname=www.twitch.tv&channel="+this.id+"&auto_play=true&start_volume=100"
     };
-    swfobject.embedSWF( url, "ytapiplayer", VWIDTH, VHEIGHT, "8", null, null, params, {} );
 
-    this.load = function(data) {
+    self.init();
-        this.id = data.id;
-        this.initTwitch();
-    }
 
-    this.pause = function() { }
+    self.load = function(data) {
-
+        self.videoId = data.id;
-    this.play = function() { }
+        self.init();
-
-    this.isPaused = function() { }
-
-    this.getTime = function() { }
-
-    this.seek = function() { }
-}
-
-Player.prototype.initJustinTV = function() {
-    this.removeOld();
-    var url = "http://www.justin.tv/widgets/live_embed_player.swf?channel="+this.id;
-    var params = {
-        allowFullScreen:"true",
-        allowScriptAccess:"always",
-        allowNetworking:"all",
-        movie:"http://www.justin.tv/widgets/live_embed_player.swf",
-        id: "live_embed_player_flash",
-        flashvars:"hostname=www.justin.tv&channel="+this.id+"&auto_play=true&start_volume=100"
     };
-    swfobject.embedSWF( url, "ytapiplayer", VWIDTH, VHEIGHT, "8", null, null, params, {} );
 
-    this.load = function(data) {
+    self.pause = function () { };
-        this.id = data.id;
-        this.initJustinTV();
-    }
 
-    this.pause = function() { }
+    self.play = function () { };
 
-    this.play = function() { }
+    self.isPaused = function () { };
 
-    this.isPaused = function() { }
+    self.getTime = function () { };
 
-    this.getTime = function() { }
+    self.seek = function () { };
-
-    this.seek = function() { }
 }
 
-Player.prototype.initRTMP = function() {
+var TwitchTVPlayer = function (data) {
-    this.removeOld();
+    removeOld();
-    var url = "http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf";
+    var self = this;
-    var src = encodeURIComponent(this.id);
+    self.videoId = data.id;
-    var params = {
+    self.init = function () {
-            allowFullScreen:"true",
+        var url = "http://www.twitch.tv/widgets/live_embed_player.swf?channel="+self.videoId;
-            allowScriptAccess:"always",
+        var params = {
-            allowNetworking:"all",
+            allowFullScreen: "true",
-            wMode:"direct",
+            allowScriptAccess: "always",
-            movie:"http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf",
+            allowNetworking: "all",
-            flashvars:"src="+src+"&streamType=live&autoPlay=true"
+            movie: "http://www.twitch.tv/widgets/live_embed_player.swf",
+            id: "live_embed_player_flash",
+            flashvars: "hostname=www.twitch.tv&channel="+self.videoId+"&auto_play=true&start_volume=100"
         };
-    swfobject.embedSWF(url, "ytapiplayer", VWIDTH, VHEIGHT, "8", null, null, params, {} );
+        swfobject.embedSWF(url,
+            "ytapiplayer",
+            VWIDTH, VHEIGHT,
+            "8", 
+            null, null,
+            params,
+            {}
+        );
+    };
 
-    this.load = function(data) {
+    self.init();
-        this.id = data.id;
-        this.initRTMP();
-    }
 
-    this.pause = function() { }
+    self.load = function (data) {
+        self.videoId = data.id;
+        self.init();
+    };
 
-    this.play = function() { }
+    self.pause = function () { };
 
-    this.isPaused = function() { }
+    self.play = function () { };
 
-    this.getTime = function() { }
+    self.isPaused = function () { };
 
-    this.seek = function() { }
+    self.getTime = function () { };
+
+    self.seek = function () { };
 }
 
-Player.prototype.initJWPlayer = function() {
+var JustinTVPlayer = function (data) {
-    if(typeof jwplayer == "undefined") {
+    removeOld();
-        setTimeout(function() {
+    var self = this;
-            this.initJWPlayer();
+    self.videoId = data.id;
-        }.bind(this), 100);
+    self.init = function () {
-        return;
+        var url = "http://www.justin.tv/widgets/live_embed_player.swf?channel="+self.videoId;
-    }
+        var params = {
-    this.removeOld();
+            allowFullScreen: "true",
+            allowScriptAccess: "always",
+            allowNetworking: "all",
+            movie: "http://www.justin.tv/widgets/live_embed_player.swf",
+            id: "live_embed_player_flash",
+            flashvars: "hostname=www.justin.tv&channel="+self.videoId+"&auto_play=true&start_volume=100"
+        };
+        swfobject.embedSWF(url,
+            "ytapiplayer",
+            VWIDTH, VHEIGHT,
+            "8", 
+            null, null,
+            params,
+            {}
+        );
+    };
 
-    jwplayer("ytapiplayer").setup({
+    self.init();
-        file: this.id,
-        width: VWIDTH,
-        height: VHEIGHT,
-        autostart: true
-    });
 
-    jwplayer().onPlay(function() {
+    self.load = function (data) {
-        this.paused = false;
+        self.videoId = data.id;
-    }.bind(this));
+        self.init();
-    jwplayer().onPause(function() {
+    };
-        this.paused = true;
-    }.bind(this));
-    jwplayer().onComplete(function() {
-        socket.emit("playNext");
-    });
 
-    this.load = function(data) {
+    self.pause = function () { };
-        this.id = data.id;
+
-        this.initJWPlayer();
+    self.play = function () { };
+
+    self.isPaused = function () { };
+
+    self.getTime = function () { };
+
+    self.seek = function () { };
+}
+
+var RTMPPlayer = function (data) {
+    removeOld();
+    var self = this;
+    self.videoId = data.id;
+    self.init = function () {
+        var url = "http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf";
+        var src = encodeURIComponent(self.videoId);
+        var params = {
+            allowFullScreen: "true",
+            allowScriptAccess: "always",
+            allowNetworking: "all",
+            wMode: "direct",
+            movie: "http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf",
+            flashvars: "src="+src+"&streamType=live&autoPlay=true"
+        };
+        swfobject.embedSWF(url,
+            "ytapiplayer",
+            VWIDTH, VHEIGHT,
+            "8",
+            null, null,
+            params,
+            {}
+        );
+    };
+
+    self.init();
+
+    self.load = function (data) {
+        self.videoId = data.id;
+        self.init();
+    };
+
+    self.pause = function () { };
+
+    self.play = function () { };
+
+    self.isPaused = function () { };
+
+    self.getTime = function () { };
+
+    self.seek = function () { };
+}
+
+var JWPlayer = function (data) {
+    var self = this;
+    self.videoId = data.id;
+    self.init = function () {
+        removeOld();
+
+        jwplayer("ytapiplayer").setup({
+            file: self.videoId,
+            width: VWIDTH,
+            height: VHEIGHT,
+            autostart: true
+        });
+
+        jwplayer().onPlay(function() {
+            self.paused = false;
+            if(CLIENT.leader)
+                sendVideoUpdate();
+        });
+        jwplayer().onPause(function() {
+            self.paused = true;
+            if(CLIENT.leader)
+                sendVideoUpdate();
+        });
+        jwplayer().onComplete(function() {
+            socket.emit("playNext");
+        });
     }
 
-    this.pause = function() {
+    waitUntilDefined(window, "jwplayer", function () { self.init(); });
-        jwplayer().pause(true);
-    }
 
-    this.play = function() {
+    self.load = function (data) {
-        jwplayer().play(true);
+        self.videoId = data.id;
-    }
+        self.init();
+    };
 
-    this.isPaused = function(callback) {
+    self.pause = function () {
-        callback(jwplayer().getState() !== "PLAYING");
+        if(jwplayer)
-    }
+            jwplayer().pause(true);
+    };
 
-    this.getTime = function(callback) {
+    self.play = function () {
+        if(jwplayer)
+            jwplayer().play(true);
+    };
+
+    self.isPaused = function (callback) {
+        if(jwplayer)
+            callback(jwplayer().getState() !== "PLAYING");
+    };
+
+    self.getTime = function (callback) {
         // Only return time for non-live media
-        if(jwplayer().getDuration() != -1) {
+        if(jwplayer && jwplayer().getDuration() != -1) {
             callback(jwplayer().getPosition());
         }
-    }
+    };
 
-    this.seek = function(time) {
+    self.seek = function (time) {
-        jwplayer().seek(time);
+        if(jwplayer)
-    }
+            jwplayer().seek(time);
+    };
 }
 
-Player.prototype.initUstream = function() {
+var UstreamPlayer = function (data) {
-    var iframe = $("<iframe/>").insertBefore($("#ytapiplayer"));
+    var self = this;
-    $("#ytapiplayer").remove();
+    self.videoId = data.id;
-    iframe.attr("id", "ytapiplayer");
+    self.init = function () {
-    iframe.attr("width", VWIDTH);
+        var iframe = $("<iframe/>");
-    iframe.attr("height", VHEIGHT);
+        removeOld(iframe);
-    iframe.attr("src", "http://www.ustream.tv/embed/"+this.id+"?v=3&wmode=direct");
+        iframe.attr("width", VWIDTH);
-    iframe.attr("frameborder", "0");
+        iframe.attr("height", VHEIGHT);
-    iframe.attr("scrolling", "no");
+        iframe.attr("src", "http://www.ustream.tv/embed/"+self.videoId+"?v=3&wmode=direct");
-    iframe.css("border", "none");
+        iframe.attr("frameborder", "0");
+        iframe.attr("scrolling", "no");
+        iframe.css("border", "none");
+    };
+    
+    self.init();
 
-    this.load = function(data) {
+    self.load = function (data) {
-        this.id = data.id;
+        self.videoId = data.id;
-        this.initUstream();
+        self.init();
-    }
+    };
 
-    this.pause = function() { }
+    self.pause = function () { };
 
-    this.play = function() { }
+    self.play = function () { };
 
-    this.isPaused = function() { }
+    self.isPaused = function () { };
 
-    this.getTime = function() { }
+    self.getTime = function () { };
 
-    this.seek = function() { }
+    self.seek = function () { };
 }
 
-Player.prototype.initImgur = function() {
+var ImgurPlayer = function (data) {
-    var iframe = $("<iframe/>").insertBefore($("#ytapiplayer"));
+    var self = this;
-    $("#ytapiplayer").remove();
+    self.init = function () {
-    iframe.attr("id", "ytapiplayer");
+        var iframe = $("<iframe/>");
-    iframe.attr("width", VWIDTH);
+        removeOld(iframe);
-    iframe.attr("height", VHEIGHT);
+        iframe.attr("width", VWIDTH);
-    iframe.attr("src", "http://imgur.com/a/"+this.id+"/embed");
+        iframe.attr("height", VHEIGHT);
-    iframe.attr("frameborder", "0");
+        iframe.attr("src", "http://imgur.com/a/"+self.videoId+"/embed");
-    iframe.attr("scrolling", "no");
+        iframe.attr("frameborder", "0");
-    iframe.css("border", "none");
+        iframe.attr("scrolling", "no");
+        iframe.css("border", "none");
+    };
 
-    this.load = function(data) {
+    self.init();
-        this.id = data.id;
-        this.initImgur()
-    }
 
-    this.pause = function() { }
+    self.load = function (data) {
+        self.videoId = data.id;
+        self.init()
+    };
 
-    this.play = function() { }
+    self.pause = function () { };
 
-    this.isPaused = function() { }
+    self.play = function () { };
 
-    this.getTime = function() { }
+    self.isPaused = function () { };
 
-    this.seek = function() { }
+    self.getTime = function () { };
+
+    self.seek = function () { };
 }
 
-Player.prototype.initCustom = function() {
+var CustomPlayer = function (data) {
-    var div = $("<div/>").insertBefore($("#ytapiplayer"));
+    var self = this;
-    $("#ytapiplayer").remove();
+    self.videoId = data.id;
-    div.append(this.id);
+    self.init = function () {
+        removeOld();
+        var div = $("#ytapiplayer");
+        div.attr("id", "");
+        div.append(self.videoId);
 
-    this.player = div.find("iframe")
+        self.player = div.find("iframe")
-    if(this.player.length === 0) this.player = div.find("object");
+        if(self.player.length === 0) self.player = div.find("object");
-    if(this.player.length === 0) this.player = div;
+        if(self.player.length === 0) self.player = div;
-    this.player.attr("id", "ytapiplayer");
+        self.player.attr("id", "ytapiplayer");
-    this.player.attr("width", VWIDTH);
+        self.player.attr("width", VWIDTH);
-    this.player.attr("height", VHEIGHT);
+        self.player.attr("height", VHEIGHT);
+    };
 
-    this.load = function(data) {
+    self.load = function (data) {
-        this.id = data.id;
+        self.id = data.id;
-        this.initCustom()
+        self.initCustom()
-    }
+    };
 
-    this.pause = function() { }
+    self.pause = function () { };
 
-    this.play = function() { }
+    self.play = function () { };
 
-    this.isPaused = function() { }
+    self.isPaused = function () { };
 
-    this.getTime = function() { }
+    self.getTime = function () { };
 
-    this.seek = function() { }
+    self.seek = function () { };
-}
+};
 
-Player.prototype.update = function(data) {
+function handleMediaUpdate(data) {
-    this.currentTime = data.currentTime;
+    // Media change
-    if(data.id && data.id != this.id) {
+    if(data.id && data.id !== PLAYER.videoId) {
-        if(data.currentTime < 0) {
+        if(data.currentTime < 0)
             data.currentTime = 0;
-        }
+        PLAYER.load(data);
-        this.load(data);
+        PLAYER.play();
-        this.play();
     }
-    if(CLIENT.leader) {
+    
+    // Don't synch if leader or synch disabled
+    if(CLIENT.leader || !USEROPTS.synch)
         return;
-    }
+
-    if(!USEROPTS.synch) {
+    // Handle pause/unpause
-        return;
-    }
     if(data.paused) {
-        this.seek(data.currentTime);
+        PLAYER.seek(data.currentTime);
-        this.pause();
+        PLAYER.pause();
     }
     else {
-        this.isPaused(function(paused) {
+        PLAYER.isPaused(function (paused) {
-            paused && this.play();
+            paused && PLAYER.play();
-        }.bind(this));
+        });
     }
-    this.getTime(function(seconds) {
+
+    // Handle time change
+    PLAYER.getTime(function (seconds) {
         var time = data.currentTime;
         var diff = time - seconds || time;
 
         if(diff > USEROPTS.sync_accuracy) {
-            this.seek(time);
+            PLAYER.seek(time);
         }
         else if(diff < -USEROPTS.sync_accuracy) {
-            this.seek(time + 1);
+            // Don't synch all the way back, causes buffering problems
+            // because for some dumb reason YouTube erases the buffer
+            // when you seek backwards
+            PLAYER.seek(time + 1);
         }
-    }.bind(this));
+    });
 }
 
-Player.prototype.removeOld = function() {
+function hidePlayer() {
-    var old = $("#ytapiplayer");
+    if(!PLAYER)
-    var placeholder = $("<div/>").insertBefore(old);
-    old.remove();
-    placeholder.attr("id", "ytapiplayer");
-}
-
-Player.prototype.hide = function() {
-    if(!/chrome/ig.test(navigator.userAgent)) {
         return;
-    }
+
-    this.size = {
+    if(!/(chrome|MSIE)/ig.test(navigator.userAgent))
+        return;
+
+    PLAYER.size = {
         width: $("#ytapiplayer").attr("width"),
         height: $("#ytapiplayer").attr("height")
     };
@@ -776,10 +808,13 @@ Player.prototype.hide = function() {
         .attr("height", 1);
 }
 
-Player.prototype.unhide = function() {
+function unhidePlayer() {
-    if(!/chrome/ig.test(navigator.userAgent)) {
+    if(!PLAYER)
         return;
-    }
+
-    $("#ytapiplayer").attr("width", this.size.width)
+    if(!/(chrome|MSIE)/ig.test(navigator.userAgent))
-        .attr("height", this.size.height);
+        return;
+
+    $("#ytapiplayer").attr("width", PLAYER.size.width)
+        .attr("height", PLAYER.size.height);
 }

www/assets/js/util.js

@@ -370,8 +370,7 @@ function rebuildPlaylist() {
 
 /* menus */
 function showOptionsMenu() {
-    if(PLAYER)
+    hidePlayer();
-        PLAYER.hide();
     var modal = $("<div/>").addClass("modal hide fade")
         .appendTo($("body"));
     var head = $("<div/>").addClass("modal-header")
@@ -528,8 +527,7 @@ function showOptionsMenu() {
     });
 
     modal.on("hidden", function() {
-        if(PLAYER)
+        unhidePlayer();
-            PLAYER.unhide();
         applyOpts();
         modal.remove();
     });
@@ -599,8 +597,7 @@ function applyOpts() {
 applyOpts();
 
 function showLoginMenu() {
-    if(PLAYER)
+    hidePlayer();
-        PLAYER.hide();
     var modal = $("<div/>").addClass("modal hide fade")
         .appendTo($("body"));
     var head = $("<div/>").addClass("modal-header")
@@ -671,8 +668,7 @@ function showLoginMenu() {
     }
     var footer = $("<div/>").addClass("modal-footer").appendTo(modal);
     modal.on("hidden", function() {
-        if(PLAYER)
+        unhidePlayer();
-            PLAYER.unhide();
         modal.remove();
     });
     modal.modal();