From e2c76dece4ba9daf1dcce338026339c17c9bd6cd Mon Sep 17 00:00:00 2001 From: RblSb Date: Sat, 28 Aug 2021 01:09:18 +0300 Subject: iOS... Sent from my iPhone --- res/client.js | 45 +++++++++++++++++++++++++++++++++++++++++-- src/client/Buttons.hx | 28 +++++++++++++++++++++++++-- src/client/Utils.hx | 6 ++++++ src/client/players/Raw.hx | 1 + src/client/players/Youtube.hx | 1 + 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 -- cgit v1.2.3