diff options
Diffstat (limited to 'res')
| -rw-r--r-- | res/client.js | 20 | ||||
| -rw-r--r-- | res/css/des.css | 17 | ||||
| -rw-r--r-- | res/index.html | 2 |
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> |