convert playlist page

dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css

@@ -37,6 +37,10 @@
         contain: strict;
     }
 
+.layout-tv .vertical-wrap .card {
+    contain: layout style;
+}
+
 .card, .card:focus {
     font-weight: inherit !important;
 }

dashboard-ui/playlists.html

@@ -1,4 +1,4 @@
-<div id="playlistsPage" data-dom-cache="true" data-role="page" class="page libraryPage noSecondaryNavPage" data-require="scripts/playlists,emby-itemscontainer" data-title="${HeaderPlaylists}">
+<div id="playlistsPage" data-dom-cache="true" data-role="page" class="page libraryPage noSecondaryNavPage" data-title="${HeaderPlaylists}">
 
     <div data-role="content">
         <div class="viewSettings">
@@ -7,7 +7,7 @@
                 &nbsp;
             </div>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer centered"></div>
         <div class="noItemsMessage hide" style="text-align: center;">
             <p>${MessageNoPlaylistsAvailable}</p>
         </div>

dashboard-ui/scripts/encodingsettings.js

@@ -34,8 +34,8 @@
 
     function updateEncoder(form) {
 
-        return ApiClient.getSystemInfo().then(function(systemInfo) {
+        return ApiClient.getSystemInfo().then(function (systemInfo) {
-            
+
             if (systemInfo.EncoderLocationType == "External") {
                 return;
             }
@@ -118,8 +118,10 @@
 
         if (this.value == 'Custom') {
             page.querySelector('.fldEncoderPath').classList.remove('hide');
+            page.querySelector('.txtEncoderPath').setAttribute('required', 'required');
         } else {
             page.querySelector('.fldEncoderPath').classList.add('hide');
+            page.querySelector('.txtEncoderPath').removeAttribute('required');
         }
     }
 

dashboard-ui/scripts/playlists.js

@@ -1,184 +1,210 @@
-define(['listView'], function (listView) {
+define(['listView', 'cardBuilder', 'libraryBrowser', 'emby-itemscontainer'], function (listView, cardBuilder, libraryBrowser) {
 
-    var data = {};
+    return function (view, params) {
-    function getPageData() {
-        var key = getSavedQueryKey();
-        var pageData = data[key];
 
-        if (!pageData) {
+        var data = {};
-            pageData = data[key] = {
+        function getPageData(context) {
-                query: {
+            var key = getSavedQueryKey(context);
-                    SortBy: "SortName",
+            var pageData = data[key];
-                    SortOrder: "Ascending",
-                    IncludeItemTypes: "Playlist",
-                    Recursive: true,
-                    Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete,SyncInfo",
-                    StartIndex: 0,
-                    Limit: LibraryBrowser.getDefaultPageSize()
-                },
-                view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('PosterCard', 'PosterCard')
-            };
 
-            pageData.query.ParentId = LibraryMenu.getTopParentId();
+            if (!pageData) {
-            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+                pageData = data[key] = {
+                    query: {
+                        SortBy: "SortName",
+                        SortOrder: "Ascending",
+                        IncludeItemTypes: "Playlist",
+                        Recursive: true,
+                        Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete,SyncInfo",
+                        StartIndex: 0,
+                        Limit: LibraryBrowser.getDefaultPageSize()
+                    },
+                    view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('PosterCard', 'PosterCard')
+                };
+
+                pageData.query.ParentId = LibraryMenu.getTopParentId();
+                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();
+            if (!context.savedQueryKey) {
-    }
+                context.savedQueryKey = libraryBrowser.getSavedQueryKey();
+            }
+            return context.savedQueryKey;
+        }
 
-    function showLoadingMessage(page) {
+        function showLoadingMessage() {
 
-        Dashboard.showLoadingMsg();
+            Dashboard.showLoadingMsg();
-    }
+        }
 
-    function hideLoadingMessage(page) {
+        function hideLoadingMessage() {
-        Dashboard.hideLoadingMsg();
+            Dashboard.hideLoadingMsg();
-    }
+        }
 
-    function reloadItems(page) {
+        function onViewStyleChange() {
 
-        showLoadingMessage(page);
+            var viewStyle = getPageData(view).view;
 
-        var query = getQuery();
+            var itemsContainer = view.querySelector('.itemsContainer');
-        var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
-        var promise2 = Dashboard.getCurrentUser();
 
-        Promise.all([promise1, promise2]).then(function (responses) {
+            if (viewStyle == "List") {
 
-            var result = responses[0];
+                itemsContainer.classList.add('vertical-list');
-            var user = responses[1];
+                itemsContainer.classList.remove('vertical-wrap');
+            }
+            else {
 
-            // Scroll back up so they can see the results from the beginning
+                itemsContainer.classList.remove('vertical-list');
-            window.scrollTo(0, 0);
+                itemsContainer.classList.add('vertical-wrap');
+            }
+            itemsContainer.innerHTML = '';
+        }
 
-            var html = '';
+        function reloadItems() {
-            var view = getPageData().view;
 
-            page.querySelector('.listTopPaging').innerHTML = LibraryBrowser.getQueryPagingHtml({
+            showLoadingMessage();
-                startIndex: query.StartIndex,
-                limit: query.Limit,
-                totalRecordCount: result.TotalRecordCount,
-                viewButton: false,
-                showLimit: false,
-                updatePageSizeSetting: false,
-                addLayoutButton: true,
-                layouts: 'List,Poster,PosterCard,Thumb,ThumbCard',
-                currentLayout: view
 
+            var query = getQuery(view);
+            var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
+            var promise2 = Dashboard.getCurrentUser();
+
+            Promise.all([promise1, promise2]).then(function (responses) {
+
+                var result = responses[0];
+                var user = responses[1];
+
+                // Scroll back up so they can see the results from the beginning
+                window.scrollTo(0, 0);
+
+                var html = '';
+                var viewStyle = getPageData(view).view;
+
+                view.querySelector('.listTopPaging').innerHTML = LibraryBrowser.getQueryPagingHtml({
+                    startIndex: query.StartIndex,
+                    limit: query.Limit,
+                    totalRecordCount: result.TotalRecordCount,
+                    viewButton: false,
+                    showLimit: false,
+                    updatePageSizeSetting: false,
+                    addLayoutButton: true,
+                    layouts: 'List,Poster,PosterCard,Thumb,ThumbCard',
+                    currentLayout: viewStyle
+
+                });
+
+                if (result.TotalRecordCount) {
+
+                    if (viewStyle == "List") {
+
+                        html = listView.getListViewHtml({
+                            items: result.Items,
+                            sortBy: query.SortBy
+                        });
+                    }
+                    else if (viewStyle == "PosterCard") {
+                        html = cardBuilder.getCardsHtml({
+                            items: result.Items,
+                            shape: "square",
+                            showTitle: true,
+                            lazy: true,
+                            coverImage: true,
+                            showItemCounts: true,
+                            cardLayout: true
+                        });
+                    }
+                    else if (viewStyle == "Thumb") {
+                        html = cardBuilder.getCardsHtml({
+                            items: result.Items,
+                            shape: "backdrop",
+                            showTitle: true,
+                            centerText: true,
+                            lazy: true,
+                            preferThumb: true,
+                            overlayPlayButton: true
+                        });
+                    }
+                    else if (viewStyle == "ThumbCard") {
+                        html = cardBuilder.getCardsHtml({
+                            items: result.Items,
+                            shape: "backdrop",
+                            showTitle: true,
+                            lazy: true,
+                            preferThumb: true,
+                            cardLayout: true,
+                            showItemCounts: true
+                        });
+                    }
+                    else {
+                        // Poster
+                        html = cardBuilder.getCardsHtml({
+                            items: result.Items,
+                            shape: "square",
+                            showTitle: true,
+                            lazy: true,
+                            coverImage: true,
+                            showItemCounts: true,
+                            centerText: true,
+                            overlayPlayButton: true
+                        });
+                    }
+
+                    view.querySelector('.noItemsMessage').classList.add('hide');
+
+                } else {
+
+                    view.querySelector('.noItemsMessage').classList.remove('hide');
+                }
+
+                var elem = view.querySelector('.itemsContainer');
+                elem.innerHTML = html;
+                ImageLoader.lazyChildren(elem);
+
+                var btnNextPage = view.querySelector('.btnNextPage');
+                if (btnNextPage) {
+                    btnNextPage.addEventListener('click', function () {
+                        query.StartIndex += query.Limit;
+                        reloadItems();
+                    });
+                }
+
+                var btnPreviousPage = view.querySelector('.btnPreviousPage');
+                if (btnPreviousPage) {
+                    btnPreviousPage.addEventListener('click', function () {
+                        query.StartIndex -= query.Limit;
+                        reloadItems();
+                    });
+                }
+
+                var btnChangeLayout = view.querySelector('.btnChangeLayout');
+                if (btnChangeLayout) {
+                    btnChangeLayout.addEventListener('layoutchange', function (e) {
+                        var layout = e.detail.viewStyle;
+                        getPageData(view).view = layout;
+                        LibraryBrowser.saveViewSetting(getSavedQueryKey(view), layout);
+                        onViewStyleChange();
+                        reloadItems();
+                    });
+                }
+
+                LibraryBrowser.saveQueryValues(getSavedQueryKey(view), query);
+
+                hideLoadingMessage();
             });
+        }
 
-            if (result.TotalRecordCount) {
+        view.addEventListener('viewbeforeshow', function() {
-
+            reloadItems();
-                if (view == "List") {
-
-                    html = listView.getListViewHtml({
-                        items: result.Items,
-                        sortBy: query.SortBy
-                    });
-                }
-                else if (view == "PosterCard") {
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "square",
-                        showTitle: true,
-                        lazy: true,
-                        coverImage: true,
-                        showItemCounts: true,
-                        cardLayout: 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
-                    });
-                }
-                else {
-                    // Poster
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "square",
-                        showTitle: true,
-                        lazy: true,
-                        coverImage: true,
-                        showItemCounts: true,
-                        centerText: true,
-                        overlayPlayButton: true
-                    });
-                }
-
-                page.querySelector('.noItemsMessage').classList.add('hide');
-
-            } else {
-
-                page.querySelector('.noItemsMessage').classList.remove('hide');
-            }
-
-            var elem = page.querySelector('.itemsContainer');
-            elem.innerHTML = html;
-            ImageLoader.lazyChildren(elem);
-
-            var btnNextPage = page.querySelector('.btnNextPage');
-            if (btnNextPage) {
-                btnNextPage.addEventListener('click', function () {
-                    query.StartIndex += query.Limit;
-                    reloadItems(page);
-                });
-            }
-
-            var btnPreviousPage = page.querySelector('.btnPreviousPage');
-            if (btnPreviousPage) {
-                btnPreviousPage.addEventListener('click', function () {
-                    query.StartIndex -= query.Limit;
-                    reloadItems(page);
-                });
-            }
-
-            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);
-
-            hideLoadingMessage(page);
         });
-    }
 
-    pageIdOn('pagebeforeshow', "playlistsPage", function () {
+        onViewStyleChange();
-
-        var page = this;
-        reloadItems(page);
-    });
 
+    };
 });

dashboard-ui/scripts/site.js

@@ -2497,7 +2497,8 @@ var AppInfo = {};
             path: '/playlists.html',
             dependencies: [],
             autoFocus: false,
-            transition: 'fade'
+            transition: 'fade',
+            controller: 'scripts/playlists'
         });
 
         defineRoute({