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 { .nowPlayingBarUserDataButtons {
display: inline-block; display: inline-block;
margin-left: 1em;
margin-right: 1em;
} }
.nowPlayingBarPositionSlider::-webkit-slider-thumb { .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) { if (layoutManager.mobile) {
html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>'; html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
} else { } 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>'; html += '</div>';
@ -355,7 +355,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
function updateRepeatModeDisplay(repeatMode) { function updateRepeatModeDisplay(repeatMode) {
toggleRepeatButtonIcon.classList.remove('repeat', 'repeat_one'); toggleRepeatButtonIcon.classList.remove('repeat', 'repeat_one');
const cssClass = 'repeatButton-active'; const cssClass = 'buttonActive';
switch (repeatMode) { switch (repeatMode) {
case 'RepeatAll': case 'RepeatAll':
@ -375,18 +375,14 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function updateTimeDisplay(positionTicks, runtimeTicks, bufferedRanges) { function updateTimeDisplay(positionTicks, runtimeTicks, bufferedRanges) {
// See bindEvents for why this is necessary // See bindEvents for why this is necessary
if (positionSlider && !positionSlider.dragging) { if (positionSlider && !positionSlider.dragging) {
if (runtimeTicks) { if (runtimeTicks) {
var pct = positionTicks / runtimeTicks; var pct = positionTicks / runtimeTicks;
pct *= 100; pct *= 100;
positionSlider.value = pct; positionSlider.value = pct;
} else { } else {
positionSlider.value = 0; positionSlider.value = 0;
} }
} }
@ -396,9 +392,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
if (currentTimeElement) { if (currentTimeElement) {
var timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks); var timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
if (runtimeTicks) { if (runtimeTicks) {
timeText += ' / ' + datetime.getDisplayRunningTime(runtimeTicks); timeText += ' / ' + datetime.getDisplayRunningTime(runtimeTicks);
} }
@ -606,14 +600,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
function onPlaybackStart(e, state) { function onPlaybackStart(e, state) {
console.debug('nowplaying event: ' + e.type); console.debug('nowplaying event: ' + e.type);
var player = this; var player = this;
onStateChanged.call(player, e, state); onStateChanged.call(player, e, state);
} }
function onRepeatModeChange() { function onRepeatModeChange() {
if (!isEnabled) { if (!isEnabled) {
return; return;
} }
@ -628,9 +619,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
let shuffleMode = playbackManager.getQueueShuffleMode(); let shuffleMode = playbackManager.getQueueShuffleMode();
let context = nowPlayingBarElement; let context = nowPlayingBarElement;
const cssClass = 'shuffleQueue-active'; const cssClass = 'buttonActive';
let toggleShuffleButton = context.querySelector('.btnShuffleQueue'); let toggleShuffleButton = context.querySelector('.btnShuffleQueue');
switch (shuffleMode) { switch (shuffleMode) {
case 'Shuffle': case 'Shuffle':
toggleShuffleButton.classList.add(cssClass); toggleShuffleButton.classList.add(cssClass);
@ -643,7 +633,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function showNowPlayingBar() { function showNowPlayingBar() {
if (!isVisibilityAllowed) { if (!isVisibilityAllowed) {
hideNowPlayingBar(); hideNowPlayingBar();
return; return;

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

@ -359,7 +359,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function updateRepeatModeDisplay(repeatMode) { function updateRepeatModeDisplay(repeatMode) {
var context = dlg; var context = dlg;
let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton'); let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
const cssClass = 'repeatButton-active'; const cssClass = 'buttonActive';
let innHtml = '<span class="material-icons repeat"></span>'; let innHtml = '<span class="material-icons repeat"></span>';
let repeatOn = true; let repeatOn = true;
@ -528,7 +528,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function onShuffleQueueModeChange(updateView = true) { function onShuffleQueueModeChange(updateView = true) {
let shuffleMode = playbackManager.getQueueShuffleMode(this); let shuffleMode = playbackManager.getQueueShuffleMode(this);
let context = dlg; let context = dlg;
const cssClass = 'shuffleQueue-active'; const cssClass = 'buttonActive';
let shuffleButtons = context.querySelectorAll('.btnShuffleQueue'); let shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
for (let shuffleButton of shuffleButtons) { for (let shuffleButton of shuffleButtons) {

22
src/nowplaying.html
View file

@ -5,7 +5,7 @@
<div class="nowPlayingInfoContainer"> <div class="nowPlayingInfoContainer">
<div class="nowPlayingPageImageContainer"></div> <div class="nowPlayingPageImageContainer"></div>
<div class="nowPlayingInfoControls"> <div class="nowPlayingInfoControls">
<div class="flex"> <div class="flex">
<div class="nowPlayingInfoContainerMedia"> <div class="nowPlayingInfoContainerMedia">
@ -15,9 +15,9 @@
<div class="nowPlayingArtist nowPlayingSerie"></div> <div class="nowPlayingArtist nowPlayingSerie"></div>
</div> </div>
<div class="nowPlayingPageUserDataButtonsTitle"></div> <div class="nowPlayingPageUserDataButtonsTitle"></div>
</div> </div>
<div class="sliderContainer flex"> <div class="sliderContainer flex">
<div class="positionTime"></div> <div class="positionTime"></div>
<div class="nowPlayingPositionSliderContainer"> <div class="nowPlayingPositionSliderContainer">
@ -25,25 +25,25 @@
</div> </div>
<div class="runtime"></div> <div class="runtime"></div>
</div> </div>
<div class="nowPlayingButtonsContainer focuscontainer-x justify-content-space-between"> <div class="nowPlayingButtonsContainer focuscontainer-x justify-content-space-between">
<div class="nowPlayingInfoButtons"> <div class="nowPlayingInfoButtons">
<button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}" <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}"
data-command="SetRepeatMode"> data-command="SetRepeatMode">
<span class="material-icons repeat"></span> <span class="material-icons repeat"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}"> <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
<span class="material-icons replay_10"></span> <span class="material-icons replay_10"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}"> <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
<span class="material-icons skip_previous"></span> <span class="material-icons skip_previous"></span>
</button> </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> <span class="material-icons pause_circle_filled"></span>
</button> </button>
@ -54,7 +54,7 @@
<button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}"> <button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
<span class="material-icons skip_next"></span> <span class="material-icons skip_next"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}"> <button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
<span class="material-icons forward_30"></span> <span class="material-icons forward_30"></span>
</button> </button>
@ -66,7 +66,7 @@
</div> </div>
<div class="nowPlayingSecondaryButtons"> <div class="nowPlayingSecondaryButtons">
<button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch"> <button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
<span class="material-icons audiotrack"></span> <span class="material-icons audiotrack"></span>
</button> </button>
@ -74,7 +74,7 @@
<button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch"> <button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
<span class="material-icons closed_caption"></span> <span class="material-icons closed_caption"></span>
</button> </button>
<div class="nowPlayingPageUserDataButtons"></div> <div class="nowPlayingPageUserDataButtons"></div>
<button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand autoSize" title="${ButtonFullscreen}" data-command="ToggleFullscreen"> <button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand autoSize" title="${ButtonFullscreen}" data-command="ToggleFullscreen">

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

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

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

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

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

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

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

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

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

@ -542,14 +542,10 @@ a[data-role=button] {
color: #c33; color: #c33;
} }
.repeatButton-active { .buttonActive {
color: #4285f4; color: #4285f4;
} }
.shuffleQueue-active {
color: #4285f4 !important;
}
.personCard .cardScalable { .personCard .cardScalable {
border-radius: 50% !important; border-radius: 50% !important;
border: 1px solid rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255);

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

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