diff options
| -rw-r--r-- | res/client.js | 20 | ||||
| -rw-r--r-- | res/css/des.css | 17 | ||||
| -rw-r--r-- | res/index.html | 2 | ||||
| -rw-r--r-- | src/client/Buttons.hx | 2 | ||||
| -rw-r--r-- | src/client/Main.hx | 7 | ||||
| -rw-r--r-- | src/client/Player.hx | 9 |
6 files changed, 49 insertions, 8 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> diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx index 7e9c8cb..771f827 100644 --- a/src/client/Buttons.hx +++ b/src/client/Buttons.hx @@ -111,7 +111,7 @@ class Buttons { } final fullscreenBtn = ge("#fullscreenbtn"); fullscreenBtn.onclick = e -> { - if (Utils.isTouch() && !Utils.hasFullscreen()) { + if ((Utils.isTouch() || main.isVerbose()) && !Utils.hasFullscreen()) { Utils.requestFullscreen(document.documentElement); } else { Utils.requestFullscreen(ge("#ytapiplayer")); diff --git a/src/client/Main.hx b/src/client/Main.hx index 781f5e8..0f6b31e 100644 --- a/src/client/Main.hx +++ b/src/client/Main.hx @@ -387,11 +387,13 @@ class Main { if (player.isListEmpty()) player.pause(); case Pause: + player.setPauseIndicator(false); if (isLeader()) return; player.pause(); player.setTime(data.pause.time); case Play: + player.setPauseIndicator(true); if (isLeader()) return; player.setTime(data.play.time); player.play(); @@ -418,6 +420,7 @@ class Main { if (player.getDuration() <= player.getTime() + synchThreshold) return; if (!data.getTime.paused) player.play(); else player.pause(); + player.setPauseIndicator(!data.getTime.paused); if (Math.abs(time - newTime) < synchThreshold) return; player.setTime(newTime); @@ -812,6 +815,10 @@ class Main { return config.youtubeApiKey; } + public function isVerbose():Bool { + return config.isVerbose; + } + function escapeRegExp(regex:String):String { return ~/([.*+?^${}()|[\]\\])/g.replace(regex, "\\$1"); } diff --git a/src/client/Player.hx b/src/client/Player.hx index 4de76ce..dd49ab4 100644 --- a/src/client/Player.hx +++ b/src/client/Player.hx @@ -146,6 +146,15 @@ class Player { JsApi.fireVideoRemoveEvents(items[itemPos]); player.removeVideo(); ge("#currenttitle").textContent = Lang.get("nothingPlaying"); + setPauseIndicator(true); + } + + public function setPauseIndicator(flag:Bool):Void { + if (!main.isSyncActive) return; + final state = flag ? "play" : "pause"; + final el = ge("#pause-indicator"); + if (el.getAttribute("name") == state) return; + el.setAttribute("name", state); } public function onCanBePlayed():Void { |