From fb05bbd6b58ce736dc61fafbd66aa22f5c50dfc6 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Thu, 20 Aug 2015 00:06:49 -0400
Subject: [PATCH] redo playlist page

---
 dashboard-ui/css/librarybrowser.css    |   2 +-
 dashboard-ui/itemdetails.html          |   2 +-
 dashboard-ui/playlistedit.html         |  21 ---
 dashboard-ui/scripts/itemdetailpage.js |  14 ++
 dashboard-ui/scripts/librarybrowser.js |   7 +-
 dashboard-ui/scripts/playlistedit.js   | 238 +++++++------------------
 6 files changed, 87 insertions(+), 197 deletions(-)
 delete mode 100644 dashboard-ui/playlistedit.html
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 617004cf31..14a3227830 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -460,7 +460,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     margin-top: 1em;
 }
 
-@media all and (min-width: 620px) {
+@media all and (min-width: 540px) {
 
     .detailUserDataIcons {
         display: inline-block;
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index e57e78fdd0..6f3a5e9ec0 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -4,7 +4,7 @@
     <title></title>
 </head>
 <body>
-    <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage lightBackdropPage" data-theme="b" data-require="scripts/itemdetailpage,paperbuttonstyle,tileitemcss,scripts/livetvcomponents">
+    <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage lightBackdropPage noSecondaryNavPage" data-theme="b" data-require="scripts/itemdetailpage,paperbuttonstyle,tileitemcss,scripts/livetvcomponents">
 
         <div id="tvShowsTabs" class="itemTabs" style="display: none;">
             <div class="libraryViewNav scopedLibraryViewNav">
diff --git a/dashboard-ui/playlistedit.html b/dashboard-ui/playlistedit.html
deleted file mode 100644
index 4d46068cf2..0000000000
--- a/dashboard-ui/playlistedit.html
+++ /dev/null
@@ -1,21 +0,0 @@
-﻿<!DOCTYPE html>
-<html>
-<head>
-    <title>Emby</title>
-</head>
-<body>
-    <div id="playlistEditorPage" data-role="page" class="page libraryPage noSecondaryNavPage" data-require="scripts/playlistedit" data-backbutton="true" data-menubutton="false">
-
-        <div data-role="content">
-            <div class="viewSettings">
-                <div class="listTopPaging"></div>
-                <paper-button raised class="secondary btnPlay hide"><iron-icon icon="play-arrow"></iron-icon><span>${ButtonPlay}</span></paper-button>
-            </div>
-            <div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
-            <div class="noItemsMessage" style="display: none; text-align: center;">
-                <p>${MessageNoPlaylistItemsAvailable}</p>
-            </div>
-        </div>
-    </div>
-</body>
-</html>
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index 97da04e451..984810068e 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -285,6 +285,11 @@
             $('#childrenCollapsible', page).removeClass('hide');
             renderChannelGuide(page, item, user);
         }
+        else if (item.Type == 'Playlist') {
+
+            $('#childrenCollapsible', page).removeClass('hide');
+            renderPlaylistItems(page, item, user);
+        }
         else if (item.Type == 'Studio' || item.Type == 'Person' || item.Type == 'Genre' || item.Type == 'MusicGenre' || item.Type == 'GameGenre' || item.Type == 'MusicArtist') {
 
             $('#childrenCollapsible', page).removeClass('hide');
@@ -881,6 +886,15 @@
         });
     }
 
