Video sync toggler

9 files changed, 79 insertions, 10 deletions

diff --git a/build/server.js b/build/server.js
index 5a6037d..33b0f13 100644
--- a/build/server.js
+++ b/build/server.js
@@ -1373,6 +1373,7 @@ server_Main.prototype = {
 			this.sendClientList();
 			break;
 		case "UpdatePlaylist":
+			this.broadcast({ type : "UpdatePlaylist", updatePlaylist : { videoList : this.videoList}});
 			break;
 		case "VideoLoaded":
 			this.prepareVideoPlayback();
diff --git a/res/client.js b/res/client.js
index e4c084c..6fcc740 100644
--- a/res/client.js
+++ b/res/client.js
@@ -459,9 +459,23 @@ client_Buttons.init = function(main) {
 		extendPlayer.classList.toggle("active");
 		return window.dispatchEvent(new Event("resize"));
 	};
-	window.document.querySelector("#togglesynch").onclick = function(e5) {
-		if(!window.confirm(Lang.get("toggleSynchConfirm"))) {
-			return;
+	var toggleSynch = window.document.querySelector("#togglesynch");
+	toggleSynch.onclick = function(e5) {
+		var icon = toggleSynch.firstElementChild;
+		if(main.isSyncActive) {
+			if(!window.confirm(Lang.get("toggleSynchConfirm"))) {
+				return;
+			}
+			main.isSyncActive = false;
+			icon.style.color = "rgba(238, 72, 67, 0.75)";
+			icon.classList.add("glyphicon-pause");
+			icon.classList.remove("glyphicon-play");
+		} else {
+			main.isSyncActive = true;
+			icon.style.color = "";
+			icon.classList.add("glyphicon-play");
+			icon.classList.remove("glyphicon-pause");
+			main.send({ type : "UpdatePlaylist"});
 		}
 		return;
 	};
@@ -475,12 +489,12 @@ client_Buttons.init = function(main) {
 	var getPlaylist = window.document.querySelector("#getplaylist");
 	getPlaylist.onclick = function(e8) {
 		client_Utils.copyToClipboard(main.getPlaylistLinks().join(","));
-		var icon = getPlaylist.firstElementChild;
-		icon.classList.remove("glyphicon-link");
-		icon.classList.add("glyphicon-ok");
+		var icon1 = getPlaylist.firstElementChild;
+		icon1.classList.remove("glyphicon-link");
+		icon1.classList.add("glyphicon-ok");
 		return haxe_Timer.delay(function() {
-			icon.classList.add("glyphicon-link");
-			icon.classList.remove("glyphicon-ok");
+			icon1.classList.add("glyphicon-link");
+			icon1.classList.remove("glyphicon-ok");
 			return;
 		},2000);
 	};
@@ -677,6 +691,7 @@ var client_Main = function(host,port) {
 	this.globalIp = "";
 	this.pageTitle = window.document.title;
 	this.clients = [];
+	this.isSyncActive = true;
 	var _gthis = this;
 	this.player = new client_Player(this);
 	if(host == null) {
@@ -694,6 +709,9 @@ var client_Main = function(host,port) {
 	}
 	this.initListeners();
 	this.onTimeGet.run = function() {
+		if(!_gthis.isSyncActive) {
+			return;
+		}
 		if(_gthis.player.isListEmpty()) {
 			return;
 		}
@@ -851,7 +869,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 : 212, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]});
+		haxe_Log.trace("Event: " + data.type,{ fileName : "src/client/Main.hx", lineNumber : 214, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]});
 		switch(data.type) {
 		case "AddVideo":
 			this.player.addVideoItem(data.addVideo.item,data.addVideo.atEnd);
@@ -1336,6 +1354,9 @@ client_Player.prototype = {
 		}
 	}
 	,setVideo: function(i) {
+		if(!this.main.isSyncActive) {
+			return;
+		}
 		var item = this.items[i];
 		if(client_players_Youtube.isYoutube(item.url)) {
 			this.setPlayer(new client_players_Youtube(this.main,this));
@@ -1527,12 +1548,18 @@ client_Player.prototype = {
 		return this.player != null;
 	}
 	,play: function() {
+		if(!this.main.isSyncActive) {
+			return;
+		}
 		if(this.player == null) {
 			return;
 		}
 		this.player.play();
 	}
 	,pause: function() {
+		if(!this.main.isSyncActive) {
+			return;
+		}
 		if(this.player == null) {
 			return;
 		}
@@ -1548,6 +1575,9 @@ client_Player.prototype = {
 		if(isLocal == null) {
 			isLocal = true;
 		}
+		if(!this.main.isSyncActive) {
+			return;
+		}
 		if(this.player == null) {
 			return;
 		}
diff --git a/res/css/des.css b/res/css/des.css
index 818a174..b04528f 100644
--- a/res/css/des.css
+++ b/res/css/des.css
@@ -158,6 +158,9 @@ src:url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/fonts/gl
 .glyphicon-play:before {
   content:"\e072"
 }
+.glyphicon-pause:before {
+  content:"\e073"
+}
 .glyphicon-star-empty:before {
   content:"\e007"
 }
diff --git a/res/langs/en.json b/res/langs/en.json
index 50f12b4..dfd018d 100644
--- a/res/langs/en.json
+++ b/res/langs/en.json
@@ -32,6 +32,8 @@
 	"leader": "Leader",
 	"enterAsGuest": "Enter As Guest",
 	"yourName": "Your Name",
+	"enterUserPassword": "Enter User Password",
+	"yourPassword": "Your Password",
 	"emotes": "Emotes",
 	"clearChat": "Clear Chat",
 	"addVideoFromUrl": "Add video from URL",
@@ -42,6 +44,7 @@
 	"playlistLocked": "Playlist locked",
 	"expandPlayer": "Expand player",
 	"toggleVideoSync": "Toggle video synchronization",
+	"toggleSynchConfirm": "Are you sure you want to turn off video sync?",
 	"refreshPlayer": "Refresh player",
 	"fullscreenPlayer": "Fullscreen player",
 	"retrievePlaylistLinks": "Retrieve playlist links",
diff --git a/res/langs/ru.json b/res/langs/ru.json
index 3d632af..30b6e7a 100644
--- a/res/langs/ru.json
+++ b/res/langs/ru.json
@@ -32,6 +32,8 @@
 	"leader": "Лидер",
 	"enterAsGuest": "Войти как гость:",
 	"yourName": "Ваш ник",
+	"enterUserPassword": "Введите пароль пользователя",
+	"yourPassword": "Ваш пароль",
 	"emotes": "Смайлы",
 	"clearChat": "Очистить",
 	"addVideoFromUrl": "Добавить видео по ссылке",
@@ -42,6 +44,7 @@
 	"playlistLocked": "Плейлист заблокирован",
 	"expandPlayer": "Расширить плеер",
 	"toggleVideoSync": "Переключить синхронизацию видео",
+	"toggleSynchConfirm": "Вы уверены что хотите отключить синхронизацию видео?",
 	"refreshPlayer": "Обновить плеер",
 	"fullscreenPlayer": "Полноэкранный режим видео",
 	"retrievePlaylistLinks": "Получить ссылки на видео из плейлиста",
diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index d50773d..f88aa97 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -78,6 +78,23 @@ class Buttons {
 			window.dispatchEvent(new Event("resize"));
 		}
 
+		final toggleSynch = ge("#togglesynch");
+		toggleSynch.onclick = e -> {
+			final icon = toggleSynch.firstElementChild;
+			if (main.isSyncActive) {
+				if (!window.confirm(Lang.get("toggleSynchConfirm"))) return;
+				main.isSyncActive = false;
+				icon.style.color = "rgba(238, 72, 67, 0.75)";
+				icon.classList.add("glyphicon-pause");
+				icon.classList.remove("glyphicon-play");
+			} else {
+				main.isSyncActive = true;
+				icon.style.color = "";
+				icon.classList.add("glyphicon-play");
+				icon.classList.remove("glyphicon-pause");
+				main.send({type: UpdatePlaylist});
+			}
+		}
 		final mediaRefresh = ge("#mediarefresh");
 		mediaRefresh.onclick = e -> {
 			main.refreshPlayer();
diff --git a/src/client/Main.hx b/src/client/Main.hx
index bb3a738..c29604e 100644
--- a/src/client/Main.hx
+++ b/src/client/Main.hx
@@ -21,6 +21,7 @@ using ClientTools;
 
 class Main {
 
+	public var isSyncActive = true;
 	final clients:Array<Client> = [];
 	var pageTitle = document.title;
 	final host:String;
@@ -46,6 +47,7 @@ class Main {
 
 		initListeners();
 		onTimeGet.run = () -> {
+			if (!isSyncActive) return;
 			if (player.isListEmpty()) return;
 			send({type: GetTime});
 		}
diff --git a/src/client/Player.hx b/src/client/Player.hx
index 4327e6c..443c14f 100644
--- a/src/client/Player.hx
+++ b/src/client/Player.hx
@@ -91,6 +91,7 @@ class Player {
 	}
 
 	public function setVideo(i:Int):Void {
+		if (!main.isSyncActive) return;
 		final item = items[i];
 		if (Youtube.isYoutube(item.url)) {
 			setPlayer(new Youtube(main, this));
@@ -292,11 +293,13 @@ class Player {
 	}
 
 	public function play():Void {
+		if (!main.isSyncActive) return;
 		if (player == null) return;
 		player.play();
 	}
 
 	public function pause():Void {
+		if (!main.isSyncActive) return;
 		if (player == null) return;
 		player.pause();
 	}
@@ -307,6 +310,7 @@ class Player {
 	}
 
 	public function setTime(time:Float, isLocal = true):Void {
+		if (!main.isSyncActive) return;
 		if (player == null) return;
 		skipSetTime = isLocal;
 		player.setTime(time);
diff --git a/src/server/Main.hx b/src/server/Main.hx
index 4ecc25a..c613b5b 100644
--- a/src/server/Main.hx
+++ b/src/server/Main.hx
@@ -452,7 +452,13 @@ class Main {
 					updatePlaylist: {
 					videoList: videoList
 				}});
-			case UpdatePlaylist: // client-only
+
+			case UpdatePlaylist:
+				broadcast({
+					type: UpdatePlaylist,
+					updatePlaylist: {
+					videoList: videoList
+				}});
 
 			case TogglePlaylistLock:
 				if (!client.isAdmin) return;