Restore mobile view

4 files changed, 102 insertions, 46 deletions

diff --git a/res/client.js b/res/client.js
index 20d7eeb..978a7aa 100644
--- a/res/client.js
+++ b/res/client.js
@@ -509,8 +509,13 @@ client_Buttons.init = function(main) {
 		main.refreshPlayer();
 	};
 	window.document.querySelector("#fullscreenbtn").onclick = function(e) {
-		return client_Utils.toggleFullScreen(window.document.querySelector("#ytapiplayer"));
+		if(client_Utils.isTouch() && !client_Utils.hasFullscreen()) {
+			return client_Utils.requestFullscreen(window.document.documentElement);
+		} else {
+			return client_Utils.requestFullscreen(window.document.querySelector("#ytapiplayer"));
+		}
 	};
+	client_Buttons.initPageFullscreen();
 	var getPlaylist = window.document.querySelector("#getplaylist");
 	getPlaylist.onclick = function(e) {
 		client_Utils.copyToClipboard(main.getPlaylistLinks().join(","));
@@ -726,6 +731,18 @@ client_Buttons.initChatInput = function(main) {
 		return true;
 	});
 };
+client_Buttons.initPageFullscreen = function() {
+	window.document.onfullscreenchange = function(e) {
+		var el = window.document.documentElement;
+		if(client_Utils.hasFullscreen()) {
+			if(e.target == el) {
+				el.classList.add("mobile-view");
+			}
+		} else {
+			el.classList.remove("mobile-view");
+		}
+	};
+};
 var client_InputWithHistory = function(element,history,maxItems,onEnter) {
 	this.historyId = -1;
 	this.element = element;
@@ -2078,31 +2095,26 @@ client_Utils.getIndex = function(parent,child) {
 	}
 	return i;
 };
-client_Utils.toggleFullScreen = function(el) {
-	var state = true;
+client_Utils.hasFullscreen = function() {
 	var doc = window.document;
+	if(!(window.document.fullscreenElement != null || doc.mozFullScreenElement != null)) {
+		return doc.webkitFullscreenElement != null;
+	} else {
+		return true;
+	}
+};
+client_Utils.requestFullscreen = function(el) {
 	var el2 = el;
-	if(window.document.fullscreenElement == null && doc.mozFullScreenElement == null && doc.webkitFullscreenElement == null) {
-		if(el.requestFullscreen != null) {
-			el.requestFullscreen();
-		} else if(el2.mozRequestFullScreen != null) {
-			el2.mozRequestFullScreen();
-		} else if(el2.webkitRequestFullscreen != null) {
-			el2.webkitRequestFullscreen(HTMLElement.ALLOW_KEYBOARD_INPUT);
-		} else {
-			state = false;
-		}
+	if(el.requestFullscreen != null) {
+		el.requestFullscreen();
+	} else if(el2.mozRequestFullScreen != null) {
+		el2.mozRequestFullScreen();
+	} else if(el2.webkitRequestFullscreen != null) {
+		el2.webkitRequestFullscreen(HTMLElement.ALLOW_KEYBOARD_INPUT);
 	} else {
-		if(doc.cancelFullScreen != null) {
-			doc.cancelFullScreen();
-		} else if(doc.mozCancelFullScreen != null) {
-			doc.mozCancelFullScreen();
-		} else if(doc.webkitCancelFullScreen != null) {
-			doc.webkitCancelFullScreen();
-		}
-		state = false;
+		return false;
 	}
-	return state;
+	return true;
 };
 client_Utils.copyToClipboard = function(text) {
 	var clipboardData = window.clipboardData;
diff --git a/res/css/des.css b/res/css/des.css
index 1ba1118..57e4446 100644
--- a/res/css/des.css
+++ b/res/css/des.css
@@ -263,6 +263,7 @@ header h4 {
   position: relative;
   display: flex;
   flex-wrap: nowrap;
+  padding-bottom: 1rem;
 }
 
 .controls span {
@@ -445,10 +446,6 @@ footer#footer {
   justify-content: space-between;
 }
 
-#chat > *:not(:first-child) {
-  margin-top: 1rem;
-}
-
 #chat .controls {
   display: flex;
   justify-content: space-between;
@@ -463,6 +460,7 @@ footer#footer {
   padding: 1rem;
   border-radius: 1rem;
   height: 12rem;
+  margin-bottom: 1rem;
 }
 
 .userlist_item {
@@ -730,3 +728,23 @@ html {
 @-ms-viewport {
   width:device-width
 }
+
+/* Mobile page fullscreen */
+
+.mobile-view #chatbox {
+  padding-top: 0;
+  border-top: 0;
+}
+
+.mobile-view #chat {
+  padding: 0 1rem;
+}
+
+.mobile-view .controls {
+  padding-bottom: 0;
+}
+
+.mobile-view #optionsPanel {
+  top: 2rem;
+  bottom: 0;
+}
diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index ffc7667..625a71f 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -111,9 +111,13 @@ class Buttons {
 		}
 		final fullscreenBtn = ge("#fullscreenbtn");
 		fullscreenBtn.onclick = e -> {
-			final el = ge("#ytapiplayer");
-			Utils.toggleFullScreen(el);
+			if (Utils.isTouch() && !Utils.hasFullscreen()) {
+				Utils.requestFullscreen(document.documentElement);
+			} else {
+				Utils.requestFullscreen(ge("#ytapiplayer"));
+			}
 		}
