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

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
commit 80c700cc71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 39 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/cardbuilder/cardBuilder.js
View file

@ -1468,7 +1468,7 @@ import 'programStyles';
let additionalCardContent = ''; let additionalCardContent = '';
if (layoutManager.desktop) { if (layoutManager.desktop && !options.disableHoverMenu) {
additionalCardContent += getHoverMenuHtml(item, action, options); additionalCardContent += getHoverMenuHtml(item, action, options);
} }
@ -1497,12 +1497,12 @@ import 'programStyles';
const userData = item.UserData || {}; const userData = item.UserData || {};
if (itemHelper.canMarkPlayed(item) && !options.disableHoverMenu) { if (itemHelper.canMarkPlayed(item)) {
require(['emby-playstatebutton']); 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>'; 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; 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>'; 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>';
html += '</div>'; html += '</div>';

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

12
src/controllers/auth/login.js
View file

@ -7,18 +7,10 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
loading.show(); loading.show();
apiClient.authenticateUserByName(username, password).then(function (result) { apiClient.authenticateUserByName(username, password).then(function (result) {
var user = result.User; var user = result.User;
var serverId = getParameterByName('serverid');
var newUrl;
if (user.Policy.IsAdministrator && !serverId) {
newUrl = 'dashboard.html';
} else {
newUrl = 'home.html';
}
loading.hide(); loading.hide();
Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient); Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
Dashboard.navigate(newUrl); Dashboard.navigate('home.html');
}, function (response) { }, function (response) {
page.querySelector('#txtManualName').value = ''; page.querySelector('#txtManualName').value = '';
page.querySelector('#txtManualPassword').value = ''; page.querySelector('#txtManualPassword').value = '';

8
src/controllers/dashboard/dashboard.js
View file

@ -169,13 +169,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
function reloadSystemInfo(view, apiClient) { function reloadSystemInfo(view, apiClient) {
apiClient.getSystemInfo().then(function (systemInfo) { apiClient.getSystemInfo().then(function (systemInfo) {
view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName); view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName);
var localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version); view.querySelector('#versionNumber').innerHTML = globalize.translate('DashboardVersionNumber', systemInfo.Version);
if (systemInfo.SystemUpdateLevel !== 'Release') {
localizedVersion += ' ' + systemInfo.SystemUpdateLevel;
}
view.querySelector('#versionNumber').innerHTML = localizedVersion;
view.querySelector('#operatingSystem').innerHTML = globalize.translate('DashboardOperatingSystem', systemInfo.OperatingSystem); view.querySelector('#operatingSystem').innerHTML = globalize.translate('DashboardOperatingSystem', systemInfo.OperatingSystem);
view.querySelector('#architecture').innerHTML = globalize.translate('DashboardArchitecture', systemInfo.SystemArchitecture); view.querySelector('#architecture').innerHTML = globalize.translate('DashboardArchitecture', systemInfo.SystemArchitecture);

8
src/controllers/itemDetails/index.js
View file

@ -53,11 +53,13 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
user: user, user: user,
share: true share: true
}; };
return options; return options;
} }
function getProgramScheduleHtml(items) { function getProgramScheduleHtml(items) {
var html = ''; var html = '';
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-list" data-contextmenu="false">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-list" data-contextmenu="false">';
html += listView.getListViewHtml({ html += listView.getListViewHtml({
items: items, items: items,
@ -71,6 +73,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
moreButton: false, moreButton: false,
recordButton: false recordButton: false
}); });
html += '</div>'; html += '</div>';
return html; return html;
@ -143,7 +146,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
instance._currentPlaybackMediaSources = mediaSources; instance._currentPlaybackMediaSources = mediaSources;
page.querySelector('.trackSelections').classList.remove('hide'); page.querySelector('.trackSelections').classList.remove('hide');
select.setLabel(globalize.translate('LabelVersion')); select.setLabel(globalize.translate('LabelVersion'));
var currentValue = select.value; var currentValue = select.value;
@ -165,7 +167,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
renderAudioSelections(page, mediaSources); renderAudioSelections(page, mediaSources);
renderSubtitleSelections(page, mediaSources); renderSubtitleSelections(page, mediaSources);
} }
} }
function renderVideoSelections(page, mediaSources) { function renderVideoSelections(page, mediaSources) {
@ -173,9 +174,11 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
var mediaSource = mediaSources.filter(function (m) { var mediaSource = mediaSources.filter(function (m) {
return m.Id === mediaSourceId; return m.Id === mediaSourceId;
})[0]; })[0];
var tracks = mediaSource.MediaStreams.filter(function (m) { var tracks = mediaSource.MediaStreams.filter(function (m) {
return m.Type === 'Video'; return m.Type === 'Video';
}); });
var select = page.querySelector('.selectVideo'); var select = page.querySelector('.selectVideo');
select.setLabel(globalize.translate('LabelVideo')); select.setLabel(globalize.translate('LabelVideo'));
var selectedId = tracks.length ? tracks[0].Index : -1; var selectedId = tracks.length ? tracks[0].Index : -1;
@ -727,7 +730,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
}); });
elem.innerHTML = cardHtml; elem.innerHTML = cardHtml;
imageLoader.lazyChildren(elem); imageLoader.lazyChildren(elem);
} }

20
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,20 +25,20 @@
</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>
@ -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 !important;
}
.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 !important;
}
.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 !important;
}
.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 !important;
}
.shuffleQueue-active {
color: #4285f4 !important;
} }
.cardBox:not(.visualCardBox) .cardPadder { .cardBox:not(.visualCardBox) .cardPadder {

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

@ -542,12 +542,8 @@ a[data-role=button] {
color: #c33; color: #c33;
} }
.repeatButton-active { .buttonActive {
color: #4285f4; color: #00a4dc !important;
}
.shuffleQueue-active {
color: #4285f4 !important;
} }
.personCard .cardScalable { .personCard .cardScalable {

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

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