Way to change video src on client

see #27

7 files changed, 95 insertions, 4 deletions

diff --git a/res/client.js b/res/client.js
index a11e3a6..cd1c21e 100644
--- a/res/client.js
+++ b/res/client.js
@@ -744,6 +744,19 @@ client_Buttons.initTextButtons = function(main) {
 			return removeBtn.innerText = Lang.get("addVideo");
 		}
 	};
+	window.document.querySelector("#setVideoUrlBtn").onclick = function(e) {
+		var src = window.prompt(Lang.get("setVideoUrlPrompt"));
+		if(StringTools.trim(src) == "") {
+			main.refreshPlayer();
+			return;
+		}
+		client_JsApi.setVideoSrc(src);
+	};
+	window.document.querySelector("#selectLocalVideoBtn").onclick = function(e) {
+		client_Utils.browseFileUrl(function(url,name) {
+			client_JsApi.setVideoSrc(url);
+		});
+	};
 };
 client_Buttons.initHotkeys = function(main,player) {
 	window.document.querySelector("#mediarefresh").title += " (Alt-R)";
@@ -2454,6 +2467,33 @@ client_Utils.copyToClipboard = function(text) {
 		window.document.body.removeChild(textarea);
 	}
 };
+client_Utils.browseFileUrl = function(onFileLoad,isBinary,revoke) {
+	if(revoke == null) {
+		revoke = false;
+	}
+	if(isBinary == null) {
+		isBinary = true;
+	}
+	var input = window.document.createElement("input");
+	input.style.visibility = "hidden";
+	input.setAttribute("type","file");
+	input.id = "browse";
+	input.onclick = function(e) {
+		e.cancelBubble = true;
+		e.stopPropagation();
+	};
+	input.onchange = function() {
+		var file = input.files[0];
+		var url = URL.createObjectURL(file);
+		onFileLoad(url,file.name);
+		window.document.body.removeChild(input);
+		if(revoke) {
+			URL.revokeObjectURL(url);
+		}
+	};
+	window.document.body.appendChild(input);
+	input.click();
+};
 var client_players_Iframe = function(main,player) {
 	this.playerEl = window.document.querySelector("#ytapiplayer");
 	this.main = main;
diff --git a/res/index.html b/res/index.html
index f070816..92b4f69 100644
--- a/res/index.html
+++ b/res/index.html
@@ -164,6 +164,8 @@
       <div>
         <h4>${video}</h4>
         <li><button id="synchThresholdBtn"><span>${synchThreshold}</span></button></li>
+        <li><button id="setVideoUrlBtn"><span>${setVideoUrl}</span></button></li>
+        <li><button id="selectLocalVideoBtn"><span>${selectLocalVideo}</span></button></li>
         <li><button id="removeVideoBtn"><span>${removeVideo}</span></button></li>
       </div>
       <div id="adminMenu" style="display: none;">
diff --git a/res/langs/en.json b/res/langs/en.json
index e8a9680..a38355a 100644
--- a/res/langs/en.json
+++ b/res/langs/en.json
@@ -34,6 +34,9 @@
 	"layout": "Layout",
 	"swapLayout": "Swap Layout",
 	"chatOnly": "Chat Only",
+	"setVideoUrl": "Set Video URL",
+	"setVideoUrlPrompt": "New video URL:\n(Does not affect other users)",
+	"selectLocalVideo": "Select Local Video",
 	"removeVideo": "Remove Video",
 	"addVideo": "Add Video",
 	"toggleUserList": "Show/Hide Userlist",
diff --git a/res/langs/ru.json b/res/langs/ru.json
index 24f5d34..8228eeb 100644
--- a/res/langs/ru.json
+++ b/res/langs/ru.json
@@ -34,6 +34,9 @@
 	"layout": "Разметка",
 	"swapLayout": "Сменить разметку",
 	"chatOnly": "Только чат",
+	"setVideoUrl": "Задать ссылку на видео",
+	"setVideoUrlPrompt": "Новая ссылка на видео:\n(Не влияет на других пользователей)",
+	"selectLocalVideo": "Выбрать локальный видеофайл",
 	"removeVideo": "Удалить видео",
 	"addVideo": "Добавить видео",
 	"toggleUserList": "Показать/Скрыть список юзеров",
diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index 7df6486..86a7d82 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -255,9 +255,27 @@ class Buttons {
 
 		final removeBtn = ge("#removeVideoBtn");
 		removeBtn.onclick = e -> {
-			final has = main.toggleVideoElement();
-			if (has || main.isListEmpty()) removeBtn.innerText = Lang.get("removeVideo");
-			else removeBtn.innerText = Lang.get("addVideo");
+			final hasVideo = main.toggleVideoElement();
+			if (hasVideo || main.isListEmpty()) {
+				removeBtn.innerText = Lang.get("removeVideo");
+			} else {
+				removeBtn.innerText = Lang.get("addVideo");
+			}
+		}
+		final setVideoUrlBtn = ge("#setVideoUrlBtn");
+		setVideoUrlBtn.onclick = e -> {
+			final src = window.prompt(Lang.get("setVideoUrlPrompt"));
+			if (src.trim() == "") { // reset to default url
+				main.refreshPlayer();
+				return;
+			}
+			JsApi.setVideoSrc(src);
+		}
+		final selectLocalVideoBtn = ge("#selectLocalVideoBtn");
+		selectLocalVideoBtn.onclick = e -> {
+			Utils.browseFileUrl((url:String, name:String) -> {
+				JsApi.setVideoSrc(url);
+			});
 		}
 	}
 
diff --git a/src/client/JsApi.hx b/src/client/JsApi.hx
index 4d98478..d9e6f02 100644
--- a/src/client/JsApi.hx
+++ b/src/client/JsApi.hx
@@ -104,7 +104,7 @@ class JsApi {
 	}
 
 	@:expose
-	static function setVideoSrc(src:String):Void {
+	public static function setVideoSrc(src:String):Void {
 		player.changeVideoSrc(src);
 	}
 
diff --git a/src/client/Utils.hx b/src/client/Utils.hx
index de6b16c..232ca02 100644
--- a/src/client/Utils.hx
+++ b/src/client/Utils.hx
@@ -3,6 +3,7 @@ package client;
 import js.Browser.document;
 import js.Browser.window;
 import js.html.Element;
+import js.html.URL;
 
 class Utils {
 	public static function isTouch():Bool {
@@ -87,4 +88,28 @@ class Utils {
 			document.body.removeChild(textarea);
 		}
 	}
+
+	public static function browseFileUrl(
+		onFileLoad:(url:String, name:String) -> Void,
+		isBinary = true,
+		revoke = false
+	):Void {
+		final input = document.createElement("input");
+		input.style.visibility = "hidden";
+		input.setAttribute("type", "file");
+		input.id = "browse";
+		input.onclick = function(e) {
+			e.cancelBubble = true;
+			e.stopPropagation();
+		}
+		input.onchange = function() {
+			final file:Dynamic = (input : Dynamic).files[0];
+			final url = URL.createObjectURL(file);
+			onFileLoad(url, file.name);
+			document.body.removeChild(input);
+			if (revoke) URL.revokeObjectURL(url);
+		}
+		document.body.appendChild(input);
+		input.click();
+	}
 }