NavBar buttons

10 files changed, 225 insertions, 29 deletions

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 50b97fe..047e16b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,5 +5,6 @@
 	"search.exclude": {
 		"build": true,
 		"res/temp": true,
+		"res/client.js": true
 	}
 }
diff --git a/build/server.js b/build/server.js
index 72d8eab..5f13d07 100644
--- a/build/server.js
+++ b/build/server.js
@@ -897,14 +897,14 @@ server_Main.prototype = {
 			var url = data.removeVideo.url;
 			if(this.videoList[0].url == url) {
 				this.videoTimer.stop();
+				if(this.videoList.length > 0) {
+					this.restartWaitTimer();
+				}
 			}
 			HxOverrides.remove(this.videoList,Lambda.find(this.videoList,function(item1) {
 				return item1.url == url;
 			}));
 			this.broadcast(data);
-			if(this.videoList.length > 0) {
-				this.restartWaitTimer();
-			}
 			break;
 		case "Rewind":
 			if(this.videoList.length == 0) {
diff --git a/res/client.js b/res/client.js
index 9f46639..95f0fd5 100644
--- a/res/client.js
+++ b/res/client.js
@@ -294,6 +294,7 @@ var client_Buttons = function() { };
 client_Buttons.__name__ = true;
 client_Buttons.init = function(main) {
 	client_Buttons.initChatInput(main);
+	client_Buttons.initNavBar(main);
 	var smilesBtn = window.document.querySelector("#smilesbtn");
 	smilesBtn.onclick = function(e) {
 		smilesBtn.classList.toggle("active");
@@ -304,7 +305,6 @@ client_Buttons.init = function(main) {
 			return smilesWrap.style.display = "none";
 		}
 	};
-	window.document.querySelector("#clearchatbtn").style.display = "inline-block";
 	window.document.querySelector("#clearchatbtn").onclick = function(e1) {
 		if((main.personal.group & 4) != 0) {
 			main.send({ type : "ClearChat"});
@@ -330,9 +330,6 @@ client_Buttons.init = function(main) {
 		main.send({ type : "SetLeader", setLeader : { clientName : name}});
 		return;
 	};
-	client_Buttons.split = new Split(["#chatwrap","#videowrap"],{ sizes : [40,60], onDragEnd : function() {
-		return window.dispatchEvent(new Event("resize"));
-	}, minSize : 185, snapOffset : 0});
 	var userlistToggle = window.document.querySelector("#userlisttoggle");
 	userlistToggle.onclick = function(e3) {
 		var style = window.document.querySelector("#userlist").style;
@@ -398,6 +395,24 @@ client_Buttons.init = function(main) {
 		return window.document.querySelector("#addfromurl").classList.toggle("collapse");
 	};
 	window.onresize = client_Buttons.onVideoResize;
+	client_Buttons.initSplit();
+};
+client_Buttons.initSplit = function(swapped) {
+	if(swapped == null) {
+		swapped = false;
+	}
+	if(client_Buttons.split != null) {
+		client_Buttons.split.destroy();
+	}
+	var divs = ["#chatwrap","#videowrap"];
+	var sizes = [40,60];
+	if(swapped) {
+		divs.reverse();
+		sizes.reverse();
+	}
+	client_Buttons.split = new Split(divs,{ sizes : sizes, onDragEnd : function() {
+		return window.dispatchEvent(new Event("resize"));
+	}, minSize : 185, snapOffset : 0});
 	window.dispatchEvent(new Event("resize"));
 };
 client_Buttons.onVideoResize = function() {
@@ -405,6 +420,78 @@ client_Buttons.onVideoResize = function() {
 	window.document.querySelector("#messagebuffer").style.height = "" + height + "px";
 	window.document.querySelector("#userlist").style.height = "" + height + "px";
 };
+client_Buttons.initNavBar = function(main) {
+	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(e) {
+				klass1[0].classList.toggle("focus");
+				client_Buttons.hideMenus();
+				var menu = klass1[0].parentElement.querySelector(".dropdown-menu");
+				if(menu.style.display == "") {
+					return menu.style.display = "block";
+				} else {
+					return menu.style.display = "";
+				}
+			};
+		})(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(e1) {
+				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(e2) {
+		main.send({ type : "Logout"});
+		exitBtn.blur();
+		client_Buttons.hideMenus();
+		return;
+	};
+	var swapLayoutBtn = window.document.querySelector("#swapLayoutBtn");
+	swapLayoutBtn.onclick = function(e3) {
+		var p = window.document.querySelector("#main");
+		p.insertBefore(p.children.item(2),p.children.item(0));
+		p.insertBefore(p.children.item(2),p.children.item(1));
+		var p1 = window.document.querySelector("#controlsrow");
+		p1.insertBefore(p1.children.item(1),p1.children.item(0));
+		var p2 = window.document.querySelector("#playlistrow");
+		p2.insertBefore(p2.children.item(1),p2.children.item(0));
+		client_Buttons.initSplit(window.document.querySelector("#main").firstElementChild == window.document.querySelector("#videowrap"));
+		swapLayoutBtn.blur();
+		client_Buttons.hideMenus();
+		return;
+	};
+	var removeBtn = window.document.querySelector("#removeVideoBtn");
+	removeBtn.onclick = function(e4) {
+		if(main.toggleVideoElement()) {
+			removeBtn.innerText = Lang.get("removeVideo");
+		} else {
+			removeBtn.innerText = Lang.get("addVideo");
+		}
+		removeBtn.blur();
+		client_Buttons.hideMenus();
+		return;
+	};
+};
+client_Buttons.hideMenus = function() {
+	var menus = window.document.querySelectorAll(".dropdown-menu");
+	var _g = 0;
+	while(_g < menus.length) menus[_g++].style.display = "";
+};
 client_Buttons.initChatInput = function(main) {
 	var guestName = window.document.querySelector("#guestname");
 	guestName.onkeydown = function(e) {
@@ -604,6 +691,14 @@ client_Main.prototype = {
 			return;
 		});
 	}
+	,toggleVideoElement: function() {
+		if(this.player.hasVideo()) {
+			this.player.removeVideo();
+		} else if(!this.player.isListEmpty()) {
+			this.player.setVideo(this.player.getItems()[0]);
+		}
+		return this.player.hasVideo();
+	}
 	,refreshPlayer: function() {
 		this.player.refresh();
 	}
@@ -644,7 +739,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 : 195, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]});
+		haxe_Log.trace("Event: " + data.type,{ fileName : "src/client/Main.hx", lineNumber : 203, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]});
 		switch(data.type) {
 		case "AddVideo":
 			if(this.player.isListEmpty()) {
@@ -833,10 +928,14 @@ client_Main.prototype = {
 	,showGuestLoginPanel: function() {
 		window.document.querySelector("#guestlogin").style.display = "block";
 		window.document.querySelector("#chatline").style.display = "none";
+		window.dispatchEvent(new Event("resize"));
 	}
 	,hideGuestLoginPanel: function() {
 		window.document.querySelector("#guestlogin").style.display = "none";
 		window.document.querySelector("#chatline").style.display = "block";
+		if((this.personal.group & 4) != 0) {
+			window.document.querySelector("#clearchatbtn").style.display = "inline-block";
+		}
 		window.dispatchEvent(new Event("resize"));
 	}
 	,updateClients: function(newClients) {
@@ -1086,12 +1185,15 @@ client_Player.prototype = {
 		HxOverrides.remove(this.items,Lambda.find(this.items,function(item) {
 			return item.url == url;
 		}));
+		this.updateCounters();
+		if(this.video == null) {
+			return;
+		}
 		if(this.video.src == url) {
 			if(this.items.length > 0) {
 				this.setVideo(this.items[0]);
 			}
 		}
-		this.updateCounters();
 	}
 	,updateCounters: function() {
 		var tmp = "" + this.items.length + " ";
@@ -1157,6 +1259,9 @@ client_Player.prototype = {
 	,isListEmpty: function() {
 		return this.items.length == 0;
 	}
+	,hasVideo: function() {
+		return this.video != null;
+	}
 	,pause: function() {
 		if(this.video == null) {
 			return;
diff --git a/res/index.html b/res/index.html
index 697123e..73067d8 100644
--- a/res/index.html
+++ b/res/index.html
@@ -30,18 +30,18 @@
           <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="#">${exportSettings}</a></li>
                 <li><a href="#">${importSettings}</a></li>
-                <li class="divider"></li>
-                <li><a href="#">${exit}</a></li>
+                <li class="divider"></li> -->
+                <li><a id="exitBtn" href="#">${exit}</a></li>
               </ul>
             </li>
-            <li><a href="javascript:void(0)" onclick="javascript:showUserOptions()">${settings}</a></li>
-            <li><a id="showchansettings" href="javascript:void(0)" onclick="javascript:showChannelSettings()">${channel}</a></li>
+            <li><a href="javascript:void(0)">${settings}</a></li>
+            <!-- <li><a id="showchansettings" href="javascript:void(0)">${channel}</a></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="#" onclick="javascript:chatOnly()">${chatOnly}</a></li>
-                <li><a href="#" onclick="javascript:removeVideo(event)">${removeVideo}</a></li>
+                <li><a href="#" id="swapLayoutBtn">${swapLayout}</a></li>
+                <li><a href="#" id="removeVideoBtn">${removeVideo}</a></li>
               </ul>
             </li>
           </ul>
diff --git a/res/langs/en.json b/res/langs/en.json
index ea1ca74..bdc4cc1 100644
--- a/res/langs/en.json
+++ b/res/langs/en.json
@@ -21,8 +21,10 @@
 	"settings": "Settings",
 	"channel": "Channel",
 	"layout": "Layout",
+	"swapLayout": "Swap Layout",
 	"chatOnly": "Chat Only",
 	"removeVideo": "Remove Video",
+	"addVideo": "Add Video",
 	"toggleUserList": "Show/Hide Userlist",
 	"mobileViewBtn": "Mobile View",
 	"leader": "Leader",
diff --git a/res/langs/ru.json b/res/langs/ru.json
index eb2c1b3..74b05f2 100644
--- a/res/langs/ru.json
+++ b/res/langs/ru.json
@@ -21,8 +21,10 @@
 	"settings": "Настройки",
 	"channel": "Канал",
 	"layout": "Разметка",
+	"swapLayout": "Сменить разметку",
 	"chatOnly": "Только чат",
-	"removeVideo": "Убрать видео",
+	"removeVideo": "Удалить видео",
+	"addVideo": "Добавить видео",
 	"toggleUserList": "Показать/Скрыть список юзеров",
 	"mobileViewBtn": "Моб. вид",
 	"leader": "Лидер",
diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index f72fbb3..69928a5 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -6,6 +6,7 @@ import js.html.InputElement;
 import js.html.Element;
 import client.Main.ge;
 import js.Browser.window;
+import js.Browser.document;
 import js.html.Event;
 
 class Buttons {
@@ -16,6 +17,7 @@ class Buttons {
 
 	public static function init(main:Main):Void {
 		initChatInput(main);
+		initNavBar(main);
 
 		final smilesBtn = ge("#smilesbtn");
 		smilesBtn.onclick = e -> {
@@ -26,7 +28,6 @@ class Buttons {
 			else smilesWrap.style.display = "none";
 		}
 
-		ge("#clearchatbtn").style.display = "inline-block";
 		ge("#clearchatbtn").onclick = e -> {
 			if (main.isAdmin()) main.send({type: ClearChat});
 		}
@@ -49,15 +50,6 @@ class Buttons {
 			});
 		}
 
-		split = new Split(["#chatwrap", "#videowrap"], {
-			sizes: [40, 60],
-			onDragEnd: () -> {
-				window.dispatchEvent(new Event("resize"));
-			},
-			minSize: 185,
-			snapOffset: 0
-		});
-
 		final userlistToggle = ge("#userlisttoggle");
 		userlistToggle.onclick = e -> {
 			final style = ge("#userlist").style;
@@ -126,6 +118,25 @@ class Buttons {
 		}
 
 		window.onresize = onVideoResize;
+		initSplit();
+	}
+
+	static function initSplit(swapped = false):Void {
+		if (split != null) split.destroy();
+		final divs = ["#chatwrap", "#videowrap"];
+		final sizes = [40, 60];
+		if (swapped) {
+			divs.reverse();
+			sizes.reverse();
+		}
+		split = new Split(divs, {
+			sizes: sizes,
+			onDragEnd: () -> {
+				window.dispatchEvent(new Event("resize"));
+			},
+			minSize: 185,
+			snapOffset: 0
+		});
 		window.dispatchEvent(new Event("resize"));
 	}
 
@@ -136,6 +147,63 @@ class Buttons {
 		ge("#userlist").style.height = '${height}px';
 	}
 
+	static function initNavBar(main:Main):Void {
+		final classes:Array<Element> = cast document.querySelectorAll(".dropdown-toggle");
+		for (klass in classes) {
+			klass.onclick = e -> {
+				klass.classList.toggle("focus");
+				hideMenus();
+				final menu = klass.parentElement.querySelector(".dropdown-menu");
+				if (menu.style.display == "") menu.style.display = "block";
+				else menu.style.display = "";
+			}
+			klass.onmouseover = klass.onclick;
+		}
+		final classes:Array<Element> = cast document.querySelectorAll(".dropdown");
+		for (klass in classes) {
+			klass.onmouseleave = e -> {
+				final toggle:Element = cast klass.querySelector(".dropdown-toggle");
+				toggle.classList.remove("focus");
+				toggle.blur();
+				final menu = klass.querySelector(".dropdown-menu");
+				menu.style.display = "";
+			}
+		}
+
+		final exitBtn = ge("#exitBtn");
+		exitBtn.onclick = e -> {
+			main.send({type: Logout});
+			exitBtn.blur();
+			hideMenus();
+		}
+		final swapLayoutBtn = ge("#swapLayoutBtn");
+		swapLayoutBtn.onclick = e -> {
+			final p = ge("#main");
+			p.insertBefore(p.children.item(2), p.children.item(0));
+			p.insertBefore(p.children.item(2), p.children.item(1));
+			final p = ge("#controlsrow");
+			p.insertBefore(p.children.item(1), p.children.item(0));
+			final p = ge("#playlistrow");
+			p.insertBefore(p.children.item(1), p.children.item(0));
+			final swapped = ge("#main").firstElementChild == ge("#videowrap");
+			initSplit(swapped);
+			swapLayoutBtn.blur();
+			hideMenus();
+		}
+		final removeBtn = ge("#removeVideoBtn");
+		removeBtn.onclick = e -> {
+			final has = main.toggleVideoElement();
+			if (has) removeBtn.innerText = Lang.get("removeVideo");
+			else removeBtn.innerText = Lang.get("addVideo");
+			removeBtn.blur();
+			hideMenus();
+		}
+	}
+
+	static function hideMenus():Void {
+		final menus:Array<Element> = cast document.querySelectorAll(".dropdown-menu");
+		for (menu in menus) menu.style.display = "";
+	}
 
 	static function initChatInput(main:Main):Void {
 		final guestName:InputElement = cast ge("#guestname");
diff --git a/src/client/Main.hx b/src/client/Main.hx
index a95a9a2..70cc270 100644
--- a/src/client/Main.hx
+++ b/src/client/Main.hx
@@ -156,6 +156,14 @@ class Main {
 		});
 	}
 
+	public function toggleVideoElement():Bool {
+		if (player.hasVideo()) player.removeVideo();
+		else if (!player.isListEmpty()) {
+			player.setVideo(player.getItems()[0]);
+		}
+		return player.hasVideo();
+	}
+
 	public function refreshPlayer():Void {
 		player.refresh();
 	}
@@ -358,12 +366,14 @@ class Main {
 	function showGuestLoginPanel():Void {
 		ge("#guestlogin").style.display = "block";
 		ge("#chatline").style.display = "none";
+		Browser.window.dispatchEvent(new Event("resize"));
 	}
 
 	function hideGuestLoginPanel():Void {
 		ge("#guestlogin").style.display = "none";
 		ge("#chatline").style.display = "block";
-		js.Browser.window.dispatchEvent(new Event("resize"));
+		if (isAdmin()) ge("#clearchatbtn").style.display = "inline-block";
+		Browser.window.dispatchEvent(new Event("resize"));
 	}
 
 	function updateClients(newClients:Array<ClientData>):Void {
diff --git a/src/client/Player.hx b/src/client/Player.hx
index ca3d78f..c9b10a4 100644
--- a/src/client/Player.hx
+++ b/src/client/Player.hx
@@ -123,11 +123,12 @@ class Player {
 		items.remove(
 			items.find(item -> item.url == url)
 		);
+		updateCounters();
 
+		if (video == null) return;
 		if (video.src == url) {
 			if (items.length > 0) setVideo(items[0]);
 		}
-		updateCounters();
 	}
 
 	function updateCounters():Void {
@@ -190,6 +191,10 @@ class Player {
 		return items.length == 0;
 	}
 
+	public function hasVideo():Bool {
+		return video != null;
+	}
+
 	public function pause():Void {
 		if (video == null) return;
 		video.pause();
diff --git a/src/client/Split.hx b/src/client/Split.hx
index 5d9d249..338b96f 100644
--- a/src/client/Split.hx
+++ b/src/client/Split.hx
@@ -3,5 +3,8 @@ package client;
 @:native("Split")
 extern class Split {
 	function new(divs:Array<String>, opts:Dynamic):Void;
+	function getSizes():Array<Int>;
 	function setSizes(sizes:Array<Int>):Void;
+	function collapse(index:Int):Void;
+	function destroy(?preserveStyles:Bool = false, ?preserveGutters:Bool = false):Void;
 }