From 42669c4089093ad2fccda8a428b7a934d92d30a3 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 17 Jun 2016 15:10:05 -0400
Subject: [PATCH] update music screens

---
 dashboard-ui/movies.html                 |  21 +-
 dashboard-ui/music.html                  |  27 +-
 dashboard-ui/scripts/moviecollections.js | 355 +++++++++++++----------
 dashboard-ui/scripts/musicalbums.js      | 238 ++++++++-------
 dashboard-ui/scripts/musicgenres.js      | 270 ++++++++---------
 dashboard-ui/scripts/musicrecommended.js |  32 +-
 6 files changed, 512 insertions(+), 431 deletions(-)

diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html
index 0577ab05f3..9a4b58f6e4 100644
--- a/dashboard-ui/movies.html
+++ b/dashboard-ui/movies.html
@@ -70,17 +70,20 @@
         </div>
     </div>
     <div class="pageTabContent ehsContent" id="collectionsTab" data-index="3">
-        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .25em;">
-
-            <div class="listTopPaging">
-                &nbsp;
-            </div>
-
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
             <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><i class="md-icon">add</i></button>
         </div>
-        <div class="itemsContainer" style="text-align:center;"></div>
-        <div class="noItemsMessage" style="display: none; text-align: center;">
-            <p>${MessageNoCollectionsAvailable}</p>
+
+        <div class="alphaPicker alphabetPicker vertical">
+        </div>
+
+        <div class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;">
+        </div>
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
         </div>
     </div>
     <div class="pageTabContent ehsContent" id="genresTab" data-index="4">
diff --git a/dashboard-ui/music.html b/dashboard-ui/music.html
index 3c5f3efafd..7318341a01 100644
--- a/dashboard-ui/music.html
+++ b/dashboard-ui/music.html
@@ -17,21 +17,21 @@
             </div>
         </div>
 
-        <div id="playlists" style="display: none;" class="homePageSection">
+        <div id="playlists" class="homePageSection hide">
             <h1 class="listHeader">${HeaderPlaylists}</h1>
 
             <div class="itemsContainer noautoinit" style="text-align:left;">
             </div>
         </div>
 
-        <div id="recentlyPlayed" style="display: none;" class="homePageSection">
+        <div id="recentlyPlayed" class="homePageSection hide">
             <h1 class="listHeader">${HeaderRecentlyPlayed}</h1>
 
             <div id="recentlyPlayedSongs" class="itemsContainer noautoinit" style="text-align:left;">
             </div>
         </div>
 
-        <div id="topPlayed" style="display: none;" class="homePageSection">
+        <div id="topPlayed" class="homePageSection hide">
             <h1 class="listHeader">${HeaderFrequentlyPlayed}</h1>
 
             <div id="topPlayedSongs" class="itemsContainer noautoinit" style="text-align: left;">
@@ -41,13 +41,21 @@
         <div class="favoriteSections homePageSection"></div>
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="albumsTab" data-index="1">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+        </div>
+
         <div class="alphaPicker alphabetPicker vertical">
         </div>
-        <div class="viewSettings">
-            <div class="listTopPaging">
-            </div>
+
+        <div class="itemsContainer itemsContainerWithAlphaPicker">
+        </div>
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
         </div>
-        <div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker"></div>
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="albumArtistsTab" data-index="2">
         <div class="alphaPicker alphabetPicker vertical">
@@ -75,9 +83,8 @@
         <div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="genresTab" data-index="5">
-        <div class="viewSettings">
-            <div class="listTopPaging">
-            </div>
+        <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
+            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
         </div>
         <div id="items" class="itemsContainer paddedItemsContainer"></div>
     </div>
