remove jquery from playlists page

dashboard-ui/playlists.html

@@ -8,7 +8,7 @@
             </div>
         </div>
         <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
-        <div class="noItemsMessage" style="display: none; text-align: center;">
+        <div class="noItemsMessage hide" style="text-align: center;">
             <p>${MessageNoPlaylistsAvailable}</p>
         </div>
     </div>

dashboard-ui/scripts/librarybrowser.js

@@ -2842,7 +2842,6 @@
                         positionTo: button,
                         callback: function (id) {
 
-                            if (dispatchEvent) {
                             button.dispatchEvent(new CustomEvent('layoutchange', {
                                 detail: {
                                     viewStyle: id
@@ -2850,7 +2849,8 @@
                                 bubbles: true,
                                 cancelable: false
                             }));
-                            } else {
+
+                            if (!dispatchEvent) {
                                 // TODO: remove jQuery
                                 require(['jQuery'], function ($) {
                                     $(button).trigger('layoutchange', [id]);

dashboard-ui/scripts/playlists.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     var data = {};
     function getPageData() {
@@ -63,7 +63,7 @@
             var html = '';
             var view = getPageData().view;
 
-            $('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({
+            page.querySelector('.listTopPaging').innerHTML = LibraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
@@ -71,9 +71,10 @@
                 showLimit: false,
                 updatePageSizeSetting: false,
                 addLayoutButton: true,
+                layouts: 'List,Poster,PosterCard,Thumb,ThumbCard',
                 currentLayout: view
 
-            }));
+            });
 
             if (result.TotalRecordCount) {
 
@@ -95,18 +96,6 @@
                         cardLayout: true
                     });
                 }
-                else if (view == "Poster") {
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "square",
-                        showTitle: true,
-                        lazy: true,
-                        coverImage: true,
-                        showItemCounts: true,
-                        centerText: true,
-                        overlayPlayButton: true
-                    });
-                }
                 else if (view == "Thumb") {
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
@@ -128,33 +117,56 @@
                         showItemCounts: true
                     });
                 }
+                else {
+                    // Poster
+                    html = LibraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "square",
+                        showTitle: true,
+                        lazy: true,
+                        coverImage: true,
+                        showItemCounts: true,
+                        centerText: true,
+                        overlayPlayButton: true
+                    });
+                }
 
-                $('.noItemsMessage', page).hide();
+                page.querySelector('.noItemsMessage').classList.add('hide');
 
             } else {
 
-                $('.noItemsMessage', page).show();
+                page.querySelector('.noItemsMessage').classList.remove('hide');
             }
 
             var elem = page.querySelector('.itemsContainer');
             elem.innerHTML = html;
             ImageLoader.lazyChildren(elem);
 
-            $('.btnNextPage', page).on('click', function () {
+            var btnNextPage = page.querySelector('.btnNextPage');
+            if (btnNextPage) {
+                btnNextPage.addEventListener('click', function () {
                     query.StartIndex += query.Limit;
                     reloadItems(page);
                 });
+            }
 
-            $('.btnPreviousPage', page).on('click', function () {
+            var btnPreviousPage = page.querySelector('.btnPreviousPage');
+            if (btnPreviousPage) {
+                btnPreviousPage.addEventListener('click', function () {
                     query.StartIndex -= query.Limit;
                     reloadItems(page);
                 });
+            }
 
-            $('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
+            var btnChangeLayout = page.querySelector('.btnChangeLayout');
+            if (btnChangeLayout) {
+                btnChangeLayout.addEventListener('layoutchange', function (e) {
+                    var layout = e.detail.viewStyle;
                     getPageData().view = layout;
                     LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
                     reloadItems(page);
                 });
+            }
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);