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

src/controllers/dashboard/dashboard.js

@@ -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">';
+                html += `<div class="cardContent ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}">`;
-                const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
 
                 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) {
+                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'
-                        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'
-                        containerClass: 'transcodingProgress'
+                });
-                    });
+
-                } else {
+                html += indicators.getProgressHtml(100, {
-                    // same issue as playbackProgress element above
+                    containerClass: 'backgroundProgress'
-                    html += indicators.getProgressHtml(0, {
+                });
-                        containerClass: 'transcodingProgress hide'
-                    });
-                }
 
                 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) {
+            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'
-                    containerClass: 'transcodingProgress'
+            });
-                });
+
-            } else {
+            percent = session?.TranscodingInfo?.CompletionPercentage?.toFixed(1);
-                transcodingProgress.outerHTML = indicators.getProgressHtml(0, {
+            transcodingProgress.outerHTML = indicators.getProgressHtml(percent ?? 0, {
-                    containerClass: 'transcodingProgress hide'
+                containerClass: 'transcodingProgress'
-                });
+            });
-            }
 
             const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
             const imgElem = row.querySelector('.sessionNowPlayingContent');