diff --git a/dashboard-ui/scripts/moviecollections.js b/dashboard-ui/scripts/moviecollections.js
index 6d5a284daf..d4382baaa1 100644
--- a/dashboard-ui/scripts/moviecollections.js
+++ b/dashboard-ui/scripts/moviecollections.js
@@ -1,156 +1,209 @@
-define(['jQuery'], function ($) {
+define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
 
-    var data = {};
-    function getPageData() {
-        var key = getSavedQueryKey();
-        var pageData = data[key];
+    return function (view, params, tabContent) {
 
-        if (!pageData) {
-            pageData = data[key] = {
-                query: {
-                    SortBy: "SortName",
-                    SortOrder: "Ascending",
-                    IncludeItemTypes: "BoxSet",
-                    Recursive: true,
-                    Fields: "PrimaryImageAspectRatio,SortName,SyncInfo,CanDelete",
-                    ImageTypeLimit: 1,
-                    EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
-                    StartIndex: 0,
-                    Limit: LibraryBrowser.getDefaultPageSize()
-                },
-                view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster')
-            };
+        var self = this;
+        var pageSize = libraryBrowser.getDefaultPageSize();
 
-            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+        var data = {};
+
+        function getPageData(context) {
+            var key = getSavedQueryKey(context);
+            var pageData = data[key];
+
+            if (!pageData) {
+                pageData = data[key] = {
+                    query: {
+                        SortBy: "SortName",
+                        SortOrder: "Ascending",
+                        IncludeItemTypes: "BoxSet",
+                        Recursive: true,
+                        Fields: "PrimaryImageAspectRatio,MediaSourceCount,SortName,SyncInfo",
+                        ImageTypeLimit: 1,
+                        EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
+                        StartIndex: 0,
+                        Limit: pageSize
+                    },
+                    view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Poster', 'Poster')
+                };
+
+                libraryBrowser.loadSavedQueryValues(key, pageData.query);
+            }
+            return pageData;
         }
-        return pageData;
-    }
 
-    function getQuery() {
+        function getQuery(context) {
 
-        return getPageData().query;
-    }
+            return getPageData(context).query;
+        }
 
-    function getSavedQueryKey() {
+        function getSavedQueryKey(context) {
 
-        return LibraryBrowser.getSavedQueryKey('collections');
-    }
+            if (!context.savedQueryKey) {
+                context.savedQueryKey = libraryBrowser.getSavedQueryKey('movies');
+            }
+            return context.savedQueryKey;
+        }
 
-    function reloadItems(page) {
+        function reloadItems(page) {
 
-        Dashboard.showLoadingMsg();
+            Dashboard.showLoadingMsg();
 
-        var query = getQuery();
-        var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
-        var promise2 = Dashboard.getCurrentUser();
+            var query = getQuery(page);
 
-        Promise.all([promise1, promise2]).then(function (responses) {
+            ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
 
-            var result = responses[0];
-            var user = responses[1];
+                // Scroll back up so they can see the results from the beginning
+                window.scrollTo(0, 0);
 
-            // Scroll back up so they can see the results from the beginning
-            window.scrollTo(0, 0);
+                updateFilterControls(page);
 
-            var html = '';
+                var pagingHtml = LibraryBrowser.getQueryPagingHtml({
+                    startIndex: query.StartIndex,
+                    limit: query.Limit,
+                    totalRecordCount: result.TotalRecordCount,
+                    showLimit: false,
+                    updatePageSizeSetting: false,
+                    addLayoutButton: false,
+                    sortButton: false,
+                    filterButton: false
+                });
 
-            var view = getPageData().view;
+                var html;
+                var viewStyle = self.getCurrentViewStyle();
 
-            $('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({
-                startIndex: query.StartIndex,
-                limit: query.Limit,
-                totalRecordCount: result.TotalRecordCount,
-                viewButton: false,
-                sortButton: true,
-                showLimit: false,
-                updatePageSizeSetting: false,
-                addLayoutButton: true,
-                currentLayout: view
+                if (viewStyle == "Thumb") {
 
-            }));
-
-            if (result.TotalRecordCount) {
-
-                if (view == "List") {
-
-                    html = LibraryBrowser.getListViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
+                        shape: "backdrop",
+                        preferThumb: true,
+                        context: 'movies',
+                        lazy: true,
+                        overlayPlayButton: true
+                    });
+                }
+                else if (viewStyle == "ThumbCard") {
+
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "backdrop",
+                        preferThumb: true,
+                        context: 'movies',
+                        lazy: true,
+                        cardLayout: true,
+                        showTitle: true,
+                        showItemCounts: true
+                    });
+                }
+                else if (viewStyle == "Banner") {
+
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "banner",
+                        preferBanner: true,
+                        context: 'movies',
+                        lazy: true
+                    });
+                }
+                else if (viewStyle == "List") {
+
+                    html = libraryBrowser.getListViewHtml({
+                        items: result.Items,
+                        context: 'movies',
                         sortBy: query.SortBy
                     });
                 }
-                else if (view == "Poster") {
-                    html = LibraryBrowser.getPosterViewHtml({
+                else if (viewStyle == "PosterCard") {
+
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
-                        shape: "auto",
+                        shape: "portrait",
+                        context: 'movies',
                         showTitle: true,
+                        showYear: true,
+                        lazy: true,
+                        cardLayout: true,
+                        showItemCounts: true
+                    });
+                }
+                else {
+
+                    // Poster
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "portrait",
+                        context: 'movies',
                         centerText: true,
                         lazy: true,
                         overlayPlayButton: true
                     });
                 }
-                else if (view == "PosterCard") {
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "auto",
-                        showTitle: true,
-                        cardLayout: true,
-                        lazy: true,
-                        showItemCounts: true
-                    });
-                }
-                else if (view == "Thumb") {
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "backdrop",
-                        showTitle: true,
-                        centerText: true,
-                        lazy: true,
-                        preferThumb: true,
-                        overlayPlayButton: true
-                    });
-                }
-                else if (view == "ThumbCard") {
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "backdrop",
-                        showTitle: true,
-                        lazy: true,
-                        preferThumb: true,
-                        cardLayout: true,
-                        showItemCounts: true
-                    });
+
+                var i, length;
+                var elems = tabContent.querySelectorAll('.paging');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].innerHTML = pagingHtml;
                 }
 
