update latest channel content display

dashboard-ui/channelslatest.html

@@ -15,10 +15,7 @@
             <table class="ehsContent homeEhsContent">
                 <tr>
                     <td>
-                        <div>
+                        <div class="items"></div>
-                            <h1 class="listHeader firstListHeader">${HeaderLatestChannelItems}</h1>
-                        </div>
-                        <div id="items" class="itemsContainer"></div>
                     </td>
                 </tr>
             </table>

dashboard-ui/css/librarybrowser.css

@@ -31,7 +31,6 @@
     background-size: cover;
 }
 
-
 .libraryPage .header {
     padding-bottom: 0;
 }
@@ -75,6 +74,17 @@
     margin-top: 1em;
 }
 
+@media all and (min-width: 900px) {
+
+    .ehsContent {
+        max-width: 880px;
+    }
+
+    .squareEhsContent {
+        max-width: 750px;
+    }
+}
+
 @media all and (min-width: 1000px) {
 
     .ehsContent {

dashboard-ui/css/posteritem.css

@@ -42,9 +42,9 @@
     position: relative;
 }
 
-    #scenesContent .posterItemImage {
+#scenesContent .posterItemImage {
-        background-position-y: center;
+    background-position-y: center;
-    }
+}
 
 .posterItem:hover .posterItemImage {
     -moz-box-shadow: 0 0 12px 7px #38c;
@@ -126,11 +126,11 @@
 }
 
 .squarePosterItem {
-    width: 148px;
+    width: 140px;
 }
 
     .squarePosterItem .posterItemImage {
-        height: 148px;
+        height: 140px;
     }
 
 .storeReviewCount {
@@ -343,31 +343,23 @@
         }
 
     .miniBackdropPosterItem {
-        width: 180px;
+        width: 168px;
     }
 
         .miniBackdropPosterItem .posterItemImage {
-            height: 101.25px;
+            height: 94.5px;
         }
 }
 
 @media all and (min-width: 600px) {
 
 
-    .squarePosterItem {
-        width: 170px;
-    }
-
-        .squarePosterItem .posterItemImage {
-            height: 170px;
-        }
-
     .portraitPosterItem {
-        width: 128px;
+        width: 118px;
     }
 
         .portraitPosterItem .posterItemImage {
-            height: 192px;
+            height: 177px;
         }
 }
 
