iOS...

Sent from my iPhone

5 files changed, 77 insertions, 4 deletions

diff --git a/res/client.js b/res/client.js
index 6347346..8d2b77c 100644
--- a/res/client.js
+++ b/res/client.js
@@ -833,6 +833,9 @@ client_Buttons.initChatInput = function(main) {
 	guestName.onkeydown = function(e) {
 		if(e.keyCode == 13) {
 			main.guestLogin(guestName.value);
+			if(client_Utils.isTouch()) {
+				guestName.blur();
+			}
 		}
 	};
 	var guestPass = window.document.querySelector("#guestpass");
@@ -840,19 +843,45 @@ client_Buttons.initChatInput = function(main) {
 		if(e.keyCode == 13) {
 			main.userLogin(guestName.value,guestPass.value);
 			guestPass.value = "";
+			if(client_Utils.isTouch()) {
+				guestPass.blur();
+			}
 		}
 	};
+	if(client_Utils.isIOS()) {
+		window.document.ontouchmove = function(e) {
+			return e.preventDefault();
+		};
+		window.document.querySelector("#chat").style.height = "-webkit-fill-available";
+	}
 	var chatline = window.document.querySelector("#chatline");
 	chatline.onfocus = function(e) {
-		if(client_Utils.isTouch()) {
+		if(client_Utils.isIOS()) {
+			var startY = window.scrollY;
+			haxe_Timer.delay(function() {
+				window.scrollBy(0,-(window.scrollY - startY));
+				var tmp = "" + Std.string(window.innerHeight);
+				window.document.querySelector("#chat").style.height = tmp + "px";
+				window.document.querySelector("#video").scrollTop = 0;
+				main.scrollChatToEnd();
+			},100);
+		} else if(client_Utils.isTouch()) {
 			main.scrollChatToEnd();
 		}
 	};
+	chatline.onblur = function(e) {
+		if(client_Utils.isIOS()) {
+			window.document.querySelector("#chat").style.height = "-webkit-fill-available";
+		}
+	};
 	new client_InputWithHistory(chatline,null,50,function(value) {
 		if(main.handleCommands(value)) {
 			return true;
 		}
 		main.send({ type : "Message", message : { clientName : "", text : value}});
+		if(client_Utils.isTouch()) {
+			chatline.blur();
+		}
 		return true;
 	});
 };
@@ -2467,6 +2496,17 @@ client_Utils.__name__ = true;
 client_Utils.isTouch = function() {
 	return 'ontouchstart' in window;
 };
+client_Utils.isIOS = function() {
+	if(!new EReg("^(iPhone|iPad|iPod)","").match($global.navigator.platform)) {
+		if(new EReg("^Mac","").match($global.navigator.platform)) {
+			return $global.navigator.maxTouchPoints > 4;
+		} else {
+			return false;
+		}
+	} else {
+		return true;
+	}
+};
 client_Utils.nodeFromString = function(div) {
 	var wrapper = window.document.createElement("div");
 	wrapper.innerHTML = div;
@@ -2735,6 +2775,7 @@ client_players_Raw.prototype = {
 		} else {
 			this.video = window.document.createElement("video");
 			this.video.id = "videoplayer";
+			this.video.setAttribute("playsinline","");
 			this.video.src = url;
 			this.video.oncanplaythrough = ($_=this.player,$bind($_,$_.onCanBePlayed));
 			this.video.onseeking = ($_=this.player,$bind($_,$_.onSetTime));
@@ -3185,7 +3226,7 @@ client_players_Youtube.prototype = {
 		this.video = window.document.createElement("div");
 		this.video.id = "videoplayer";
 		this.playerEl.appendChild(this.video);
-		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) {
+		this.youtube = new YT.Player(this.video.id,{ videoId : this.extractVideoId(item.url), playerVars : { autoplay : 1, playsinline : 1, modestbranding : 1, rel : 0, showinfo : 0}, events : { onReady : function(e) {
 			_gthis.isLoaded = true;
 			_gthis.youtube.pauseVideo();
 		}, onStateChange : function(e) {
diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index aba629e..b11e3fd 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -335,7 +335,10 @@ class Buttons {
 	static function initChatInput(main:Main):Void {
 		final guestName:InputElement = cast ge("#guestname");
 		guestName.onkeydown = e -> {
-			if (e.keyCode == KeyCode.Return) main.guestLogin(guestName.value);
+			if (e.keyCode == KeyCode.Return) {
+				main.guestLogin(guestName.value);
+				if (Utils.isTouch()) guestName.blur();
+			}
 		}
 
 		final guestPass:InputElement = cast ge("#guestpass");
@@ -343,12 +346,32 @@ class Buttons {
 			if (e.keyCode == KeyCode.Return) {
 				main.userLogin(guestName.value, guestPass.value);
 				guestPass.value = "";
+				if (Utils.isTouch()) guestPass.blur();
 			}
 		}
 
+		if (Utils.isIOS()) {
+			document.ontouchmove = e -> {
+				e.preventDefault();
+			}
+			ge("#chat").style.height = "-webkit-fill-available";
+		}
 		final chatline:InputElement = cast ge("#chatline");
 		chatline.onfocus = e -> {
-			if (Utils.isTouch()) main.scrollChatToEnd();
+			if (Utils.isIOS()) {
+				var startY = window.scrollY;
+				Timer.delay(() -> {
+					window.scrollBy(0, -(window.scrollY - startY));
+					ge("#chat").style.height = '${window.innerHeight}px';
+					ge("#video").scrollTop = 0;
+					main.scrollChatToEnd();
+				}, 100);
+			} else if (Utils.isTouch()) main.scrollChatToEnd();
+		}
+		chatline.onblur = e -> {
+			if (Utils.isIOS()) {
+				ge("#chat").style.height = "-webkit-fill-available";
+			}
 		}
 		new InputWithHistory(chatline, 50, value -> {
 			if (main.handleCommands(value)) return true;
@@ -359,6 +382,7 @@ class Buttons {
 					text: value
 				}
 			});
+			if (Utils.isTouch()) chatline.blur();
 			return true;
 		});
 	}
diff --git a/src/client/Utils.hx b/src/client/Utils.hx
index f23365e..818dfdf 100644
--- a/src/client/Utils.hx
+++ b/src/client/Utils.hx
@@ -1,6 +1,7 @@
 package client;
 
 import js.Browser.document;
+import js.Browser.navigator;
 import js.Browser.window;
 import js.html.Element;
 import js.html.URL;
@@ -10,6 +11,11 @@ class Utils {
 		return js.Syntax.code("'ontouchstart' in window");
 	}
 
+	public static function isIOS():Bool {
+		return ~/^(iPhone|iPad|iPod)/.match(navigator.platform)
+			|| (~/^Mac/.match(navigator.platform) && navigator.maxTouchPoints > 4);
+	}
+
 	public static function nodeFromString(div:String):Element {
 		final wrapper = document.createDivElement();
 		wrapper.innerHTML = div;
diff --git a/src/client/players/Raw.hx b/src/client/players/Raw.hx
index 5889732..4b78b0f 100644
--- a/src/client/players/Raw.hx
+++ b/src/client/players/Raw.hx
@@ -105,6 +105,7 @@ class Raw implements IPlayer {
 		} else {
 			video = document.createVideoElement();
 			video.id = "videoplayer";
+			video.setAttribute("playsinline", "");
 			video.src = url;
 			video.oncanplaythrough = player.onCanBePlayed;
 			video.onseeking = player.onSetTime;
diff --git a/src/client/players/Youtube.hx b/src/client/players/Youtube.hx
index 23b2439..65a93c9 100644
--- a/src/client/players/Youtube.hx
+++ b/src/client/players/Youtube.hx
@@ -226,6 +226,7 @@ class Youtube implements IPlayer {
 			videoId: extractVideoId(item.url),
 			playerVars: {
 				autoplay: 1,
+				playsinline: 1,
 				modestbranding: 1,
 				rel: 0,
 				showinfo: 0