-                $('.noItemsMessage', page).hide();
+                function onNextPageClick() {
+                    query.StartIndex += query.Limit;
+                    reloadItems(tabContent);
+                }
 
-            } else {
+                function onPreviousPageClick() {
+                    query.StartIndex -= query.Limit;
+                    reloadItems(tabContent);
+                }
 
-                $('.noItemsMessage', page).show();
-            }
+                elems = tabContent.querySelectorAll('.btnNextPage');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onNextPageClick);
+                }
 
-            var elem = page.querySelector('.itemsContainer');
-            elem.innerHTML = html;
-            ImageLoader.lazyChildren(elem);
+                elems = tabContent.querySelectorAll('.btnPreviousPage');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onPreviousPageClick);
+                }
 
-            $('.btnNextPage', page).on('click', function () {
-                query.StartIndex += query.Limit;
-                reloadItems(page);
+                if (!items.length) {
+                    html = '<p style="text-align:center;">' + Globalize.translate('MessageNoCollectionsAvailable') + '</p>';
+                }
+
+                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                itemsContainer.innerHTML = html;
+                imageLoader.lazyChildren(itemsContainer);
+
+                libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
+
+                Dashboard.hideLoadingMsg();
+            });
+        }
+
+        function updateFilterControls(tabContent) {
+
+            var query = getQuery(tabContent);
+            self.alphaPicker.value(query.NameStartsWithOrGreater);
+        }
+
+        function initPage(tabContent) {
+
+            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
+                var newValue = e.detail.value;
+                var query = getQuery(tabContent);
+                query.NameStartsWithOrGreater = newValue;
+                query.StartIndex = 0;
+                reloadItems(tabContent);
             });
 
