Synch threshold setting

6 files changed, 84 insertions, 28 deletions

diff --git a/res/client.js b/res/client.js
index 6fcc740..37f4207 100644
--- a/res/client.js
+++ b/res/client.js
@@ -594,8 +594,20 @@ client_Buttons.initNavBar = function(main) {
 		client_Buttons.hideMenus();
 		return;
 	};
+	var synchThresholdBtn = window.document.querySelector("#synchThresholdBtn");
+	synchThresholdBtn.onclick = function(e3) {
+		var secs = main.synchThreshold + 1;
+		if(secs > 5) {
+			secs = 1;
+		}
+		main.setSynchThreshold(secs);
+		client_Buttons.updateSynchThresholdBtn(main);
+		synchThresholdBtn.blur();
+		return;
+	};
+	synchThresholdBtn.innerText += ": " + main.synchThreshold + "s";
 	var swapLayoutBtn = window.document.querySelector("#swapLayoutBtn");
-	swapLayoutBtn.onclick = function(e3) {
+	swapLayoutBtn.onclick = function(e4) {
 		var p = window.document.querySelector("#main");
 		p.insertBefore(p.children[2],p.children[0]);
 		p.insertBefore(p.children[2],p.children[1]);
@@ -609,7 +621,7 @@ client_Buttons.initNavBar = function(main) {
 		return;
 	};
 	var removeBtn = window.document.querySelector("#removeVideoBtn");
-	removeBtn.onclick = function(e4) {
+	removeBtn.onclick = function(e5) {
 		if(main.toggleVideoElement()) {
 			removeBtn.innerText = Lang.get("removeVideo");
 		} else {
@@ -625,6 +637,10 @@ client_Buttons.hideMenus = function() {
 	var _g = 0;
 	while(_g < menus.length) menus[_g++].style.display = "";
 };
+client_Buttons.updateSynchThresholdBtn = function(main) {
+	var tmp = "" + Lang.get("synchThreshold") + ": " + main.synchThreshold;
+	window.document.querySelector("#synchThresholdBtn").innerText = tmp + "s";
+};
 client_Buttons.initChatInput = function(main) {
 	var guestName = window.document.querySelector("#guestname");
 	guestName.onkeydown = function(e) {
@@ -691,6 +707,7 @@ var client_Main = function(host,port) {
 	this.globalIp = "";
 	this.pageTitle = window.document.title;
 	this.clients = [];
+	this.synchThreshold = 2;
 	this.isSyncActive = true;
 	var _gthis = this;
 	this.player = new client_Player(this);
@@ -708,16 +725,7 @@ var client_Main = function(host,port) {
 		port = "80";
 	}
 	this.initListeners();
-	this.onTimeGet.run = function() {
-		if(!_gthis.isSyncActive) {
-			return;
-		}
-		if(_gthis.player.isListEmpty()) {
-			return;
-		}
-		_gthis.send({ type : "GetTime"});
-		return;
-	};
+	this.onTimeGet.run = $bind(this,this.requestTime);
 	window.document.onvisibilitychange = function() {
 		if(!window.document.hidden && _gthis.onBlinkTab != null) {
 			window.document.title = _gthis.getPageTitle();
@@ -736,7 +744,16 @@ client_Main.main = function() {
 	new client_Main();
 };
 client_Main.prototype = {
-	openWebSocket: function(host,port) {
+	requestTime: function() {
+		if(!this.isSyncActive) {
+			return;
+		}
+		if(this.player.isListEmpty()) {
+			return;
+		}
+		this.send({ type : "GetTime"});
+	}
+	,openWebSocket: function(host,port) {
 		var _gthis = this;
 		this.ws = new WebSocket("ws://" + host + ":" + port);
 		this.ws.onmessage = $bind(this,this.onMessage);
@@ -869,7 +886,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 : 214, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]});
+		haxe_Log.trace("Event: " + data.type,{ fileName : "src/client/Main.hx", lineNumber : 217, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]});
 		switch(data.type) {
 		case "AddVideo":
 			this.player.addVideoItem(data.addVideo.item,data.addVideo.atEnd);
@@ -894,7 +911,7 @@ client_Main.prototype = {
 			var newTime = data.getTime.time;
 			var time = this.player.getTime();
 			if((this.personal.group & 1 << ClientGroup.Leader._hx_index) != 0) {
-				if(Math.abs(time - newTime) < 2) {
+				if(Math.abs(time - newTime) < this.synchThreshold) {
 					return;
 				}
 				this.player.setTime(time,false);
@@ -905,7 +922,7 @@ client_Main.prototype = {
 			} else {
 				this.player.pause();
 			}
-			if(Math.abs(time - newTime) < 2) {
+			if(Math.abs(time - newTime) < this.synchThreshold) {
 				return;
 			}
 			this.player.setTime(newTime);
@@ -969,7 +986,7 @@ client_Main.prototype = {
 		case "SetTime":
 			var newTime1 = data.setTime.time;
 			var time1 = this.player.getTime();
-			if(Math.abs(time1 - newTime1) < 2) {
+			if(Math.abs(time1 - newTime1) < this.synchThreshold) {
 				return;
 			}
 			this.player.setTime(newTime1);
@@ -1271,6 +1288,12 @@ client_Main.prototype = {
 			icon.classList.remove("glyphicon-ok");
 		}
 	}
+	,setSynchThreshold: function(s) {
+		this.synchThreshold = s;
+		this.onTimeGet.stop();
+		this.onTimeGet = new haxe_Timer(s * 1000);
+		this.onTimeGet.run = $bind(this,this.requestTime);
+	}
 	,escapeRegExp: function(regex) {
 		var _this_r = new RegExp("([.*+?^${}()|[\\]\\\\])","g".split("u").join(""));
 		return regex.replace(_this_r,"\\$1");
diff --git a/res/index.html b/res/index.html
index c3bcde5..773dca6 100644
--- a/res/index.html
+++ b/res/index.html
@@ -36,8 +36,11 @@
                 <li><a id="exitBtn" href="#">${login}</a></li>
               </ul>
             </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">${settings}<b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#" id="synchThresholdBtn">${synchThreshold}</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>
diff --git a/res/langs/en.json b/res/langs/en.json
index dfd018d..e8845ec 100644
--- a/res/langs/en.json
+++ b/res/langs/en.json
@@ -21,6 +21,7 @@
 	"login": "Login",
 	"exit": "Exit",
 	"settings": "Settings",
+	"synchThreshold": "Synch Threshold",
 	"channel": "Channel",
 	"layout": "Layout",
 	"swapLayout": "Swap Layout",
diff --git a/res/langs/ru.json b/res/langs/ru.json
index 30b6e7a..c768be4 100644
--- a/res/langs/ru.json
+++ b/res/langs/ru.json
@@ -21,6 +21,7 @@
 	"login": "Войти",
 	"exit": "Выход",
 	"settings": "Настройки",
+	"synchThreshold": "Частота синхронизации",
 	"channel": "Канал",
 	"layout": "Разметка",
 	"swapLayout": "Сменить разметку",
diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index f88aa97..d566d68 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -198,6 +198,18 @@ class Buttons {
 			exitBtn.blur();
 			hideMenus();
 		}
+		final synchThresholdBtn = ge("#synchThresholdBtn");
+		synchThresholdBtn.onclick = e -> {
+			var secs = main.synchThreshold + 1;
+			if (secs > 5) secs = 1;
+			main.setSynchThreshold(secs);
+			updateSynchThresholdBtn(main);
+			synchThresholdBtn.blur();
+		}
+		final text = synchThresholdBtn.innerText;
+		final secs = main.synchThreshold;
+		synchThresholdBtn.innerText += ': ${secs}s';
+
 		final swapLayoutBtn = ge("#swapLayoutBtn");
 		swapLayoutBtn.onclick = e -> {
 			final p = ge("#main");
@@ -227,6 +239,12 @@ class Buttons {
 		for (menu in menus) menu.style.display = "";
 	}
 
+	static function updateSynchThresholdBtn(main:Main):Void {
+		final text = Lang.get("synchThreshold");
+		final secs = main.synchThreshold;
+		ge("#synchThresholdBtn").innerText = '$text: ${secs}s';
+	}
+
 	static function initChatInput(main:Main):Void {
 		final guestName:InputElement = cast ge("#guestname");
 		guestName.onkeydown = e -> {
diff --git a/src/client/Main.hx b/src/client/Main.hx
index c29604e..5631594 100644
--- a/src/client/Main.hx
+++ b/src/client/Main.hx
@@ -22,6 +22,7 @@ using ClientTools;
 class Main {
 
 	public var isSyncActive = true;
+	public var synchThreshold(default, null) = 2;
 	final clients:Array<Client> = [];
 	var pageTitle = document.title;
 	final host:String;
@@ -32,7 +33,7 @@ class Main {
 	var isConnected = false;
 	var ws:WebSocket;
 	final player:Player;
-	final onTimeGet = new Timer(2000);
+	var onTimeGet = new Timer(2000);
 	var onBlinkTab:Null<Timer>;
 
 	static function main():Void new Main();
@@ -46,11 +47,7 @@ class Main {
 		if (port == "") port = "80";
 
 		initListeners();
-		onTimeGet.run = () -> {
-			if (!isSyncActive) return;
-			if (player.isListEmpty()) return;
-			send({type: GetTime});
-		}
+		onTimeGet.run = requestTime;
 		document.onvisibilitychange = () -> {
 			if (!document.hidden && onBlinkTab != null) {
 				document.title = getPageTitle();
@@ -63,6 +60,12 @@ class Main {
 		});
 	}
 
+	function requestTime():Void {
+		if (!isSyncActive) return;
+		if (player.isListEmpty()) return;
+		send({type: GetTime});
+	}
+
 	function openWebSocket(host:String, port:String):Void {
 		ws = new WebSocket('ws://$host:$port');
 		ws.onmessage = onMessage;
@@ -273,19 +276,19 @@ class Main {
 				if (isLeader()) {
 					// if video is loading on leader
 					// move other clients back in time
-					if (Math.abs(time - newTime) < 2) return;
+					if (Math.abs(time - newTime) < synchThreshold) return;
 					player.setTime(time, false);
 					return;
 				}
 				if (!data.getTime.paused) player.play();
 				else player.pause();
-				if (Math.abs(time - newTime) < 2) return;
+				if (Math.abs(time - newTime) < synchThreshold) return;
 				player.setTime(newTime);
 
 			case SetTime:
 				final newTime = data.setTime.time;
 				final time = player.getTime();
-				if (Math.abs(time - newTime) < 2) return;
+				if (Math.abs(time - newTime) < synchThreshold) return;
 				player.setTime(newTime);
 
 			case Rewind:
@@ -589,6 +592,13 @@ class Main {
 		}
 	}
 
+	public function setSynchThreshold(s:Int):Void {
+		synchThreshold = s;
+		onTimeGet.stop();
+		onTimeGet = new Timer(s * 1000);
+		onTimeGet.run = requestTime;
+	}
+
 	function escapeRegExp(regex:String):String {
 		return ~/([.*+?^${}()|[\]\\])/g.replace(regex, "\\$1");
 	}