@@ -407,14 +399,6 @@
 
 @media all and (min-width: 750px) {
 
-    .portraitPosterItem {
-        width: 118px;
-    }
-
-        .portraitPosterItem .posterItemImage {
-            height: 177px;
-        }
-
     .bannerPosterItem {
         width: 330px;
     }
@@ -442,11 +426,11 @@
 @media all and (min-width: 1200px) {
 
     .portraitPosterItem {
-        width: 144px;
+        width: 122px;
     }
 
         .portraitPosterItem .posterItemImage {
-            height: 216px;
+            height: 183px;
         }
 
     .storeReviewCount {
@@ -468,14 +452,6 @@
         width: 19%;
     }
 
-    .squarePosterItem {
-        width: 167px;
-    }
-
-        .squarePosterItem .posterItemImage {
-            height: 167px;
-        }
-
     .backdropPosterItem {
         width: 298px;
     }

dashboard-ui/scripts/channelslatest.js

@@ -1,21 +1,47 @@
 (function ($, document) {
 
-    function reloadItems(page) {
+    function reloadFromChannels(page, channels) {
 
-        Dashboard.showLoadingMsg();
+        var channelsHtml = channels.map(function (c) {
+
+            return '<div id="channel' + c.Id + '"></div>';
+
+        }).join('');
+
+        $('.items', page).html(channelsHtml);
+
+        for (var i = 0, length = channels.length; i < length; i++) {
+
+            var channel = channels[i];
+
+            reloadFromChannel(page, channel, i);
+        }
+    }
+
+    function reloadFromChannel(page, channel, index) {
 
         var options = {
 
-            Limit: 30,
+            Limit: 7,
             Fields: "PrimaryImageAspectRatio",
             Filters: "IsUnplayed",
-            UserId: Dashboard.getCurrentUserId()
+            UserId: Dashboard.getCurrentUserId(),
+            ChannelIds: channel.Id
         };
 
         $.getJSON(ApiClient.getUrl("Channels/Items/Latest", options)).done(function (result) {
 
             var html = '';
 
+            if (result.Items.length) {
+
+                var text = Globalize.translate('HeaderLatestFromChannel').replace('{0}', channel.Name);
+                if (index) {
+                    html += '<h1 class="listHeader">' + text + '</h1>';
+                } else {
+                    html += '<h1 class="listHeader firstListHeader">' + text + '</h1>';
+                }
+            }
             html += LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 shape: 'auto',
@@ -25,8 +51,24 @@
                 lazy: true
             });
 
-            $("#items", page).html(html).trigger('create').createPosterItemMenus();
+            $('#channel' + channel.Id + '', page).html(html).trigger('create').createPosterItemMenus();
-            
+        });
+    }
+
+    function reloadItems(page) {
+
+        Dashboard.showLoadingMsg();
+
+        var options = {
+
+            UserId: Dashboard.getCurrentUserId(),
+            SupportsLatestItems: true
+        };
+
+        $.getJSON(ApiClient.getUrl("Channels", options)).done(function (result) {
+
+            reloadFromChannels(page, result.Items);
+
             Dashboard.hideLoadingMsg();
         });
     }

dashboard-ui/scripts/dashboardpage.js

@@ -50,14 +50,15 @@
 
             Dashboard.updateSystemInfo(systemInfo);
 
-            $('#appVersionNumber', page).html('Version ' + systemInfo.Version);
+            $('#appVersionNumber', page).html(Globalize.translate('LabelVersionNumber').replace('{0}', systemInfo.Version));
 
             var port = systemInfo.HttpServerPortNumber;
 
             if (port == systemInfo.WebSocketPortNumber) {
-                $('#ports', page).html('Running on port <b>' + port + '</b>');
+                
+                $('#ports', page).html(Globalize.translate('LabelRunningOnPort').replace('{0}', '<b>' + port + '</b>'));
             } else {
-                $('#ports', page).html('Running on ports <b>' + port + '</b> and <b>' + systemInfo.WebSocketPortNumber + '</b>');
+                $('#ports', page).html(Globalize.translate('LabelRunningOnPorts').replace('{0}', '<b>' + port + '</b>').replace('{1}', '<b>' + systemInfo.WebSocketPortNumber + '</b>'));
             }
 
             if (systemInfo.CanSelfRestart) {
@@ -340,13 +341,13 @@
         html += '<div>';
 
         if (session.PlayState.PlayMethod == 'Transcode') {
-            html += 'Transcoding';
+            html += Globalize.translate('LabelPlayMethodTranscoding');
         }
         else if (session.PlayState.PlayMethod == 'DirectStream') {
-            html += 'Direct Streaming';
+            html += Globalize.translate('LabelPlayMethodDirectStream');
         }
         else if (session.PlayState.PlayMethod == 'DirectPlay') {
-            html += 'Direct Playing';
+            html += Globalize.translate('LabelPlayMethodDirectPlay');
         }
 
         html += '</div>';
@@ -376,11 +377,11 @@
 
             if (session.TranscodingInfo.VideoCodec) {
 
-                html += '<div>Video: ' + session.TranscodingInfo.VideoCodec + '</div>';
+                html += '<div>' + Globalize.translate('LabelVideoCodec').replace('{0}', session.TranscodingInfo.VideoCodec) + '</div>';
             }
             if (session.TranscodingInfo.AudioCodec && session.TranscodingInfo.AudioCodec != session.TranscodingInfo.Container) {
 
-                html += '<div>Audio: ' + session.TranscodingInfo.AudioCodec + '</div>';
+                html += '<div>' + Globalize.translate('LabelAudioCodec').replace('{0}', session.TranscodingInfo.AudioCodec) + '</div>';
             }
 
         }
@@ -707,10 +708,10 @@
 
                 html += "<span style='color:#009F00;margin-left:5px;margin-right:5px;'>" + progress + "%</span>";
 
-                html += '<button type="button" data-icon="stop" data-iconpos="notext" data-inline="true" data-mini="true" onclick="DashboardPage.stopTask(\'' + task.Id + '\');">Stop</button>';
+                html += '<button type="button" data-icon="stop" data-iconpos="notext" data-inline="true" data-mini="true" onclick="DashboardPage.stopTask(\'' + task.Id + '\');">' + Globalize.translate('ButtonStop') + '</button>';
             }
             else if (task.State == "Cancelling") {
-                html += '<span style="color:#cc0000;">Stopping</span>';
+                html += '<span style="color:#cc0000;">' + Globalize.translate('LabelStopping') + '</span>';
             }
 
             html += '</p>';
@@ -730,7 +731,9 @@
 
             var externalUrl = systemInfo.WanAddress + "/mediabrowser";
 
-            $('.externalUrl', page).html('Remote access: <a href="' + externalUrl + '" target="_blank">' + externalUrl + '</a>').show().trigger('create');
+            var remoteAccessHtml = Globalize.translate('LabelRemoteAccessUrl').replace('{0}', '<a href="' + externalUrl + '" target="_blank">' + externalUrl + '</a>');
+
+            $('.externalUrl', page).html(remoteAccessHtml).show().trigger('create');
         } else {
             $('.externalUrl', page).hide();
         }

dashboard-ui/scripts/indexpage.js

@@ -187,7 +187,7 @@
 
         var options = {
 
-            Limit: screenWidth >= 2400 ? 10 : (screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : (screenWidth >= 800 ? 8 : 6))),
+            Limit: screenWidth >= 2400 ? 10 : (screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : (screenWidth >= 800 ? 7 : 6))),
             Fields: "PrimaryImageAspectRatio",
             Filters: "IsUnplayed",
             UserId: userId