-            $('.btnPreviousPage', page).on('click', function () {
-                query.StartIndex -= query.Limit;
-                reloadItems(page);
+            self.alphaPicker = new alphaPicker({
+                element: alphaPickerElement,
+                valueChangeEvent: 'click'
             });
 
-            $('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
-                getPageData().view = layout;
-                LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
-                reloadItems(page);
-            });
-
-            // On callback make sure to set StartIndex = 0
-            $('.btnSort', page).on('click', function () {
-                LibraryBrowser.showSortMenu({
+            tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
+                libraryBrowser.showSortMenu({
                     items: [{
                         name: Globalize.translate('OptionNameSort'),
                         id: 'SortName'
@@ -172,67 +225,57 @@
                         id: 'PremiereDate,SortName'
                     }],
                     callback: function () {
-                        reloadItems(page);
+                        getQuery(tabContent).StartIndex = 0;
+                        reloadItems(tabContent);
                     },
-                    query: query
+                    query: getQuery(tabContent),
+                    button: e.target
                 });
             });
 
-            LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
-
-            Dashboard.hideLoadingMsg();
-        });
-    }
-
-    function initPage(tabContent) {
-
-        // The button is created dynamically
-        $('.btnNewCollection', tabContent).on('click', function () {
-
-            require(['collectionEditor'], function (collectionEditor) {
-
-                var serverId = ApiClient.serverInfo().Id;
-                new collectionEditor().show({
-                    items: [],
-                    serverId: serverId
-                });
+            tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
 
+                libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
             });
-        });
-    }
 
-    pageIdOn('pageinit', 'boxsetsPage', function () {
+            tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
 
-        var page = this;
+                var viewStyle = e.detail.viewStyle;
 
-        var content = page;
+                getPageData(tabContent).view = viewStyle;
+                libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+                getQuery(tabContent).StartIndex = 0;
+                reloadItems(tabContent);
+            });
 
-        initPage(content);
+            // The button is created dynamically
+            tabContent.querySelector('.btnNewCollection').addEventListener('click', function () {
 
-    });
-    pageIdOn('pagebeforeshow', 'boxsetsPage', function () {
+                require(['collectionEditor'], function (collectionEditor) {
 
-        var page = this;
+                    var serverId = ApiClient.serverInfo().Id;
+                    new collectionEditor().show({
+                        items: [],
+                        serverId: serverId
+                    });
 
-        var content = page;
+                });
+            });
+        }
 
-        reloadItems(content);
-
-    });
-
-    return function (view, params, tabContent) {
-
-        var self = this;
-
-        self.initTab = function () {
-
-            initPage(tabContent);
+        self.getCurrentViewStyle = function () {
+            return getPageData(tabContent).view;
         };
 
+        initPage(tabContent);
+
         self.renderTab = function () {
 
             reloadItems(tabContent);
+            updateFilterControls(tabContent);
+        };
+
+        self.destroy = function () {
         };
     };
-
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/musicalbums.js b/dashboard-ui/scripts/musicalbums.js
index 06aee81694..f2cc4fa8d9 100644
--- a/dashboard-ui/scripts/musicalbums.js
+++ b/dashboard-ui/scripts/musicalbums.js
@@ -1,10 +1,12 @@
-define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
+define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
 
     return function (view, params, tabContent) {
 
         var self = this;
+        var pageSize = libraryBrowser.getDefaultPageSize();
 
         var data = {};
+
         function getPageData(context) {
             var key = getSavedQueryKey(context);
             var pageData = data[key];
@@ -16,17 +18,17 @@
                         SortOrder: "Ascending",
                         IncludeItemTypes: "MusicAlbum",
                         Recursive: true,
-                        Fields: "PrimaryImageAspectRatio,SortName,SyncInfo",
-                        StartIndex: 0,
+                        Fields: "PrimaryImageAspectRatio,MediaSourceCount,SortName,SyncInfo",
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
-                        Limit: LibraryBrowser.getDefaultPageSize()
+                        StartIndex: 0,
+                        Limit: pageSize
                     },
-                    view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster')
+                    view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Poster', 'Poster')
                 };
 
-                pageData.query.ParentId = LibraryMenu.getTopParentId();
-                LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+                pageData.query.ParentId = params.topParentId;
+                libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
             return pageData;
         }
@@ -39,7 +41,7 @@
         function getSavedQueryKey(context) {
 
             if (!context.savedQueryKey) {
-                context.savedQueryKey = LibraryBrowser.getSavedQueryKey('albums');
+                context.savedQueryKey = libraryBrowser.getSavedQueryKey('musicalbums');
             }
             return context.savedQueryKey;
         }
