From f7fa773ec7e1b65944d5879e851c7949fadf7e37 Mon Sep 17 00:00:00 2001
From: JonnyWong16 <9099342+JonnyWong16@users.noreply.github.com>
Date: Fri, 2 Oct 2020 22:03:33 -0700
Subject: [PATCH] Add thumb popover to collections and playlists tables

---
 .../default/js/tables/collections_table.js        | 15 ++++++++++++++-
 .../default/js/tables/playlists_table.js          | 14 +++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/data/interfaces/default/js/tables/collections_table.js b/data/interfaces/default/js/tables/collections_table.js
index a3cde91c..27e92263 100644
--- a/data/interfaces/default/js/tables/collections_table.js
+++ b/data/interfaces/default/js/tables/collections_table.js
@@ -24,7 +24,8 @@ collections_table_options = {
             "data": "titleSort",
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (cellData !== '') {
-                    $(td).html('<a href="' + page('info', rowData['ratingKey']) + '"><i class="fa fa-blank fa-fw"></i>' + rowData['title'] + '</a>');
+                    var thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="' + page('pms_image_proxy', rowData['thumb'], rowData['ratingKey'], 300, 450, null, null, null, 'poster') + '" data-height="120" data-width="80">' + rowData['title'] + '</span>';
+                    $(td).html('<a href="' + page('info', rowData['ratingKey']) + '"><i class="fa fa-blank fa-fw"></i>' + thumb_popover + '</a>');
                 }
             },
             "width": "50%",
@@ -88,6 +89,18 @@ collections_table_options = {
         // Jump to top of page
         //$('html,body').scrollTop(0);
         $('#ajaxMsg').fadeOut();
+
+        $('body').popover({
+            selector: '[data-toggle="popover"]',
+            html: true,
+            container: 'body',
+            trigger: 'hover',
+            placement: 'right',
+            template: '<div class="popover history-thumbnail-popover" role="tooltip"><div class="arrow" style="top: 50%;"></div><div class="popover-content"></div></div>',
+            content: function () {
+                return '<div class="history-thumbnail" style="background-image: url(' + $(this).data('img') + '); height: ' + $(this).data('height') + 'px; width: ' + $(this).data('width') + 'px;" />';
+            }
+        });
     },
     "preDrawCallback": function(settings) {
         var msg = "<i class='fa fa-refresh fa-spin'></i>&nbsp; Fetching rows...";
diff --git a/data/interfaces/default/js/tables/playlists_table.js b/data/interfaces/default/js/tables/playlists_table.js
index 25474040..2c0a2a01 100644
--- a/data/interfaces/default/js/tables/playlists_table.js
+++ b/data/interfaces/default/js/tables/playlists_table.js
@@ -34,7 +34,8 @@ playlists_table_options = {
                     } else if (rowData['librarySectionID']) {
                         breadcrumb = '&section_id=' + rowData['librarySectionID'];
                     }
-                    $(td).html('<a href="' + page('info', rowData['ratingKey']) + breadcrumb +'">' + smart + cellData + '</a>');
+                    var thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="' + page('pms_image_proxy', rowData['composite'], rowData['ratingKey'], 300, 300, null, null, null, 'cover') + '" data-height="80" data-width="80">' + smart + cellData + '</span>';
+                    $(td).html('<a href="' + page('info', rowData['ratingKey']) + breadcrumb +'">' + thumb_popover + '</a>');
                 }
             },
             "width": "60%",
@@ -77,6 +78,17 @@ playlists_table_options = {
             selector: '[data-toggle="tooltip"]',
             container: 'body'
         });
+        $('body').popover({
+            selector: '[data-toggle="popover"]',
+            html: true,
+            container: 'body',
+            trigger: 'hover',
+            placement: 'right',
+            template: '<div class="popover history-thumbnail-popover" role="tooltip"><div class="arrow" style="top: 50%;"></div><div class="popover-content"></div></div>',
+            content: function () {
+                return '<div class="history-thumbnail" style="background-image: url(' + $(this).data('img') + '); height: ' + $(this).data('height') + 'px; width: ' + $(this).data('width') + 'px;" />';
+            }
+        });
     },
     "preDrawCallback": function(settings) {
         var msg = "<i class='fa fa-refresh fa-spin'></i>&nbsp; Fetching rows...";