add new web client sidebar

dashboard-ui/channels.html

@@ -8,6 +8,8 @@
 
         <div data-role="content">
             <div class="viewSettings">
+                <h1 style="margin: 0 1em 0 0; display: inline-block; vertical-align: middle;">${HeaderChannels}</h1>
+
                 <div class="listTopPaging">
                 </div>
             </div>

dashboard-ui/collections.html

@@ -10,6 +10,9 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
+
+                <h1 style="margin: 0 1em 0 0; display: inline-block; vertical-align: middle;">${HeaderCollections}</h1>
+
                 <div class="viewControls" data-role="controlgroup" data-type="horizontal">
                     <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="${ButtonSort}" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonSort}</button>
                     <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="${ButtonFilter}" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonFilter}</button>

dashboard-ui/css/librarybrowser.css

@@ -961,6 +961,17 @@ a.itemTag:hover {
     margin-left: .5em;
 }
 
+@media all and (min-width: 750px) {
+
+    .lnkSibling:not(.hide) {
+        display: block;
+    }
+
+    .itemBackdrop:not(.noBackdrop) {
+        border-bottom: 1px solid #111;
+    }
+}
+
 @media all and (min-height: 500px) {
 
     .alphabetPicker {

dashboard-ui/css/librarymenu.css

@@ -1,11 +1,35 @@
 .libraryPage {
-    padding-top: 48px !important;
+    padding-top: 54px !important;
 }
 
     .libraryPage:not(.metadataEditorPage):not(.noSecondaryNavPage) {
-        padding-top: 91px !important;
+        padding-top: 97px !important;
     }
 
+.desktopLibraryMenu {
+    position: fixed;
+    left: 0;
+    z-index: 1001;
+    top: 54px;
+    background-color: #181818;
+    width: 200px;
+    min-height: 100px;
+    border-bottom-right-radius: 5px;
+}
+
+.itemDetailPage .desktopLibraryMenu {
+    background-color: rgba(24,24,24,.6);
+}
+
+.metadataEditorPage .desktopLibraryMenu {
+    display: none;
+}
+
+.desktopLibraryMenuDivider {
+    height: 1px;
+    background: #333;
+    margin: .5em 0;
+}
 
 .viewMenuBar {
     font-weight: bold;
@@ -14,13 +38,9 @@
     left: 0;
     z-index: 1000;
     top: 0;
-    padding-left: 10px;
     background: #181818;
-    border-bottom: 1px solid #080808;
-}
-
-.viewMenuLink {
-    font-size: 90%;
+    padding: 3px .25em 3px 1em;
+    border-bottom: 1px solid #101010;
 }
 
 .viewMenuLink {
@@ -31,6 +51,10 @@
     vertical-align: middle;
 }
 
+    .viewMenuLink:hover {
+        background-color: #555;
+    }
+
 .viewMenuBar .btnCurrentUser {
     padding: 7px 1em 6px;
 }
@@ -48,49 +72,84 @@
     vertical-align: top;
 }
 
-.selectedMediaFolder {
-    color: #fff!important;
+.viewMenuTextLink {
+    display: block;
+    padding: .6em .5em .6em 35px!important;
+    font-size: 15px;
+    font-weight: 300!important;
+    font-family: Roboto;
 }
 
-.viewMenuBar .selectedMediaFolder:before {
-    content: '\25BA';
-    color: #fff;
+.musicViewMenu {
+    background-image: url(images/items/folders/music.png);
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    background-position: 8px 8px;
+}
+
+.tvshowsViewMenu {
+    background-image: url(images/items/folders/tv.png);
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    background-position: 8px 8px;
+}
+
+.moviesViewMenu {
+    background-image: url(images/items/folders/movies.png);
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    background-position: 8px center;
+}
+
+.gamesViewMenu {
+    background-image: url(images/items/folders/games.png);
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    background-position: 8px 8px;
+}
+
+.channelsViewMenu {
+    background-image: url(images/items/folders/channels.png);
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    background-position: 8px center;
+}
+
+.booksViewMenu {
+    background-image: url(images/items/folders/books.png);
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    background-position: 8px center;
+}
+
+.collectionsViewMenu, .generalViewMenu, .homeVideosViewMenu {
+    background-image: url(images/items/folders/homevideos.png);
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    background-position: 8px center;
 }
 
 .viewMenuSecondary {
     float: right;
 }
 
-.viewMenuTextLink {
-    display: none;
-    height: 20px;
-    padding-top: 9px;
-    text-transform: uppercase;
-    font-size: 14px;
-    font-weight: 400!important;
-}
-
-.viewMenuTextLink {
-    display: inline-block;
-}
-
-.viewName {
-    vertical-align: middle;
-}
-
-.selectedViewLink {
+.selectedMediaFolder {
+    background-color: #38c!important;
     color: #fff!important;
 }
 
+.itemDetailPage .selectedMediaFolder {
+    background-color: rgba(51,136,204,.8)!important;
+}
 
 .libraryViewNav {
     height: 42px;
     overflow: hidden;
     border-bottom: 1px solid #333;
     position: fixed;
-    left: 0;
     right: 0;
-    top: 48px;
+    left: 0;
+    top: 54px;
     z-index: 1000;
     background-color: #252525;
 }
@@ -130,49 +189,51 @@
     color: #ddd;
 }
 
+.desktopHomeLink {
+    color: #ddd !important;
+    margin-right: 2em;
+    text-decoration: none;
+    font-weight: 400!important;
+}
 
-@media all and (min-width: 950px) {
+    .desktopHomeLink span {
+        vertical-align: middle;
+    }
+
+@media all and (min-width: 1280px) {
 
     .libraryMenuButton {
         display: none;
     }
+
+    .libraryPage:not(.itemDetailPage):not(.metadataEditorPage) {
+        left: 215px !important;
+        width: auto !important;
+        right: 0 !important;
     }
 
-@media all and (max-width: 950px) {
+    .libraryPage:not(.itemDetailPage) .libraryViewNav {
+    }
+}
+
+@media all and (max-width: 1280px) {
 
     .desktopHomeLink {
         display: none;
     }
 
-    .desktopViewMenuLink {
-        display: none;
-    }
-
     .libraryViewNavInner {
         text-align: left;
     }
+
+    .desktopLibraryMenu {
+        display: none;
+    }
 }
 
 @media all and (min-width: 750px) {
 
-    .viewMenuLink {
-        padding-left: .8em;
-        padding-right: .8em;
-    }
-
-    .libraryMenuButton + .viewMenuTextLink {
-        padding-left: .6em !important;
-    }
-
     .viewMenuBar .btnCurrentUser {
         padding-right: 1.5em;
     }
-
-    .lnkSibling:not(.hide) {
-        display: block;
-    }
-
-    .itemBackdrop:not(.noBackdrop) {
-        border-bottom: 1px solid #111;
-    }
 }

dashboard-ui/css/metadataeditor.css

@@ -233,7 +233,7 @@
 
     .editPageSidebar {
         position: fixed;
-        top: 48px;
+        top: 54px;
         bottom: 0;
         left: 0;
         width: 30%;

dashboard-ui/index.html

@@ -4,12 +4,17 @@
     <title>${TitleMediaBrowser}</title>
 </head>
 <body>
-    <div id="indexPage" data-role="page" class="page type-home libraryPage noLibraryMenuSelectionPage noSecondaryNavPage" data-theme="b">
+    <div id="indexPage" data-role="page" class="page type-home libraryPage allLibraryPage noSecondaryNavPage" data-theme="b">
         <div data-role="content">
 
             <table class="ehsContent">
                 <tr>
                     <td>
+                        <h1 class="listHeader">${HeaderMyLibrary}</h1>
+
+                        <div class="myLibrary">
+                        </div>
+
                         <div id="resumableSection" style="display: none;">
                             <h1 class="listHeader">${HeaderResume}</h1>
 

dashboard-ui/itembynamedetails.html

@@ -4,7 +4,7 @@
     <title></title>
 </head>
 <body>
-    <div id="itemByNameDetailPage" data-role="page" class="page libraryPage" data-theme="b">
+    <div id="itemByNameDetailPage" data-role="page" class="page libraryPage itemDetailPage" data-theme="b">
         <div id="movieGenreTabs" class="itemTabs" style="display: none;">
             <div class="libraryViewNav scopedLibraryViewNav">
                 <a href="movieslatest.html">${TabLatest}</a>

dashboard-ui/itemdetails.html

@@ -4,7 +4,7 @@
     <title></title>
 </head>
 <body>
-    <div id="itemDetailPage" data-role="page" class="page libraryPage" data-theme="b">
+    <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage" data-theme="b">
         <div id="movieTabs" class="itemTabs" style="display: none;">
             <div class="libraryViewNav scopedLibraryViewNav">
                 <a href="movieslatest.html">${TabLatest}</a>

dashboard-ui/libraryreport.html

@@ -14,8 +14,6 @@
             </div>
             <div class="editPageInnerContent">
 
-                <h1 style="margin-bottom: 0;">Reports</h1>
-
                 <div style="text-align: center;">
                     <div class="viewControls">
                         <span style="margin-right: 10px; vertical-align: middle;">Report:</span>

dashboard-ui/scripts/indexpage.js

@@ -2,14 +2,31 @@
 
     $(document).on('pagebeforeshow', "#indexPage", function () {
 
-        var parentId = LibraryMenu.getTopParentId();
-
         var screenWidth = $(window).width();
 
         var page = this;
 
         var options = {
 
+            SortBy: "SortName",
+            Fields: "PrimaryImageAspectRatio"
+        };
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
+
+            $('.myLibrary', page).html(LibraryBrowser.getPosterViewHtml({
+                items: result.Items,
+                preferBackdrop: true,
+                shape: 'backdrop',
+                overlayText: true,
+                showTitle: true
+
+            })).createPosterItemMenus();
+
+        });
+
+        options = {
+
             SortBy: "DatePlayed",
             SortOrder: "Descending",
             MediaTypes: "Video",
@@ -18,8 +35,7 @@
             Recursive: true,
             Fields: "PrimaryImageAspectRatio",
             CollapseBoxSetItems: false,
-            ExcludeLocationTypes: "Virtual",
-            ParentId: parentId
+            ExcludeLocationTypes: "Virtual"
         };
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
@@ -45,13 +61,12 @@
 
             SortBy: "DateCreated",
             SortOrder: "Descending",
-            Limit: screenWidth >= 1920 ? 24 : (screenWidth >= 1440 ? 24 : (screenWidth >= 800 ? 18 : 12)),
+            Limit: screenWidth >= 1920 ? 12 : (screenWidth >= 1440 ? 12 : (screenWidth >= 800 ? 12 : 12)),
             Recursive: true,
             Fields: "PrimaryImageAspectRatio",
             Filters: "IsUnplayed,IsNotFolder",
             CollapseBoxSetItems: false,
-            ExcludeLocationTypes: "Virtual,Remote",
-            ParentId: parentId
+            ExcludeLocationTypes: "Virtual,Remote"
         };
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {

dashboard-ui/scripts/librarymenu.js

@@ -14,13 +14,13 @@
         liveTvInfoPromise = liveTvInfoPromise || ApiClient.getLiveTvInfo();
     }
 
-    function renderHeader(user) {
+    function renderHeader(page, user) {
 
         var html = '<div class="viewMenuBar ui-bar-b">';
 
         html += '<button type="button" data-icon="bars" data-iconpos="notext" data-inline="true" title="Menu" class="libraryMenuButton" onclick="LibraryMenu.showLibraryMenu();">Menu</button>';
 
-        html += '<a class="desktopHomeLink" href="index.html"><img src="css/images/mblogoicon.png" /></a>';
+        html += '<a class="desktopHomeLink" href="index.html"><img src="css/images/mblogoicon.png" /><span>MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a>';
 
         html += '<a class="viewMenuRemoteControlButton" href="nowplaying.html" data-role="button" data-icon="play" data-inline="true" data-iconpos="notext" title="Now Playing">Remote Control</a>';
 
@@ -59,16 +59,21 @@
 
         html += '</div>';
 
-        $(document.body).prepend(html);
+        html += '<div class="desktopLibraryMenu">';
+        html += '</div>';
 
-        $('.viewMenuBar').trigger('create');
+        var $page = $(page);
 
-        $(document).trigger('headercreated');
+        $page.prepend(html);
+
+        $('.viewMenuBar,.desktopLibraryMenu', page).trigger('create');
+
+        $page.trigger('headercreated');
     }
 
     function getItemHref(item) {
 
-        if (item.Type == 'ManualCollectionsFolder') {
+        if (item.CollectionType == 'boxsets' || item.Type == 'ManualCollectionsFolder') {
             return 'collections.html?topParentId=' + item.Id;
         }
 
@@ -95,25 +100,34 @@
         return 'itemlist.html?topParentId=' + item.Id + '&parentid=' + item.Id;
     }
 
-    function insertViews(user, counts, items, liveTvInfo) {
+    function insertViews(page, user, counts, items, liveTvInfo) {
 
         var html = '';
 
         html += items.map(function (i) {
 
-            return '<a data-itemid="' + i.Id + '" class="lnkMediaFolder viewMenuLink viewMenuTextLink desktopViewMenuLink" href="' + getItemHref(i) + '"><span class="viewName">' + i.Name + '</span></a>';
+            var viewMenuCssClass = (i.CollectionType || 'general') + 'ViewMenu';
+
+            return '<a data-itemid="' + i.Id + '" class="lnkMediaFolder viewMenuLink viewMenuTextLink ' + viewMenuCssClass + '" href="' + getItemHref(i) + '">' + i.Name + '</a>';
 
         }).join('');
 
-        if (counts.ChannelCount) {
-            html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink lnkMediaFolder" data-itemid="channels" href="channels.html"><span class="viewName">Channels</span></a>';
+        var showChannels = counts.ChannelCount;
+        var showLiveTv = liveTvInfo.EnabledUsers.indexOf(user.Id) != -1;
+
+        if (showChannels || showLiveTv) {
+            html += '<div class="desktopLibraryMenuDivider"></div>';
         }
 
-        if (liveTvInfo.EnabledUsers.indexOf(user.Id) != -1) {
-            html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink lnkMediaFolder" data-itemid="livetv" href="livetvsuggested.html"><span class="viewName">Live TV</span></a>';
+        if (showChannels) {
+            html += '<a class="viewMenuLink viewMenuTextLink lnkMediaFolder channelsViewMenu" data-itemid="channels" href="channels.html">Channels</a>';
         }
 
-        $('.viewMenuRemoteControlButton').before(html);
+        if (showLiveTv) {
+            html += '<a class="viewMenuLink viewMenuTextLink lnkMediaFolder tvshowsViewMenu" data-itemid="livetv" href="livetvsuggested.html">Live TV</a>';
+        }
+
+        $('.desktopLibraryMenu', page).html(html);
     }
 
     function showLibraryMenu() {
@@ -205,13 +219,13 @@
         var isLiveTvPage = page.hasClass('liveTvPage');
         var isChannelsPage = page.hasClass('channelsPage');
 
-        var id = isLiveTvPage || isChannelsPage || page.hasClass('noLibraryMenuSelectionPage') ?
+        var id = isLiveTvPage || isChannelsPage || page.hasClass('allLibraryPage') ?
             '' :
             getTopParentId() || '';
 
         sessionStorage.setItem('topParentId', id);
 
-        $('.lnkMediaFolder').each(function () {
+        $('.lnkMediaFolder', page).each(function () {
 
             var itemId = this.getAttribute('data-itemid');
 
@@ -262,11 +276,11 @@
 
         if ($(page).hasClass('libraryPage')) {
 
-            if (!$('.viewMenuBar').length) {
+            if (!$('.viewMenuBar', page).length) {
 
                 Dashboard.getCurrentUser().done(function (user) {
 
-                    renderHeader(user);
+                    renderHeader(page, user);
 
                     ensurePromises();
 
@@ -276,21 +290,14 @@
                         var items = response2[0].Items;
                         var liveTvInfo = response3[0];
 
-                        insertViews(user, counts, items, liveTvInfo);
+                        insertViews(page, user, counts, items, liveTvInfo);
 
                         updateLibraryNavLinks(page);
 
                     });
                 });
-            } else {
-
-                $('.viewMenuBar').show();
-                updateLibraryNavLinks(page);
-
             }
 
-        } else {
-            $('.viewMenuBar').hide();
         }
 
     }).on('pageshow', ".libraryPage", function () {

dashboard-ui/scripts/mediacontroller.js

@@ -509,7 +509,7 @@
         });
     }
 
-    $(document).on('headercreated', function () {
+    $(document).on('headercreated', '.libraryPage', function () {
 
         $('.btnCast').on('click', function () {
 

dashboard-ui/scripts/movies.js

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