improved server-whisper, user join/leave messages, layout/UI overhaul

README.md

@@ -27,6 +27,8 @@ You can reach out by bugging rainbownapkin on the ttn discord or ourfore.st, you
 ## Pineapple Express Indev Release Notes
 This is the first indev release for fore.st 1.1 Pineapple Express. This is the last push before the codebase is merged upstream with the newest version of cytube. Should probably get that done sooner than later. Heres a check list of the planned/completed features in this revision:
 
+dev goals for 1.1 pineapple express:
+
 - quick shit & bugfixes ✓
   - change markdown filters to require three symbols on each side, quickest fix for filters ✓
   - move refresh button to title bar ✓
@@ -46,7 +48,14 @@ This is the first indev release for fore.st 1.1 Pineapple Express. This is the l
   - fix chatbar resizing on new message notification (might just by cytube+) ✓
   - relicense to agpl ✓
   - disable/remove unregistered channels ✓
+  - fix fucked up bottom border on chat/video ✓
   - rename "legacy playlist buttons" to compact, fix location. This seems like it could be usable if not better than default ✓
+  - get res/aspect ratio player.js ✓
+    - base.coffee ✓
+    - videojs.coffee(hls,videojs,raw-file,gdrive,rtmp) ✓
+    - dailymotion ~(this is kinda broken, likely not possible client-side without breaking CORS policy. This can wait until next version when an installation script including nginx and cors-proxy config gets added to support the catbox.moe image upload button which faces the same issue.
+    - vimeo ✓
+  - add player.js updates to twitch
   - save temporary vids to channel library
 
 - slide out panel (not an end user feature in and of itself, however a common UI element used for most menus, made to be quick and ezpz ✓
@@ -82,8 +91,10 @@ This is the first indev release for fore.st 1.1 Pineapple Express. This is the l
       - blink title on chat ✓
       - chat notification sound ✓
       - chat desktop notification ✓
+      - show timestamps ✓
+          - show seconds ✓
 
-- trim/tidy default cytube commands
+- trim/tidy default cytube command ✓
     - replace / with ! as defualt server-side command indicator to match tokebot and TTN commands. / will be used for future client-side commands ✓
     - me ✓
     - sp ✓
@@ -101,31 +112,47 @@ This is the first indev release for fore.st 1.1 Pineapple Express. This is the l
     - cleantitle ✓
     - remove/consolidate/add to commands ✓
     - say -> announce(change tokebot modflair CSS to announce CSS, make normal modflair for bot/admin rank) ✓
+    - modflair on announce ✓
     - remove kickanons ✓
     - remove d (drink) ✓
     - add user specific function to clear ('!clear <username>' to clear chats by said user) ✓
 
-- Merge Upstream to newest cytube commit
+- Merge Upstream to newest cytube commit ✓
 
-- improved server-whisper system
+- improved server-whisper system ✓
-  - public leave/join messages
+  - public leave/join messages ✓
-  - server-whisper target parameter for user specific whispers
+  - server-whisper target parameter for user specific whispers ✓
-  - server-whisper name 
+  - server-whisper name ✓
 
 - getplaylistlinks outputs in fpanel
   - I mean its pretty fucking simple I dont know how you can screw this one up bud.
   - ezpzlmnsqze
 
-- ui sizing overhaul
+- flex layout/legacy layout ripout ✓
-  - rip out all but the ONE TRUE layout. It's not 2014 anymore, one layout with dynamic elements will get you further than multiple static ones.
+  - rip out legacy layout system ✓
-  - chat/player sized to fit canvas with navbar (remove -+ buttons on player)
+  - chat/player sized to fit canvas with navbar (remove -+ buttons on player) ✓
-  - theatre mode toggle icon on title bar (hides navbar, player/chat takes up entire screen)
+  - theatre mode toggle icon on title bar (hides navbar, player/chat takes up entire screen) ✓
-  - click to drag chat/player split
+  - click to drag chat/player split ✓
-  - shade player (hide and unload video, titel bar shows title and unshade icon only)
+  - lock videowrap width to aspect ratio ✓
-  - shade chat (hide chat box, message box, send button. chat header bar collapses, retains user count and expansion arrows. Userlist/poll open/close is independent.)
+    - lock on join ✓
-  - popout video button
+    - unlock on split drag ✓
-  - popout chat button
+    - show lock button on unlock ✓
-  - remove legacy cytube themes. If they wheren't compatible after the emote panel, they certainly won't be now lmao
+    - hide lock button when locked ✓
+    - checklock/move split on window move ✓
+    - checklock/move split on video load ✓
+      - videojs.coffee(hls,videojs,raw-file,gdrive,rtmp)  ✓
+      - dailymotion ✓
+      - vimeo ✓
+  - shade player ✓ 
+   - 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 ✓
+  - shade chat (hide chat box, message box, send button. chat header bar collapses, retains user count and expansion arrows. Userlist/poll open/close is independent.) ✓
+  - scroll over mincont dir to scrub vid ✓
+  - 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 ✓
 
 - decaffeinate player.js
   - Coffee script was a bad idea then, and it makes even less sense now.
@@ -135,6 +162,11 @@ This is the first indev release for fore.st 1.1 Pineapple Express. This is the l
 - degoogling
   - yt-dlp backend for serverside metadata acquisition of youtube videos w/o registered API key or google account
   - potentially leverage yt-dlp backend for other media sources
+  - implement player.js updates into youtube.coffee
+    - latching
+    - getres
+    - update minicont dur
+    - update minicont buttons
   - invidious embed support for youtube video playback
   - youtube source in user prefrences (three or four invidious instances from different countries/continents, official youtube embed, or custom invidious instance)
 
@@ -148,12 +180,13 @@ This is the first indev release for fore.st 1.1 Pineapple Express. This is the l
 
 - 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
   - total tokes listed on profile tooltip
 
+
 - mod panel
   - button on chatbar
   - mod message (sends message to all active mods)
@@ -165,7 +198,8 @@ This is the first indev release for fore.st 1.1 Pineapple Express. This is the l
   - open playlist below video (if closed, otherwise this does not appear)
   - 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)
@@ -176,7 +210,6 @@ This is the first indev release for fore.st 1.1 Pineapple Express. This is the l
   - change background to other themes background or img from url(theme background by default)
   - native odysee support (no raw embed)
 
-
 ## License
 Original fore.st code is provided under the Affero General Public License v3 in order to prevent fore.st being used in proprietary software.
 (see the LICENSE file for the full text.)

player/base.coffee

@@ -49,4 +49,7 @@ window.Player = class Player
     getVolume: (cb) ->
         cb(VOLUME)
     
+    getRes: (cb) ->
+        cb();
+
     destroy: ->

player/dailymotion.coffee

@@ -36,6 +36,7 @@ window.DailymotionPlayer = class DailymotionPlayer extends Player
 
                 @dm.addEventListener('pause', =>
                     @paused = true
+                    setMini();
                     if CLIENT.leader
                         sendVideoUpdate()
                     else
@@ -44,6 +45,7 @@ window.DailymotionPlayer = class DailymotionPlayer extends Player
 
                 @dm.addEventListener('playing', =>
                     @paused = false
+                    setMini();
                     if CLIENT.leader
                         sendVideoUpdate()
 
@@ -57,6 +59,19 @@ window.DailymotionPlayer = class DailymotionPlayer extends Player
                         @unlatch()
                 ) 
 
+                @dm.addEventListener('timeupdate', =>
+                    setDur();
+                )
+
+                @dm.addEventListener('volumechange', =>
+                    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
@@ -67,6 +82,8 @@ window.DailymotionPlayer = class DailymotionPlayer extends Player
                 )
                 @dm.addEventListener('playback_ready', =>
                     @dmReady = true
+                    handleVideoResize()
+
                     if @playbackReadyCb
                         @playbackReadyCb()
                         @playbackReadyCb = null
@@ -79,10 +96,13 @@ window.DailymotionPlayer = class DailymotionPlayer extends Player
         if @dm and @dmReady
             @dm.load(data.id)
             @dm.seek(data.currentTime)
+
         else if @dm
             # TODO: Player::load() needs to be made asynchronous in the future
             console.log('Warning: load() called before DM is ready, queueing callback')
             @playbackReadyCb = () =>
+                handleVideoResize()
+
                 @dm.load(data.id)
                 @dm.seek(data.currentTime)
         else
@@ -127,6 +147,11 @@ window.DailymotionPlayer = class DailymotionPlayer extends Player
         else
             cb(VOLUME)
 
+    getRes: (cb) ->
+        if @dm and @dmReady
+            cb([@dm.width, @dm.height])
+        else
+            cb()
     mapQuality: (quality) ->
         switch String(quality)
             when '240', '480', '720', '1080' then String(quality)

player/update.coffee

@@ -40,8 +40,6 @@ window.loadMediaPlayer = (data) ->
 window.handleMediaUpdate = (data) ->
     PLAYER = window.PLAYER
 
-    #bodge for fcyp.js layout
-    #handleWindowResize()
 
     #update airdate
     dispSTimes();

player/videojs.coffee

@@ -141,6 +141,7 @@ window.VideoJSPlayer = class VideoJSPlayer extends Player
 
                 @player.on('pause', =>
                     @paused = true
+                    setMini();
                     if CLIENT.leader
                         sendVideoUpdate()
                     else
@@ -150,10 +151,15 @@ window.VideoJSPlayer = class VideoJSPlayer extends Player
 
                 @player.on('play', =>
                     @paused = false
+                    setMini();
                     if CLIENT.leader
                         sendVideoUpdate()
                 )
 
+                @player.on('volumechange', =>
+                    setMini();
+                )
+                
                 # Workaround for IE-- even after seeking completes, the loading
                 # spinner remains.
                 @player.on('seeked', =>
@@ -163,6 +169,16 @@ window.VideoJSPlayer = class VideoJSPlayer extends Player
 
                 )
 
+
+                @player.on('canplay', =>
+                    handleVideoResize()
+                    console.log(@player.children)
+                )
+
+                @player.on('timeupdate', =>
+                    setDur();
+		)
+
                 # Workaround for Chrome-- it seems that the click bindings for
                 # the subtitle menu aren't quite set up until after the ready
                 # event finishes, so set a timeout for 1ms to force this code
@@ -241,6 +257,12 @@ window.VideoJSPlayer = class VideoJSPlayer extends Player
         else
             cb(VOLUME)
 
+    getRes: (cb) ->
+        if @player
+            cb([@player.videoWidth(), @player.videoHeight()])
+        else
+            cb()
+
     destroy: ->
         removeOld()
         if @player

player/vimeo.coffee

@@ -4,6 +4,8 @@ window.VimeoPlayer = class VimeoPlayer extends Player
             return new VimeoPlayer(data)
 
         @load(data)
+        @resx = 0
+        @resy = 0
 
     load: (data) ->
         @setMediaProperties(data)
@@ -31,6 +33,7 @@ window.VimeoPlayer = class VimeoPlayer extends Player
 
             @vimeo.on('pause', =>
                 @paused = true
+                setMini();  
                 if CLIENT.leader
                     sendVideoUpdate()
                 else
@@ -40,6 +43,8 @@ window.VimeoPlayer = class VimeoPlayer extends Player
 
             @vimeo.on('play', =>
                 @paused = false
+                setMini();
+                handleVideoResize()
                 if CLIENT.leader
                     sendVideoUpdate()
             )
@@ -49,8 +54,30 @@ window.VimeoPlayer = class VimeoPlayer extends Player
                     @unlatch()
             )
 
+            @vimeo.on('timeupdate', =>
+                setDur();
+            )
+
+            @vimeo.on('volumechange', =>
+                setMini();
+            )
+ 
+
             @play()
             @setVolume(VOLUME)
+
+            @vimeo.getVideoWidth().then((wid) ->
+                window.PLAYER.resx = wid
+            ).catch((error) ->
+                console.error('vimeo::getVideoWidth():', error)
+            )
+
+            @vimeo.getVideoHeight().then((hgt) ->
+                window.PLAYER.resy = hgt
+            ).catch((error) ->
+                console.error('vimeo::getVideoHeight():', error)
+            )
+
         )
 
     play: ->
@@ -98,3 +125,9 @@ window.VimeoPlayer = class VimeoPlayer extends Player
             )
         else
             cb(VOLUME)
+
+    getRes: (cb) ->
+        if @vimeo
+            cb([@resx,@resy])
+        else
+            cb()

src/channel/channel.js

@@ -43,6 +43,57 @@ var fs = require("fs");
 var path = require("path");
 var sio = require("socket.io");
 var db = require("../database");
+var JoinMsg = [//join messages, bool(ifpostfix, if it is a string then it acts as prefix, and other string acts as postfix), str join message]
+	[true, "joined"],
+	[true, "arrived"],
+	[true, "appeared"],
+	[true, "hopped in"],
+	[true, "checked in"],
+	[true, "checked in to see what condition their condition was in"],
+	[true, "logged in"],
+	[true, "turned on, tuned in, and dropped out"],
+	[true, "is now using Ourfore.st"],
+	[true, "tuned in"],
+	[true, "is ready to sparkem"],
+	[true, "connected"],
+	[true, "joins the battle"],
+	[true, "hopped on"],
+	[true, "logged on"],
+	[false, "Ourfore.st, population:"],
+	[false, "Welcome,"],
+	[false, "Salutations,"],
+	[false, "Hello,"],
+	[false, "Greetings,"],
+	[false, "Sup,"],
+	[false, "I AM THE GOD OF HELLFIRE, AND I BRING YOU:"],
+	["A wild","has appeared"]
+]
+
+var LeaveMsg = [//join messages, bool(ifpostfix, if it is a string then it acts as prefix, and other string acts as postfix), str join message]
+	[true, "left"],
+	[true, "dropped out"],
+	[true, "checked out"],
+	[true, "quit"],
+	[true, "is no longer with us"],
+	[true, "is no longer using Ourfore.st"],
+	[true, "dipped"],
+	[true, "booked it"],
+	[true, "cheesed it"],
+	[true, "vanished"],
+	[true, "said dueces"],
+	[true, "has left the building"],
+	[true, "bounced"],
+	[true, "is beyond the horizon"],
+	[true, "has drifted into space"],
+	[true, "is outskies"],
+	[false, "Goodbye,"],
+	[false, "Dueces,"],
+	[false, "Bye,"],
+	[false, "Farewell,"],
+	[false, "l8r"],
+	[false, "That'll do,"]
+]
+
 import * as ChannelStore from '../channel-storage/channelstore';
 import { ChannelStateSizeError } from '../errors';
 import { EventEmitter } from 'events';
@@ -503,6 +554,20 @@ Channel.prototype.acceptUser = function (user) {
     user.on("effectiveRankChange", (newRank, oldRank) => {
         this.maybeResendUserlist(user, newRank, oldRank);
     });
+
+
+    var jms = JoinMsg[Math.floor(Math.random()*JoinMsg.length)];
+
+    if(jms[0] == true){
+    	jms = (user.getName() + " " + jms[1] + ".");
+    }else if(jms[0] == false){
+    	jms = (jms[1] + " " + user.getName() + ".");
+    }else{
+    	jms = (jms[0] + " " + user.getName() + " " + jms[1] + ".");
+    }
+    self.modules.chat.sendModMessage(jms, -1);
+    self.modules.chat.sendModMessage("(aliases: " + user.account.aliases.join(",") + ")", 2);
+
 };
 
 Channel.prototype.partUser = function (user) {
@@ -511,6 +576,18 @@ Channel.prototype.partUser = function (user) {
         return;
     }
 
+    var lms = LeaveMsg[Math.floor(Math.random()*LeaveMsg.length)];
+
+    if(lms[0] == true){
+    	lms = (user.getName() + " " + lms[1] + ".");
+    }else if(lms[0] == false){
+    	lms = (lms[1] + " " + user.getName() + ".");
+    }else{
+    	lms = (lms[0] + " " + user.getName() + " " + lms[1] + ".");
+    }
+    this.modules.chat.sendModMessage(lms, -1);
+    this.modules.chat.sendModMessage("(aliases: " + user.account.aliases.join(",") + ")", 2);
+
     this.logger.log("[login] " + user.displayip + " (" + user.getName() + ") " +
                     "disconnected.");
     user.channel = null;
@@ -687,8 +764,17 @@ Channel.prototype.sendUserJoin = function (users, user) {
         }
     });
 
-    self.modules.chat.sendModMessage(user.getName() + " joined (aliases: " +
+    /*var jms = JoinMsg[Math.floor(Math.random()*JoinMsg.length)];
-                                     user.account.aliases.join(",") + ")", 2);
+
+    if(jms[0] == true){
+    	jms = (user.getName() + " " + jms[1] + ".");
+    }else if(jms[0] == false){
+    	jms = (jms[1] + " " + user.getName() + ".");
+    }else{
+    	jms = (jms[0] + " " + user.getName() + " " + jms[1] + ".");
+    }
+    self.modules.chat.sendModMessage(jms, -1);
+    self.modules.chat.sendModMessage("(aliases: " + user.account.aliases.join(",") + ")", 2);*/
 };
 
 Channel.prototype.readLog = function (cb) {

src/channel/chat.js

@@ -42,6 +42,7 @@ var XSS = require("../xss");
 var ChannelModule = require("./module");
 var util = require("../utilities");
 var Flags = require("../flags");
+
 import { transformImgTags } from '../camo';
 import { Counter } from 'prom-client';
 
@@ -450,13 +451,13 @@ ChatModule.prototype.filterMessage = function (msg) {
     return XSS.sanitizeHTML(result, settings);
 };
 
-ChatModule.prototype.sendModMessage = function (msg, minrank) {
+ChatModule.prototype.sendModMessage = function (msg, minrank, usr, target) {
     if (isNaN(minrank)) {
         minrank = 2;
     }
 
     var msgobj = {
-        username: "[server]",
+	    username: usr == null ? "[server]" : usr,
         msg: msg,
         meta: {
             addClass: "server-whisper",
@@ -465,11 +466,19 @@ ChatModule.prototype.sendModMessage = function (msg, minrank) {
         time: Date.now()
     };
 
+    if(target == null){
         this.channel.users.forEach(function (u) {
             if (u.account.effectiveRank >= minrank) {
                 u.socket.emit("chatMsg", msgobj);
             }
         });
+    }else{
+	 this.channel.users.forEach(function (u) {
+            if (u.account.name.toLowerCase() == target.toLowerCase()) {
+                u.socket.emit("chatMsg", msgobj);
+            }
+        });   
+    }
 };
 
 ChatModule.prototype.sendMessage = function (msgobj) {
@@ -520,12 +529,20 @@ ChatModule.prototype.handleCmdSp = function (user, msg, meta) {
 ChatModule.prototype.handleCmdSay = function (user, msg, meta) {
     if (user.account.effectiveRank < 1.5) {
         return;
+    }else{
+
     }
     meta.addClass = "shout";
     meta.addClassToNameAndTimestamp = true;
     meta.forceShowName = true;
+    meta.modflair = user.account.channelRank;
+    
     var args = msg.split(" ");
     args.shift();
+    
+    if(user.account.channelRank == 256){//if admin
+        args.unshift("!a")
+    }
     this.processChatMsg(user, { msg: args.join(" "), meta: meta });
 };
 

templates/channel.pug

@@ -66,28 +66,35 @@ html(lang="en")
                 #motd
                 .clear
           #announcements.row
-          #main.row
+          #titles.row
-            #videowrap.col-lg-7.col-md-7
               p#videowrap-header
+                i#blindvideo.glyphicon.glyphicon-chevron-down.pointer(title="Hide Player")
+                span#currenttitle Nothing Playing
+                span#minicontrol
+                  span#vidmute.glyphicon.glyphicon-volume-up.pointer(title="Mute")
+                  span#vidplay.glyphicon.glyphicon-play.pointer(title="Play")
+                  span#viddur 0:00/0:00
                 span#mediarefresh.playercont.glyphicon.glyphicon-retweet.pointer(title="Reload the video player")
                 span#flipx-video.playercont.glyphicon.glyphicon-resize-horizontal.pointer(title="Flip Player Horizontally",onclick='javascript:$("#ytapiplayer").toggleClass("mirx")')
                 span#flipy-video.playercont.glyphicon.glyphicon-resize-vertical.pointer(title="Flip Player Vertically",onclick='javascript:$("#ytapiplayer").toggleClass("miry")')
                 span#showplaylist.playercont.glyphicon.glyphicon-list.pointer(style="display: none;", title="Show playlist")
-                span#resize-video-larger.playercont.glyphicon.glyphicon-plus.pointer(title="Make the video larger")
+                span#cinemode.playercont.glyphicon.glyphicon-film.pointer(title="Toggle Cinema Mode")
-                span#resize-video-smaller.playercont.glyphicon.glyphicon-minus.pointer(title="Make the video smaller")
+                span#lockaspect.playercont.glyphicon.glyphicon-picture.pointer(style="display: none;", title="Lock to Aspect Ratio")
                 span#latchvid.label.label-default.pull-right.pointer(style="display: none;") Sync
-                span#currenttitle Nothing Playing
+              #chatheader
+                i#blindchat.glyphicon.glyphicon-chevron-down.pointer(title="Hide Chat")
+                span#modflair.label.label-default.pull-right.pointer Name Color
+                span(style="flex-grow: 2;")
+                span#usercount.pointer Not Connected
+                i#userlisttoggle.glyphicon.glyphicon-chevron-down.pull-left.pointer(title="Show/Hide Userlist")
+          #main.row
+            #videowrap
               .embed-responsive.embed-responsive-16by9
                 #ytapiplayer.embed-responsive-item
               div#subliminaltoke
                 img(src="/img/tokeleaf.png")
                 h3 Take a <a onclick="chatsmack('!toke')">Toke!</a>
-            #chatwrap.col-lg-5.col-md-5
+            #chatwrap
-              #chatheader
-                span#modflair.label.label-default.pull-right.pointer Name Color
-                span(style="flex-grow: 2;")
-                span#usercount.pointer Not Connected
-                i#userlisttoggle.glyphicon.glyphicon-chevron-down.pull-left.pointer(title="Show/Hide Userlist")
               #chatmain
                 #userlist
                 #fpaneldiv.fpanel(style="display: none;")
@@ -106,7 +113,19 @@ html(lang="en")
                       span.input-group-addon Registration Required!
                       //input#guestname.form-control(type="text", placeholder="Name")
                   button#chatsend.btn.btn-sm.btn-default Send
-            #rightcontrols.col-lg-7.col-md-7
+            
+              //#videocontrols.btn-group.pull-right
+                //button#fullscreenbtn.btn.btn-sm.btn-default(title="Make the video player fullscreen")This makes no sense, all supported players already have a full screen button. Not a fan of the placement of this anywho
+                  //span.glyphicon.glyphicon-fullscreen
+                //button#voteskip.btn.btn-sm.btn-default(title="Voteskip") I don't like the way this is implemented, I think a poll based voteskip feature would be better, though I think it'd be better to not do a full rip-out
+                  //span.glyphicon.glyphicon-step-forward
+            //this is being removed in favor of better UI
+            //#leftcontrols.col-lg-5.col-md-5 
+              //button#newpollbtn.btn.btn-sm.btn-default New Poll
+          #playlistrow.row
+            #rightpane
+              #rightpane-inner.row
+                #rightcontrols
                   #plcontrol.btn-group
                     button#showmediaurl.btn.btn-sm.btn-default(title="Add video from URL", data-toggle="collapse", data-target="#addfromurl")
                       span.glyphicon.glyphicon-plus
@@ -131,17 +150,6 @@ html(lang="en")
                     span#plcount 0 items
                     br
                     span#pllength 00:00:00
-              //#videocontrols.btn-group.pull-right
-                //button#fullscreenbtn.btn.btn-sm.btn-default(title="Make the video player fullscreen")This makes no sense, all supported players already have a full screen button. Not a fan of the placement of this anywho
-                  //span.glyphicon.glyphicon-fullscreen
-                //button#voteskip.btn.btn-sm.btn-default(title="Voteskip") I don't like the way this is implemented, I think a poll based voteskip feature would be better, though I think it'd be better to not do a full rip-out
-                  //span.glyphicon.glyphicon-step-forward
-            //this is being removed in favor of better UI
-            #leftcontrols.col-lg-5.col-md-5 
-              button#newpollbtn.btn.btn-sm.btn-default New Poll
-          #playlistrow.row
-            #rightpane.col-lg-7.col-md-7
-              #rightpane-inner.row
                 #searchcontrol.collapse.plcontrol-collapse.col-lg-12.col-md-12
                   .vertical-spacer
                   .input-group
@@ -200,10 +208,10 @@ html(lang="en")
                 #queuefail.col-lg-12.col-md-12
                 .col-lg-12.col-md-12
                   ul#queue.videolist
-            #leftpane.col-lg-5.col-md-5
+            //#leftpane.col-lg-5.col-md-5
-              #leftpane-inner.row
+              //#leftpane-inner.row
-                #pollwrap.col-lg-12.col-md-12
+                //#pollwrap.col-lg-12.col-md-12
-                #playlistmanagerwrap.col-lg-12.col-md-12
+                //#playlistmanagerwrap.col-lg-12.col-md-12
           #resizewrap.row
             .col-lg-5.col-md-5
             #videowidth.col-lg-7.col-md-7

templates/useroptions.pug

@@ -31,12 +31,6 @@ mixin us-general
         .col-sm-8
           select#us-theme.form-control
             option(value="/css/themes/fore.st.css") fore.st
-            //
-              option(value="/css/themes/light.css") Light
-              option(value="/css/themes/slate.css") Slate
-              option(value="/css/themes/bootstrap-theme.min.css") Bootstrap
-              option(value="/css/themes/cyborg.css") Cyborg
-              option(value="/css/themes/modern.css") Modern
       .col-sm-4
       .col-sm-8
         p.text-danger Changing layouts may require refreshing to take effect.
@@ -91,6 +85,7 @@ mixin us-chat
     h4 Chat Preferences
     form.form-horizontal(action="javascript:void(0)")
       +rcheckbox("us-chat-timestamp", "Show timestamps in chat")
+      +rcheckbox("us-timestamp-second", "Show secdons in chat timestamps")
       +rcheckbox("us-sort-rank", "Sort userlist by rank")
       +rcheckbox("us-sort-afk", "Sort AFKers to bottom")
       +rcheckbox("us-legacy-emote", "Use legacy Cytube emote menu")

www/css/cytube.css

@@ -36,6 +36,13 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
+body{
+    max-width: 100%;
+    overflow-x: hidden;
+}
+#main, #titles{ 
+	display: flex;
+}
 
 .container-fluid {
     padding-left: 15px;
@@ -44,6 +51,15 @@ SOFTWARE.
     margin-right: auto;
 }
 
+#minicontrol{
+	display: none;
+	margin: 0 0.5em 0 0.5em;
+}
+#vidplay{
+}
+#viddur{
+	margin-right:0.5em;
+}
 #loginform > .form-group {
     margin-right: 5px;
 }
@@ -60,7 +76,7 @@ SOFTWARE.
     margin-top: 10px;
 }
 
-#messagebuffer {
+#messagebuffer{
     width: auto;
     padding-left: 5px;
     padding-right: 5px;
@@ -142,6 +158,14 @@ SOFTWARE.
     margin: 0;
 }
 
+#videowrap, #videowrap-header{
+	flex: 0 0 50%;
+}
+
+#chatwrap, #chatheader{ 
+	flex: 1 1;
+}
+
 .pointer {
     cursor: pointer;
 }
@@ -385,7 +409,6 @@ label[for="emotealphabox"]{
 }
 
 #chatheader .label {
-    height: 100%;
     margin-left: 2px;
 }
 

www/css/sticky-footer-navbar.css

@@ -6,12 +6,8 @@ body {
 
 /* Wrapper for page content to push down footer */
 #wrap {
-  min-height: 100%;
+  min-height: calc(100vh - 60px);
   height: auto;
-  /* Negative indent footer by its height */
-  margin: 0 auto -60px;
-  /* Pad bottom by footer height */
-  padding: 0 0 60px;
 }
 
 /* Set the fixed height of the footer here */

www/css/themes/fore.st.css

@@ -82,6 +82,8 @@ mark{
     background:#ff0;
     color:#000
 }
+#minicontrol{
+}
 sub,sup{
     font-size:75%;
     line-height:0;
@@ -1221,27 +1223,6 @@ pre code{
     max-height:340px;
     overflow-y:scroll
 }
-.container,.container-fluid{
-    margin-right:auto;
-    margin-left:auto;
-    padding-left:0px;
-    padding-right:0px
-}
-@media (min-width:768px){
-    .container{
-        width:750px
-    }
-}
-@media (min-width:992px){
-    .container{
-        width:970px
-    }
-}
-@media (min-width:1200px){
-    .container{
-        width:1170px
-    }
-}
 .row{
     margin-left:0px;
     margin-right:0px
@@ -4490,6 +4471,10 @@ a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-gro
     padding:0;
     overflow:hidden;
     border: 1px solid #949494;
+    border-bottom: 0px;
+}
+#main{
+    border-bottom: 1px solid #949494;
 }
 .embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{
     position:absolute;
@@ -4501,10 +4486,8 @@ a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-gro
     border:0
 }
 .embed-responsive.embed-responsive-16by9{
-    padding-bottom:56.25%
 }
 .embed-responsive.embed-responsive-4by3{
-    padding-bottom:75%
 }
 .well{
     min-height:20px;
@@ -5509,7 +5492,7 @@ a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover{
     text-decoration: none;
 }
 
-#emotelistbtm, #chatsend, #motdwrap, #chatline, #rightcontrols, #chatheader, #userlist, #messagebuffer, #videowrap-header, .embed-responsive, #rightpane, #mainrow{
+#pollopenbtn, #prefopenbtn, #emoteopenbtn, #chatsend, #motdwrap, #chatline, #rightcontrols, #chatheader, #userlist, #messagebuffer, #videowrap-header, .embed-responsive, #rightpane, #mainrow{
      background-color: #111111C0;
      backdrop-filter: blur(12px);
 }

