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

better progress display

Browse source
This commit is contained in:
Luke Pulverenti 2013-04-15 22:36:12 -04:00
parent a3252f6842
commit 72ac2ba6af
2 changed files with 123 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

67
dashboard-ui/css/librarybrowser.css
View file

@ -149,46 +149,13 @@
color: #fff;
}
/* Firefox and Polyfill */
.itemProgress {
border: solid #222222 1px;
background: #444444 !important; /* !important only needed in polyfill */
border-radius: 0!important;
height: 14px;
opacity: .7;
vertical-align: top;
font-size: 20px;
color: #6FBD45;
margin-right: 10px;
}
/* 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 {
background: #333;
padding: 10px 10px 3px;
@ -200,6 +167,12 @@
position: relative;
}
.posterDetailViewItem .itemProgress {
font-size: 14px;
font-weight: bold;
}
.posterDetailViewItem .starRating {
width: 15px;
height: 13px;
@ -211,7 +184,7 @@
}
.posterDetailViewItem p {
margin: .75em 0;
margin: .35em 0;
}
.posterDetailViewItem .imgUserItemRating {
@ -232,8 +205,9 @@
font-weight: bold;
}
.posterDetailViewItem .userDataIcons {
display: none;
.posterDetailViewItem .userDataIcons img {
height: 14px;
width: 14px;
}
.detailPagePrimaryInfo {
@ -258,8 +232,17 @@
max-height: 140px;
}
.posterDetailViewItem .userDataIcons {
display: block;
.posterDetailViewItem .userDataIcons img {
height: 18px;
width: 18px;
}
.posterDetailViewItem p {
margin: .75em 0;
}
.posterDetailViewItem .itemProgress {
font-size: 17px;
}
}

47
dashboard-ui/scripts/librarybrowser.js
View file

@ -130,10 +130,6 @@
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 += LibraryBrowser.getNewIndicatorHtml(item);
@ -366,27 +362,6 @@
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) {
var values = [];
@ -568,6 +543,28 @@
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 itemId = item.Id;