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

@@ -144,7 +144,7 @@ dev goals for 1.1 pineapple express:
       - dailymotion ✓
       - vimeo ✓
   - shade player ✓ 
-   - player controls in title bar when video shaded (play/pause, mute, current time/video duration), hidden when video open ✓
+    - player controls in title bar when video shaded (play/pause, mute, current time/video duration), hidden when video open ✓
       - minicont update in videojs ✓
       - minicont update in dailymotion ✓
       - minicont update in vimeo ✓
@@ -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.
@@ -180,7 +183,7 @@ dev goals for 1.1 pineapple express:
 
 - merge tokebot into ourfore.st codebase, one server instead of two. 
   - profile and userlist entry
-    -bot specific rank
+  - bot specific rank
   - reset cooldown accessible from modmenu (quiet and loud, quiet by default)
   - log tokes w/ date to file. This will be switched to mariadb in the next update
   - tokefile, list of usernames with toke count. This will be switched to mariadb in the next update
@@ -199,7 +202,7 @@ dev goals for 1.1 pineapple express:
   - open playlist below video by default 
 
 
--merge fore.st theme changes to fore.st dusk, consider moving some of them over to cytube.css for easier management
+- merge fore.st theme changes to fore.st dusk, consider moving some of them over to cytube.css for easier management
 
 - extra shit(probs wait til next update, or hotfix)
   - short chats (acronyms, emoji, single letters/numbers/symbols) pop in over video from left starting at top left, overflow pops in below, instead of in chat box. Chats slide back up into top of vid after 2s. (optional, default on)

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();
         }
@@ -1812,47 +1812,90 @@ function showDesktopNotification(notificationTitle, notificationBody)
 }
 
 function handleWindowResize() {
-    var vid = $("#videowrap");
+	var vid = $("#videowrap");
-    var cht = $("#chatwrap");
+	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) - 
 		($(".navbar").is(":visible") ? $(".navbar").outerHeight() : 0) -
 		$("#chatheader").outerHeight() - 1;
 
-        var h = rawh - $("#chatline").outerHeight();
+	var h = rawh - $("#chatline").outerHeight();
 
-        $("#messagebuffer").outerHeight(h);
-        $("#fpaneldiv").outerHeight(h - 1);	
-	$(".embed-responsive").outerHeight(rawh);
-	$("#ytapiplayer").outerHeight(rawh);
-        $("#userlist").outerHeight(h);
-        $("#sidepanel").outerHeight(h);
-	$("#chatwrap").outerHeight(rawh);
-	$("#videowrap").outerHeight(rawh);
 
-	chatWidthLockoff = 0;
 
-	if(($("#chatwrap").offset().left + $("#chatwrap").outerWidth() - $("body").outerWidth() >= 1)){
+	if(!isPortrait){
-		lastmin = ((($("#videowrap").outerWidth() - ($("#chatwrap").offset().left + $("#chatwrap").outerWidth() - $("body").outerWidth())) / $("body").outerWidth()) * 100);
+	    //set default layout
-		$("#videowrap").css("flex-basis",  lastmin + "%");
+		if($("#videowrap").parent().attr("id") != "main"){
-		chatWidthLockoff = $("#chatwrap").offset().left;
+			$("#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);
+
+		chatWidthLockoff = 0;
+
+		if(($("#chatwrap").offset().left + $("#chatwrap").outerWidth() - $("body").outerWidth() >= 1)){
+			lastmin = ((($("#videowrap").outerWidth() - ($("#chatwrap").offset().left + $("#chatwrap").outerWidth() - $("body").outerWidth())) / $("body").outerWidth()) * 100);
+			$("#videowrap").css("flex-basis",  lastmin + "%");
+			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");