mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
fix some css issues with now playing bar
This commit is contained in:
dkanada
parent
868dfff829
commit
aa9059d077
10 changed files with 27 additions and 64 deletions
|
|
@ -114,8 +114,6 @@
|
|||
|
||||
.nowPlayingBarUserDataButtons {
|
||||
display: inline-block;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionSlider::-webkit-slider-thumb {
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
|
|||
if (layoutManager.mobile) {
|
||||
html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
|
||||
} else {
|
||||
html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><span class="material-icons more_vert"></span></button>';
|
||||
html += '<button is="paper-icon-button-light" class="btnToggleContextMenu mediaButton"><span class="material-icons more_vert"></span></button>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
|
@ -355,7 +355,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
|
|||
|
||||
function updateRepeatModeDisplay(repeatMode) {
|
||||
toggleRepeatButtonIcon.classList.remove('repeat', 'repeat_one');
|
||||
const cssClass = 'repeatButton-active';
|
||||
const cssClass = 'buttonActive';
|
||||
|
||||
switch (repeatMode) {
|
||||
case 'RepeatAll':
|
||||
|
|
@ -375,18 +375,14 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
|
|||
}
|
||||
|
||||
function updateTimeDisplay(positionTicks, runtimeTicks, bufferedRanges) {
|
||||
|
||||
// See bindEvents for why this is necessary
|
||||
if (positionSlider && !positionSlider.dragging) {
|
||||
if (runtimeTicks) {
|
||||
|
||||
var pct = positionTicks / runtimeTicks;
|
||||
pct *= 100;
|
||||
|
||||
positionSlider.value = pct;
|
||||
|
||||
} else {
|
||||
|
||||
positionSlider.value = 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -396,9 +392,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
|
|||
}
|
||||
|
||||
if (currentTimeElement) {
|
||||
|
||||
var timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
|
||||
|
||||
if (runtimeTicks) {
|
||||
timeText += ' / ' + datetime.getDisplayRunningTime(runtimeTicks);
|
||||
}
|
||||
|
|
@ -606,14 +600,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
|
|||
|
||||
function onPlaybackStart(e, state) {
|
||||
console.debug('nowplaying event: ' + e.type);
|
||||
|
||||
var player = this;
|
||||
|
||||
onStateChanged.call(player, e, state);
|
||||
}
|
||||
|
||||
function onRepeatModeChange() {
|
||||
|
||||
if (!isEnabled) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -628,9 +619,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
|
|||
|
||||
let shuffleMode = playbackManager.getQueueShuffleMode();
|
||||
let context = nowPlayingBarElement;
|
||||
const cssClass = 'shuffleQueue-active';
|
||||
const cssClass = 'buttonActive';
|
||||
let toggleShuffleButton = context.querySelector('.btnShuffleQueue');
|
||||
|
||||
switch (shuffleMode) {
|
||||
case 'Shuffle':
|
||||
toggleShuffleButton.classList.add(cssClass);
|
||||
|
|
@ -643,7 +633,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
|
|||
}
|
||||
|
||||
function showNowPlayingBar() {
|
||||
|
||||
if (!isVisibilityAllowed) {
|
||||
hideNowPlayingBar();
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -359,7 +359,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
|
|||
function updateRepeatModeDisplay(repeatMode) {
|
||||
var context = dlg;
|
||||
let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
|
||||
const cssClass = 'repeatButton-active';
|
||||
const cssClass = 'buttonActive';
|
||||
let innHtml = '<span class="material-icons repeat"></span>';
|
||||
let repeatOn = true;
|
||||
|
||||
|
|
@ -528,7 +528,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
|
|||
function onShuffleQueueModeChange(updateView = true) {
|
||||
let shuffleMode = playbackManager.getQueueShuffleMode(this);
|
||||
let context = dlg;
|
||||
const cssClass = 'shuffleQueue-active';
|
||||
const cssClass = 'buttonActive';
|
||||
let shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
|
||||
|
||||
for (let shuffleButton of shuffleButtons) {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="nowPlayingInfoContainer">
|
||||
<div class="nowPlayingPageImageContainer"></div>
|
||||
<div class="nowPlayingInfoControls">
|
||||
|
||||
|
||||
<div class="flex">
|
||||
|
||||
<div class="nowPlayingInfoContainerMedia">
|
||||
|
|
@ -15,9 +15,9 @@
|
|||
<div class="nowPlayingArtist nowPlayingSerie"></div>
|
||||
</div>
|
||||
<div class="nowPlayingPageUserDataButtonsTitle"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sliderContainer flex">
|
||||
<div class="positionTime"></div>
|
||||
<div class="nowPlayingPositionSliderContainer">
|
||||
|
|
@ -25,25 +25,25 @@
|
|||
</div>
|
||||
<div class="runtime"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="nowPlayingButtonsContainer focuscontainer-x justify-content-space-between">
|
||||
|
||||
|
||||
<div class="nowPlayingInfoButtons">
|
||||
|
||||
<button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}"
|
||||
data-command="SetRepeatMode">
|
||||
<span class="material-icons repeat"></span>
|
||||
</button>
|
||||
|
||||
|
||||
<button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
|
||||
<span class="material-icons replay_10"></span>
|
||||
</button>
|
||||
|
||||
|
||||
<button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
|
||||
<span class="material-icons skip_previous"></span>
|
||||
</button>
|
||||
|
||||
<button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
|
||||
<button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize cardOverlayButtonIcon" title="${ButtonPause}">
|
||||
<span class="material-icons pause_circle_filled"></span>
|
||||
</button>
|
||||
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
|
||||
<span class="material-icons skip_next"></span>
|
||||
</button>
|
||||
|
||||
|
||||
<button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
|
||||
<span class="material-icons forward_30"></span>
|
||||
</button>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</div>
|
||||
|
||||
<div class="nowPlayingSecondaryButtons">
|
||||
|
||||
|
||||
<button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
|
||||
<span class="material-icons audiotrack"></span>
|
||||
</button>
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
<button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
|
||||
<span class="material-icons closed_caption"></span>
|
||||
</button>
|
||||
|
||||
|
||||
<div class="nowPlayingPageUserDataButtons"></div>
|
||||
|
||||
<button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand autoSize" title="${ButtonFullscreen}" data-command="ToggleFullscreen">
|
||||
|
|
|
|||
|
|
@ -449,12 +449,8 @@ html {
|
|||
color: #c33;
|
||||
}
|
||||
|
||||
.repeatButton-active {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
.shuffleQueue-active {
|
||||
color: #4285f4 !important;
|
||||
.buttonActive {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
.card:focus .cardBox.visualCardBox,
|
||||
|
|
|
|||
|
|
@ -441,12 +441,8 @@ html {
|
|||
color: #c33;
|
||||
}
|
||||
|
||||
.repeatButton-active {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
.shuffleQueue-active {
|
||||
color: #4285f4 !important;
|
||||
.buttonActive {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
.cardBox:not(.visualCardBox) .cardPadder {
|
||||
|
|
|
|||
|
|
@ -412,12 +412,8 @@ html {
|
|||
color: #c33;
|
||||
}
|
||||
|
||||
.repeatButton-active {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
.shuffleQueue-active {
|
||||
color: #4285f4 !important;
|
||||
.buttonActive {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
.card:focus .cardBox.visualCardBox,
|
||||
|
|
|
|||
|
|
@ -427,12 +427,8 @@ html {
|
|||
color: #c33;
|
||||
}
|
||||
|
||||
.repeatButton-active {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
.shuffleQueue-active {
|
||||
color: #4285f4 !important;
|
||||
.buttonActive {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
.cardBox:not(.visualCardBox) .cardPadder {
|
||||
|
|
|
|||
|
|
@ -542,14 +542,10 @@ a[data-role=button] {
|
|||
color: #c33;
|
||||
}
|
||||
|
||||
.repeatButton-active {
|
||||
.buttonActive {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
.shuffleQueue-active {
|
||||
color: #4285f4 !important;
|
||||
}
|
||||
|
||||
.personCard .cardScalable {
|
||||
border-radius: 50% !important;
|
||||
border: 1px solid rgb(255, 255, 255);
|
||||
|
|
|
|||
|
|
@ -421,12 +421,8 @@ html {
|
|||
color: #c33;
|
||||
}
|
||||
|
||||
.repeatButton-active {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
.shuffleQueue-active {
|
||||
color: #4285f4 !important;
|
||||
.buttonActive {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
.cardBox:not(.visualCardBox) .cardPadder {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue