From 1061c334ae47d4f44dfd4b46cdd0b887dd083604 Mon Sep 17 00:00:00 2001
From: JonnyWong16 <9099342+JonnyWong16@users.noreply.github.com>
Date: Wed, 30 Sep 2020 21:01:14 -0700
Subject: [PATCH] Improve look of collections and playlists tables

---
 data/interfaces/default/css/tautulli.css      |  2 ++
 data/interfaces/default/info.html             |  2 +-
 .../default/info_children_list.html           |  2 +-
 .../default/js/tables/collections_table.js    | 22 +++++++++++++---
 .../default/js/tables/playlists_table.js      | 26 +++++++++----------
 data/interfaces/default/library.html          | 11 ++++----
 plexpy/libraries.py                           | 24 ++++++++++++-----
 7 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/data/interfaces/default/css/tautulli.css b/data/interfaces/default/css/tautulli.css
index dea647c9..bec5ce2d 100644
--- a/data/interfaces/default/css/tautulli.css
+++ b/data/interfaces/default/css/tautulli.css
@@ -1968,6 +1968,8 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
     list-style: none;
     margin: 0;
     overflow: auto;
+}
+.item-children-instance.max-height {
     max-height: 875px;
 }
 .item-children-instance li {
diff --git a/data/interfaces/default/info.html b/data/interfaces/default/info.html
index 08bd0df6..cd20164b 100644
--- a/data/interfaces/default/info.html
+++ b/data/interfaces/default/info.html
@@ -189,7 +189,7 @@ DOCUMENTATION :: END
                                     <span></span>
                                 </div>
                                     % if data['media_type'] == 'playlist' and data['smart']:
-                                    <span class="smart-playlist-image" title="Smart Playlist"><i class="fa fa-gear"></i></span>
+                                    <span class="smart-playlist-image" title="Smart Playlist"><i class="fa fa-cog"></i></span>
                                     % endif
                             </div>
                             % if _session['user_group'] == 'admin':
diff --git a/data/interfaces/default/info_children_list.html b/data/interfaces/default/info_children_list.html
index d63a1f0b..f6af0c37 100644
--- a/data/interfaces/default/info_children_list.html
+++ b/data/interfaces/default/info_children_list.html
@@ -32,7 +32,7 @@ DOCUMENTATION :: END
 %>
 % if data['children_count'] > 0:
 <div class="item-children-wrapper">
-    <ul class="item-children-instance list-unstyled">
+    <ul class="item-children-instance ${'max-height' if media_type == 'playlist' else ''} list-unstyled">
         % for child in data['children_list']:
         % if child['rating_key']:
         % if data['children_type'] == 'track' or media_type == 'playlist':
diff --git a/data/interfaces/default/js/tables/collections_table.js b/data/interfaces/default/js/tables/collections_table.js
index 3f0aaae2..03375056 100644
--- a/data/interfaces/default/js/tables/collections_table.js
+++ b/data/interfaces/default/js/tables/collections_table.js
@@ -24,7 +24,7 @@ collections_table_options = {
             "data": "title",
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (cellData !== '') {
-                    $(td).html('<a href="' + page('info', rowData['ratingKey']) + '">' + cellData + '</a>');
+                    $(td).html('<a href="' + page('info', rowData['ratingKey']) + '"><i class="fa fa-blank fa-fw"></i>' + cellData + '</a>');
                 }
             },
             "width": "50%",
@@ -35,7 +35,17 @@ collections_table_options = {
             "data": "collectionMode",
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (cellData !== '') {
-                    $(td).html(cellData);
+                    var mode = '';
+                    if (cellData === -1) {
+                        mode = 'Library default';
+                    } else if (cellData === 0) {
+                        mode = 'Hide collection';
+                    } else if (cellData === 1) {
+                        mode = 'Hide items in this collection';
+                    } else if (cellData === 2) {
+                        mode = 'Show this collection and its items';
+                    }
+                    $(td).html(mode);
                 }
             },
             "width": "20%",
@@ -46,7 +56,13 @@ collections_table_options = {
             "data": "collectionSort",
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (cellData !== '') {
-                    $(td).html(cellData);
+                    var sort = '';
+                    if (cellData === 0) {
+                        sort = 'Release date';
+                    } else if (cellData === 1) {
+                        sort = 'Alphabetical';
+                    }
+                    $(td).html(sort);
                 }
             },
             "width": "20%",
diff --git a/data/interfaces/default/js/tables/playlists_table.js b/data/interfaces/default/js/tables/playlists_table.js
index 4ed4216a..b5859b05 100644
--- a/data/interfaces/default/js/tables/playlists_table.js
+++ b/data/interfaces/default/js/tables/playlists_table.js
@@ -24,10 +24,14 @@ playlists_table_options = {
             "data": "title",
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (cellData !== '') {
-                    $(td).html('<a href="' + page('info', rowData['ratingKey']) + '&section_id=' + rowData['librarySectionID'] +'">' + cellData + '</a>');
+                    var smart = '<i class="fa fa-blank fa-fw"></i>';
+                    if (rowData['smart']) {
+                        smart = '<span class="media-type-tooltip" data-toggle="tooltip" title="Smart Playlist"><i class="fa fa-cog fa-fw"></i></span>&nbsp;'
+                    }
+                    $(td).html('<a href="' + page('info', rowData['ratingKey']) + '&section_id=' + rowData['librarySectionID'] +'">' + smart + cellData + '</a>');
                 }
             },
-            "width": "50%",
+            "width": "60%",
             "className": "no-wrap"
         },
         {
@@ -51,27 +55,23 @@ playlists_table_options = {
             },
             "width": "20%",
             "className": "no-wrap"
-        },
-        {
-            "targets": [3],
-            "data": "smart",
-            "createdCell": function (td, cellData, rowData, row, col) {
-                if (cellData !== '') {
-                    $(td).html(cellData);
-                }
-            },
-            "width": "10%",
-            "className": "no-wrap"
         }
     ],
     "drawCallback": function (settings) {
         // Jump to top of page
         //$('html,body').scrollTop(0);
         $('#ajaxMsg').fadeOut();
+
+        // Create the tooltips.
+        $('body').tooltip({
+            selector: '[data-toggle="tooltip"]',
+            container: 'body'
+        });
     },
     "preDrawCallback": function(settings) {
         var msg = "<i class='fa fa-refresh fa-spin'></i>&nbsp; Fetching rows...";
         showMsg(msg, false, false, 0);
+        $('[data-toggle="tooltip"]').tooltip('destroy');
     },
     "rowCallback": function (row, rowData, rowIndex) {
     }