@@ -55,40 +57,33 @@
                 // Scroll back up so they can see the results from the beginning
                 window.scrollTo(0, 0);
 
-                var html = '';
-                var view = getPageData(page).view;
+                updateFilterControls(page);
+
                 var pagingHtml = LibraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
                     showLimit: false,
-                    sortButton: true,
-                    addLayoutButton: true,
-                    currentLayout: view,
                     updatePageSizeSetting: false,
-                    layouts: 'List,Poster,PosterCard,Timeline',
-                    filterButton: true
+                    addLayoutButton: false,
+                    sortButton: false,
+                    filterButton: false
                 });
 
-                page.querySelector('.listTopPaging').innerHTML = pagingHtml;
+                var html;
+                var viewStyle = self.getCurrentViewStyle();
 
-                updateFilterControls(page);
+                if (viewStyle == "List") {
 
-                if (view == "Poster") {
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getListViewHtml({
                         items: result.Items,
-                        shape: "square",
                         context: 'music',
-                        showTitle: true,
-                        showParentTitle: true,
-                        lazy: true,
-                        centerText: true,
-                        overlayPlayButton: true
+                        sortBy: query.SortBy
                     });
                 }
-                else if (view == "PosterCard") {
+                else if (viewStyle == "PosterCard") {
 
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "square",
                         context: 'music',
@@ -99,63 +94,107 @@
                         cardLayout: true
                     });
                 }
-                else if (view == "List") {
+                else {
 
-                    html = LibraryBrowser.getListViewHtml({
-                        items: result.Items,
-                        context: 'music',
-                        sortBy: query.SortBy
-                    });
-                }
-                else if (view == "Timeline") {
-                    html = LibraryBrowser.getPosterViewHtml({
+                    // Poster
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "square",
                         context: 'music',
                         showTitle: true,
                         showParentTitle: true,
-                        timeline: true,
-                        lazy: true
+                        lazy: true,
+                        centerText: true,
+                        overlayPlayButton: true
                     });
                 }
 
-                var elem = page.querySelector('#items');
-                elem.innerHTML = html + pagingHtml;
-                ImageLoader.lazyChildren(elem);
+                var i, length;
+                var elems = tabContent.querySelectorAll('.paging');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].innerHTML = pagingHtml;
+                }
 
-                $('.btnNextPage', page).on('click', function () {
+                function onNextPageClick() {
                     query.StartIndex += query.Limit;
-                    reloadItems(page);
-                });
+                    reloadItems(tabContent);
+                }
 
-                $('.btnPreviousPage', page).on('click', function () {
+                function onPreviousPageClick() {
                     query.StartIndex -= query.Limit;
-                    reloadItems(page);
+                    reloadItems(tabContent);
+                }
+
+                elems = tabContent.querySelectorAll('.btnNextPage');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onNextPageClick);
+                }
+
+                elems = tabContent.querySelectorAll('.btnPreviousPage');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onPreviousPageClick);
+                }
+
+                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                itemsContainer.innerHTML = html;
+                imageLoader.lazyChildren(itemsContainer);
+
+                libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
+
+                Dashboard.hideLoadingMsg();
+            });
+        }
+
+        self.showFilterMenu = function () {
+
+            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+
+                var filterDialog = new filterDialogFactory({
+                    query: getQuery(tabContent),
+                    mode: 'albums'
                 });
 
-                $('.btnFilter', page).on('click', function () {
-                    showFilterMenu(page);
+                Events.on(filterDialog, 'filterchange', function () {
+                    getQuery(tabContent).StartIndex = 0;
+                    reloadItems(tabContent);
                 });
 
-                $('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
+                filterDialog.show();
+            });
+        }
 
-                    if (layout == 'Timeline') {
-                        getQuery(page).SortBy = 'ProductionYear,PremiereDate,SortName';
-                        getQuery(page).SortOrder = 'Descending';
-                    }
+        function updateFilterControls(tabContent) {
 
-                    getPageData(page).view = layout;
-                    LibraryBrowser.saveViewSetting(getSavedQueryKey(page), layout);
-                    reloadItems(page);
-                });
+            var query = getQuery(tabContent);
+            self.alphaPicker.value(query.NameStartsWithOrGreater);
+        }
 
