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

update style for active sessions

Browse source
This commit is contained in:
dkanada 2021-02-06 15:48:53 +09:00
parent d7161f9d65
commit 59a673e088
2 changed files with 34 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/assets/css/dashboard.css
View file

@ -320,7 +320,6 @@ div[data-role=controlgroup] a.ui-btn-active {
.sessionCardFooter {
padding-top: 0.5em !important;
padding-bottom: 1em !important;
border-top: 1px solid #eee;
text-align: center;
position: relative;
}
@ -346,15 +345,11 @@ div[data-role=controlgroup] a.ui-btn-active {
right: 0;
bottom: 0;
font-weight: 400;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
}
.sessionNowPlayingContent-withbackground + .sessionNowPlayingInnerContent {
color: #fff !important;
background: rgba(0, 0, 0, 0.7);
}
.sessionAppName {
vertical-align: top;
max-width: 200px;
@ -377,10 +372,6 @@ div[data-role=controlgroup] a.ui-btn-active {
padding: 0.8em 0.5em;
}
.sessionNowPlayingStreamInfo {
white-space: nowrap;
}
.playbackProgress,
.transcodingProgress {
margin: 0;
@ -393,6 +384,7 @@ div[data-role=controlgroup] a.ui-btn-active {
margin: -0.6em;
}
.activeSession .backgroundProgress,
.activeSession .playbackProgress,
.activeSession .transcodingProgress {
position: absolute;
@ -409,9 +401,14 @@ div[data-role=controlgroup] a.ui-btn-active {
}
.transcodingProgress > div {
z-index: 900;
background-color: #dd4919;
}
.backgroundProgress > div {
background-color: #303030;
}
@media all and (max-width: 34.375em) {
.sessionAppName {
max-width: 160px;

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

@ -30,6 +30,9 @@ import confirm from '../../components/confirm/confirm';
const text = [];
const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
text.push(DashboardPage.getSessionNowPlayingStreamInfo(session));
text.push('<br/>');
if (displayPlayMethod === 'Remux') {
title = globalize.translate('Remuxing');
text.push(globalize.translate('RemuxHelp1'));
@ -251,12 +254,13 @@ import confirm from '../../components/confirm/confirm';
} else {
const nowPlayingItem = session.NowPlayingItem;
const className = 'scalableCard card activeSession backdropCard backdropCard-scalable';
const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
html += '<div class="' + className + '" id="' + rowId + '">';
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += '<div class="cardContent">';
const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
html += `<div class="cardContent ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}">`;
if (imgUrl) {
html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';
@ -287,29 +291,19 @@ import confirm from '../../components/confirm/confirm';
html += '<div class="sessionNowPlayingTime">' + DashboardPage.getSessionNowPlayingTime(session) + '</div>';
html += '</div>';
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
html += indicators.getProgressHtml(percent, {
let percent = 100 * session?.PlayState?.PositionTicks / nowPlayingItem?.RunTimeTicks;
html += indicators.getProgressHtml(percent ?? 0, {
containerClass: 'playbackProgress'
});
} else {
// need to leave the element in just in case the device starts playback
html += indicators.getProgressHtml(0, {
containerClass: 'playbackProgress hide'
});
}
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
html += indicators.getProgressHtml(percent, {
percent = session?.TranscodingInfo?.CompletionPercentage?.toFixed(1);
html += indicators.getProgressHtml(percent ?? 0, {
containerClass: 'transcodingProgress'
});
} else {
// same issue as playbackProgress element above
html += indicators.getProgressHtml(0, {
containerClass: 'transcodingProgress hide'
html += indicators.getProgressHtml(100, {
containerClass: 'backgroundProgress'
});
}
html += '</div>';
html += '</div>';
@ -322,18 +316,12 @@ import confirm from '../../components/confirm/confirm';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><span class="material-icons ' + playIcon + '"></span></button>';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionStop paper-icon-button-light ' + btnCssClass + '"><span class="material-icons stop"></span></button>';
btnCssClass = session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length ? '' : ' hide';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionInfo paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate('ViewPlaybackInfo') + '"><span class="material-icons info"></span></button>';
btnCssClass = session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== ServerConnections.deviceId() ? '' : ' hide';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate('SendMessage') + '"><span class="material-icons message"></span></button>';
html += '</div>';
html += '<div class="sessionNowPlayingStreamInfo" style="padding:.5em 0 1em;">';
html += DashboardPage.getSessionNowPlayingStreamInfo(session);
html += '</div>';
html += '<div class="flex align-items-center justify-content-center">';
const userImage = DashboardPage.getUserImage(session);
html += userImage ? '<div class="activitylogUserPhoto" style="background-image:url(\'' + userImage + "');\"></div>" : '<div style="height:1.71em;"></div>';
@ -572,12 +560,6 @@ import confirm from '../../components/confirm/confirm';
row.querySelector('.btnSessionSendMessage').classList.add('hide');
}
if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo) {
row.querySelector('.btnSessionInfo').classList.remove('hide');
} else {
row.querySelector('.btnSessionInfo').classList.add('hide');
}
const btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');
if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl) {
@ -592,7 +574,6 @@ import confirm from '../../components/confirm/confirm';
btnSessionPlayPauseIcon.classList.remove('play_arrow', 'pause');
btnSessionPlayPauseIcon.classList.add(session.PlayState && session.PlayState.IsPaused ? 'play_arrow' : 'pause');
row.querySelector('.sessionNowPlayingStreamInfo').innerHTML = DashboardPage.getSessionNowPlayingStreamInfo(session);
row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session);
row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session);
@ -605,30 +586,17 @@ import confirm from '../../components/confirm/confirm';
}
const playbackProgressElem = row.querySelector('.playbackProgress');
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
playbackProgressElem.outerHTML = indicators.getProgressHtml(percent, {
containerClass: 'playbackProgress'
});
} else {
playbackProgressElem.outerHTML = indicators.getProgressHtml(0, {
containerClass: 'playbackProgress hide'
});
}
const transcodingProgress = row.querySelector('.transcodingProgress');
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
transcodingProgress.outerHTML = indicators.getProgressHtml(percent, {
let percent = 100 * session?.PlayState?.PositionTicks / nowPlayingItem?.RunTimeTicks;
playbackProgressElem.outerHTML = indicators.getProgressHtml(percent ?? 0, {
containerClass: 'playbackProgress'
});
percent = session?.TranscodingInfo?.CompletionPercentage?.toFixed(1);
transcodingProgress.outerHTML = indicators.getProgressHtml(percent ?? 0, {
containerClass: 'transcodingProgress'
});
} else {
transcodingProgress.outerHTML = indicators.getProgressHtml(0, {
containerClass: 'transcodingProgress hide'
});
}
const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
const imgElem = row.querySelector('.sessionNowPlayingContent');