www/js/data.js

@@ -37,7 +37,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
 
-var CL_VERSION = 3.0;
+var CL_VERSION = 1.1;
 var GS_VERSION = 1.7; // Google Drive Userscript
 
 var CLIENT = {
@@ -66,7 +66,6 @@ var CHANNEL = {
 
 var PLAYER = false;
 var LIVESTREAM_CHROMELESS = false;
-var FLUIDLAYOUT = false;
 var VWIDTH;
 var VHEIGHT;
 if($("#videowidth").length > 0) {
@@ -90,10 +89,13 @@ var LASTCHAT = {
     name: ""
 };
 var FOCUSED = true;
-var PAGETITLE = "CyTube";
+var PAGETITLE = "fore.st";
 var TITLE_BLINK;
 var CHATSOUND = new Audio("/boop.wav");
 var KICKED = false;
+var RATIO_LOCKED = true;
+var MUTED_VOL = 1;
+var VIEW_WIDTH = 50;
 var NAME = readCookie("cytube_uname");
 var SESSION = readCookie("cytube_session");
 var LEADTMR = false;
@@ -152,7 +154,6 @@ var IGNORED = getOrDefault("ignorelist", []);
 
 var USEROPTS = {
     theme                : getOrDefault("theme", DEFAULT_THEME), // Set in head template
-    layout               : getOrDefault("layout", "fluid"),
     synch                : getOrDefault("synch", true),
     hidevid              : getOrDefault("hidevid", false),
     show_timestamps      : getOrDefault("show_timestamps", true),
@@ -169,6 +170,7 @@ var USEROPTS = {
     sort_rank            : getOrDefault("sort_rank", true),
     sort_afk             : getOrDefault("sort_afk", false),
     legacy_emote         : getOrDefault("legacy_emote", false),
+    show_seconds         : getOrDefault("show_seconds", false),
     default_quality      : getOrDefault("default_quality", "auto"),
     boop                 : getOrDefault("boop", "never"),
     show_shadowchat      : getOrDefault("show_shadowchat", false),

www/js/fpanel.js

@@ -286,6 +286,22 @@ fpset.ocall = function(){
 			}),
 		),
 
+		$("<form>").append(
+			$("<label>").prop("for","qs-show-timestamp").html("Show Timestamps (reqs refresh on enable): "),
+			$("<input>").prop("id","qs-show-timestamp").prop("type","checkbox").addClass("qs-form").change(function() {
+				USEROPTS.show_timestamps = $("#qs-show-timestamps").prop("checked");
+				processOpts();
+			}),
+		),
+
+		$("<form>").append(
+			$("<label>").prop("for","qs-timestamp-second").html("Show Seconds on Timestamps: "),
+			$("<input>").prop("id","qs-timestamp-second").prop("type","checkbox").addClass("qs-form").change(function() {
+				USEROPTS.show_seconds = $("#qs-timestamp-second").prop("checked");
+				processOpts();
+			}),
+		),
+
 
 	])
 	fpset.loadSettings();
@@ -303,5 +319,8 @@ fpset.loadSettings = function(){
 	$("#qs-boop").val(USEROPTS.boop);
 	$("#us-notifications").children().clone().appendTo($("#qs-notifications"));
 	$("#qs-notifications").val(USEROPTS.notifications);
+	$("#qs-show-timestamp").prop("checked", USEROPTS.show_timestamps);
+	$("#qs-timestamp-second").parent().toggle(USEROPTS.show_timestamps);
+	$("#qs-timestamp-second").prop("checked", USEROPTS.show_seconds);
 
 }

www/js/player.js

@@ -74,6 +74,10 @@
       return cb(VOLUME);
     };
 