+    function renderPlaylistItems(page, item, user) {
+
+        require('scripts/playlistedit'.split(','), function () {
+
+
+            PlaylistViewer.render(page, item);
+        });
+    }
+
     function renderChannelGuide(page, item, user) {
 
         require('scripts/livetvcomponents,scripts/livetvchannel,livetvcss'.split(','), function () {
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 3e26ebd095..54ee6c19c2 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -794,7 +794,7 @@
                 return "photos.html?parentId=" + id;
             }
             if (item.Type == "Playlist") {
-                return "playlistedit.html?id=" + id;
+                return "itemdetails.html?id=" + id;
             }
             if (item.Type == "TvChannel") {
                 return "itemdetails.html?id=" + id;
@@ -3092,6 +3092,11 @@
                 }
             }
 
+            if (item.CumulativeRunTimeTicks && item.Type != "Series" && item.Type != "Season") {
+
+                miscInfo.push(Dashboard.getDisplayTime(item.CumulativeRunTimeTicks));
+            }
+
             if (item.OfficialRating && item.Type !== "Season" && item.Type !== "Episode") {
                 miscInfo.push(item.OfficialRating);
             }
diff --git a/dashboard-ui/scripts/playlistedit.js b/dashboard-ui/scripts/playlistedit.js
index 44a7a9c4fd..b9f946f35e 100644
--- a/dashboard-ui/scripts/playlistedit.js
+++ b/dashboard-ui/scripts/playlistedit.js
@@ -1,143 +1,113 @@
 ﻿(function ($, document) {
 
-    var view = LibraryBrowser.getDefaultItemsView('List', 'List');
-    var currentItem;
+    var data = {};
+    function getPageData() {
+        var key = getSavedQueryKey();
+        var pageData = data[key];
 
-    // The base query options
-    var query = {
+        if (!pageData) {
+            pageData = data[key] = {
+                query: {
+                    Fields: "PrimaryImageAspectRatio,SyncInfo",
+                    EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
+                    StartIndex: 0,
+                    Limit: LibraryBrowser.getDefaultPageSize()
+                },
+                view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('List', 'List')
+            };
 
-        Fields: "PrimaryImageAspectRatio,SyncInfo",
-        StartIndex: 0,
-        ImageTypeLimit: 1,
-        EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
-    };
+            pageData.query.ParentId = LibraryMenu.getTopParentId();
+            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+        }
+        return pageData;
+    }
+
+    function getQuery() {
+
+        return getPageData().query;
+    }
 
     function getSavedQueryKey() {
 
-        return 'playlists' + (query.ParentId || '');
+        return getWindowUrl();
     }
 
-    function getItemsFunction(itemsQuery) {
 
-        itemsQuery = $.extend({}, itemsQuery);
-        itemsQuery.SortBy = null;
-        itemsQuery.SortOrder = null;
-
-        return function (index, limit, fields) {
-
-            itemsQuery.StartIndex = index;
-            itemsQuery.Limit = limit;
-            itemsQuery.Fields = fields;
-            return ApiClient.getItems(Dashboard.getCurrentUserId(), itemsQuery);
-
-        };
-
-    }
-
-    var _childrenItemsFunction = null;
-
-    function reloadItems(page) {
+    function reloadItems(page, item) {
 
         Dashboard.showLoadingMsg();
 
-        query.ParentId = getParameterByName('id');
+        var query = getQuery();
+
         query.UserId = Dashboard.getCurrentUserId();
 
-        var promise1 = ApiClient.getJSON(ApiClient.getUrl('Playlists/' + query.ParentId + '/Items', query));
-        var promise2 = Dashboard.getCurrentUser();
-        var promise3 = ApiClient.getItem(Dashboard.getCurrentUserId(), query.ParentId);
-
-        $.when(promise1, promise2, promise3).done(function (response1, response2, response3) {
-
-            var result = response1[0];
-            var user = response2[0];
-            var item = response3[0];
-
-            LibraryMenu.setTitle(item.Name);
-
-            _childrenItemsFunction = getItemsFunction(query);
-
-            currentItem = item;
-
-            if (MediaController.canPlay(item)) {
-                $('.btnPlay', page).removeClass('hide');
-            }
-            else {
-                $('.btnPlay', page).addClass('hide');
-            }
-
-            if (item.LocalTrailerCount && item.PlayAccess == 'Full') {
-                $('.btnPlayTrailer', page).removeClass('hide');
-            } else {
-                $('.btnPlayTrailer', page).addClass('hide');
-            }
+        ApiClient.getJSON(ApiClient.getUrl('Playlists/' + item.Id + '/Items', query)).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
             window.scrollTo(0, 0);
 
             var html = '';
 
-            $('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({
+            html += LibraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
                 showLimit: false,
                 updatePageSizeSetting: false
 
-            })).trigger('create');
+            });
 
-            updateFilterControls(page);
+            var view = getPageData().view;
 
-            if (result.TotalRecordCount) {
+            if (view == "List") {
 
-                if (view == "List") {
+                html = LibraryBrowser.getListViewHtml({
+                    items: result.Items,
+                    sortBy: query.SortBy,
+                    showIndex: false,
+                    showRemoveFromPlaylist: true,
+                    playFromHere: true,
+                    defaultAction: 'playallfromhere',
+                    smallIcon: true
 
-                    html = LibraryBrowser.getListViewHtml({
-                        items: result.Items,
-                        context: 'playlists',
-                        sortBy: query.SortBy,
-                        showIndex: false,
-                        title: item.Name,
-                        showRemoveFromPlaylist: true,
-                        playFromHere: true,
-                        defaultAction: 'playallfromhere',
-                        smallIcon: true
-                    });
-                }
-
-                $('.noItemsMessage', page).hide();
-
-            } else {
-
-                $('.noItemsMessage', page).show();
+                });
             }
 
-            var elem = page.querySelector('.itemsContainer');
+            var elem = page.querySelector('#childrenContent .itemsContainer');
             elem.innerHTML = html;
             $(elem).trigger('create');
             ImageLoader.lazyChildren(elem);
 
-            $('.btnNextPage', page).on('click', function () {
+            $(elem).off('needsrefresh').on('needsrefresh', function () {
+
+                reloadItems(page, item);
+
+            }).off('removefromplaylist').on('removefromplaylist', function (e, playlistItemId) {
+
+                removeFromPlaylist(page, item, [playlistItemId]);
+
+            });
+
+
+            $('.btnNextPage', elem).on('click', function () {
                 query.StartIndex += query.Limit;
-                reloadItems(page);
+                reloadItems(page, item);
             });
 
-            $('.btnPreviousPage', page).on('click', function () {
+            $('.btnPreviousPage', elem).on('click', function () {
                 query.StartIndex -= query.Limit;
-                reloadItems(page);
+                reloadItems(page, item);
             });
 
-            LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
-
             Dashboard.hideLoadingMsg();
         });
     }
 
-    function removeFromPlaylist(page, ids) {
+    function removeFromPlaylist(page, item, ids) {
 
         ApiClient.ajax({
 
-            url: ApiClient.getUrl('Playlists/' + currentItem.Id + '/Items', {
+            url: ApiClient.getUrl('Playlists/' + item.Id + '/Items', {
                 EntryIds: ids.join(',')
             }),
 
@@ -145,93 +115,15 @@
 
         }).done(function () {
 
-            reloadItems(page);
+            reloadItems(page, item);
         });
 
     }
 
-    function updateFilterControls(page) {
-
-        // Reset form values using the last used query
-        $('.radioSortBy', page).each(function () {
-
-            this.checked = (query.SortBy || '').toLowerCase() == this.getAttribute('data-sortby').toLowerCase();
-
-        }).checkboxradio('refresh');
-
-        $('.radioSortOrder', page).each(function () {
-
-            this.checked = (query.SortOrder || '').toLowerCase() == this.getAttribute('data-sortorder').toLowerCase();
-
-        }).checkboxradio('refresh');
-
-        $('.chkStandardFilter', page).each(function () {
-
-            var filters = "," + (query.Filters || "");
-            var filterName = this.getAttribute('data-filter');
-
-            this.checked = filters.indexOf(',' + filterName) != -1;
-
-        }).checkboxradio('refresh');
-
-        $('#selectView', page).val(view).selectmenu('refresh');
-    }
-
-    $(document).on('pageinitdepends', "#playlistEditorPage", function () {
-
-        var page = this;
-
-        $('.btnPlay', page).on('click', function () {
-            var userdata = currentItem.UserData || {};
-
-            var mediaType = currentItem.MediaType;
-
-            if (currentItem.Type == "MusicArtist" || currentItem.Type == "MusicAlbum") {
-                mediaType = "Audio";
-            }
-
-            LibraryBrowser.showPlayMenu(null, currentItem.Id, currentItem.Type, currentItem.IsFolder, mediaType, userdata.PlaybackPositionTicks);
-        });
-
-        $('.itemsContainer', page).on('needsrefresh', function () {
-
-            reloadItems(page);
-
-        }).on('removefromplaylist', function (e, playlistItemId) {
-
-            removeFromPlaylist(page, [playlistItemId]);
-
-        }).on('playallfromhere', function (e, index) {
-
-            LibraryBrowser.playAllFromHere(_childrenItemsFunction, index);
-
-        }).on('queueallfromhere', function (e, index) {
-
-            LibraryBrowser.queueAllFromHere(_childrenItemsFunction, index);
-
-        });
-
-    }).on('pagebeforeshowready', "#playlistEditorPage", function () {
-
-        var page = this;
-
-        query.ParentId = LibraryMenu.getTopParentId();
-
-        var limit = LibraryBrowser.getDefaultPageSize();
-
-        // If the default page size has changed, the start index will have to be reset
-        if (limit != query.Limit) {
-            query.Limit = limit;
-            query.StartIndex = 0;
+    window.PlaylistViewer = {
+        render: function (page, item) {
+            reloadItems(page, item);
         }
-
-        var viewkey = getSavedQueryKey();
-
-        LibraryBrowser.loadSavedQueryValues(viewkey, query);
-        reloadItems(page);
-
-        updateFilterControls(this);
-
-    });
+    };
 
 })(jQuery, document);
\ No newline at end of file
