Finished bugfixing new layout, fixed mobile support(still not perfect, will fix in either hotfix or next

update) and user tooltip
menu positioning.

README.md

@@ -153,6 +153,9 @@ dev goals for 1.1 pineapple express:
   - scroll over minicont mutebtn to change vol ✓
   - remove legacy cytube themes. If they wheren't compatible after the emote panel, they certainly won't be now lmao ✓
   - fix bugs created by flex layout ✓
+    - fix fpanel width ✓
+    - fix portrait/mobile mode ✓
+    - fix user tooltip menu position ✓
 
 - decaffeinate player.js
   - Coffee script was a bad idea then, and it makes even less sense now.

player/dailymotion.coffee

@@ -67,11 +67,6 @@ window.DailymotionPlayer = class DailymotionPlayer extends Player
                     setMini();
                 )
 
-                @player.on('canplay', =>
-                    handleVideoResize()
-                    console.log(@player.children)
-                )
-
                 # Once the video stops, the internal state of the player
                 # becomes unusable and attempting to load() will corrupt it and
                 # crash the player with an error.  As a short–medium term
@@ -82,7 +77,7 @@ window.DailymotionPlayer = class DailymotionPlayer extends Player
                 )
                 @dm.addEventListener('playback_ready', =>
                     @dmReady = true
-                    handleVideoResize()
+                    handleWindowResize()
 
                     if @playbackReadyCb
                         @playbackReadyCb()
@@ -101,7 +96,7 @@ window.DailymotionPlayer = class DailymotionPlayer extends Player
             # TODO: Player::load() needs to be made asynchronous in the future
             console.log('Warning: load() called before DM is ready, queueing callback')
             @playbackReadyCb = () =>
-                handleVideoResize()
+                handleWindowResize()
 
                 @dm.load(data.id)
                 @dm.seek(data.currentTime)

player/videojs.coffee

@@ -171,7 +171,7 @@ window.VideoJSPlayer = class VideoJSPlayer extends Player
 
 
                 @player.on('canplay', =>
-                    handleVideoResize()
+                    handleWindowResize()
                     console.log(@player.children)
                 )
 

player/vimeo.coffee

@@ -44,7 +44,7 @@ window.VimeoPlayer = class VimeoPlayer extends Player
             @vimeo.on('play', =>
                 @paused = false
                 setMini();
-                handleVideoResize()
+                handleWindowResize()
                 if CLIENT.leader
                     sendVideoUpdate()
             )

www/js/fpanel.js

@@ -31,6 +31,7 @@ function closeFPanel(cb){//close and null out fpanel, cb function to call when p
 }
 
 function sizeFPDiv(){//set inner div height to fix overflow
+	$("#fpaneldiv").outerWidth($("#chatwrap").outerWidth() * 0.7);
         $("#fpcontdiv").outerHeight($("#fpaneldiv").height() - $("#fptitlediv").outerHeight());
 }
 

www/js/player.js

@@ -131,7 +131,7 @@
           _this.vimeo.on('play', function() {
             _this.paused = false;
             setMini();
-            handleVideoResize();
+            handleWindowResize();
             if (CLIENT.leader) {
               return sendVideoUpdate();
             }
@@ -421,16 +421,12 @@
             _this.dm.addEventListener('volumechange', function() {
               return setMini();
             });
-            _this.player.on('canplay', function() {
-              handleVideoResize();
-              return console.log(_this.player.children);
-            });
             _this.dm.addEventListener('video_end', function() {
               return _this.dmReady = false;
             });
             return _this.dm.addEventListener('playback_ready', function() {
               _this.dmReady = true;
-              handleVideoResize();
+              handleWindowResize();
               if (_this.playbackReadyCb) {
                 _this.playbackReadyCb();
                 return _this.playbackReadyCb = null;
@@ -450,7 +446,7 @@
         console.log('Warning: load() called before DM is ready, queueing callback');
         return this.playbackReadyCb = (function(_this) {
           return function() {
-            handleVideoResize();
+            handleWindowResize();
             _this.dm.load(data.id);
             return _this.dm.seek(data.currentTime);
           };
@@ -719,7 +715,7 @@
               }
             });
             _this.player.on('canplay', function() {
-              handleVideoResize();
+              handleWindowResize();
               return console.log(_this.player.children);
             });
             _this.player.on('timeupdate', function() {

www/js/ui.js

@@ -1076,7 +1076,7 @@ $("#cs-emotes-import").click(function () {
 });
 
 var toggleUserlist = function () {
-    var direction = !USEROPTS.layout.match(/synchtube/) ? "glyphicon-chevron-right" : "glyphicon-chevron-left"
+    var direction = "glyphicon-chevron-left"
     if ($("#userlist")[0].style.display === "none") {
         $("#userlist").show();
         $("#userlisttoggle").removeClass(direction).addClass("glyphicon-chevron-down");

www/js/util.js

@@ -426,7 +426,7 @@ function addUserDropdown(entry) {
                 }
             });
             menu.show();
-            menu.css("top", entry.position().top);
+            menu.css("top", entry.position().top - $("#chatwrap").offset().top);
         } else {
             menu.hide();
         }
@@ -1814,14 +1814,9 @@ function showDesktopNotification(notificationTitle, notificationBody)
 function handleWindowResize() {
 	var vid = $("#videowrap");
 	var cht = $("#chatwrap");
-    var isPortrait = (window.innerWidth -  parseInt(vid.css("width"))) == 0;
+	var res;
+	var isPortrait = (parseInt(window.innerWidth) -  parseInt(window.innerHeight)) <= 0;
     
-    if(!isPortrait){
-	    vid.css("height",window.innerHeight);
-	    cht.css("height",window.innerHeight);
-    }
-    
-    //if ($("body").hasClass("chatOnly")) {
 	var rawh = $("body").outerHeight() -
 		($("#motdwrap").is(":visible") ? $("#motdwrap").outerHeight() : 0) - 
 		($("#footer").is(":visible") ? $("#footer").outerHeight() : 0) - 
@@ -1830,14 +1825,27 @@ function handleWindowResize() {
 
 	var h = rawh - $("#chatline").outerHeight();
 
-        $("#messagebuffer").outerHeight(h);
+
-        $("#fpaneldiv").outerHeight(h - 1);	
+
+	if(!isPortrait){
+	    //set default layout
+		if($("#videowrap").parent().attr("id") != "main"){
+			$("#titles").append($("#videowrap-header"));
+			$("#titles").append($("#chatheader"));
+			$("#main").append($("#videowrap"));
+			$("#main").css("flex-direction", "row");
+			$("#titles").css("flex-direction", "row");
+			$("#main").append($("#chatwrap"));
+		}
+
+    
+    //if ($("body").hasClass("chatOnly")) {
+		
+
+		
+		$("#videowrap").outerHeight(rawh);
 		$(".embed-responsive").outerHeight(rawh);
 		$("#ytapiplayer").outerHeight(rawh);
-        $("#userlist").outerHeight(h);
-        $("#sidepanel").outerHeight(h);
-	$("#chatwrap").outerHeight(rawh);
-	$("#videowrap").outerHeight(rawh);
 
 		chatWidthLockoff = 0;
 
@@ -1847,12 +1855,47 @@ function handleWindowResize() {
 			chatWidthLockoff = $("#chatwrap").offset().left;
 		}
 
+	}else{
+	    //set mobile layout
+		if($("#videowrap").parent().attr("id") != "titles"){
+			$("#titles").append($("#videowrap-header"));
+			$("#titles").append($("#videowrap"));
+			$("#main").append($("#chatheader"));
+			$("#main").append($("#chatwrap"));
+			$("#main").css("flex-direction", "column");
+			$("#titles").css("flex-direction", "column");
+		}
+
+		if(window.PLAYER != null && typeof(window.PLAYER.getRes) === "function"){
+			window.PLAYER.getRes(function(x){
+				res = x != null ? x : [0,0];
+			});
+
+			rheight = (res[1]/res[0]) * parseInt(window.innerWidth);
+
+			//if(!$("#chatbar").is(":focus")){
+				$("#videowrap").outerHeight(rheight);
+				$(".embed-responsive").outerHeight(rheight);
+				$("#ytapiplayer").outerHeight(rheight);
+				h = h - rheight - $("#videowrap-header").outerHeight();
+				rawh = rawh - rheight - $("#videowrap-header").outerHeight();
+			//}
+
+
+		}
+	}
+
+	//if(!isPortrait || !$("#chatbar").is(":focus")){
+		$("#messagebuffer").outerHeight(h);
+		$("#fpaneldiv").outerHeight(h - 1);	
+		$("#userlist").outerHeight(h);
+		$("#sidepanel").outerHeight(h);
+		$("#chatwrap").outerHeight(rawh);
+		sizeFPDiv();//resize fpanel
+	//}
+
 
-	sizeFPDiv();
-	$("#fpaneldiv").outerWidth($("#chatwrap").outerWidth() * 0.7);
 	handleVideoResize();
-
-	//scrollChat();
 }
 
 function handleVideoResize() {//rewritten to adjust width to aspect ratio
@@ -2949,7 +2992,6 @@ function formatScriptAccessPrefs() {
 
         var channelName = channel.substring(0, idx);
         var prefType = channel.substring(idx + 1);
-        console.log(channelName, prefType);
         if (prefType !== "external" && prefType !== "embedded") {
             // Invalid
             console.error("Channel JS pref: invalid key '" + channel + "', deleting it");