wjones/jellyfin-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1551 from jellyfin/history

Browse Source 
Fix some style issues on item details and now playing
This commit is contained in:
dkanada
2020-07-14 18:02:16 +09:00
committed by GitHub
parent 585b1cf5f4 ee35f089fd
commit 80c700cc71
14 changed files with 39 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cardbuilder/cardBuilder.js
+4 -7
View File
@@ -1468,7 +1468,7 @@ import 'programStyles';
let additionalCardContent = '';
if (layoutManager.desktop) {
if (layoutManager.desktop && !options.disableHoverMenu) {
additionalCardContent += getHoverMenuHtml(item, action, options);
}
@@ -1497,12 +1497,12 @@ import 'programStyles';
const userData = item.UserData || {};
if (itemHelper.canMarkPlayed(item) && !options.disableHoverMenu) {
if (itemHelper.canMarkPlayed(item)) {
require(['emby-playstatebutton']);
html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>';
}
if (itemHelper.canRate(item) && !options.disableHoverMenu) {
if (itemHelper.canRate(item)) {
const likes = userData.Likes == null ? '' : userData.Likes;
@@ -1510,10 +1510,7 @@ import 'programStyles';
html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>';
}
if (!options.disableHoverMenu) {
html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_vert"></span></button>';
}
html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_vert"></span></button>';
html += '</div>';
html += '</div>';
src/components/nowPlayingBar/nowPlayingBar.css
-2
View File
@@ -114,8 +114,6 @@
.nowPlayingBarUserDataButtons {
display: inline-block;
margin-left: 1em;
margin-right: 1em;
}
.nowPlayingBarPositionSlider::-webkit-slider-thumb {
src/components/nowPlayingBar/nowPlayingBar.js
+3 -14
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;
src/components/remotecontrol/remotecontrol.js
+2 -2
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) {
src/controllers/auth/login.js
+2 -10
View File
@@ -7,18 +7,10 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
loading.show();
apiClient.authenticateUserByName(username, password).then(function (result) {
var user = result.User;
var serverId = getParameterByName('serverid');
var newUrl;
if (user.Policy.IsAdministrator && !serverId) {
newUrl = 'dashboard.html';
} else {
newUrl = 'home.html';
}
loading.hide();
Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
Dashboard.navigate(newUrl);
Dashboard.navigate('home.html');
}, function (response) {
page.querySelector('#txtManualName').value = '';
page.querySelector('#txtManualPassword').value = '';
src/controllers/dashboard/dashboard.js
+1 -7
View File
@@ -169,13 +169,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
function reloadSystemInfo(view, apiClient) {
apiClient.getSystemInfo().then(function (systemInfo) {
view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName);
var localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version);
if (systemInfo.SystemUpdateLevel !== 'Release') {
localizedVersion += ' ' + systemInfo.SystemUpdateLevel;
}
view.querySelector('#versionNumber').innerHTML = localizedVersion;
view.querySelector('#versionNumber').innerHTML = globalize.translate('DashboardVersionNumber', systemInfo.Version);
view.querySelector('#operatingSystem').innerHTML = globalize.translate('DashboardOperatingSystem', systemInfo.OperatingSystem);
view.querySelector('#architecture').innerHTML = globalize.translate('DashboardArchitecture', systemInfo.SystemArchitecture);
src/controllers/itemDetails/index.js
+5 -3
View File
@@ -53,11 +53,13 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
user: user,
share: true
};
return options;
}
function getProgramScheduleHtml(items) {
var html = '';
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-list" data-contextmenu="false">';
html += listView.getListViewHtml({
items: items,
@@ -71,6 +73,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
moreButton: false,
recordButton: false
});
html += '</div>';
return html;
@@ -143,7 +146,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
instance._currentPlaybackMediaSources = mediaSources;
page.querySelector('.trackSelections').classList.remove('hide');
select.setLabel(globalize.translate('LabelVersion'));
var currentValue = select.value;
@@ -165,7 +167,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
renderAudioSelections(page, mediaSources);
renderSubtitleSelections(page, mediaSources);
}
}
function renderVideoSelections(page, mediaSources) {
@@ -173,9 +174,11 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
var mediaSource = mediaSources.filter(function (m) {
return m.Id === mediaSourceId;
})[0];
var tracks = mediaSource.MediaStreams.filter(function (m) {
return m.Type === 'Video';
});
var select = page.querySelector('.selectVideo');
select.setLabel(globalize.translate('LabelVideo'));
var selectedId = tracks.length ? tracks[0].Index : -1;
@@ -727,7 +730,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
});
elem.innerHTML = cardHtml;
imageLoader.lazyChildren(elem);
}
src/nowplaying.html
+10 -10
View File
@@ -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,20 +25,20 @@
</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>
@@ -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">
src/themes/appletv/theme.css
+2 -6
View File
@@ -449,12 +449,8 @@ html {
color: #c33;
}
.repeatButton-active {
color: #4285f4;
}
.shuffleQueue-active {
color: #4285f4 !important;
.buttonActive {
color: #00a4dc !important;
}
.card:focus .cardBox.visualCardBox,
src/themes/blueradiance/theme.css
+2 -6
View File
@@ -441,12 +441,8 @@ html {
color: #c33;
}
.repeatButton-active {
color: #4285f4;
}
.shuffleQueue-active {
color: #4285f4 !important;
.buttonActive {
color: #00a4dc !important;
}
.cardBox:not(.visualCardBox) .cardPadder {
src/themes/dark/theme.css
+2 -6
View File
@@ -412,12 +412,8 @@ html {
color: #c33;
}
.repeatButton-active {
color: #4285f4;
}
.shuffleQueue-active {
color: #4285f4 !important;
.buttonActive {
color: #00a4dc !important;
}
.card:focus .cardBox.visualCardBox,
src/themes/light/theme.css
+2 -6
View File
@@ -427,12 +427,8 @@ html {
color: #c33;
}
.repeatButton-active {
color: #4285f4;
}
.shuffleQueue-active {
color: #4285f4 !important;
.buttonActive {
color: #00a4dc !important;
}
.cardBox:not(.visualCardBox) .cardPadder {
src/themes/purplehaze/theme.css
+2 -6
View File
@@ -542,12 +542,8 @@ a[data-role=button] {
color: #c33;
}
.repeatButton-active {
color: #4285f4;
}
.shuffleQueue-active {
color: #4285f4 !important;
.buttonActive {
color: #00a4dc !important;
}
.personCard .cardScalable {
src/themes/wmc/theme.css
+2 -6
View File
@@ -421,12 +421,8 @@ html {
color: #c33;
}
.repeatButton-active {
color: #4285f4;
}
.shuffleQueue-active {
color: #4285f4 !important;
.buttonActive {
color: #00a4dc !important;
}
.cardBox:not(.visualCardBox) .cardPadder {