Responsive embed, WIP

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) {
 
@@ -707,10 +704,6 @@ var JWPlayer = function (data) {
             type: data.contentType
         });
 
-        jwplayer().onReady(function () {
-            resizeStuff();
-        });
-
         jwplayer().onPlay(function() {
             self.paused = false;
             if(CLIENT.leader)
@@ -934,7 +927,6 @@ function FilePlayer(data) {
             }
         };
         self.setVolume(VOLUME);
-        resizeStuff();
     };
 
     self.load = function (data) {

www/js/ui.js

@@ -752,3 +752,32 @@ $(".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();
+                    $(elem).parent().resize(function () {
+                        console.log('resized');
+                    });
+                }
+            });
+        });
+
+        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

@@ -999,7 +999,6 @@ function handlePermissionChange() {
 
     $("#chatline").attr("disabled", !hasPermission("chat"));
     rebuildPlaylist();
-    resizeStuff();
 }
 
 function fixWeirdButtonAlignmentIssue() {
@@ -1531,15 +1530,12 @@ function compactLayout() {
         $("#messagebuffer, #userlist").css("max-height", "");
         $("body").removeClass("hd");
     }
-
-    setTimeout(resizeStuff, 500);
 }
 
 function fluidLayout() {
     $(".container").removeClass("container").addClass("container-fluid");
     $("footer .container-fluid").removeClass("container-fluid").addClass("container");
     $("body").addClass("fluid");
-    resizeStuff();
 }
 
 function synchtubeLayout() {
@@ -1603,7 +1599,6 @@ function hdLayout() {
     $("#mainpage").css("padding-top", "0");
 
     $("body").addClass("hd");
-    setTimeout(resizeStuff, 500);
 }
 
 function chatOnly() {
@@ -1631,32 +1626,38 @@ 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);
+    };
+
+    if ($("#ytapiplayer").height() > 0) resize();
+    var intv = setInterval(resize, 500);
+}
+
+$(window).resize(handleWindowResize);
 
 function removeVideo() {
     try {
@@ -2562,9 +2563,6 @@ function fallbackRaw(data) {
     data.url = data.direct.sd.url;
     PLAYER.player = undefined;
     PLAYER = new FlashPlayer(data);
-    if ($("#ytapiplayer").height() != VHEIGHT) {
-        resizeStuff();
-    }
 
     handleMediaUpdate(data);
 }