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 transcoding progress bars

Browse source
This commit is contained in:
Luke Pulverenti 2016-08-03 14:26:19 -04:00
parent 29fdb143ab
commit 29f5388ae5
2 changed files with 51 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

50
dashboard-ui/css/dashboard.css
View file

@ -867,31 +867,75 @@ a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearB
position: absolute;
}
/* All HTML5 progress enabled browsers */
.transcodingProgress, .playbackProgress {
/* Turns off styling - not usually needed, but good to know. */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* gets rid of default border in Firefox and Opera. */
border: 0;
margin: 0;
height: 14px;
border: 0 solid #222;
border-radius: 0;
width: 50px;
margin-right: 5px;
background: #000 !important; /* !important only needed in polyfill */
}
/* Chrome */
.playbackProgress::-webkit-progress-bar, .transcodingProgress::-webkit-progress-bar {
background: #000;
}
.transcodingSession .playbackProgress {
bottom: 5px;
}
/* Firefox */
.transcodingProgress::-moz-progress-bar {
border-radius: 5px;
border-radius: 0;
background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
}
/* Chrome */
.transcodingProgress::-webkit-progress-value {
border-radius: 5px;
border-radius: 0;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(221, 73, 25)), color-stop(1, rgb(221, 73, 25)) ) !important;
background-image: -webkit-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
}
/* Polyfill */
.transcodingProgress[aria-valuenow]:before {
border-radius: 5px;
border-radius: 0;
background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
background-image: -ms-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
background-image: -o-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
}
/* Firefox */
.playbackProgress::-moz-progress-bar {
border-radius: 0;
background-image: none;
background-color: #52B54B;
}
/* Chrome */
.playbackProgress::-webkit-progress-value {
border-radius: 0;
background-image: none;
background-color: #52B54B;
}
/* Polyfill */
.playbackProgress[aria-valuenow]:before {
border-radius: 0;
background-image: none;
background-color: #52B54B;
}
@media all and (max-width: 550px) {
.sessionAppName {

8
dashboard-ui/scripts/dashboardpage.js
View file

@ -372,16 +372,16 @@
var position = session.PlayState.PositionTicks || 0;
var value = (100 * position) / nowPlayingItem.RunTimeTicks;
html += '<progress class="itemProgressBar playbackProgress" min="0" max="100" value="' + value + '"></progress>';
html += '<progress class="playbackProgress" min="0" max="100" value="' + value + '"></progress>';
} else {
html += '<progress class="itemProgressBar playbackProgress" min="0" max="100" style="display:none;"></progress>';
html += '<progress class="playbackProgress" min="0" max="100" style="display:none;"></progress>';
}
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
html += '<progress class="itemProgressBar transcodingProgress" min="0" max="100" value="' + session.TranscodingInfo.CompletionPercentage.toFixed(1) + '"></progress>';
html += '<progress class="transcodingProgress" min="0" max="100" value="' + session.TranscodingInfo.CompletionPercentage.toFixed(1) + '"></progress>';
} else {
html += '<progress class="itemProgressBar transcodingProgress" min="0" max="100" style="display:none;"></progress>';
html += '<progress class="transcodingProgress" min="0" max="100" style="display:none;"></progress>';
}
html += '</div>';