-                // On callback make sure to set StartIndex = 0
-                $('.btnSort', page).on('click', function () {
-                    LibraryBrowser.showSortMenu({
-                        items: [{
-                            name: Globalize.translate('OptionNameSort'),
-                            id: 'SortName'
-                        },
+        function initPage(tabContent) {
+
+            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
+                var newValue = e.detail.value;
+                var query = getQuery(tabContent);
+                query.NameStartsWithOrGreater = newValue;
+                query.StartIndex = 0;
+                reloadItems(tabContent);
+            });
+
+            self.alphaPicker = new alphaPicker({
+                element: alphaPickerElement,
+                valueChangeEvent: 'click'
+            });
+
+            tabContent.querySelector('.btnFilter').addEventListener('click', function () {
+                self.showFilterMenu();
+            });
+
+            tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
+                libraryBrowser.showSortMenu({
+                    items: [{
+                        name: Globalize.translate('OptionNameSort'),
+                        id: 'SortName'
+                    },
                         {
                             name: Globalize.translate('OptionAlbumArtist'),
                             id: 'AlbumArtist,SortName'
@@ -176,59 +215,44 @@
                             name: Globalize.translate('OptionReleaseDate'),
                             id: 'ProductionYear,PremiereDate,SortName'
                         }],
-                        callback: function () {
-                            reloadItems(page);
-                        },
-                        query: query
-                    });
+                    callback: function () {
+                        getQuery(tabContent).StartIndex = 0;
+                        reloadItems(tabContent);
+                    },
+                    query: getQuery(tabContent),
+                    button: e.target
                 });
+            });
 
-                LibraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
-                Dashboard.hideLoadingMsg();
+            tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+
+                libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
+            });
+
+            tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+
+                var viewStyle = e.detail.viewStyle;
+
+                getPageData(tabContent).view = viewStyle;
+                libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+                getQuery(tabContent).StartIndex = 0;
+                reloadItems(tabContent);
             });
         }
 
