mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
display additional transcoding info in dashboard
This commit is contained in:
Luke Pulverenti
parent
d0f7690950
commit
1ccf18adbe
6 changed files with 153 additions and 42 deletions
|
|
@ -32,18 +32,21 @@
|
|||
font-weight: 100;
|
||||
src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/RobotoThin.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url(fonts/RobotoLight.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Regular'), local('Roboto-Regular'), url(fonts/RobotoRegular.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
|
|
@ -941,7 +944,7 @@ progress {
|
|||
.sessionUserInfo {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 7px;
|
||||
bottom: 11px;
|
||||
padding: .5em;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -953,7 +956,7 @@ progress {
|
|||
.sessionNowPlayingInfo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 7px;
|
||||
bottom: 11px;
|
||||
padding: .5em;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
|
|
@ -966,7 +969,7 @@ progress {
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.activeSession progress {
|
||||
.activeSession .playbackProgress {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -1005,7 +1008,14 @@ progress {
|
|||
color: #fff;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
bottom: 19px;
|
||||
}
|
||||
|
||||
.sessionTranscodingFramerate {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 19px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sessionNowPlayingStreamInfo {
|
||||
|
|
@ -1015,6 +1025,42 @@ progress {
|
|||
top: 10px;
|
||||
}
|
||||
|
||||
.activeSession .transcodingProgress {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
opacity: .9;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.transcodingSession .playbackProgress {
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
.transcodingProgress::-moz-progress-bar {
|
||||
border-radius: 5px;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
@media all and (max-width: 1000px) {
|
||||
|
||||
.activeSession {
|
||||
|
|
|
|||
|
|
@ -215,21 +215,25 @@
|
|||
|
||||
for (var i = 0, length = sessions.length; i < length; i++) {
|
||||
|
||||
var connection = sessions[i];
|
||||
var session = sessions[i];
|
||||
|
||||
var rowId = 'session' + connection.Id;
|
||||
var rowId = 'session' + session.Id;
|
||||
|
||||
var elem = $('#' + rowId, page);
|
||||
|
||||
if (elem.length) {
|
||||
DashboardPage.updateSession(elem, connection);
|
||||
DashboardPage.updateSession(elem, session);
|
||||
continue;
|
||||
}
|
||||
|
||||
var nowPlayingItem = connection.NowPlayingItem;
|
||||
var nowPlayingItem = session.NowPlayingItem;
|
||||
|
||||
var className = nowPlayingItem ? 'playingSession activeSession' : 'activeSession';
|
||||
|
||||
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
|
||||
className += ' transcodingSession';
|
||||
}
|
||||
|
||||
html += '<div class="' + className + '" id="' + rowId + '">';
|
||||
|
||||
html += '<div class="sessionNowPlayingContent"';
|
||||
|
|
@ -246,22 +250,22 @@
|
|||
|
||||
html += '<div class="sessionAppInfo">';
|
||||
|
||||
var clientImage = DashboardPage.getClientImage(connection);
|
||||
var clientImage = DashboardPage.getClientImage(session);
|
||||
|
||||
if (clientImage) {
|
||||
html += clientImage;
|
||||
}
|
||||
|
||||
html += '<div class="sessionAppName" style="display:inline-block;">';
|
||||
html += '<div class="sessionDeviceName">' + connection.DeviceName + '</div>';
|
||||
html += '<div class="sessionAppSecondaryText">' + DashboardPage.getAppSecondaryText(connection) + '</div>';
|
||||
html += '<div class="sessionDeviceName">' + session.DeviceName + '</div>';
|
||||
html += '<div class="sessionAppSecondaryText">' + DashboardPage.getAppSecondaryText(session) + '</div>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="sessionUserInfo">';
|
||||
|
||||
var userImage = DashboardPage.getUserImage(connection);
|
||||
var userImage = DashboardPage.getUserImage(session);
|
||||
if (userImage) {
|
||||
html += '<div class="sessionUserImage" data-src="' + userImage + '">';
|
||||
html += '<img src="' + userImage + '" />';
|
||||
|
|
@ -271,12 +275,12 @@
|
|||
html += '</div>';
|
||||
|
||||
html += '<div class="sessionUserName">';
|
||||
html += DashboardPage.getUsersHtml(connection);
|
||||
html += DashboardPage.getUsersHtml(session);
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
var nowPlayingName = DashboardPage.getNowPlayingName(connection);
|
||||
var nowPlayingName = DashboardPage.getNowPlayingName(session);
|
||||
|
||||
html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
|
||||
html += nowPlayingName.html;
|
||||
|
|
@ -284,20 +288,35 @@
|
|||
|
||||
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
|
||||
|
||||
var position = connection.PlayState.PositionTicks || 0;
|
||||
var position = session.PlayState.PositionTicks || 0;
|
||||
var value = (100 * position) / nowPlayingItem.RunTimeTicks;
|
||||
|
||||
html += '<progress class="itemProgressBar" min="0" max="100" value="' + value + '"></progress>';
|
||||
html += '<progress class="itemProgressBar playbackProgress" min="0" max="100" value="' + value + '"></progress>';
|
||||
} else {
|
||||
html += '<progress class="itemProgressBar" min="0" max="100" style="display:none;"></progress>';
|
||||
html += '<progress class="itemProgressBar 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>';
|
||||
} else {
|
||||
html += '<progress class="itemProgressBar transcodingProgress" min="0" max="100" style="display:none;"></progress>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="posterItemOverlayTarget">';
|
||||
|
||||
html += '<div class="sessionNowPlayingStreamInfo">' + DashboardPage.getSessionNowPlayingStreamInfo(connection) + '</div>';
|
||||
html += '<div class="sessionNowPlayingTime">' + DashboardPage.getSessionNowPlayingTime(connection) + '</div>';
|
||||
html += '<div class="sessionNowPlayingStreamInfo">' + DashboardPage.getSessionNowPlayingStreamInfo(session) + '</div>';
|
||||
html += '<div class="sessionNowPlayingTime">' + DashboardPage.getSessionNowPlayingTime(session) + '</div>';
|
||||
|
||||
if (session.TranscodingInfo && session.TranscodingInfo.Framerate) {
|
||||
|
||||
html += '<div class="sessionTranscodingFramerate">' + session.TranscodingInfo.Framerate + ' fps</div>';
|
||||
} else {
|
||||
html += '<div class="sessionTranscodingFramerate"></div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
|
@ -327,6 +346,40 @@
|
|||
|
||||
html += '</div>';
|
||||
|
||||
if (session.TranscodingInfo) {
|
||||
|
||||
html += '<br/>';
|
||||
|
||||
var line = [];
|
||||
|
||||
if (session.TranscodingInfo.Container) {
|
||||
|
||||
line.push(session.TranscodingInfo.Container);
|
||||
}
|
||||
if (session.TranscodingInfo.Bitrate) {
|
||||
|
||||
if (session.TranscodingInfo.Bitrate > 1000000) {
|
||||
line.push((session.TranscodingInfo.Bitrate / 1000000).toFixed(1) + ' Mbps');
|
||||
} else {
|
||||
line.push(Math.floor(session.TranscodingInfo.Bitrate / 1000) + ' kbps');
|
||||
}
|
||||
}
|
||||
if (line.length) {
|
||||
|
||||
html += '<div>' + line.join(' ') + '</div>';
|
||||
}
|
||||
|
||||
if (session.TranscodingInfo.VideoCodec) {
|
||||
|
||||
html += '<div>Video: ' + session.TranscodingInfo.VideoCodec + '</div>';
|
||||
}
|
||||
if (session.TranscodingInfo.AudioCodec && session.TranscodingInfo.AudioCodec != session.TranscodingInfo.Container) {
|
||||
|
||||
html += '<div>Audio: ' + session.TranscodingInfo.AudioCodec + '</div>';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return html;
|
||||
},
|
||||
|
||||
|
|
@ -475,6 +528,8 @@
|
|||
|
||||
$('.sessionAppSecondaryText', row).html(DashboardPage.getAppSecondaryText(session));
|
||||
|
||||
$('.sessionTranscodingFramerate', row).html((session.TranscodingInfo && session.TranscodingInfo.Framerate) ? session.TranscodingInfo.Framerate + ' fps' : '');
|
||||
|
||||
var nowPlayingName = DashboardPage.getNowPlayingName(session);
|
||||
var nowPlayingInfoElem = $('.sessionNowPlayingInfo', row);
|
||||
|
||||
|
|
@ -488,9 +543,18 @@
|
|||
var position = session.PlayState.PositionTicks || 0;
|
||||
var value = (100 * position) / nowPlayingItem.RunTimeTicks;
|
||||
|
||||
$('progress', row).show().val(value);
|
||||
$('.playbackProgress', row).show().val(value);
|
||||
} else {
|
||||
$('progress', row).hide();
|
||||
$('.playbackProgress', row).hide();
|
||||
}
|
||||
|
||||
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
|
||||
|
||||
row.addClass('transcodingSession');
|
||||
$('.transcodingProgress', row).show().val(session.TranscodingInfo.CompletionPercentage);
|
||||
} else {
|
||||
$('.transcodingProgress', row).hide();
|
||||
row.removeClass('transcodingSession');
|
||||
}
|
||||
|
||||
var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
|
||||
|
|
|
|||
|
|
@ -364,7 +364,7 @@ $.fn.createHoverTouch = function () {
|
|||
timerId = setTimeout(function () {
|
||||
|
||||
$(elem).trigger('hovertouch');
|
||||
}, 200);
|
||||
}, 250);
|
||||
}
|
||||
|
||||
function stopTimer(elem) {
|
||||
|
|
|
|||
|
|
@ -1190,7 +1190,8 @@
|
|||
audioChannels: 2,
|
||||
audioBitrate: 128000,
|
||||
StartTimeTicks: startPositionTicks,
|
||||
mediaSourceId: mediaSource.Id
|
||||
mediaSourceId: mediaSource.Id,
|
||||
deviceId: ApiClient.deviceId()
|
||||
};
|
||||
|
||||
var sourceContainer = (mediaSource.Container || '').toLowerCase();
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
SortBy: "SortName",
|
||||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Movie,BoxSet",
|
||||
IncludeItemTypes: "Movie",
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
StartIndex: 0
|
||||
|
|
|
|||
|
|
@ -419,7 +419,7 @@
|
|||
$('.btnAudioTracks', page).buttonEnabled(hasStreams(item, 'Audio') && supportedCommands.indexOf('SetAudioStreamIndex') != -1);
|
||||
$('.btnSubtitles', page).buttonEnabled(hasStreams(item, 'Subtitle') && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1);
|
||||
|
||||
if (item && item.Chapters && item.Chapters.length) {
|
||||
if (item && item.Chapters && item.Chapters.length && playState.CanSeek) {
|
||||
$('.btnChapters', page).buttonEnabled(true);
|
||||
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue