display additional transcoding info in dashboard

dashboard-ui/css/site.css

@@ -32,18 +32,21 @@
     font-weight: 100;
     src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/RobotoThin.woff) format('woff');
 }
+
 @font-face {
     font-family: 'Roboto';
     font-style: normal;
     font-weight: 300;
     src: local('Roboto Light'), local('Roboto-Light'), url(fonts/RobotoLight.woff) format('woff');
 }
+
 @font-face {
     font-family: 'Roboto';
     font-style: normal;
     font-weight: 400;
     src: local('Roboto Regular'), local('Roboto-Regular'), url(fonts/RobotoRegular.woff) format('woff');
 }
+
 @font-face {
     font-family: 'Roboto';
     font-style: normal;
@@ -941,7 +944,7 @@ progress {
 .sessionUserInfo {
     position: absolute;
     right: 0;
-    bottom: 7px;
+    bottom: 11px;
     padding: .5em;
     text-align: right;
 }
@@ -953,7 +956,7 @@ progress {
 .sessionNowPlayingInfo {
     position: absolute;
     left: 0;
-    bottom: 7px;
+    bottom: 11px;
     padding: .5em;
     max-width: 150px;
     overflow: hidden;
@@ -966,7 +969,7 @@ progress {
     margin-right: 5px;
 }
 
-.activeSession progress {
+.activeSession .playbackProgress {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -1005,7 +1008,14 @@ progress {
     color: #fff;
     position: absolute;
     right: 10px;
-    bottom: 15px;
+    bottom: 19px;
+}
+
+.sessionTranscodingFramerate {
+    position: absolute;
+    left: 10px;
+    bottom: 19px;
+    color: #fff;
 }
 
 .sessionNowPlayingStreamInfo {
@@ -1015,6 +1025,42 @@ progress {
     top: 10px;
 }
 
+.activeSession .transcodingProgress {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 5px;
+    width: 100%;
+    opacity: .9;
+    z-index: 1000;
+    position: absolute;
+}
+
+.transcodingSession .playbackProgress {
+    bottom: 5px;
+}
+
+/* Firefox */
+.transcodingProgress::-moz-progress-bar {
+    border-radius: 5px;
+    background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% )!important;
+}
+
+/* Chrome */
+.transcodingProgress::-webkit-progress-value {
+    border-radius: 5px;
+    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(221, 73, 25)), color-stop(1, rgb(221, 73, 25)) )!important;
+    background-image: -webkit-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% )!important;
+}
+
+/* Polyfill */
+.transcodingProgress[aria-valuenow]:before {
+    border-radius: 5px;
+    background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% )!important;
+    background-image: -ms-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% )!important;
+    background-image: -o-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% )!important;
+}
+
 @media all and (max-width: 1000px) {
 
     .activeSession {

dashboard-ui/scripts/dashboardpage.js

@@ -215,21 +215,25 @@
 
         for (var i = 0, length = sessions.length; i < length; i++) {
 
-            var connection = sessions[i];
+            var session = sessions[i];
 
-            var rowId = 'session' + connection.Id;
+            var rowId = 'session' + session.Id;
 
             var elem = $('#' + rowId, page);
 
             if (elem.length) {
-                DashboardPage.updateSession(elem, connection);
+                DashboardPage.updateSession(elem, session);
                 continue;
             }
 
-            var nowPlayingItem = connection.NowPlayingItem;
+            var nowPlayingItem = session.NowPlayingItem;
 
             var className = nowPlayingItem ? 'playingSession activeSession' : 'activeSession';
 
+            if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
+                className += ' transcodingSession';
+            }
+
             html += '<div class="' + className + '" id="' + rowId + '">';
 
             html += '<div class="sessionNowPlayingContent"';
@@ -246,22 +250,22 @@
 
             html += '<div class="sessionAppInfo">';
 
-            var clientImage = DashboardPage.getClientImage(connection);
+            var clientImage = DashboardPage.getClientImage(session);
 
             if (clientImage) {
                 html += clientImage;
             }
 
             html += '<div class="sessionAppName" style="display:inline-block;">';
-            html += '<div class="sessionDeviceName">' + connection.DeviceName + '</div>';
+            html += '<div class="sessionDeviceName">' + session.DeviceName + '</div>';
-            html += '<div class="sessionAppSecondaryText">' + DashboardPage.getAppSecondaryText(connection) + '</div>';
+            html += '<div class="sessionAppSecondaryText">' + DashboardPage.getAppSecondaryText(session) + '</div>';
             html += '</div>';
 
             html += '</div>';
 
             html += '<div class="sessionUserInfo">';
 
-            var userImage = DashboardPage.getUserImage(connection);
+            var userImage = DashboardPage.getUserImage(session);
             if (userImage) {
                 html += '<div class="sessionUserImage" data-src="' + userImage + '">';
                 html += '<img src="' + userImage + '" />';
@@ -271,12 +275,12 @@
             html += '</div>';
 
             html += '<div class="sessionUserName">';
-            html += DashboardPage.getUsersHtml(connection);
+            html += DashboardPage.getUsersHtml(session);
             html += '</div>';
 
             html += '</div>';
 
-            var nowPlayingName = DashboardPage.getNowPlayingName(connection);
+            var nowPlayingName = DashboardPage.getNowPlayingName(session);
 
             html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
             html += nowPlayingName.html;
@@ -284,20 +288,35 @@
 
             if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
 
-                var position = connection.PlayState.PositionTicks || 0;
+                var position = session.PlayState.PositionTicks || 0;
                 var value = (100 * position) / nowPlayingItem.RunTimeTicks;
 
-                html += '<progress class="itemProgressBar" min="0" max="100" value="' + value + '"></progress>';
+                html += '<progress class="itemProgressBar playbackProgress" min="0" max="100" value="' + value + '"></progress>';
             } else {
-                html += '<progress class="itemProgressBar" min="0" max="100" style="display:none;"></progress>';
+                html += '<progress class="itemProgressBar playbackProgress" min="0" max="100" style="display:none;"></progress>';
+            }
+
+            if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
+
+                html += '<progress class="itemProgressBar transcodingProgress" min="0" max="100" value="' + session.TranscodingInfo.CompletionPercentage.toFixed(1) + '"></progress>';
+            } else {
+                html += '<progress class="itemProgressBar transcodingProgress" min="0" max="100" style="display:none;"></progress>';
             }
 
             html += '</div>';
 
             html += '<div class="posterItemOverlayTarget">';
 
-            html += '<div class="sessionNowPlayingStreamInfo">' + DashboardPage.getSessionNowPlayingStreamInfo(connection) + '</div>';
+            html += '<div class="sessionNowPlayingStreamInfo">' + DashboardPage.getSessionNowPlayingStreamInfo(session) + '</div>';
-            html += '<div class="sessionNowPlayingTime">' + DashboardPage.getSessionNowPlayingTime(connection) + '</div>';
+            html += '<div class="sessionNowPlayingTime">' + DashboardPage.getSessionNowPlayingTime(session) + '</div>';
+
+            if (session.TranscodingInfo && session.TranscodingInfo.Framerate) {
+
+                html += '<div class="sessionTranscodingFramerate">' + session.TranscodingInfo.Framerate + ' fps</div>';
+            } else {
+                html += '<div class="sessionTranscodingFramerate"></div>';
+            }
+
             html += '</div>';
 
             html += '</div>';
@@ -327,6 +346,40 @@
 
         html += '</div>';
 
+        if (session.TranscodingInfo) {
+
+            html += '<br/>';
+
+            var line = [];
+
+            if (session.TranscodingInfo.Container) {
+
+                line.push(session.TranscodingInfo.Container);
+            }
+            if (session.TranscodingInfo.Bitrate) {
+
+                if (session.TranscodingInfo.Bitrate > 1000000) {
+                    line.push((session.TranscodingInfo.Bitrate / 1000000).toFixed(1) + ' Mbps');
+                } else {
+                    line.push(Math.floor(session.TranscodingInfo.Bitrate / 1000) + ' kbps');
+                }
+            }
+            if (line.length) {
+
+                html += '<div>' + line.join(' ') + '</div>';
+            }
+
+            if (session.TranscodingInfo.VideoCodec) {
+
+                html += '<div>Video: ' + session.TranscodingInfo.VideoCodec + '</div>';
+            }
+            if (session.TranscodingInfo.AudioCodec && session.TranscodingInfo.AudioCodec != session.TranscodingInfo.Container) {
+
+                html += '<div>Audio: ' + session.TranscodingInfo.AudioCodec + '</div>';
+            }
+
+        }
+
         return html;
     },
 
@@ -475,6 +528,8 @@
 
         $('.sessionAppSecondaryText', row).html(DashboardPage.getAppSecondaryText(session));
 
+        $('.sessionTranscodingFramerate', row).html((session.TranscodingInfo && session.TranscodingInfo.Framerate) ? session.TranscodingInfo.Framerate + ' fps' : '');
+
         var nowPlayingName = DashboardPage.getNowPlayingName(session);
         var nowPlayingInfoElem = $('.sessionNowPlayingInfo', row);
 
@@ -488,9 +543,18 @@
             var position = session.PlayState.PositionTicks || 0;
             var value = (100 * position) / nowPlayingItem.RunTimeTicks;
 
-            $('progress', row).show().val(value);
+            $('.playbackProgress', row).show().val(value);
         } else {
-            $('progress', row).hide();
+            $('.playbackProgress', row).hide();
+        }
+
+        if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
+
+            row.addClass('transcodingSession');
+            $('.transcodingProgress', row).show().val(session.TranscodingInfo.CompletionPercentage);
+        } else {
+            $('.transcodingProgress', row).hide();
+            row.removeClass('transcodingSession');
         }
 
         var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';

dashboard-ui/scripts/librarymenu.js

@@ -364,7 +364,7 @@ $.fn.createHoverTouch = function () {
         timerId = setTimeout(function () {
 
             $(elem).trigger('hovertouch');
-        }, 200);
+        }, 250);
     }
 
     function stopTimer(elem) {

dashboard-ui/scripts/mediaplayer.js

@@ -1190,7 +1190,8 @@
                 audioChannels: 2,
                 audioBitrate: 128000,
                 StartTimeTicks: startPositionTicks,
-                mediaSourceId: mediaSource.Id
+                mediaSourceId: mediaSource.Id,
+                deviceId: ApiClient.deviceId()
             };
 
             var sourceContainer = (mediaSource.Container || '').toLowerCase();

dashboard-ui/scripts/movies.js

@@ -7,7 +7,7 @@
 
         SortBy: "SortName",
         SortOrder: "Ascending",
-        IncludeItemTypes: "Movie,BoxSet",
+        IncludeItemTypes: "Movie",
         Recursive: true,
         Fields: "PrimaryImageAspectRatio",
         StartIndex: 0

dashboard-ui/scripts/nowplayingpage.js

@@ -419,7 +419,7 @@
         $('.btnAudioTracks', page).buttonEnabled(hasStreams(item, 'Audio') && supportedCommands.indexOf('SetAudioStreamIndex') != -1);
         $('.btnSubtitles', page).buttonEnabled(hasStreams(item, 'Subtitle') && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1);
 
-        if (item && item.Chapters && item.Chapters.length) {
+        if (item && item.Chapters && item.Chapters.length && playState.CanSeek) {
             $('.btnChapters', page).buttonEnabled(true);
 
         } else {