diff --git a/README.md b/README.md index 6c335e28..1e13c3ee 100644 --- a/README.md +++ b/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) diff --git a/player/dailymotion.coffee b/player/dailymotion.coffee index 227fa19a..34f2a072 100644 --- a/player/dailymotion.coffee +++ b/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) diff --git a/player/videojs.coffee b/player/videojs.coffee index 061d0e9a..995097c1 100644 --- a/player/videojs.coffee +++ b/player/videojs.coffee @@ -171,7 +171,7 @@ window.VideoJSPlayer = class VideoJSPlayer extends Player @player.on('canplay', => - handleVideoResize() + handleWindowResize() console.log(@player.children) ) diff --git a/player/vimeo.coffee b/player/vimeo.coffee index 0faba426..5b088cbb 100644 --- a/player/vimeo.coffee +++ b/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() ) diff --git a/www/js/fpanel.js b/www/js/fpanel.js index 4add51f8..c33db493 100644 --- a/www/js/fpanel.js +++ b/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()); } diff --git a/www/js/player.js b/www/js/player.js index 75efb4a9..286a7556 100644 --- a/www/js/player.js +++ b/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() { diff --git a/www/js/ui.js b/www/js/ui.js index b085653e..8970cede 100644 --- a/www/js/ui.js +++ b/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"); diff --git a/www/js/util.js b/www/js/util.js index 5ee316d2..096ad273 100644 --- a/www/js/util.js +++ b/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 cht = $("#chatwrap"); - var isPortrait = (window.innerWidth - parseInt(vid.css("width"))) == 0; - - if(!isPortrait){ - vid.css("height",window.innerHeight); - cht.css("height",window.innerHeight); - } + var vid = $("#videowrap"); + var cht = $("#chatwrap"); + var res; + var isPortrait = (parseInt(window.innerWidth) - parseInt(window.innerHeight)) <= 0; - //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)){ - lastmin = ((($("#videowrap").outerWidth() - ($("#chatwrap").offset().left + $("#chatwrap").outerWidth() - $("body").outerWidth())) / $("body").outerWidth()) * 100); - $("#videowrap").css("flex-basis", lastmin + "%"); - chatWidthLockoff = $("#chatwrap").offset().left; + 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); + + 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");