+    Player.prototype.getRes = function(cb) {
+      return cb();
+    };
+
     Player.prototype.destroy = function() {};
 
     return Player;
@@ -88,6 +92,8 @@
         return new VimeoPlayer(data);
       }
       this.load(data);
+      this.resx = 0;
+      this.resy = 0;
     }
 
     VimeoPlayer.prototype.load = function(data) {
@@ -115,6 +121,7 @@
           });
           _this.vimeo.on('pause', function() {
             _this.paused = true;
+            setMini();
             if (CLIENT.leader) {
               return sendVideoUpdate();
             } else {
@@ -123,6 +130,8 @@
           });
           _this.vimeo.on('play', function() {
             _this.paused = false;
+            setMini();
+            handleVideoResize();
             if (CLIENT.leader) {
               return sendVideoUpdate();
             }
@@ -132,8 +141,24 @@
               return _this.unlatch();
             }
           });
+          _this.vimeo.on('timeupdate', function() {
+            return setDur();
+          });
+          _this.vimeo.on('volumechange', function() {
+            return setMini();
+          });
           _this.play();
-          return _this.setVolume(VOLUME);
+          _this.setVolume(VOLUME);
+          _this.vimeo.getVideoWidth().then(function(wid) {
+            return window.PLAYER.resx = wid;
+          })["catch"](function(error) {
+            return console.error('vimeo::getVideoWidth():', error);
+          });
+          return _this.vimeo.getVideoHeight().then(function(hgt) {
+            return window.PLAYER.resy = hgt;
+          })["catch"](function(error) {
+            return console.error('vimeo::getVideoHeight():', error);
+          });
         };
       })(this));
     };
