From 2a7d70894495e25e15c57b92609f54af232e70b0 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Fri, 26 Feb 2021 13:24:23 -0500
Subject: [PATCH] Merge pull request #2378 from jellyfin/session-style

update style for active sessions

(cherry picked from commit bc557b19701292f101bc63704777905731efa907)
Signed-off-by: Joshua M. Boniface <joshua@boniface.me>
---
 src/assets/css/dashboard.css           | 17 ++---
 src/controllers/dashboard/dashboard.js | 93 +++++++++-----------------
 src/strings/en-us.json                 |  2 +
 3 files changed, 40 insertions(+), 72 deletions(-)

diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css
index 547f7dab24..efa0c09206 100644
--- a/src/assets/css/dashboard.css
+++ b/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;
diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index 0bc88b851b..d77a97341e 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/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">';
-                const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
+                html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
 
                 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) {
-                    const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
-                    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'
-                    });
-                }
+                let percent = 100 * session?.PlayState?.PositionTicks / nowPlayingItem?.RunTimeTicks;
+                html += indicators.getProgressHtml(percent || 0, {
+                    containerClass: 'playbackProgress'
+                });
 
-                if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
-                    const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
-                    html += indicators.getProgressHtml(percent, {
-                        containerClass: 'transcodingProgress'
-                    });
-                } else {
-                    // same issue as playbackProgress element above
-                    html += indicators.getProgressHtml(0, {
-                        containerClass: 'transcodingProgress hide'
-                    });
-                }
+                percent = session?.TranscodingInfo?.CompletionPercentage?.toFixed(1);
+                html += indicators.getProgressHtml(percent || 0, {
+                    containerClass: 'transcodingProgress'
+                });
+
+                html += indicators.getProgressHtml(100, {
+                    containerClass: 'backgroundProgress'
+                });
 
                 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) {
-                const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
-                transcodingProgress.outerHTML = indicators.getProgressHtml(percent, {
-                    containerClass: 'transcodingProgress'
-                });
-            } else {
-                transcodingProgress.outerHTML = indicators.getProgressHtml(0, {
-                    containerClass: 'transcodingProgress hide'
-                });
-            }
+            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'
+            });
 
             const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
             const imgElem = row.querySelector('.sessionNowPlayingContent');
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index 2761066717..4982637825 100644
--- a/src/strings/en-us.json
+++ b/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",
@@ -264,6 +265,7 @@
     "Filters": "Filters",
     "Folders": "Folders",
     "FormatValue": "Format: {0}",
+    "Framerate": "Framerate",
     "Friday": "Friday",
     "Fullscreen": "Full screen",
     "General": "General",