+		initPageFullscreen();
 		final getPlaylist = ge("#getplaylist");
 		getPlaylist.onclick = e -> {
 			final text = main.getPlaylistLinks().join(",");
@@ -316,4 +320,13 @@ class Buttons {
 		});
 	}
 
+	static function initPageFullscreen():Void {
+		document.onfullscreenchange = e -> {
+			final el = document.documentElement;
+			if (Utils.hasFullscreen()) {
+				if (e.target == el) el.classList.add("mobile-view");
+			} else el.classList.remove("mobile-view");
+		}
+	}
+
 }
diff --git a/src/client/Utils.hx b/src/client/Utils.hx
index e9d5ff8..00a26fe 100644
--- a/src/client/Utils.hx
+++ b/src/client/Utils.hx
@@ -35,27 +35,40 @@ class Utils {
 		return i;
 	}
 
-	public static function toggleFullScreen(el:Element):Bool {
-		var state = true;
+	public static function hasFullscreen():Bool {
 		final doc:Dynamic = document;
+		return (
+			document.fullscreenElement != null
+			|| doc.mozFullScreenElement != null
+			|| doc.webkitFullscreenElement != null
+		);
+	}
+
+	public static function requestFullscreen(el:Element):Bool {
 		final el2:Dynamic = el;
-		if (document.fullscreenElement == null &&
-			doc.mozFullScreenElement == null &&
-			doc.webkitFullscreenElement == null) {
-			if (el.requestFullscreen != null) {
-				el.requestFullscreen();
-			} else if (el2.mozRequestFullScreen != null) {
-				el2.mozRequestFullScreen();
-			} else if (el2.webkitRequestFullscreen != null) {
-				el2.webkitRequestFullscreen(untyped Element.ALLOW_KEYBOARD_INPUT);
-			} else state = false;
-		} else {
-			if (doc.cancelFullScreen != null) doc.cancelFullScreen();
-			else if (doc.mozCancelFullScreen != null) doc.mozCancelFullScreen();
-			else if (doc.webkitCancelFullScreen != null) doc.webkitCancelFullScreen();
-			state = false;
+		if (el.requestFullscreen != null) {
+			el.requestFullscreen();
+		} else if (el2.mozRequestFullScreen != null) {
+			el2.mozRequestFullScreen();
+		} else if (el2.webkitRequestFullscreen != null) {
+			el2.webkitRequestFullscreen(untyped Element.ALLOW_KEYBOARD_INPUT);
+		} else return false;
+		return true;
+	}
+
+	public static function cancelFullscreen(el:Element):Void {
+		final doc:Dynamic = document;
+		if (doc.cancelFullScreen != null) doc.cancelFullScreen();
+		else if (doc.mozCancelFullScreen != null) doc.mozCancelFullScreen();
+		else if (doc.webkitCancelFullScreen != null) doc.webkitCancelFullScreen();
+	}
+
+	public static function toggleFullscreen(el:Element):Bool {
+		if (hasFullscreen()) {
+			cancelFullscreen(el);
+			return false;
 		}
-		return state;
+		return requestFullscreen(el);
 	}
 
 	public static function copyToClipboard(text:String):Void {