Implement changes to history table to user tables

* Add tooltips
* Change icons

data/interfaces/default/js/tables/user_ips.js

@@ -52,7 +52,15 @@ user_ip_table_options = {
             "data":"platform",
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (cellData) {
-                    $(td).html('<a href="#" data-target="#info-modal" data-toggle="modal"><i class="fa fa-lg fa-info-circle"></i>&nbsp' + cellData + '</a>');
+                    var transcode_dec = '';
+                    if (rowData['video_decision'] === 'transcode') {
+                        transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Transcode"><i class="fa fa-server fa-fw"></i></span>&nbsp';
+                    } else if (rowData['video_decision'] === 'copy') {
+                        transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Direct Stream"><i class="fa fa-video-camera fa-fw"></i></span>&nbsp';
+                    } else if (rowData['video_decision'] === 'direct play' || rowData['video_decision'] === '') {
+                        transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Direct Play"><i class="fa fa-play-circle fa-fw"></i></span>&nbsp';
+                    }
+                    $(td).html('<div><a href="#" data-target="#info-modal" data-toggle="modal"><div style="float: left;">' + transcode_dec + '&nbsp' + cellData + '</div></a></div>');
                 } else {
                     $(td).html('n/a');
                 }
@@ -65,14 +73,20 @@ user_ip_table_options = {
             "data":"last_watched",
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (cellData !== '') {
-                    if (rowData['media_type'] === 'movie' || rowData['media_type'] === 'episode') {
-                        var transcode_dec = '';
-                        if (rowData['video_decision'] === 'transcode') {
-                            transcode_dec = '<i class="fa fa-server"></i>&nbsp';
-                        }
-                        $(td).html('<div><div style="float: left;"><a href="info?source=history&item_id=' + rowData['id'] + '">' + cellData + '</a></div><div style="float: right; text-align: right; padding-right: 5px;">' + transcode_dec + '<i class="fa fa-video-camera"></i></div></div>');
+                    var media_type = '';
+                    var thumb_popover = ''
+                    if (rowData['media_type'] === 'movie') {
+                        media_type = '<span class="media-type-tooltip" data-toggle="tooltip" title="Movie"><i class="fa fa-film fa-fw"></i></span>';
+                        thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=80&height=120&fallback=poster" data-height="120">' + cellData + '</span>'
+                        $(td).html('<div class="history-title"><a href="info?source=history&item_id=' + rowData['id'] + '"><div style="float: left;">' + media_type + '&nbsp' + thumb_popover + '</div></a></div>');
+                    } else if (rowData['media_type'] === 'episode') {
+                        media_type = '<span class="media-type-tooltip" data-toggle="tooltip" title="Episode"><i class="fa fa-television fa-fw"></i></span>';
+                        thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=80&height=120&fallback=poster" data-height="120">' + cellData + '</span>'
+                        $(td).html('<div class="history-title"><a href="info?source=history&item_id=' + rowData['id'] + '"><div style="float: left;" >' + media_type + '&nbsp' + thumb_popover + '</div></a></div>');
                     } else if (rowData['media_type'] === 'track') {
-                        $(td).html('<div><div style="float: left;">' + cellData + '</div><div style="float: right; text-align: right; padding-right: 5px;"><i class="fa fa-music"></i></div></div>');
+                        media_type = '<span class="media-type-tooltip" data-toggle="tooltip" title="Track"><i class="fa fa-music fa-fw"></i></span>';
+                        thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=80&height=80&fallback=poster" data-height="80">' + cellData + '</span>'
+                        $(td).html('<div class="history-title"><div style="float: left;">' + media_type + '&nbsp' + thumb_popover + '</div></div>');
                     } else if (rowData['media_type']) {
                         $(td).html('<a href="info?item_id=' + rowData['id'] + '">' + cellData + '</a>');
                     } else {
@@ -93,10 +107,20 @@ user_ip_table_options = {
         // Jump to top of page
         // $('html,body').scrollTop(0);
         $('#ajaxMsg').fadeOut();
+
         // Create the tooltips.
-        $('.info-modal').each(function () {
-            $(this).tooltip();
+        $('.transcode-tooltip').tooltip();
+        $('.media-type-tooltip').tooltip();
+        $('.watched-tooltip').tooltip();
+        $('.thumb-tooltip').popover({
+            html: true,
+            trigger: 'hover',
+            placement: 'right',
+            content: function () {
+                return '<div style="background-image: url(' + $(this).data('img') + '); width: 80px; height: ' + $(this).data('height') + 'px;" />';
+            }
         });
+
     },
     "preDrawCallback": function(settings) {
         var msg = "<div class='msg'><i class='fa fa-refresh fa-spin'></i>&nbspFetching rows...</div>";

data/interfaces/default/js/tables/users.js

@@ -18,7 +18,7 @@ users_list_table_options = {
     "columnDefs": [
         {
             "targets": [0],
-            "data": "thumb",
+            "data": "user_thumb",
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (cellData === '') {
                     $(td).html('<img src="interfaces/default/images/gravatar-default-80x80.png" alt="User Logo"/>');
@@ -28,8 +28,8 @@ users_list_table_options = {
             },
             "orderable": false,
             "searchable": false,
-            "className": "users-poster-face",
-            "width": "40px"
+            "width": "5%",
+            "className": "users-poster-face"
         },
         {
             "targets": [1],
@@ -87,7 +87,15 @@ users_list_table_options = {
             "data":"platform",
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (cellData) {
-                    $(td).html('<a href="#" data-target="#info-modal" data-toggle="modal"><i class="fa fa-lg fa-info-circle"></i>&nbsp' + cellData + '</a>');
+                    var transcode_dec = '';
+                    if (rowData['video_decision'] === 'transcode') {
+                        transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Transcode"><i class="fa fa-server fa-fw"></i></span>&nbsp';
+                    } else if (rowData['video_decision'] === 'copy') {
+                        transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Direct Stream"><i class="fa fa-video-camera fa-fw"></i></span>&nbsp';
+                    } else if (rowData['video_decision'] === 'direct play' || rowData['video_decision'] === '') {
+                        transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Direct Play"><i class="fa fa-play-circle fa-fw"></i></span>&nbsp';
+                    }
+                    $(td).html('<div><a href="#" data-target="#info-modal" data-toggle="modal"><div style="float: left;">' + transcode_dec + '&nbsp' + cellData + '</div></a></div>');
                 } else {
                     $(td).html('n/a');
                 }
@@ -100,14 +108,20 @@ users_list_table_options = {
             "data":"last_watched",
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (cellData !== '') {
-                    if (rowData['media_type'] === 'movie' || rowData['media_type'] === 'episode') {
-                        var transcode_dec = '';
-                        if (rowData['video_decision'] === 'transcode') {
-                            transcode_dec = '<i class="fa fa-server"></i>&nbsp';
-                        }
-                        $(td).html('<div><div style="float: left;"><a href="info?source=history&item_id=' + rowData['id'] + '">' + cellData + '</a></div><div style="float: right; text-align: right; padding-right: 5px;">' + transcode_dec + '<i class="fa fa-video-camera"></i></div></div>');
+                    var media_type = '';
+                    var thumb_popover = ''
+                    if (rowData['media_type'] === 'movie') {
+                        media_type = '<span class="media-type-tooltip" data-toggle="tooltip" title="Movie"><i class="fa fa-film fa-fw"></i></span>';
+                        thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=80&height=120&fallback=poster" data-height="120">' + cellData + '</span>'
+                        $(td).html('<div class="history-title"><a href="info?source=history&item_id=' + rowData['id'] + '"><div style="float: left;">' + media_type + '&nbsp' + thumb_popover + '</div></a></div>');
+                    } else if (rowData['media_type'] === 'episode') {
+                        media_type = '<span class="media-type-tooltip" data-toggle="tooltip" title="Episode"><i class="fa fa-television fa-fw"></i></span>';
+                        thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=80&height=120&fallback=poster" data-height="120">' + cellData + '</span>'
+                        $(td).html('<div class="history-title"><a href="info?source=history&item_id=' + rowData['id'] + '"><div style="float: left;" >' + media_type + '&nbsp' + thumb_popover + '</div></a></div>');
                     } else if (rowData['media_type'] === 'track') {
-                        $(td).html('<div><div style="float: left;">' + cellData + '</div><div style="float: right; text-align: right; padding-right: 5px;"><i class="fa fa-music"></i></div></div>');
+                        media_type = '<span class="media-type-tooltip" data-toggle="tooltip" title="Track"><i class="fa fa-music fa-fw"></i></span>';
+                        thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=80&height=80&fallback=poster" data-height="80">' + cellData + '</span>'
+                        $(td).html('<div class="history-title"><div style="float: left;">' + media_type + '&nbsp' + thumb_popover + '</div></div>');
                     } else if (rowData['media_type']) {
                         $(td).html('<a href="info?item_id=' + rowData['id'] + '">' + cellData + '</a>');
                     } else {
@@ -129,10 +143,20 @@ users_list_table_options = {
         // Jump to top of page
         //$('html,body').scrollTop(0);
         $('#ajaxMsg').fadeOut();
+
         // Create the tooltips.
-        $('.info-modal').each(function () {
-            $(this).tooltip();
+        $('.transcode-tooltip').tooltip();
+        $('.media-type-tooltip').tooltip();
+        $('.watched-tooltip').tooltip();
+        $('.thumb-tooltip').popover({
+            html: true,
+            trigger: 'hover',
+            placement: 'right',
+            content: function () {
+                return '<div style="background-image: url(' + $(this).data('img') + '); width: 80px; height: ' + $(this).data('height') + 'px;" />';
+            }
         });
+
     },
     "preDrawCallback": function(settings) {
         var msg = "<div class='msg'><i class='fa fa-refresh fa-spin'></i>&nbspFetching rows...</div>";

plexpy/users.py

@@ -1,4 +1,4 @@
-# This file is part of PlexPy.
+# This file is part of PlexPy.
 #
 #  PlexPy is free software: you can redistribute it and/or modify
 #  it under the terms of the GNU General Public License as published by
@@ -26,7 +26,7 @@ class Users(object):
 
         columns = ['session_history.id',
                    'users.user_id as user_id',
-                   'users.custom_avatar_url as thumb',
+                   'users.custom_avatar_url as user_thumb',
                    '(case when users.friendly_name is null then users.username else \
                     users.friendly_name end) as friendly_name',
                    'MAX(session_history.started) as last_seen',
@@ -34,6 +34,9 @@ class Users(object):
                    'COUNT(session_history.id) as plays',
                    'session_history.player as platform',
                    'session_history_metadata.full_title as last_watched',
+                   'session_history_metadata.thumb',
+                   'session_history_metadata.parent_thumb',
+                   'session_history_metadata.grandparent_thumb',
                    'session_history_metadata.media_type',
                    'session_history.rating_key as rating_key',
                    'session_history_media_info.video_decision',
@@ -66,10 +69,17 @@ class Users(object):
 
         rows = []
         for item in users:
-            if not item['thumb'] or item['thumb'] == '':
+            if item["media_type"] == 'episode' and item["parent_thumb"]:
+                thumb = item["parent_thumb"]
+            elif item["media_type"] == 'episode':
+                thumb = item["grandparent_thumb"]
+            else:
+                thumb = item["thumb"]
+
+            if not item['user_thumb'] or item['user_thumb'] == '':
                 user_thumb = common.DEFAULT_USER_THUMB
             else:
-                user_thumb = item['thumb']
+                user_thumb = item['user_thumb']
 
             row = {"id": item['id'],
                    "plays": item['plays'],
@@ -78,10 +88,11 @@ class Users(object):
                    "ip_address": item['ip_address'],
                    "platform": item['platform'],
                    "last_watched": item['last_watched'],
+                   "thumb": thumb,
                    "media_type": item['media_type'],
                    "rating_key": item['rating_key'],
                    "video_decision": item['video_decision'],
-                   "thumb": user_thumb,
+                   "user_thumb": user_thumb,
                    "user": item["user"],
                    "user_id": item['user_id']
                    }
@@ -108,6 +119,9 @@ class Users(object):
                    'COUNT(session_history.id) as play_count',
                    'session_history.player as platform',
                    'session_history_metadata.full_title as last_watched',
+                   'session_history_metadata.thumb',
+                   'session_history_metadata.parent_thumb',
+                   'session_history_metadata.grandparent_thumb',
                    'session_history_metadata.media_type',
                    'session_history.rating_key as rating_key',
                    'session_history_media_info.video_decision',
@@ -144,12 +158,20 @@ class Users(object):
 
         rows = []
         for item in results:
+            if item["media_type"] == 'episode' and item["parent_thumb"]:
+                thumb = item["parent_thumb"]
+            elif item["media_type"] == 'episode':
+                thumb = item["grandparent_thumb"]
+            else:
+                thumb = item["thumb"]
+
             row = {"id": item['id'],
                    "last_seen": item['last_seen'],
                    "ip_address": item['ip_address'],
                    "play_count": item['play_count'],
                    "platform": item['platform'],
                    "last_watched": item['last_watched'],
+                   "thumb": thumb,
                    "media_type": item['media_type'],
                    "rating_key": item['rating_key'],
                    "video_decision": item['video_decision'],