Merge pull request #2378 from jellyfin/session-style

update style for active sessions

src/assets/css/dashboard.css

@@ -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: 10;
     background-color: #dd4919;
 }
 
+.backgroundProgress > div {
+    background-color: #303030;
+}
+
 @media all and (max-width: 34.375em) {
     .sessionAppName {
         max-width: 160px;

src/controllers/dashboard/dashboard.js

@@ -40,9 +40,13 @@ import confirm from '../../components/confirm/confirm';
             text.push(globalize.translate('DirectStreamHelp1'));
             text.push('<br/>');
             text.push(globalize.translate('DirectStreamHelp2'));
+        } else if (displayPlayMethod === 'DirectPlay') {
+            title = globalize.translate('DirectPlaying');
+            text.push(globalize.translate('DirectPlayHelp'));
         } else if (displayPlayMethod === 'Transcode') {
             title = globalize.translate('Transcoding');
             text.push(globalize.translate('MediaIsBeingConverted'));
+            text.push(DashboardPage.getSessionNowPlayingStreamInfo(session));
 
             if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) {
                 text.push('<br/>');
@@ -251,12 +255,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">';
+                html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
-                const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
 
                 if (imgUrl) {
                     html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';
@@ -287,29 +292,19 @@ import confirm from '../../components/confirm/confirm';
                 html += '<div class="sessionNowPlayingTime">' + DashboardPage.getSessionNowPlayingTime(session) + '</div>';
                 html += '</div>';
 
-                if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
+                let percent = 100 * session?.PlayState?.PositionTicks / nowPlayingItem?.RunTimeTicks;
-                    const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
+                html += indicators.getProgressHtml(percent || 0, {
-                    html += indicators.getProgressHtml(percent, {
                     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) {
+                percent = session?.TranscodingInfo?.CompletionPercentage?.toFixed(1);
-                    const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
+                html += indicators.getProgressHtml(percent || 0, {
-                    html += indicators.getProgressHtml(percent, {
                     containerClass: 'transcodingProgress'
                 });
-                } else {
+
-                    // same issue as playbackProgress element above
+                html += indicators.getProgressHtml(100, {
-                    html += indicators.getProgressHtml(0, {
+                    containerClass: 'backgroundProgress'
-                        containerClass: 'transcodingProgress hide'
                 });
-                }
 
                 html += '</div>';
                 html += '</div>';
@@ -322,18 +317,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>';
@@ -415,10 +404,8 @@ import confirm from '../../components/confirm/confirm';
             } else if (displayPlayMethod === 'DirectStream') {
                 html += globalize.translate('DirectStreaming');
             } else if (displayPlayMethod === 'Transcode') {
-                html += globalize.translate('Transcoding');
-
                 if (session.TranscodingInfo && session.TranscodingInfo.Framerate) {
-                    html += ' (' + session.TranscodingInfo.Framerate + ' fps)';
+                    html += `${globalize.translate('Framerate')}: ${session.TranscodingInfo.Framerate}fps`;
                 }
 
                 showTranscodingInfo = true;
@@ -562,8 +549,10 @@ import confirm from '../../components/confirm/confirm';
 
             if (nowPlayingItem) {
                 row.classList.add('playingSession');
+                row.querySelector('.btnSessionInfo').classList.remove('hide');
             } else {
                 row.classList.remove('playingSession');
+                row.querySelector('.btnSessionInfo').classList.add('hide');
             }
 
             if (session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1) {
@@ -572,12 +561,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 +575,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 +587,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) {
+            let percent = 100 * session?.PlayState?.PositionTicks / nowPlayingItem?.RunTimeTicks;
-                const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
+            playbackProgressElem.outerHTML = indicators.getProgressHtml(percent || 0, {
-                transcodingProgress.outerHTML = indicators.getProgressHtml(percent, {
+                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');

src/strings/en-us.json

@@ -176,6 +176,7 @@
     "Director": "Director",
     "Directors": "Directors",
     "DirectPlaying": "Direct playing",
+    "DirectPlayHelp": "The source file is entirely compatible with this client, and the session is receiving the file without modifications.",
     "DirectStreamHelp1": "The video stream is compatible with the device, but has an incompatible audio format (DTS, TRUEHD, etc) or number of audio channels. The video stream will be repackaged losslessly on the fly before being sent to the device. Only the audio stream will be transcoded.",
     "DirectStreamHelp2": "Power consumed by direct streaming usually depends on the audio profile. Only the video stream is lossless.",
     "DirectStreaming": "Direct streaming",
@@ -263,6 +264,7 @@
     "Filters": "Filters",
     "Folders": "Folders",
     "FormatValue": "Format: {0}",
+    "Framerate": "Framerate",
     "Friday": "Friday",
     "Fullscreen": "Full screen",
     "General": "General",