diff --git a/data/interfaces/default/library.html b/data/interfaces/default/library.html
index 0870acf0..ab757cfe 100644
--- a/data/interfaces/default/library.html
+++ b/data/interfaces/default/library.html
@@ -335,10 +335,10 @@ DOCUMENTATION :: END
                                         <table class="display collections_table" id="collections_table-SID-${data['section_id']}" width="100%">
                                             <thead>
                                                 <tr>
-                                                    <th align="left" id="title">Title</th>
+                                                    <th align="left" id="collectionTitle">Collection Title</th>
                                                     <th align="left" id="collectionMode">Collection Mode</th>
                                                     <th align="left" id="collectionSort">Collection Sort</th>
-                                                    <th align="left" id="items">Items</th>
+                                                    <th align="left" id="collectionItems">Collection Items</th>
                                                 </tr>
                                             </thead>
                                             <tbody></tbody>
@@ -375,10 +375,9 @@ DOCUMENTATION :: END
                                         <table class="display playlists_table" id="playlists_table-SID-${data['section_id']}" width="100%">
                                             <thead>
                                                 <tr>
-                                                    <th align="left" id="title">Title</th>
-                                                    <th align="left" id="leafCount">Items</th>
-                                                    <th align="left" id="duration">Duration</th>
-                                                    <th align="left" id="smart">Smart</th>
+                                                    <th align="left" id="playlistTitle">Playlist Title</th>
+                                                    <th align="left" id="playlistLeafCount">Playlist Items</th>
+                                                    <th align="left" id="playlistDuration">Playlist Duration</th>
                                                 </tr>
                                             </thead>
                                             <tbody></tbody>
diff --git a/plexpy/libraries.py b/plexpy/libraries.py
index d248b0c7..9168128e 100644
--- a/plexpy/libraries.py
+++ b/plexpy/libraries.py
@@ -153,12 +153,20 @@ def get_collections(section_id):
 
     collections_list = []
     for collection in collections:
+        collection_mode = collection.collectionMode
+        if collection_mode is None:
+            collection_mode = -1
+
+        collection_sort = collection.collectionSort
+        if collection_sort is None:
+            collection_sort = 0
+
         collection_dict = {
             'addedAt': helpers.datetime_to_iso(collection.addedAt),
             'art': collection.art,
             'childCount': collection.childCount,
-            'collectionMode': collection.collectionMode,
-            'collectionSort': collection.collectionSort,
+            'collectionMode': helpers.cast_to_int(collection_mode),
+            'collectionSort': helpers.cast_to_int(collection_sort),
             'contentRating': collection.contentRating,
             'guid': collection.guid,
             'librarySectionID': collection.librarySectionID,
@@ -181,7 +189,8 @@ def get_collections(section_id):
 
 def get_collections_list(section_id=None, **kwargs):
     if not section_id:
-        default_return = {'recordsTotal': 0,
+        default_return = {'recordsFiltered': 0,
+                          'recordsTotal': 0,
                           'draw': 0,
                           'data': 'null',
                           'error': 'Unable to execute database query.'}
@@ -189,7 +198,8 @@ def get_collections_list(section_id=None, **kwargs):
 
     collections = get_collections(section_id)
 
-    data = {'recordsTotal': len(collections),
+    data = {'recordsFiltered': len(collections),
+            'recordsTotal': len(collections),
             'data': collections,
             'draw': kwargs.get('draw', 0)
             }
@@ -237,7 +247,8 @@ def get_playlists(section_id):
 
 def get_playlists_list(section_id=None, **kwargs):
     if not section_id:
-        default_return = {'recordsTotal': 0,
+        default_return = {'recordsFiltered': 0,
+                          'recordsTotal': 0,
                           'draw': 0,
                           'data': 'null',
                           'error': 'Unable to execute database query.'}
@@ -245,7 +256,8 @@ def get_playlists_list(section_id=None, **kwargs):
 
     playlists = get_playlists(section_id)
 
-    data = {'recordsTotal': len(playlists),
+    data = {'recordsFiltered': len(playlists),
+            'recordsTotal': len(playlists),
             'data': playlists,
             'draw': kwargs.get('draw', 0)
             }