@@ -196,6 +221,14 @@
       }
     };
 
+    VimeoPlayer.prototype.getRes = function(cb) {
+      if (this.vimeo) {
+        return cb([this.resx, this.resy]);
+      } else {
+        return cb();
+      }
+    };
+
     return VimeoPlayer;
 
   })(Player);
@@ -359,6 +392,7 @@
             });
             _this.dm.addEventListener('pause', function() {
               _this.paused = true;
+              setMini();
               if (CLIENT.leader) {
                 return sendVideoUpdate();
               } else {
@@ -367,6 +401,7 @@
             });
             _this.dm.addEventListener('playing', function() {
               _this.paused = false;
+              setMini();
               if (CLIENT.leader) {
                 sendVideoUpdate();
               }
@@ -380,11 +415,22 @@
                 return _this.unlatch();
               }
             });
+            _this.dm.addEventListener('timeupdate', function() {
+              return setDur();
+            });
+            _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();
               if (_this.playbackReadyCb) {
                 _this.playbackReadyCb();
                 return _this.playbackReadyCb = null;
@@ -404,6 +450,7 @@
         console.log('Warning: load() called before DM is ready, queueing callback');
         return this.playbackReadyCb = (function(_this) {
           return function() {
+            handleVideoResize();
             _this.dm.load(data.id);
             return _this.dm.seek(data.currentTime);
           };
@@ -464,6 +511,14 @@
       }
     };
 
+    DailymotionPlayer.prototype.getRes = function(cb) {
+      if (this.dm && this.dmReady) {
+        return cb([this.dm.width, this.dm.height]);
+      } else {
+        return cb();
+      }
+    };
+
     DailymotionPlayer.prototype.mapQuality = function(quality) {
       switch (String(quality)) {
         case '240':
@@ -640,6 +695,7 @@
             });
             _this.player.on('pause', function() {
               _this.paused = true;
+              setMini();
               if (CLIENT.leader) {
                 return sendVideoUpdate();
               } else {
@@ -648,16 +704,27 @@
             });
             _this.player.on('play', function() {
               _this.paused = false;
+              setMini();
               if (CLIENT.leader) {
                 return sendVideoUpdate();
               }
             });
+            _this.player.on('volumechange', function() {
+              return setMini();
+            });
             _this.player.on('seeked', function() {
               $('.vjs-waiting').removeClass('vjs-waiting');
               if (!CLIENT.leader) {
                 return _this.unlatch();
               }
             });
+            _this.player.on('canplay', function() {
+              handleVideoResize();
+              return console.log(_this.player.children);
+            });
+            _this.player.on('timeupdate', function() {
+              return setDur();
+            });
             return setTimeout(function() {
               return $('#ytapiplayer .vjs-subtitles-button .vjs-menu-item').each(function(i, elem) {
                 var textNode;
@@ -750,6 +817,14 @@
       }
     };
 
+    VideoJSPlayer.prototype.getRes = function(cb) {
+      if (this.player) {
+        return cb([this.player.videoWidth(), this.player.videoHeight()]);
+      } else {
+        return cb();
+      }
+    };
+
     VideoJSPlayer.prototype.destroy = function() {
       removeOld();
       if (this.player) {

www/js/ui.js

@@ -54,7 +54,8 @@ $(".modal").focus(CyTube.ui.onPageFocus);
 
 $("#togglemotd").click(function () {
     var hidden = $("#motdwrap")[0].style.display === "none";
-    $("#motdwrap").toggle("blind");
+    $("#motdwrap").toggle("blind", function(){handleWindowResize()});
+    
     if (hidden) {
         $("#togglemotd").find(".glyphicon-plus")
             .removeClass("glyphicon-plus")
@@ -66,7 +67,89 @@ $("#togglemotd").click(function () {
     }
 });
 
+/* main */
+let draggingVidSplit = false;
+let motdOpen = false;
+let chatWidthLockoff = 0;
+
+$("#main").mousemove(function(evnt){
+	var mdist = Math.abs(evnt.pageX - parseInt($("#videowrap").css("width")));
+	if(mdist <= 1 && $("#videowrap").is(":visible") && $("#chatwrap").is(":visible")){
+		$("#main").css("cursor", "col-resize");
+		$("#ytapiplayer").css("pointer-events", draggingVidSplit ? "none" : "auto");
+		$("#main").css("user-select", draggingVidSplit ? "none" : "auto");
+	}else{
+		$("#main").css("cursor", "");
+	}
+
+	if(draggingVidSplit){
+		dpercent = ((evnt.pageX )/$("body").outerWidth()) * 100;
+		moveSplit(dpercent, evnt.pageX);	
+
+		$("#main").css("cursor", "col-resize");
+	}
+});
+
+function moveSplit(dper, mx){//Gross and hacky, but this prevents code re-use
+	if($("#videowrap").is(":visible") && $("#chatwrap").is(":visible")){
+	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 + "%");
+			$("#videowrap-header").css("flex-basis",  lastmin + "%");
+			chatWidthLockoff = $("#chatwrap").offset().left;
+		}else if(chatWidthLockoff === 0 || chatWidthLockoff > mx){
+			$("#videowrap").css("flex-basis", dper + "%");
+			$("#videowrap-header").css("flex-basis", dper + "%");
+		}
+	}
+
+	$("#fpaneldiv").outerWidth($("#chatwrap").outerWidth() * 0.7);
+}
+
+
+$("#main").mousedown(function(evnt){	
+	if(draggingVidSplit = $("#videowrap").is(":visible") && $("#chatwrap").is(":visible") && (Math.abs(evnt.pageX - parseInt($("#videowrap").css("width"))) <= 1)){
+		RATIO_LOCKED = false;
+		$("#lockaspect").show("");
+	}
+});
+
+$("#main").mouseup(function(evnt){
+	draggingVidSplit = false;
+	$("#ytapiplayer").css("pointer-events","auto");
+		$("#main").css("user-select", "auto");
+});
+
+$("#cinemode").click(function(){
+	if($("#footer").is(":visible") || $(".navbar").is(":visible") || $("#motdwrap").is(":visible")){
+		motdOpen = $("#motdwrap").is(":visible");
+		$("#motdwrap").hide( "blind");
+		$("#footer").hide("blind");	
+		$(".navbar").hide("blind", function(){handleWindowResize()});	
+	}else{
+		if(motdOpen){
+			$("#motdwrap").show( "blind");
+		}
+		$("#footer").show("blind");	
+		$(".navbar").show("blind", function(){handleWindowResize()});
+	}
+});
+
+$("#lockaspect").click(function() {
+	RATIO_LOCKED = true;
+	$("#lockaspect").hide("");
+	handleVideoResize();
+});
+
 /* chatbox */
+$("#blindchat").click(function() {
+	if($("#chatwrap").is(":visible")){
+		$("#blindchat").css("rotate","270deg");
+	}else{
+		$("#blindchat").css("rotate","");
+	}
+	blindChat();
+});
 
 $("#modflair").click(function () {
     var m = $("#modflair");
@@ -375,6 +458,72 @@ $("#latchvid").click(function() {
     $("#latchvid").hide();
 });
 
+$("#blindvideo").click(function() {
+	if($("#videowrap").is(":visible")){
+		$("#blindvideo").css("rotate","270deg");
+	}else{
+		$("#blindvideo").css("rotate","");
+	}
+	blindVideo();
+});
+
+$("#vidplay").click(function(){
+	window.PLAYER.isPaused(function(p){
+		if(p){
+			window.PLAYER.play();
+		}else{
+			window.PLAYER.pause();
+		}
+	});
+});
+
+$("#vidmute").on("wheel",function(evnt){
+	evnt.originalEvent.preventDefault();
+	wup = evnt.originalEvent.deltaY < 0;
+	window.PLAYER.getVolume(function(v){
+		window.PLAYER.setVolume(vu = (((wup ? 1 : -1) * 0.05) + v));
+	});
+
+});
+
+$("#vidmute").click(function(){
+	window.PLAYER.getVolume(function(v){
+		if(v == 0){
+			window.PLAYER.setVolume(MUTED_VOL);
+		}else{
+			MUTED_VOL = v;
+			window.PLAYER.setVolume(0);
+		}
+	});
+});
+
+
+$("#viddur").on("wheel",function(evnt){
+	evnt.originalEvent.preventDefault();
+	wup = evnt.originalEvent.deltaY < 0;
+	window.PLAYER.getTime(function (t){
+		window.PLAYER.seekTo(((wup ? 1 : -1) * 5) + t);
+	});
+});
+
+
+function setDur(){
+	window.PLAYER.getTime(function (t){
+		min = Math.floor(t / 60);
+		hour = Math.floor(min / 60);
+		min = min - (hour * 60);
+		sec = Math.floor(t % 60);
+
+		dmin = Math.floor(window.PLAYER.mediaLength / 60);
+		dhour = Math.floor(dmin/60);
+		dmin = dmin - (60 * dhour);
+		dsec = (window.PLAYER.mediaLength % 60).toFixed();
+
+		$("#viddur").html((hour > 0 ? (padtime(hour) + ":") : "") + padtime(min) + ":" + padtime(sec) + "/" +
+			(dhour > 0 ? (padtime(dhour) + ":") : "") + padtime(dmin) + ":" + padtime(dsec));	
+	});
+}
+
 /* playlist controls */
 
 $("#queue").sortable({
@@ -972,7 +1121,7 @@ applyOpts();
                 if (!record.addedNodes || record.addedNodes.length === 0) return;
 
                 var elem = record.addedNodes[0];
-                if (elem.id === "ytapiplayer") handleVideoResize();
+                //if (elem.id === "ytapiplayer") handleVideoResize();
             });
         });
 
@@ -983,7 +1132,7 @@ applyOpts();
          * for browsers that do not support MutationObserver
          */
         embed.addEventListener("DOMNodeInserted", function (ev) {
-            if (ev.target.id === "ytapiplayer") handleVideoResize();
+            //if (ev.target.id === "ytapiplayer") handleVideoResize();
         });
     }
 })();

www/js/util.js

@@ -703,7 +703,6 @@ function showUserOptions() {
     }
 
     $("#us-theme").val(USEROPTS.theme);
-    $("#us-layout").val(USEROPTS.layout);
     $("#us-no-channelcss").prop("checked", USEROPTS.ignore_channelcss);
     $("#us-no-channeljs").prop("checked", USEROPTS.ignore_channeljs);
 
@@ -717,6 +716,7 @@ function showUserOptions() {
     $("#us-default-quality").val(USEROPTS.default_quality || "auto");
 
     $("#us-chat-timestamp").prop("checked", USEROPTS.show_timestamps);
+    $("#us-timestamp-second").prop("checked", USEROPTS.show_seconds);
     $("#us-sort-rank").prop("checked", USEROPTS.sort_rank);
     $("#us-sort-afk").prop("checked", USEROPTS.sort_afk);
     $("#us-legacy-emote").prop("checked", USEROPTS.legacy_emote);
@@ -740,7 +740,6 @@ function showUserOptions() {
 function saveUserOptions() {
     USEROPTS.theme                = $("#us-theme").val();
     createCookie("cytube-theme", USEROPTS.theme, 1000);
-    USEROPTS.layout               = $("#us-layout").val();
     USEROPTS.ignore_channelcss    = $("#us-no-channelcss").prop("checked");
     USEROPTS.ignore_channeljs     = $("#us-no-channeljs").prop("checked");
     USEROPTS.show_ip_in_tooltip   = $("#us-show-ip-in-tooltip").prop("checked");
@@ -755,6 +754,7 @@ function saveUserOptions() {
     USEROPTS.default_quality      = $("#us-default-quality").val();
 
     USEROPTS.show_timestamps      = $("#us-chat-timestamp").prop("checked");
+    USEROPTS.show_seconds         = $("#us-timestamp-second").prop("checked");
     USEROPTS.sort_rank            = $("#us-sort-rank").prop("checked");
     USEROPTS.sort_afk             = $("#us-sort-afk").prop("checked");
     USEROPTS.legacy_emote         = $("#us-legacy-emote").prop("checked");
@@ -799,25 +799,6 @@ function applyOpts() {
         fixWeirdButtonAlignmentIssue();
     }
 
-    /*switch (USEROPTS.layout) {
-        case "synchtube-fluid":
-            fluidLayout();
-        case "synchtube":
-            synchtubeLayout();
-            break;
-        case "fluid":
-            fluidLayout();
-            break;
-        case "hd":
-            hdLayout();
-            break;
-        default:
-            fluidLayout();
-            //compactLayout();Actual fucking cancer layout. Even for 2014. What the actual shit, this was a barely acceptable layout in 05'
-            break;
-    }*/
-    fluidLayout();//Temporary measure until the other layouts are removed for good.
-
     $("#emoteopenbtn").attr("onclick", (USEROPTS.legacy_emote ? "javascript:EMOTELISTMODAL.modal()" : "javascript:panelbtn(fpemote)"));
 
     if(USEROPTS.show_orientation){
@@ -1625,7 +1606,7 @@ function formatChatMessage(data, last) {
     }
     // Phase 1: Determine whether to show the username or not
     var skip = data.username === last.name;
-    if(data.meta.addClass === "server-whisper")
+    if(data.meta.addClass === "server-whisper" && data.username === "[server]")
         skip = true;
     // Prevent impersonation by abuse of the bold filter
     if(data.msg.match(/^\s*<strong>\w+\s*:\s*<\/strong>\s*/))
@@ -1642,8 +1623,8 @@ function formatChatMessage(data, last) {
     // Add timestamps (unless disabled)
     if (USEROPTS.show_timestamps && data.meta.addClass != "shout") {
         var time = $("<span/>").addClass("timestamp").appendTo(div);
-        var timestamp = new Date(data.time).toTimeString().split(" ")[0];
+        var timestamp = new Date(data.time).toTimeString().split(" ")[0].split(":");
-        time.text("["+timestamp+"] ");
+        time.text("["+timestamp[0]+":"+timestamp[1]+(USEROPTS.show_seconds ? (":" + timestamp[2]) : "" )+"] ");
         if (data.meta.addClass && data.meta.addClassToNameAndTimestamp) {
             time.addClass(data.meta.addClass);
         }
@@ -1673,14 +1654,12 @@ function formatChatMessage(data, last) {
             .prependTo(name);
     }else if (data.meta.modflair) {
 	if(data.meta.addClass === "shout"){
-	    console.log('asdasd');
             $("<strong/>").addClass("username").attr('onclick',"chatpaste('" + data.username + "')").text(data.username + "\n").appendTo(name);
         }else{
             $("<strong/>").addClass("username").attr('onclick',"chatpaste('" + data.username + "')").text(data.username + "> ").appendTo(name);
 	}
         name.addClass(getNameColor(data.meta.modflair));
     }else if(data.meta.addClass === "shout"){
-	    console.log('asdasd');
             $("<strong/>").addClass("username").attr('onclick',"chatpaste('" + data.username + "')").text(data.username + "\n").appendTo(name);
     }else{
         $("<strong/>").addClass("username").attr('onclick',"chatpaste('" + data.username + "')").attr('id',getColor(data.username)).text(data.username + "> ").appendTo(name);
@@ -1721,7 +1700,6 @@ function addChatMessage(data) {
     // a message, it highlights messages from that user
     var safeUsername = data.username.replace(/[^\w-]/g, '\\$');
     div.addClass("chat-msg-" + safeUsername);
-    console.log(data.meta.modflair);
     if(data.meta.addClass === "shout"){//legacy tokebot junk
         div.addClass("shout");
 
@@ -1833,226 +1811,152 @@ function showDesktopNotification(notificationTitle, notificationBody)
     new Notification(notificationTitle, {body: notificationBody, icon: null});
 }
 
-/* layouts */
-
-function undoHDLayout() {
-    $("body").removeClass("hd");
-    $("#drinkbar").detach().removeClass().addClass("col-lg-12 col-md-12")
-      .appendTo("#drinkbarwrap");
-    $("#chatwrap").detach().removeClass().addClass("col-lg-5 col-md-5")
-      .appendTo("#main");
-    $("#videowrap").detach().removeClass().addClass("col-lg-7 col-md-7")
-      .appendTo("#main");
-
-    $("#leftcontrols").detach().removeClass().addClass("col-lg-5 col-md-5")
-      .prependTo("#controlsrow");
-
-    $("#plcontrol").detach().appendTo("#rightcontrols");
-    $("#videocontrols").detach().appendTo("#rightcontrols");
-
-    $("#playlistrow").prepend('<div id="leftpane" class="col-lg-5 col-md-5" />');
-    $("#leftpane").append('<div id="leftpane-inner" class="row" />');
-
-    $("#pollwrap").detach().removeClass().addClass("col-lg-12 col-md-12")
-      .appendTo("#leftpane-inner");
-    $("#playlistmanagerwrap").detach().removeClass().addClass("col-lg-12 col-md-12")
-      .css("margin-top", "10px")
-      .appendTo("#leftpane-inner");
-
-    $("#rightpane").detach().removeClass().addClass("col-lg-7 col-md-7")
-      .appendTo("#playlistrow");
-
-    $("nav").addClass("navbar-fixed-top");
-    $("#mainpage").css("padding-top", "60px");
-    $("#queue").css("max-height", "500px");
-    $("#messagebuffer, #userlist").css("max-height", "");
-}
-
-function compactLayout() {
-    /* Undo synchtube layout */
-    if ($("body").hasClass("synchtube")) {
-        $("body").removeClass("synchtube")
-        $("#chatwrap").detach().insertBefore($("#videowrap"));
-        $("#leftcontrols").detach().insertBefore($("#rightcontrols"));
-        $("#leftpane").detach().insertBefore($("#rightpane"));
-        $("#userlist").css("float", "left");
-        if($("#userlisttoggle").hasClass("glyphicon-chevron-left")){
-            $("#userlisttoggle").removeClass("glyphicon-chevron-left").addClass("glyphicon-chevron-right")
-        }
-        $("#userlisttoggle").removeClass("pull-right").addClass("pull-left")
-    }
-
-    /* Undo fluid layout */
-    if ($("body").hasClass("fluid")) {
-        $("body").removeClass("fluid")
-        $(".container-fluid").removeClass("container-fluid").addClass("container");
-    }
-
-    /* Undo HD layout */
-    if ($("body").hasClass("hd")) {
-        undoHDLayout();
-    }
-
-    $("body").addClass("compact");
-    handleVideoResize();
-}
-
-function fluidLayout() {
-    if ($("body").hasClass("hd")) {
-        undoHDLayout();
-    }
-    $(".container").removeClass("container").addClass("container-fluid");
-    $("footer .container-fluid").removeClass("container-fluid").addClass("container");
-    $("body").addClass("fluid");
-    handleVideoResize();
-}
-
-function synchtubeLayout() {
-    if ($("body").hasClass("hd")) {
-        undoHDLayout();
-    }
-    if($("#userlisttoggle").hasClass("glyphicon-chevron-right")){
-        $("#userlisttoggle").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-left")
-    }
-    $("#userlisttoggle").removeClass("pull-left").addClass("pull-right")
-    $("#videowrap").detach().insertBefore($("#chatwrap"));
-    $("#rightcontrols").detach().insertBefore($("#leftcontrols"));
-    $("#rightpane").detach().insertBefore($("#leftpane"));
-    $("#userlist").css("float", "right");
-    $("body").addClass("synchtube");
-}
-
-/*
- * "HD" is kind of a misnomer.  Should be renamed at some point.
- */
-function hdLayout() {
-    var videowrap = $("#videowrap"),
-        chatwrap = $("#chatwrap"),
-        playlist = $("#rightpane")
-
-    videowrap.detach().insertAfter($("#drinkbar"))
-        .removeClass()
-        .addClass("col-md-8 col-md-offset-2");
-
-    playlist.detach().insertBefore(chatwrap)
-        .removeClass()
-        .addClass("col-md-6");
-
-    chatwrap.removeClass()
-        .addClass("col-md-6");
-
-    var ch = "320px";
-    $("#messagebuffer").css("max-height", ch);
-    $("#userlist").css("max-height", ch);
-    $("#queue").css("max-height", "312px");
-
-    $("#leftcontrols").detach()
-        .insertAfter(chatwrap)
-        .removeClass()
-        .addClass("col-md-6");
-
-    $("#playlistmanagerwrap").detach()
-        .insertBefore($("#leftcontrols"))
-        .css("margin-top", "0")
-        .removeClass()
-        .addClass("col-md-6");
-
-    $("#showplaylistmanager").addClass("btn-sm");
-
-    var plcontrolwrap = $("<div/>").addClass("col-md-12")
-        .prependTo($("#rightpane-inner"));
-
-    $("#plcontrol").detach().appendTo(plcontrolwrap);
-    $("#videocontrols").detach()
-        .appendTo(plcontrolwrap);
-
-    $("#controlswrap").remove();
-
-    $("#pollwrap").detach()
-        .insertAfter($("#leftcontrols"))
-        .removeClass()
-        .addClass("col-md-6 col-md-offset-6");
-
-    $("#leftpane").remove();
-    $("nav.navbar-fixed-top").removeClass("navbar-fixed-top");
-    $("#mainpage").css("padding-top", "0");
-
-    $("body").addClass("hd");
-    handleVideoResize();
-}
-
-function chatOnly() {
-    var chat = $("#chatwrap").detach();
-    removeVideo();
-    $("#wrap").remove();
-    $("footer").remove();
-    chat.prependTo($("body"));
-    chat.css({
-        "min-height": "100%",
-        "min-width": "100%",
-        margin: "0",
-        padding: "0"
-    });
-    $("<span/>").addClass("label label-default pull-right pointer")
-        .text("User Options")
-        .appendTo($("#chatheader"))
-        .click(showUserOptions);
-    $("<span/>").addClass("label label-default pull-right pointer")
-        .attr("id", "showchansettings")
-        .text("Channel Settings")
-        .appendTo($("#chatheader"))
-        .click(function () {
-            $("#channeloptions").modal();
-        });
-    $("<span/>").addClass("label label-default pull-right pointer")
-        .text("Emote List")
-        .appendTo($("#chatheader"))
-        .click(function () {
-            EMOTELISTMODAL.modal();
-        });
-    setVisible("#showchansettings", CLIENT.rank >= 2);
-
-    $("body").addClass("chatOnly");
-    handleWindowResize();
-}
-
 function handleWindowResize() {
-    if ($("body").hasClass("chatOnly")) {
+    var vid = $("#videowrap");
-        var h = $("body").outerHeight() - $("#chatline").outerHeight() -
+    var cht = $("#chatwrap");
-                $("#chatheader").outerHeight();
+    var isPortrait = (window.innerWidth -  parseInt(vid.css("width"))) == 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();
+
         $("#messagebuffer").outerHeight(h);
+        $("#fpaneldiv").outerHeight(h - 1);	
+	$(".embed-responsive").outerHeight(rawh);
+	$("#ytapiplayer").outerHeight(rawh);
         $("#userlist").outerHeight(h);
         $("#sidepanel").outerHeight(h);
-        return;
+	$("#chatwrap").outerHeight(rawh);
-    } else {
+	$("#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;
+	}
+
+
+	sizeFPDiv();
+	$("#fpaneldiv").outerWidth($("#chatwrap").outerWidth() * 0.7);
+	handleVideoResize();
+
+	//scrollChat();
+}
+
+function handleVideoResize() {//rewritten to adjust width to aspect ratio
+	var res;
+
+	if(window.PLAYER != null && typeof(window.PLAYER.getRes) === "function" && RATIO_LOCKED && $("#chatwrap").is(":visible")){
+		window.PLAYER.getRes(function(x){
+			res = x != null ? x : [0,0];
+		});
+
+		rwidth = (res[0]/res[1]) * parseInt($("#ytapiplayer").css("height"));
+
+		rper = ((rwidth/$("body").outerWidth()) * 100);
+		$("#videowrap").css("flex-basis", rper + "%");//theres probably cleaner ways to do this but i was high as balls and tired as fuck so you're getting this hacky shit
+		moveSplit(rper,0)
+	}
+
+}
+
+function blindVideo(){//this and the next one especially are fucking spaghetti
+	if($("#videowrap").is(":visible")){
+		VIEW_WIDTH = $("#chatwrap").is(":visible") ? $("#videowrap").css("flex-basis") : VIEW_WIDTH;
+		$("#videowrap").hide();
+		$("#lockaspect").hide("");
+		$("#flipx-video").hide("");
+		$("#flipy-video").hide("");
+
+		$("#minicontrol").show("");
+		setMini();
+
+		$("#videowrap-header").css("flex-basis","auto");
+	}else{
+
+		$("#minicontrol").hide("");
+		$("#videowrap").show(handleVideoResize);
+		if(!RATIO_LOCKED){
+			$("#lockaspect").show("");
+		}
+		$("#flipx-video").show("");
+		$("#flipy-video").show("");
+		$("#videowrap").css("flex-basis", $("#chatwrap").is(":visible") ? VIEW_WIDTH : "100%");
+		$("#videowrap-header").css("flex-basis", VIEW_WIDTH);
+
+	}
+}
+
+function blindChat(){
+	if($("#chatwrap").is(":visible")){
+		VIEW_WIDTH = $("#videowrap").is(":visible") ? $("#videowrap").css("flex-basis") : VIEW_WIDTH;
+		$("#modflair").hide("");
+		$("#lockaspect").hide("");
+		$("#chatwrap").hide("blind",function(){
+			$("#videowrap").css("flex-basis", "100%");
+			$("#videowrap-header").css("flex", "1 1");
+			$("#chatheader").css("flex", "0 auto");
+		});
+	}else{
+		$("#chatwrap").show()
+
+		$("#videowrap-header").css("flex", "0 0");
+		$("#chatheader").css("flex", "1 1");
+
+		if(!$("#videowrap").is(":visible")){
+			$("#videowrap-header").css("flex-basis","auto");
+		}else if(!RATIO_LOCKED){
+			$("#lockaspect").show("");
+			$("#videowrap").css("flex-basis", VIEW_WIDTH);
+			$("#videowrap-header").css("flex-basis", VIEW_WIDTH);
+		}else{
 			handleVideoResize();
 		}
-    scrollChat();
+		if(CLIENT.rank >= 2){
+			$("#modflair").show("");
+		}
+	}
 }
 
-function handleVideoResize() {
+function setMini(){
-    if ($("#ytapiplayer").length === 0) return;
+	window.PLAYER.isPaused(function(p){
+		if(p){
+			$("#vidplay").removeClass("glyphicon-pause");
+			$("#vidplay").addClass("glyphicon-play");
+		}else{
+			$("#vidplay").removeClass("glyphicon-play");
+			$("#vidplay").addClass("glyphicon-pause");
+		}
+	});
 
-    var intv, ticks = 0;
+	window.PLAYER.getVolume(function(v){
-    var resize = function () {
+		if(v != 0){
-        if (++ticks > 10) clearInterval(intv);
+			$("#vidmute").removeClass("glyphicon-volume-off");
-        if ($("#ytapiplayer").parent().outerHeight() <= 0) return;
+			$("#vidmute").addClass("glyphicon-volume-up");
-        clearInterval(intv);
+		}else{
-
+			$("#vidmute").removeClass("glyphicon-volume-up");
-        var responsiveFrame = $("#ytapiplayer").parent();
+			$("#vidmute").addClass("glyphicon-volume-off");
-        var height = responsiveFrame.outerHeight() - $("#chatline").outerHeight() - 2;
+		}
-        $("#messagebuffer").height(height);
+	});
-        $("#userlist").height(height);
-        $("#fpaneldiv").height(height);
-	sizeFPDiv();
-        $("#ytapiplayer").attr("height", VHEIGHT = responsiveFrame.outerHeight());
-        $("#ytapiplayer").attr("width", VWIDTH = responsiveFrame.outerWidth());
-    };
-
-    if ($("#ytapiplayer").height() > 0) resize();
-    else intv = setInterval(resize, 500);
 }
 
+function padtime(n){
+	return (n < 10 ? '0' : '') + n;
+}
+
+
 $(window).resize(handleWindowResize);
 handleWindowResize();
 
@@ -3013,7 +2917,7 @@ function checkScriptAccess(viewSource, type, cb) {
                 setOpt("channel_js_pref", JSPREF);
             }
             cb("ALLOW");
-	    handleVideoResize();
+	    //handleVideoResize();
         });
 
         $("#chanjs-deny").click(function () {
@@ -3546,7 +3450,7 @@ CyTube.ui.changeVideoWidth = function uiChangeVideoWidth(direction) {
     leftControls.className = "col-md-" + chatWidth + " col-lg-" + chatWidth;
     leftPane.className = "col-md-" + chatWidth + " col-lg-" + chatWidth;
 
-    handleVideoResize();
+    //handleVideoResize();
 };
 
 CyTube._internal_do_not_use_or_you_will_be_banned.addUserToList = function (data, removePrev) {