-        function showFilterMenu(page) {
+        self.getCurrentViewStyle = function () {
+            return getPageData(tabContent).view;
+        };
 
-            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
-
-                var filterDialog = new filterDialogFactory({
-                    query: getQuery(page),
-                    mode: 'albums'
-                });
-
-                Events.on(filterDialog, 'filterchange', function () {
-                    reloadItems(page);
-                });
-
-                filterDialog.show();
-            });
-        }
-
-        function updateFilterControls(page) {
-
-            var query = getQuery(page);
-
-            self.alphaPicker.value(query.NameStartsWithOrGreater);
-        }
-
-        var alphaPickerElement = tabContent.querySelector('.alphaPicker');
-        alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-            var newValue = e.detail.value;
-            var query = getQuery(tabContent);
-            query.NameStartsWithOrGreater = newValue;
-            query.StartIndex = 0;
-            reloadItems(tabContent);
-        });
-
-        self.alphaPicker = new alphaPicker({
-            element: alphaPickerElement,
-            valueChangeEvent: 'click'
-        });
+        initPage(tabContent);
 
         self.renderTab = function () {
 
             reloadItems(tabContent);
+            updateFilterControls(tabContent);
+        };
+
+        self.destroy = function () {
         };
     };
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/musicgenres.js b/dashboard-ui/scripts/musicgenres.js
index 741c0e7182..39e9d2ea4e 100644
--- a/dashboard-ui/scripts/musicgenres.js
+++ b/dashboard-ui/scripts/musicgenres.js
@@ -1,136 +1,140 @@
-define(['jQuery'], function ($) {
-
-    return function (view, params, tabContent) {
-
+define([], function () {
+
+    return function (view, params, tabContent) {
+
         var self = this;
-
-        var data = {};
-        function getPageData() {
-            var key = getSavedQueryKey();
-            var pageData = data[key];
-
-            if (!pageData) {
-                pageData = data[key] = {
-                    query: {
-                        SortBy: "SortName",
-                        SortOrder: "Ascending",
-                        IncludeItemTypes: "Audio,MusicVideo",
-                        Recursive: true,
-                        Fields: "DateCreated,SyncInfo,ItemCounts",
-                        StartIndex: 0,
-                        Limit: LibraryBrowser.getDefaultPageSize()
-                    },
-                    view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
-                };
-
-                pageData.query.ParentId = LibraryMenu.getTopParentId();
-                LibraryBrowser.loadSavedQueryValues(key, pageData.query);
-            }
-            return pageData;
+
+        var data = {};
+        function getPageData() {
+            var key = getSavedQueryKey();
+            var pageData = data[key];
+
+            if (!pageData) {
+                pageData = data[key] = {
+                    query: {
+                        SortBy: "SortName",
+                        SortOrder: "Ascending",
+                        IncludeItemTypes: "Audio,MusicVideo",
+                        Recursive: true,
+                        Fields: "DateCreated,SyncInfo,ItemCounts",
+                        StartIndex: 0
+                    },
+                    view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
+                };
+
+                pageData.query.ParentId = params.topParentId;
+                LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+            }
+            return pageData;
+        }
+
+        function getQuery() {
+
+            return getPageData().query;
+        }
+
+        function getSavedQueryKey() {
+
+            return LibraryBrowser.getSavedQueryKey('genres');
+        }
+
+        function reloadItems(context) {
+
+            Dashboard.showLoadingMsg();
+            var query = getQuery();
+
+            ApiClient.getMusicGenres(Dashboard.getCurrentUserId(), query).then(function (result) {
+
+                var html = '';
+
+                var viewStyle = self.getCurrentViewStyle();
+
+                if (viewStyle == "Thumb") {
+                    html = LibraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "backdrop",
+                        preferThumb: true,
+                        context: 'music',
+                        showItemCounts: true,
+                        centerText: true,
+                        lazy: true,
+                        overlayPlayButton: true
+                    });
+                }
+                else if (viewStyle == "ThumbCard") {
+
+                    html = LibraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "backdrop",
+                        preferThumb: true,
+                        context: 'music',
+                        showItemCounts: true,
+                        cardLayout: true,
+                        showTitle: true,
+                        lazy: true
+                    });
+                }
+                else if (viewStyle == "PosterCard") {
+                    html = LibraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "portrait",
+                        context: 'music',
+                        showItemCounts: true,
+                        lazy: true,
+                        cardLayout: true,
+                        showTitle: true
+                    });
+                }
+                else if (viewStyle == "Poster") {
+                    html = LibraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "portrait",
+                        context: 'music',
+                        centerText: true,
+                        showItemCounts: true,
+                        lazy: true,
+                        overlayPlayButton: true
+                    });
+                }
+
+                var elem = context.querySelector('#items');
+                elem.innerHTML = html;
+                ImageLoader.lazyChildren(elem);
+
+                LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
+
+                Dashboard.hideLoadingMsg();
+            });
         }
