2 files changed, 56 insertions, 26 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;
+}