Pause indicator

3 files changed, 32 insertions, 7 deletions

diff --git a/res/client.js b/res/client.js
index 0525b15..b210307 100644
--- a/res/client.js
+++ b/res/client.js
@@ -509,7 +509,7 @@ client_Buttons.init = function(main) {
 		main.refreshPlayer();
 	};
 	window.document.querySelector("#fullscreenbtn").onclick = function(e) {
-		if(client_Utils.isTouch() && !client_Utils.hasFullscreen()) {
+		if((client_Utils.isTouch() || main.isVerbose()) && !client_Utils.hasFullscreen()) {
 			return client_Utils.requestFullscreen(window.document.documentElement);
 		} else {
 			return client_Utils.requestFullscreen(window.document.querySelector("#ytapiplayer"));
@@ -1222,6 +1222,7 @@ client_Main.prototype = {
 			} else {
 				this.player.pause();
 			}
+			this.player.setPauseIndicator(!data.getTime.paused);
 			if(Math.abs(time - newTime) < synchThreshold) {
 				return;
 			}
@@ -1251,6 +1252,7 @@ client_Main.prototype = {
 			this.showGuestPasswordPanel();
 			break;
 		case "Pause":
+			this.player.setPauseIndicator(false);
 			if((this.personal.group & 2) != 0) {
 				return;
 			}
@@ -1258,6 +1260,7 @@ client_Main.prototype = {
 			this.player.setTime(data.pause.time);
 			break;
 		case "Play":
+			this.player.setPauseIndicator(true);
 			if((this.personal.group & 2) != 0) {
 				return;
 			}
@@ -1683,6 +1686,9 @@ client_Main.prototype = {
 	,getYoutubeApiKey: function() {
 		return this.config.youtubeApiKey;
 	}
+	,isVerbose: function() {
+		return this.config.isVerbose;
+	}
 	,escapeRegExp: function(regex) {
 		var _this_r = new RegExp("([.*+?^${}()|[\\]\\\\])","g".split("u").join(""));
 		return regex.replace(_this_r,"\\$1");
@@ -1796,6 +1802,18 @@ client_Player.prototype = {
 		client_JsApi.fireVideoRemoveEvents(this.items[this.itemPos]);
 		this.player.removeVideo();
 		window.document.querySelector("#currenttitle").textContent = Lang.get("nothingPlaying");
+		this.setPauseIndicator(true);
+	}
+	,setPauseIndicator: function(flag) {
+		if(!this.main.isSyncActive) {
+			return;
+		}
+		var state = flag ? "play" : "pause";
+		var el = window.document.querySelector("#pause-indicator");
+		if(el.getAttribute("name") == state) {
+			return;
+		}
+		el.setAttribute("name",state);
 	}
 	,onCanBePlayed: function() {
 		if(!this.isLoaded) {
diff --git a/res/css/des.css b/res/css/des.css
index 5cdf5c7..84ab9e8 100644
--- a/res/css/des.css
+++ b/res/css/des.css
@@ -234,6 +234,8 @@ button.danger-bg:focus {
 }
 
 .info header {
+  display: flex;
+  align-items: center;
   flex-wrap: nowrap;
   overflow-x: hidden;
   white-space: nowrap;
@@ -263,7 +265,6 @@ header h4 {
   position: relative;
   display: flex;
   flex-wrap: nowrap;
-  padding-bottom: 1rem;
 }
 
 .controls span {
@@ -445,6 +446,7 @@ footer#footer {
 #chat .controls {
   display: flex;
   justify-content: space-between;
+  padding-bottom: 1rem;
 }
 
 /* Users online */
@@ -697,12 +699,17 @@ html {
     background: var(--background-video);
   }
   #header {
-    font-size: 1.953rem;
-    display: inline-block;
+    display: flex;
     flex: 1;
-    overflow-x: hidden;
+    flex-wrap: nowrap;
+    overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    font-size: 1.953rem;
+  }
+  #currenttitle {
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
   .gutter {
     grid-area: gutter;
@@ -731,7 +738,7 @@ html {
   padding: 0 1rem;
 }
 
-.mobile-view .controls {
+.mobile-view #chat .controls {
   padding-bottom: 0;
 }
 
diff --git a/res/index.html b/res/index.html
index 8a8f516..d901198 100644
--- a/res/index.html
+++ b/res/index.html
@@ -24,7 +24,7 @@
         </header>
         <!-- Video controls -->
         <span class="controls">
-          <button id="togglesynch" title="${toggleVideoSync}"><ion-icon name="play"></ion-icon></button>
+          <button id="togglesynch" title="${toggleVideoSync}"><ion-icon id="pause-indicator" name="play"></ion-icon></button>
           <button id="mediarefresh" title="${refreshPlayer}"><ion-icon name="refresh"></ion-icon></button>
           <button id="fullscreenbtn" title="${fullscreenPlayer}"><ion-icon name="expand"></ion-icon></button>
           <button id="voteskip" title="${voteForSkip}"><ion-icon name="play-skip-forward"></ion-icon></button>