Merge pull request #410 from calzoneman/responsive-embed

Update Bootstrap to 3.3; improve automatic video/chat resizing with responsive-embed

www/js/callbacks.js

@@ -890,10 +890,6 @@ Callbacks = {
             loadMediaPlayer(data);
         }
 
-        if ($("#ytapiplayer").height() != VHEIGHT) {
-            resizeStuff();
-        }
-
         handleMediaUpdate(data);
     },
 

www/js/player.js

@@ -13,7 +13,7 @@ var VIMEO_FLASH = false;
 
 function removeOld(replace) {
     $("#sc_volume").remove();
-    replace = replace || $("<div/>");
+    replace = replace || $("<div/>").addClass("embed-responsive-item");
     var old = $("#ytapiplayer");
     replace.insertBefore(old);
     old.remove();
@@ -31,8 +31,6 @@ var YouTubePlayer = function (data) {
             self.theYouTubeDevsNeedToFixThisShit = false;
             var wmode = USEROPTS.wmode_transparent ? "transparent" : "opaque";
             self.player = new YT.Player("ytapiplayer", {
-                height: VHEIGHT,
-                width: VWIDTH,
                 videoId: data.id,
                 playerVars: {
                     autohide: 1,        // Autohide controls
@@ -45,7 +43,6 @@ var YouTubePlayer = function (data) {
                 events: {
                     onReady: function () {
                         PLAYER.setVolume(VOLUME);
-                        $("#ytapiplayer").width(VWIDTH).height(VHEIGHT);
                     },
                     onStateChange: function (ev) {
 
@@ -151,8 +148,6 @@ var VimeoPlayer = function (data) {
             if(USEROPTS.wmode_transparent)
                 iframe.attr("wmode", "transparent");
             iframe.css("border", "none");
-            iframe.width(VWIDTH);
-            iframe.height(VHEIGHT);
 
             $f(iframe[0]).addEvent("ready", function () {
                 self.player = $f(iframe[0]);
@@ -441,14 +436,16 @@ var SoundcloudPlayer = function (data) {
     waitUntilDefined(window, "SC", function () {
         unfixSoundcloudShit();
         var iframe = $("<iframe/>");
-        removeOld(iframe);
+        removeOld();
+        iframe.appendTo($("#ytapiplayer"));
 
-        iframe.attr("id", "ytapiplayer");
+        iframe.attr("id", "scplayer");
         iframe.attr("src", "https://w.soundcloud.com/player/?url="+self.videoId);
-        iframe.css("width", "100%").attr("height", "166");
+        iframe.css("height", "166px");
         iframe.css("border", "none");
 
         var volslider = $("<div/>").attr("id", "sc_volume")
+            .css("top", "170px")
             .insertAfter(iframe);
 
         volslider.slider({
@@ -460,7 +457,7 @@ var SoundcloudPlayer = function (data) {
             }
         });
 
-        self.player = SC.Widget("ytapiplayer");
+        self.player = SC.Widget("scplayer");
 
         self.player.bind(SC.Widget.Events.READY, function () {
             self.player.load(self.videoId, { auto_play: true });
@@ -701,14 +698,15 @@ var JWPlayer = function (data) {
 
         jwplayer("ytapiplayer").setup({
             file: self.videoURL,
-            width: VWIDTH,
-            height: VHEIGHT,
+            width: "100%",
+            height: "100%",
             autostart: true,
             type: data.contentType
         });
 
-        jwplayer().onReady(function () {
-            resizeStuff();
+        jwplayer().onReady(function() {
+            $("#ytapiplayer").addClass("embed-responsive-item");
+            handleVideoResize();
         });
 
         jwplayer().onPlay(function() {
@@ -724,11 +722,17 @@ var JWPlayer = function (data) {
         jwplayer().onComplete(function() {
             socket.emit("playNext");
         });
+
         self.setVolume(VOLUME);
     };
 
     self.load = function (data) {
         self.videoId = data.id;
+        if (data.url) {
+            self.videoURL = data.url;
+        } else {
+            self.videoURL = data.id;
+        }
         self.videoLength = data.seconds;
         self.init();
     };
@@ -775,8 +779,7 @@ var UstreamPlayer = function (data) {
         removeOld(iframe);
         iframe.attr("width", VWIDTH);
         iframe.attr("height", VHEIGHT);
-        var prto = location.protocol;
-        iframe.attr("src", prto+"//www.ustream.tv/embed/"+self.videoId+"?v=3&wmode=direct");
+        iframe.attr("src", "//www.ustream.tv/embed/"+self.videoId+"?v=3&wmode=direct");
         iframe.attr("frameborder", "0");
         iframe.attr("scrolling", "no");
         iframe.css("border", "none");
@@ -934,7 +937,6 @@ function FilePlayer(data) {
             }
         };
         self.setVolume(VOLUME);
-        resizeStuff();
     };
 
     self.load = function (data) {

www/js/ui.js

@@ -752,3 +752,27 @@ $(".add-temp").change(function () {
 });
 
 applyOpts();
+
+(function () {
+    if (typeof window.MutationObserver === "function") {
+        var mr = new MutationObserver(function (records) {
+            records.forEach(function (record) {
+                if (record.type !== "childList") return;
+                if (!record.addedNodes || record.addedNodes.length === 0) return;
+
+                var elem = record.addedNodes[0];
+                if (elem.id === "ytapiplayer") handleVideoResize();
+            });
+        });
+
+        mr.observe($("#videowrap").find(".embed-responsive")[0], { childList: true });
+    } else {
+        /*
+         * DOMNodeInserted is deprecated.  This code is here only as a fallback
+         * for browsers that do not support MutationObserver
+         */
+        $("#videowrap").find(".embed-responsive")[0].addEventListener("DOMNodeInserted", function (ev) {
+            if (ev.target.id === "ytapiplayer") handleVideoResize();
+        });
+    }
+})();

www/js/util.js

@@ -1004,7 +1004,6 @@ function handlePermissionChange() {
 
     $("#chatline").attr("disabled", !hasPermission("chat"));
     rebuildPlaylist();
-    resizeStuff();
 }
 
 function fixWeirdButtonAlignmentIssue() {
@@ -1537,14 +1536,15 @@ function compactLayout() {
         $("body").removeClass("hd");
     }
 
-    setTimeout(resizeStuff, 500);
+    $("body").addClass("compact");
+    handleVideoResize();
 }
 
 function fluidLayout() {
     $(".container").removeClass("container").addClass("container-fluid");
     $("footer .container-fluid").removeClass("container-fluid").addClass("container");
     $("body").addClass("fluid");
-    resizeStuff();
+    handleVideoResize();
 }
 
 function synchtubeLayout() {
@@ -1608,7 +1608,7 @@ function hdLayout() {
     $("#mainpage").css("padding-top", "0");
 
     $("body").addClass("hd");
-    setTimeout(resizeStuff, 500);
+    handleVideoResize();
 }
 
 function chatOnly() {
@@ -1636,32 +1636,42 @@ function chatOnly() {
         });
     setVisible("#showchansettings", CLIENT.rank >= 2);
     $("body").addClass("chatOnly");
-    resizeStuff();
+    handleWindowResize();
 }
 
-function resizeStuff() {
+function handleWindowResize() {
     if ($("body").hasClass("chatOnly")) {
         var h = $("body").outerHeight() - $("#chatline").outerHeight() -
                 $("#chatheader").outerHeight();
         $("#messagebuffer").outerHeight(h);
         $("#userlist").outerHeight(h);
         return;
+    } else {
+        handleVideoResize();
     }
-    VWIDTH = $("#videowrap").width() + "";
-    VHEIGHT = Math.floor(parseInt(VWIDTH) * 9 / 16 + 1) + "";
-    $("#ytapiplayer").width(VWIDTH).height(VHEIGHT);
-
-    // Only execute if we are on a fluid layout
-    if (!$("body").hasClass("fluid")) {
-        return;
-    }
-
-    var h = parseInt(VHEIGHT) - $("#chatline").outerHeight() - 1;
-    $("#messagebuffer").height(h);
-    $("#userlist").height(h);
 }
 
-$(window).resize(resizeStuff);
+function handleVideoResize() {
+    var intv, ticks = 0;
+    var resize = function () {
+        if (++ticks > 10) clearInterval(intv);
+        if ($("#ytapiplayer").height() === 0) return;
+        clearInterval(intv);
+
+        var height = $("#ytapiplayer").height() - $("#chatline").outerHeight() - 2;
+        $("#messagebuffer").height(height);
+        $("#userlist").height(height);
+
+        $("#ytapiplayer").attr("height", VHEIGHT = $("#ytapiplayer").height());
+        $("#ytapiplayer").attr("width", VWIDTH = $("#ytapiplayer").width());
+    };
+
+    if ($("#ytapiplayer").height() > 0) resize();
+    else intv = setInterval(resize, 500);
+}
+
+$(window).resize(handleWindowResize);
+handleWindowResize();
 
 function removeVideo() {
     try {
@@ -2261,8 +2271,7 @@ function formatCSChatFilterList() {
                 .appendTo(wrap);
             var addTextbox = function (placeholder) {
                 var div = $("<div/>").addClass("form-group").appendTo(form)
-                    .css("margin-right", "10px")
-                    .css("max-width", "25%");
+                    .css("margin-right", "10px");
                 var input = $("<input/>").addClass("form-control")
                     .attr("type", "text")
                     .attr("placeholder", placeholder)
@@ -2567,9 +2576,6 @@ function fallbackRaw(data) {
     data.url = data.direct.sd.url;
     PLAYER.player = undefined;
     PLAYER = new FlashPlayer(data);
-    if ($("#ytapiplayer").height() != VHEIGHT) {
-        resizeStuff();
-    }
 
     handleMediaUpdate(data);
 }