-
-        function getQuery() {
-
-            return getPageData().query;
-        }
-
-        function getSavedQueryKey() {
-
-            return LibraryBrowser.getSavedQueryKey('genres');
-        }
-
-        function reloadItems(context) {
-
-            Dashboard.showLoadingMsg();
-
-            var query = getQuery();
-
-            ApiClient.getMusicGenres(Dashboard.getCurrentUserId(), query).then(function (result) {
-
-                // Scroll back up so they can see the results from the beginning
-                window.scrollTo(0, 0);
-
-                var html = '';
-
-                var view = getPageData().view;
-
-                $('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
-                    startIndex: query.StartIndex,
-                    limit: query.Limit,
-                    totalRecordCount: result.TotalRecordCount,
-                    showLimit: false,
-                    updatePageSizeSetting: false,
-                    addLayoutButton: true,
-                    currentLayout: view
-
-                }));
-
-                if (view == "Thumb") {
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "backdrop",
-                        preferThumb: true,
-                        showItemCounts: true,
-                        context: 'music',
-                        lazy: true,
-                        centerText: true,
-                        overlayPlayButton: true
-                    });
-                }
-                else if (view == "ThumbCard") {
-
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "backdrop",
-                        preferThumb: true,
-                        context: 'music',
-                        showItemCounts: true,
-                        cardLayout: true,
-                        lazy: true,
-                        showTitle: true
-                    });
-                }
-                else if (view == "Poster") {
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "portrait",
-                        context: 'music',
-                        centerText: true,
-                        showItemCounts: true,
-                        lazy: true
-                    });
-                }
-
-                var elem = context.querySelector('#items');
-                elem.innerHTML = html;
-                ImageLoader.lazyChildren(elem);
-
-                $('.btnNextPage', context).on('click', function () {
-                    query.StartIndex += query.Limit;
-                    reloadItems(context);
-                });
-
-                $('.btnPreviousPage', context).on('click', function () {
-                    query.StartIndex -= query.Limit;
-                    reloadItems(context);
-                });
-
-                $('.btnChangeLayout', context).on('layoutchange', function (e, layout) {
-                    getPageData().view = layout;
-                    LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
-                    reloadItems(context);
-                });
-
-                LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
-
-                Dashboard.hideLoadingMsg();
-            });
-        }
-
-        self.renderTab = function () {
-
-            reloadItems(tabContent);
-        };
-    };
-
+
        self.getViewStyles = function () {
+            return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
+        };
+
+        self.getCurrentViewStyle = function () {
+            return getPageData(tabContent).view;
+        };
+
+        self.setCurrentViewStyle = function (viewStyle) {
+            getPageData(tabContent).view = viewStyle;
+            LibraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+            reloadItems(tabContent);
+        };
+
+        self.enableViewSelection = true;
+
+        self.renderTab = function () {
+
+            reloadItems(tabContent);
+        };
+
+        tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+
+            LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
+        });
+
+        tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+
+            self.setCurrentViewStyle(e.detail.viewStyle);
+        });
+    };
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js
index 94f22e4a94..33a8f6a754 100644
--- a/dashboard-ui/scripts/musicrecommended.js
+++ b/dashboard-ui/scripts/musicrecommended.js
@@ -1,4 +1,4 @@
-define(['jQuery', 'libraryBrowser', 'scrollStyles'], function ($, libraryBrowser) {
+define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {
 
     function itemsPerRow() {
 
@@ -71,12 +71,12 @@
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
 
-            var elem;
+            var elem = page.querySelector('#recentlyPlayed');
 
             if (result.Items.length) {
-                elem = $('#recentlyPlayed', page).show()[0];
+                elem.classList.remove('hide');
             } else {
-                elem = $('#recentlyPlayed', page).hide()[0];
+                elem.classList.add('hide');
             }
 
             var itemsContainer = elem.querySelector('.itemsContainer');
@@ -117,12 +117,12 @@
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
 
-            var elem;
+            var elem = page.querySelector('#topPlayed');
 
             if (result.Items.length) {
-                elem = $('#topPlayed', page).show()[0];
+                elem.classList.remove('hide');
             } else {
-                elem = $('#topPlayed', page).hide()[0];
+                elem.classList.add('hide');
             }
 
             var itemsContainer = elem.querySelector('.itemsContainer');
@@ -160,12 +160,12 @@
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
 
-            var elem;
+            var elem = page.querySelector('#playlists');
 
             if (result.Items.length) {
-                elem = $('#playlists', page).show()[0];
+                elem.classList.remove('hide');
             } else {
-                elem = $('#playlists', page).hide()[0];
+                elem.classList.add('hide');
             }
 
             var itemsContainer = elem.querySelector('.itemsContainer');
@@ -252,13 +252,13 @@
             var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
 
             var containers = tabContent.querySelectorAll('.itemsContainer');
-            if (enableScrollX()) {
-                $(containers).addClass('hiddenScrollX');
-            } else {
-                $(containers).removeClass('hiddenScrollX');
-            }
-
             for (var i = 0, length = containers.length; i < length; i++) {
+                if (enableScrollX()) {
+                    containers[i].classList.add('hiddenScrollX');
+                } else {
+                    containers[i].classList.remove('hiddenScrollX');
+                }
+
                 LibraryBrowser.createCardMenus(containers[i]);
             }
         };