Major frontend redesign (#5)

* Major frontend redesign

* Some improvements

Co-authored-by: RblSb <msrblsb@gmail.com>

11 files changed, 1165 insertions, 2019 deletions

diff --git a/res/client.js b/res/client.js
index cecba6b..f7cf45c 100644
--- a/res/client.js
+++ b/res/client.js
@@ -1,4 +1,4 @@
-// Generated by Haxe 4.0.5
+// Generated by Haxe 4.1.0+9cbc59342
 (function ($hx_exports, $global) { "use strict";
 $hx_exports["client"] = $hx_exports["client"] || {};
 $hx_exports["client"]["JsApi"] = $hx_exports["client"]["JsApi"] || {};
@@ -78,7 +78,7 @@ EReg.prototype = {
 		if(this.r.m != null && n >= 0 && n < this.r.m.length) {
 			return this.r.m[n];
 		} else {
-			throw new js__$Boot_HaxeError("EReg::matched");
+			throw haxe_Exception.thrown("EReg::matched");
 		}
 	}
 };
@@ -112,12 +112,8 @@ HxOverrides.remove = function(a,obj) {
 	a.splice(i,1);
 	return true;
 };
-HxOverrides.iter = function(a) {
-	return { cur : 0, arr : a, hasNext : function() {
-		return this.cur < this.arr.length;
-	}, next : function() {
-		return this.arr[this.cur++];
-	}};
+HxOverrides.now = function() {
+	return Date.now();
 };
 var Lambda = function() { };
 Lambda.__name__ = true;
@@ -139,24 +135,9 @@ Lambda.find = function(it,f) {
 	return null;
 };
 var haxe_ds_StringMap = function() {
-	this.h = { };
+	this.h = Object.create(null);
 };
 haxe_ds_StringMap.__name__ = true;
-haxe_ds_StringMap.prototype = {
-	setReserved: function(key,value) {
-		if(this.rh == null) {
-			this.rh = { };
-		}
-		this.rh["$" + key] = value;
-	}
-	,getReserved: function(key) {
-		if(this.rh == null) {
-			return null;
-		} else {
-			return this.rh["$" + key];
-		}
-	}
-};
 var Lang = function() { };
 Lang.__name__ = true;
 Lang.request = function(path,callback) {
@@ -176,57 +157,39 @@ Lang.init = function(folderPath,callback) {
 		}
 	}
 	Lang.ids = _g;
-	var _this1 = Lang.langs;
-	_this1.h = { };
-	_this1.rh = null;
+	Lang.langs.h = Object.create(null);
 	var count = 0;
-	var _g2 = 0;
-	var _g11 = Lang.ids;
-	while(_g2 < _g11.length) {
-		var name = [_g11[_g2]];
-		++_g2;
-		Lang.request("" + folderPath + "/" + name[0] + ".json",(function(name1) {
+	var _g = 0;
+	var _g1 = Lang.ids;
+	while(_g < _g1.length) {
+		var name = [_g1[_g]];
+		++_g;
+		Lang.request("" + folderPath + "/" + name[0] + ".json",(function(name) {
 			return function(data) {
 				var data1 = JSON.parse(data);
 				var lang = new haxe_ds_StringMap();
-				var _g3 = 0;
-				var _g12 = Reflect.fields(data1);
-				while(_g3 < _g12.length) {
-					var key = _g12[_g3];
-					++_g3;
-					var v1 = Reflect.field(data1,key);
-					if(__map_reserved[key] != null) {
-						lang.setReserved(key,v1);
-					} else {
-						lang.h[key] = v1;
-					}
-				}
-				var id = haxe_io_Path.withoutExtension(name1[0]);
-				var _this2 = Lang.langs;
-				if(__map_reserved[id] != null) {
-					_this2.setReserved(id,lang);
-				} else {
-					_this2.h[id] = lang;
+				var _g = 0;
+				var _g1 = Reflect.fields(data1);
+				while(_g < _g1.length) {
+					var key = _g1[_g];
+					++_g;
+					lang.h[key] = Reflect.field(data1,key);
 				}
+				var id = haxe_io_Path.withoutExtension(name[0]);
+				Lang.langs.h[id] = lang;
 				count += 1;
 				if(count == Lang.ids.length && callback != null) {
 					callback();
 				}
-				return;
 			};
 		})(name));
 	}
 };
 Lang.get = function(key) {
-	var key1 = Lang.lang;
-	var _this = Lang.langs;
-	if((__map_reserved[key1] != null ? _this.getReserved(key1) : _this.h[key1]) == null) {
+	if(Lang.langs.h[Lang.lang] == null) {
 		Lang.lang = "en";
 	}
-	var key2 = Lang.lang;
-	var _this1 = Lang.langs;
-	var _this2 = __map_reserved[key2] != null ? _this1.getReserved(key2) : _this1.h[key2];
-	var text = __map_reserved[key] != null ? _this2.getReserved(key) : _this2.h[key];
+	var text = Lang.langs.h[Lang.lang].h[key];
 	if(text == null) {
 		return key;
 	} else {
@@ -239,7 +202,7 @@ Reflect.__name__ = true;
 Reflect.field = function(o,field) {
 	try {
 		return o[field];
-	} catch( e ) {
+	} catch( _g ) {
 		return null;
 	}
 };
@@ -288,7 +251,8 @@ Std.parseInt = function(x) {
 			var i = _g++;
 			var c = x.charCodeAt(i);
 			if(c <= 8 || c >= 14 && c != 32 && c != 45) {
-				var v = parseInt(x, (x[(i + 1)]=="x" || x[(i + 1)]=="X") ? 16 : 10);
+				var nc = x.charCodeAt(i + 1);
+				var v = parseInt(x,nc == 120 || nc == 88 ? 16 : 10);
 				if(isNaN(v)) {
 					return null;
 				} else {
@@ -306,11 +270,11 @@ StringTools.htmlEscape = function(s,quotes) {
 	var _g_offset = 0;
 	var _g_s = s;
 	while(_g_offset < _g_s.length) {
-		var s1 = _g_s;
+		var s = _g_s;
 		var index = _g_offset++;
-		var c = s1.charCodeAt(index);
+		var c = s.charCodeAt(index);
 		if(c >= 55296 && c <= 56319) {
-			c = c - 55232 << 10 | s1.charCodeAt(index + 1) & 1023;
+			c = c - 55232 << 10 | s.charCodeAt(index + 1) & 1023;
 		}
 		var c1 = c;
 		if(c1 >= 65536) {
@@ -380,12 +344,11 @@ StringTools.hex = function(n,digits) {
 	}
 	return s;
 };
-var _$VideoList_VideoList_$Impl_$ = {};
-_$VideoList_VideoList_$Impl_$.__name__ = true;
-_$VideoList_VideoList_$Impl_$._new = function() {
+var VideoList = {};
+VideoList._new = function() {
 	return [];
 };
-_$VideoList_VideoList_$Impl_$.findIndex = function(this1,f) {
+VideoList.findIndex = function(this1,f) {
 	var i = 0;
 	var _g = 0;
 	while(_g < this1.length) {
@@ -396,14 +359,14 @@ _$VideoList_VideoList_$Impl_$.findIndex = function(this1,f) {
 	}
 	return -1;
 };
-_$VideoList_VideoList_$Impl_$.addItem = function(this1,item,atEnd,itemPos) {
+VideoList.addItem = function(this1,item,atEnd,itemPos) {
 	if(atEnd) {
 		this1.push(item);
 	} else {
 		this1.splice(itemPos + 1,0,item);
 	}
 };
-_$VideoList_VideoList_$Impl_$.setNextItem = function(this1,pos,itemPos) {
+VideoList.setNextItem = function(this1,pos,itemPos) {
 	var next = this1[pos];
 	HxOverrides.remove(this1,next);
 	if(pos < itemPos) {
@@ -412,10 +375,10 @@ _$VideoList_VideoList_$Impl_$.setNextItem = function(this1,pos,itemPos) {
 	this1.splice(itemPos + 1,0,next);
 	return itemPos;
 };
-_$VideoList_VideoList_$Impl_$.toggleItemType = function(this1,pos) {
+VideoList.toggleItemType = function(this1,pos) {
 	this1[pos].isTemp = !this1[pos].isTemp;
 };
-_$VideoList_VideoList_$Impl_$.removeItem = function(this1,index,itemPos) {
+VideoList.removeItem = function(this1,index,itemPos) {
 	if(index < itemPos) {
 		--itemPos;
 	}
@@ -425,7 +388,7 @@ _$VideoList_VideoList_$Impl_$.removeItem = function(this1,index,itemPos) {
 	}
 	return itemPos;
 };
-_$VideoList_VideoList_$Impl_$.skipItem = function(this1,itemPos) {
+VideoList.skipItem = function(this1,itemPos) {
 	var item = this1[itemPos];
 	if(!item.isTemp) {
 		++itemPos;
@@ -441,29 +404,33 @@ var client_Buttons = function() { };
 client_Buttons.__name__ = true;
 client_Buttons.init = function(main) {
 	client_Buttons.settings = main.settings;
-	window.onresize = client_Buttons.onVideoResize;
+	if(client_Buttons.settings.isSwapped) {
+		window.document.body.classList.add("swap");
+	}
 	client_Buttons.initSplit();
+	client_Buttons.setSplitSize(client_Buttons.settings.playerSize,client_Buttons.settings.chatSize);
 	client_Buttons.initChatInput(main);
-	client_Buttons.initNavBar(main);
 	var passIcon = window.document.querySelector("#guestpass_icon");
 	passIcon.onclick = function(e) {
-		var isOpen = passIcon.classList.toggle("glyphicon-eye-open");
-		passIcon.classList.toggle("glyphicon-eye-close");
+		var icon = passIcon.firstElementChild;
+		var isOpen = icon.getAttribute("name") == "eye-off";
 		var pass = window.document.querySelector("#guestpass");
 		if(isOpen) {
-			return pass.type = "password";
+			pass.type = "password";
+			icon.setAttribute("name","eye");
 		} else {
-			return pass.type = "text";
+			pass.type = "text";
+			icon.setAttribute("name","eye-off");
 		}
 	};
 	var smilesBtn = window.document.querySelector("#smilesbtn");
-	smilesBtn.onclick = function(e1) {
+	smilesBtn.onclick = function(e) {
 		var smilesWrap = window.document.querySelector("#smileswrap");
 		if(smilesWrap.children.length == 0) {
 			return;
 		}
 		if(smilesBtn.classList.toggle("active")) {
-			smilesWrap.style.display = "block";
+			smilesWrap.style.display = "grid";
 		} else {
 			smilesWrap.style.display = "none";
 		}
@@ -478,20 +445,18 @@ client_Buttons.init = function(main) {
 			child.src = child.dataset.src;
 			child.removeAttribute("data-src");
 		}
-		return;
 	};
-	window.document.querySelector("#clearchatbtn").onclick = function(e2) {
+	window.document.querySelector("#clearchatbtn").onclick = function(e) {
 		if((main.personal.group & 4) != 0) {
 			main.send({ type : "ClearChat"});
 		}
-		return;
 	};
 	var userList = window.document.querySelector("#userlist");
-	userList.onclick = function(e3) {
-		if((main.personal.group & 4) == 0) {
+	userList.onclick = function(e) {
+		if(!((main.personal.group & 4) != 0)) {
 			return;
 		}
-		var el = e3.target;
+		var el = e.target;
 		if(userList == el) {
 			return;
 		}
@@ -503,46 +468,29 @@ client_Buttons.init = function(main) {
 			name = el.lastElementChild.innerText;
 		}
 		main.send({ type : "SetLeader", setLeader : { clientName : name}});
-		return;
 	};
 	var userlistToggle = window.document.querySelector("#userlisttoggle");
-	userlistToggle.onclick = function(e4) {
-		var isHidden = userlistToggle.classList.toggle("glyphicon-chevron-right");
-		userlistToggle.classList.toggle("glyphicon-chevron-down");
+	userlistToggle.onclick = function(e) {
+		var icon = userlistToggle.firstElementChild;
+		var isHidden = userlistToggle.classList.toggle("chevron-right");
+		userlistToggle.classList.toggle("chevron-down");
 		var style = window.document.querySelector("#userlist").style;
 		if(isHidden) {
 			style.display = "none";
+			icon.setAttribute("name","chevron-forward");
 		} else {
 			style.display = "block";
+			icon.setAttribute("name","chevron-down");
 		}
 		client_Buttons.settings.isUserListHidden = isHidden;
 		client_Settings.write(client_Buttons.settings);
-		return;
 	};
 	window.document.querySelector("#usercount").onclick = userlistToggle.onclick;
 	if(client_Buttons.settings.isUserListHidden) {
 		userlistToggle.onclick();
 	}
-	var extendPlayer = window.document.querySelector("#extendplayer");
-	extendPlayer.onclick = function(e5) {
-		var isExtended = extendPlayer.classList.toggle("active");
-		var sizes = isExtended ? [20,80] : [40,60];
-		window.document.querySelector("#userlist").style.width = isExtended ? "80px" : "90px";
-		if(client_Buttons.settings.isSwapped) {
-			sizes.reverse();
-		}
-		client_Buttons.split.setSizes(sizes);
-		client_Buttons.settings.isExtendedPlayer = isExtended;
-		client_Buttons.writeSplitSize();
-		window.dispatchEvent(new Event("resize"));
-		main.scrollChatToEnd();
-		return;
-	};
-	if(client_Buttons.settings.isExtendedPlayer) {
-		extendPlayer.onclick();
-	}
 	var toggleSynch = window.document.querySelector("#togglesynch");
-	toggleSynch.onclick = function(e6) {
+	toggleSynch.onclick = function(e) {
 		var icon = toggleSynch.firstElementChild;
 		if(main.isSyncActive) {
 			if(!window.confirm(Lang.get("toggleSynchConfirm"))) {
@@ -550,71 +498,81 @@ client_Buttons.init = function(main) {
 			}
 			main.isSyncActive = false;
 			icon.style.color = "rgba(238, 72, 67, 0.75)";
-			icon.classList.add("glyphicon-pause");
-			icon.classList.remove("glyphicon-play");
+			icon.setAttribute("name","pause");
 		} else {
 			main.isSyncActive = true;
 			icon.style.color = "";
-			icon.classList.add("glyphicon-play");
-			icon.classList.remove("glyphicon-pause");
+			icon.setAttribute("name","play");
 			main.send({ type : "UpdatePlaylist"});
 		}
-		return;
 	};
-	window.document.querySelector("#mediarefresh").onclick = function(e7) {
+	window.document.querySelector("#mediarefresh").onclick = function(e) {
 		main.refreshPlayer();
-		return;
 	};
-	window.document.querySelector("#fullscreenbtn").onclick = function(e8) {
+	window.document.querySelector("#fullscreenbtn").onclick = function(e) {
 		return client_Utils.toggleFullScreen(window.document.querySelector("#ytapiplayer"));
 	};
 	var getPlaylist = window.document.querySelector("#getplaylist");
-	getPlaylist.onclick = function(e9) {
+	getPlaylist.onclick = function(e) {
 		client_Utils.copyToClipboard(main.getPlaylistLinks().join(","));
-		var icon1 = getPlaylist.firstElementChild;
-		icon1.classList.remove("glyphicon-link");
-		icon1.classList.add("glyphicon-ok");
+		var icon = getPlaylist.firstElementChild;
+		icon.setAttribute("name","checkmark");
 		return haxe_Timer.delay(function() {
-			icon1.classList.add("glyphicon-link");
-			icon1.classList.remove("glyphicon-ok");
-			return;
+			icon.setAttribute("name","link");
 		},2000);
 	};
-	window.document.querySelector("#clearplaylist").onclick = function(e10) {
+	window.document.querySelector("#clearplaylist").onclick = function(e) {
 		if(!window.confirm(Lang.get("clearPlaylistConfirm"))) {
 			return;
 		}
 		main.send({ type : "ClearPlaylist"});
-		return;
 	};
-	window.document.querySelector("#shuffleplaylist").onclick = function(e11) {
+	window.document.querySelector("#shuffleplaylist").onclick = function(e) {
 		if(!window.confirm(Lang.get("shufflePlaylistConfirm"))) {
 			return;
 		}
 		main.send({ type : "ShufflePlaylist"});
-		return;
 	};
-	window.document.querySelector("#lockplaylist").onclick = function(e12) {
+	window.document.querySelector("#lockplaylist").onclick = function(e) {
 		if((main.personal.group & 4) != 0) {
 			main.send({ type : "TogglePlaylistLock"});
 		}
-		return;
 	};
 	var showMediaUrl = window.document.querySelector("#showmediaurl");
-	showMediaUrl.onclick = function(e13) {
+	showMediaUrl.onclick = function(e) {
 		client_Buttons.showPlayerGroup(showMediaUrl);
-		return;
 	};
 	var showCustomEmbed = window.document.querySelector("#showcustomembed");
-	showCustomEmbed.onclick = function(e14) {
+	showCustomEmbed.onclick = function(e) {
 		client_Buttons.showPlayerGroup(showCustomEmbed);
-		return;
 	};
-	window.document.querySelector("#insert_template").onclick = function(e15) {
+	window.document.querySelector("#insert_template").onclick = function(e) {
 		var input = window.document.querySelector("#mediaurl");
 		input.value = main.getTemplateUrl();
 		input.focus();
-		return;
+	};
+	var showOptions = window.document.querySelector("#showoptions");
+	showOptions.onclick = function(e) {
+		var isActive = client_Buttons.toggleGroup(showOptions);
+		window.document.querySelector("#messagebuffer").style.display = isActive ? "none" : "block";
+		window.document.querySelector("#chatbox").style.display = isActive ? "none" : "flex";
+		window.document.querySelector("#userlisttoggle").style.display = isActive ? "none" : "inline-flex";
+		return window.document.querySelector("#optionsTitle").style.display = isActive ? "inline-flex" : "none";
+	};
+	window.document.querySelector("#exitBtn").onclick = function(e) {
+		if((main.personal.group & 1) != 0) {
+			main.send({ type : "Logout"});
+		} else {
+			window.document.querySelector("#guestname").focus();
+		}
+		return client_Buttons.toggleGroup(showOptions);
+	};
+	window.document.querySelector("#swapLayoutBtn").onclick = function(e) {
+		client_Buttons.settings.isSwapped = window.document.querySelector("body").classList.toggle("swap");
+		var sizes = window.document.body.style.gridTemplateColumns.split(" ");
+		sizes.reverse();
+		window.document.body.style.gridTemplateColumns = sizes.join(" ");
+		client_Settings.write(client_Buttons.settings);
 	};
 };
 client_Buttons.showPlayerGroup = function(el) {
@@ -626,163 +584,65 @@ client_Buttons.showPlayerGroup = function(el) {
 		if(el == group) {
 			continue;
 		}
-		group.classList.add("collapsed");
-		group.classList.remove("active");
-		window.document.querySelector(group.dataset.target).classList.add("collapse");
+		if(group.classList.contains("collapsed")) {
+			continue;
+		}
+		client_Buttons.toggleGroup(group);
 	}
+	client_Buttons.toggleGroup(el);
+};
+client_Buttons.toggleGroup = function(el) {
 	el.classList.toggle("collapsed");
-	el.classList.toggle("active");
-	window.document.querySelector(el.dataset.target).classList.toggle("collapse");
+	var id = el.dataset.target;
+	window.document.querySelector(id).classList.toggle("collapse");
+	return el.classList.toggle("active");
 };
 client_Buttons.initSplit = function() {
 	if(client_Buttons.split != null) {
 		client_Buttons.split.destroy();
 	}
-	var divs = ["#chatwrap","#videowrap"];
-	var sizes = [client_Buttons.settings.chatSize,client_Buttons.settings.playerSize];
-	if(client_Buttons.settings.isSwapped) {
-		divs.reverse();
-		sizes.reverse();
-	}
-	client_Buttons.split = new Split(divs,{ sizes : sizes, onDragEnd : function() {
-		window.dispatchEvent(new Event("resize"));
-		client_Buttons.writeSplitSize();
-		return;
-	}, minSize : 185, snapOffset : 0});
-	window.dispatchEvent(new Event("resize"));
+	client_Buttons.split = new Split({ columnGutters : [{ element : window.document.querySelector(".gutter"), track : 1}], minSize : 200, snapOffset : 0, onDragEnd : client_Buttons.saveSplitSize});
+};
+client_Buttons.setSplitSize = function(playerSize,chatSize) {
+	var sizes = window.document.body.style.gridTemplateColumns.split(" ");
+	sizes[client_Buttons.settings.isSwapped ? sizes.length - 1 : 0] = "" + playerSize + "fr";
+	sizes[client_Buttons.settings.isSwapped ? 0 : sizes.length - 1] = "" + chatSize + "fr";
+	window.document.body.style.gridTemplateColumns = sizes.join(" ");
 };
-client_Buttons.writeSplitSize = function() {
-	var sizes = client_Buttons.split.getSizes();
+client_Buttons.saveSplitSize = function() {
+	var sizes = window.document.body.style.gridTemplateColumns.split(" ");
 	if(client_Buttons.settings.isSwapped) {
 		sizes.reverse();
 	}
-	client_Buttons.settings.chatSize = sizes[0];
-	client_Buttons.settings.playerSize = sizes[1];
+	client_Buttons.settings.playerSize = parseFloat(sizes[0]);
+	var tmp = parseFloat(sizes[sizes.length - 1]);
+	client_Buttons.settings.chatSize = tmp;
 	client_Settings.write(client_Buttons.settings);
 };
-client_Buttons.onVideoResize = function() {
-	var height = window.document.querySelector("#ytapiplayer").offsetHeight - window.document.querySelector("#chatline").offsetHeight;
-	window.document.querySelector("#messagebuffer").style.height = "" + height + "px";
-	window.document.querySelector("#userlist").style.height = "" + height + "px";
-};
-client_Buttons.onClick = function(el,func) {
-	if(!client_Utils.isTouch()) {
-		el.onclick = func;
-	} else {
-		el.ontouchend = func;
-	}
-};
-client_Buttons.initNavBar = function(main) {
-	var onclick = function(e) {
-		return window.document.querySelector("#nav-collapsible").classList.toggle("in");
-	};
-	client_Buttons.onClick(window.document.querySelector("#toggleMenu"),onclick);
-	var classes = window.document.querySelectorAll(".dropdown-toggle");
-	var _g = 0;
-	while(_g < classes.length) {
-		var klass = [classes[_g]];
-		++_g;
-		klass[0].onclick = (function(klass1) {
-			return function(e1) {
-				var isActive = klass1[0].classList.toggle("focus");
-				client_Buttons.hideMenus();
-				var menu = klass1[0].parentElement.querySelector(".dropdown-menu");
-				if(isActive) {
-					return menu.style.display = "block";
-				} else {
-					return menu.style.display = "none";
-				}
-			};
-		})(klass);
-		klass[0].onmouseover = klass[0].onclick;
-	}
-	var classes1 = window.document.querySelectorAll(".dropdown");
-	var _g1 = 0;
-	while(_g1 < classes1.length) {
-		var klass2 = [classes1[_g1]];
-		++_g1;
-		klass2[0].onmouseleave = (function(klass3) {
-			return function(e2) {
-				var toggle = klass3[0].querySelector(".dropdown-toggle");
-				toggle.classList.remove("focus");
-				toggle.blur();
-				return klass3[0].querySelector(".dropdown-menu").style.display = "";
-			};
-		})(klass2);
-	}
-	var exitBtn = window.document.querySelector("#exitBtn");
-	exitBtn.onclick = function(e3) {
-		if((main.personal.group & 1) != 0) {
-			main.send({ type : "Logout"});
-		} else {
-			window.document.querySelector("#guestname").focus();
-		}
-		exitBtn.blur();
-		client_Buttons.hideMenus();
-		return;
-	};
-	var swapLayoutBtn = window.document.querySelector("#swapLayoutBtn");
-	swapLayoutBtn.onclick = function(e4) {
-		var p = window.document.querySelector("#main");
-		if(window.document.querySelector("#main").firstElementChild == window.document.querySelector("#chatwrap")) {
-			p.appendChild(p.removeChild(p.children[1]));
-			p.appendChild(p.removeChild(p.children[0]));
-			p.appendChild(p.removeChild(p.children[1]));
-		} else {
-			p.insertBefore(p.children[2],p.children[0]);
-			p.insertBefore(p.children[2],p.children[1]);
-		}
-		var p1 = window.document.querySelector("#controlsrow");
-		p1.insertBefore(p1.children[1],p1.children[0]);
-		var p2 = window.document.querySelector("#playlistrow");
-		p2.insertBefore(p2.children[1],p2.children[0]);
-		var tmp = window.document.querySelector("#main").firstElementChild;
-		var tmp1 = window.document.querySelector("#videowrap");
-		client_Buttons.settings.isSwapped = tmp == tmp1;
-		client_Settings.write(client_Buttons.settings);
-		client_Buttons.initSplit();
-		swapLayoutBtn.blur();
-		client_Buttons.hideMenus();
-		main.scrollChatToEnd();
-		return;
-	};
-	if(client_Buttons.settings.isSwapped) {
-		swapLayoutBtn.onclick();
-	}
-	var removeBtn = window.document.querySelector("#removeVideoBtn");
-	removeBtn.onclick = function(e5) {
-		if(main.toggleVideoElement() || main.isListEmpty()) {
-			removeBtn.innerText = Lang.get("removeVideo");
-		} else {
-			removeBtn.innerText = Lang.get("addVideo");
-		}
-		removeBtn.blur();
-		client_Buttons.hideMenus();
-		return;
-	};
-};
 client_Buttons.initTextButtons = function(main) {
-	var synchThresholdBtn = window.document.querySelector("#synchThresholdBtn");
-	synchThresholdBtn.onclick = function(e) {
+	window.document.querySelector("#synchThresholdBtn").onclick = function(e) {
 		var secs = client_Buttons.settings.synchThreshold + 1;
 		if(secs > 5) {
 			secs = 1;
 		}
 		main.setSynchThreshold(secs);
 		client_Buttons.updateSynchThresholdBtn();
-		synchThresholdBtn.blur();
-		return;
 	};
 	client_Buttons.updateSynchThresholdBtn();
-	var hotkeysBtn = window.document.querySelector("#hotkeysBtn");
-	hotkeysBtn.onclick = function(e1) {
+	window.document.querySelector("#hotkeysBtn").onclick = function(e) {
 		client_Buttons.settings.hotkeysEnabled = !client_Buttons.settings.hotkeysEnabled;
 		client_Settings.write(client_Buttons.settings);
 		client_Buttons.updateHotkeysBtn();
-		hotkeysBtn.blur();
-		return;
 	};
 	client_Buttons.updateHotkeysBtn();
+	var removeBtn = window.document.querySelector("#removeVideoBtn");
+	removeBtn.onclick = function(e) {
+		if(main.toggleVideoElement() || main.isListEmpty()) {
+			return removeBtn.innerText = Lang.get("removeVideo");
+		} else {
+			return removeBtn.innerText = Lang.get("addVideo");
+		}
+	};
 };
 client_Buttons.initHotkeys = function(main,player) {
 	window.document.querySelector("#mediarefresh").title += " (Alt-R)";
@@ -820,10 +680,9 @@ client_Buttons.initHotkeys = function(main,player) {
 			window.document.querySelector("#leader_btn").onclick();
 			break;
 		case 80:
-			if((main.personal.group & 2) == 0) {
+			if(!((main.personal.group & 2) != 0)) {
 				haxe_Timer.delay(function() {
 					player.pause();
-					return;
 				},500);
 			}
 			window.document.querySelector("#leader_btn").onclick();
@@ -840,11 +699,6 @@ client_Buttons.initHotkeys = function(main,player) {
 		e.preventDefault();
 	};
 };
-client_Buttons.hideMenus = function() {
-	var menus = window.document.querySelectorAll(".dropdown-menu");
-	var _g = 0;
-	while(_g < menus.length) menus[_g++].style.display = "";
-};
 client_Buttons.updateSynchThresholdBtn = function() {
 	var tmp = "" + Lang.get("synchThreshold") + ": " + client_Buttons.settings.synchThreshold;
 	window.document.querySelector("#synchThresholdBtn").innerText = tmp + "s";
@@ -860,15 +714,13 @@ client_Buttons.initChatInput = function(main) {
 		if(e.keyCode == 13) {
 			main.guestLogin(guestName.value);
 		}
-		return;
 	};
 	var guestPass = window.document.querySelector("#guestpass");
-	guestPass.onkeydown = function(e1) {
-		if(e1.keyCode == 13) {
+	guestPass.onkeydown = function(e) {
+		if(e.keyCode == 13) {
 			main.userLogin(guestName.value,guestPass.value);
 			guestPass.value = "";
 		}
-		return;
 	};
 	new client_InputWithHistory(window.document.querySelector("#chatline"),null,50,function(value) {
 		main.send({ type : "Message", message : { clientName : "", text : value}});
@@ -945,7 +797,6 @@ client_JsApi.addPlugin = $hx_exports["client"]["JsApi"]["addPlugin"] = function(
 				onLoaded();
 			}
 		}
-		return;
 	});
 };
 client_JsApi.initPluginsSpace = function() {
@@ -1005,19 +856,19 @@ var client_Main = function(host,port) {
 	var _gthis = this;
 	this.player = new client_Player(this);
 	if(host == null) {
-		host = window.location.hostname;
+		host = $global.location.hostname;
 	}
 	if(host == "") {
 		host = "localhost";
 	}
 	this.host = host;
 	if(port == null) {
-		port = window.location.port;
+		port = $global.location.port;
 	}
 	if(port == "") {
 		port = "80";
 	}
-	client_Settings.init({ version : 2, name : "", hash : "", isExtendedPlayer : false, chatSize : 40, playerSize : 60, synchThreshold : 2, isSwapped : false, isUserListHidden : false, latestLinks : [], hotkeysEnabled : true},$bind(this,this.settingsPatcher));
+	client_Settings.init({ version : 2, name : "", hash : "", isExtendedPlayer : false, playerSize : 70, chatSize : 30, synchThreshold : 2, isSwapped : false, isUserListHidden : true, latestLinks : [], hotkeysEnabled : true},$bind(this,this.settingsPatcher));
 	this.settings = client_Settings.read();
 	this.initListeners();
 	this.onTimeGet = new haxe_Timer(this.settings.synchThreshold * 1000);
@@ -1028,13 +879,11 @@ var client_Main = function(host,port) {
 			_gthis.onBlinkTab.stop();
 			_gthis.onBlinkTab = null;
 		}
-		return;
 	};
 	Lang.init("langs",function() {
 		client_Buttons.initTextButtons(_gthis);
 		client_Buttons.initHotkeys(_gthis,_gthis.player);
 		_gthis.openWebSocket(host,port);
-		return;
 	});
 };
 client_Main.__name__ = true;
@@ -1048,9 +897,9 @@ client_Main.prototype = {
 			data.hotkeysEnabled = true;
 			break;
 		case 2:
-			throw new js__$Boot_HaxeError("skipped version " + version);
+			throw haxe_Exception.thrown("skipped version " + version);
 		default:
-			throw new js__$Boot_HaxeError("skipped version " + version);
+			throw haxe_Exception.thrown("skipped version " + version);
 		}
 		return data;
 	}
@@ -1066,7 +915,7 @@ client_Main.prototype = {
 	,openWebSocket: function(host,port) {
 		var _gthis = this;
 		var protocol = "ws:";
-		if(window.location.protocol == "https:") {
+		if($global.location.protocol == "https:") {
 			protocol = "wss:";
 		}
 		this.ws = new WebSocket("" + protocol + "//" + host + ":" + port);
@@ -1083,55 +932,48 @@ client_Main.prototype = {
 			_gthis.player.pause();
 			return haxe_Timer.delay(function() {
 				_gthis.openWebSocket(host,port);
-				return;
 			},2000);
 		};
 	}
 	,initListeners: function() {
 		var _gthis = this;
 		client_Buttons.init(this);
-		client_MobileView.init();
 		window.document.querySelector("#leader_btn").onclick = function(e) {
-			_gthis.setLeaderButton((_gthis.personal.group & 2) == 0);
+			_gthis.setLeaderButton(!((_gthis.personal.group & 2) != 0));
 			_gthis.send({ type : "SetLeader", setLeader : { clientName : (_gthis.personal.group & 2) != 0 ? "" : _gthis.personal.name}});
-			return;
 		};
-		window.document.querySelector("#voteskip").onclick = function(e1) {
+		window.document.querySelector("#voteskip").onclick = function(e) {
 			if(client_Utils.isTouch() && !window.confirm(Lang.get("skipItemConfirm"))) {
 				return;
 			}
 			if(_gthis.player.isListEmpty()) {
 				return;
 			}
-			_gthis.send({ type : "SkipVideo", skipVideo : { url : _gthis.player.getItems()[_gthis.player.getItemPos()].url}});
-			return;
+			var items = _gthis.player.getItems();
+			var pos = _gthis.player.getItemPos();
+			_gthis.send({ type : "SkipVideo", skipVideo : { url : items[pos].url}});
 		};
-		window.document.querySelector("#queue_next").onclick = function(e2) {
+		window.document.querySelector("#queue_next").onclick = function(e) {
 			_gthis.addVideoUrl(false);
-			return;
 		};
-		window.document.querySelector("#queue_end").onclick = function(e3) {
+		window.document.querySelector("#queue_end").onclick = function(e) {
 			_gthis.addVideoUrl(true);
-			return;
 		};
 		new client_InputWithHistory(window.document.querySelector("#mediaurl"),this.settings.latestLinks,10,function(value) {
 			_gthis.addVideoUrl(true);
 			return false;
 		});
-		window.document.querySelector("#ce_queue_next").onclick = function(e4) {
+		window.document.querySelector("#ce_queue_next").onclick = function(e) {
 			_gthis.addIframe(false);
-			return;
 		};
-		window.document.querySelector("#ce_queue_end").onclick = function(e5) {
+		window.document.querySelector("#ce_queue_end").onclick = function(e) {
 			_gthis.addIframe(true);
-			return;
 		};
-		window.document.querySelector("#customembed-title").onkeydown = function(e6) {
-			if(e6.keyCode == 13) {
+		window.document.querySelector("#customembed-title").onkeydown = function(e) {
+			if(e.keyCode == 13) {
 				_gthis.addIframe(true);
-				e6.preventDefault();
+				e.preventDefault();
 			}
-			return;
 		};
 		window.document.querySelector("#customembed-content").onkeydown = window.document.querySelector("#customembed-title").onkeydown;
 	}
@@ -1190,22 +1032,20 @@ client_Main.prototype = {
 		}
 		this.addVideo(links.shift(),atEnd,isTemp,function() {
 			_gthis.addVideoArray(links,atEnd,isTemp);
-			return;
 		});
 	}
 	,addVideo: function(url,atEnd,isTemp,callback) {
 		var _gthis = this;
-		var protocol = window.location.protocol;
+		var protocol = $global.location.protocol;
 		if(StringTools.startsWith(url,"/")) {
-			url = "" + protocol + "//" + window.location.hostname + ":" + window.location.port + url;
+			url = "" + protocol + "//" + $global.location.hostname + ":" + $global.location.port + url;
 		}
 		if(!StringTools.startsWith(url,"http")) {
 			url = "" + protocol + "//" + url;
 		}
 		this.player.getVideoData(url,function(data) {
 			if(data.duration == 0) {
-				var tmp = Lang.get("addVideoError");
-				_gthis.serverMessage(4,tmp);
+				_gthis.serverMessage(4,Lang.get("addVideoError"));
 				return;
 			}
 			if(data.title == null) {
@@ -1216,7 +1056,6 @@ client_Main.prototype = {
 			}
 			_gthis.send({ type : "AddVideo", addVideo : { item : { url : data.url, title : data.title, author : _gthis.personal.name, duration : data.duration, isTemp : isTemp, isIframe : data.isIframe == true}, atEnd : atEnd}});
 			callback();
-			return;
 		});
 	}
 	,addIframe: function(atEnd) {
@@ -1233,8 +1072,7 @@ client_Main.prototype = {
 		var isTemp = window.document.querySelector("#customembed").querySelector(".add-temp").checked;
 		this.player.getIframeData(iframe,function(data) {
 			if(data.duration == 0) {
-				var tmp = Lang.get("addVideoError");
-				_gthis.serverMessage(4,tmp);
+				_gthis.serverMessage(4,Lang.get("addVideoError"));
 				return;
 			}
 			if(title.length > 0) {
@@ -1247,7 +1085,6 @@ client_Main.prototype = {
 				data.url = iframe;
 			}
 			_gthis.send({ type : "AddVideo", addVideo : { item : { url : data.url, title : data.title, author : _gthis.personal.name, duration : data.duration, isTemp : isTemp, isIframe : true}, atEnd : atEnd}});
-			return;
 		});
 	}
 	,toggleVideoElement: function() {
@@ -1281,7 +1118,7 @@ client_Main.prototype = {
 		var data = JSON.parse(e.data);
 		var t = data.type;
 		var t1 = t.charAt(0).toLowerCase() + HxOverrides.substr(t,1,null);
-		haxe_Log.trace("Event: " + data.type,{ fileName : "src/client/Main.hx", lineNumber : 325, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]});
+		haxe_Log.trace("Event: " + data.type,{ fileName : "src/client/Main.hx", lineNumber : 324, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]});
 		switch(data.type) {
 		case "AddVideo":
 			this.player.addVideoItem(data.addVideo.item,data.addVideo.atEnd);
@@ -1410,13 +1247,13 @@ client_Main.prototype = {
 			this.player.setPlaybackRate(data.setRate.rate);
 			break;
 		case "SetTime":
-			var synchThreshold1 = this.settings.synchThreshold;
-			var newTime1 = data.setTime.time;
-			var time1 = this.player.getTime();
-			if(Math.abs(time1 - newTime1) < synchThreshold1) {
+			var synchThreshold = this.settings.synchThreshold;
+			var newTime = data.setTime.time;
+			var time = this.player.getTime();
+			if(Math.abs(time - newTime) < synchThreshold) {
 				return;
 			}
-			this.player.setTime(newTime1);
+			this.player.setTime(newTime);
 			break;
 		case "ShufflePlaylist":
 			break;
@@ -1522,11 +1359,11 @@ client_Main.prototype = {
 			++_g;
 			this.filters.push({ regex : new EReg(filter.regex,filter.flags), replace : filter.replace});
 		}
-		var _g2 = 0;
-		var _g3 = config.emotes;
-		while(_g2 < _g3.length) {
-			var emote = _g3[_g2];
-			++_g2;
+		var _g = 0;
+		var _g1 = config.emotes;
+		while(_g < _g1.length) {
+			var emote = _g1[_g];
+			++_g;
 			var tag = StringTools.endsWith(emote.image,"mp4") ? "video autoplay=\"\" loop=\"\" muted=\"\"" : "img";
 			this.filters.push({ regex : new EReg("(^| )" + this.escapeRegExp(emote.name) + "(?!\\S)","g"), replace : "$1<" + tag + " class=\"channel-emote\" src=\"" + emote.image + "\" title=\"" + emote.name + "\"/>"});
 		}
@@ -1538,20 +1375,19 @@ client_Main.prototype = {
 			var form = window.document.querySelector("#chatline");
 			form.value += " " + el.title;
 			form.focus();
-			return;
 		};
 		smilesWrap.textContent = "";
-		var _g4 = 0;
-		var _g5 = config.emotes;
-		while(_g4 < _g5.length) {
-			var emote1 = _g5[_g4];
-			++_g4;
-			var tag1 = StringTools.endsWith(emote1.image,"mp4") ? "video" : "img";
-			var el1 = window.document.createElement(tag1);
-			el1.className = "smile-preview";
-			el1.dataset.src = emote1.image;
-			el1.title = emote1.name;
-			smilesWrap.appendChild(el1);
+		var _g = 0;
+		var _g1 = config.emotes;
+		while(_g < _g1.length) {
+			var emote = _g1[_g];
+			++_g;
+			var tag = StringTools.endsWith(emote.image,"mp4") ? "video" : "img";
+			var el = window.document.createElement(tag);
+			el.className = "smile-preview";
+			el.dataset.src = emote.image;
+			el.title = emote.name;
+			smilesWrap.appendChild(el);
 		}
 	}
 	,onLogin: function(data,clientName) {
@@ -1564,16 +1400,16 @@ client_Main.prototype = {
 		this.hideGuestLoginPanel();
 	}
 	,showGuestLoginPanel: function() {
-		window.document.querySelector("#guestlogin").style.display = "block";
+		window.document.querySelector("#guestlogin").style.display = "flex";
 		window.document.querySelector("#guestpassword").style.display = "none";
-		window.document.querySelector("#chatline").style.display = "none";
+		window.document.querySelector("#chatbox").style.display = "none";
 		window.document.querySelector("#exitBtn").textContent = Lang.get("login");
 		window.dispatchEvent(new Event("resize"));
 	}
 	,hideGuestLoginPanel: function() {
 		window.document.querySelector("#guestlogin").style.display = "none";
 		window.document.querySelector("#guestpassword").style.display = "none";
-		window.document.querySelector("#chatline").style.display = "block";
+		window.document.querySelector("#chatbox").style.display = "flex";
 		window.document.querySelector("#exitBtn").textContent = Lang.get("exit");
 		if((this.personal.group & 4) != 0) {
 			window.document.querySelector("#clearchatbtn").style.display = "inline-block";
@@ -1582,11 +1418,10 @@ client_Main.prototype = {
 	}
 	,showGuestPasswordPanel: function() {
 		window.document.querySelector("#guestlogin").style.display = "none";
-		window.document.querySelector("#chatline").style.display = "none";
-		window.document.querySelector("#guestpassword").style.display = "block";
+		window.document.querySelector("#chatbox").style.display = "none";
+		window.document.querySelector("#guestpassword").style.display = "flex";
 		window.document.querySelector("#guestpass").type = "password";
-		window.document.querySelector("#guestpass_icon").classList.add("glyphicon-eye-open");
-		window.document.querySelector("#guestpass_icon").classList.remove("glyphicon-eye-close");
+		window.document.querySelector("#guestpass_icon").setAttribute("name","eye");
 	}
 	,updateClients: function(newClients) {
 		this.clients.length = 0;
@@ -1606,7 +1441,7 @@ client_Main.prototype = {
 		}
 		var msgBuf = window.document.querySelector("#messagebuffer");
 		var div = window.document.createElement("div");
-		var time = "[" + HxOverrides.dateStr(new Date()).split(" ")[1] + "] ";
+		var time = HxOverrides.dateStr(new Date()).split(" ")[1];
 		switch(type) {
 		case 1:
 			div.className = "server-msg-reconnect";
@@ -1622,10 +1457,12 @@ client_Main.prototype = {
 			break;
 		case 4:
 			div.className = "server-whisper";
+			div.innerHTML = "<div class=\"head\">\n\t\t\t\t\t<div class=\"server-whisper\"></div>\n\t\t\t\t\t<span class=\"timestamp\">" + time + "</span>\n\t\t\t\t</div>";
+			var textDiv = div.querySelector(".server-whisper");
 			if(isText) {
-				div.textContent = time + text;
+				textDiv.textContent = text;
 			} else {
-				div.innerHTML = time + text;
+				textDiv.innerHTML = text;
 			}
 			break;
 		default:
@@ -1640,13 +1477,13 @@ client_Main.prototype = {
 		var _g = 0;
 		var _g1 = this.clients;
 		while(_g < _g1.length) {
-			var client1 = _g1[_g];
+			var client = _g1[_g];
 			++_g;
 			list_b += "<div class=\"userlist_item\">";
-			if((client1.group & 2) != 0) {
-				list_b += "<span class=\"glyphicon glyphicon-star-empty\"></span>";
+			if((client.group & 2) != 0) {
+				list_b += "<ion-icon name=\"play\"></ion-icon>";
 			}
-			list_b += Std.string("<span class=\"" + ((client1.group & 4) != 0 ? "userlist_owner" : "") + "\">" + client1.name + "</span></div>");
+			list_b += Std.string("<span class=\"" + ((client.group & 4) != 0 ? "userlist_owner" : "") + "\">" + client.name + "</span></div>");
 		}
 		window.document.querySelector("#userlist").innerHTML = list_b;
 	}
@@ -1660,16 +1497,19 @@ client_Main.prototype = {
 		var msgBuf = window.document.querySelector("#messagebuffer");
 		var userDiv = window.document.createElement("div");
 		userDiv.className = "chat-msg-" + name;
+		var headDiv = window.document.createElement("div");
+		headDiv.className = "head";
 		var tstamp = window.document.createElement("span");
 		tstamp.className = "timestamp";
 		if(time == null) {
-			time = "[" + HxOverrides.dateStr(new Date()).split(" ")[1] + "] ";
+			time = HxOverrides.dateStr(new Date()).split(" ")[1];
 		}
 		tstamp.textContent = time;
 		var nameDiv = window.document.createElement("strong");
 		nameDiv.className = "username";
-		nameDiv.textContent = name + ": ";
-		var textDiv = window.document.createElement("span");
+		nameDiv.textContent = name;
+		var textDiv = window.document.createElement("div");
+		textDiv.className = "text";
 		text = StringTools.htmlEscape(text);
 		if(StringTools.startsWith(text,"/")) {
 			if(name == this.personal.name) {
@@ -1687,15 +1527,16 @@ client_Main.prototype = {
 		textDiv.innerHTML = text;
 		var isInChatEnd = msgBuf.scrollTop + msgBuf.clientHeight >= msgBuf.scrollHeight - 1;
 		if(isInChatEnd) {
-			var _g2 = 0;
-			var _g11 = textDiv.getElementsByTagName("img");
-			while(_g2 < _g11.length) _g11[_g2++].onload = $bind(this,this.onChatImageLoaded);
-			var _g21 = 0;
-			var _g3 = textDiv.getElementsByTagName("video");
-			while(_g21 < _g3.length) _g3[_g21++].onloadedmetadata = $bind(this,this.onChatVideoLoaded);
+			var _g = 0;
+			var _g1 = textDiv.getElementsByTagName("img");
+			while(_g < _g1.length) _g1[_g++].onload = $bind(this,this.onChatImageLoaded);
+			var _g = 0;
+			var _g1 = textDiv.getElementsByTagName("video");
+			while(_g < _g1.length) _g1[_g++].onloadedmetadata = $bind(this,this.onChatVideoLoaded);
 		}
-		userDiv.appendChild(tstamp);
-		userDiv.appendChild(nameDiv);
+		userDiv.appendChild(headDiv);
+		headDiv.appendChild(nameDiv);
+		headDiv.appendChild(tstamp);
 		userDiv.appendChild(textDiv);
 		msgBuf.appendChild(userDiv);
 		if(isInChatEnd) {
@@ -1749,20 +1590,16 @@ client_Main.prototype = {
 		}
 		this.onBlinkTab = new haxe_Timer(1000);
 		this.onBlinkTab.run = function() {
-			if(StringTools.startsWith(window.document.title,_gthis.pageTitle)) {
-				return window.document.title = title;
-			} else {
-				return window.document.title = _gthis.getPageTitle();
-			}
+			window.document.title = StringTools.startsWith(window.document.title,_gthis.pageTitle) ? title : _gthis.getPageTitle();
 		};
 		this.onBlinkTab.run();
 	}
 	,setLeaderButton: function(flag) {
 		var leaderBtn = window.document.querySelector("#leader_btn");
 		if(flag) {
-			leaderBtn.classList.add("label-success");
+			leaderBtn.classList.add("success-bg");
 		} else {
-			leaderBtn.classList.remove("label-success");
+			leaderBtn.classList.remove("success-bg");
 		}
 	}
 	,setPlaylistLock: function(isOpen) {
@@ -1771,15 +1608,15 @@ client_Main.prototype = {
 		if(isOpen) {
 			lockPlaylist.title = Lang.get("playlistOpen");
 			lockPlaylist.classList.add("btn-success");
-			lockPlaylist.classList.remove("btn-danger");
-			icon.classList.add("glyphicon-ok");
-			icon.classList.remove("glyphicon-lock");
+			lockPlaylist.classList.add("success");
+			lockPlaylist.classList.remove("danger");
+			icon.setAttribute("name","lock-open");
 		} else {
 			lockPlaylist.title = Lang.get("playlistLocked");
 			lockPlaylist.classList.add("btn-danger");
-			lockPlaylist.classList.remove("btn-success");
-			icon.classList.add("glyphicon-lock");
-			icon.classList.remove("glyphicon-ok");
+			lockPlaylist.classList.add("danger");
+			lockPlaylist.classList.remove("success");
+			icon.setAttribute("name","lock-closed");
 		}
 	}
 	,setSynchThreshold: function(s) {
@@ -1800,29 +1637,6 @@ client_Main.prototype = {
 		return regex.replace(_this_r,"\\$1");
 	}
 };
-var client_MobileView = function() { };
-client_MobileView.__name__ = true;
-client_MobileView.init = function() {
-	var mvbtn = window.document.querySelector("#mv_btn");
-	mvbtn.onclick = function(e) {
-		var hasMobileView = client_Utils.toggleFullScreen(window.document.documentElement);
-		var vwrap = window.document.querySelector("#videowrap");
-		if(hasMobileView) {
-			window.document.body.classList.add("mobile-view");
-			mvbtn.classList.add("active");
-			if(vwrap.children[0].id == "currenttitle") {
-				vwrap.appendChild(vwrap.children[0]);
-			}
-		} else {
-			window.document.body.classList.remove("mobile-view");
-			mvbtn.classList.remove("active");
-			if(vwrap.children[0].id != "currenttitle") {
-				vwrap.insertBefore(vwrap.children[1],vwrap.children[0]);
-			}
-		}
-		return;
-	};
-};
 var client_Player = function(main) {
 	this.skipSetRate = false;
 	this.skipSetTime = false;
@@ -1830,7 +1644,7 @@ var client_Player = function(main) {
 	this.itemPos = 0;
 	this.playerEl = window.document.querySelector("#ytapiplayer");
 	this.videoItemsEl = window.document.querySelector("#queue");
-	this.items = _$VideoList_VideoList_$Impl_$._new();
+	this.items = VideoList._new();
 	this.main = main;
 	this.players = [new client_players_Youtube(main,this)];
 	this.iframePlayer = new client_players_Iframe(main,this);
@@ -1857,17 +1671,16 @@ client_Player.prototype = {
 			if(btn.classList.contains("qbtn-delete")) {
 				_gthis.main.send({ type : "RemoveVideo", removeVideo : { url : item.querySelector(".qe_title").getAttribute("href")}});
 			}
-			return;
 		};
 	}
 	,setNextItem: function(pos) {
-		this.itemPos = _$VideoList_VideoList_$Impl_$.setNextItem(this.items,pos,this.itemPos);
+		this.itemPos = VideoList.setNextItem(this.items,pos,this.itemPos);
 		var next = this.videoItemsEl.children[pos];
 		this.videoItemsEl.removeChild(next);
 		client_Utils.insertAtIndex(this.videoItemsEl,next,this.itemPos + 1);
 	}
 	,toggleItemType: function(pos) {
-		_$VideoList_VideoList_$Impl_$.toggleItemType(this.items,pos);
+		VideoList.toggleItemType(this.items,pos);
 		this.setItemElementType(this.videoItemsEl.children[pos],this.items[pos].isTemp);
 	}
 	,setPlayer: function(newPlayer) {
@@ -1881,8 +1694,8 @@ client_Player.prototype = {
 		this.player = newPlayer;
 	}
 	,getVideoData: function(url,callback) {
-		var player = Lambda.find(this.players,function(player1) {
-			return player1.isSupportedLink(url);
+		var player = Lambda.find(this.players,function(player) {
+			return player.isSupportedLink(url);
 		});
 		if(player == null) {
 			player = this.rawPlayer;
@@ -1930,13 +1743,13 @@ client_Player.prototype = {
 		this.isLoaded = true;
 	}
 	,onPlay: function() {
-		if((this.main.personal.group & 2) == 0) {
+		if(!((this.main.personal.group & 2) != 0)) {
 			return;
 		}
 		this.main.send({ type : "Play", play : { time : this.getTime()}});
 	}
 	,onPause: function() {
-		if((this.main.personal.group & 2) == 0) {
+		if(!((this.main.personal.group & 2) != 0)) {
 			return;
 		}
 		this.main.send({ type : "Pause", pause : { time : this.getTime()}});
@@ -1946,7 +1759,7 @@ client_Player.prototype = {
 			this.skipSetTime = false;
 			return;
 		}
-		if((this.main.personal.group & 2) == 0) {
+		if(!((this.main.personal.group & 2) != 0)) {
 			return;
 		}
 		this.main.send({ type : "SetTime", setTime : { time : this.getTime()}});
@@ -1956,15 +1769,15 @@ client_Player.prototype = {
 			this.skipSetRate = false;
 			return;
 		}
-		if((this.main.personal.group & 2) == 0) {
+		if(!((this.main.personal.group & 2) != 0)) {
 			return;
 		}
 		this.main.send({ type : "SetRate", setRate : { rate : this.getPlaybackRate()}});
 	}
 	,addVideoItem: function(item,atEnd) {
 		var url = StringTools.htmlEscape(item.url,true);
-		var itemEl = client_Utils.nodeFromString("<li class=\"queue_entry pluid-0\" title=\"" + Lang.get("addedBy") + ": " + item.author + "\">\n\t\t\t\t<a class=\"qe_title\" href=\"" + url + "\" target=\"_blank\">" + StringTools.htmlEscape(item.title) + "</a>\n\t\t\t\t<span class=\"qe_time\">" + this.duration(item.duration) + "</span>\n\t\t\t\t<div class=\"qe_clear\"></div>\n\t\t\t\t<div class=\"btn-group\">\n\t\t\t\t\t<button class=\"btn btn-xs btn-default qbtn-play\">\n\t\t\t\t\t\t<span class=\"glyphicon glyphicon-play\"></span>" + Lang.get("play") + "\n\t\t\t\t\t</button>\n\t\t\t\t\t<button class=\"btn btn-xs btn-default qbtn-next\">\n\t\t\t\t\t\t<span class=\"glyphicon glyphicon-share-alt\"></span>" + Lang.get("setNext") + "\n\t\t\t\t\t</button>\n\t\t\t\t\t<button class=\"btn btn-xs btn-default qbtn-tmp\">\n\t\t\t\t\t\t<span class=\"glyphicon glyphicon-flag\"></span>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button class=\"btn btn-xs btn-default qbtn-delete\">\n\t\t\t\t\t\t<span class=\"glyphicon glyphicon-trash\"></span>" + Lang.get("delete") + "\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</li>");
-		_$VideoList_VideoList_$Impl_$.addItem(this.items,item,atEnd,this.itemPos);
+		var itemEl = client_Utils.nodeFromString("<li class=\"queue_entry info\" title=\"" + Lang.get("addedBy") + ": " + item.author + "\">\n\t\t\t\t<header>\n\t\t\t\t\t<span class=\"qe_time\">" + this.duration(item.duration) + "</span>\n\t\t\t\t\t<h4><a class=\"qe_title\" href=\"" + url + "\" target=\"_blank\">" + StringTools.htmlEscape(item.title) + "</a></h4>\n\t\t\t\t</header>\n\t\t\t\t<span class=\"controls\">\n\t\t\t\t\t<button class=\"qbtn-play\" title=\"" + Lang.get("play") + "\"><ion-icon name=\"play\"></ion-icon></button>\n\t\t\t\t\t<button class=\"qbtn-next\" title=\"" + Lang.get("setNext") + "\"><ion-icon name=\"arrow-up\"></ion-icon></button>\n\t\t\t\t\t<button class=\"qbtn-tmp\"><ion-icon></ion-icon></button>\n\t\t\t\t\t<button class=\"qbtn-delete\" title=\"" + Lang.get("delete") + "\"><ion-icon name=\"close\"></ion-icon></button>\n\t\t\t\t</span>\n\t\t\t</li>");
+		VideoList.addItem(this.items,item,atEnd,this.itemPos);
 		this.setItemElementType(itemEl,item.isTemp);
 		if(atEnd) {
 			this.videoItemsEl.appendChild(itemEl);
@@ -1974,8 +1787,9 @@ client_Player.prototype = {
 		this.updateCounters();
 	}
 	,setItemElementType: function(item,isTemp) {
-		var text = isTemp ? Lang.get("makePermanent") : Lang.get("makeTemporary");
-		item.querySelector(".qbtn-tmp").innerHTML = "<span class=\"glyphicon glyphicon-flag\"></span>" + text;
+		var btn = item.querySelector(".qbtn-tmp");
+		btn.title = isTemp ? Lang.get("makePermanent") : Lang.get("makeTemporary");
+		btn.firstElementChild.setAttribute("name",isTemp ? "lock-open" : "lock-closed");
 		if(isTemp) {
 			item.classList.add("queue_temp");
 		} else {
@@ -1984,14 +1798,14 @@ client_Player.prototype = {
 	}
 	,removeItem: function(url) {
 		this.removeElementItem(url);
-		var index = _$VideoList_VideoList_$Impl_$.findIndex(this.items,function(item) {
+		var index = VideoList.findIndex(this.items,function(item) {
 			return item.url == url;
 		});
 		if(index == -1) {
 			return;
 		}
 		var isCurrent = this.items[this.itemPos].url == url;
-		this.itemPos = _$VideoList_VideoList_$Impl_$.removeItem(this.items,index,this.itemPos);
+		this.itemPos = VideoList.removeItem(this.items,index,this.itemPos);
 		this.updateCounters();
 		if(isCurrent && this.items.length > 0) {
 			this.setVideo(this.itemPos);
@@ -2010,7 +1824,7 @@ client_Player.prototype = {
 		}
 	}
 	,skipItem: function(url) {
-		var index = _$VideoList_VideoList_$Impl_$.findIndex(this.items,function(item) {
+		var index = VideoList.findIndex(this.items,function(item) {
 			return item.url == url;
 		});
 		if(index == -1) {
@@ -2019,7 +1833,7 @@ client_Player.prototype = {
 		if(this.items[index].isTemp) {
 			this.removeElementItem(url);
 		}
-		index = _$VideoList_VideoList_$Impl_$.skipItem(this.items,index);
+		index = VideoList.skipItem(this.items,index);
 		this.updateCounters();
 		if(this.items.length == 0) {
 			return;
@@ -2073,18 +1887,18 @@ client_Player.prototype = {
 		var h = time / 60 / 60 | 0;
 		var m = (time / 60 | 0) - h * 60;
 		var s = time % 60 | 0;
-		var time1 = "" + m + ":";
+		var time = "" + m + ":";
 		if(m < 10) {
-			time1 = "0" + time1;
+			time = "0" + time;
 		}
 		if(h > 0) {
-			time1 = "" + h + ":" + time1;
+			time = "" + h + ":" + time;
 		}
 		if(s < 10) {
-			time1 += "0";
+			time += "0";
 		}
-		time1 += s;
-		return time1;
+		time += s;
+		return time;
 	}
 	,totalDuration: function() {
 		var time = 0.0;
@@ -2205,7 +2019,7 @@ client_Settings.read = function() {
 };
 client_Settings.checkData = function(data) {
 	if(client_Settings.defaults == null) {
-		throw new js__$Boot_HaxeError("read: default data is null");
+		throw haxe_Exception.thrown("read: default data is null");
 	}
 	if(data == null) {
 		return client_Settings.defaults;
@@ -2214,10 +2028,10 @@ client_Settings.checkData = function(data) {
 		return data;
 	}
 	if(data.version > client_Settings.defaults.version) {
-		throw new js__$Boot_HaxeError("read: current data version is larger than default data version");
+		throw haxe_Exception.thrown("read: current data version is larger than default data version");
 	}
 	if(client_Settings.updater == null) {
-		throw new js__$Boot_HaxeError("read: updater function is null");
+		throw haxe_Exception.thrown("read: updater function is null");
 	}
 	while(data.version < client_Settings.defaults.version) {
 		data = client_Settings.updater(data,data.version);
@@ -2392,8 +2206,7 @@ client_players_Raw.prototype = {
 	}
 	,getVideoData: function(url,callback) {
 		var _gthis = this;
-		var pos = url.lastIndexOf("/") + 1;
-		var title = HxOverrides.substr(url,pos,null);
+		var title = HxOverrides.substr(url,url.lastIndexOf("/") + 1,null);
 		if(this.matchName.match(title)) {
 			title = this.matchName.matched(1);
 		} else {
@@ -2403,7 +2216,6 @@ client_players_Raw.prototype = {
 		if(isHls && !this.isHlsLoaded) {
 			this.loadHlsPlugin(function() {
 				_gthis.getVideoData(url,callback);
-				return;
 			});
 			return;
 		}
@@ -2414,14 +2226,12 @@ client_players_Raw.prototype = {
 				_gthis.playerEl.removeChild(video);
 			}
 			callback({ duration : 0});
-			return;
 		};
 		video.onloadedmetadata = function() {
 			if(_gthis.playerEl.contains(video)) {
 				_gthis.playerEl.removeChild(video);
 			}
 			callback({ duration : video.duration, title : title});
-			return;
 		};
 		client_Utils.prepend(this.playerEl,video);
 		if(isHls) {
@@ -2433,7 +2243,6 @@ client_players_Raw.prototype = {
 		client_JsApi.addScriptToHead("https://cdn.jsdelivr.net/npm/hls.js@latest",function() {
 			_gthis.isHlsLoaded = true;
 			callback();
-			return;
 		});
 	}
 	,initHlsSource: function(video,url) {
@@ -2451,7 +2260,6 @@ client_players_Raw.prototype = {
 		if(isHls && !this.isHlsLoaded) {
 			this.loadHlsPlugin(function() {
 				_gthis.loadVideo(item);
-				return;
 			});
 			return;
 		}
@@ -2472,7 +2280,6 @@ client_players_Raw.prototype = {
 		this.video.onplay = function(e) {
 			_gthis.playAllowed = true;
 			_gthis.player.onPlay();
-			return;
 		};
 		this.video.onpause = ($_=this.player,$bind($_,$_.onPause));
 		this.video.onratechange = ($_=this.player,$bind($_,$_.onRateChange));
@@ -2491,7 +2298,7 @@ client_players_Raw.prototype = {
 			this.controlsHider.stop();
 		}
 		this.controlsHider = haxe_Timer.delay(function() {
-			return _gthis.video.controls = false;
+			_gthis.video.controls = false;
 		},3000);
 		this.video.onmousemove = function(e) {
 			if(_gthis.controlsHider != null) {
@@ -2637,11 +2444,9 @@ client_players_Youtube.prototype = {
 				}
 				callback({ duration : duration, title : title, url : url});
 			}
-			return;
 		};
 		http.onError = function(msg) {
 			_gthis.getRemoteDataFallback(url,callback);
-			return;
 		};
 		http.request();
 	}
@@ -2663,21 +2468,18 @@ client_players_Youtube.prototype = {
 			}
 			var loadNextItem = null;
 			loadNextItem = function() {
-				var loadNextItem1 = "youtu.be/" + items.shift().snippet.resourceId.videoId;
-				_gthis.getVideoData(loadNextItem1,function(data1) {
-					callback(data1);
+				var id = items.shift().snippet.resourceId.videoId;
+				_gthis.getVideoData("youtu.be/" + id,function(data) {
+					callback(data);
 					if(items.length > 0) {
 						loadNextItem();
 					}
-					return;
 				});
 			};
 			loadNextItem();
-			return;
 		};
 		http.onError = function(msg) {
 			callback({ duration : 0});
-			return;
 		};
 		http.request();
 	}
@@ -2689,7 +2491,6 @@ client_players_Youtube.prototype = {
 		if(!js_youtube_Youtube.isLoadedAPI) {
 			js_youtube_Youtube.init(function() {
 				_gthis.getRemoteDataFallback(url,callback);
-				return;
 			});
 			return;
 		}
@@ -2700,16 +2501,13 @@ client_players_Youtube.prototype = {
 			if(_gthis.playerEl.contains(video)) {
 				_gthis.playerEl.removeChild(video);
 			}
-			var tmp = _gthis.tempYoutube.getDuration();
-			callback({ duration : tmp});
-			return;
-		}, onError : function(e1) {
-			haxe_Log.trace("Error " + e1.data,{ fileName : "src/client/players/Youtube.hx", lineNumber : 183, className : "client.players.Youtube", methodName : "getRemoteDataFallback"});
+			callback({ duration : _gthis.tempYoutube.getDuration()});
+		}, onError : function(e) {
+			haxe_Log.trace("Error " + e.data,{ fileName : "src/client/players/Youtube.hx", lineNumber : 183, className : "client.players.Youtube", methodName : "getRemoteDataFallback"});
 			if(_gthis.playerEl.contains(video)) {
 				_gthis.playerEl.removeChild(video);
 			}
 			callback({ duration : 0});
-			return;
 		}}});
 	}
 	,loadVideo: function(item) {
@@ -2717,7 +2515,6 @@ client_players_Youtube.prototype = {
 		if(!js_youtube_Youtube.isLoadedAPI) {
 			js_youtube_Youtube.init(function() {
 				_gthis.loadVideo(item);
-				return;
 			});
 			return;
 		}
@@ -2732,9 +2529,8 @@ client_players_Youtube.prototype = {
 		this.youtube = new YT.Player(this.video.id,{ videoId : this.extractVideoId(item.url), playerVars : { autoplay : 1, modestbranding : 1, rel : 0, showinfo : 0}, events : { onReady : function(e) {
 			_gthis.isLoaded = true;
 			_gthis.youtube.pauseVideo();
-			return;
-		}, onStateChange : function(e1) {
-			switch(e1.data) {
+		}, onStateChange : function(e) {
+			switch(e.data) {
 			case -1:
 				_gthis.player.onCanBePlayed();
 				break;
@@ -2752,10 +2548,8 @@ client_players_Youtube.prototype = {
 			case 5:
 				break;
 			}
-			return;
-		}, onPlaybackRateChange : function(e2) {
+		}, onPlaybackRateChange : function(e) {
 			_gthis.player.onRateChange();
-			return;
 		}}});
 	}
 	,removeVideo: function() {
@@ -2792,6 +2586,41 @@ client_players_Youtube.prototype = {
 		this.youtube.setPlaybackRate(rate);
 	}
 };
+var haxe_Exception = function(message,previous,native) {
+	Error.call(this,message);
+	this.message = message;
+	this.__previousException = previous;
+	this.__nativeException = native != null ? native : this;
+};
+haxe_Exception.__name__ = true;
+haxe_Exception.caught = function(value) {
+	if(((value) instanceof haxe_Exception)) {
+		return value;
+	} else if(((value) instanceof Error)) {
+		return new haxe_Exception(value.message,null,value);
+	} else {
+		return new haxe_ValueException(value,null,value);
+	}
+};
+haxe_Exception.thrown = function(value) {
+	if(((value) instanceof haxe_Exception)) {
+		return value.get_native();
+	} else if(((value) instanceof Error)) {
+		return value;
+	} else {
+		var e = new haxe_ValueException(value);
+		return e;
+	}
+};
+haxe_Exception.__super__ = Error;
+haxe_Exception.prototype = $extend(Error.prototype,{
+	unwrap: function() {
+		return this.__nativeException;
+	}
+	,get_native: function() {
+		return this.__nativeException;
+	}
+});
 var haxe_Log = function() { };
 haxe_Log.__name__ = true;
 haxe_Log.formatOutput = function(v,infos) {
@@ -2839,6 +2668,17 @@ haxe_Timer.prototype = {
 	,run: function() {
 	}
 };
+var haxe_ValueException = function(value,previous,native) {
+	haxe_Exception.call(this,String(value),previous,native);
+	this.value = value;
+};
+haxe_ValueException.__name__ = true;
+haxe_ValueException.__super__ = haxe_Exception;
+haxe_ValueException.prototype = $extend(haxe_Exception.prototype,{
+	unwrap: function() {
+		return this.value;
+	}
+});
 var haxe_crypto_Sha256 = function() {
 };
 haxe_crypto_Sha256.__name__ = true;
@@ -2853,14 +2693,14 @@ haxe_crypto_Sha256.str2blks = function(s) {
 	var _g = 0;
 	var _g1 = nblk * 16;
 	while(_g < _g1) blks[_g++] = 0;
-	var _g2 = 0;
-	var _g3 = s1.length;
-	while(_g2 < _g3) {
-		var i = _g2++;
+	var _g = 0;
+	var _g1 = s1.length;
+	while(_g < _g1) {
+		var i = _g++;
 		blks[i >> 2] |= s1.b[i] << 24 - ((i & 3) << 3);
 	}
-	var i1 = s1.length;
-	blks[i1 >> 2] |= 128 << 24 - ((i1 & 3) << 3);
+	var i = s1.length;
+	blks[i >> 2] |= 128 << 24 - ((i & 3) << 3);
 	blks[nblk * 16 - 1] = s1.length * 8;
 	return blks;
 };
@@ -3027,11 +2867,11 @@ haxe_http_HttpJs.prototype = $extend(haxe_http_HttpBase.prototype,{
 			var s;
 			try {
 				s = r.status;
-			} catch( e ) {
+			} catch( _g ) {
 				s = null;
 			}
-			if(s == 0 && typeof(window) != "undefined") {
-				var protocol = window.location.protocol.toLowerCase();
+			if(s == 0 && typeof(window) != "undefined" && $global.location != null) {
+				var protocol = $global.location.protocol.toLowerCase();
 				if(new EReg("^(?:about|app|app-storage|.+-extension|file|res|widget):$","").match(protocol)) {
 					s = r.response != null ? 200 : 404;
 				}
@@ -3044,14 +2884,14 @@ haxe_http_HttpJs.prototype = $extend(haxe_http_HttpBase.prototype,{
 			}
 			if(s != null && s >= 200 && s < 400) {
 				_gthis.req = null;
-				var onreadystatechange1 = haxe_io_Bytes.ofData(r.response);
-				_gthis.success(onreadystatechange1);
-			} else if(s == null) {
+				_gthis.success(haxe_io_Bytes.ofData(r.response));
+			} else if(s == null || s == 0 && r.response == null) {
 				_gthis.req = null;
 				_gthis.onError("Failed to connect or resolve host");
 			} else if(s == null) {
 				_gthis.req = null;
-				_gthis.responseBytes = haxe_io_Bytes.ofData(r.response);
+				var onreadystatechange = r.response != null ? haxe_io_Bytes.ofData(r.response) : null;
+				_gthis.responseBytes = onreadystatechange;
 				_gthis.onError("Http Error #" + r.status);
 			} else {
 				switch(s) {
@@ -3065,7 +2905,8 @@ haxe_http_HttpJs.prototype = $extend(haxe_http_HttpBase.prototype,{
 					break;
 				default:
 					_gthis.req = null;
-					_gthis.responseBytes = haxe_io_Bytes.ofData(r.response);
+					var onreadystatechange = r.response != null ? haxe_io_Bytes.ofData(r.response) : null;
+					_gthis.responseBytes = onreadystatechange;
 					_gthis.onError("Http Error #" + r.status);
 				}
 			}
@@ -3079,36 +2920,36 @@ haxe_http_HttpJs.prototype = $extend(haxe_http_HttpBase.prototype,{
 		if(uri != null) {
 			post = true;
 		} else {
-			var _g2 = 0;
-			var _g3 = this.params;
-			while(_g2 < _g3.length) {
-				var p = _g3[_g2];
-				++_g2;
+			var _g = 0;
+			var _g1 = this.params;
+			while(_g < _g1.length) {
+				var p = _g1[_g];
+				++_g;
 				if(uri == null) {
 					uri = "";
 				} else {
-					uri = Std.string(uri) + "&";
+					uri = (uri == null ? "null" : Std.string(uri)) + "&";
 				}
-				var s1 = p.name;
-				var value = Std.string(uri) + encodeURIComponent(s1) + "=";
-				var s2 = p.value;
-				uri = value + encodeURIComponent(s2);
+				var s = p.name;
+				var value = (uri == null ? "null" : Std.string(uri)) + encodeURIComponent(s) + "=";
+				var s1 = p.value;
+				uri = value + encodeURIComponent(s1);
 			}
 		}
 		try {
 			if(post) {
 				r.open("POST",this.url,this.async);
 			} else if(uri != null) {
-				r.open("GET",this.url + (this.url.split("?").length <= 1 ? "?" : "&") + Std.string(uri),this.async);
+				r.open("GET",this.url + (this.url.split("?").length <= 1 ? "?" : "&") + (uri == null ? "null" : Std.string(uri)),this.async);
 				uri = null;
 			} else {
 				r.open("GET",this.url,this.async);
 			}
 			r.responseType = "arraybuffer";
-		} catch( e1 ) {
-			var e2 = ((e1) instanceof js__$Boot_HaxeError) ? e1.val : e1;
+		} catch( _g ) {
+			var _g1 = haxe_Exception.caught(_g).unwrap();
 			this.req = null;
-			this.onError(e2.toString());
+			this.onError(_g1.toString());
 			return;
 		}
 		r.withCredentials = this.withCredentials;
@@ -3117,12 +2958,12 @@ haxe_http_HttpJs.prototype = $extend(haxe_http_HttpBase.prototype,{
 		}) && post && this.postData == null) {
 			r.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 		}
-		var _g21 = 0;
-		var _g31 = this.headers;
-		while(_g21 < _g31.length) {
-			var h1 = _g31[_g21];
-			++_g21;
-			r.setRequestHeader(h1.name,h1.value);
+		var _g = 0;
+		var _g1 = this.headers;
+		while(_g < _g1.length) {
+			var h = _g1[_g];
+			++_g;
+			r.setRequestHeader(h.name,h.value);
 		}
 		r.send(uri);
 		if(!this.async) {
@@ -3152,26 +2993,26 @@ haxe_io_Bytes.ofString = function(s,encoding) {
 		return new haxe_io_Bytes(buf.buffer);
 	}
 	var a = [];
-	var i1 = 0;
-	while(i1 < s.length) {
-		var c1 = s.charCodeAt(i1++);
-		if(55296 <= c1 && c1 <= 56319) {
-			c1 = c1 - 55232 << 10 | s.charCodeAt(i1++) & 1023;
+	var i = 0;
+	while(i < s.length) {
+		var c = s.charCodeAt(i++);
+		if(55296 <= c && c <= 56319) {
+			c = c - 55232 << 10 | s.charCodeAt(i++) & 1023;
 		}
-		if(c1 <= 127) {
-			a.push(c1);
-		} else if(c1 <= 2047) {
-			a.push(192 | c1 >> 6);
-			a.push(128 | c1 & 63);
-		} else if(c1 <= 65535) {
-			a.push(224 | c1 >> 12);
-			a.push(128 | c1 >> 6 & 63);
-			a.push(128 | c1 & 63);
+		if(c <= 127) {
+			a.push(c);
+		} else if(c <= 2047) {
+			a.push(192 | c >> 6);
+			a.push(128 | c & 63);
+		} else if(c <= 65535) {
+			a.push(224 | c >> 12);
+			a.push(128 | c >> 6 & 63);
+			a.push(128 | c & 63);
 		} else {
-			a.push(240 | c1 >> 18);
-			a.push(128 | c1 >> 12 & 63);
-			a.push(128 | c1 >> 6 & 63);
-			a.push(128 | c1 & 63);
+			a.push(240 | c >> 18);
+			a.push(128 | c >> 12 & 63);
+			a.push(128 | c >> 6 & 63);
+			a.push(128 | c & 63);
 		}
 	}
 	return new haxe_io_Bytes(new Uint8Array(a).buffer);
@@ -3186,7 +3027,7 @@ haxe_io_Bytes.ofData = function(b) {
 haxe_io_Bytes.prototype = {
 	getString: function(pos,len,encoding) {
 		if(pos < 0 || len < 0 || pos + len > this.length) {
-			throw new js__$Boot_HaxeError(haxe_io_Error.OutsideBounds);
+			throw haxe_Exception.thrown(haxe_io_Error.OutsideBounds);
 		}
 		if(encoding == null) {
 			encoding = haxe_io_Encoding.UTF8;
@@ -3218,8 +3059,8 @@ haxe_io_Bytes.prototype = {
 			break;
 		case 1:
 			while(i < max) {
-				var c1 = b[i++] | b[i++] << 8;
-				s += String.fromCodePoint(c1);
+				var c = b[i++] | b[i++] << 8;
+				s += String.fromCodePoint(c);
 			}
 			break;
 		}
@@ -3275,17 +3116,19 @@ haxe_io_Path.prototype = {
 		return (this.dir == null ? "" : this.dir + (this.backslash ? "\\" : "/")) + this.file + (this.ext == null ? "" : "." + this.ext);
 	}
 };
-var js__$Boot_HaxeError = function(val) {
-	Error.call(this);
-	this.val = val;
-	if(Error.captureStackTrace) {
-		Error.captureStackTrace(this,js__$Boot_HaxeError);
+var haxe_iterators_ArrayIterator = function(array) {
+	this.current = 0;
+	this.array = array;
+};
+haxe_iterators_ArrayIterator.__name__ = true;
+haxe_iterators_ArrayIterator.prototype = {
+	hasNext: function() {
+		return this.current < this.array.length;
+	}
+	,next: function() {
+		return this.array[this.current++];
 	}
 };
-js__$Boot_HaxeError.__name__ = true;
-js__$Boot_HaxeError.__super__ = Error;
-js__$Boot_HaxeError.prototype = $extend(Error.prototype,{
-});
 var js_Boot = function() { };
 js_Boot.__name__ = true;
 js_Boot.__string_rec = function(o,s) {
@@ -3334,10 +3177,10 @@ js_Boot.__string_rec = function(o,s) {
 		if(((o) instanceof Array)) {
 			var str = "[";
 			s += "\t";
-			var _g3 = 0;
-			var _g11 = o.length;
-			while(_g3 < _g11) {
-				var i = _g3++;
+			var _g = 0;
+			var _g1 = o.length;
+			while(_g < _g1) {
+				var i = _g++;
 				str += (i > 0 ? "," : "") + js_Boot.__string_rec(o[i],s);
 			}
 			str += "]";
@@ -3346,8 +3189,7 @@ js_Boot.__string_rec = function(o,s) {
 		var tostr;
 		try {
 			tostr = o.toString;
-		} catch( e1 ) {
-			var e2 = ((e1) instanceof js__$Boot_HaxeError) ? e1.val : e1;
+		} catch( _g ) {
 			return "???";
 		}
 		if(tostr != null && tostr != Object.toString && typeof(tostr) == "function") {
@@ -3356,7 +3198,7 @@ js_Boot.__string_rec = function(o,s) {
 				return s2;
 			}
 		}
-		var str1 = "{\n";
+		var str = "{\n";
 		s += "\t";
 		var hasp = o.hasOwnProperty != null;
 		var k = null;
@@ -3367,14 +3209,14 @@ js_Boot.__string_rec = function(o,s) {
 		if(k == "prototype" || k == "__class__" || k == "__super__" || k == "__interfaces__" || k == "__properties__") {
 			continue;
 		}
-		if(str1.length != 2) {
-			str1 += ", \n";
+		if(str.length != 2) {
+			str += ", \n";
 		}
-		str1 += s + k + " : " + js_Boot.__string_rec(o[k],s);
+		str += s + k + " : " + js_Boot.__string_rec(o[k],s);
 		}
 		s = s.substring(1);
-		str1 += "\n" + s + "}";
-		return str1;
+		str += "\n" + s + "}";
+		return str;
 	case "string":
 		return o;
 	default:
@@ -3393,7 +3235,7 @@ js_Browser.getLocalStorage = function() {
 			s.removeItem(key);
 		}
 		return s;
-	} catch( e ) {
+	} catch( _g ) {
 		return null;
 	}
 };
@@ -3404,7 +3246,7 @@ js_Browser.createXMLHttpRequest = function() {
 	if(typeof ActiveXObject != "undefined") {
 		return new ActiveXObject("Microsoft.XMLHTTP");
 	}
-	throw new js__$Boot_HaxeError("Unable to create XMLHttpRequest object.");
+	throw haxe_Exception.thrown("Unable to create XMLHttpRequest object.");
 };
 var js_hlsjs_HlsConfig = function() { };
 js_hlsjs_HlsConfig.__name__ = true;
@@ -3422,21 +3264,20 @@ js_youtube_Youtube.init = function(onAPIReady) {
 		}
 	};
 };
-function $getIterator(o) { if( o instanceof Array ) return HxOverrides.iter(o); else return o.iterator(); }
+function $getIterator(o) { if( o instanceof Array ) return new haxe_iterators_ArrayIterator(o); else return o.iterator(); }
 function $bind(o,m) { if( m == null ) return null; if( m.__id__ == null ) m.__id__ = $global.$haxeUID++; var f; if( o.hx__closures__ == null ) o.hx__closures__ = {}; else f = o.hx__closures__[m.__id__]; if( f == null ) { f = m.bind(o); o.hx__closures__[m.__id__] = f; } return f; }
 $global.$haxeUID |= 0;
-var __map_reserved = {};
+if(typeof(performance) != "undefined" ? typeof(performance.now) == "function" : false) {
+	HxOverrides.now = performance.now.bind(performance);
+}
 if( String.fromCodePoint == null ) String.fromCodePoint = function(c) { return c < 0x10000 ? String.fromCharCode(c) : String.fromCharCode((c>>10)+0xD7C0)+String.fromCharCode((c&0x3FF)+0xDC00); }
 String.__name__ = true;
 Array.__name__ = true;
 Date.__name__ = "Date";
-Object.defineProperty(js__$Boot_HaxeError.prototype,"message",{ get : function() {
-	return String(this.val);
-}});
 js_Boot.__toStr = ({ }).toString;
 Lang.langs = new haxe_ds_StringMap();
 Lang.ids = ["en","ru"];
-Lang.lang = HxOverrides.substr(window.navigator.language,0,2).toLowerCase();
+Lang.lang = HxOverrides.substr($global.navigator.language,0,2).toLowerCase();
 client_JsApi.videoChange = [];
 client_JsApi.videoRemove = [];
 client_Settings.isSupported = false;
diff --git a/res/css/cytube.css b/res/css/cytube.css
deleted file mode 100644
index faa5ebb..0000000
--- a/res/css/cytube.css
+++ /dev/null
@@ -1,326 +0,0 @@
-.container-fluid {
-  padding-left: 15px;
-  padding-right: 15px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.vertical-spacer {
-  margin-top: 10px;
-}
-
-#messagebuffer {
-  font-size: 17px;
-  width: auto;
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-#userlist {
-  width: 90px;
-  float: left;
-  border-right: 0;
-  font-size: 9pt;
-  list-style: none outside none;
-  padding: 0;
-}
-
-#messagebuffer, #userlist {
-  height: 329px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  margin-bottom: 0;
-}
-
-#chatline, #guestlogin > input, #guestlogin > .input-group-addon {
-  margin-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-#guestpass_icon {
-  float: right;
-  margin-right: 14px;
-  margin-top: -27px;
-  position: relative;
-  z-index: 2;
-}
-#guestpass_icon:hover {
-  cursor: pointer;
-  color: white;
-}
-
-.linewrap {
-  white-space: pre-wrap; /* css-3 */
-  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
-  white-space: -pre-wrap; /* Opera 4-6 */
-  white-space: -o-pre-wrap; /* Opera 7 */
-  word-wrap: break-word; /* Internet Explorer 5.5+ */
-}
-
-.clear {
-  clear: both;
-}
-
-#customembed > .input-group {
-  margin-top: 5px;
-}
-
-#chatheader {
-  padding-left: 5px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none
-}
-
-#currenttitle {
-  margin: 0;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-#chatwrap, #videowrap {
-  margin-bottom: 10px;
-}
-
-#smileswrap {
-  display: none;
-  background: rgba(0,0,0,0.7);
-  margin: 10px 0px;
-  width: 100%;
-  max-height: 500px;
-  overflow-y: scroll;
-  padding: 5px;
-  text-align: center;
-  color: #fff;
-}
-.smile-preview {
-  padding: 2px;
-  max-height: 75px;
-  cursor: pointer;
-}
-.channel-emote {
-  max-width: 150px;
-  max-height: 150px;
-}
-.chat-img {
-  max-width: 200px;
-  max-height: 200px;
-}
-
-/*
-#userpl_list li {
-  display: inline-block;
-  line-height: 22px;
-  width: 100%;
-  clear: both;
-  margin: 2px 0 0 auto;
-  padding: 2px;
-  font-size: 8pt;
-}
-*/
-
-#queue_next, #ce_queue_next {
-  border-radius: 0;
-}
-
-#plmeta {
-  border-radius: 4px;
-  border-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-top: 1px solid #242628;
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.videolist {
-  list-style: none outside none;
-  margin-left: 0;
-  max-height: 500px;
-  overflow-y: auto;
-}
-
-
-
-#pllength {
-  float: right;
-}
-
-.queue_temp {
-  background-image: url(/img/stripe-diagonal.png);
-}
-
-.videolist {
-  padding: 0;
-  margin: 0;
-}
-
-#queue > li:last-child {
-  border-bottom-width: 0;
-  margin-bottom: 0;
-}
-
-.videolist > li:first-child {
-  border-top-width: 1px;
-}
-
-.qe_title {
-  float: left;
-}
-
-.qe_time {
-  float: right;
-  font-family: Monospace;
-}
-
-.qe_clear {
-  clear: both;
-}
-
-.clear {
-  clear: both;
-}
-
-#chatheader .label {
-  height: 100%;
-  margin-left: 2px;
-}
-
-.well {
-  margin-top: 10px;
-}
-
-.server-msg-disconnect {
-  border: 1px solid #ff0000;
-  line-height: 2;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  color: #ff0000;
-  text-align: center;
-  background-color: rgba(129, 20, 21, 0.1);
-}
-
-.server-msg-reconnect {
-  border: 1px solid #009900;
-  line-height: 2;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  color: #009900;
-  text-align: center;
-  background-color: rgba(18, 100, 18, 0.1);
-}
-
-.queue_sortable li {
-  cursor: row-resize;
-}
-
-.userlist_item {
-  cursor: pointer;
-}
-
-.userlist_owner {
-  color: #cc0000!important;
-  font-weight: bold!important;
-}
-
-.userlist_guest {
-  color: #888888!important;
-}
-
-.server-whisper {
-  font-style: italic;
-  color: #888888;
-  font-size: 8pt;
-}
-
-.timestamp {
-  color: #808080;
-  font-size: 8pt;
-}
-
-#togglemotd .glyphicon {
-  font-size: 10pt;
-}
-
-#guestlogin .input-group-addon {
-  min-width: 120px;
-}
-
-#customembed-content {
-  font-family: Monospace;
-}
-
-#pmbar {
-  position: fixed;
-  bottom: 0;
-  z-index: 10000;
-  min-width: 100%;
-  pointer-events: none;
-}
-
-#userlisttoggle {
-  padding-top: 2px;
-}
-
-.queue_entry {
-  line-height: 22px;
-  padding: 2px;
-  font-size: 8pt;
-  border: 1px solid;
-  border-top-width: 0;
-}
-
-#leftcontrols .btn {
-  margin-right: 5px;
-}
-
-#videowrap .embed-responsive:-webkit-full-screen { width: 100%; }
-#videowrap .embed-responsive:-moz-full-screen { width: 100%; }
-#videowrap .embed-responsive:-ms-full-screen { width: 100%; }
-#videowrap .embed-responsive:-o-full-screen { width: 100%; }
-#videowrap .embed-responsive:full-screen { width: 100%; }
-
-#newmessages-indicator {
-  margin-top: -30px;
-  line-height: 30px;
-  height: 30px;
-  text-align: center;
-  width: 100%;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-#newmessages-indicator .glyphicon {
-  margin-left: 10px;
-  margin-right: 10px;
-}
-
-.navbar-inverse {
-  background: rgba(0,0,0,0.44) !important;
-}
-#footer {
-  margin-top: 15px;
-}
-
-
-.split {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  float: left;
-}
-.gutter {
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-position: 50%;
-}
-.gutter.gutter-horizontal {
-  cursor: col-resize;
-  background-image: url('/img/vertical.png');
-  height: 80px;
-  float: left;
-  opacity: 0.2;
-}
diff --git a/res/css/des.css b/res/css/des.css
index 58e0570..73a937f 100644
--- a/res/css/des.css
+++ b/res/css/des.css
@@ -1,1003 +1,747 @@
 @charset "utf-8";
 /* CSS Document */
 
+@import url(https://rsms.me/inter/inter.css);
 
-@import url(https://fonts.googleapis.com/css?family=Play:400italic,700italic,300,700,300italic,400&subset=latin,cyrillic);
-/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
-html {
-  font-family:Play;
-  -ms-text-size-adjust:100%;
-  -webkit-text-size-adjust:100%
+:root {
+  --background-video: #000;
+  --background-chat: #111;
+  --midground: #888;
+  --foreground: #ddd;
+  --accent: #0055ff;
+  --success: #009632;
+  --warning: #ffb800;
+  --error: #ff0800;
+  --border: #333;
+  --box-shadow: 0rem .25rem 1rem rgba(0, 0, 0, .25);
 }
+
 body {
-  margin:0
-}
-footer, nav, section {
-  display:block
-}
-a {
-  background-color:transparent
-}
-a:active, a:hover {
-  outline:0
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: .875rem;
+  line-height: 1.4;
+  color: var(--foreground);
+  background-color: var(--background-chat);
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
 }
-b, strong {
-  font-weight:bold
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  display: inline;
 }
-code {
-  font-family:monospace, monospace;
-  font-size:1em
+
+h1 {
+  font-size: 2.441rem;
 }
-button, input, textarea {
-  color:inherit;
-  font:inherit;
-  margin:0
+
+h2 {
+  font-size: 1.953rem;
 }
-button {
-  overflow:visible
+
+h3 {
+  font-size: 1.563rem;
 }
-button {
-  text-transform:none
+
+h4 {
+  font-size: 1.25rem;
 }
-button {
-  -webkit-appearance:button;
-  cursor:pointer
+
+h5 {
+  font-size: 1rem;
 }
-button::-moz-focus-inner, input::-moz-focus-inner {
-  border:0;
-  padding:0
+
+h6 {
+  font-size: .8rem;
 }
-input {
-  line-height:normal
+
+a {
+  color: var(--accent);
 }
-input[type="checkbox"] {
-  -webkit-box-sizing:border-box;
-  -moz-box-sizing:border-box;
-  box-sizing:border-box;
-  padding:0
+
+ul {
+  list-style: none outside none;
+  padding: 0;
+  margin: 0;
 }
+
+input,
+button,
 textarea {
-  overflow:auto
-}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
-@media print {
-  *, *:before, *:after {
-    background:transparent !important;
-    color:#000 !important;
-    -webkit-box-shadow:none !important;
-    box-shadow:none !important;
-    text-shadow:none !important
-  }
-  a, a:visited {
-    text-decoration:underline
-  }
-  a[href]:after {
-    content:" (" attr(href) ")"
-  }
-  a[href^="#"]:after, a[href^="javascript:"]:after {
-  content:""
-  }
-  pre {
-    border:1px solid #999;
-    page-break-inside:avoid
-  }
-  thead {
-    display:table-header-group
-  }
-  tr {
-    page-break-inside:avoid
-  }
-  select {
-    background:#fff !important
-  }
-  .navbar {
-    display:none
-  }
-  .label {
-    border:1px solid #000
-  }
-  .table {
-    border-collapse:collapse !important
-  }
-  .table th {
-    background-color:#fff !important
-  }
-}
-@font-face {
-font-family:'Glyphicons Halflings';
-src:url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/fonts/glyphicons-halflings-regular.eot');
-src:url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg')
-}
-.glyphicon {
-  position:relative;
-  top:1px;
-  display:inline-block;
-  font-family:'Glyphicons Halflings';
-  font-style:normal;
-  font-weight:normal;
-  line-height:1;
-  -webkit-font-smoothing:antialiased;
-  -moz-osx-font-smoothing:grayscale
-}
-.glyphicon-plus:before {
-  content:"\2b"
-}
-.glyphicon-minus:before {
-  content:"\2212"
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
 }
-.glyphicon-th-large:before {
-  content:"\e010"
-}
-.glyphicon-trash:before {
-  content:"\e020"
-}
-.glyphicon-lock:before {
-  content:"\e033"
-}
-.glyphicon-flag:before {
-  content:"\e034"
-}
-.glyphicon-play:before {
-  content:"\e072"
+
+code,
+textarea {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 }
-.glyphicon-pause:before {
-  content:"\e073"
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+button:focus,
+textarea:focus {
+  outline: none;
 }
-.glyphicon-star-empty:before {
-  content:"\e007"
+
+/* Button */
+
+button {
+  display: inline-flex;
+  align-items: center;
+  text-align: center;
+  background-color: var(--background-chat);
+  color: var(--midground);
+  line-height: 1;
+  cursor: pointer;
+  padding: .5rem;
+  border-radius: .5rem;
+  border: 0;
+  transition: background-color ease-in-out .15s, color ease-in-out .15s;
 }
-.glyphicon-step-forward:before {
-  content:"\e077"
+
+button:not(:first-child) {
+  margin-left: .5rem;
 }
-.glyphicon-chevron-right::before {
-  content: "\e080";
+
+button:hover,
+button.active {
+  background-color: rgba(0, 0, 0, .5);
+  color: var(--foreground);
 }
-.glyphicon-share-alt:before {
-  content:"\e095"
+
+button:hover ion-icon,
+button.active ion-icon,
+button:focus,
+button:focus ion-icon {
+  color: var(--foreground);
 }
-.glyphicon-eye-open:before {
-  content:"\e105";
+
+button > * {
+  line-height: 1;
 }
-.glyphicon-eye-close:before {
-  content: "\e106";
+
+ion-icon {
+  pointer-events: none;
+  font-size: 1.2rem;
+  color: var(--midground);
+  transition: background-color ease-in-out .15s, color ease-in-out .15s;
 }
-.glyphicon-chevron-down:before {
-  content:"\e114"
+
+button span {
+  pointer-events: none;
 }
-.glyphicon-retweet:before {
-  content:"\e115"
+
+/* Input */
+
+label {
+  font-weight: bold;
 }
-.glyphicon-fullscreen:before {
-  content:"\e140"
+
+input,
+textarea {
+  color: var(--foreground);
 }
-.glyphicon-link:before {
-  content:"\e144"
+
+input[type=text],
+input[type="password"],
+textarea {
+  padding: .5rem;
+  border-radius: .5rem;
+  color: var(--foreground);
+  background-color: var(--background-video);
+  border: .125rem solid;
+  border-color:  var(--border);
+  box-sizing: border-box;
+  transition: border-color ease-in-out .15s;
 }
-.glyphicon-ok:before {
-  content:"\e013"
+
+input[type=text]:focus,
+input[type="password"]:focus,
+textarea:focus {
+  border-color: var(--accent);
 }
-.glyphicon-sort:before {
-  content:"\e150"
+
+/* States */
+
+button.success,
+button.success ion-icon,
+button.success:hover,
+button.success:focus,
+.server-msg-reconnect {
+  color: var(--success);
 }
-.glyphicon-sound-stereo:before {
-  content:"\e189"
+
+button.success-bg,
+button.success-bg ion-icon,
+button.success-bg:hover,
+button.success-bg:focus {
+  color: var(--foreground);
+  background-color: var(--success);
 }
-* {
-  -webkit-box-sizing:border-box;
-  -moz-box-sizing:border-box;
-  box-sizing:border-box
+
+button.danger,
+button.danger ion-icon,
+button.danger:hover,
+button.danger:focus,
+.server-msg-disconnect {
+  color: var(--error);
 }
-*:before, *:after {
-  -webkit-box-sizing:border-box;
-  -moz-box-sizing:border-box;
-  box-sizing:border-box
+
+button.danger-bg,
+button.danger-bg ion-icon,
+button.danger-bg:hover,
+button.danger-bg:focus {
+  color: var(--foreground);
+  background-color: var(--error);
 }
-html {
-  font-size:10px;
-  -webkit-tap-highlight-color:rgba(0, 0, 0, 0)
+
+.server-msg-disconnect, .server-msg-reconnect {
+  text-align: center;
 }
-body {
-  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size:14px;
-  line-height:1.42857143;
-  color:#c8c8c8;
-  background-color: #21252A;
+
+.collapse {
+  display :none;
+  visibility :hidden;
 }
-input, button, textarea {
-  font-family:inherit;
-  font-size:inherit;
-  line-height:inherit
+.collapse.in {
+  display: block;
+  visibility: visible;
 }
-a {
-  color:#ffffff;
-  text-decoration:none
+
+/* Info */
+
+.info {
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
 }
-a:hover, a:focus {
-  color:#ffffff;
-  text-decoration:underline
+
+.info header:first-child {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-right: .5rem;
 }
-a:focus {
-  outline:none;
-  /* outline:thin dotted;
-  outline:5px auto -webkit-focus-ring-color;
-  outline-offset:-2px */
+
+.info header > *:not(:last-child) {
+  margin-right: .5rem;
 }
-p {
-  margin:0 0 10px
+
+.info header button {
+  background-color: var(--background-video);
 }
-.text-muted {
-  color:rgba(120, 126, 132, 0.85)
+
+.controls {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
 }
-ul {
-  margin-top:0;
-  margin-bottom:10px
+
+.controls span {
+  display: flex;
+  align-items: center;
 }
-ul ul {
-  margin-bottom:0
+
+/*
+ * Start main
+ */
+
+/* Video */
+
+#video {
+  order: 2;
+  background: var(--background-video);
 }
-code {
-  font-family:Menlo, Monaco, Consolas, "Courier New", monospace
+
+/* Embed responsive */
+
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--background-video);
 }
-code {
-  padding:2px 4px;
-  font-size:90%;
-  color:#c7254e;
-  background-color:#f9f2f4;
-  border-radius:0px
+
+.embed-responsive video,
+.embed-responsive iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  border: 0;
 }
-.container {
-  margin-right:auto;
-  margin-left:auto;
-  padding-left:15px;
-  padding-right:15px
+
+.embed-responsive.embed-responsive-16by9 {
+  padding-bottom: 56.25%;
 }
-@media (min-width:768px) {
-    .container {
-      width:750px
-    }
+
+.embed-responsive.embed-responsive-4by3 {
+  padding-bottom: 75%
 }
-@media (min-width:992px) {
-  .container {
-    width:970px
-  }
+
+.embed-responsive:full-screen {
+  width: 100%;
 }
-@media (min-width:1200px) {
-  .container {
-    width:1170px
-  }
+
+/* Playlist */
+
+#playlist {
+  border-top: .063rem solid;
+  border-color: var(--border);
+  box-sizing: border-box;
 }
-.container-fluid {
-  margin-right:auto;
-  margin-left:auto;
-  padding-left:15px;
-  padding-right:15px
+
+/* Metadata */
+
+.metadata {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  color: var(--midground);
+  padding-top: 0;
 }
-.row {
-  margin-left:-15px;
-  margin-right:-15px
+
+.metadata > span {
+  display: flex;
+  align-items: center;
+  margin-right: 1rem;
 }
-.col-md-5, .col-lg-5, .col-md-7, .col-lg-7, .col-md-12, .col-lg-12 {
-  position:relative;
-  min-height:1px;
-  padding-left:15px;
-  padding-right:15px
+
+.metadata ion-icon {
+  margin-right: .25rem;
 }
-@media (min-width:992px) {
-  .col-md-5, .col-md-7, .col-md-12 {
-  float:left
-  }
-  .col-md-12 {
-  width:100%
-  }
-  .col-md-7 {
-  width:58.33333333%
-  }
-  .col-md-5 {
-  width:41.66666667%
-  }
+
+/* Add video */
+
+#addfromurl,
+#customembed {
+  padding: 1rem;
+  margin: 0 auto;
+  max-width: 32rem;
 }
-@media (min-width:1200px) {
-  .col-lg-5, .col-lg-7, .col-lg-12 {
-  float:left
-  }
-  .col-lg-12 {
-  width:100%
-  }
-  .col-lg-7 {
-  width:58.33333333%
-  }
-  .col-lg-5 {
-  width:41.66666667%
-  }
+
+#addfromurl > *,
+#customembed > * {
+  margin-bottom: 1rem;
 }
-label {
-  display:inline-block;
-  max-width:100%;
-  margin-bottom:5px;
-  font-weight:bold
+
+#addfromurl > div:first-child {
+  display: flex;
 }
-input[type="checkbox"] {
-  margin:4px 0 0;
-  margin-top:1px \9;
-  line-height:normal
+
+#mediaurl {
+  flex-grow: 2;
 }
-input[type="checkbox"]:focus {
-  outline:none;
-  /* outline:thin dotted;
-  outline:5px auto -webkit-focus-ring-color;
-  outline-offset:-2px */
+
+#customembed > input,
+#customembed > textarea {
+  display: block;
+  width: 100%;
 }
-.form-control {
-  display:block;
-  width:100%;
-  height:38px;
-  padding:8px 12px;
-  font-size:14px;
-  line-height:1.42857143;
-  color:#34373a;
-  background-color:rgba(20, 22, 26, 0.7);
-  background-image:none;
-  border:1px solid #000000;
-  border-radius:0px;
-  -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-  -o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s
+
+#addfromurl div,
+#customembed div {
+  text-align: right;
 }
-.form-control:focus {
-  border-color:#646464;
-  outline:0;
-  -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(100, 100, 100, 0.6);
-  box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(100, 100, 100, 0.6)
+
+/* Queue */
+
+.queue_temp {
+  background-color: var(--background-chat);
 }
-.form-control::-moz-placeholder {
-  color:rgba(120, 126, 132, 0.85);
-  opacity: 1;
+
+.queue_entry {
+  padding: 1rem;
+  border-bottom: .063rem solid;
+  border-color: var(--border);
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  transition: background-color ease-in-out .15s;
 }
-.form-control::-moz-placeholder,
-.form-control:-ms-input-placeholder,
-.form-control::-webkit-input-placeholder {
-  color:rgba(120, 126, 132, 0.85);
+
+.queue_entry:first-child {
+  border-top: .063rem solid;
+  border-color: var(--border);
+  box-sizing: border-box;
 }
-textarea.form-control {
-  height:auto
+
+.queue_entry a {
+  color: var(--foreground);
+  text-decoration: none;
 }
-.checkbox {
-  position:relative;
-  display:block;
-  margin-top:10px;
-  margin-bottom:10px
+
+.queue_entry.queue_active {
+  border-left: .25rem solid;
+  border-left-color: var(--accent);
 }
-.checkbox label {
-  min-height:20px;
-  padding-left:20px;
-  margin-bottom:0;
-  font-weight:normal;
-  cursor:pointer
+
+.queue_sortable li {
+  cursor: row-resize;
 }
-.checkbox input[type="checkbox"] {
-  position:absolute;
-  margin-left:-20px;
-  margin-top:4px \9
+
+/* Footer */
+
+footer#footer {
+  text-align: center;
+  padding: 1rem;
 }
-.btn {
-  display:inline-block;
-  margin-bottom:0;
-  font-weight:normal;
-  text-align:center;
-  vertical-align:middle;
-  -ms-touch-action:manipulation;
-  touch-action:manipulation;
-  cursor:pointer;
-  background-image:none;
-  white-space:nowrap;
-  padding:8px 12px;
-  font-size:14px;
-  line-height:1.42857143;
-  border-radius:0px;
-  -webkit-user-select:none;
-  -moz-user-select:none;
-  -ms-user-select:none;
-  user-select:none
+
+/*
+ * End main
+ */
+
+.gutter {
+  display: none;
 }
-.btn:focus, .btn:active:focus {
-  outline:none;
-  /* outline:thin dotted;
-  outline:5px auto -webkit-focus-ring-color;
-  outline-offset:-2px */
+
+/*
+ * Start chat
+ */
+
+#chat {
+  position: relative;
+  display: flex;
+  order: 0;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  height: calc( 100vh - 56.25vw );
+  box-sizing: border-box;
 }
-.btn:hover, .btn:focus {
-  color:#ffffff;
-  text-decoration:none
+
+#chat header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
-.btn:active {
-  outline:none;
-  /* outline:0;
-  background-image:none;
-  -webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125) */
+
+#chat > *:not(:first-child) {
+  margin-top: 1rem;
 }
-.btn-default:hover, .btn-default:focus, .btn-default:active {
-  color:#ffffff;
+
+#chat .controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
-.btn-default:active {
-  background-image:none
+
+/* Users online */
+
+#userlist {
+  overflow-y: auto;
+  background-color: var(--background-video);
+  border-right: 0;
+  padding: 1rem;
+  border-radius: 1rem;
+  height: 12rem;
+  scrollbar-color: var(--border) var(--background-video);
+  scrollbar-width: thin;
 }
-.btn-success {
-  color:#ffffff;
-  background-color:rgba(76, 174, 76, 0.75);
-  border-color:rgba(6, 14, 6, 0.75)
+
+#userlist::-webkit-scrollbar {
+  width: .5rem;
 }
-.btn-success:hover, .btn-success:focus, .btn-success:active {
-  color:#ffffff;
-  background-color:rgba(60, 139, 60, 0.75);
-  border-color:rgba(0, 0, 0, 0.75)
+#userlist::-webkit-scrollbar-track {
+  background: var(--background-video);
 }
-.btn-success:active {
-  background-image:none
+#userlist::-webkit-scrollbar-thumb {
+  background-color: var(--border);
 }
-.btn-sm {
-  padding:5px 10px;
-  font-size:12px;
-  line-height:1.5;
-  border-radius:0px
+
+.userlist_item {
+  display: flex;
+  align-items: center;
+  margin-bottom: .25em;
+  cursor: pointer;
 }
-.btn-xs {
-  padding:1px 5px;
-  font-size:12px;
-  line-height:1.5;
-  border-radius:0px
+
+.userlist_item > *:not(:last-child) {
+  margin-right: .25em;
 }
-.collapse {
-  display:none;
-  visibility:hidden
+
+.userlist_owner {
+  color: var(--accent);
+  font-weight: bold;
 }
-.collapse.in {
-  display: block;
-  visibility: visible;
+
+.userlist_guest {
+  color: var(--midground);
 }
-.caret {
-  pointer-events: none;
-  display:inline-block;
-  width:0;
-  height:0;
-  margin-left:2px;
-  vertical-align:middle;
-  border-top:4px solid;
-  border-right:4px solid transparent;
-  border-left:4px solid transparent
+
+/* Options */
+
+#optionsTitle {
+  display: inline-flex;
+  line-height: 1;
+  padding: .5rem;
+  align-items: center;
+  text-align: center;
+  margin-left: .5rem;
 }
-.dropdown {
-  position:relative
+
+#optionsPanel {
+  z-index: 1;
+  background-color: var(--background-chat);
+  overflow-y: scroll;
+  scrollbar-color: var(--border) var(--background-chat);
+  scrollbar-width: thin;
 }
-.dropdown-toggle:focus {
-  outline:0
+
+#optionsPanel::-webkit-scrollbar {
+  width: .5rem;
 }
-.dropdown-menu {
-  position:absolute;
-  top:100%;
-  left:0;
-  z-index:1000;
-  display:none;
-  float:left;
-  min-width:160px;
-  padding:5px 0;
-  margin:2px 0 0;
-  list-style:none;
-  font-size:14px;
-  text-align:left;
-  background-color:rgba(20, 22, 26, 0.96);
-  border:1px solid #34373a;
-  border:1px solid #000000;
-  border-radius:0px;
-  -webkit-box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);
-  box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);
-  -webkit-background-clip:padding-box;
-  background-clip:padding-box
+#optionsPanel::-webkit-scrollbar-track {
+  background: var(--background-chat);
 }
-.dropdown-menu>li>a {
-  display:block;
-  padding:3px 20px;
-  clear:both;
-  font-weight:normal;
-  line-height:1.42857143;
-  color:#c8c8c8;
-  white-space:nowrap
+#optionsPanel::-webkit-scrollbar-thumb {
+  background-color: var(--border);
 }
-.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
-  text-decoration:none;
-  color:#ffffff;
-  background-color:rgba(0, 2, 4, 0.4)
+
+#optionsPanel div {
+  margin-bottom: .5rem;
+  box-sizing: border-box;
 }
-.btn-group {
-  position:relative;
-  display:inline-block;
-  vertical-align:middle
+
+#optionsPanel div:not(:first-child) {
+  border-top: .063rem solid;
+  border-color: var(--border);
+  padding-top: 1rem;
 }
-.btn-group>.btn {
-  position:relative;
-  float:left
+
+#optionsPanel li button {
+  padding: 1rem 0;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  border-radius: 0;
+  text-align: left;
 }
-.btn-group>.btn:hover, .btn-group>.btn:focus, .btn-group>.btn:active {
-  z-index:2
+
+#optionsPanel li button:hover {
+  background-color: var(--background-chat);
 }
-/* .btn-group .btn+.btn {
-  margin-left:-1px
-} */
-.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-border-radius:0
+
+/* Message buffer */
+#messagebuffer {
+  flex-grow: 2;
+  flex-shrink: 8;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  width: 100%;
+  height: 100%;
+  scrollbar-color: var(--border) var(--background-chat);
+  scrollbar-width: thin;
 }
-.btn-group>.btn:first-child {
-  margin-left:0
+
+#messagebuffer::-webkit-scrollbar {
+  width: .5rem;
 }
-.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
-border-bottom-right-radius:0;
-border-top-right-radius:0
+#messagebuffer::-webkit-scrollbar-track {
+  background: var(--background-chat);
 }
-.btn-group>.btn:last-child:not(:first-child) {
-border-bottom-left-radius:0;
-border-top-left-radius:0
+#messagebuffer::-webkit-scrollbar-thumb {
+  background-color: var(--border);
 }
-.btn-group>.btn>.glyphicon {
-  pointer-events: none;
+
+#messagebuffer > * {
+  margin-bottom: 1em;
 }
-.input-group {
-  position:relative;
-  display:table;
-  border-collapse:separate
+
+.head {
+  display: flex;
+  align-items: center;
 }
-.input-group .form-control {
-  position:relative;
-  z-index:2;
-  float:left;
-  width:100%;
-  margin-bottom:0
+
+.username {
+  display: block;
 }
-.input-group-addon, .input-group-btn, .input-group .form-control {
-  display:table-cell
+
+.timestamp {
+  margin-left: .5em;
+  line-height: 1;
+  font-size: .8em;
+  font-style: normal;
+  color: var(--midground);
 }
-.input-group-btn:not(:first-child):not(:last-child), .input-group .form-control:not(:first-child):not(:last-child) {
-border-radius:0
+
+#messagebuffer .text {
+  color: var(--midground);
 }
-.input-group-addon, .input-group-btn {
-  width:1%;
-  white-space:nowrap;
-  vertical-align:middle
+
+.server-whisper {
+  font-style: italic;
 }
-.input-group-addon {
-  padding:8px 12px;
-  font-size:14px;
-  font-weight:normal;
-  line-height:1;
-  color:#34373a;
-  text-align:center;
-  background-color:rgba(70, 76, 82, 0.4);
+
+/* Chat input */
+
+#chatbox {
+  padding-top: 1rem;
+  border-top: .063rem solid;
+  border-color: var(--border);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
 }
-.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn {
-border-bottom-right-radius:0;
-border-top-right-radius:0
+
+#chatbox > *:not(:first-child) {
+  margin-left: .5rem;
 }
-.input-group-addon:first-child {
-  border-right:0
+
+#chatline {
+  flex-grow: 2;
+  width: 2rem;
 }
-.input-group .form-control:last-child, .input-group-btn:last-child>.btn {
-border-bottom-left-radius:0;
-border-top-left-radius:0
+
+/* Emotes */
+
+#smileswrap {
+  display: none;
+  background: rgba(0,0,0,0.7);
+  width: 100%;
+  height: 12rem;
+  padding: 1rem;
+  border-radius: 1rem;
+  overflow-y: scroll;
+  text-align: center;
+  grid-template-columns: repeat( auto-fit, minmax( 4rem, 1fr ) );
+  grid-gap: .5rem;
+  gap: .5rem;
+  box-sizing: border-box;
+  scrollbar-color: var(--border) var(--background-video);
+  scrollbar-width: thin;
 }
-.input-group-btn {
-  position:relative;
-  font-size:0;
-  white-space:nowrap
+
+#smileswrap::-webkit-scrollbar {
+  width: .5rem;
 }
-.input-group-btn>.btn {
-  position:relative
+#smileswrap::-webkit-scrollbar-track {
+  background: var(--background-video);
 }
-.input-group-btn>.btn:hover, .input-group-btn>.btn:focus, .input-group-btn>.btn:active {
-  z-index:2
+#smileswrap::-webkit-scrollbar-thumb {
+  background-color: var(--border);
 }
-.input-group-btn:first-child>.btn {
-  margin-right:-1px
+
+.smile-preview {
+  height: 4rem;
+  width: 4rem;
+  object-fit: scale-down;
+  cursor: pointer;
 }
-.input-group-btn:last-child>.btn {
-  margin-left:-1px
+
+.channel-emote {
+  max-width: 10rem;
+  max-height: 10rem;
 }
-.nav {
-  margin-bottom:0;
-  padding-left:0;
-  list-style:none
+
+.chat-img {
+  max-width: 12.5rem;
+  max-height: 12.5rem;
 }
-.nav>li {
-  position:relative;
-  display:block
+
+#guestlogin, #guestpassword {
+  display: flex;
+  flex-direction: column;
+  padding-top: 1rem;
+  border-top: .063rem solid;
+  border-color: var(--border);
+  box-sizing: border-box;
 }
-.nav>li>a {
-  position:relative;
-  display:block;
-  padding:10px 15px
+
+/* Guest login */
+
+#guestlogin label, #guestpassword label {
+  display: block;
+  margin-bottom: 1em;
 }
-.nav>li>a:hover, .nav>li>a:focus {
-  text-decoration:none;
-  background-color:rgba(7, 7, 9, 0.7)
+
+#guestpassword span > *:not(:first-child) {
+  margin-left: .5rem;
 }
-.navbar {
-  position: relative;
-  min-height: 0;
-  margin-bottom: 10px;
-  border: 1px solid transparent;
+
+#guestpass_icon:hover {
+  cursor: pointer;
 }
-.navbar li a {
-  padding: 5px 15px !important;
+
+/*
+ * End chat
+ */
+
+/*
+ * Simple scrollbar
+ */
+
+.simplebar-scrollbar::before {
+  background-color: var(--foreground);
 }
-@media (min-width:768px) {
-  .navbar {
-    border-radius:0px
+
+/*
+ * Media queries
+ */
+
+@media only screen and (min-width: 50rem) {
+  body {
+    display: grid;
+    grid-template-areas: "video gutter chat";
+    overflow-y: hidden;
+    font-size: 1rem;
+    width: 100%;
+    height: 100vh;
   }
-}
-@media (min-width:768px) {
-  .navbar-header {
-    float:left
+  body.swap {
+    grid-template-areas: "chat gutter video";
   }
-}
-.navbar-collapse {
-  overflow-x:visible;
-  padding-right:15px;
-  padding-left:15px;
-  border-top:1px solid transparent;
-  -webkit-overflow-scrolling:touch
-}
-@media (min-width:768px) {
-  .navbar-collapse {
-    width:auto;
-    border-top:0;
-    -webkit-box-shadow:none;
-    box-shadow:none
+  .info {
+    flex-wrap: nowrap;
   }
-  .navbar-collapse.collapse {
-    display:block !important;
-    visibility:visible !important;
-    height:auto !important;
-    padding-bottom:0;
-    overflow:visible !important
+  #video {
+    grid-area: video;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background: var(--background-video);
   }
-}
-.navbar-brand {
-  float:left;
-  padding: 5px;
-  font-size: 15px;
-  line-height: 20px;
-  height: 20px;
-}
-.navbar-brand:hover, .navbar-brand:focus {
-  text-decoration:none
-}
-.navbar-nav {
-  margin:7.5px -15px
-}
-.navbar-nav>li>a {
-  padding-top:10px;
-  padding-bottom:10px;
-  line-height:20px
-}
-.navbar-toggle {
-  display: block;
-  position: relative;
-  float: left;
-  padding: 0;
-  margin-left: 5px;
-  margin-top: 3px;
-  background-color: transparent;
-  background-image: none;
-  border: 1px solid transparent;
-  border-radius: 0px;
-}
-.navbar-inverse .navbar-toggle .icon-bar {
-  background-color: #c8c8c8;
-}
-.navbar-toggle .icon-bar {
-  display: block;
-  width: 22px;
-  height: 2px;
-  border-radius: 1px;
-  margin-top: 4px;
-}
-@media (min-width:768px) {
-  .navbar-nav {
-  float:left;
-  margin:0
+  #header {
+    font-size: 1.953rem;
+    display: inline-block;
+    flex: 1;
+    overflow-x: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
-  .navbar-nav>li {
-  float:left
+  .gutter {
+    grid-area: gutter;
+    display: block;
+    cursor: col-resize;
+    background-color: var(--border);
+    transition: background-color ease-in-out .15s;
   }
-  .navbar-nav>li>a {
-  padding-top:15px;
-  padding-bottom:15px
+  .gutter:hover {
+    background-color: var(--accent);
   }
-  .navbar-toggle {
-    display: none;
+  #chat {
+    grid-area: chat;
+    height: 100vh;
   }
 }
-.navbar-nav>li>.dropdown-menu {
-  margin-top:0;
-  border-top-right-radius:0;
-  border-top-left-radius:0
-}
-.navbar-inverse {
-  background-color:rgba(20, 22, 26, 0.7);
-  border-color:rgba(0, 0, 0, 0.7)
-}
-.navbar-inverse .navbar-brand {
-  color:#c8c8c8
-}
-.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
-  color:#ffffff;
-  background-color:none
-}
-.navbar-inverse .navbar-nav>li>a {
-  color:#c8c8c8
-}
-.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
-  color:#ffffff;
-  background-color:rgba(14, 16, 19, 0.7)
-}
-.navbar-inverse {
-  border-color:rgba(2, 2, 3, 0.7)
-}
-.navbar-inverse, .navbar-inverse {
-  background-color:rgba(7, 7, 9, 0.7)
-}
-.navbar-inverse .navbar-collapse {
-  border-color:rgba(4, 5, 6, 0.7)
-}
-.label {
-  display:inline;
-  padding:.2em .6em .3em;
-  font-size:75%;
-  font-weight:bold;
-  line-height:1;
-  color:#ffffff;
-  text-align:center;
-  white-space:nowrap;
-  vertical-align:baseline;
-  border-radius:.25em
-}
-.label-default {
-  background-color:#1e1e1e;
-}
-.label-success {
-  background-color: #377339;
-}
 
-.embed-responsive {
-  position:relative;
-  display:block;
-  height:0;
-  padding:0;
-  overflow:hidden
-}
-.embed-responsive video,
-.embed-responsive iframe {
-  position:absolute;
-  top:0;
-  left:0;
-  bottom:0;
-  height:100%;
-  width:100%;
-  border:0
-}
-.embed-responsive.embed-responsive-16by9 {
-  padding-bottom:56.25%;
-  background-color: rgb(26, 29, 32);
-}
-.embed-responsive.embed-responsive-4by3 {
-  padding-bottom:75%
-}
-video {
-  background-color: #000;
-}
-.well {
-  min-height:20px;
-  padding:19px;
-  margin-bottom:20px;
-  background-color:rgba(30, 30, 30, 0.5) !important;
-  border:1px solid rgba(0, 0, 0, 0.5) !important;
-  border-radius:0px;
-  -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
-  box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
-}
-.close {
-  float:right;
-  font-size:21px;
-  font-weight:bold;
-  line-height:1;
-  color:#000000;
-  text-shadow:0 1px 0 #ffffff;
-  opacity:0.2;
-  filter:alpha(opacity=20)
-}
-.close:hover, .close:focus {
-  color:#000000;
-  text-decoration:none;
-  cursor:pointer;
-  opacity:0.5;
-  filter:alpha(opacity=50)
-}
-button.close {
-  padding:0;
-  cursor:pointer;
-  background:transparent;
-  border:0;
-  -webkit-appearance:none
-}
-.container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after {
-  content:" ";
-  display:table
-}
-.container:after, .container-fluid:after, .row:after, .nav:after, .navbar:after, .navbar-header:after, .navbar-collapse:after {
-  clear:both
-}
-.pull-right {
-  float:right !important
-}
-.pull-left {
-  float:left !important
-}
 @-ms-viewport {
   width:device-width
 }
-.navbar {
-  border:1px solid rgba(0, 0, 0, 0.6);
-  text-shadow:1px 1px 1px rgba(0, 0, 0, 0.3)
-}
-.navbar-nav>li>a {
-  border-right:transparent;
-  border-left:transparent
-}
-.navbar-nav>li>a:hover {
-  border-left-color:transparent
-}
-.btn, .btn:hover {
-  border-top: 0;
-  background-color: #171A1D;
-  text-shadow:1px 1px 1px rgba(0, 0, 0, 0.3)
-}
-input, textarea {
-  color:#34373a
-}
-.input-group-addon {
-  text-shadow:1px 1px 1px rgba(0, 0, 0, 0.3);
-  color:#ffffff
-}
-html, body {
-  font-family:Play, 'Roboto', sans-serif !important;
-  font-weight: 300;
-}
-p {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 300;
-}
-.navbar-inverse {
-  background-color: #141414;
-  border-color: #1e1e1e;
-}
-/* set the fixed height of the footer here */
-footer {
-  background-color: rgba(0, 0, 0, 0.44) !important;
-  border: 0 solid #080808;
-}
-body {
-  color: #bbbbbb;
-}
-a {
-  color: #eeeeee;
-}
-a:hover, a:focus {
-  color: #0099CC;
-  text-decoration: underline;
-}
-/* theme */
-.btn, .form-control, .well {
-  border-radius: 1px;
-  box-shadow: 0 0 0;
-}
-.btn {
-  border: 0px;
-}
-.btn-default {
-  background-color: #1A1D20;
-}
-.btn.active {
-  background-color: #0C0D0E;
-}
-/* .btn-default, .well {
-  background-color: #272727;
-  color: #bbbbbb;
-} */
-/* .btn-default:focus {
-  background-color: rgb(39, 39, 39);
-  border-color: #0099CC;
-  border-top: 3px solid #0099CC;
-  color: #ffffff;
- transition: all .3s ease-in-out;
-} */
-/* .btn-success {
-  background-color: #669900;
-} */
-.btn-success {
-  background-color: #377339;
-}
-.btn-success:hover {
-  background-color: #438D45;
-}
-.btn-danger {
-  background-color: #D33C3C;
-}
-.btn-danger:hover {
-  background-color: #FF4444;
-}
-.btn-success, .btn-danger {
-  margin-left: 0px !important;
-}
-.navbar-nav > li > .dropdown-menu {
-  border-radius: 0;
-}
-.dropdown-menu {
-  background-color: #080808;
-  color: #bbbbbb;
-}
-.dropdown-menu > li > a {
-  color: #bbbbbb;
-}
-.dropdown-menu > li > a:hover {
-  color: #bbbbbb;
-  background-color: #1e1e1e;
-}
-.nav > li > a:hover, .nav > li > a:focus {
-  text-decoration: none;
-  background-color: #171717;
-  color: #cccccc;
-}
-#chatheader, #currenttitle, #userlist, #messagebuffer, .queue_entry {
-  border-radius: 0px;
-  border-color: #1e1e1e;
-  background-color: #171A1D;
-}
-#plmeta, #userlist, #messagebuffer, .queue_entry {
-  background-color: #1A1D20;
-}
-#userlist {
-  text-shadow: 1px 1px 1px #000000;
-  border-left: 0;
-  border-right: 1px solid #171A1D;
-}
-.form-control, input.form-control[type="text"], textarea.form-control {
-  background-color: rgba(0, 0, 0, 0.7) !important;
-  color: #c8c8c8;
-  border-color: #1e1e1e;
-}
-.form-control:focus {
-  border-color: #5E9ACA !important;
-  box-shadow: none;
-}
-#mainpage {
-  padding-top: 0;
-}
-#wrap {
-  min-height: 100%;
-  height: auto;
-  margin: 0 auto -60px;
-  padding: 0 0 60px;
-}
-#messagebuffer, #userlist, #queue {
-  overflow-y: auto !important;
-}
-#currenttitle {
-  text-align: center;
-}
-.queue_entry {
-  background-color: #16191C;
-  border-color: #242628;
-}
-.queue_entry.queue_active {
-  background-color: #1f2224;
-  border-color: #2c2e31;
-}
diff --git a/res/css/mobile-view.css b/res/css/mobile-view.css
deleted file mode 100644
index 1b4842e..0000000
--- a/res/css/mobile-view.css
+++ /dev/null
@@ -1,83 +0,0 @@
-/* Mobile view */
-
-.mobile-view .navbar {
-	display: none;
-}
-.mobile-view #mainpage {
-	padding-top: 0;
-}
-.mobile-view #messagebuffer :nth-child(n+5):last-child {
-	margin-bottom: 0;
-}
-.mobile-view #chatwrap {
-	padding-left: 0;
-	padding-right: 0;
-	margin-bottom: 0;
-}
-.mobile-view #videowrap {
-	padding-left: 0;
-	padding-right: 0;
-	background-color: #171A1D;
-	margin-bottom: 10px;
-}
-.mobile-view #currenttitle {
-	display: inline-block;
-	width: 100%;
-}
-.mobile-view #plcontrol {
-	display: none;
-}
-/* .mobile-view #leftcontrols {
-	text-align: center;
-} */
-.mobile-view #rightcontrols {
-	text-align: center;
-}
-.mobile-view #videocontrols {
-	float: none !important;
-	width: 100%;
-}
-.mobile-view #extendplayer {
-	display: none;
-}
-.mobile-view #videocontrols .btn {
-	width: 20%;
-}
-/* .mobile-view .btn-xs {
-	padding: 4px 5px;
-} */
-.mobile-view #rightpane-inner {
-	padding-left: 0;
-	padding-right: 0;
-}
-.mobile-view #wrap {
-	padding-bottom: 0;
-	margin-bottom: 0;
-}
-
-@media (max-width:767px)  {
-	.navbar {
-		border-color: #272b30 !important;
-		background: rgb(39, 43, 48) !important;
-		margin-bottom: 0;
-	}
-	#leftcontrols {
-		margin-bottom: 10px;
-	}
-	#extendplayer {
-		display: none;
-	}
-	#chatwrap {
-		width: 100% !important;
-		margin-bottom: 0;
-	}
-	#videowrap {
-		width: 100% !important;
-	}
-	.gutter.gutter-horizontal {
-		display: none;
-	}
-	#currenttitle {
-		display: none;
-	}
-}
diff --git a/res/css/sticky-footer-navbar.css b/res/css/sticky-footer-navbar.css
deleted file mode 100644
index 249aa42..0000000
--- a/res/css/sticky-footer-navbar.css
+++ /dev/null
@@ -1,26 +0,0 @@
-html,
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-}
-
-/* Wrapper for page content to push down footer */
-#wrap {
-  min-height: 100%;
-  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 */
-#footer {
-  min-height: 60px;
-  background-color: #f5f5f5;
-}
-
-.container .credit {
-    margin: 20px 0;
-    text-align: center;
-}
diff --git a/res/img/stripe-diagonal.png b/res/img/stripe-diagonal.png
deleted file mode 100644
index 2014e9c..0000000
--- a/res/img/stripe-diagonal.png
+++ /dev/null
diff --git a/res/img/vertical.png b/res/img/vertical.png
deleted file mode 100644
index 0ac8fa1..0000000
--- a/res/img/vertical.png
+++ /dev/null
diff --git a/res/index.html b/res/index.html
index 36d79be..61944a7 100644
--- a/res/index.html
+++ b/res/index.html
@@ -1,178 +1,167 @@
 <!DOCTYPE html>
-<html><head>
+<html>
+<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SyncTube</title>
   <link rel="icon" type="image/png" href="img/favicon.png" />
-  <link href="css/sticky-footer-navbar.css" rel="stylesheet">
-  <link href="css/cytube.css" rel="stylesheet">
-  <link href="css/mobile-view.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css" />
   <link id="usertheme" href="css/des.css" rel="stylesheet">
   <link id="customcss" href="css/custom.css" rel="stylesheet">
+  <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule="" src="https://cdn.jsdelivr.net/npm/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>
 </head>
-  <body class="fluid">
-    <div id="wrap">
-      <nav class="navbar navbar-inverse" role="navigation">
-        <div class="navbar-header">
-          <a class="navbar-brand" href="#">SyncTube</a>
-          <button id="toggleMenu" class="navbar-toggle collapsed" type="button" aria-expanded="false">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
+<body style="grid-template-columns: 70fr 4px 30fr;">
+  <!-- Video -->
+  <main id="video" data-simplebar>
+    <!-- Player -->
+    <section id="player" >
+      <div id="ytapiplayer" class="embed-responsive embed-responsive-16by9"></div>
+      <!-- Video info -->
+      <div class="info">
+        <header id="header">
+          <h2 id="currenttitle">${nothingPlaying}</h2>
+        </header>
+        <!-- Video controls -->
+        <span class="controls">
+          <button id="togglesynch" title="${toggleVideoSync}"><ion-icon name="play"></ion-icon></button>
+          <button id="mediarefresh" title="${refreshPlayer}"><ion-icon name="refresh"></ion-icon></button>
+          <button id="fullscreenbtn" title="${fullscreenPlayer}"><ion-icon name="expand"></ion-icon></button>
+          <button id="voteskip" title="${voteForSkip}"><ion-icon name="play-skip-forward"></ion-icon></button>
+        </span>
+      </div>
+    </section>
+    <!-- Playlist -->
+    <section id="playlist">
+      <!-- Playlist info -->
+      <div class="info">
+        <header>
+          <h3>${playlist}</h3>
+          <button id="lockplaylist" title="${playlistOpen}"><ion-icon name="lock-open"></ion-icon></button>
+          <button id="getplaylist" title="${retrievePlaylistLinks}"><ion-icon name="link"></ion-icon></button>
+        </header>
+        <!-- Playlist controls -->
+        <span class="controls">
+          <button class="collapsed" id="showmediaurl" title="${addVideoFromUrl}" data-toggle="collapse" data-target="#addfromurl" aria-expanded="false"><ion-icon name="add"></ion-icon></button>
+          <button class="collapsed" id="showcustomembed" title="${embedCustomFrame}" data-toggle="collapse" data-target="#customembed" aria-expanded="false"><ion-icon name="code"></ion-icon></button>
+          <button id="shuffleplaylist" title="${shufflePlaylist}"><ion-icon name="shuffle"></ion-icon></button>
+          <button id="clearplaylist" title="${clearPlaylist}"><ion-icon name="close"></ion-icon></button>
+        </span>
+      </div>
+      <!-- Playlist metadata -->
+      <div class="metadata">
+        <span><ion-icon name="logo-youtube"></ion-icon><span id="plcount">0 ${videos}</span></span>
+        <span><ion-icon name="time"></ion-icon><span id="pllength">00:00</span></span>
+      </div>
+      <!-- Add video -->
+      <div class="collapse" id="addfromurl" aria-expanded="false">
+        <div>
+          <button id="insert_template" title="${addTemplateUrl}">&gt;</button>
+          <input id="mediaurl" type="text" placeholder="${addVideoFromUrl}">
         </div>
-        <div class="collapse navbar-collapse" id="nav-collapsible">
-          <ul class="nav navbar-nav">
-            <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">${account}<b class="caret"></b></a>
-              <ul class="dropdown-menu">
-                <!-- <li><a href="#">${exportSettings}</a></li>
-                <li><a href="#">${importSettings}</a></li>
-                <li class="divider"></li> -->
-                <li><a id="exitBtn" href="#">${login}</a></li>
-              </ul>
-            </li>
-            <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">${settings}<b class="caret"></b></a>
-              <ul class="dropdown-menu">
-                <li><a href="#" id="synchThresholdBtn">${synchThreshold}</a></li>
-                <li><a href="#" id="hotkeysBtn">${hotkeys}</a></li>
-              </ul>
-            </li>
-            <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">${layout}<b class="caret"></b></a>
-              <ul class="dropdown-menu">
-                <li><a href="#" id="swapLayoutBtn">${swapLayout}</a></li>
-                <li><a href="#" id="removeVideoBtn">${removeVideo}</a></li>
-              </ul>
-            </li>
-          </ul>
+        <div>
+          <button id="queue_next">${queueNext}</button>
+          <button id="queue_end">${queueLast}</button>
+          <label>
+            <input class="add-temp" type="checkbox" checked="checked">${addAsTemporary}
+          </label>
         </div>
-      </nav>
-      <section id="mainpage">
-        <div class="container-fluid">
-          <div class="row" id="motdrow">
-            <div class="col-lg-12 col-md-12">
-              <div class="well" id="motdwrap" style="display: none;">
-                <button class="close pull-right" id="togglemotd" type="button"><span class="glyphicon glyphicon-minus"></span></button>
-                <div id="motd"></div>
-                <div class="clear"></div>
-              </div>
-            </div>
-          </div>
-          <div class="row" id="announcements"></div>
-          <div class="row" id="main">
-            <div class="split split-horizontal" id="chatwrap" style="width: calc(40% - 5px);">
-              <div id="chatheader"><i class="glyphicon glyphicon-chevron-down pull-left pointer" id="userlisttoggle" title="${toggleUserList}"></i>
-                <span class="pointer" id="usercount">${connection}...</span>
-                <span class="label label-default pull-right pointer" id="leader_btn" title="${leaderDesc}">${leader}</span>
-              </div>
-              <div id="userlist" style="height: 389px;"></div>
-              <div class="linewrap" id="messagebuffer" style="height: 389px;"></div>
-              <input class="form-control" id="chatline">
-              <div class="input-group" id="guestlogin" style="display: none;"><span class="input-group-addon">${enterAsGuest}</span>
-                <input class="form-control" id="guestname" placeholder="${yourName}">
-              </div>
-              <div class="input-group" id="guestpassword" style="display: none;"><span class="input-group-addon">${enterUserPassword}</span>
-                <input class="form-control" id="guestpass" placeholder="${yourPassword}">
-                <div id="guestpass_icon" class="glyphicon glyphicon-eye-open"></div>
-              </div>
-            </div>
-            <!-- <div class="gutter gutter-horizontal" style="width: 10px;"></div> -->
-            <div class="split split-horizontal" id="videowrap" style="width: calc(60% - 5px);">
-              <p id="currenttitle">${nothingPlaying}</p>
-              <div id="ytapiplayer" class="embed-responsive embed-responsive-16by9"></div>
-            </div>
-            <div class="clear"></div>
-          </div>
-          <div class="row" id="controlsrow">
-            <div class="col-lg-5 col-md-5" id="leftcontrols">
-              <button id="mv_btn" class="btn btn-sm btn-default">${mobileViewBtn}</button>
-            <button class="btn btn-sm btn-default" id="smilesbtn">${emotes}</button>
-            <button class="btn btn-sm btn-default" id="clearchatbtn" style="display: none;">${clearChat}</button></div>
-            <div class="col-lg-7 col-md-7" id="rightcontrols">
-              <div class="btn-group" id="plcontrol">
-                <button class="btn btn-sm btn-default collapsed" id="showmediaurl" title="${addVideoFromUrl}" data-toggle="collapse" data-target="#addfromurl" aria-expanded="false"><span class="glyphicon glyphicon-plus"></span></button>
-                <button class="btn btn-sm btn-default collapsed" id="showcustomembed" title="${embedCustomFrame}" data-toggle="collapse" data-target="#customembed" aria-expanded="false"><span class="glyphicon glyphicon-th-large"></span></button>
-                <button class="btn btn-sm btn-default" id="clearplaylist" title="${clearPlaylist}"><span class="glyphicon glyphicon-trash"></span></button>
-                <button class="btn btn-sm btn-default" id="shuffleplaylist" title="${shufflePlaylist}"><span class="glyphicon glyphicon-sort"></span></button>
-                <button class="btn btn-sm btn-success" id="lockplaylist" title="${playlistOpen}"><span class="glyphicon glyphicon-ok"></span></button>
-              </div>
-              <div class="btn-group pull-right" id="videocontrols">
-                <button class="btn btn-sm btn-default" id="extendplayer" title="${expandPlayer}"><span class="glyphicon glyphicon-sound-stereo"></span></button>
-                <button class="btn btn-sm btn-default" id="togglesynch" title="${toggleVideoSync}"><span class="glyphicon glyphicon-play"></span></button>
-                <button class="btn btn-sm btn-default" id="mediarefresh" title="${refreshPlayer}"><span class="glyphicon glyphicon-retweet"></span></button>
-                <button class="btn btn-sm btn-default" id="fullscreenbtn" title="${fullscreenPlayer}"><span class="glyphicon glyphicon-fullscreen"></span></button>
-                <button class="btn btn-sm btn-default" id="getplaylist" title="${retrievePlaylistLinks}"><span class="glyphicon glyphicon-link"></span></button>
-                <button class="btn btn-sm btn-default" id="voteskip" title="${voteForSkip}"><span class="glyphicon glyphicon-step-forward"></span></button>
-              </div>
-            </div>
-          </div>
-          <div class="row" id="playlistrow">
-            <div class="col-lg-5 col-md-5" id="leftpane">
-              <div class="row" id="leftpane-inner">
-                <div class="col-lg-12 col-md-12" id="smileswrap"></div>
-              </div>
-            </div>
-            <div class="col-lg-7 col-md-7" id="rightpane">
-              <div class="row" id="rightpane-inner">
-                <div class="plcontrol-collapse col-lg-12 col-md-12 collapse" id="addfromurl" aria-expanded="false">
-                  <div class="vertical-spacer"></div>
-                  <div class="input-group"><span class="input-group-btn">
-                      <button class="btn btn-default" id="insert_template" title="${addTemplateUrl}">&gt;</button></span>
-                    <input class="form-control" id="mediaurl" placeholder="${mediaUrl}"><span class="input-group-btn">
-                      <button class="btn btn-default" id="queue_next">${queueNext}</button></span><span class="input-group-btn">
-                      <button class="btn btn-default" id="queue_end">${queueLast}</button></span>
-                  </div>
-                  <div class="checkbox">
-                    <label>
-                      <input class="add-temp" type="checkbox" checked="checked">${addAsTemporary}
-                    </label>
-                  </div>
-                </div>
-                <div class="plcontrol-collapse col-lg-12 col-md-12 collapse" id="customembed" aria-expanded="false" style="height: 209px;">
-                  <div class="vertical-spacer"></div>
-                  <div class="input-group">
-                    <input class="form-control" id="customembed-title" placeholder="${optionalTitle}"><span class="input-group-btn">
-                      <button class="btn btn-default" id="ce_queue_next">${queueNext}</button></span><span class="input-group-btn">
-                      <button class="btn btn-default" id="ce_queue_end">${queueLast}</button></span>
-                  </div>
-                  <div class="checkbox">
-                    <label>
-                      <input class="add-temp" type="checkbox" checked="checked">${addAsTemporary}
-                    </label>
-                  </div>${pasteEmbedCodeAndClick} "${queueNext}" ${or} "${queueLast}".
-                  ${acceptableEmbedCodesAre} <code>&lt;iframe&gt;</code> ${or} <code>&lt;object&gt;</code>.
-                  <strong>${customEmbedsCannotBeSynchronized}.</strong>
-                  <textarea class="input-block-level form-control" id="customembed-content" rows="3"></textarea>
-                </div>
-                <div class="col-lg-12 col-md-12" id="queuefail">
-                  <div class="vertical-spacer"></div>
-                </div>
-                <div class="col-lg-12 col-md-12">
-                  <ul class="videolist ui-sortable queue_sortable" id="queue"></ul>
-                  <div id="plmeta"><span id="plcount">0 ${videos}</span><span id="pllength">00:00</span></div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="row" id="resizewrap">
-            <div class="col-lg-5 col-md-5"></div>
-            <div class="col-lg-7 col-md-7" id="videowidth"></div>
-          </div>
-          <div id="sitefooter"></div>
+      </div>
+      <div class="collapse" id="customembed" aria-expanded="false">
+        <input id="customembed-title" type="text" placeholder="${optionalTitle}">
+        <textarea id="customembed-content" rows="5" placeholder="${pasteEmbedCodeAndClick} '${queueNext}' ${or} '${queueLast}'. &#10;${acceptableEmbedCodesAre} &lt;iframe&gt; ${or} &lt;object&gt;. &#10;${customEmbedsCannotBeSynchronized}."></textarea>
+        <div>
+          <button id="ce_queue_next">${queueNext}</button>
+          <button id="ce_queue_end">${queueLast}</button>
+          <label>
+            <input class="add-temp" type="checkbox" checked="checked">${addAsTemporary}
+          </label>
         </div>
-      </section>
-    </div>
-    <div id="pmbar"></div>
-    <footer id="footer">
-      <div class="container">
-        <p class="text-muted credit">Based on CyTube by Calvin Montgomery ·
-          <a href="https://github.com/RblSb/SyncTube" target="_blank" rel="noreferrer noopener">GitHub</a>
-        </p>
       </div>
+      <!-- Queue -->
+      <div id="queuefail">
+      </div>
+      <div>
+        <ul class="ui-sortable queue_sortable" id="queue"></ul>
+      </div>
+    </section>
+    <!-- Footer -->
+    <footer id="footer">
+      <p>Powered by <a href="https://github.com/RblSb/SyncTube" target="_blank" rel="noreferrer noopener">SyncTube</a></p>
     </footer>
+  </main>
+
+  <!-- Gutter -->
+  <div class="gutter"></div>
+
+  <!-- Chat -->
+  <aside id="chat">
+    <!-- Chat controls -->
+    <div class="controls">
+      <div id="optionsTitle" style="display: none;">${settings}</div>
+      <button id="userlisttoggle" title="${toggleUserList}">
+        <ion-icon  name="chevron-forward"></ion-icon>
+        <span id="usercount">${connection}...</span>
+      </button>
+      <span>
+        <button id="leader_btn" title="${leaderDesc}">${leader}</button>
+        <!-- Settings button -->
+        <button id="showoptions" class="collapsed" data-toggle="collapse" data-target="#optionsPanel" aria-expanded="false"><ion-icon name="settings-sharp"></ion-icon></button>
+      </span>
+    </div>
+    <!-- User list -->
+    <div id="userlist"></div>
+    <!-- Settings list -->
+    <ul id="optionsPanel" class="collapse" aria-expanded="false">
+      <!-- <div><h3>${settings}</h3></div> -->
+      <div>
+        <h4>${account}</h4>
+        <li><button id="exitBtn">${login}</button></li>
+      </div>
+      <div>
+        <h4>${general}</h4>
+        <li><button id="hotkeysBtn"><span>${hotkeys}</span></button></li>
+        <li><button id="swapLayoutBtn" title="${swapLayout}"><span>${swapLayout}</span></button></li>
+      </div>
+      <div>
+        <h4>${video}</h4>
+        <li><button id="synchThresholdBtn"><span>${synchThreshold}</span></button></li>
+        <li><button id="removeVideoBtn"><span>${removeVideo}</span></button></li>
+      </div>
+      <div>
+        <h4>${chat}</h4>
+        <li><button id="clearchatbtn" style="display: none;"><span>${clearChat}</span></button></li>
+      </div>
+      <!-- <li><a href="#">${exportSettings}</a></li>
+      <li><a href="#">${importSettings}</a></li>
+      <li class="divider"></li> -->
+    </ul>
+    <!-- Messages -->
+    <div id="messagebuffer" data-simplebar></div>
+    <!-- Message input -->
+    <div id="chatbox">
+      <input id="chatline" type="text" placeholder="${chatlinePlaceholder}">
+      <button id="smilesbtn" title="${emotes}"><ion-icon name="happy"></ion-icon></button>
+    </div>
+    <div id="smileswrap" data-simplebar></div>
+    <!-- Guest login -->
+    <div id="guestlogin" style="display: none;">
+      <label>${enterAsGuest}</label>
+      <input id="guestname" type="text" placeholder="${yourName}">
+    </div>
+    <div id="guestpassword" style="display: none;">
+      <label>${enterUserPassword}</label>
+      <span>
+        <input id="guestpass" type="text" placeholder="${yourPassword}">
+        <button id="guestpass_icon"><ion-icon name="eye"></ion-icon></button>
+      </span>
+    </div>
+  </aside>
 
-    <script src="js/split.min.js"></script>
-    <script src="client.js"></script>
-    <script src="js/custom.js"></script>
-  </body>
+  <script src="https://cdn.jsdelivr.net/npm/split-grid@1.0.9/dist/split-grid.js"></script>
+  <script src="client.js"></script>
+  <script src="js/custom.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/simplebar@5.2.0/dist/simplebar.min.js"></script>
+</body>
 </html>
diff --git a/res/js/split.min.js b/res/js/split.min.js
deleted file mode 100644
index 6739874..0000000
--- a/res/js/split.min.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/*! Split.js - v1.5.11 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Split=t()}(this,function(){"use strict";var L=window,T=L.document,N="addEventListener",R="removeEventListener",q="getBoundingClientRect",H="horizontal",I=function(){return!1},W=L.attachEvent&&!L[N],i=["","-webkit-","-moz-","-o-"].filter(function(e){var t=T.createElement("div");return t.style.cssText="width:"+e+"calc(9px)",!!t.style.length}).shift()+"calc",s=function(e){return"string"==typeof e||e instanceof String},X=function(e){if(s(e)){var t=T.querySelector(e);if(!t)throw new Error("Selector "+e+" did not match a DOM element");return t}return e},Y=function(e,t,n){var r=e[t];return void 0!==r?r:n},G=function(e,t,n,r){if(t){if("end"===r)return 0;if("center"===r)return e/2}else if(n){if("start"===r)return 0;if("center"===r)return e/2}return e},J=function(e,t){var n=T.createElement("div");return n.className="gutter gutter-"+t,n},K=function(e,t,n){var r={};return s(t)?r[e]=t:r[e]=W?t+"%":i+"("+t+"% - "+n+"px)",r},P=function(e,t){var n;return(n={})[e]=t+"px",n};return function(e,i){void 0===i&&(i={});var u,t,s,o,r,a,l=e;Array.from&&(l=Array.from(l));var c=X(l[0]).parentNode,n=getComputedStyle?getComputedStyle(c):null,f=n?n.flexDirection:null,m=Y(i,"sizes")||l.map(function(){return 100/l.length}),h=Y(i,"minSize",100),d=Array.isArray(h)?h:l.map(function(){return h}),g=Y(i,"expandToMin",!1),v=Y(i,"gutterSize",10),p=Y(i,"gutterAlign","center"),y=Y(i,"snapOffset",30),z=Y(i,"dragInterval",1),S=Y(i,"direction",H),b=Y(i,"cursor",S===H?"col-resize":"row-resize"),_=Y(i,"gutter",J),E=Y(i,"elementStyle",K),w=Y(i,"gutterStyle",P);function k(t,e,n,r){var i=E(u,e,n,r);Object.keys(i).forEach(function(e){t.style[e]=i[e]})}function x(){return a.map(function(e){return e.size})}function M(e){return"touches"in e?e.touches[0][t]:e[t]}function U(e){var t=a[this.a],n=a[this.b],r=t.size+n.size;t.size=e/this.size*r,n.size=r-e/this.size*r,k(t.element,t.size,this._b,t.i),k(n.element,n.size,this._c,n.i)}function O(){var e=a[this.a].element,t=a[this.b].element,n=e[q](),r=t[q]();this.size=n[u]+r[u]+this._b+this._c,this.start=n[s],this.end=n[o]}function C(s){var o=function(e){if(!getComputedStyle)return null;var t=getComputedStyle(e);if(!t)return null;var n=e[r];return 0===n?null:n-=S===H?parseFloat(t.paddingLeft)+parseFloat(t.paddingRight):parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}(c);if(null===o)return s;if(d.reduce(function(e,t){return e+t},0)>o)return s;var a=0,u=[],e=s.map(function(e,t){var n=o*e/100,r=G(v,0===t,t===s.length-1,p),i=d[t]+r;return n<i?(a+=i-n,u.push(0),i):(u.push(n-i),n)});return 0===a?s:e.map(function(e,t){var n=e;if(0<a&&0<u[t]-a){var r=Math.min(a,u[t]-a);a-=r,n=e-r}return n/o*100})}function D(e){if(!("button"in e&&0!==e.button)){var t=this,n=a[t.a].element,r=a[t.b].element;t.dragging||Y(i,"onDragStart",I)(x()),e.preventDefault(),t.dragging=!0,t.move=function(e){var t,n=a[this.a],r=a[this.b];this.dragging&&(t=M(e)-this.start+(this._b-this.dragOffset),1<z&&(t=Math.round(t/z)*z),t<=n.minSize+y+this._b?t=n.minSize+this._b:t>=this.size-(r.minSize+y+this._c)&&(t=this.size-(r.minSize+this._c)),U.call(this,t),Y(i,"onDrag",I)())}.bind(t),t.stop=function(){var e=this,t=a[e.a].element,n=a[e.b].element;e.dragging&&Y(i,"onDragEnd",I)(x()),e.dragging=!1,L[R]("mouseup",e.stop),L[R]("touchend",e.stop),L[R]("touchcancel",e.stop),L[R]("mousemove",e.move),L[R]("touchmove",e.move),e.stop=null,e.move=null,t[R]("selectstart",I),t[R]("dragstart",I),n[R]("selectstart",I),n[R]("dragstart",I),t.style.userSelect="",t.style.webkitUserSelect="",t.style.MozUserSelect="",t.style.pointerEvents="",n.style.userSelect="",n.style.webkitUserSelect="",n.style.MozUserSelect="",n.style.pointerEvents="",e.gutter.style.cursor="",e.parent.style.cursor="",T.body.style.cursor=""}.bind(t),L[N]("mouseup",t.stop),L[N]("touchend",t.stop),L[N]("touchcancel",t.stop),L[N]("mousemove",t.move),L[N]("touchmove",t.move),n[N]("selectstart",I),n[N]("dragstart",I),r[N]("selectstart",I),r[N]("dragstart",I),n.style.userSelect="none",n.style.webkitUserSelect="none",n.style.MozUserSelect="none",n.style.pointerEvents="none",r.style.userSelect="none",r.style.webkitUserSelect="none",r.style.MozUserSelect="none",r.style.pointerEvents="none",t.gutter.style.cursor=b,t.parent.style.cursor=b,T.body.style.cursor=b,O.call(t),t.dragOffset=M(e)-t.end}}S===H?(u="width",t="clientX",s="left",o="right",r="clientWidth"):"vertical"===S&&(u="height",t="clientY",s="top",o="bottom",r="clientHeight"),m=C(m);var A=[];function j(e){var t=e.i===A.length,n=t?A[e.i-1]:A[e.i];O.call(n);var r=t?n.size-e.minSize-n._c:e.minSize+n._b;U.call(n,r)}function F(e){var s=C(e);s.forEach(function(e,t){if(0<t){var n=A[t-1],r=a[n.a],i=a[n.b];r.size=s[t-1],i.size=e,k(r.element,r.size,n._b,r.i),k(i.element,i.size,n._c,i.i)}})}function B(n,r){A.forEach(function(t){if(!0!==r?t.parent.removeChild(t.gutter):(t.gutter[R]("mousedown",t._a),t.gutter[R]("touchstart",t._a)),!0!==n){var e=E(u,t.a.size,t._b);Object.keys(e).forEach(function(e){a[t.a].element.style[e]="",a[t.b].element.style[e]=""})}})}return(a=l.map(function(e,t){var n,r,i,s={element:X(e),size:m[t],minSize:d[t],i:t};if(0<t&&((n={a:t-1,b:t,dragging:!1,direction:S,parent:c})._b=G(v,t-1==0,!1,p),n._c=G(v,!1,t===l.length-1,p),"row-reverse"===f||"column-reverse"===f)){var o=n.a;n.a=n.b,n.b=o}if(!W&&0<t){var a=_(t,S,s.element);r=a,i=w(u,v,t),Object.keys(i).forEach(function(e){r.style[e]=i[e]}),n._a=D.bind(n),a[N]("mousedown",n._a),a[N]("touchstart",n._a),c.insertBefore(a,s.element),n.gutter=a}return k(s.element,s.size,G(v,0===t,t===l.length-1,p),t),0<t&&A.push(n),s})).forEach(function(e){var t=e.element[q]()[u];t<e.minSize&&(g?j(e):e.minSize=t)}),W?{setSizes:F,destroy:B}:{setSizes:F,getSizes:x,collapse:function(e){j(a[e])},destroy:B,parent:c,pairs:A}}});
-//# sourceMappingURL=split.min.js.map
diff --git a/res/langs/en.json b/res/langs/en.json
index 36cb672..26dbf24 100644
--- a/res/langs/en.json
+++ b/res/langs/en.json
@@ -27,7 +27,9 @@
 	"exit": "Exit",
 	"settings": "Settings",
 	"synchThreshold": "Synch Threshold",
+	"general": "General",
 	"hotkeys": "Hotkeys",
+	"video": "Video",
 	"channel": "Channel",
 	"layout": "Layout",
 	"swapLayout": "Swap Layout",
@@ -43,11 +45,14 @@
 	"enterUserPassword": "Enter User Password",
 	"yourPassword": "Your Password",
 	"emotes": "Emotes",
+	"chat": "Chat",
 	"clearChat": "Clear Chat",
+	"chatlinePlaceholder": "Send a message...",
 	"addVideoFromUrl": "Add video from URL",
 	"embedCustomFrame": "Embed a custom frame",
 	"clearPlaylist": "Clear playlist",
 	"shufflePlaylist": "Shuffle playlist",
+	"playlist": "Playlist",
 	"playlistOpen": "Playlist open",
 	"playlistLocked": "Playlist locked",
 	"expandPlayer": "Expand player",
diff --git a/res/langs/ru.json b/res/langs/ru.json
index 808eb56..70d9917 100644
--- a/res/langs/ru.json
+++ b/res/langs/ru.json
@@ -27,7 +27,9 @@
 	"exit": "Выход",
 	"settings": "Настройки",
 	"synchThreshold": "Частота синхронизации",
+	"general": "Основное",
 	"hotkeys": "Горячие клавиши",
+	"video": "Видео",
 	"channel": "Канал",
 	"layout": "Разметка",
 	"swapLayout": "Сменить разметку",
@@ -43,11 +45,14 @@
 	"enterUserPassword": "Введите пароль пользователя",
 	"yourPassword": "Ваш пароль",
 	"emotes": "Смайлы",
-	"clearChat": "Очистить",
+	"chat": "Чат",
+	"clearChat": "Очистить чат",
+	"chatlinePlaceholder": "Введите сообщение...",
 	"addVideoFromUrl": "Добавить видео по ссылке",
 	"embedCustomFrame": "Добавить iframe",
 	"clearPlaylist": "Очистить плейлист",
 	"shufflePlaylist": "Перемешать плейлист",
+	"playlist": "Плейлист",
 	"playlistOpen": "Плейлист открыт",
 	"playlistLocked": "Плейлист заблокирован",
 	"expandPlayer": "Расширить плеер",