mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
better progress display
This commit is contained in:
Luke Pulverenti
parent
a3252f6842
commit
72ac2ba6af
2 changed files with 123 additions and 143 deletions
|
|
@ -149,46 +149,13 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Firefox and Polyfill */
|
|
||||||
.itemProgress {
|
.itemProgress {
|
||||||
border: solid #222222 1px;
|
vertical-align: top;
|
||||||
background: #444444 !important; /* !important only needed in polyfill */
|
font-size: 20px;
|
||||||
border-radius: 0!important;
|
color: #6FBD45;
|
||||||
height: 14px;
|
margin-right: 10px;
|
||||||
opacity: .7;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Chrome */
|
|
||||||
.itemProgress::-webkit-progress-bar {
|
|
||||||
background: #444444;
|
|
||||||
border-radius: 0!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Background of the progress bar value
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Firefox */
|
|
||||||
.itemProgress::-moz-progress-bar {
|
|
||||||
border-radius: 0!important;
|
|
||||||
background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Chrome */
|
|
||||||
.itemProgress::-webkit-progress-value {
|
|
||||||
border-radius: 0!important;
|
|
||||||
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) );
|
|
||||||
background-image: -webkit-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Polyfill */
|
|
||||||
.itemProgress[aria-valuenow]:before {
|
|
||||||
border-radius: 0!important;
|
|
||||||
background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
|
|
||||||
background-image: -ms-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
|
|
||||||
background-image: -o-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterDetailViewItem {
|
.posterDetailViewItem {
|
||||||
background: #333;
|
background: #333;
|
||||||
padding: 10px 10px 3px;
|
padding: 10px 10px 3px;
|
||||||
|
|
@ -200,6 +167,12 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.posterDetailViewItem .itemProgress {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.posterDetailViewItem .starRating {
|
.posterDetailViewItem .starRating {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 13px;
|
height: 13px;
|
||||||
|
|
@ -211,7 +184,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterDetailViewItem p {
|
.posterDetailViewItem p {
|
||||||
margin: .75em 0;
|
margin: .35em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterDetailViewItem .imgUserItemRating {
|
.posterDetailViewItem .imgUserItemRating {
|
||||||
|
|
@ -232,8 +205,9 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterDetailViewItem .userDataIcons {
|
.posterDetailViewItem .userDataIcons img {
|
||||||
display: none;
|
height: 14px;
|
||||||
|
width: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailPagePrimaryInfo {
|
.detailPagePrimaryInfo {
|
||||||
|
|
@ -258,8 +232,17 @@
|
||||||
max-height: 140px;
|
max-height: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterDetailViewItem .userDataIcons {
|
.posterDetailViewItem .userDataIcons img {
|
||||||
display: block;
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.posterDetailViewItem p {
|
||||||
|
margin: .75em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.posterDetailViewItem .itemProgress {
|
||||||
|
font-size: 17px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -130,10 +130,6 @@
|
||||||
|
|
||||||
html += '<p class="userDataIcons">' + LibraryBrowser.getUserDataIconsHtml(item) + '</p>';
|
html += '<p class="userDataIcons">' + LibraryBrowser.getUserDataIconsHtml(item) + '</p>';
|
||||||
|
|
||||||
if (item.PlayedPercentage || (item.UserData && item.UserData.PlaybackPositionTicks)) {
|
|
||||||
html += '<p>' + LibraryBrowser.getProgressBarHtml(item) + '</p>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += LibraryBrowser.getNewIndicatorHtml(item);
|
html += LibraryBrowser.getNewIndicatorHtml(item);
|
||||||
|
|
@ -366,27 +362,6 @@
|
||||||
return '';
|
return '';
|
||||||
},
|
},
|
||||||
|
|
||||||
getProgressBarHtml: function (item) {
|
|
||||||
|
|
||||||
var html = '';
|
|
||||||
|
|
||||||
var tooltip;
|
|
||||||
|
|
||||||
if (item.PlayedPercentage) {
|
|
||||||
|
|
||||||
tooltip = parseInt(item.PlayedPercentage) + '% watched';
|
|
||||||
html += '<progress class="itemProgress" min="0" max="100" value="' + item.PlayedPercentage + '" title="' + tooltip + '"></progress>';
|
|
||||||
}
|
|
||||||
else if (item.UserData && item.UserData.PlaybackPositionTicks && item.RunTimeTicks) {
|
|
||||||
|
|
||||||
tooltip = DashboardPage.getDisplayText(item.UserData.PlaybackPositionTicks) + " / " + DashboardPage.getDisplayText(item.RunTimeTicks);
|
|
||||||
|
|
||||||
html += '<progress class="itemProgress" min="0" max="100" value="' + (item.UserData.PlaybackPositionTicks / item.RunTimeTicks) + '" title="' + tooltip + '"></progress>';
|
|
||||||
}
|
|
||||||
|
|
||||||
return html;
|
|
||||||
},
|
|
||||||
|
|
||||||
getAveragePrimaryImageAspectRatio: function (items) {
|
getAveragePrimaryImageAspectRatio: function (items) {
|
||||||
|
|
||||||
var values = [];
|
var values = [];
|
||||||
|
|
@ -568,6 +543,28 @@
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
|
var tooltip;
|
||||||
|
var pct;
|
||||||
|
|
||||||
|
if (item.PlayedPercentage) {
|
||||||
|
|
||||||
|
tooltip = '';
|
||||||
|
pct = item.PlayedPercentage;
|
||||||
|
}
|
||||||
|
else if (item.UserData && item.UserData.PlaybackPositionTicks && item.RunTimeTicks) {
|
||||||
|
|
||||||
|
tooltip = DashboardPage.getDisplayText(item.UserData.PlaybackPositionTicks) + " / " + DashboardPage.getDisplayText(item.RunTimeTicks);
|
||||||
|
|
||||||
|
pct = (item.UserData.PlaybackPositionTicks / item.RunTimeTicks) * 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pct) {
|
||||||
|
|
||||||
|
pct = parseInt(pct);
|
||||||
|
|
||||||
|
html += '<span title="' + tooltip + '" class="itemProgress">' + pct + '%</span>';
|
||||||
|
}
|
||||||
|
|
||||||
var userData = item.UserData || {};
|
var userData = item.UserData || {};
|
||||||
|
|
||||||
var itemId = item.Id;
|
var itemId = item.Id;
|
||||||
|
|
@ -980,9 +977,9 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
getGalleryHtml: function (item) {
|
getGalleryHtml: function (item) {
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
var i, length;
|
var i, length;
|
||||||
|
|
||||||
var imageTags = item.ImageTags || {};
|
var imageTags = item.ImageTags || {};
|
||||||
|
|
||||||
|
|
@ -994,110 +991,110 @@
|
||||||
if (imageTags.Logo) {
|
if (imageTags.Logo) {
|
||||||
|
|
||||||
html += LibraryBrowser.createGalleryImage(item.Id, "Logo", imageTags.Logo);
|
html += LibraryBrowser.createGalleryImage(item.Id, "Logo", imageTags.Logo);
|
||||||
}
|
}
|
||||||
if (imageTags.Thumb) {
|
if (imageTags.Thumb) {
|
||||||
|
|
||||||
html += LibraryBrowser.createGalleryImage(item.Id, "Thumb", imageTags.Thumb);
|
html += LibraryBrowser.createGalleryImage(item.Id, "Thumb", imageTags.Thumb);
|
||||||
}
|
}
|
||||||
if (imageTags.Art) {
|
if (imageTags.Art) {
|
||||||
|
|
||||||
html += LibraryBrowser.createGalleryImage(item.Id, "Art", imageTags.Art);
|
html += LibraryBrowser.createGalleryImage(item.Id, "Art", imageTags.Art);
|
||||||
|
|
||||||
}
|
}
|
||||||
if (imageTags.Menu) {
|
if (imageTags.Menu) {
|
||||||
|
|
||||||
html += LibraryBrowser.createGalleryImage(item.Id, "Menu", imageTags.Menu);
|
html += LibraryBrowser.createGalleryImage(item.Id, "Menu", imageTags.Menu);
|
||||||
|
|
||||||
}
|
}
|
||||||
if (imageTags.Disc) {
|
if (imageTags.Disc) {
|
||||||
|
|
||||||
html += LibraryBrowser.createGalleryImage(item.Id, "Disc", imageTags.Disc);
|
html += LibraryBrowser.createGalleryImage(item.Id, "Disc", imageTags.Disc);
|
||||||
}
|
}
|
||||||
if (imageTags.Box) {
|
if (imageTags.Box) {
|
||||||
|
|
||||||
html += LibraryBrowser.createGalleryImage(item.Id, "Box", imageTags.Box);
|
html += LibraryBrowser.createGalleryImage(item.Id, "Box", imageTags.Box);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.BackdropImageTags) {
|
if (item.BackdropImageTags) {
|
||||||
|
|
||||||
for (i = 0, length = item.BackdropImageTags.length; i < length; i++) {
|
for (i = 0, length = item.BackdropImageTags.length; i < length; i++) {
|
||||||
html += LibraryBrowser.createGalleryImage(item.Id, "Backdrop", item.BackdropImageTags[0], i);
|
html += LibraryBrowser.createGalleryImage(item.Id, "Backdrop", item.BackdropImageTags[0], i);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.ScreenshotImageTags) {
|
if (item.ScreenshotImageTags) {
|
||||||
|
|
||||||
for (i = 0, length = item.ScreenshotImageTags.length; i < length; i++) {
|
for (i = 0, length = item.ScreenshotImageTags.length; i < length; i++) {
|
||||||
html += LibraryBrowser.createGalleryImage(item.Id, "Screenshot", item.ScreenshotImageTags[0], i);
|
html += LibraryBrowser.createGalleryImage(item.Id, "Screenshot", item.ScreenshotImageTags[0], i);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
},
|
},
|
||||||
|
|
||||||
createGalleryImage: function (itemId, type, tag, index) {
|
createGalleryImage: function (itemId, type, tag, index) {
|
||||||
|
|
||||||
var downloadWidth = 400;
|
var downloadWidth = 400;
|
||||||
var lightboxWidth = 800;
|
var lightboxWidth = 800;
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
if (typeof (index) == "undefined") index = 0;
|
if (typeof (index) == "undefined") index = 0;
|
||||||
|
|
||||||
html += '<div class="posterViewItem" style="padding-bottom:0px;">';
|
html += '<div class="posterViewItem" style="padding-bottom:0px;">';
|
||||||
html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
|
html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
|
||||||
html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(itemId, {
|
html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(itemId, {
|
||||||
type: type,
|
type: type,
|
||||||
maxwidth: downloadWidth,
|
maxwidth: downloadWidth,
|
||||||
tag: tag,
|
tag: tag,
|
||||||
index: index
|
index: index
|
||||||
}) + '" />';
|
}) + '" />';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '<div class="galleryPopup" id="pop_' + index + '_' + tag + '" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
|
html += '<div class="galleryPopup" id="pop_' + index + '_' + tag + '" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
|
||||||
html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
|
html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
|
||||||
html += '<img class="" src="' + ApiClient.getImageUrl(itemId, {
|
html += '<img class="" src="' + ApiClient.getImageUrl(itemId, {
|
||||||
type: type,
|
type: type,
|
||||||
maxwidth: lightboxWidth,
|
maxwidth: lightboxWidth,
|
||||||
tag: tag,
|
tag: tag,
|
||||||
index: index
|
index: index
|
||||||
}) + '" />';
|
}) + '" />';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
},
|
},
|
||||||
|
|
||||||
createCastImage: function (cast) {
|
createCastImage: function (cast) {
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
var role = cast.Role || cast.Type;
|
var role = cast.Role || cast.Type;
|
||||||
|
|
||||||
html += '<a href="itembynamedetails.html?person=' + cast.Name + '">';
|
html += '<a href="itembynamedetails.html?person=' + cast.Name + '">';
|
||||||
html += '<div class="posterViewItem posterViewItemWithDualText">';
|
html += '<div class="posterViewItem posterViewItemWithDualText">';
|
||||||
|
|
||||||
if (cast.PrimaryImageTag) {
|
if (cast.PrimaryImageTag) {
|
||||||
|
|
||||||
var imgUrl = ApiClient.getPersonImageUrl(cast.Name, {
|
var imgUrl = ApiClient.getPersonImageUrl(cast.Name, {
|
||||||
width: 185,
|
width: 185,
|
||||||
tag: cast.PrimaryImageTag,
|
tag: cast.PrimaryImageTag,
|
||||||
type: "primary"
|
type: "primary"
|
||||||
});
|
});
|
||||||
|
|
||||||
html += '<img src="' + imgUrl + '" />';
|
html += '<img src="' + imgUrl + '" />';
|
||||||
} else {
|
} else {
|
||||||
var style = "background-color:" + LibraryBrowser.getMetroColor(cast.Name) + ";";
|
var style = "background-color:" + LibraryBrowser.getMetroColor(cast.Name) + ";";
|
||||||
|
|
||||||
html += '<img src="css/images/items/list/person.png" style="max-width:185px; ' + style + '"/>';
|
html += '<img src="css/images/items/list/person.png" style="max-width:185px; ' + style + '"/>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '<div class="posterViewItemText posterViewItemPrimaryText">' + cast.Name + '</div>';
|
html += '<div class="posterViewItemText posterViewItemPrimaryText">' + cast.Name + '</div>';
|
||||||
html += '<div class="posterViewItemText">' + role + '</div>';
|
html += '<div class="posterViewItemText">' + role + '</div>';
|
||||||
|
|
||||||
html += '</div></a>';
|
html += '</div></a>';
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue