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,74 @@
 # Changelog
 
+## 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.

data/interfaces/default/base.html

@@ -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">
-    <link rel="apple-touch-icon" sizes="114x114" href="interfaces/default/images/icon_iphone@2x.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="interfaces/default/images/icon_ipad@2x.png">
+
+    <!-- Allow web app to be run in full-screen mode. -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <!-- 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,7 +162,7 @@ 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">
@@ -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>
@@ -135,22 +245,37 @@ ${next.headerIncludes()}
             $.ajax({
                 type: 'post',
                 url: 'search',
-                data: { 'query': $('#query').val() }
+                data: { query: $('#query').val() }
             })
         } else {
             e.preventDefault();
             $('#search_button').removeClass('btn-inactive');
-            $('#query').clearQueue().val('').animate({ right: '0', width: '250px' }).addClass('active').focus();
+            $('#query').clearQueue().val('').animate({ right: '0', width: '200px' }).addClass('active').focus();
         }
     })
     $('#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;
-  border-color: #4cae4c;
+  background-color: #c9302c;
+  border-color: #ac2925;
 }
 .btn-bright .badge {
   color: #fff;
@@ -487,7 +487,8 @@ textarea.form-control:focus {
 .users-poster-face {
     overflow: hidden;
     float: left;
-    background-size: contain;
+    background-size: cover;
+    background-position: center;
     height: 40px;
     width: 40px;
     -webkit-border-radius: 50%;
@@ -497,6 +498,16 @@ textarea.form-control:focus {
     -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 {
@@ -737,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));
@@ -757,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%;
@@ -1157,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;
@@ -1180,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;
@@ -1256,31 +1319,25 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
     line-height: 18px;
     color: #fff;
 }
-.rateit {
-    display: -moz-inline-box;
+.star-rating {
     display: inline-block;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-touch-callout: none;
+    font-size: 15px;
     overflow: hidden;
     white-space: nowrap;
-    float: right;
     margin-top: 3px;
     height: 21px;
+    position: absolute;
+    right: 0;
 }
-.rateit .rateit-range {
-    background: url(../images/star-gray-32.png);
-    background-size: contain;
-    height: 16px;
+.star-rating .star-icon {
+    width: auto;
+    margin-left: 2px;
+    color: #F9AA03;
 }
-.rateit .rateit-selected {
-    background: url(../images/star-32.png);
-    background-size: contain;
-    height: 16px;
+.star-rating .star-icon-o {
+    width: auto;
+    margin-left: 2px;
+    color: #999;
 }
 #children-list, #search-results-list {
     position: relative;
@@ -1500,7 +1557,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%;
@@ -1615,7 +1673,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);
@@ -1637,6 +1694,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;
@@ -1656,6 +1714,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 {
@@ -1686,6 +1773,7 @@ a:hover .item-children-poster {
     padding-left: 80px;
     width: 100%;
     height: 120px;
+    overflow: hidden;
 }
 .home-platforms-instance-name {
     color: #fff;
@@ -2087,7 +2175,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,
@@ -2286,6 +2375,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;
 }
@@ -2303,42 +2395,52 @@ a .home-platforms-instance-list-oval:hover,
     background: #fff;
     border: 0;
     font-weight: bold;
+    border-radius: 2px;
 }
-.history-title .popover.right {
-    margin-left: 12px;
-    z-index: 5;
+.history-thumbnail-popover {
+    z-index: 2;
+    padding: 0;
+    border: 0;
 }
-.history-title .popover.right .popover-content {
-    padding: 5px 8px;
+.history-thumbnail-popover.popover.right {
+    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;
@@ -2375,7 +2477,9 @@ a .home-platforms-instance-list-oval:hover,
     left: 12px;
 }
 #users-to-delete > li,
-#users-to-purge > li {
+#users-to-purge > li,
+#libraries-to-delete > li,
+#libraries-to-purge > li {
     color: #e9a049;
 }
 #updatebar {
@@ -2425,9 +2529,8 @@ a .home-platforms-instance-list-oval:hover,
     right: 0;
     bottom: 0;
     left: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
 }
 ::-webkit-scrollbar {
     width: 15px;
@@ -2453,12 +2556,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);
@@ -2469,7 +2579,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 {
@@ -2480,21 +2592,29 @@ 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;
@@ -2505,11 +2625,11 @@ table[id^='history_child'] thead th {
     margin-top: 0;
     float: right;
     position: relative;
-    right: -250px;
+    right: -200px;
     border-radius: 3px 0 0 3px;
 }
 #search_form #query.active {
-    width: 250px;
+    width: 200px;
     right: 0px;
 }
 #search_form #search_button.btn-inactive {
@@ -2520,4 +2640,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

@@ -69,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>
@@ -227,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:
@@ -246,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:
@@ -280,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':
-<h3>Activity</h3>
+	% if data == '0':
+	<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             Return the Plex user_id
-friendly_name       Returns the friendly edited Plex username
-do_notify           Returns bool value for whether the user should trigger notifications
-keep_history        Returns bool value for whether the user's activity should be logged
+user_id             Returns the user id of the user.
+username            Returns the user's username.
+friendly_name       Returns the friendly name of the user.
+email               Returns the user's email address.
+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
-    $("#save_user_name").click(function() {
+    // Set user options
+    $("#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({
-                url: 'edit_user',
-                data: {user_id: '${data['user_id']}', 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(document.createTextNode(friendly_name));
-                    }
-                    $("#user-profile-thumb").attr('src', thumb);
-                }
-            });
-        % 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
+        $.ajax({
+            url: 'edit_user',
+            data: {
+                user_id: '${data["user_id"]}',
+                friendly_name: friendly_name,
+                custom_thumb: custom_thumb,
+                do_notify: do_notify,
+                keep_history: keep_history
+            },
+            cache: false,
+            async: true,
+            success: function(data) {
+                location.reload();
+            }
+        });
     });
 
     $("#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">
-                <label class="btn btn-dark">
-                    <input type="radio" name="date-options" id="graph-7" value="7" autocomplete="off"> 7 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
+            <div class="btn-group" id="days-selection">
+                <label>
+                    <input type="number" name="graph-days" id="graph-days" value="${config['graph_days']}" min="1" /> days
                 </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">
-                    <div class="col-md-12">
-                        <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>
-                        <p class="help-block">
-                            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.
-                        </p>
-                        <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>
+            % else:
+            <div role="tabpanel" class="tab-pane" id="tabs-1">
+            % endif
+                    <div class="row">
+                        <div class="col-md-12">
+                            <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>
+                            <p class="help-block">
+                                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.
+                            </p>
+                            <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
-        $('input[name=yaxis-options]').change(function() {
-            setCookie('graphType', $(this).val(), 365, '/');
-        });
-        $('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 from config
+        var yaxis = "${config['graph_type']}";
+        var current_range = ${config['graph_days']};
+        var current_tab = "${'#' + config['graph_tab']}";
         
-        // Initial values for graph if no saved state
-        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');
-        }
+        $('.days').html(current_range);
 
         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() {
-            current_range = $('input[name=date-options]:checked', '#days-selection').val();
+        $('#graph-days').on('change', function() {
+            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="time">Time</th>
-                <th align='left' id="friendly_name">User</th>
-                <th align='left' id="ip_address">IP Address</th>
-                <th align='left' id="platform">Platform</th>
-                <th align='left' id="device">Player</th>
-                <th align='left' id="title">Title</th>
-                <th align='left' id="started">Started</th>
-                <th align='left' id="paused_counter">Paused</th>
-                <th align='left' id="stopped">Stopped</th>
-                <th align='left' id="duration">Duration</th>
-                <th align='left' id="percent_complete"></th>
+                <th align="left" id="delete_row">Delete</th>
+                <th align="left" id="time">Time</th>
+                <th align="left" id="friendly_name">User</th>
+                <th align="left" id="ip_address">IP Address</th>
+                <th align="left" id="platform">Platform</th>
+                <th align="left" id="device">Player</th>
+                <th align="left" id="title">Title</th>
+                <th align="left" id="started">Started</th>
+                <th align="left" id="paused_counter">Paused</th>
+                <th align="left" id="stopped">Stopped</th>
+                <th align="left" id="duration">Duration</th>
+                <th align="left" id="percent_complete"></th>
             </tr>
             </thead>
             <tbody>
@@ -83,8 +83,8 @@
                 type: 'post',
                 data: function (d) {
                     return {
-                        'json_data': JSON.stringify(d),
-                        'media_type': media_type
+                        json_data: JSON.stringify(d),
+                        media_type: media_type
                     };
                 }
             }

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="stopped">Stopped</th>
-                    <th align='left' id="friendly_name">User</th>
-                    <th align='left' id="player">Player</th>
-                    <th align='left' id="title">Title</th>
+                    <th align="left" id="started">Started</th>
+                    <th align="left" id="stopped">Stopped</th>
+                    <th align="left" id="friendly_name">User</th>
+                    <th align="left" id="player">Player</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",
-            type: "post",
+            url: 'get_history',
+            type: 'post',
             data: function ( d ) {
-                return { 'json_data': JSON.stringify( d ),
-                         'grouping': false,
-                         'start_date': '${data}'
-                       };
+                return {
+                    json_data: JSON.stringify(d),
+                    grouping: false,
+                    start_date: '${data}'
+                };
             }
         }
 

data/interfaces/default/home_stats.html

@@ -44,6 +44,11 @@ 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]['stat_id']:
 <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">
@@ -691,7 +696,7 @@ DOCUMENTATION :: END
                 </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>
@@ -713,7 +718,7 @@ DOCUMENTATION :: END
                     </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>
@@ -759,13 +764,13 @@ DOCUMENTATION :: END
                                     </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>
-% endif
-% else:
-<div class="text-muted">Unable to retrieve data from database. Please check your <a href="settings">settings</a>.
-</div><br>
+<div class="text-muted">No stats to show for the selected period.</div><br>
 % endif