From 59a673e0882e03b0247ac02d4172ad9a64234fe3 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Sat, 6 Feb 2021 15:48:53 +0900
Subject: [PATCH 1/5] update style for active sessions

---
 src/assets/css/dashboard.css           | 17 +++--
 src/controllers/dashboard/dashboard.js | 86 ++++++++------------------
 2 files changed, 34 insertions(+), 69 deletions(-)

diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css
index 547f7dab2..34a9e9cc8 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: 900;
     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 0bc88b851..bc7ae8498 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/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">';
-                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, {
-                        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 +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, {
-                    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');

From ebe3ff242c36217fd59c495439fb416634fe49f1 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Sun, 7 Feb 2021 00:21:23 +0900
Subject: [PATCH 2/5] remove useless ternary and always apply background color

---
 src/controllers/dashboard/dashboard.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index bc7ae8498..14f434dc5 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -260,7 +260,7 @@ import confirm from '../../components/confirm/confirm';
                 html += '<div class="cardBox visualCardBox">';
                 html += '<div class="cardScalable visualCardBox-cardScalable">';
                 html += '<div class="cardPadder cardPadder-backdrop"></div>';
-                html += `<div class="cardContent ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}">`;
+                html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
 
                 if (imgUrl) {
                     html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';

From d93d2b020fe55894275ccb2213a1b2f8563d6b6e Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Fri, 19 Feb 2021 11:15:39 +0900
Subject: [PATCH 3/5] update progress bar values

---
 src/controllers/dashboard/dashboard.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index 14f434dc5..21c4de798 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -292,12 +292,12 @@ import confirm from '../../components/confirm/confirm';
                 html += '</div>';
 
                 let percent = 100 * session?.PlayState?.PositionTicks / nowPlayingItem?.RunTimeTicks;
-                html += indicators.getProgressHtml(percent ?? 0, {
+                html += indicators.getProgressHtml(percent || 0, {
                     containerClass: 'playbackProgress'
                 });
 
                 percent = session?.TranscodingInfo?.CompletionPercentage?.toFixed(1);
-                html += indicators.getProgressHtml(percent ?? 0, {
+                html += indicators.getProgressHtml(percent || 0, {
                     containerClass: 'transcodingProgress'
                 });
 
@@ -589,12 +589,12 @@ import confirm from '../../components/confirm/confirm';
             const transcodingProgress = row.querySelector('.transcodingProgress');
 
             let percent = 100 * session?.PlayState?.PositionTicks / nowPlayingItem?.RunTimeTicks;
-            playbackProgressElem.outerHTML = indicators.getProgressHtml(percent ?? 0, {
+            playbackProgressElem.outerHTML = indicators.getProgressHtml(percent || 0, {
                 containerClass: 'playbackProgress'
             });
 
             percent = session?.TranscodingInfo?.CompletionPercentage?.toFixed(1);
-            transcodingProgress.outerHTML = indicators.getProgressHtml(percent ?? 0, {
+            transcodingProgress.outerHTML = indicators.getProgressHtml(percent || 0, {
                 containerClass: 'transcodingProgress'
             });
 

From 182dc10fb130e7de1aadb842f7ed8042548379c0 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Fri, 19 Feb 2021 11:21:34 +0900
Subject: [PATCH 4/5] reduce z-index for transcode progress

---
 src/assets/css/dashboard.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css
index 34a9e9cc8..efa0c0920 100644
--- a/src/assets/css/dashboard.css
+++ b/src/assets/css/dashboard.css
@@ -401,7 +401,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .transcodingProgress > div {
-    z-index: 900;
+    z-index: 10;
     background-color: #dd4919;
 }
 

From 3616d0fa152d1447b716ae614d9aabcb2cec5545 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Thu, 25 Feb 2021 23:12:20 +0900
Subject: [PATCH 5/5] improve session information dialog

---
 src/controllers/dashboard/dashboard.js | 13 +++++++------
 src/strings/en-us.json                 |  2 ++
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index 21c4de798..d77a97341 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -30,9 +30,6 @@ 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'));
@@ -43,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/>');
@@ -403,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;
@@ -550,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) {
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index 23457106d..e4250bf95 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",
@@ -261,6 +262,7 @@
     "Filters": "Filters",
     "Folders": "Folders",
     "FormatValue": "Format: {0}",
+    "Framerate": "Framerate",
     "Friday": "Friday",
     "Fullscreen": "Full screen",
     "General": "General",