mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

fix some css issues with now playing bar

Browse source
This commit is contained in:
dkanada 2020-07-12 06:09:57 +09:00
parent 868dfff829
commit aa9059d077
10 changed files with 27 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/nowPlayingBar/nowPlayingBar.css
View file

@ -114,8 +114,6 @@
.nowPlayingBarUserDataButtons {
display: inline-block;
margin-left: 1em;
margin-right: 1em;
}
.nowPlayingBarPositionSlider::-webkit-slider-thumb {

17
src/components/nowPlayingBar/nowPlayingBar.js
View file

@ -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;

4
src/components/remotecontrol/remotecontrol.js
View file

@ -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) {

2
src/nowplaying.html
View file

@ -43,7 +43,7 @@
<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>

8
src/themes/appletv/theme.css
View file

@ -449,12 +449,8 @@ html {
color: #c33;
}
.repeatButton-active {
color: #4285f4;
}
.shuffleQueue-active {
color: #4285f4 !important;
.buttonActive {
color: #00a4dc;
}
.card:focus .cardBox.visualCardBox,

8
src/themes/blueradiance/theme.css
View file

@ -441,12 +441,8 @@ html {
color: #c33;
}
.repeatButton-active {
color: #4285f4;
}
.shuffleQueue-active {
color: #4285f4 !important;
.buttonActive {
color: #00a4dc;
}
.cardBox:not(.visualCardBox) .cardPadder {

8
src/themes/dark/theme.css
View file

@ -412,12 +412,8 @@ html {
color: #c33;
}
.repeatButton-active {
color: #4285f4;
}
.shuffleQueue-active {
color: #4285f4 !important;
.buttonActive {
color: #00a4dc;
}
.card:focus .cardBox.visualCardBox,

8
src/themes/light/theme.css
View file

@ -427,12 +427,8 @@ html {
color: #c33;
}
.repeatButton-active {
color: #4285f4;
}
.shuffleQueue-active {
color: #4285f4 !important;
.buttonActive {
color: #00a4dc;
}
.cardBox:not(.visualCardBox) .cardPadder {

6
src/themes/purplehaze/theme.css
View file

@ -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);

8
src/themes/wmc/theme.css
View file

@ -421,12 +421,8 @@ html {
color: #c33;
}
.repeatButton-active {
color: #4285f4;
}
.shuffleQueue-active {
color: #4285f4 !important;
.buttonActive {
color: #00a4dc;
}
.cardBox:not(.visualCardBox) .cardPadder {