dashboard-ui/scripts/movieslatest.js

@@ -13,7 +13,7 @@
             SortBy: "DateCreated",
             SortOrder: "Descending",
             IncludeItemTypes: "Movie",
-            Limit: screenWidth >= 1920 ? 32 : (screenWidth >= 1440 ? 32 : (screenWidth >= 800 ? 24 : 18)),
+            Limit: screenWidth >= 1920 ? 32 : (screenWidth >= 1440 ? 32 : (screenWidth >= 800 ? 28 : 18)),
             Recursive: true,
             Fields: "PrimaryImageAspectRatio",
             Filters: "IsUnplayed",

dashboard-ui/scripts/moviesrecommended.js

@@ -79,7 +79,7 @@
 
             userId: Dashboard.getCurrentUserId(),
             categoryLimit: screenWidth >= 1200 ? 6 : 3,
-            itemLimit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 6),
+            itemLimit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 7),
             Fields: "PrimaryImageAspectRatio"
         });
 

dashboard-ui/scripts/musicrecommended.js

@@ -13,7 +13,7 @@
             SortBy: "DateCreated",
             SortOrder: "Descending",
             IncludeItemTypes: "MusicAlbum",
-            Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 5),
+            Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 6),
             Recursive: true,
             Fields: "PrimaryImageAspectRatio",
             ParentId: parentId
@@ -36,7 +36,7 @@
             SortBy: "DateCreated",
             SortOrder: "Descending",
             IncludeItemTypes: "Audio",
-            Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 5),
+            Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 6),
             Recursive: true,
             Fields: "PrimaryImageAspectRatio,AudioInfo",
             ParentId: parentId
@@ -59,7 +59,7 @@
             SortBy: "DatePlayed",
             SortOrder: "Descending",
             IncludeItemTypes: "Audio",
-            Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 5),
+            Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 6),
             Recursive: true,
             Fields: "PrimaryImageAspectRatio,AudioInfo",
             Filters: "IsPlayed",
@@ -89,7 +89,7 @@
             SortBy: "PlayCount",
             SortOrder: "Descending",
             IncludeItemTypes: "Audio",
-            Limit: screenWidth >= 1920 ? 14 : (screenWidth >= 1440 ? 14 : 10),
+            Limit: screenWidth >= 1920 ? 14 : (screenWidth >= 1440 ? 14 : 12),
             Recursive: true,
             Fields: "PrimaryImageAspectRatio,AudioInfo",
             Filters: "IsPlayed",