Merge branch 'dev'

Use os.execv instead of subprocess.Popen to restart the process

.gitignore

@@ -21,6 +21,7 @@ cache/*
 *.crt
 *.key
 *.csr
+*.pem
 
 # OS generated files #
 ######################

CHANGELOG.md

@@ -1,5 +1,198 @@
 # Changelog
 
+## v1.3.4 (2016-01-29)
+
+* Fix: Activity checker not starting with library update (history not logging).
+* Fix: Libraries duplicated in database.
+* Fix: Buffer notifications even when disabled when using websockets.
+* Fix: Libraries and Users lists not refreshing.
+* Fix: Server verification in settings.
+* Fix: Empty libraries not added to database.
+* Add: Unique identifier to notification options.
+* Remove: Media type toggles for recently added notifications.
+* Remove: Built in Twitter key and secret.
+* Remove: Unnecessary quoting of script arguments.
+* Change: Facebook notification instructions.
+
+
+## v1.3.3 (2016-01-26)
+
+* Fix: Plays by Month graph not loading.
+* Change: Disable caching for datatables.
+* Change: Improved updating library data in the database again.
+
+
+## v1.3.2 (2016-01-24)
+
+* Fix: 'datestamp' and 'timestamp' for server notifications.
+* Change: New method for updating library data in database.
+
+
+## v1.3.1 (2016-01-23)
+
+* Fix: Notifiers authorization popups for reverse proxies.
+* Fix: Empty brackets in titles on tables.
+* Fix: Star rating overlapping text.
+* Fix: Unable to startup when library refresh fails.
+* Fix: Unable to parse 'datestamp' and 'timestamp' format.
+* Change: Rename "Last Watched" to "Last Played".
+* Change: More descriptive libraries updating message.
+
+
+## v1.3.0 (2016-01-23)
+
+* Add: Brand new Libraries section.
+* Add: Lots of new library statistics.
+* Add: Media info table for libraries.
+* Add: Web app for Android and iOS. (Thanks @zobe123)
+* Add: Slack notification agent. (Thanks @richipargo)
+* Add: Facebook notification agent.
+* Add: Custom script notification agent. (Thanks @Hellowlol)
+* Add: Custom "From Name" to email notification agent.
+* Add: Ability to test notifications / send custom one-off notifications.
+* Add: 'datestamp' and 'timestamp' notification options.
+* Add: More concurrent stream statistics.
+* Add: Media info flags on the info pages.
+* Add: Ability to fix broken metadata if the item has been moved in Plex.
+* Add: Ability to rearrange the homepage statistics cards.
+* Add: CentOS startup script (Thanks @PHoSawyer)
+* Fix: Server name blank after first run wizard.
+* Fix: Incorrect duration for grouped home stats.
+* Fix: Allow SSL when verifying server in settings.
+* Fix: Metadata for grouped recently added notifications.
+* Fix: Unable to access settings with missing changelog file.
+* Fix: Month name localization on play totals graphs.
+* Fix: Get new PMS identifier when changing servers.
+* Fix: Websocket log spam when there is no active session.
+* Fix: Logs and cache folder not created in the data directory.
+* Fix: Title links on sync table.
+* Fix: Other various minor bugs and graphical glitches.
+* Change: Prettier thumbnail popovers on tables.
+* Change: Star ratings to use css/font-awesome.
+* Change: More detailed logging info to warnings and errors.
+* Change: Better PlexPy process restart handling (Thanks @jackwilsdon)
+* Change: Massive behind the scenes code cleanup.
+* Remove: Built in Pushover API token (User's own API token is now required).
+
+
+## v1.2.16 (2015-12-22)
+
+* Fix Most Concurrent stream stat for emtpy databases
+* Change logs to 50 lines by default
+
+
+## v1.2.15 (2015-12-20)
+
+* Fix navbar covering current activity on smaller screens.
+* Fix metadata for grouped recently added notifications.
+* Fix Growl notification agent not working.
+* Change graph days selection.
+* Change watch statistics to match table history grouping.
+* Add automatic discovery of Pushbullet devices.
+* Add Most Concurrent Streams watch statistic.
+* Add precentage to current activity progress bars.
+* Add a bunch of stream details to notification options.
+* Add notification for Plex Remote Access/Plex Media Server back up.
+* Add CC/BCC and multiple recipients to email notification agent.
+* Add total watch time to history table footer.
+
+
+## v1.2.14 (2015-12-07)
+
+* Fix regression with PlexWatch db importer and buffer warnings.
+
+
+## v1.2.13 (2015-12-06)
+
+* Fix match newlines between tags in notification text.
+* Fix current activity not showing on PMS 0.9.12.
+
+
+## v1.2.12 (2015-12-06)
+
+* Fix for "too many open files" error.
+
+
+## v1.2.11 (2015-12-06)
+
+* Fix more regressions (sorry).
+
+
+## v1.2.10 (2015-12-06)
+
+* Fix broken count graphs regression.
+
+
+## v1.2.9 (2015-12-06)
+
+* Fix and improve text sanitization.
+
+
+## v1.2.8 (2015-12-06)
+
+* Fix sanitize player names
+* Fix recently added notification delay
+* Fix recently added metadata queries
+* Fix multiple lines in notification body text
+* Fix UTF-8 encoding in Prowl notifications subject line
+* Change to only log IPv4 addresses
+* Add global toggle for recently added notifcations
+* Add feature to delete users
+* Add channel support for Telegram notification agent
+* Add icon for Apple tvOS
+* Add icon for Microsoft Edge
+
+
+## v1.2.7 (2015-11-27)
+
+* Fix IP address option in notifications
+
+
+## v1.2.6 (2015-11-27)
+
+* Fixes for IP logging in PMS < 0.9.14.x.
+* Fix issue in plexWatch importer when trying to import item with no ratingKey.
+
+
+## v1.2.5 (2015-11-25)
+
+* Add video_decision and audio_decision to notification options
+* Fix IP address logging
+* Fix log spam if notifications disabled 
+
+
+## v1.2.4 (2015-11-24)
+
+* Add filtering by media type in the history table
+* Add IFTTT notification agent
+* Add Telegram notification agent
+* Add notifications for recently added media
+* Add notifications for server down and remote access down
+* Add more metadata to notifications options
+* Add IP address to notification options (for PMS 0.9.14 and above)
+* Add server uptime to notification options
+* Add IP address to current activity
+* Add IPv6 address logging
+* Add PMS server name to the page title
+* Fix bug in "Last Watched" statistic
+* Fix bug in search query
+* Fix bug on user pages for usernames with single quotes
+* Fix name for new Plex Media Center
+* Fix Pushover notifications with unicode characters
+* Fix bug with showing old usernames in datatables
+* Fix bug with "Please verify your server" in settings
+* Change IP lookup provider
+* Change notifications custom body text to larger text box
+* Change movie/tv logging and notifications into individual options
+
+
+## v1.2.3 (2015-10-18)
+
+* Added "remaining time" as notification substitution.
+* Fix bug on home stats cards.
+* Fix visual bug on user page.
+
+
 ## v1.2.2 (2015-10-12)
 
 * Add server discovery on first run.

README.md

@@ -6,11 +6,7 @@ A python based web application for monitoring, analytics and notifications for P
 
 This project is based on code from Headphones (https://github.com/rembo10/headphones) and PlexWatchWeb (https://github.com/ecleese/plexWatchWeb).
 
-* plexPy forum thread: https://forums.plex.tv/discussion/169591/plexpy-another-plex-monitoring-program
+* PlexPy forum thread: https://forums.plex.tv/discussion/169591/plexpy-another-plex-monitoring-program
-
-If you'd like to buy me a beer, hit the donate button below. All donations go to the project maintainer (primarily for the procurement of liquid refreshment).
-
-[![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=G9HZK9BDJLKT6)
 
 
 ###Support

data/interfaces/default/base.html

@@ -7,7 +7,7 @@ from plexpy import version
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>PlexPy - ${title}</title>
+    <title>PlexPy - ${title} | ${server_name}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
@@ -18,12 +18,117 @@ from plexpy import version
     ${next.headIncludes()}
 
     <link rel="icon" type="image/x-icon" href="interfaces/default/images/favicon.ico"/>
-    <!-- touch icons -->
     <link rel="shortcut icon" href="interfaces/default/images/favicon.png">
-    <link rel="apple-touch-icon" href="interfaces/default/images/icon_iphone.png">
+
-    <link rel="apple-touch-icon" sizes="72x72" href="interfaces/default/images/icon_ipad.png">
+    <!-- Allow web app to be run in full-screen mode. -->
-    <link rel="apple-touch-icon" sizes="114x114" href="interfaces/default/images/icon_iphone@2x.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
-    <link rel="apple-touch-icon" sizes="144x144" href="interfaces/default/images/icon_ipad@2x.png">
+    <!-- Configure the status bar. -->
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <!-- Set the viewport. -->
+    <meta name="viewport" content="initial-scale=1">
+    <!-- Disable automatic phone number detection. -->
+    <meta name="format-detection" content="telephone=no">
+
+    <!-- ICONS -->
+    <!-- IE10 icon --> 
+    <meta name="application-name" content="PlexPy" />
+    <meta name="msapplication-config" content="interfaces/default/xml/IEconfig.xml"/>
+    <!-- Android >M39 icon -->
+    <link rel="manifest" href="interfaces/default/json/Android-manifest.json">
+    <!-- iPad retina icon -->
+    <link href="interfaces/default/images/res/ios/icon-76@2x.png" sizes="152x152" rel="apple-touch-icon-precomposed">
+    <!-- iPad retina icon (iOS < 7) -->
+    <link href="interfaces/default/images/res/ios/icon-72@2x.png" sizes="144x144" rel="apple-touch-icon-precomposed">
+    <!-- iPad non-retina icon -->
+    <link href="interfaces/default/images/res/ios/icon-76.png" sizes="76x76" rel="apple-touch-icon-precomposed">
+    <!-- iPad non-retina icon (iOS < 7) -->
+    <link href="interfaces/default/images/res/ios/icon-72.png" sizes="72x72" rel="apple-touch-icon-precomposed">
+    <!-- iPhone 6 Plus icon -->
+    <link href="interfaces/default/images/res/ios/icon-60@2x.png" sizes="120x120" rel="apple-touch-icon-precomposed">
+    <!-- iPhone retina icon (iOS < 7) -->
+    <link href="interfaces/default/images/res/ios/icon@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
+    <!-- iPhone non-retina icon (iOS < 7) -->
+    <link href="interfaces/default/images/res/ios/icon.png" sizes="57x57" rel="apple-touch-icon-precomposed">
+    <!-- iPhone / iPod Touch  -->
+    <link href="interfaces/default/images/res/ios/icon-60@3x.png" sizes="180x180" rel="apple-touch-icon-precomposed">
+    <link href="interfaces/default/images/res/ios/icon-60.png" sizes="60x60" rel="apple-touch-icon-precomposed">
+    <!-- Spotlight Icon -->
+    <link href="interfaces/default/images/res/ios/icon-40.png" sizes="40x40" rel="apple-touch-icon-precomposed">
+    <link href="interfaces/default/images/res/ios/icon-40@2x.png" sizes="80x80" rel="apple-touch-icon-precomposed">
+    <!-- iPhone Spotlight and Settings Icon -->
+    <link href="interfaces/default/images/res/ios/icon-small.png" sizes="29x29" rel="apple-touch-icon-precomposed">
+    <link href="interfaces/default/images/res/ios/icon-small@2x.png" sizes="58x58" rel="apple-touch-icon-precomposed">
+    <!-- iPad Spotlight and Settings Icon -->
+    <link href="interfaces/default/images/res/ios/icon-50.png" sizes="50x50" rel="apple-touch-icon-precomposed">
+    <link href="interfaces/default/images/res/ios/icon-50@2x.png" sizes="100x100" rel="apple-touch-icon-precomposed">
+            
+    <!-- STARTUP IMAGES -->
+    <!-- iPad retina portrait startup image -->
+    <link href="interfaces/default/images/res/screen/ios/Default-Portrait@2x~ipad.png"
+          media="(device-width: 768px) and (device-height: 1024px)
+                 and (-webkit-device-pixel-ratio: 2)
+                 and (orientation: portrait)"
+          rel="apple-touch-startup-image">
+
+    <!-- iPad retina landscape startup image -->
+    <link href="interfaces/default/images/res/screen/ios/Default-Landscape@2x~ipad.png"
+          media="(device-width: 768px) and (device-height: 1024px)
+                 and (-webkit-device-pixel-ratio: 2)
+                 and (orientation: landscape)"
+          rel="apple-touch-startup-image">
+
+    <!-- iPad non-retina portrait startup image -->
+    <link href="interfaces/default/images/res/screen/ios/Default-Portrait~ipad.png"
+          media="(device-width: 768px) and (device-height: 1024px)
+                 and (-webkit-device-pixel-ratio: 1)
+                 and (orientation: portrait)"
+          rel="apple-touch-startup-image">
+
+    <!-- iPad non-retina landscape startup image -->
+    <link href="interfaces/default/images/res/screen/ios/Default-Landscape~ipad.png"
+          media="(device-width: 768px) and (device-height: 1024px)
+                 and (-webkit-device-pixel-ratio: 1)
+                 and (orientation: landscape)"
+          rel="apple-touch-startup-image">
+
+    <!-- iPhone 6 Plus portrait startup image -->
+    <link href="interfaces/default/images/res/screen/ios/Default-736h.png"
+          media="(device-width: 414px) and (device-height: 736px)
+                 and (-webkit-device-pixel-ratio: 3)
+                 and (orientation: portrait)"
+          rel="apple-touch-startup-image">
+
+    <!-- iPhone 6 Plus landscape startup image -->
+    <link href="interfaces/default/images/res/screen/ios/Default-Landscape-736h.png"
+          media="(device-width: 414px) and (device-height: 736px)
+                 and (-webkit-device-pixel-ratio: 3)
+                 and (orientation: landscape)"
+          rel="apple-touch-startup-image">
+
+    <!-- iPhone 6 startup image -->
+    <link href="interfaces/default/images/res/screen/ios/Default-667h.png"
+          media="(device-width: 375px) and (device-height: 667px)
+                 and (-webkit-device-pixel-ratio: 2)"
+          rel="apple-touch-startup-image">
+
+    <!-- iPhone 5 startup image -->
+    <link href="interfaces/default/images/res/screen/ios/Default-568h@2x~iphone5.jpg"
+          media="(device-width: 320px) and (device-height: 568px)
+                 and (-webkit-device-pixel-ratio: 2)"
+          rel="apple-touch-startup-image">
+
+    <!-- iPhone < 5 retina startup image -->
+    <link href="interfaces/default/images/res/screen/ios/Default@2x~iphone.png"
+          media="(device-width: 320px) and (device-height: 480px)
+                 and (-webkit-device-pixel-ratio: 2)"
+          rel="apple-touch-startup-image">
+
+    <!-- iPhone < 5 non-retina startup image -->
+    <link href="interfaces/default/images/res/screen/ios/Default~iphone.png"
+          media="(device-width: 320px) and (device-height: 480px)
+                 and (-webkit-device-pixel-ratio: 1)"
+          rel="apple-touch-startup-image">
+
 </head>
 
 <body class="content">
@@ -57,11 +162,11 @@ from plexpy import version
             </div>
             <div class="collapse navbar-collapse navbar-right" id="navbar-collapse-1">
                 <ul class="nav navbar-nav">
-                    <li>
+                    <li class="hidden-sm hidden-xs">
                         <form action="search" method="post" class="form" id="search_form">
                             <div class="input-group">
                                 <span class="input-textbox">
-                                    <input type="text" class="form-control" name="search_query" id="search_query" aria-label="Search" placeholder="Search..."/>
+                                    <input type="text" class="form-control" name="query" id="query" aria-label="Search" placeholder="Search..."/>
                                 </span>
                                 <span class="input-group-btn">
                                     <button class="btn btn-dark btn-inactive" type="submit" id="search_button"><i class="fa fa-search"></i></button>
@@ -69,37 +174,42 @@ from plexpy import version
                             </div>
                         </form>
                     </li>
-                    % if title=="Home":
+                    % if title == "Home":
                         <li class="active"><a href="home"><i class="fa fa-lg fa-home"></i></a></li>
                     % else:
                         <li><a href="home"><i class="fa fa-lg fa-home"></i></a></li>
                     % endif
-                    % if title=="Users" or title=="User":
+                    % if title == "Libraries" or title == "Library" or title == "Info":
+                    <li class="active"><a href="libraries">Libraries</a></li>
+                    % else:
+                    <li><a href="libraries">Libraries</a></li>
+                    % endif
+                    % if title == "Users" or title == "User":
                         <li class="active"><a href="users">Users</a></li>
                     % else:
                         <li><a href="users">Users</a></li>
                     % endif
-                    % if title=="History":
+                    % if title == "History":
                     <li class="active"><a href="history">History</a></li>
                     % else:
                     <li><a href="history">History</a></li>
                     % endif
-                    % if title=="Graphs":
+                    % if title == "Graphs":
                         <li class="active"><a href="graphs">Graphs</a></li>
                     % else:
                         <li><a href="graphs">Graphs</a></li>
                     % endif
-                    % if title=="Synced Items":
+                    % if title == "Synced Items":
                         <li class="active"><a href="sync">Synced Items</a></li>
                     % else:
                         <li><a href="sync">Synced Items</a></li>
                     % endif
-                    % if title=="Log":
+                    % if title == "Log":
                         <li class="active"><a href="logs">Logs</a></li>
                     % else:
                         <li><a href="logs">Logs</a></li>
                     % endif
-                    % if title=="Settings":
+                    % if title == "Settings":
                         <li class="active"><a href="settings">Settings</a></li>
                     % else:
                         <li><a href="settings">Settings</a></li>
@@ -131,26 +241,41 @@ ${next.headerIncludes()}
 </script>
 <script>
     $('#search_form').submit(function (e) {
-        if ($('#search_query').hasClass('active') && $('#search_query').val().trim() != '') {
+        if ($('#query').hasClass('active') && $('#query').val().trim() != '') {
             $.ajax({
                 type: 'post',
                 url: 'search',
-                data: { 'query': $('#search_query').val() }
+                data: { query: $('#query').val() }
             })
         } else {
             e.preventDefault();
             $('#search_button').removeClass('btn-inactive');
-            $('#search_query').clearQueue().val('').animate({ right: '0', width: '250px' }).addClass('active').focus();
+            $('#query').clearQueue().val('').animate({ right: '0', width: '200px' }).addClass('active').focus();
         }
     })
-    $('#search_query').on('blur', function (e) {
+    $('#query').on('blur', function (e) {
         if ($(this).val().trim() == '') {
-            $(this).delay(200).animate({ right: '-250px', width: '0' }, function () {
+            $(this).delay(200).animate({ right: '-200px', width: '0' }, function () {
                 $('#search_button').addClass('btn-inactive');
             }).removeClass('active');
         }
     });
 </script>
+<script>
+    // Work around for iOS web app links opening in Safari
+    $(document).ready(function () {
+        if (("standalone" in window.navigator) && window.navigator.standalone) {
+            // For iOS Apps
+            $('a').on('click', function (e) {
+                e.preventDefault();
+                var new_location = $(this).attr('href');
+                if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined) {
+                    window.location = new_location;
+                }
+            });
+        }
+    });
+</script>
 ${next.javascriptIncludes()}
 </body>
 </html>

data/interfaces/default/css/plexpy.css

@@ -235,8 +235,8 @@ fieldset[disabled] .btn-bright:active,
 .btn-bright.disabled.active,
 .btn-bright[disabled].active,
 fieldset[disabled] .btn-bright.active {
-  background-color: #5cb85c;
+  background-color: #c9302c;
-  border-color: #4cae4c;
+  border-color: #ac2925;
 }
 .btn-bright .badge {
   color: #fff;
@@ -341,6 +341,24 @@ input[type="color"],
     border-radius: 3px;
     transition: background-color .3s;
 }
+textarea.form-control {
+    height: initial;
+    margin: 5px 0 5px 0;
+    color: #fff;
+    border: 0px solid #444;
+    background: #555;
+    padding: 6px 12px;
+    background-color: #555;
+    border-radius: 3px;
+    transition: background-color .3s;
+    resize: none;
+}
+textarea.form-control:focus {
+    outline: 0;
+    color: #555;
+    background-color: #fff;
+    transition: background-color .3s;
+}
 .pagination > li > a,
 .pagination > li > span {
     position: relative;
@@ -469,7 +487,8 @@ input[type="color"],
 .users-poster-face {
     overflow: hidden;
     float: left;
-    background-size: contain;
+    background-size: cover;
+    background-position: center;
     height: 40px;
     width: 40px;
     -webkit-border-radius: 50%;
@@ -479,6 +498,16 @@ input[type="color"],
     -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
 }
+.libraries-poster-face {
+    overflow: hidden;
+    float: left;
+    background-size: contain;
+    height: 40px;
+    width: 40px;
+    /*-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);*/
+}
 a .poster-face:hover,
 a .cover-face:hover,
 a .users-poster-face:hover {
@@ -688,6 +717,14 @@ a:hover .dashboard-activity-poster {
     white-space: nowrap;
     width: 150px;
 }
+.dashboard-activity-poster-info-ip-address {
+    position: absolute;
+    bottom: 5px;
+    left: 10px;
+    text-align: left;
+    font-size: 12px;
+    color: #eee;
+}
 .dashboard-activity-poster-info-time {
     position: absolute;
     bottom: 5px;
@@ -711,14 +748,20 @@ a:hover .dashboard-activity-poster {
     transition: all 0s;
 }
 .dashboard-activity-progress .bufferbar {
-    padding-top: 6px;
+    padding-right: 3px;
+    font-size: x-small;
+    text-align: right;
+    color: rgba(255, 255, 255, 0);
     background-color: #444;
     position: absolute;
     height: 6px;
     overflow: hidden;
 }
 .dashboard-activity-progress .bar {
-    padding-top: 6px;
+    padding-right: 3px;
+    font-size: x-small;
+    text-align: right;
+    color: rgba(255, 255, 255, 0);
     background-color: #faa732;
     background-image: -moz-linear-gradient(top, #fbb450, #f89406);
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
@@ -731,6 +774,37 @@ a:hover .dashboard-activity-poster {
     height: 6px;
     overflow: hidden;
 }
+.dashboard-instance.hover .dashboard-activity-progress-bar { 
+	height: 14px; 
+	transform-origin: top;
+    transition: all .2s ease;
+	border-radius: 0px 0px 3px 3px;
+}
+.dashboard-instance.hover .bar { 
+	height: 14px; 
+	transform-origin: top;
+    transition: all .2s ease;
+	border-radius: 0px 0px 3px 3px;
+    color: rgba(255, 255, 255, 1);
+    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0.25),0%,rgba(0,0,0,0),50px);
+    background-image: -moz-linear-gradient(left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
+    background-image: linear-gradient(to left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
+}
+.dashboard-instance.hover .bufferbar { 
+	height: 14px; 
+	transform-origin: top;
+    transition: all .2s ease;
+	border-radius: 0px 0px 3px 3px;
+    color: rgba(255, 255, 255, 1);
+    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0.25),0%,rgba(0,0,0,0),50px);
+    background-image: -moz-linear-gradient(left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
+    background-image: linear-gradient(to left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
+}
+.dashboard-instance.hover .dashboard-activity-metadata-wrapper { 
+	margin-top: 11px;
+	transform-origin: top;
+    transition: all .2s ease;
+}
 .dashboard-activity-metadata-wrapper {
     position: relative;
     width: 100%;
@@ -1131,6 +1205,7 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
     width: 250px;
     height: 1px;
     margin: 0 40px 20px 25px;
+    position: relative;
 }
 .summary-content {
     position: relative;
@@ -1154,6 +1229,20 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
     margin-left: 2px;
     margin-right: 10px;
 }
+.summary-content-media-info-wrapper {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+}
+.summary-content-media-flag {
+    width: auto;
+    height: auto;
+    max-width: 75pt;
+    max-height: 15px;
+    margin: 0 5px;
+}
 .summary-content-summary {
     overflow: hidden;
     color: #fff;
@@ -1230,31 +1319,24 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
     line-height: 18px;
     color: #fff;
 }
-.rateit {
+.star-rating {
-    display: -moz-inline-box;
     display: inline-block;
-    -webkit-user-select: none;
+    font-size: 15px;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-touch-callout: none;
     overflow: hidden;
     white-space: nowrap;
-    float: right;
     margin-top: 3px;
     height: 21px;
+    float: right;
 }
-.rateit .rateit-range {
+.star-rating .star-icon {
-    background: url(../images/star-gray-32.png);
+    width: auto;
-    background-size: contain;
+    margin-left: 2px;
-    height: 16px;
+    color: #F9AA03;
 }
-.rateit .rateit-selected {
+.star-rating .star-icon-o {
-    background: url(../images/star-32.png);
+    width: auto;
-    background-size: contain;
+    margin-left: 2px;
-    height: 16px;
+    color: #999;
 }
 #children-list, #search-results-list {
     position: relative;
@@ -1474,7 +1556,8 @@ a:hover .item-children-poster {
     float: left;
     margin-top: 15px;
     margin-right: 15px;
-    background-size: contain;
+    background-size: cover;
+    background-position: center;
     height: 80px;
     width: 80px;
     -webkit-border-radius: 50%;
@@ -1518,7 +1601,7 @@ a:hover .item-children-poster {
 }
 .user-overview-stats-instance {
     float: left;
-    width: 350px;
+    width: 400px;
     height: 80px;
     margin-bottom: 25px;
 }
@@ -1531,7 +1614,7 @@ a:hover .item-children-poster {
 .user-overview-stats-instance li {
     float: left;
     list-style: none;
-    width: 340px;
+    width: 100%;
     height: 90px;
 }
 .user-overview-stats-instance-text {
@@ -1589,7 +1672,6 @@ a:hover .item-children-poster {
 }
 .user-player-instance-box {
     float: left;
-    width: 75px;
     border-radius: 3px;
     -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
@@ -1611,6 +1693,7 @@ a:hover .item-children-poster {
     font-weight: normal;
     width: 140px;
     margin-left: 10px;
+    margin-bottom: 10px;
 }
 .user-player-instance-playcount h3 {
     font-size: 30px;
@@ -1630,6 +1713,35 @@ a:hover .item-children-poster {
     top: 15px;
     left: 0px;
 }
+.library-info-poster-face {
+    float: left;
+    margin-top: 15px;
+    margin-right: 15px;
+    background-size: contain;
+    height: 80px;
+    width: 80px;
+    /*-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);*/
+}
+.library-user-instance-box {
+    float: left;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    background-size: contain;
+    position: relative;
+    height: 80px;
+    width: 80px;
+}
+.library-user-instance-box:hover {
+    -webkit-box-shadow: inset 0 0 0 2px #e9a049;
+    -moz-box-shadow: inset 0 0 0 2px #e9a049;
+    box-shadow: inset 0 0 0 2px #e9a049;
+}
 .home-platforms {
 }
 .home-platforms ul {
@@ -1660,6 +1772,7 @@ a:hover .item-children-poster {
     padding-left: 80px;
     width: 100%;
     height: 120px;
+    overflow: hidden;
 }
 .home-platforms-instance-name {
     color: #fff;
@@ -2061,7 +2174,8 @@ a .home-platforms-instance-list-oval:hover,
     float: right;
 }
 .colvis-button-bar,
-.refresh-users-button {
+.refresh-users-button,
+.refresh-libraries-button {
     float: right;
 }
 .nav-settings,
@@ -2260,6 +2374,9 @@ a .home-platforms-instance-list-oval:hover,
     width: 250px;
     z-index: 9999;
 }
+.dataTables_paginate li {
+    margin: 0;
+}
 .tooltip.top .tooltip-arrow {
     border-top-color: #fff;
 }
@@ -2277,42 +2394,52 @@ a .home-platforms-instance-list-oval:hover,
     background: #fff;
     border: 0;
     font-weight: bold;
+    border-radius: 2px;
 }
-.history-title .popover.right {
+.history-thumbnail-popover {
-    margin-left: 12px;
+    z-index: 2;
-    z-index: 5;
+    padding: 0;
+    border: 0;
 }
-.history-title .popover.right .popover-content {
+.history-thumbnail-popover.popover.right {
-    padding: 5px 8px;
+    margin-left: 15px;
+}
+.history-thumbnail-popover .popover-content {
+    color: #000;
+    padding: 0;
 }
 .history-thumbnail {
     background-position: center;
     background-size: cover;
     width: 80px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
 }
-.edit-user-toggles {
+.edit-user-toggles,
+.edit-library-toggles {
     padding-right: 10px;
 }
-.edit-user-toggles > input[type='checkbox'] {
+.edit-user-toggles > input[type='checkbox'],
+.edit-library-toggles > input[type='checkbox'] {
     display: none;
 }
-.edit-user-toggles > input[type='checkbox'] + label {
+.edit-user-toggles > input[type='checkbox'] + label,
+.edit-library-toggles > input[type='checkbox'] + label {
     color: #444;
     cursor: pointer;
 }
-.edit-user-toggles > input[type='checkbox']:checked + label {
+.edit-user-toggles > input[type='checkbox']:checked + label,
+.edit-library-toggles > input[type='checkbox']:checked + label {
     color: #fff;
     cursor: pointer;
 }
 .edit-user-name > input[type='text'] {
     margin: 0;
 }
-.popover {
-    z-index: 2;
-}
-.popover .popover-content {
-    color: #000;
-}
 .noTransition
 {
     -moz-transition: none !important;
@@ -2348,7 +2475,10 @@ a .home-platforms-instance-list-oval:hover,
     top: 5px;
     left: 12px;
 }
-#users-to-delete > li {
+#users-to-delete > li,
+#users-to-purge > li,
+#libraries-to-delete > li,
+#libraries-to-purge > li {
     color: #e9a049;
 }
 #updatebar {
@@ -2398,9 +2528,8 @@ a .home-platforms-instance-list-oval:hover,
     right: 0;
     bottom: 0;
     left: 0;
-    overflow-x: hidden;
+    overflow: auto;
-    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
-    
 }
 ::-webkit-scrollbar {
     width: 15px;
@@ -2426,12 +2555,19 @@ a .home-platforms-instance-list-oval:hover,
         width: 100%;
     }
 }
+table.display,
+table.display tr.shown + tr table[id^='history_child'],
+table.display tr.shown + tr table[id^='media_info_child'],
+table.display tr.shown + tr table[id^='media_info_child'] tr.shown + tr table[id^='media_info_child'] {
+    table-layout: auto;
+}
 table.display tr.shown + tr div.slider {
     display: none;
 }
 table.display tr.shown + tr > td {
     padding-top: 0;
     padding-bottom: 0;
+    padding-left: 0;
 }
 table.display tr.shown + tr:hover {
     background-color: rgba(255,255,255,0);
@@ -2442,7 +2578,9 @@ table.display tr.shown + tr .pagination > .active > a,
 table.display tr.shown + tr .pagination > .active > a:hover {
     color: #fff;
 }
-table.display tr.shown + tr table[id^='history_child'] td:hover a {
+table.display tr.shown + tr table[id^='history_child'] td:hover a, 
+table.display tr.shown + tr table[id^='media_info_child'] > tr > td:hover a,
+table.display tr.shown + tr table[id^='media_info_child'] tr.shown + tr table[id^='media_info_child'] td:hover a {
     color: #F9AA03;
 }
 table.display tr.shown + tr .pagination > .disabled > a {
@@ -2453,36 +2591,44 @@ table.display tr.shown + tr .pagination > li > a:hover {
 }
 table[id^='history_child'] {
     margin-top: 0;
-    margin-left: -4px;
     opacity: .6;
 }
-table[id^='history_child'] thead th {
+table[id^='media_info_child'] {
+    margin-top: 0;
+}
+table[id^='history_child'] thead th,
+table[id^='media_info_child'] thead th {
     line-height: 0;
     height: 0 !important;
     overflow: hidden;
 }
+table[id^='media_info_child'] table[id^='media_info_child'] thead th {
+    line-height: 25px;
+    height: 35px !important;
+    overflow: hidden;
+}
 #search_form {
-    width: 350px;
+    width: 300px;
     padding: 8px 15px;
 }
 #search_form span.input-textbox {
     overflow: hidden;
-    width: 250px;
+    width: 200px;
     height: 34px;
     display: inline-flex;
     float: right;
 }
-#search_form #search_query {
+#search_form #query {
     width: 0;
     height: 34px;
     margin-top: 0;
     float: right;
     position: relative;
-    right: -250px;
+    right: -200px;
     border-radius: 3px 0 0 3px;
 }
-#search_form #search_query.active {
+#search_form #query.active {
-    width: 250px;
+    width: 200px;
     right: 0px;
 }
 #search_form #search_button.btn-inactive {
@@ -2493,4 +2639,77 @@ table[id^='history_child'] thead th {
     -ms-transition: background 0.3s;
     -o-transition: background 0.3s;
     transition: background 0.3s;
+}
+#update_search_form div.input-group {
+    display: inline-table;
+    vertical-align: middle;
+    max-width: 250px;
+}
+#update_search_form #update_query {
+    margin: 5px 0 0 0.5em;
+}
+.notification-params {
+    margin-top: 10px;
+    background-color: #282828;
+}
+.notification-params th {
+    padding-left: 10px;
+    height: 30px;
+}
+.notification-params td {
+    height: 25px;
+}
+.notification-params td:first-child {
+    padding-left: 10px;
+    width: 200px;
+}
+.notification-params td:not(:first-child) {
+    padding-right: 10px;
+}
+.notification-params tr:nth-child(odd) td {
+    background-color: rgba(255,255,255,0.035);
+}
+.notification-params tr:nth-child(even) td {
+    background-color: rgba(255,255,255,0.010);
+}
+#days-selection label {
+    margin-bottom: 0;
+}
+#graph-days {
+    margin: 0;
+    width: 75px;
+    height: 34px;
+}
+.card-sortable {
+    height: 36px;
+    padding: 0 20px 0 0;
+    line-height: 34px;
+    cursor: move;
+    cursor: -webkit-grab;
+    cursor: grab;
+    border-bottom: 1px solid #232323;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+.card {
+    position: relative;
+    background-color: #282828;
+    border-top: 1px solid #2d2d2d;
+}
+.card label {
+    font-weight: normal;
+}
+.card-handle {
+    display: inline-block;
+    width: 30px;
+    margin-right: 10px;
+    color: #444;
+    text-align: center;
+    background-color: #2f2f2f;
+}
+.selectize-input input[type='text'] {
+    height: 20px;
 }

data/interfaces/default/current_activity.html

@@ -32,6 +32,7 @@ user_thumb                  Returns the profile picture of the user owning the s
 state                       Returns the state of the current session. Either 'playing', 'paused' or 'buffering'.
 title                       Returns the name of the episode, movie or music track.
 year                        Returns the year of the episode, movie, or clip.
+ip_address                  Returns the ip address of the stream.
 player                      Returns the name of the platform used to play the stream.
 platform                    Returns the type of platform used to play the stream.
 throttled                   Returns true if the transcode session is throttled.
@@ -68,12 +69,12 @@ DOCUMENTATION :: END
 % for a in data['sessions']:
 <div class="dashboard-instance" id="instance-${a['session_key']}">
     % if a['media_type'] == 'movie' or a['media_type'] == 'episode' or a['media_type'] == 'track':
-    <a href="info?item_id=${a['rating_key']}">
+    <a href="info?rating_key=${a['rating_key']}">
     % endif
         <div class="dashboard-activity-poster">
-            % if a['media_type'] == 'movie' and not a['indexes']:
+            % if (a['media_type'] == 'movie' and not a['indexes']) or (a['indexes'] and not a['view_offset']):
             <div class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${a['art']}&width=500&height=280);"></div>
-            % elif a['media_type'] == 'episode' and not a['indexes']:
+            % elif (a['media_type'] == 'episode' and not a['indexes']) or (a['indexes'] and not a['view_offset']):
             <div class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${a['art']}&width=500&height=280);"></div>
             % elif a['indexes']:
             <div class="dashboard-activity-poster-face bif" style="background-image: url(pms_image_proxy?img=${a['bif_thumb']}&width=500&height=280); display: none;"></div>
@@ -191,6 +192,13 @@ DOCUMENTATION :: END
             </div>
             % if a['media_type'] != 'photo':
             <div class="dashboard-activity-poster-info-bar">
+                <div class="dashboard-activity-poster-info-ip-address">
+                    % if a['ip_address']:
+                    <span>IP: ${a['ip_address']}</span>
+                    % else:
+                    <span>IP: N/A</span>
+                    % endif
+                </div>
                 <div class="dashboard-activity-poster-info-time">
                     <span class="progress_time">${a['view_offset']}</span>/<span class="progress_time">${a['duration']}</span>
                 </div>
@@ -219,13 +227,13 @@ DOCUMENTATION :: END
             <i class="fa fa-spinner"></i>&nbsp;
             % endif
             % if a['media_type'] == 'episode':
-            <a href="info?item_id=${a['rating_key']}" title="${a['grandparent_title']} - ${a['title']}">${a['grandparent_title']} - ${a['title']}</a>
+            <a href="info?rating_key=${a['rating_key']}" title="${a['grandparent_title']} - ${a['title']}">${a['grandparent_title']} - ${a['title']}</a>
             % elif a['media_type'] == 'movie':
-            <a href="info?item_id=${a['rating_key']}" title="${a['title']}">${a['title']}</a>
+            <a href="info?rating_key=${a['rating_key']}" title="${a['title']}">${a['title']}</a>
             % elif a['media_type'] == 'clip':
             <span title="${a['title']}">${a['title']}</span>
             % elif a['media_type'] == 'track':
-            <a href="info?item_id=${a['rating_key']}" title="${a['grandparent_title']} - ${a['title']}">${a['grandparent_title']} - ${a['title']}</a>
+            <a href="info?rating_key=${a['rating_key']}" title="${a['grandparent_title']} - ${a['title']}">${a['grandparent_title']} - ${a['title']}</a>
             % elif a['media_type'] == 'photo':
             <span title="${a['parent_title']}">${a['parent_title']}</span>
             % else:
@@ -238,7 +246,7 @@ DOCUMENTATION :: END
             % elif a['media_type'] == 'movie':
             <span title="${a['year']}">${a['year']}</span>
             % elif a['media_type'] == 'track':
-            <a href="info?item_id=${a['parent_rating_key']}" title="${a['parent_title']}">${a['parent_title']}</a>
+            <a href="info?rating_key=${a['parent_rating_key']}" title="${a['parent_title']}">${a['parent_title']}</a>
             % elif a['media_type'] == 'photo':
             <span title="${a['title']}">${a['title']}</span>
             % else:
@@ -272,6 +280,13 @@ DOCUMENTATION :: END
         e.preventDefault();
         $($(this).attr('data-target')).toggle();
     });
+
+    // Add hover class to dashboard-instance
+    $('.dashboard-activity-poster').hover(function() {
+        $(this).closest('.dashboard-instance').addClass('hover');
+    }, function() {
+        $(this).closest('.dashboard-instance').removeClass('hover');
+    });
 </script>
 % else:
 <div class="text-muted">Nothing is currently being watched.</div><br>

data/interfaces/default/current_activity_header.html

@@ -15,11 +15,13 @@ DOCUMENTATION :: END
 </%doc>
 
 % if data != None:
-% if data == '0':
+	% if data == '0':
-<h3>Activity</h3>
+	<h3>Activity</h3>
+	% elif data == '1':
+	<h3>Activity <small>${data} stream</small></h3>
+	% else:
+	<h3>Activity <small>${data} streams</small></h3>
+	% endif
 % else:
-<h3>Activity <small>${data} stream(s)</small></h3>
+<h3>Activity</h3>
 % endif
-% else:
-<h3>Activity</h3>
-% endif

data/interfaces/default/edit_library.html

@@ -0,0 +1,179 @@
+<%doc>
+USAGE DOCUMENTATION :: PLEASE LEAVE THIS AT THE TOP OF THIS FILE
+
+For Mako templating syntax documentation please visit: http://docs.makotemplates.org/en/latest/
+
+Filename:           edit_library.html
+Version:            0.1
+Variable names:     data [list]
+
+data :: Usable parameters
+
+== Global keys ==
+section_id          Returns the library id of the library.
+section_name        Returns the name of the library.
+section_type        Returns the type of the library.
+library_thumb       Returns the thumbnail for the library.
+custom_thumb        Returns the custom thumbnail for the library.
+library_art         Returns the artwork for the library.
+count               Returns the item count for the library.
+parent_count        Returns the parent item count for the library.
+child_count         Returns the child item count for the library.
+do_notify           Returns bool value for whether to send notifications for the library.
+keep_history        Returns bool value for whether to keep history for the library.
+
+DOCUMENTATION :: END
+</%doc>
+
+<%!
+    from plexpy import helpers
+%>
+
+% if data != None:
+<div class="modal-dialog" role="document">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
+            <h4 class="modal-title">Edit library <strong>${data['section_name']}</strong></h4>
+        </div>
+        <div class="modal-body" id="modal-text">
+            <fieldset>
+                <div class="form-group">
+                    <label for="profile_url">Library Picture URL</label>
+                    <div class="row">
+                        <div class="col-md-8">
+                            <input type="text" class="form-control" id="custom_thumb_url" name="custom_thumb_url" value="${data['library_thumb']}">
+                        </div>
+                    </div>
+                    <p class="help-block">Change the library's picture in PlexPy. To reset to default, leave this field empty and save.</p>
+                </div>
+                <div class="checkbox">
+                    <label>
+                        <input type="checkbox" id="do_notify" name="do_notify" value="1" ${helpers.checked(data['do_notify'])}> Enable notifications
+                    </label>
+                    <p class="help-block">Uncheck this if you do not want to receive notifications for this library's activity.</p>
+                </div>
+                <div class="checkbox">
+                    <label>
+                        <input type="checkbox" id="keep_history" name="keep_history" value="1" ${helpers.checked(data['keep_history'])}> Keep history
+                    </label>
+                    <p class="help-block">Uncheck this if you do not want to keep any history on this library's activity.</p>
+                </div>
+                <div class="checkbox">
+                    <label>
+                        <input type="checkbox" id="do_notify_created" name="do_notify_created" value="1" ${helpers.checked(data['do_notify_created'])}> Enable recently added notifications
+                    </label>
+                    <p class="help-block">Uncheck this if you do not want to receive recently added notifications for this library.</p>
+                </div>
+                % if data['section_id']:
+                <div class="form-group">
+                    <button class="btn btn-danger" id="delete-all-history">Purge</button>
+                    <p class="help-block">DANGER ZONE! Click the purge button to remove all history logged for this library. This is permanent!</p>
+                </div>
+                % endif
+            </fieldset>
+        </div>
+        <div class="modal-footer">
+            <div>
+                <span id="edit-library-status-message"></span>
+                <input type="button" id="save_library" class="btn btn-bright" value="Save">
+            </div>
+        </div>
+    </div>
+</div>
+<div id="confirm-modal-purge" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal-purge">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
+                <h4 class="modal-title" id="myModalLabel">Confirm Purge</h4>
+            </div>
+            <div class="modal-body" style="text-align: center;">
+                <p>Are you REALLY sure you want to purge all history for this library?</p>
+                <p>This is permanent and cannot be undone!</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-dark" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger btn-ok" data-dismiss="modal" id="confirm-purge">Purge</button>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    // Save library options
+    $("#save_library").on('click', function () {
+        var custom_thumb = $("#custom_thumb_url").val();
+        var do_notify = 0;
+        var do_notify_created = 0;
+        var keep_history = 0;
+        if ($("#do_notify").is(":checked")) {
+            do_notify = 1;
+        }
+        if ($("#do_notify_created").is(":checked")) {
+            do_notify_created = 1;
+        }
+        if ($("#keep_history").is(":checked")) {
+            keep_history = 1;
+        }
+
+        $.ajax({
+            url: 'edit_library',
+            data: {
+                section_id: '${data["section_id"]}',
+                custom_thumb: custom_thumb,
+                do_notify: do_notify,
+                do_notify_created: do_notify_created,
+                keep_history: keep_history
+            },
+            cache: false,
+            async: true,
+            success: function (data) {
+                location.reload();
+            }
+        });
+    });
+
+    $("#delete-all-history").on('click', function() {
+        $('#confirm-modal-purge').modal();
+        $('#confirm-modal-purge').one('click', '#confirm-purge', function () {
+            $.ajax({
+                url: 'delete_all_library_history',
+                data: { section_id: '${data["section_id"]}' },
+                cache: false,
+                async: true,
+                success: function(data) {
+                    location.reload();
+                }
+            });
+        });
+    });
+        
+    $(document).ready(function() {
+        // Move #confirm-modal to parent container
+        if (!($('#edit-library-modal').next().is('#confirm-modal-purge'))) {
+            $('#confirm-modal-purge').appendTo($('#edit-library-modal').parent());
+        }
+        $('#edit-library-modal > #confirm-modal-purge').remove();
+
+        $('#edit-library-modal').css('z-index', '1050');
+        $('.modal-backdrop').not('.modal-backdrop-stack').css('z-index', '1049');
+        $('.modal-backdrop').not('.modal-backdrop-stack').addClass('modal-backdrop-stack');
+
+        $('#confirm-modal-purge').on('show.bs.modal', function () {
+            // Fix position to match parent modal
+            var currentPadding = parseInt($('body').css('padding-right'));
+            $(this).children('.modal-dialog').css('left', -currentPadding/2);
+            $('#edit-library-modal').css('overflow-y', 'hidden');
+        });
+        $('#confirm-modal-purge').on('shown.bs.modal', function () {
+            $(this).css('z-index', '1060');
+            $('.modal-backdrop').not('.modal-backdrop-stack').css('z-index', '1059');
+            $('.modal-backdrop').not('.modal-backdrop-stack').addClass('modal-backdrop-stack'); 
+        });
+        $('#confirm-modal-purge').on('hidden.bs.modal', function () {
+            $('body').addClass('modal-open');
+            $('#edit-library-modal').css('overflow-y', 'auto');
+        });
+    });
+</script>
+% endif

data/interfaces/default/edit_user.html

@@ -10,21 +10,30 @@ Variable names:     data [list]
 data :: Usable parameters
 
 == Global keys ==
-user                Return the real Plex username
+user_id             Returns the user id of the user.
-user_id             Return the Plex user_id
+username            Returns the user's username.
-friendly_name       Returns the friendly edited Plex username
+friendly_name       Returns the friendly name of the user.
-do_notify           Returns bool value for whether the user should trigger notifications
+email               Returns the user's email address.
-keep_history        Returns bool value for whether the user's activity should be logged
+user_thumb          Returns the thumbnail for the user.
+is_home_user        Returns bool value for whether the user is part of a Plex Home.
+is_allow_sync       Returns bool value for whether the user has sync rights.
+is_restricted       Returns bool value for whether the user account is restricted.
+do_notify           Returns bool value for whether to send notifications for the user.
+keep_history        Returns bool value for whether to keep history for the user.
 
 DOCUMENTATION :: END
 </%doc>
 
-% if data is not None:
+<%!
+    from plexpy import helpers
+%>
+
+% if data != None:
 <div class="modal-dialog" role="document">
     <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
-            <h4 class="modal-title">Edit user <strong>${data['user']}</strong></h4>
+            <h4 class="modal-title">Edit user <strong>${data['username']}</strong></h4>
         </div>
         <div class="modal-body" id="modal-text">
             <fieldset>
@@ -41,22 +50,22 @@ DOCUMENTATION :: END
                     <label for="profile_url">Profile Picture URL</label>
                     <div class="row">
                         <div class="col-md-8">
-                            <input type="text" class="form-control" id="profile_url" name="profile_url" value="${data['thumb']}">
+                            <input type="text" class="form-control" id="custom_avatar_url" name="custom_avatar_url" value="${data['user_thumb']}">
                         </div>
                     </div>
-                    <p class="help-block">Change the users profile picture in PlexPy. To reset to default, leave this field empty and save then perform a user refresh.</p>
+                    <p class="help-block">Change the users profile picture in PlexPy. To reset to default, leave this field empty and save.</p>
                 </div>
                 <div class="checkbox">
                     <label>
-                        <input type="checkbox" id="do_notify" name="do_notify" value="1" ${data['do_notify']}> Enable notifications
+                        <input type="checkbox" id="do_notify" name="do_notify" value="1" ${helpers.checked(data['do_notify'])}> Enable notifications
                     </label>
                     <p class="help-block">Uncheck this if you do not want to receive notifications for this user's activity.</p>
                 </div>
                 <div class="checkbox">
                     <label>
-                        <input type="checkbox" id="keep_history" name="keep_history" value="1" ${data['keep_history']}> Keep history
+                        <input type="checkbox" id="keep_history" name="keep_history" value="1" ${helpers.checked(data['keep_history'])}> Keep history
                     </label>
-                    <p class="help-block">Uncheck this if you do not want this keep any history on this user's activity.</p>
+                    <p class="help-block">Uncheck this if you do not want to keep any history on this user's activity.</p>
                 </div>
                 % if data['user_id']:
                 <div class="form-group">
@@ -69,7 +78,7 @@ DOCUMENTATION :: END
         <div class="modal-footer">
             <div>
                 <span id="edit-user-status-message"></span>
-                <input type="button" id="save_user_name" class="btn btn-bright" value="Save">
+                <input type="button" id="save_user" class="btn btn-bright" value="Save">
             </div>
         </div>
     </div>
@@ -93,10 +102,10 @@ DOCUMENTATION :: END
     </div>
 </div>
 <script>
-    // Set new friendly name
+    // Set user options
-    $("#save_user_name").click(function() {
+    $("#save_user").on('click', function () {
         var friendly_name = $("#friendly_name").val();
-        var thumb = $("#profile_url").val();
+        var custom_thumb = $("#custom_avatar_url").val();
         var do_notify = 0;
         var keep_history = 0;
         if ($("#do_notify").is(":checked")) {
@@ -106,35 +115,21 @@ DOCUMENTATION :: END
             keep_history = 1;
         }
 
-        % if data['user_id']:
+        $.ajax({
-            $.ajax({
+            url: 'edit_user',
-                url: 'edit_user',
+            data: {
-                data: {user_id: '${data['user_id']}', friendly_name: friendly_name, do_notify: do_notify, keep_history: keep_history, thumb: thumb},
+                user_id: '${data["user_id"]}',
-                cache: false,
+                friendly_name: friendly_name,
-                async: true,
+                custom_thumb: custom_thumb,
-                success: function(data) {
+                do_notify: do_notify,
-                    $("#edit-user-status-message").html(data);
+                keep_history: keep_history
-                    if ($.trim(friendly_name) !== '') {
+            },
-                        $(".set-username").html(friendly_name);
+            cache: false,
-                    }
+            async: true,
-                    $("#user-profile-thumb").attr('src', thumb);
+            success: function(data) {
-                }
+                location.reload();
-            });
+            }
-        % else:
+        });
-            $.ajax({
-                url: 'edit_user',
-                data: {user: '${data['user']}', friendly_name: friendly_name, do_notify: do_notify, keep_history: keep_history, thumb: thumb},
-                cache: false,
-                async: true,
-                success: function(data) {
-                    $("#edit-user-status-message").html(data);
-                    if ($.trim(friendly_name) !== '') {
-                        $(".set-username").html(friendly_name);
-                    }
-                    $("#user-profile-thumb").attr('src', thumb);
-                }
-            });
-        % endif
     });
 
     $("#delete-all-history").on('click', function() {
@@ -142,7 +137,7 @@ DOCUMENTATION :: END
         $('#confirm-modal').one('click', '#confirm-purge', function () {
             $.ajax({
                 url: 'delete_all_user_history',
-                data: {user_id: '${data['user_id']}'},
+                data: { user_id: '${data["user_id"]}' },
                 cache: false,
                 async: true,
                 success: function(data) {
@@ -155,7 +150,8 @@ DOCUMENTATION :: END
     $(document).ready(function() {
         // Move #confirm-modal to parent container
         if(!($('#edit-user-modal').next().is('#confirm-modal'))) {
-            $('#confirm-modal').appendTo($('#edit-user-modal').parent()); }
+            $('#confirm-modal').appendTo($('#edit-user-modal').parent());
+        }
         $('#edit-user-modal > #confirm-modal').remove();
 
         $('#edit-user-modal').css('z-index', '1050');
@@ -179,5 +175,4 @@ DOCUMENTATION :: END
         });
     });
 </script>
-
 % endif

data/interfaces/default/graphs.html

@@ -13,110 +13,132 @@
         </div>
         <div class="button-bar hidden-xs">
             <div class="btn-group" data-toggle="buttons" id="yaxis-selection">
+                % if config['graph_type'] == 'duration':
+                <label class="btn btn-dark">
+                    <input type="radio" name="yaxis-options" id="yaxis-count" value="plays" autocomplete="off"> Play Count
+                </label>
+                <label class="btn btn-dark active">
+                    <input type="radio" name="yaxis-options" id="yaxis-duration" value="duration" autocomplete="off" checked> Play Duration
+                </label>
+                % else:
                 <label class="btn btn-dark active">
                     <input type="radio" name="yaxis-options" id="yaxis-count" value="plays" autocomplete="off" checked> Play Count
                 </label>
                 <label class="btn btn-dark">
                     <input type="radio" name="yaxis-options" id="yaxis-duration" value="duration" autocomplete="off"> Play Duration
                 </label>
+                % endif
             </div>
-            <div class="btn-group" data-toggle="buttons" id="days-selection">
+            <div class="btn-group" id="days-selection">
-                <label class="btn btn-dark">
+                <label>
-                    <input type="radio" name="date-options" id="graph-7" value="7" autocomplete="off"> 7 days
+                    <input type="number" name="graph-days" id="graph-days" value="${config['graph_days']}" min="1" /> days
-                </label>
-                <label class="btn btn-dark active">
-                    <input type="radio" name="date-options" id="graph-30" value="30" autocomplete="off" checked> 30 days
-                </label>
-                <label class="btn btn-dark">
-                    <input type="radio" name="date-options" id="graph-90" value="90" autocomplete="off"> 90 days
-                </label>
-                <label class="btn btn-dark">
-                    <input type="radio" name="date-options" id="graph-365" value="365" autocomplete="off"> 1 year
                 </label>
             </div>
         </div>
     </div>
     <div class='table-card-back'>
         <ul class="nav nav-pills" role="tablist" id="graph-tabs">
+            % if config['graph_tab'] == 'tabs-3':
+            <li role="presentation"><a href="#tabs-1" aria-controls="tabs-1" data-toggle="tab" role="tab">Plays by period</a></li>
+            <li role="presentation"><a href="#tabs-2" aria-controls="tabs-2" data-toggle="tab" role="tab">Stream Info</a></li>
+            <li role="presentation" class="active"><a href="#tabs-3" aria-controls="tabs-3" data-toggle="tab" role="tab">Play Totals</a></li>
+            % elif config['graph_tab'] == 'tabs-2':
+            <li role="presentation"><a href="#tabs-1" aria-controls="tabs-1" data-toggle="tab" role="tab">Plays by period</a></li>
+            <li role="presentation" class="active"><a href="#tabs-2" aria-controls="tabs-2" data-toggle="tab" role="tab">Stream Info</a></li>
+            <li role="presentation"><a href="#tabs-3" aria-controls="tabs-3" data-toggle="tab" role="tab">Play Totals</a></li>
+            % else:
             <li role="presentation" class="active"><a href="#tabs-1" aria-controls="tabs-1" data-toggle="tab" role="tab">Plays by period</a></li>
             <li role="presentation"><a href="#tabs-2" aria-controls="tabs-2" data-toggle="tab" role="tab">Stream Info</a></li>
             <li role="presentation"><a href="#tabs-3" aria-controls="tabs-3" data-toggle="tab" role="tab">Play Totals</a></li>
+            % endif
         </ul>
         <div class="tab-content">
+            % if config['graph_tab'] != 'tabs-2' and config['graph_tab'] != 'tabs-3':
             <div role="tabpanel" class="tab-pane active" id="tabs-1">
-                <div class="row">
+            % else:
-                    <div class="col-md-12">
+            <div role="tabpanel" class="tab-pane" id="tabs-1">
-                        <h4><i class="fa fa-history"></i> Daily <span class="yaxis-text">Play count</span> <small>Last <span class="days">30</span> days</small></h4>
+            % endif
-                        <p class="help-block">
+                    <div class="row">
-                            The total play count or duration of tv, movies, and music played per day. Click a graph point to open up a list of items played for that specific date.
+                        <div class="col-md-12">
-                        </p>
+                            <h4><i class="fa fa-history"></i> Daily <span class="yaxis-text">Play count</span> <small>Last <span class="days">30</span> days</small></h4>
-                        <div class="graphs-instance">
+                            <p class="help-block">
-                            <div class="watch-chart" id="chart_div_plays_by_day">
+                                The total play count or duration of tv, movies, and music played per day. Click a graph point to open up a list of items played for that specific date.
-                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...</div>
+                            </p>
-                                <br>
+                            <div class="graphs-instance">
+                                <div class="watch-chart" id="chart_div_plays_by_day">
+                                    <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...</div>
+                                    <br>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <h4><i class="fa fa-calendar"></i> <span class="yaxis-text">Play count</span> by day of week <small>Last <span class="days">30</span> days</small></h4>
+                            <p class="help-block">
+                                The combined total of tv, movies, and music played per day of the week.
+                            </p>
+                            <div class="graphs-instance">
+                                <div class="watch-chart" id="chart_div_plays_by_dayofweek" style="float: left;">
+                                    <div class="graphs-load">
+                                        <i class="fa fa-refresh fa-spin"></i> Loading chart...
+                                    </div>
+                                    <br>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <h4><i class="fa fa-clock-o"></i> <span class="yaxis-text">Play count</span> by hour of day <small>Last <span class="days">30</span> days</small></h4>
+                            <p class="help-block">
+                                The combined total of tv, movies, and music played per hour of the day.
+                            </p>
+                            <div class="graphs-instance">
+                                <div class="watch-chart" id="chart_div_plays_by_hourofday">
+                                    <div class="graphs-load">
+                                        <i class="fa fa-refresh fa-spin"></i> Loading chart...
+                                    </div>
+                                    <br>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <h4><i class="fa fa-television"></i> <span class="yaxis-text">Play count</span> by top 10 platforms <small>Last <span class="days">30</span> days</small></h4>
+                            <p class="help-block">
+                                The combined total of tv, movies, and music played by top 10 most active platforms.
+                            </p>
+                            <div class="graphs-instance">
+                                <div class="watch-chart" id="chart_div_plays_by_platform" style="float: left;">
+                                    <div class="graphs-load">
+                                        <i class="fa fa-refresh fa-spin"></i> Loading chart...
+                                    </div>
+                                    <br>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <h4><i class="fa fa-user"></i> <span class="yaxis-text">Play count</span> by top 10 users <small>Last <span class="days">30</span> days</small></h4>
+                            <p class="help-block">
+                                The combined total of tv, movies, and music played by top 10 most active users.
+                            </p>
+                            <div class="graphs-instance">
+                                <div class="watch-chart" id="chart_div_plays_by_user">
+                                    <div class="graphs-load">
+                                        <i class="fa fa-refresh fa-spin"></i> Loading chart...
+                                    </div>
+                                    <br>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="row">
-                    <div class="col-md-6">
-                        <h4><i class="fa fa-calendar"></i> <span class="yaxis-text">Play count</span> by day of week <small>Last <span class="days">30</span> days</small></h4>
-                        <p class="help-block">
-                            The combined total of tv, movies, and music played per day of the week.
-                        </p>
-                        <div class="graphs-instance">
-                            <div class="watch-chart" id="chart_div_plays_by_dayofweek" style="float: left;">
-                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
-                                </div>
-                                <br>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <h4><i class="fa fa-clock-o"></i> <span class="yaxis-text">Play count</span> by hour of day <small>Last <span class="days">30</span> days</small></h4>
-                        <p class="help-block">
-                            The combined total of tv, movies, and music played per hour of the day.
-                        </p>
-                        <div class="graphs-instance">
-                            <div class="watch-chart" id="chart_div_plays_by_hourofday">
-                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
-                                </div>
-                                <br>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-md-6">
-                        <h4><i class="fa fa-television"></i> <span class="yaxis-text">Play count</span> by top 10 platforms <small>Last <span class="days">30</span> days</small></h4>
-                        <p class="help-block">
-                            The combined total of tv, movies, and music played by top 10 most active platforms.
-                        </p>
-                        <div class="graphs-instance">
-                            <div class="watch-chart" id="chart_div_plays_by_platform" style="float: left;">
-                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
-                                </div>
-                                <br>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <h4><i class="fa fa-user"></i> <span class="yaxis-text">Play count</span> by top 10 users <small>Last <span class="days">30</span> days</small></h4>
-                        <p class="help-block">
-                            The combined total of tv, movies, and music played by top 10 most active users.
-                        </p>
-                        <div class="graphs-instance">
-                            <div class="watch-chart" id="chart_div_plays_by_user">
-                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
-                                </div>
-                                <br>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
 
+            % if config['graph_tab'] == 'tabs-2':
+            <div role="tabpanel" class="tab-pane active" id="tabs-2">
+            % else:
             <div role="tabpanel" class="tab-pane" id="tabs-2">
+            % endif
                 <div class="row">
                     <div class="col-md-12">
                         <h4><i class="fa fa-video-camera"></i> Daily Stream type breakdown <small>Last <span class="days">30</span> days</small></h4>
@@ -189,7 +211,11 @@
                 </div>
             </div>
 
+            % if config['graph_tab'] == 'tabs-3':
+            <div role="tabpanel" class="tab-pane active" id="tabs-3">
+            % else:
             <div role="tabpanel" class="tab-pane" id="tabs-3">
+            % endif
                 <div class="row">
                     <div class="col-md-12">
                         <h4><i class="fa fa-calendar"></i> Plays by Month <small>Last 12 months</small></h4>
@@ -263,36 +289,12 @@
 <script>
     $(document).ready(function () {
 
-        // Save graph state to cookies
+        // Initial values for graph from config
-        $('input[name=yaxis-options]').change(function() {
+        var yaxis = "${config['graph_type']}";
-            setCookie('graphType', $(this).val(), 365, '/');
+        var current_range = ${config['graph_days']};
-        });
+        var current_tab = "${'#' + config['graph_tab']}";
-        $('input[name=date-options]').change(function() {
-            setCookie('graphDate', $(this).val(), 365, '/');
-        });
-        $('a[data-toggle=tab]').click(function() {
-            setCookie('graphTab', $(this).attr('href'), 365, '/');
-        });
         
-        // Initial values for graph if no saved state
+        $('.days').html(current_range);
-        var yaxis = 'plays';
-        var current_range = 30;
-        var current_tab = '#tabs-1';
-            
-        // Read saved graph state from cookies and set initial values
-        if(getCookie('graphType')) {
-            var yaxis = getCookie('graphType');
-            $('input[name=yaxis-options][value=' + yaxis + ']').prop('checked', true).trigger('click');
-        }
-        if(getCookie('graphDate')) {
-            var current_range = getCookie('graphDate');
-            $('input[name=date-options][value=' + current_range + ']').prop('checked', true).trigger('click');
-            $('.days').html(current_range);
-        }
-        if(getCookie('graphTab')) {
-            var current_tab = getCookie('graphTab');
-            $('a[data-toggle=tab][href=' + current_tab + ']').trigger('click');
-        }
 
         var music_visible = (${config['music_logging_enable']} == 1 ? true : false);
 
@@ -476,40 +478,61 @@
         }
 
         // Set initial state
-        loadGraphsTab1(current_range, yaxis);
+        if (current_tab == '#tabs-1') { loadGraphsTab1(current_range, yaxis); }
+        if (current_tab == '#tabs-2') { loadGraphsTab2(current_range, yaxis); }
+        if (current_tab == '#tabs-3') { loadGraphsTab3(yaxis); }
 
         // Tab1 opened
         $('#graph-tabs a[href="#tabs-1"]').on('shown.bs.tab', function (e) {
             e.preventDefault();
             current_tab = $(this).attr('href');
-            $('#days-selection').show();
             loadGraphsTab1(current_range, yaxis);
+            $.ajax({
+                url: 'set_graph_config',
+                data: { graph_tab: current_tab.replace('#','') },
+                async: true
+            });
         })
 
         // Tab2 opened
         $('#graph-tabs a[href="#tabs-2"]').on('shown.bs.tab', function (e) {
             e.preventDefault();
             current_tab = $(this).attr('href');
-            $('#days-selection').show();
             loadGraphsTab2(current_range, yaxis);
+            $.ajax({
+                url: 'set_graph_config',
+                data: { graph_tab: current_tab.replace('#','') },
+                async: true
+            });
         })
 
         // Tab3 opened
         $('#graph-tabs a[href="#tabs-3"]').on('shown.bs.tab', function (e) {
             e.preventDefault();
             current_tab = $(this).attr('href');
-            $('#days-selection').hide();
-            console.log('loading....');
             loadGraphsTab3(yaxis);
+            $.ajax({
+                url: 'set_graph_config',
+                data: { graph_tab: current_tab.replace('#','') },
+                async: true
+            });
         })
 
-
         // Date range changed
-        $('#days-selection').on('change', function() {
+        $('#graph-days').on('change', function() {
-            current_range = $('input[name=date-options]:checked', '#days-selection').val();
+            current_range = $(this).val();
+            if (current_range < 1) {
+                $(this).val(7);
+                current_range = 7;
+            }
             if (current_tab == '#tabs-1') { loadGraphsTab1(current_range, yaxis); }
             if (current_tab == '#tabs-2') { loadGraphsTab2(current_range, yaxis); }
             $('.days').html(current_range);
+            $.ajax({
+                url: 'set_graph_config',
+                data: { graph_days: current_range},
+                async: true
+            });
         });
 
         // Y-axis changed
@@ -518,6 +541,11 @@
             if (current_tab == '#tabs-1') { loadGraphsTab1(current_range, yaxis); }
             if (current_tab == '#tabs-2') { loadGraphsTab2(current_range, yaxis); }
             if (current_tab == '#tabs-3') { loadGraphsTab3(yaxis); }
+            $.ajax({
+                url: 'set_graph_config',
+                data: { graph_type: yaxis},
+                async: true
+            });
         });
 
         function setGraphFormat(type) {

data/interfaces/default/history.html

@@ -25,18 +25,18 @@
         <table class="display" id="history_table" width="100%">
             <thead>
             <tr>
-                <th align='left' id="delete_row">Delete</th>
+                <th align="left" id="delete_row">Delete</th>
-                <th align='left' id="time">Time</th>
+                <th align="left" id="time">Time</th>
-                <th align='left' id="friendly_name">User</th>
+                <th align="left" id="friendly_name">User</th>
-                <th align='left' id="ip_address">IP Address</th>
+                <th align="left" id="ip_address">IP Address</th>
-                <th align='left' id="platform">Platform</th>
+                <th align="left" id="platform">Platform</th>
-                <th align='left' id="device">Player</th>
+                <th align="left" id="device">Player</th>
-                <th align='left' id="title">Title</th>
+                <th align="left" id="title">Title</th>
-                <th align='left' id="started">Started</th>
+                <th align="left" id="started">Started</th>
-                <th align='left' id="paused_counter">Paused</th>
+                <th align="left" id="paused_counter">Paused</th>
-                <th align='left' id="stopped">Stopped</th>
+                <th align="left" id="stopped">Stopped</th>
-                <th align='left' id="duration">Duration</th>
+                <th align="left" id="duration">Duration</th>
-                <th align='left' id="percent_complete"></th>
+                <th align="left" id="percent_complete"></th>
             </tr>
             </thead>
             <tbody>
@@ -76,19 +76,50 @@
 <script src="interfaces/default/js/moment-with-locale.js"></script>
 <script src="interfaces/default/js/tables/history_table.js"></script>
 <script>
-    $(document).ready(function() {
+    $(document).ready(function () {
-        history_table_options.ajax = {
+        function loadHistoryTable(media_type) {
-            "url": "get_history",
+            history_table_options.ajax = {
-            type: "post",
+                url: 'get_history',
-            data: function ( d ) {
+                type: 'post',
-                return { 'json_data': JSON.stringify( d ) };
+                data: function (d) {
+                    return {
+                        json_data: JSON.stringify(d),
+                        media_type: media_type
+                    };
+                }
             }
-        }
+            history_table = $('#history_table').DataTable(history_table_options);
-        history_table = $('#history_table').DataTable(history_table_options);
+            var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark', exclude: [0, 11] });
-        var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark', exclude: [0, 11] });
+            $(colvis.button()).appendTo('div.colvis-button-bar');
-        $(colvis.button()).appendTo('div.colvis-button-bar');
 
-        clearSearchButton('history_table', history_table);
+            clearSearchButton('history_table', history_table);
+
+            $('#history_table_filter').prepend('<div class="btn-group" data-toggle="buttons" id="media_type-selection" style="padding-right: 15px;"> \
+                <label class="btn btn-dark active"> \
+                    <input type="radio" name="media_type-filter" id="history-all" value="all" autocomplete="off"> All \
+                </label> \
+                <label class="btn btn-dark"> \
+                    <input type="radio" name="media_type-filter" id="history-movies" value="movie" autocomplete="off"> Movies \
+                </label> \
+                <label class="btn btn-dark"> \
+                    <input type="radio" name="media_type-filter" id="history-tv_shows" value="episode" autocomplete="off"> TV Shows \
+                </label> \
+                <label class="btn btn-dark"> \
+                    <input type="radio" name="media_type-filter" id="history-music" value="track" autocomplete="off"> Music \
+                </label> \
+            </div>');
+
+            $('#media_type-selection').on('change', function () {
+                $('#media_type-selection > label').removeClass('active');
+                selected_filter = $('input[name=media_type-filter]:checked', '#media_type-selection');
+                $(selected_filter).closest('label').addClass('active');
+                media_type = $(selected_filter).val();
+                history_table.draw();
+            });
+        }
+
+        var media_type = 'all';
+        loadHistoryTable(media_type);
 
         $('#row-edit-mode').on('click', function() {
             $('#row-edit-mode-alert').fadeIn(200);

data/interfaces/default/history_table_modal.html

@@ -13,11 +13,11 @@
             <table class="display" id="history_table" width="100%">
                 <thead>
                 <tr>
-                    <th align='left' id="started">Started</th>
+                    <th align="left" id="started">Started</th>
-                    <th align='left' id="stopped">Stopped</th>
+                    <th align="left" id="stopped">Stopped</th>
-                    <th align='left' id="friendly_name">User</th>
+                    <th align="left" id="friendly_name">User</th>
-                    <th align='left' id="player">Player</th>
+                    <th align="left" id="player">Player</th>
-                    <th align='left' id="title">Title</th>
+                    <th align="left" id="title">Title</th>
                 </tr>
                 </thead>
                 <tbody>
@@ -34,13 +34,14 @@
     $(document).ready(function() {
         $('#date-header').html(moment('${data}','YYYY-MM-DD').format('ddd MMM Do YYYY'));
         history_table_modal_options.ajax = {
-            "url": "get_history",
+            url: 'get_history',
-            type: "post",
+            type: 'post',
             data: function ( d ) {
-                return { 'json_data': JSON.stringify( d ),
+                return {
-                         'grouping': false,
+                    json_data: JSON.stringify(d),
-                         'start_date': '${data}'
+                    grouping: false,
-                       };
+                    start_date: '${data}'
+                };
             }
         }
 

data/interfaces/default/home_stats.html

@@ -39,11 +39,16 @@ user_id                 Returns the user id for the associated stat.
 friendly_name           Returns the friendly name of the user for the associated stat.
 
 == Only if 'stat_id' is 'top_platform' or 'last_watched' ==
-platform_type           Returns the platform name for the associated stat.
+player                  Returns the player name for the associated stat.
 
 == Only if 'stat_id' is 'last_watched' ==
 last_watch              Returns the time the media item was last watched.
 
+== Only if 'stat_id' is 'most_concurrent' ==
+count                   Returns the count of the most concurrent streams.
+started                 Returns the start time of the most concurrent streams.
+stopped                 Returns the stop time of the most concurrent streams.
+
 DOCUMENTATION :: END
 </%doc>
 
@@ -65,8 +70,8 @@ DOCUMENTATION :: END
 %>
 
 % if data:
-% if data[0]['rows']:
 <ul class="list-unstyled">
+    % if any(top_stat['rows'] for top_stat in data):
     % for top_stat in data:
     % if top_stat['stat_id'] == 'top_tv' and top_stat['rows']:
     <div class="home-platforms-instance">
@@ -77,7 +82,7 @@ DOCUMENTATION :: END
                 </div>
                 <div class="home-platforms-instance-playcount">
                     <h4>
-                        <a href="info?item_id=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+                        <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                             ${top_stat['rows'][0]['title']}
                         </a>
                     </h4>
@@ -89,7 +94,7 @@ DOCUMENTATION :: END
                     % endif
                 </div>
             </div>
-            <a href="info?item_id=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+            <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                 % if top_stat['rows'][0]['grandparent_thumb']:
                 <div class="home-platforms-instance-poster">
                     <div class="home-platforms-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['grandparent_thumb']}&width=300&height=450&fallback=poster);"></div>
@@ -100,18 +105,18 @@ DOCUMENTATION :: END
                 </div>
                 % endif
             </a>
-            %if len(top_stat['rows']) > 1:
+            % if len(top_stat['rows']) > 1:
             <div class="home-platforms-instance-list-chevron"><i class="fa fa-chevron-down"></i></div>
             <ul class="list-unstyled">
                 <div class="slider">
                     <div class="home-platforms-instance-list">
                         % for row in top_stat['rows']:
-                        %if loop.index > 0:
+                        % if loop.index > 0:
                         <li>
                             <div class="home-platforms-instance-list-info">
                                 <div class="home-platforms-instance-list-name">
                                     <h5>
-                                        <a href="info?item_id=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
+                                        <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                             ${top_stat['rows'][loop.index]['title']}
                                         </a>
                                     </h5>
@@ -125,7 +130,7 @@ DOCUMENTATION :: END
                                     % endif
                                 </div>
                             </div>
-                            <a href="info?item_id=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
+                            <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                             % if top_stat['rows'][loop.index]['grandparent_thumb']:
                             <div class="home-platforms-instance-list-poster">
                                 <div class="home-platforms-list-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][loop.index]['grandparent_thumb']}&width=300&height=450&fallback=poster);"></div>
@@ -157,7 +162,7 @@ DOCUMENTATION :: END
                 </div>
                 <div class="home-platforms-instance-playcount">
                     <h4>
-                        <a href="info?item_id=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+                        <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                             ${top_stat['rows'][0]['title']}
                         </a>
                     </h4>
@@ -165,7 +170,7 @@ DOCUMENTATION :: END
                     <p> users</p>
                 </div>
             </div>
-            <a href="info?item_id=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+            <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                 % if top_stat['rows'][0]['grandparent_thumb'] != '':
                 <div class="home-platforms-instance-poster">
                     <div class="home-platforms-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['grandparent_thumb']}&width=300&height=450&fallback=poster);"></div>
@@ -176,18 +181,18 @@ DOCUMENTATION :: END
                 </div>
                 % endif
             </a>
-            %if len(top_stat['rows']) > 1:
+            % if len(top_stat['rows']) > 1:
             <div class="home-platforms-instance-list-chevron"><i class="fa fa-chevron-down"></i></div>
             <ul class="list-unstyled">
                 <div class="slider">
                     <div class="home-platforms-instance-list">
                         % for row in top_stat['rows']:
-                        %if loop.index > 0:
+                        % if loop.index > 0:
                         <li>
                             <div class="home-platforms-instance-list-info">
                                 <div class="home-platforms-instance-list-name">
                                     <h5>
-                                        <a href="info?item_id=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
+                                        <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                             ${top_stat['rows'][loop.index]['title']}
                                         </a>
                                     </h5>
@@ -197,7 +202,7 @@ DOCUMENTATION :: END
                                     <p> users</p>
                                 </div>
                             </div>
-                            <a href="info?item_id=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
+                            <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                 % if top_stat['rows'][loop.index]['grandparent_thumb']:
                                 <div class="home-platforms-instance-list-poster">
                                     <div class="home-platforms-list-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][loop.index]['grandparent_thumb']}&width=300&height=450&fallback=poster);"></div>
@@ -229,7 +234,7 @@ DOCUMENTATION :: END
                 </div>
                 <div class="home-platforms-instance-playcount">
                     <h4>
-                        <a href="info?item_id=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+                        <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                             ${top_stat['rows'][0]['title']}
                         </a>
                     </h4>
@@ -241,7 +246,7 @@ DOCUMENTATION :: END
                     % endif
                 </div>
             </div>
-            <a href="info?item_id=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+            <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                 % if top_stat['rows'][0]['thumb']:
                 <div class="home-platforms-instance-poster">
                     <div class="home-platforms-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['thumb']}&width=300&height=450&fallback=poster);"></div>
@@ -252,18 +257,18 @@ DOCUMENTATION :: END
                 </div>
                 % endif
             </a>
-            %if len(top_stat['rows']) > 1:
+            % if len(top_stat['rows']) > 1:
             <div class="home-platforms-instance-list-chevron"><i class="fa fa-chevron-down"></i></div>
             <ul class="list-unstyled">
                 <div class="slider">
                     <div class="home-platforms-instance-list">
                         % for row in top_stat['rows']:
-                        %if loop.index > 0:
+                        % if loop.index > 0:
                         <li>
                             <div class="home-platforms-instance-list-info">
                                 <div class="home-platforms-instance-list-name">
                                     <h5>
-                                        <a href="info?item_id=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
+                                        <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                             ${top_stat['rows'][loop.index]['title']}
                                         </a>
                                     </h5>
@@ -277,7 +282,7 @@ DOCUMENTATION :: END
                                     % endif
                                 </div>
                             </div>
-                            <a href="info?item_id=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
+                            <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                 % if top_stat['rows'][loop.index]['thumb']:
                                 <div class="home-platforms-instance-list-poster">
                                     <div class="home-platforms-list-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][loop.index]['thumb']}&width=300&height=450&fallback=poster);"></div>
@@ -309,7 +314,7 @@ DOCUMENTATION :: END
                 </div>
                 <div class="home-platforms-instance-playcount">
                     <h4>
-                        <a href="info?item_id=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+                        <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                             ${top_stat['rows'][0]['title']}
                         </a>
                     </h4>
@@ -317,7 +322,7 @@ DOCUMENTATION :: END
                     <p> users</p>
                 </div>
             </div>
-            <a href="info?item_id=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+            <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                 % if top_stat['rows'][0]['thumb']:
                 <div class="home-platforms-instance-poster">
                     <div class="home-platforms-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['thumb']}&width=300&height=450&fallback=poster);"></div>
@@ -328,18 +333,18 @@ DOCUMENTATION :: END
                 </div>
                 % endif
             </a>
-            %if len(top_stat['rows']) > 1:
+            % if len(top_stat['rows']) > 1:
             <div class="home-platforms-instance-list-chevron"><i class="fa fa-chevron-down"></i></div>
             <ul class="list-unstyled">
                 <div class="slider">
                     <div class="home-platforms-instance-list">
                         % for row in top_stat['rows']:
-                        %if loop.index > 0:
+                        % if loop.index > 0:
                         <li>
                             <div class="home-platforms-instance-list-info">
                                 <div class="home-platforms-instance-list-name">
                                     <h5>
-                                        <a href="info?item_id=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
+                                        <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                             ${top_stat['rows'][loop.index]['title']}
                                         </a>
                                     </h5>
@@ -349,7 +354,7 @@ DOCUMENTATION :: END
                                     <p> users</p>
                                 </div>
                             </div>
-                            <a href="info?item_id=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
+                            <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                 % if top_stat['rows'][loop.index]['thumb']:
                                 <div class="home-platforms-instance-list-poster">
                                     <div class="home-platforms-list-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][loop.index]['thumb']}&width=300&height=450&fallback=poster);"></div>
@@ -381,7 +386,7 @@ DOCUMENTATION :: END
                 </div>
                 <div class="home-platforms-instance-playcount">
                     <h4>
-                        <a href="info?item_id=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+                        <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                             ${top_stat['rows'][0]['title']}
                         </a>
                     </h4>
@@ -393,7 +398,7 @@ DOCUMENTATION :: END
                     % endif
                 </div>
             </div>
-            <a href="info?item_id=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+            <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                 % if top_stat['rows'][0]['grandparent_thumb']:
                 <div class="home-platforms-instance-poster">
                     <div class="home-platforms-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['grandparent_thumb']}&width=300&height=300&fallback=poster);"></div>
@@ -404,18 +409,18 @@ DOCUMENTATION :: END
                 </div>
                 % endif
             </a>
-            %if len(top_stat['rows']) > 1:
+            % if len(top_stat['rows']) > 1:
             <div class="home-platforms-instance-list-chevron"><i class="fa fa-chevron-down"></i></div>
             <ul class="list-unstyled">
                 <div class="slider">
                     <div class="home-platforms-instance-list">
                         % for row in top_stat['rows']:
-                        %if loop.index > 0:
+                        % if loop.index > 0:
                         <li>
                             <div class="home-platforms-instance-list-info">
                                 <div class="home-platforms-instance-list-name">
                                     <h5>
-                                        <a href="info?item_id=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
+                                        <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                             ${top_stat['rows'][loop.index]['title']}
                                         </a>
                                     </h5>
@@ -429,7 +434,7 @@ DOCUMENTATION :: END
                                     % endif
                                 </div>
                             </div>
-                            <a href="info?item_id=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
+                            <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                 % if top_stat['rows'][loop.index]['grandparent_thumb']:
                                 <div class="home-platforms-instance-list-poster">
                                     <div class="home-platforms-list-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][loop.index]['grandparent_thumb']}&width=300&height=300&fallback=poster);"></div>
@@ -461,7 +466,7 @@ DOCUMENTATION :: END
                 </div>
                 <div class="home-platforms-instance-playcount">
                     <h4>
-                        <a href="info?item_id=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+                        <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                             ${top_stat['rows'][0]['title']}
                         </a>
                     </h4>
@@ -469,7 +474,7 @@ DOCUMENTATION :: END
                     <p> users</p>
                 </div>
             </div>
-            <a href="info?item_id=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+            <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                 % if top_stat['rows'][0]['grandparent_thumb'] != '':
                 <div class="home-platforms-instance-poster">
                     <div class="home-platforms-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['grandparent_thumb']}&width=300&height=300&fallback=poster);"></div>
@@ -480,18 +485,18 @@ DOCUMENTATION :: END
                 </div>
                 % endif
             </a>
-            %if len(top_stat['rows']) > 1:
+            % if len(top_stat['rows']) > 1:
             <div class="home-platforms-instance-list-chevron"><i class="fa fa-chevron-down"></i></div>
             <ul class="list-unstyled">
                 <div class="slider">
                     <div class="home-platforms-instance-list">
                         % for row in top_stat['rows']:
-                        %if loop.index > 0:
+                        % if loop.index > 0:
                         <li>
                             <div class="home-platforms-instance-list-info">
                                 <div class="home-platforms-instance-list-name">
                                     <h5>
-                                        <a href="info?item_id=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
+                                        <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                             ${top_stat['rows'][loop.index]['title']}
                                         </a>
                                     </h5>
@@ -501,7 +506,7 @@ DOCUMENTATION :: END
                                     <p> users</p>
                                 </div>
                             </div>
-                            <a href="info?item_id=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
+                            <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                 % if top_stat['rows'][loop.index]['grandparent_thumb']:
                                 <div class="home-platforms-instance-list-poster">
                                     <div class="home-platforms-list-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][loop.index]['grandparent_thumb']}&width=300&height=300&fallback=poster);"></div>
@@ -564,13 +569,13 @@ DOCUMENTATION :: END
                 </div>
                 % endif
             </a>
-            %if len(top_stat['rows']) > 1:
+            % if len(top_stat['rows']) > 1:
             <div class="home-platforms-instance-list-chevron"><i class="fa fa-chevron-down"></i></div>
             <ul class="list-unstyled">
                 <div class="slider">
                     <div class="home-platforms-instance-list">
                         % for row in top_stat['rows']:
-                        %if loop.index > 0:
+                        % if loop.index > 0:
                         <li>
                             <div class="home-platforms-instance-list-info">
                                 <div class="home-platforms-instance-list-name">
@@ -642,13 +647,13 @@ DOCUMENTATION :: END
                     $("#platform-stat").html("<div class='home-platforms-instance-box' style='background-image: url(" + getPlatformImagePath('${top_stat['rows'][0]['platform_type']}') + ");'>");
                 </script>
             </div>
-            %if len(top_stat['rows']) > 1:
+            % if len(top_stat['rows']) > 1:
             <div class="home-platforms-instance-list-chevron"><i class="fa fa-chevron-down"></i></div>
             <ul class="list-unstyled">
                 <div class="slider">
                     <div class="home-platforms-instance-list">
                         % for row in top_stat['rows']:
-                        %if loop.index > 0:
+                        % if loop.index > 0:
                         <li>
                             <div class="home-platforms-instance-list-info">
                                 <div class="home-platforms-instance-list-name">
@@ -687,11 +692,11 @@ DOCUMENTATION :: END
         <li>
             <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">
-                    <h4>Last Watched</h4>
+                    <h4>Last Played</h4>
                 </div>
                 <div class="home-platforms-instance-last-user">
                     <h4>
-                        <a href="info?source=history&item_id=${top_stat['rows'][0]['row_id']}" title="${top_stat['rows'][0]['title']}">
+                        <a href="info?source=history&rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                             ${top_stat['rows'][0]['title']}
                         </a>
                     </h4>
@@ -709,11 +714,11 @@ DOCUMENTATION :: END
                             <script>
                                 $('#last-watch-stat').text(moment(${top_stat['rows'][0]['last_watch']},"X").format(date_format));
                             </script>
-                        </span> - ${top_stat['rows'][0]['platform_type']}
+                        </span> - ${top_stat['rows'][0]['player']}
                     </p>
                 </div>
             </div>
-            <a href="info?source=history&item_id=${top_stat['rows'][0]['row_id']}" title="${top_stat['rows'][0]['title']}">
+            <a href="info?source=history&rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
                 % if top_stat['rows'][0]['thumb']:
                 <div class="home-platforms-instance-poster">
                     <div class="home-platforms-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['thumb']}&width=300&height=450&fallback=poster);"></div>
@@ -724,18 +729,18 @@ DOCUMENTATION :: END
                 </div>
                 % endif
             </a>
-            %if len(top_stat['rows']) > 1:
+            % if len(top_stat['rows']) > 1:
             <div class="home-platforms-instance-list-chevron"><i class="fa fa-chevron-down"></i></div>
             <ul class="list-unstyled">
                 <div class="slider">
                     <div class="home-platforms-instance-list">
                         % for row in top_stat['rows']:
-                        %if loop.index > 0:
+                        % if loop.index > 0:
                         <li>
                             <div class="home-platforms-instance-list-info">
                                 <div class="home-platforms-instance-list-name">
                                     <h5>
-                                        <a href="info?source=history&item_id=${top_stat['rows'][loop.index]['row_id']}" title="${top_stat['rows'][loop.index]['title']}">
+                                        <a href="info?source=history&rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                             ${top_stat['rows'][loop.index]['title']}
                                         </a>
                                     </h5>
@@ -755,17 +760,17 @@ DOCUMENTATION :: END
                                             <script>
                                                 $('#home-platforms-instance-list-last-watch-${loop.index + 1}').text(moment(${top_stat['rows'][loop.index]['last_watch']},"X").format(date_format));
                                             </script>
-                                        </span> - ${top_stat['rows'][loop.index]['platform_type']}
+                                        </span> - ${top_stat['rows'][loop.index]['player']}
                                     </p>
                                 </div>
                             </div>
-                            <a href="info?source=history&item_id=${top_stat['rows'][loop.index]['row_id']}" title="${top_stat['rows'][loop.index]['title']}">
+                            <a href="info?source=history&rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
                                 % if top_stat['rows'][loop.index]['thumb']:
                                 <div class="home-platforms-instance-list-poster">
                                     <div class="home-platforms-list-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][loop.index]['thumb']}&width=300&height=450&fallback=poster);"></div>
                                 </div>
                                 % else:
-                                <div class="home-platforms-instance-poster2">
+                                <div class="home-platforms-instance-list-poster">
                                     <div class="home-platforms-list-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
                                 </div>
                                 % endif
@@ -782,8 +787,74 @@ DOCUMENTATION :: END
             % endif
         </li>
     </div>
+    % elif top_stat['stat_id'] == 'most_concurrent' and top_stat['rows']:
+    <div class="home-platforms-instance">
+        <li>
+            <div class="home-platforms-instance-info">
+                <div class="home-platforms-instance-name">
+                    <h4>Most Concurrent Streams</h4>
+                </div>
+                <div class="home-platforms-instance-playcount">
+                    <h4>
+                        <span id="most-concurrent-start">
+                            <script>
+                                $('#most-concurrent-start').text(moment(${top_stat['rows'][0]['started']},"X").format(date_format + ' ' + time_format));
+                            </script>
+                        </span>
+                    </h4>
+                    <h3>${top_stat['rows'][0]['count']}</h3>
+                    <p> streams</p>
+                </div>
+            </div>
+            <div class="home-platforms-instance-poster">
+                <div class="home-platforms-instance-box" style="background-image: url(interfaces/default/images/home-stat_most-concurrent.png);"></div>
+            </div>
+            % if len(top_stat['rows']) > 1:
+            <div class="home-platforms-instance-list-chevron"><i class="fa fa-chevron-down"></i></div>
+            <ul class="list-unstyled">
+                <div class="slider">
+                    <div class="home-platforms-instance-list">
+                        % for row in top_stat['rows']:
+                        % if loop.index > 0:
+                        <li>
+                            <div class="home-platforms-instance-list-info">
+                                <div class="home-platforms-instance-list-name">
+                                    <h5>
+                                        ${top_stat['rows'][loop.index]['title']}
+                                    </h5>
+                                </div>
+                                <div class="home-platforms-instance-list-playcount">
+                                    <h3>${top_stat['rows'][loop.index]['count']}</h3>
+                                    <p> streams
+                                        % if top_stat['rows'][loop.index]['started']:
+                                        - <span id="most-concurrent-start-${loop.index + 1}">
+                                            <script>
+                                                $('#most-concurrent-start-${loop.index + 1}').text(moment(${top_stat['rows'][loop.index]['started']},"X").format(date_format + ' ' + time_format));
+                                            </script>
+                                        </span>
+                                        % else:
+                                        - N/A
+                                        % endif
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="home-platforms-instance-poster">
+                                <div class="home-platforms-instance-list-box" style="background-image: url(interfaces/default/images/home-stat_most-concurrent.png);"></div>
+                            </div>
+                        </li>
+                        % endif
+                        % endfor
+                    </div>
+                </div>
+            </ul>
+            % endif
+        </li>
+    </div>
     % endif
     % endfor
+    % else:
+    <div class="text-muted">No stats to show for the selected period.</div><br>
+    % endif
 </ul>
 <script>
     var topZIndex = 2;
@@ -799,9 +870,5 @@ DOCUMENTATION :: END
     });
 </script>
 % else:
-<div class="text-muted">No stats for selected period.</div><br>
+<div class="text-muted">No stats to show for the selected period.</div><br>
-% endif
-% else:
-<div class="text-muted">Unable to retrieve data from database. Please check your <a href="settings">settings</a>.
-</div><br>
 % endif