Merge branch 'dev'

* And anonymize URLs

.gitignore

@@ -21,6 +21,10 @@ cache/*
 *.crt
 *.key
 *.csr
+*.pem
+
+# Mergetool
+*.orgin
 
 # OS generated files #
 ######################
@@ -31,7 +35,7 @@ Icon?
 Thumbs.db
 
 #Ignore files generated by PyCharm
-.idea/*
+*.idea/*
 
 #Ignore files generated by vi
 *.swp

API.md

@@ -4,24 +4,77 @@ The API is still pretty new and needs some serious cleaning up on the backend bu
 ## General structure
 The API endpoint is `http://ip:port + HTTP_ROOT + /api?apikey=$apikey&cmd=$command`
 
-Data response in JSON formatted.
+Response example
+```
+{
+    "response": {
+        "data": [
+            {
+                "loglevel": "INFO",
+                "msg": "Signal 2 caught, saving and exiting...",
+                "thread": "MainThread",
+                "time": "22-sep-2015 01:42:56 "
+            }
+        ],
+        "message": null,
+        "result": "success"
+    }
+}
+```
+
+General parameters:
+	out_type: 'xml',
+	callback: 'pong',
+	'debug': 1
+
 
 ## API methods
 
 ### getLogs
-Not working yet
+Possible params: sort='', search='', order='desc', regex='', start=0, end=0
+Returns the plexpy log
+
+### getApikey
+Possible params: username='', password='' (required if auth is enabled)
+Returns the apikey
+
+### getSettings
+No params
+Returns the config file
 
 ### getVersion
+No params
 Returns some version information: git_path, install_type, current_version, installed_version, commits_behind
 
+### getHistory
+possible params: user=None, user_id=None, ,rating_key='', parent_rating_key='', grandparent_rating_key='', start_date=''
+Returns
+
+### getMetadata
+Required params: rating_key
+Returns metadata about a file
+
+### getSync
+Possible params: machine_id=None, user_id=None,
+Returns
+
+### getUserips
+Possible params: user_id=None, user=None
+
+### getPlayby
+Possible params: time_range=30, y_axis='plays', playtype='total_plays_per_month'
+
 ### checkGithub
 Updates the version information above and returns getVersion data
 
 ### shutdown
+No params
 Shut down plexpy
 
 ### restart
+No params
 Restart plexpy
 
 ### update
+No params
 Update plexpy - you may want to check the install type in get version and not allow this if type==exe

CHANGELOG.md

@@ -1,13 +1,383 @@
 # Changelog
 
-## v1.0 (2015-08-11)
+## v1.3.7 (2016-02-20)
 
-* First release
+* Fix: Verifying server with SSL enabled.
+* Fix: Regression where {stream_duration} reported as 0.
+* Fix: Video metadata flags showing up for track info.
+* Fix: Custom library icons not applied to Library Statistics.
+* Fix: Typos in the Web UI.
+* Add: ETA to Current Activity overlay.
+* Add: Total duration to Libraries and Users tables.
+* Add: {machine_id} to notification options.
+* Add: IMDB, TVDB, TMDb, Last.fm, and Trackt IDs/URLs to notification options.
+* Add: {poster_url} to notification options using Imgur.
+* Add: Poster and link for Facebook notifications.
+* Add: Log javascript errors from the Web UI.
+* Add: Configuration and Scheduler info to the settings page.
+* Add: Schedule background task to backup the PlexPy database.
+* Add: URL anonymizer for external links.
+* Add: Plex Media Scanner log file to Log viewer.
+* Add: API v2 (sill very experimental) (Thanks @Hellowlol)
+* Change: Allow secure websocket connections.
+* Change: History grouping now accounts for the view offset.
+* Change: Subject line can be toggled off for Facebook, Slack, Telegram, and Twitter.
+* Change: Create self-signed SSL certificates when enabling HTTPS.
+* Change: Revert homepage "Last Played" to "Last Watched".
+* Change: Disable monitor remote access checkbox if remote access is not enabled on the PMS.
+* Change: Disable IP logging checkbox if PMS version is 0.9.14 or greater.
 
-## v1.0.1 (2015-08-13)
 
-* Allow SSL certificate check override for certain systems with bad CA stores.
-* Fix typo on graphs page causing date selection to break on Safari.
+## v1.3.6 (2016-02-03)
+
+* Fix: Regression where {duration} not reported in minutes.
+* Fix: Proper daemonizing in FreeBSD and FreeNAS init scripts.
+* Change: Update readme documentation.
+
+
+## v1.3.5 (2016-02-02)
+
+* Fix: Removing unique constraints from database.
+* Fix: Unable to expand media info table when missing "Added At" date.
+* Fix: Server verification for unpublished servers.
+* Fix: Updating PMS identifier for server change.
+* Add: {stream_time}, {remaining_time}, and {progress_time} to notification options.
+* Add: Powershell script support. (Thanks @Hellowlol)
+* Add: Method to delete duplicate libraries.
+* Change: Daemonize before running start up tasks.
+
+
+## v1.3.4 (2016-01-29)
+
+* Fix: Activity checker not starting with library update (history not logging).
+* Fix: Libraries duplicated in database.
+* Fix: Buffer notifications even when disabled when using websockets.
+* Fix: Libraries and Users lists not refreshing.
+* Fix: Server verification in settings.
+* Fix: Empty libraries not added to database.
+* Add: Unique identifiers to notification options.
+* Remove: Requirement of media type toggles for recently added notifications.
+* Remove: Built in Twitter key and secret.
+* Change: Unnecessary quoting of script arguments.
+* Change: Facebook notification instructions.
+
+
+## v1.3.3 (2016-01-26)
+
+* Fix: Plays by Month graph not loading.
+* Change: Disable caching for datatables.
+* Change: Improved updating library data in the database again.
+
+
+## v1.3.2 (2016-01-24)
+
+* Fix: 'datestamp' and 'timestamp' for server notifications.
+* Change: New method for updating library data in database.
+
+
+## v1.3.1 (2016-01-23)
+
+* Fix: Notifiers authorization popups for reverse proxies.
+* Fix: Empty brackets in titles on tables.
+* Fix: Star rating overlapping text.
+* Fix: Unable to startup when library refresh fails.
+* Fix: Unable to parse 'datestamp' and 'timestamp' format.
+* Change: Rename "Last Watched" to "Last Played".
+* Change: More descriptive libraries updating message.
+
+
+## v1.3.0 (2016-01-23)
+
+* Add: Brand new Libraries section.
+* Add: Lots of new library statistics.
+* Add: Media info table for libraries.
+* Add: Web app for Android and iOS. (Thanks @zobe123)
+* Add: Slack notification agent. (Thanks @richipargo)
+* Add: Facebook notification agent.
+* Add: Custom script notification agent. (Thanks @Hellowlol)
+* Add: Custom "From Name" to email notification agent.
+* Add: Ability to test notifications / send custom one-off notifications.
+* Add: 'datestamp' and 'timestamp' notification options.
+* Add: More concurrent stream statistics.
+* Add: Media info flags on the info pages.
+* Add: Ability to fix broken metadata if the item has been moved in Plex.
+* Add: Ability to rearrange the homepage statistics cards.
+* Add: CentOS startup script (Thanks @PHoSawyer)
+* Fix: Server name blank after first run wizard.
+* Fix: Incorrect duration for grouped home stats.
+* Fix: Allow SSL when verifying server in settings.
+* Fix: Metadata for grouped recently added notifications.
+* Fix: Unable to access settings with missing changelog file.
+* Fix: Month name localization on play totals graphs.
+* Fix: Get new PMS identifier when changing servers.
+* Fix: Websocket log spam when there is no active session.
+* Fix: Logs and cache folder not created in the data directory.
+* Fix: Title links on sync table.
+* Fix: Other various minor bugs and graphical glitches.
+* Change: Prettier thumbnail popovers on tables.
+* Change: Star ratings to use css/font-awesome.
+* Change: More detailed logging info to warnings and errors.
+* Change: Better PlexPy process restart handling (Thanks @jackwilsdon)
+* Change: Massive behind the scenes code cleanup.
+* Remove: Built in Pushover API token (User's own API token is now required).
+
+
+## v1.2.16 (2015-12-22)
+
+* Fix Most Concurrent stream stat for emtpy databases
+* Change logs to 50 lines by default
+
+
+## v1.2.15 (2015-12-20)
+
+* Fix navbar covering current activity on smaller screens.
+* Fix metadata for grouped recently added notifications.
+* Fix Growl notification agent not working.
+* Change graph days selection.
+* Change watch statistics to match table history grouping.
+* Add automatic discovery of Pushbullet devices.
+* Add Most Concurrent Streams watch statistic.
+* Add precentage to current activity progress bars.
+* Add a bunch of stream details to notification options.
+* Add notification for Plex Remote Access/Plex Media Server back up.
+* Add CC/BCC and multiple recipients to email notification agent.
+* Add total watch time to history table footer.
+
+
+## v1.2.14 (2015-12-07)
+
+* Fix regression with PlexWatch db importer and buffer warnings.
+
+
+## v1.2.13 (2015-12-06)
+
+* Fix match newlines between tags in notification text.
+* Fix current activity not showing on PMS 0.9.12.
+
+
+## v1.2.12 (2015-12-06)
+
+* Fix for "too many open files" error.
+
+
+## v1.2.11 (2015-12-06)
+
+* Fix more regressions (sorry).
+
+
+## v1.2.10 (2015-12-06)
+
+* Fix broken count graphs regression.
+
+
+## v1.2.9 (2015-12-06)
+
+* Fix and improve text sanitization.
+
+
+## v1.2.8 (2015-12-06)
+
+* Fix sanitize player names
+* Fix recently added notification delay
+* Fix recently added metadata queries
+* Fix multiple lines in notification body text
+* Fix UTF-8 encoding in Prowl notifications subject line
+* Change to only log IPv4 addresses
+* Add global toggle for recently added notifcations
+* Add feature to delete users
+* Add channel support for Telegram notification agent
+* Add icon for Apple tvOS
+* Add icon for Microsoft Edge
+
+
+## v1.2.7 (2015-11-27)
+
+* Fix IP address option in notifications
+
+
+## v1.2.6 (2015-11-27)
+
+* Fixes for IP logging in PMS < 0.9.14.x.
+* Fix issue in plexWatch importer when trying to import item with no ratingKey.
+
+
+## v1.2.5 (2015-11-25)
+
+* Add video_decision and audio_decision to notification options
+* Fix IP address logging
+* Fix log spam if notifications disabled 
+
+
+## v1.2.4 (2015-11-24)
+
+* Add filtering by media type in the history table
+* Add IFTTT notification agent
+* Add Telegram notification agent
+* Add notifications for recently added media
+* Add notifications for server down and remote access down
+* Add more metadata to notifications options
+* Add IP address to notification options (for PMS 0.9.14 and above)
+* Add server uptime to notification options
+* Add IP address to current activity
+* Add IPv6 address logging
+* Add PMS server name to the page title
+* Fix bug in "Last Watched" statistic
+* Fix bug in search query
+* Fix bug on user pages for usernames with single quotes
+* Fix name for new Plex Media Center
+* Fix Pushover notifications with unicode characters
+* Fix bug with showing old usernames in datatables
+* Fix bug with "Please verify your server" in settings
+* Change IP lookup provider
+* Change notifications custom body text to larger text box
+* Change movie/tv logging and notifications into individual options
+
+
+## v1.2.3 (2015-10-18)
+
+* Added "remaining time" as notification substitution.
+* Fix bug on home stats cards.
+* Fix visual bug on user page.
+
+
+## v1.2.2 (2015-10-12)
+
+* Add server discovery on first run.
+* Add column to tables for Platform.
+* Add link to top level breadcrumbs on info pages.
+* Add ability to change notification sounds for Pushover and Boxcar.
+* Show watched percentage tooltip on progress column in history tables. 
+* More logging in event an http request fails.
+* Code cleanups and other fixes.
+* Fix ordering on sync table.
+* Fix bug on home stats cards.
+* Fix bug on activity pane where music details were not shown.
+
+
+## v1.2.1 (2015-09-29)
+
+* Fix for possible issue when paused_counter is null.
+
+
+## v1.2.0 (2015-09-29)
+
+* Added option to group consecutive plays in the history tables.
+* Added option for websocket monitoring (still slightly experimental and disabled by default).
+* Added global search option (searches your Plex library).
+* Added option to update any items that may have had their rating keys changed.
+* Added option to disable consecutive notifications. 
+* Some visual tweaks and fixes.
+* Fix bug where monitoring wouldn't start up after first run.
+* Fix bug showing incorrect transcode decisions for music tracks on history tables.
+
+
+## v1.1.10 (2015-09-20)
+
+* Added dedicated settings section for home stats configuration with ability to show/hide selected stats and sections.
+* Added support for Twitter notifications.
+* Only show music in graphs if music logging is enabled.
+* The monitoring ignore interval now excludes paused time. 
+* Fix display bug on activity panel which incorrectly reported transcoding sometimes.
+* Fix bug with Email notification TLS checkbox when it would be disabled by changing any other settings afterwards.
+* Fix issue on some Python releases where the webbrowser library isn't included.
+
+
+## v1.1.9 (2015-09-14)
+
+* Another JonnyWong release. I'm going to stop thanking you now ;)
+* Add music plays to graphs.
+* Add info pages for music items.
+* Add music to user recently watched items.
+* Add photo views to Activity pane (photos are not logged).
+* Fix token validation message on Settings page.
+* Fix some "Mystery" platform names.
+* Fix paused time be counted for graph data.
+* Other small bug fixes.
+
+
+## v1.1.8 (2015-09-09)
+
+* Add platform images for Windows devices. Thanks @JonnyWong.
+* Add click-through to PlexWeb preplay page from info page. Thanks @JonnyWong. 
+* Fix broken delete option on info pages. Thanks @JonnyWong.
+* Fix tagline bug in PlexWatch db import tool.
+* Fix home stats text overflow bug. Thanks @JonnyWong.
+
+
+## v1.1.7 (2015-09-07)
+
+* Show tagline in info screens for movies. Thanks @JonnyWong.
+* Add play/pause/buffer icon to activity pane. Thanks @JonnyWong.
+* Add transcoder info in activity pane info. Thanks @JonnyWong.
+* Show transcoder progress on activity progress bar. Thanks @JonnyWong.
+* Fix bug where custom notification strings would be ignored if unicode characters were present.
+* Fix text overflow issue on home stats cards. Thanks @JonnyWong.
+* Fix regression with user friendly name change input in edit screen. Thanks @JonnyWong.
+
+
+## v1.1.6 (2015-09-06)
+
+* Home stats cards are now expandable to show multiple items. Configurable in settings. Thanks @JonnyWong.
+* Completely redesigned media info pages. Thanks @JonnyWong.
+* Redesigned activity pane to match Plex Web more closely. Thanks @JonnyWong.
+* New Library stats on home page, shows total item counts per library. Thanks @JonnyWong.
+* New last watched card in home stats. Shows last watched items. Thanks @JonnyWong.
+* Improved some layout issues on mobile devices. Thanks @JonnyWong.
+* Fixed issue where some clip/channel items are reported as episodes and causing exceptions.
+* Many styling improvements and fixes. Thanks @JonnyWong.
+* Fixed incorrect sort on home stats platform count by duration. Thanks @JonnyWong.
+* Fix issue where user refresh would continually be called as "Local" user didn't exist in database.
+* Fixed styling on graph stream modal. Thanks @JonnyWong.
+* Fixed some issues with users page editing. Thanks @JonnyWong.
+* Fix error page when clicking through to an item that no longer exists.
+
+
+## v1.1.5 (2015-08-27)
+
+* Fix git tag being one release behind.
+
+
+## v1.1.4 (2015-08-26)
+
+* User info is now editable from the users table. Thanks @JonnyWong.
+* Improved delete mode for history pages - able to multi-select now. Thanks @JonnyWong.
+* Improved image quality on tooltip images.
+* More styling improvements and fixes on user and info pages. Thanks @JonnyWong.
+* Added some user submitted systemd init scripts. Thanks @malle-pietje and @artbird309.
+* Fixed some background operations when saving settings.
+* Fix max width restricting home stats to 1600px.
+* Fix stream duration parameter for notifications when paused counter is null.
+
+
+## v1.1.3 (2015-08-22)
+
+* Show human readable version info and this cool changelog in Settings -> General.
+* Add a "delete" mode to the history tables. Toggle it to show a delete button next to each history item.
+* Two digit season and episode numbers for custom notification messages. Thanks @JonnyWong.
+* New FreeNAS init script. Thanks @JonnyWong.
+* Lots of styling improvements! Thanks @JonnyWong.
+* Graph page remembers last selected options. Thanks @JonnyWong.
+* New Popular movie homepage stats. Thanks @JonnyWong.
+* Add option for duration vs play count on home stats. (Settings -> Extra Settings). Thanks @JonnyWong.
+* Clean up media info pages. Don't show metadata that is missing. Thanks @JonnyWong.
+* Add clear button to search inputs. Thanks @JonnyWong.
+* New columns on Users list. Thanks @JonnyWong.
+* New stream duration option for custom notification messages. Thanks @JonnyWong.
+* Rad new tooltips on the history pages. Thanks @JonnyWong.
+* And a lot of small visual changes and fixes. Thanks @JonnyWong.
+* Fixed IP address modal on user history page.
+* Fixed "invalid date" showing on monthly plays graph.
+
+## v1.1.2 (2015-08-16)
+
+* Fix bug where user refresh would fail under certain circumstances.
+
+## v1.1.1 (2015-08-15)
+
+* Added Most watched movie for home stats. Thanks @jroyal.
+* Added TV show title to recently added text. Thanks @jroyal.
+* Fix bug with buffer warnings where notification would trigger continuously after first trigger.
+* Fix bug where custom avatar URL would get reset on every user refresh.
 
 ## v1.1.0 (2015-08-15)
 
@@ -24,13 +394,11 @@
 * Fix behaviour of close button on update popup, will now stay closed for an hour after clicking close.
 * Fix some styling niggles.
 
-## v1.1.1 (2015-08-15)
+## v1.0.1 (2015-08-13)
 
-* Added Most watched movie for home stats. Thanks @jroyal.
-* Added TV show title to recently added text. Thanks @jroyal.
-* Fix bug with buffer warnings where notification would trigger continuously after first trigger.
-* Fix bug where custom avatar URL would get reset on every user refresh.
+* Allow SSL certificate check override for certain systems with bad CA stores.
+* Fix typo on graphs page causing date selection to break on Safari.
 
-## v1.1.2 (2015-08-16)
+## v1.0 (2015-08-11)
 
-* Fix bug where user refresh would fail under certain circumstances.
+* First release

PlexPy.py

@@ -1,4 +1,6 @@
 #!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
 # This file is part of PlexPy.
 #
 #  PlexPy is free software: you can redistribute it and/or modify
@@ -20,7 +22,7 @@ import sys
 # Ensure lib added to path, before any other imports
 sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'lib/'))
 
-from plexpy import webstart, logger
+from plexpy import webstart, logger, web_socket
 
 import locale
 import time
@@ -64,7 +66,7 @@ def main():
 
     # Set up and gather command line arguments
     parser = argparse.ArgumentParser(
-        description='Python frontend for PlexWatch.')
+        description='A Python based monitoring and tracking tool for Plex Media Server.')
 
     parser.add_argument(
         '-v', '--verbose', action='store_true', help='Increase console logging verbosity')
@@ -151,12 +153,12 @@ def main():
     # Put the database in the DATA_DIR
     plexpy.DB_FILE = os.path.join(plexpy.DATA_DIR, 'plexpy.db')
 
-    # Read config and start logging
-    plexpy.initialize(config_file)
-
     if plexpy.DAEMON:
         plexpy.daemonize()
 
+    # Read config and start logging
+    plexpy.initialize(config_file)
+
     # Force the http port if neccessary
     if args.port:
         http_port = args.port
@@ -191,6 +193,16 @@ def main():
     # Start the background threads
     plexpy.start()
 
+    # Open connection for websocket
+    if plexpy.CONFIG.MONITORING_USE_WEBSOCKET:
+        try:
+            web_socket.start_thread()
+        except:
+            logger.warn(u"Websocket :: Unable to open connection.")
+            # Fallback to polling
+            plexpy.POLLING_FAILOVER = True
+            plexpy.initialize_scheduler()
+
     # Open webbrowser
     if plexpy.CONFIG.LAUNCH_BROWSER and not args.nolaunch:
         plexpy.launch_browser(plexpy.CONFIG.HTTP_HOST, http_port,

README.md

@@ -1,107 +1,74 @@
-#PlexPy
+# PlexPy
+
+[![Join the chat at https://gitter.im/drzoidberg33/plexpy](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/drzoidberg33/plexpy?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 A python based web application for monitoring, analytics and notifications for Plex Media Server (www.plex.tv).
 
-This project is based on code from Headphones (https://github.com/rembo10/headphones) and PlexWatchWeb (https://github.com/ecleese/plexWatchWeb).
+This project is based on code from [Headphones](https://github.com/rembo10/headphones) and [PlexWatchWeb](https://github.com/ecleese/plexWatchWeb).
 
-* plexPy forum thread: https://forums.plex.tv/discussion/169591/plexpy-another-plex-monitoring-program
+* PlexPy [forum thread](https://forums.plex.tv/discussion/169591/plexpy-another-plex-monitoring-program)
 
-If you'd like to buy me a beer, hit the donate button below.
+## Features
+* Responsive web design viewable on desktop, tablet and mobile web browsers.
+* Themed to complement Plex/Web.
+* Easy configuration setup (no separate web server required).
+* Monitor current Plex Media Server activity.
+* Fully customizable notifications for stream activity and recently added media.
+* Top statistics on home page with configurable duration and measurement metric.
+* Global watching history with search/filtering & dynamic column sorting.
+* Full user list with general information and comparison stats.
+* Individual user information including devices IP addresses.
+* Complete library statistics and media file information.
+* Rich analytics presented using Highcharts graphing.
+* Beautiful content information pages.
+* Full sync list data on all users syncing items from your library.
+* And many more!!
 
-[![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=G9HZK9BDJLKT6)
+## Installation and Support
 
-
-###Support
------------
-* PlexPy Wiki: https://github.com/drzoidberg33/plexpy/wiki
-
-
-###Features
------------
-* Responsive web design viewable on desktop, tablet and mobile web browsers
-
-* Themed to complement Plex/Web
-
-* Easy configuration setup via html form
-
-* Current Plex Media Server viewing activity including:
-	* number of current users
-	* title
-	* progress
-	* platform
-	* user
-	* state (playing, paused, buffering, etc)
-	* stream type (direct, transcoded)
-	* video type & resolution
-	* audio type & channel count.
-
-* Recently added media and how long ago it was added
-
-* Global watching history with search/filtering & dynamic column sorting
-	* date
-	* user
-	* platform
-	* ip address (if enabled in plexWatch)
-	* title
-	* stream information details
-	* start time
-	* paused duration length
-	* stop time
-	* duration length
-	* percentage completed
-
-* Full user list with general information and comparison stats 
-
-* Individual user information
-	- username and gravatar (if available)
-	- daily, weekly, monthly, all time stats for play count and duration length
-	- individual platform stats for each user
-	- public ip address history with last seen date and geo tag location
-	- recently watched content
-	- watching history
-	- synced items
-
-* Rich analytics presented using Highcharts graphing
-	- user-selectable time periods of 30, 90 or 365 days
-	- daily watch count and duration
-	- totals by day of week and hours of the day
-	- totals by top 10 platform
-	- totals by top 10 users
-	- detailed breakdown by transcode decision
-	- source and stream resolutions
-	- transcode decision counts by user and platform
-	- total monthly counts
-	
-* Content information pages
-	- movies (includes watching history)
-	- tv shows (includes watching history)
-	- tv seasons
-	- tv episodes (includes watching history)
-
-* Full sync list data on all users syncing items from your library
-
-## Installation and Notes
-
-* [Installation page](../../wiki/Installation) shows you how to install PlexPy.
-* [Usage guide](../../wiki/Usage-guide) introduces you to PlexPy.
-* [Troubleshooting page](../../wiki/TroubleShooting) in the wiki can help you with common problems.
-
-**Issues** can be reported on the GitHub issue tracker considering these rules:
-
-1. Analyze your log, you just might find the solution yourself!
-2. You read the wiki and searched existing issues, but this is not solving your problem.
-3. Post the issue with a clear title, description and the HP log and use [proper markdown syntax](https://help.github.com/articles/github-flavored-markdown) to structure your text (code/log in code blocks). 
-4. Close your issue when it's solved! If you found the solution yourself please comment so that others benefit from it.
-
-**Feature requests** can be reported on the GitHub issue tracker too:
-
-1. Search for similar existing 'issues', feature requests can be recognized by the label 'Request'.
-2. If a similar Request exists, post a comment (+1, or add a new idea to the existing request), otherwise you can create a new one.
-
-If you **comply with these rules** you can [post your request/issue](http://github.com/drzoidberg33/plexpy/issues).
+* [Installation Guides](https://github.com/drzoidberg33/plexpy/wiki/Installation) shows you how to install PlexPy.
+* [FAQs](https://github.com/drzoidberg33/plexpy/wiki/Frequently-Asked-Questions-(FAQ)) in the wiki can help you with common problems.
 
 **Support** the project by implementing new features, solving support tickets and provide bug fixes.
 
+## Issues
+
+##### Many issues can simply be solved by:
+
+- Making sure you update to the latest version. 
+- Turning your device off and on again.
+- Analyzing your logs, you just might find the solution yourself!
+- Using the **search** function to see if this issue has already been reported/solved.
+- Checking the [Wiki](https://github.com/drzoidberg33/plexpy/wiki) for 
+[ [Installation] ](https://github.com/drzoidberg33/plexpy/wiki/Installation) and 
+[ [FAQs] ](https://github.com/drzoidberg33/plexpy/wiki/Frequently-Asked-Questions-(FAQ)).
+- For basic questions try asking on [Gitter](https://gitter.im/drzoidberg33/plexpy) or the [Plex Forums](https://forums.plex.tv/discussion/169591/plexpy-another-plex-monitoring-program) first before opening an issue.
+
+##### If nothing has worked:
+
+1. Open a new issue on the GitHub [issue tracker](http://github.com/drzoidberg33/plexpy/issues).
+2. Provide a clear title to easily help identify your problem.
+3. Use proper [markdown syntax](https://help.github.com/articles/github-flavored-markdown) to structure your post (i.e. code/log in code blocks).
+4. Make sure you provide the following information:
+    - [ ] Branch
+    - [ ] Version/Commit hash
+    - [ ] Your operating system and python version
+    - [ ] What you did?
+    - [ ] What happened?
+    - [ ] What you expected?
+    - [ ] How can we reproduce your issue?
+    - [ ] What are your (relevant) settings?
+    - [ ] Include a link to your **FULL** (not just a few lines!) log file that has the error. Please use [Gist](http://gist.github.com) or [Pastebin](http://pastebin.com/).
+5. Close your issue when it's solved! If you found the solution yourself please comment so that others benefit from it.
+
+## Feature Requests
+
+1. Search for similar existing 'issues', feature requests can be recognized by the blue `enhancement` label.
+2. If a similar request exists, post a comment (+1, or add a new idea to the existing request).
+3. If no similar requests exist, you can create a new one.
+4. Provide a clear title to easily identify the feature request.
+5. Tag your feature request with `[Feature Request]` so it can be identified easily.
+
 ## License
 This is free software under the GPL v3 open source license. Feel free to do with it what you wish, but any modification must be open sourced. A copy of the license is included.
 

data/interfaces/default/base.html

@@ -1,4 +1,4 @@
-<%
+<%
 import plexpy
 from plexpy import version
 %>
@@ -7,7 +7,7 @@ from plexpy import version
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>PlexPy - ${title}</title>
+    <title>PlexPy - ${title} | ${server_name}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
@@ -18,12 +18,117 @@ from plexpy import version
     ${next.headIncludes()}
 
     <link rel="icon" type="image/x-icon" href="interfaces/default/images/favicon.ico"/>
-    <!-- touch icons -->
     <link rel="shortcut icon" href="interfaces/default/images/favicon.png">
-    <link rel="apple-touch-icon" href="interfaces/default/images/icon_iphone.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="interfaces/default/images/icon_ipad.png">
-    <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">
@@ -37,7 +142,7 @@ from plexpy import version
     % elif plexpy.CONFIG.CHECK_GITHUB and plexpy.CURRENT_VERSION != plexpy.LATEST_VERSION and plexpy.COMMITS_BEHIND > 0 and plexpy.INSTALL_TYPE != 'win':
     <div id="updatebar" style="display: none;">
         A <a
-            href="https://github.com/${plexpy.CONFIG.GIT_USER}/plexpy/compare/${plexpy.CURRENT_VERSION}...${plexpy.LATEST_VERSION}">
+            href="https://github.com/${plexpy.CONFIG.GIT_USER}/plexpy/compare/${plexpy.CURRENT_VERSION}...${plexpy.LATEST_VERSION}" target="_blank">
         newer version</a> is available. You're ${plexpy.COMMITS_BEHIND} commits behind. <a href="update">Update</a> or
         <a href="#" id="updateDismiss">Close</a>
     </div>
@@ -52,42 +157,59 @@ from plexpy import version
                     <span class="icon-bar"></span>
                 </button>
                 <a class="navbar-brand" href="home">
-                    <img alt="PlexPy" src="interfaces/default/images/logo-plexpy@2x.png" height="40px">
+                    <img alt="PlexPy" src="interfaces/default/images/logo-plexpy@2x.png" height="40">
                 </a>
             </div>
             <div class="collapse navbar-collapse navbar-right" id="navbar-collapse-1">
                 <ul class="nav navbar-nav">
-                    % if title=="Home":
+                    <li class="hidden-sm hidden-xs">
+                        <form action="search" method="post" class="form" id="search_form">
+                            <div class="input-group">
+                                <span class="input-textbox">
+                                    <input type="text" class="form-control" name="query" id="query" aria-label="Search" placeholder="Search..."/>
+                                </span>
+                                <span class="input-group-btn">
+                                    <button class="btn btn-dark btn-inactive" type="submit" id="search_button"><i class="fa fa-search"></i></button>
+                                </span>
+                            </div>
+                        </form>
+                    </li>
+                    % 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=="History":
-                        <li class="active"><a href="history">History</a></li>
+                    % if title == "Libraries" or title == "Library" or title == "Info":
+                    <li class="active"><a href="libraries">Libraries</a></li>
                     % else:
-                        <li><a href="history">History</a></li>
+                    <li><a href="libraries">Libraries</a></li>
                     % endif
-                    % if title=="Users" or title=="User":
+                    % 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=="Graphs":
+                    % if title == "History":
+                    <li class="active"><a href="history">History</a></li>
+                    % else:
+                    <li><a href="history">History</a></li>
+                    % endif
+                    % 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>
@@ -99,7 +221,9 @@ from plexpy import version
 </div>
 
 ${next.headerIncludes()}
-${next.body()}
+<div class="body-container">
+    ${next.body()}
+</div>
 
 <script src="interfaces/default/js/jquery-2.1.4.min.js"></script>
 <script src="interfaces/default/js/bootstrap3/bootstrap.min.js"></script>
@@ -115,6 +239,43 @@ ${next.body()}
         $('#updatebar').show();
     }
 </script>
+<script>
+    $('#search_form').submit(function (e) {
+        if ($('#query').hasClass('active') && $('#query').val().trim() != '') {
+            $.ajax({
+                type: 'post',
+                url: 'search',
+                data: { query: $('#query').val() }
+            })
+        } else {
+            e.preventDefault();
+            $('#search_button').removeClass('btn-inactive');
+            $('#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: '-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/dataTables.colVis.css

@@ -75,6 +75,7 @@ ul.ColVis_collection {
 	background-color: #444;
 	overflow: hidden;
 	z-index: 2002;
+	border-radius: 4px;
 }
 
 ul.ColVis_collection li {

data/interfaces/default/css/selectize.bootstrap3.css

@@ -0,0 +1,401 @@
+/**
+ * selectize.bootstrap3.css (v0.12.1) - Bootstrap 3 Theme
+ * Copyright (c) 2013–2015 Brian Reavis & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * @author Brian Reavis <brian@thirdroute.com>
+ */
+.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
+  visibility: visible !important;
+  background: #f2f2f2 !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  -webkit-box-shadow: inset 0 0 12px 4px #ffffff;
+  box-shadow: inset 0 0 12px 4px #ffffff;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
+  content: '!';
+  visibility: hidden;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-helper {
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+.selectize-dropdown-header {
+  position: relative;
+  padding: 3px 12px;
+  border-bottom: 1px solid #d0d0d0;
+  background: #f8f8f8;
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
+}
+.selectize-dropdown-header-close {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  color: #333333;
+  opacity: 0.4;
+  margin-top: -12px;
+  line-height: 20px;
+  font-size: 20px !important;
+}
+.selectize-dropdown-header-close:hover {
+  color: #000000;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup {
+  border-right: 1px solid #f2f2f2;
+  border-top: 0 none;
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-right: 0 none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
+  display: none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-control.plugin-remove_button [data-value] {
+  position: relative;
+  padding-right: 24px !important;
+}
+.selectize-control.plugin-remove_button [data-value] .remove {
+  z-index: 1;
+  /* fixes ie bug (see #392) */
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 17px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 12px;
+  color: inherit;
+  text-decoration: none;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 1px 0 0 0;
+  border-left: 1px solid rgba(0, 0, 0, 0);
+  -webkit-border-radius: 0 2px 2px 0;
+  -moz-border-radius: 0 2px 2px 0;
+  border-radius: 0 2px 2px 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.selectize-control.plugin-remove_button [data-value].active .remove {
+  border-left-color: rgba(0, 0, 0, 0);
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
+  background: none;
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove {
+  border-left-color: rgba(77, 77, 77, 0);
+}
+.selectize-control {
+  position: relative;
+}
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input {
+  color: #333333;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 20px;
+  -webkit-font-smoothing: inherit;
+}
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+  background: #ffffff;
+  cursor: text;
+  display: inline-block;
+}
+.selectize-input {
+  border: 1px solid #cccccc;
+  padding: 6px 12px;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.selectize-control.multi .selectize-input.has-items {
+  padding: 5px 12px 2px;
+}
+.selectize-input.full {
+  background-color: #ffffff;
+}
+.selectize-input.disabled,
+.selectize-input.disabled * {
+  cursor: default !important;
+}
+.selectize-input.focus {
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
+}
+.selectize-input > * {
+  vertical-align: baseline;
+  display: -moz-inline-stack;
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+}
+.selectize-control.multi .selectize-input > div {
+  cursor: pointer;
+  margin: 0 3px 3px 0;
+  padding: 1px 3px;
+  background: #efefef;
+  color: #333333;
+  border: 0 solid rgba(0, 0, 0, 0);
+}
+.selectize-control.multi .selectize-input > div.active {
+  background: #428bca;
+  color: #ffffff;
+  border: 0 solid rgba(0, 0, 0, 0);
+}
+.selectize-control.multi .selectize-input.disabled > div,
+.selectize-control.multi .selectize-input.disabled > div.active {
+  color: #808080;
+  background: #ffffff;
+  border: 0 solid rgba(77, 77, 77, 0);
+}
+.selectize-input > input {
+  display: inline-block !important;
+  padding: 0 !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  max-width: 100% !important;
+  margin: 0 !important;
+  text-indent: 0 !important;
+  border: 0 none !important;
+  background: none !important;
+  line-height: inherit !important;
+  -webkit-user-select: auto !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+.selectize-input > input::-ms-clear {
+  display: none;
+}
+.selectize-input > input:focus {
+  outline: none !important;
+}
+.selectize-input::after {
+  content: ' ';
+  display: block;
+  clear: left;
+}
+.selectize-input.dropdown-active::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  background: #ffffff;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.selectize-dropdown {
+  position: absolute;
+  z-index: 10;
+  border: 1px solid #d0d0d0;
+  background: #ffffff;
+  margin: -1px 0 0 0;
+  border-top: 0 none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 0 0 4px 4px;
+  -moz-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
+}
+.selectize-dropdown [data-selectable] {
+  cursor: pointer;
+  overflow: hidden;
+}
+.selectize-dropdown [data-selectable] .highlight {
+  background: rgba(255, 237, 40, 0.4);
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+.selectize-dropdown [data-selectable],
+.selectize-dropdown .optgroup-header {
+  padding: 3px 12px;
+}
+.selectize-dropdown .optgroup:first-child .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-dropdown .optgroup-header {
+  color: #777777;
+  background: #ffffff;
+  cursor: default;
+}
+.selectize-dropdown .active {
+  background-color: #f5f5f5;
+  color: #262626;
+}
+.selectize-dropdown .active.create {
+  color: #262626;
+}
+.selectize-dropdown .create {
+  color: rgba(51, 51, 51, 0.5);
+}
+.selectize-dropdown-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 200px;
+}
+.selectize-control.single .selectize-input,
+.selectize-control.single .selectize-input input {
+  cursor: pointer;
+}
+.selectize-control.single .selectize-input.input-active,
+.selectize-control.single .selectize-input.input-active input {
+  cursor: text;
+}
+.selectize-control.single .selectize-input:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 17px;
+  margin-top: -3px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #333333 transparent transparent transparent;
+}
+.selectize-control.single .selectize-input.dropdown-active:after {
+  margin-top: -4px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent #333333 transparent;
+}
+.selectize-control.rtl.single .selectize-input:after {
+  left: 17px;
+  right: auto;
+}
+.selectize-control.rtl .selectize-input > input {
+  margin: 0 4px 0 -2px !important;
+}
+.selectize-control .selectize-input.disabled {
+  opacity: 0.5;
+  background-color: #ffffff;
+}
+.selectize-dropdown,
+.selectize-dropdown.form-control {
+  height: auto;
+  padding: 0;
+  margin: 2px 0 0 0;
+  z-index: 1000;
+  background: #ffffff;
+  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+}
+.selectize-dropdown .optgroup-header {
+  font-size: 12px;
+  line-height: 1.42857143;
+}
+.selectize-dropdown .optgroup:first-child:before {
+  display: none;
+}
+.selectize-dropdown .optgroup:before {
+  content: ' ';
+  display: block;
+  height: 1px;
+  margin: 9px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  margin-left: -12px;
+  margin-right: -12px;
+}
+.selectize-dropdown-content {
+  padding: 5px 0;
+}
+.selectize-dropdown-header {
+  padding: 6px 12px;
+}
+.selectize-input {
+  min-height: 34px;
+}
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.selectize-input.dropdown-active::before {
+  display: none;
+}
+.selectize-input.focus {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+.has-error .selectize-input {
+  border-color: #a94442;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.has-error .selectize-input:focus {
+  border-color: #843534;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+}
+.selectize-control.multi .selectize-input.has-items {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+.selectize-control.multi .selectize-input > div {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.form-control.selectize-control {
+  padding: 0;
+  height: auto;
+  border: none;
+  background: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}

data/interfaces/default/current_activity.html

@@ -19,7 +19,7 @@ session_key                 Returns a unique session id for the active stream
 rating_key                  Returns the unique identifier for the media item.
 media_index                 Returns the index of the media item.
 parent_media_index          Returns the index of the media item's parent.
-type                        Returns the type of session. Either 'track', 'episode' or 'movie'.
+media_type                  Returns the type of session. Either 'track', 'episode' or 'movie'.
 thumb                       Returns the location of the item's thumbnail. Use with pms_image_proxy.
 bif_thumb                   Returns the location of the item's bif thumbnail. Use with pms_image_proxy.
 art                         Returns the location of the item's artwork
@@ -28,10 +28,16 @@ user                        Returns the name of the user owning the session.
 user_id                     Returns the Plex user id if available.
 machine_id                  Returns the machine id of the players being used.
 friendly_name               Returns the friendlly name of the user owning the session.
+user_thumb                  Returns the profile picture of the user owning the session.
 state                       Returns the state of the current session. Either 'playing', 'paused' or 'buffering'.
 title                       Returns the name of the episode, movie or music track.
+year                        Returns the year of the episode, movie, or clip.
+ip_address                  Returns the ip address of the stream.
 player                      Returns the name of the platform used to play the stream.
 platform                    Returns the type of platform used to play the stream.
+throttled                   Returns true if the transcode session is throttled.
+transcode_progress          Returns the current transcode progress of the item. 0 to 100.
+transcode_speed             Returns the current transcode speed of the item.
 audio_decision              Returns the audio transcode decision. Either 'transcode', 'copy' or 'direct play'.
 audio_codec                 Returns the name of the audio codec.
 audio_channels              Returns the number of audio channels.
@@ -61,159 +67,232 @@ DOCUMENTATION :: END
 % if data is not None:
 % if data['stream_count'] != '0':
 % for a in data['sessions']:
-<div class="instance" id="instance-${a['session_key']}">
-    <div class="poster">
-        <div class="dashboard-activity-poster-face">
-            % if a['type'] == 'movie' and not a['indexes']:
-            <img src="pms_image_proxy?img=${a['art']}&width=410&height=230"/>
+<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?rating_key=${a['rating_key']}">
+    % endif
+        <div class="dashboard-activity-poster">
+            % 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']) 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']:
-            <img onload="fadeIn(this)" src="pms_image_proxy?img=${a['bif_thumb']}&width=300&height=169" style="display: none;"/>
+            <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>
             % else:
-            % if a['type'] == 'track':
-            <div class="dashboard-activity-poster-music-bg" style="background-image: url('pms_image_proxy?img=${a['thumb']}&width=300&height=300');"></div>
-            % endif
-            % if a['type'] == 'clip':
-            <img src="${a['thumb']}"/>
+                % if a['media_type'] == 'track':
+                <div class="dashboard-activity-cover-face-bg" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=300&height=300);"></div>
+                <div class="dashboard-activity-cover-face" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=300&height=300);"></div>
+                % elif a['media_type'] == 'clip':
+                    % if a['art'][:4] == 'http':
+                    <div class="dashboard-activity-poster-face" style="background-image: url(${a['art']});"></div>
+                    % elif a['thumb'][:4] == 'http':
+                    <div class="dashboard-activity-poster-face" style="background-image: url(${a['thumb']});"></div>
                     % else:
-            <img src="pms_image_proxy?img=${a['thumb']}&width=410&height=230&fallback=cover"/>
+                        % if a['art']:
+                        <div class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${a['art']}&width=500&height=280);"></div>
+                        % else:
+                        <div class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=500&height=280);"></div>
                         % endif
                     % endif
+                % elif a['media_type'] == 'photo':
+                <div class="dashboard-activity-poster-face bif" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=500&height=500);"></div>
+                % else:
+                <div class="dashboard-activity-cover-face" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=300&height=300&fallback=cover);"></div>
+                % endif
+            % endif
+            <div class="dashboard-activity-button-info">
+                <button type="button" class="btn btn-activity-info btn-lg" data-target="#stream-${a['session_key']}">
+                    <i class="fa fa-info-circle"></i>
+                </button>
+            </div>
+            <div id="stream-${a['session_key']}" class="dashboard-activity-info-details-overlay">
+                <div class="dashboard-activity-info-details-content">
+                    <div id="platform-${a['session_key']}" title="${a['platform']}">
+                        <script>
+                            $("#platform-${a['session_key']}").html("<div class='dashboard-activity-info-platform-box' style='background-image: url(" + getPlatformImagePath('${a['platform']}') + ");'>");
+                        </script>
+                    </div>
+                    <div class="dashboard-activity-info-platform">
+                        <strong>${a['player']}</strong><br />
+                        % if a['state'] == 'playing':
+                        State &nbsp;<strong>Playing</strong>
+                        % elif a['state'] == 'paused':
+                        State &nbsp;<strong>Paused</strong>
+                        % elif a['state'] == 'buffering':
+                        State &nbsp;<strong>Buffering</strong>
+                        % endif
+                    </div>
+                    % if a['media_type'] == 'track':
+                        % if a['audio_decision'] == 'direct play':
+                        Stream &nbsp;<strong>Direct Play</strong>
+                        % elif a['audio_decision'] == 'copy':
+                        Stream &nbsp;<strong>Direct Stream</strong>
+                        % else:
+                        Stream &nbsp;<strong>Transcoding
+                            (Speed: ${a['transcode_speed']})
+                            % if a['throttled'] == '1':
+                            (Throttled)
+                            % endif
+                        </strong>
+                        % endif
+                        <br />
+                        % if a['audio_decision'] == 'direct play':
+                        Audio &nbsp;<strong>Direct Play (${a['audio_codec']}) (${a['audio_channels']}ch)</strong>
+                        % elif a['audio_decision'] == 'copy':
+                        Audio &nbsp;<strong>Direct Stream (${a['transcode_audio_codec']}) (${a['transcode_audio_channels']}ch)</strong>
+                        % elif a['audio_decision'] == 'transcode':
+                        Audio &nbsp;<strong>Transcode (${a['transcode_audio_codec']}) (${a['transcode_audio_channels']}ch)</strong>
+                        % endif
+                    % elif a['media_type'] == 'episode' or a['media_type'] == 'movie' or a['media_type'] == 'clip':
+                        % if a['video_decision'] == 'direct play' and a['audio_decision'] == 'direct play':
+                        Stream &nbsp;<strong>Direct Play</strong>
+                        % elif a['video_decision'] == 'copy' and a['audio_decision'] == 'copy':
+                        Stream &nbsp;<strong>Direct Stream</strong>
+                        % else:
+                        Stream &nbsp;<strong>Transcoding
+                            (Speed: ${a['transcode_speed']})
+                            % if a['throttled'] == '1':
+                            (Throttled)
+                            % endif
+                        </strong>
+                        % endif
+                        <br />
+                        % if a['video_decision'] == 'direct play':
+                        Video &nbsp;<strong>Direct Play (${a['video_codec']}) (${a['width']}x${a['height']})</strong>
+                        % elif a['video_decision'] == 'copy':
+                        Video &nbsp;<strong>Direct Stream (${a['transcode_video_codec']}) (${a['width']}x${a['height']})</strong>
+                        % elif a['video_decision'] == 'transcode':
+                        Video &nbsp;<strong>Transcode (${a['transcode_video_codec']}) (${a['transcode_width']}x${a['transcode_height']})</strong>
+                        % endif
+                        <br />
+                        % if a['audio_decision'] == 'direct play':
+                        Audio &nbsp;<strong>Direct Play (${a['audio_codec']}) (${a['audio_channels']}ch)</strong>
+                        % elif a['audio_decision'] == 'copy':
+                        Audio &nbsp;<strong>Direct Stream (${a['transcode_audio_codec']}) (${a['transcode_audio_channels']}ch)</strong>
+                        % elif a['audio_decision'] == 'transcode':
+                        Audio &nbsp;<strong>Transcode (${a['transcode_audio_codec']}) (${a['transcode_audio_channels']}ch)</strong>
+                        % endif
+                    % elif a['media_type'] == 'photo':
+                        % if a['video_decision'] == 'direct play':
+                        Stream &nbsp;<strong>Direct Play</strong>
+                        % elif a['video_decision'] == 'copy':
+                        Stream &nbsp;<strong>Direct Stream</strong>
+                        % else:
+                        Stream &nbsp;<strong>
+                            Transcoding
+                            (Speed: ${a['transcode_speed']})
+                            % if a['throttled'] == '1':
+                            (Throttled)
+                            % endif
+                        </strong>
+                        % endif
+                    % endif
+                    <br>
+                </div>
+            </div>
+            % if a['media_type'] != 'photo':
             <div class="dashboard-activity-poster-info-bar">
-                <div class="dashboard-activity-poster-info-text">
-                    % if a['type'] == 'track':
-                    Track ${a['media_index']}
-                    % elif a['type'] == 'episode':
-                    Season ${a['parent_media_index']}, Episode ${a['media_index']}
+                <div class="dashboard-activity-poster-info-ip-address">
+                    % if a['ip_address']:
+                    <span>IP: ${a['ip_address']}</span>
                     % else:
-                    ${a['title']}
+                    <span>IP: N/A</span>
                     % endif
+                    <br />
+                    ETA:
+                    <span id="stream-eta-${a['session_key']}">
+                        <script>
+                            $("#stream-eta-${a['session_key']}").html(moment().add(parseInt(${a['duration']}) - parseInt(${a['view_offset']}), 'milliseconds').format(time_format));
+                        </script>
+                    </span>
                 </div>
                 <div class="dashboard-activity-poster-info-time">
-                    <span class="progress_time">${a['progress']}</span>/<span class="progress_time">${a['duration']}</span>
+                    <span class="progress_time">${a['view_offset']}</span>/<span class="progress_time">${a['duration']}</span>
                 </div>
             </div>
+            % endif
         </div>
-        <div class='dashboard-activity-metadata-wrapper'>
-            <div class='dashboard-activity-instance-overlay'>
-                <div class='dashboard-activity-metadata-progress-minutes'>
-                    <div class='activity-progress'>
+    % if a['media_type'] == 'movie' or a['media_type'] == 'episode' or a['media_type'] == 'track':
+    </a>
+    % endif
+    <div class="dashboard-activity-progress">
+        <div class="dashboard-activity-progress-bar">
+            <div class="bufferbar" style="width: ${a['transcode_progress']}%">${a['transcode_progress']}%</div>
             <div class="bar" style="width: ${a['progress_percent']}%">${a['progress_percent']}%</div>
         </div>
     </div>
-                <div class="dashboard-activity-metadata-platform" data-toggle="tooltip" data-placement="right" title data-title="${a['player']}" id="platform-${a['session_key']}">
+    <div class="dashboard-activity-metadata-wrapper">
+        <a href="user?user_id=${a['user_id']}">
+            <div class="dashboard-activity-metadata-user-thumb" style="background-image: url(${a['user_thumb']});"></div>
+        </a>
+        <div class="dashboard-activity-metadata-title">
+            % if a['state'] == 'playing':
+            <i class="fa fa-play"></i>&nbsp;
+            % elif a['state'] == 'paused':
+            <i class="fa fa-pause"></i>&nbsp;
+            % elif a['state'] == 'buffering':
+            <i class="fa fa-spinner"></i>&nbsp;
+            % endif
+            % if a['media_type'] == 'episode':
+            <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?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?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:
+            <span title="${a['title']}">${a['title']}</span>
+            % endif
+        </div>
+        <div class="dashboard-activity-metadata-subtitle">
+            % if a['media_type'] == 'episode':
+            <span title="S${a['parent_media_index']} &middot; E${a['media_index']}">S${a['parent_media_index']} &middot; E${a['media_index']}</span>
+            % elif a['media_type'] == 'movie':
+            <span title="${a['year']}">${a['year']}</span>
+            % elif a['media_type'] == 'track':
+            <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:
+            <span title="${a['year']}">${a['year']}</span>
+            % endif
         </div>
         <div class="dashboard-activity-metadata-user">
             % if a['user_id']:
-                    <a href="user?user_id=${a['user_id']}">${a['friendly_name']}</a> is ${a['state']}
+            <a href="user?user_id=${a['user_id']}" title="${a['friendly_name']}">${a['friendly_name']}</a>
             % else:
-                    <a href="user?user=${a['user']}">${a['friendly_name']}</a> is ${a['state']}
+            <a href="user?user=${a['user']}" title="${a['friendly_name']}">${a['friendly_name']}</a>
             % endif
         </div>
-                <div class="dashboard-activity-metadata-title">
-                    % if a['type'] == 'episode':
-                    <a href="info?item_id=${a['rating_key']}">${a['grandparent_title']} - ${a['title']}</a>
-                    % elif a['type'] == 'movie':
-                    <a href="info?item_id=${a['rating_key']}">${a['title']}</a>
-                    % elif a['type'] == 'clip':
-                    ${a['title']}
-                    % elif a['type'] == 'track':
-                    ${a['grandparent_title']} - ${a['title']}
-                    % else:
-                    ${a['grandparent_title']} - ${a['title']}
-                    % endif
-                </div>
-            </div>
-            <div id="stream-${a['session_key']}" class="collapse out">
-                <div class='dashboard-activity-info-details-overlay'>
-                    <div class='dashboard-activity-info-details-content'>
-                        % if a['type'] == 'track':
-                        Artist: <strong>${a['grandparent_title']}</strong>
-                        <br>
-                        Album: <strong>${a['parent_title']}</strong>
-                        <br>
-                        % endif
-                        % if a['state'] == 'playing':
-                        State: <strong>Playing</strong>
-                        % elif a['state'] == 'paused':
-                        State: <strong>Paused</strong>
-                        % elif a['state'] == 'buffering':
-                        State: <strong>Buffering</strong>
-                        % endif
-                        <br>
-                        % if a['type'] == 'track':
-                        % if a['audio_decision'] == 'direct play':
-                        Stream: <strong>Direct Play</strong>
-                        % else:
-                        Stream: <strong>Transcoding</strong>
-                        % endif
-                        <br/>
-                        % if a['audio_decision'] != 'direct play':
-                        Audio: <strong>${a['transcode_audio_codec']} (${a['transcode_audio_channels']}ch)</strong>
-                        % elif a['audio_decision'] == 'direct play':
-                        Audio: <strong>${a['audio_codec']} (${a['audio_channels']}ch)</strong>
-                        % endif
-                        % elif a['type'] == 'episode' or a['type'] == 'movie' or a['type'] == 'clip':
-                        % if a['video_decision'] == 'direct play':
-                        Stream: <strong>Direct Play</strong>
-                        % else:
-                        Stream: <strong>Transcoding</strong>
-                        % endif
-                        <br/>
-                        % if a['video_decision'] != 'direct play':
-                        Video: <strong>${a['video_decision']} (${a['transcode_video_codec']})
-                        (${a['transcode_width']}x${a['transcode_height']})</strong>
-                        % elif a['audio_decision'] == 'direct play':
-                        Video: <strong>${a['video_decision']} (${a['video_codec']})
-                        (${a['width']}x${a['height']})</strong>
-                        % endif
-                        <br/>
-                        % if a['audio_decision'] != 'direct play':
-                        Audio: <strong>${a['audio_decision']} ${a['transcode_audio_codec']} (${a['transcode_audio_channels']}ch)</strong>
-                        % elif a['audio_decision'] == 'direct play':
-                        Audio: <strong>${a['audio_codec']} (${a['audio_channels']}ch)</strong>
-                        % endif
-                        % endif
-                        <br>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="dashboard-activity-button-info">
-        <button type="button" class="btn btn-activity-info btn-sm" data-toggle="collapse" data-target="#stream-${a['session_key']}">
-            <i class='fa fa-info-circle'></i>
-        </button>
-    </div>
 </div>
-<script>
-    $("#platform-${a['session_key']}").html("<img src='" + getPlatformImagePath('${a['platform']}') + "'>");
-</script>
+</div>
 
 % endfor
 <script>
     // When using bif indexes make the image transition a little smoother.
-    function fadeIn(obj) {
-        $(obj).fadeIn(450);
-    }
+    $('.bif').each(function() {
+        $(this).hide().fadeIn(1000);
+    });
+
     // Convert timestamps to readable times
     $('.progress_time').each(function(index) {
         $(this).html(millisecondsToMinutes($(this).text(), false));
     });
 
-    // Hide the info bar on page load
-    $('.dashboard-activity-poster-info-bar').hide();
-
-    // When mouse over the activity pane, show an info bar with extra info.
-    $('.dashboard-activity-poster-face').mouseenter(function() {
-        $('.dashboard-activity-poster-info-bar', this).slideDown('fast');
-    });
-    $('.dashboard-activity-poster-face').mouseleave(function() {
-        $('.dashboard-activity-poster-info-bar', this).slideUp('fast');
+    // Show/Hide activity info
+    $('.btn-activity-info').on('click', function(e) {
+        e.preventDefault();
+        $($(this).attr('data-target')).toggle();
     });
 
-    // Tooltips
-    $('.dashboard-activity-metadata-platform').each(function() {
-        $(this).tooltip();
+    // 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:

data/interfaces/default/current_activity_header.html

@@ -15,11 +15,13 @@ DOCUMENTATION :: END
 </%doc>
 
 % if data != None:
-% if data == '0':
-<h3>Activity</h3>
-% else:
-<h3>Activity <small>${data} stream(s)</small></h3>
-% endif
+	% 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</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,38 +50,62 @@ 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">
+                    <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 user. This is permanent!</p>
+                </div>
+                % endif
             </fieldset>
         </div>
         <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>
+</div>
+<div id="confirm-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal">
+    <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 user?</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>
-    // 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")) {
@@ -82,36 +115,64 @@ 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},
+            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) {
-                    $("#edit-user-status-message").html(data);
-                    if ($.trim(friendly_name) !== '') {
-                        $(".set-username").html(friendly_name);
-                    }
-                    $("#user-profile-thumb").attr('src', thumb);
+                location.reload();
             }
         });
-        % else:
+    });
+
+    $("#delete-all-history").on('click', function() {
+        $('#confirm-modal').modal();
+        $('#confirm-modal').one('click', '#confirm-purge', function () {
             $.ajax({
-                url: 'edit_user',
-                data: {user: '${data['user']}', friendly_name: friendly_name, do_notify: do_notify, keep_history: keep_history, thumb: thumb},
+                url: 'delete_all_user_history',
+                data: { user_id: '${data["user_id"]}' },
                 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);
+                    location.reload();
                 }
             });
-        % endif
+        });
+    });
+        
+    $(document).ready(function() {
+        // Move #confirm-modal to parent container
+        if(!($('#edit-user-modal').next().is('#confirm-modal'))) {
+            $('#confirm-modal').appendTo($('#edit-user-modal').parent());
+        }
+        $('#edit-user-modal > #confirm-modal').remove();
+
+        $('#edit-user-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').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-user-modal').css('overflow-y', 'hidden');
+        });
+        $('#confirm-modal').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').on('hidden.bs.modal', function() {
+            $('body').addClass('modal-open');
+            $('#edit-user-modal').css('overflow-y', 'auto');
+        });
     });
 </script>
-
 % endif

data/interfaces/default/graphs.html

@@ -13,42 +13,56 @@
         </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">
+            % 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 movies and tv played per day. Click a graph point to open up a list of items played for that specific date.
+                                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">
@@ -62,11 +76,12 @@
                         <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 movies and tv played per day of the week.
+                                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 class="graphs-load">
+                                        <i class="fa fa-refresh fa-spin"></i> Loading chart...
                                     </div>
                                     <br>
                                 </div>
@@ -75,11 +90,12 @@
                         <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 movies and tv played per hour of the day.
+                                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 class="graphs-load">
+                                        <i class="fa fa-refresh fa-spin"></i> Loading chart...
                                     </div>
                                     <br>
                                 </div>
@@ -90,11 +106,12 @@
                         <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 movies and tv played by top 10 most active platforms.
+                                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 class="graphs-load">
+                                        <i class="fa fa-refresh fa-spin"></i> Loading chart...
                                     </div>
                                     <br>
                                 </div>
@@ -103,11 +120,12 @@
                         <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 movies and tv played by top 10 most active users.
+                                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 class="graphs-load">
+                                        <i class="fa fa-refresh fa-spin"></i> Loading chart...
                                     </div>
                                     <br>
                                 </div>
@@ -116,12 +134,16 @@
                     </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>
                         <p class="help-block">
-                            The total play count or duration of movies and tv by the transcode decision. Click a graph point to open up a list of items played for that specific date.
+                            The total play count or duration of tv, movies, and music by the transcode decision. 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_stream_type">
@@ -135,7 +157,7 @@
                     <div class="col-md-6">
                         <h4><i class="fa fa-expand"></i> <span class="yaxis-text">Play count</span> by source resolution <small>Last <span class="days">30</span> days</small></h4>
                         <p class="help-block">
-                            The combined total of movies and tv by their original resolution (pre-transcoding).
+                            The combined total of tv and movies by their original resolution (pre-transcoding).
                         </p>
                         <div class="graphs-instance">
                             <div class="watch-chart" id="chart_div_plays_by_source_resolution" style="float: left;">
@@ -148,7 +170,7 @@
                     <div class="col-md-6">
                         <h4><i class="fa fa-expand"></i> <span class="yaxis-text">Play count</span> by stream resolution <small>Last <span class="days">30</span> days</small></h4>
                         <p class="help-block">
-                            The combined total of movies and tv by their streamed resolution (post-transcoding).
+                            The combined total of tv and movies by their streamed resolution (post-transcoding).
                         </p>
                         <div class="graphs-instance">
                             <div class="watch-chart" id="chart_div_plays_by_stream_resolution">
@@ -163,7 +185,7 @@
                     <div class="col-md-6">
                         <h4><i class="fa fa-television"></i> <span class="yaxis-text">Play count</span> by platform and stream type <small>Last <span class="days">30</span> days</small></h4>
                         <p class="help-block">
-                            The combined total of movies and tv by platform and stream type.
+                            The combined total of tv, movies, and music by platform and stream type.
                         </p>
                         <div class="graphs-instance">
                             <div class="watch-chart" id="chart_div_plays_by_platform_by_stream_type" style="float: left;">
@@ -176,7 +198,7 @@
                     <div class="col-md-6">
                         <h4><i class="fa fa-user"></i> <span class="yaxis-text">Play count</span> by user and stream type <small>Last <span class="days">30</span> days</small></h4>
                         <p class="help-block">
-                            The combined total of movies and tv by user and stream type.
+                            The combined total of tv, movies, and music by user and stream type.
                         </p>
                         <div class="graphs-instance">
                             <div class="watch-chart" id="chart_div_plays_by_user_by_stream_type" style="float: left;">
@@ -189,12 +211,16 @@
                 </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>
                         <p class="help-block">
-                            The combined total of movies and tv by month.
+                            The combined total of tv, movies, and music by month.
                         </p>
                         <div class="graphs-instance">
                             <div class="watch-chart" id="chart_div_plays_by_month">
@@ -263,9 +289,14 @@
 <script>
     $(document).ready(function () {
 
-        var current_range = 30;
-        var yaxis = 'plays';
-        var current_tab = '#tabs-1';
+        // Initial values for graph from config
+        var yaxis = "${config['graph_type']}";
+        var current_range = ${config['graph_days']};
+        var current_tab = "${'#' + config['graph_tab']}";
+        
+        $('.days').html(current_range);
+
+        var music_visible = (${config['music_logging_enable']} == 1 ? true : false);
 
         function loadGraphsTab1(time_range, yaxis) {
             setGraphFormat(yaxis);
@@ -292,6 +323,7 @@
                     hc_plays_by_day_options.yAxis.min = 0;
                     hc_plays_by_day_options.xAxis.categories = dateArray;
                     hc_plays_by_day_options.series = data.series;
+                    hc_plays_by_day_options.series[2].visible = music_visible;
                     var hc_plays_by_day = new Highcharts.Chart(hc_plays_by_day_options);
                 }
             });
@@ -304,6 +336,7 @@
                 success: function(data) {
                     hc_plays_by_dayofweek_options.xAxis.categories = data.categories;
                     hc_plays_by_dayofweek_options.series = data.series;
+                    hc_plays_by_dayofweek_options.series[2].visible = music_visible;
                     var hc_plays_by_dayofweek = new Highcharts.Chart(hc_plays_by_dayofweek_options);
                 }
             });
@@ -316,6 +349,7 @@
                 success: function(data) {
                     hc_plays_by_hourofday_options.xAxis.categories = data.categories;
                     hc_plays_by_hourofday_options.series = data.series;
+                    hc_plays_by_hourofday_options.series[2].visible = music_visible;
                     var hc_plays_by_hourofday = new Highcharts.Chart(hc_plays_by_hourofday_options);
                 }
             });
@@ -328,6 +362,7 @@
                 success: function(data) {
                     hc_plays_by_platform_options.xAxis.categories = data.categories;
                     hc_plays_by_platform_options.series = data.series;
+                    hc_plays_by_platform_options.series[2].visible = music_visible;
                     var hc_plays_by_platform = new Highcharts.Chart(hc_plays_by_platform_options);
                 }
             });
@@ -340,6 +375,7 @@
                 success: function(data) {
                     hc_plays_by_user_options.xAxis.categories = data.categories;
                     hc_plays_by_user_options.series = data.series;
+                    hc_plays_by_user_options.series[2].visible = music_visible;
                     var hc_plays_by_user = new Highcharts.Chart(hc_plays_by_user_options);
                 }
             });
@@ -432,53 +468,71 @@
                 data: { y_axis: yaxis },
                 dataType: "json",
                 success: function(data) {
-                    var dateArray = [];
-                    for (var i = 0; i < data.categories.length; i++) {
-                        dateArray.push(moment(data.categories[i], 'YYYY-MM').format('MMM YYYY'));
-                    }
                     hc_plays_by_month_options.yAxis.min = 0;
-                    hc_plays_by_month_options.xAxis.categories = dateArray;
+                    hc_plays_by_month_options.xAxis.categories = data.categories;
                     hc_plays_by_month_options.series = data.series;
+                    hc_plays_by_month_options.series[2].visible = music_visible;
                     var hc_plays_by_month = new Highcharts.Chart(hc_plays_by_month_options);
                 }
             });
         }
 
         // 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
@@ -487,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

@@ -13,23 +13,30 @@
         <div class="header-bar">
             <span><i class="fa fa-history"></i> History</span>
         </div>
-        <div class="colvis-button-bar hidden-xs">
+        <div class="button-bar">
+            <div class="colvis-button-bar hidden-xs"></div>
+            <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode">
+                <i class="fa fa-trash-o"></i> Delete mode
+            </button>
+            <div class="alert alert-danger alert-edit" role="alert" id="row-edit-mode-alert"><i class="fa fa-exclamation-triangle"></i>&nbspSelect rows to delete. Data is deleted upon exiting delete mode.</div>
         </div>
     </div>
     <div class='table-card-back'>
         <table class="display" id="history_table" width="100%">
             <thead>
             <tr>
-                <th align='left' id="time">Time</th>
-                <th align='left' id="friendly_name">User</th>
-                <th align='left' id="platform">Platform</th>
-                <th align='left' id="ip_address">IP Address</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">Watched</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>
@@ -39,6 +46,24 @@
         </div>
         <div class="modal fade" id="ip-info-modal" tabindex="-1" role="dialog" aria-labelledby="ip-info-modal">
         </div>
+        <div class="modal fade" id="confirm-modal" tabindex="-1" role="dialog" aria-labelledby="confirm-modal">
+            <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 Delete</h4>
+                    </div>
+                    <div class="modal-body" style="text-align: center;">
+                        <p>Are you REALLY sure you want to delete <strong><span id="deleteCount"></span></strong> history item(s)?</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-delete">Delete</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 </%def>
@@ -51,18 +76,87 @@
 <script src="interfaces/default/js/moment-with-locale.js"></script>
 <script src="interfaces/default/js/tables/history_table.js"></script>
 <script>
-    $(document).ready(function() {
+    $(document).ready(function () {
+        function loadHistoryTable(media_type) {
             history_table_options.ajax = {
-            "url": "get_history",
-            type: "post",
-            data: function ( d ) {
-                return { 'json_data': JSON.stringify( d ) };
+                url: 'get_history',
+                type: 'post',
+                data: function (d) {
+                    return {
+                        json_data: JSON.stringify(d),
+                        media_type: media_type
+                    };
                 }
             }
             history_table = $('#history_table').DataTable(history_table_options);
-        var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' });
+            var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark', exclude: [0, 11] });
             $(colvis.button()).appendTo('div.colvis-button-bar');
+
+            clearSearchButton('history_table', history_table);
+
+            $('#history_table_filter').prepend('<div class="btn-group" data-toggle="buttons" id="media_type-selection" style="padding-right: 15px;"> \
+                <label class="btn btn-dark active"> \
+                    <input type="radio" name="media_type-filter" id="history-all" value="all" autocomplete="off"> All \
+                </label> \
+                <label class="btn btn-dark"> \
+                    <input type="radio" name="media_type-filter" id="history-movies" value="movie" autocomplete="off"> Movies \
+                </label> \
+                <label class="btn btn-dark"> \
+                    <input type="radio" name="media_type-filter" id="history-tv_shows" value="episode" autocomplete="off"> TV Shows \
+                </label> \
+                <label class="btn btn-dark"> \
+                    <input type="radio" name="media_type-filter" id="history-music" value="track" autocomplete="off"> Music \
+                </label> \
+            </div>');
+
+            $('#media_type-selection').on('change', function () {
+                $('#media_type-selection > label').removeClass('active');
+                selected_filter = $('input[name=media_type-filter]:checked', '#media_type-selection');
+                $(selected_filter).closest('label').addClass('active');
+                media_type = $(selected_filter).val();
+                history_table.draw();
+            });
+        }
+
+        var media_type = 'all';
+        loadHistoryTable(media_type);
+
+        $('#row-edit-mode').on('click', function() {
+            $('#row-edit-mode-alert').fadeIn(200);
+
+            if ($(this).hasClass('active')) {
+                if (history_to_delete.length > 0) {
+                    $('#deleteCount').text(history_to_delete.length);
+                    $('#confirm-modal').modal();
+                    $('#confirm-modal').one('click', '#confirm-delete', function () {
+                        for (var i = 0; i < history_to_delete.length; i++) {
+                            $.ajax({
+                                url: 'delete_history_rows',
+                                data: { row_id: history_to_delete[i] },
+                                async: true,
+                                success: function (data) {
+                                    var msg = "History deleted";
+                                    showMsg(msg, false, true, 2000);
+                                }
+                            });
+                        }
+                        history_table.draw();
+                    });
+                }
+
+                $('.delete-control').each(function () {
+                    $(this).addClass('hidden');
+                    $('#row-edit-mode-alert').fadeOut(200);
                 });
 
+            } else {
+                history_to_delete = [];
+                $('.delete-control').each(function() {
+                    $(this).find('button.btn-danger').toggleClass('btn-warning').toggleClass('btn-danger');
+                    $(this).removeClass('hidden');
+                });
+            }
+        });
+    });
 </script>
 </%def>

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="platform">Platform</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>
@@ -27,22 +27,53 @@
         <div class="modal-footer"></div>
     </div>
 </div>
-
+<div class="modal fade" id="info-modal" tabindex="-1" role="dialog" aria-labelledby="info-modal">
+</div>
 <script src="interfaces/default/js/tables/history_table_modal.js"></script>
 <script>
     $(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 ),
-                         'start_date': '${data}'
+                return {
+                    json_data: JSON.stringify(d),
+                    grouping: false,
+                    start_date: '${data}'
                 };
             }
         }
 
         history_table = $('#history_table').DataTable(history_table_modal_options);
+        
+        clearSearchButton('history_table', history_table);
+
+        // Move #info-modal to parent container
+        if (!($('#history-modal').next().is('#info-modal'))) {
+            $('#info-modal').appendTo($('#history-modal').parent());
+        }
+        $('#history-modal > #info-modal').remove();
+
+        $('#history-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');
+
+        $('#info-modal').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);
+            $('#history-modal').css('overflow-y', 'hidden');
+            setTimeout(function () {
+                $('#info-modal').css('z-index', '1060');
+                $('.modal-backdrop').not('.modal-backdrop-stack').css('z-index', '1059');
+                $('.modal-backdrop').not('.modal-backdrop-stack').addClass('modal-backdrop-stack');
+            }, 0);
+        });
+        $('#info-modal').on('hidden.bs.modal', function () {
+            $('body').addClass('modal-open');
+            $('#history-modal').css('overflow-y', 'auto');
+        });
     });
 </script>
 % else:

data/interfaces/default/home_stats.html

@@ -9,177 +9,866 @@ Variable names:     data [array]
 
 data[array_index] :: Usable parameters
 
-data['stat_id']     Returns the name of the stat. Either 'top_tv', 'popular_tv', 'top_user' or 'top_platform'
+data['stat_id']     Returns the name of the stat. Either 'top_tv', 'top_movies', 'popular_tv', 'popular_movies', 'top_user' or 'top_platform'
+data['stat_type']   Returns the type of the stat. Either 'total_plays' or 'total_duration'
 data['rows']        Returns an array containing stat data
 
 data[array_index]['rows'] :: Usable parameters
 
 row_id                  Return the db row id for a metadata item if one exists
 
-== Only if 'stat_id' is 'top_tv' or 'popular_tv' ==
+== Only if 'stat_id' is 'top_tv' or 'popular_tv' or 'top_movies' or 'popular_movies' or 'top_music' or 'popular_music' or 'last_watched' ==
+thumb                   Return the thumb for the media item.
+
+== Only if 'stat_id' is 'top_tv' or 'popular_tv' or 'top_music' or 'popular_music' ==
 grandparent_thumb       Returns location of the item's thumbnail. Use with pms_image_proxy.
 rating_key              Returns the unique identifier for the media item.
 title                   Returns the title for the associated stat.
 
-== Only if 'stat_id' is 'top_tv' or 'top_user' or 'top_platform' ==
+== Only if 'stat_id' is 'top_tv' or 'top_movies' or 'top_music' or 'top_user' or 'top_platform' ==
 total_plays             Returns the count for the associated stat.
+total_duration          Returns the total duration for the associated stat.
 
-== Only of 'stat_id' is 'popular_tv' ==
+== Only of 'stat_id' is 'popular_tv' or 'popular_movies' or 'popular_music' ==
 users_watched           Returns the count for the associated stat.
 
-== Only if 'stat_id' is 'top_user' ==
-thumb                   Returns url of the user's gravatar. Returns '' if none exists.
+== Only if 'stat_id' is 'top_user' or 'last_watched' ==
+user_thumb              Returns url of the user's gravatar. Returns '' if none exists.
 user                    Returns the username for the associated stat.
 user_id                 Returns the user id for the associated stat.
 friendly_name           Returns the friendly name of the user for the associated stat.
 
-== Only if 'stat_id' is 'top_platform' ==
-platform_type           Returns the platform name for the associated stat.
+== Only if 'stat_id' is 'top_platform' or 'last_watched' ==
+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>
 
+<%!
+    from plexpy import helpers
+
+    # Human readable duration
+    def hd(seconds):
+        minutes = helpers.cast_to_float(seconds) / 60
+        if minutes > 60:
+            hours = int(minutes / 60)
+            minutes = int(minutes % 60)
+            if minutes > 0:
+                return "<h3>" + str(hours) + "</h3><p>hrs</p><h3>" + str(minutes) + "</h3><p>mins</p>"
+            else:
+                return "<h3>" + str(hours) + "</h3><p>hrs</p>"
+        else:
+            return "<h3>" + str(int(minutes)) + "</h3><p>mins</p>"
+%>
+
 % if data:
-% if data[0]['rows'] or data[2]['rows']:
 <ul class="list-unstyled">
-    % for a in data:
-    % if a['stat_id'] == 'top_tv' and a['rows']:
+    % 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">
         <li>
-            <span>
-                <a href="info?item_id=${a['rows'][0]['rating_key']}">
-                    % if a['rows'][0]['grandparent_thumb']:
-                    <img class="home-platforms-instance-poster"
-                         src="pms_image_proxy?img=${a['rows'][0]['grandparent_thumb']}&width=162&height=240&fallback=poster">
-                    % else:
-                    <img class="home-platforms-instance-poster" src="interfaces/default/images/poster.png">
-                    % endif
-                </a>
-            </span>
+            <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">
                     <h4>Most Watched TV</h4>
-                <h5><a href="info?item_id=${a['rows'][0]['rating_key']}">
-                    ${a['rows'][0]['title']}
-                </a></h5>
                 </div>
-            <div class="user-platforms-instance-playcount">
-                <h3>${a['rows'][0]['total_plays']}</h3>
+                <div class="home-platforms-instance-playcount">
+                    <h4>
+                        <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+                            ${top_stat['rows'][0]['title']}
+                        </a>
+                    </h4>
+                    % if top_stat['stat_type'] == 'total_plays':
+                    <h3>${top_stat['rows'][0]['total_plays']}</h3>
                     <p> plays</p>
-            </div>
-        </li>
-    </div>
-    % elif a['stat_id'] == 'popular_tv' and a['rows']:
-    <div class="home-platforms-instance">
-        <li>
-            <span>
-                <a href="info?item_id=${a['rows'][0]['rating_key']}">
-                    % if a['rows'][0]['grandparent_thumb'] != '':
-                    <img class="home-platforms-instance-poster"
-                         src="pms_image_proxy?img=${a['rows'][0]['grandparent_thumb']}&width=162&height=240&fallback=poster">
                     % else:
-                    <img class="home-platforms-instance-poster" src="interfaces/default/images/poster.png">
+                    ${top_stat['rows'][0]['total_duration'] | hd}
+                    % endif
+                </div>
+            </div>
+            <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>
+                </div>
+                % else:
+                <div class="home-platforms-instance-poster">
+                    <div class="home-platforms-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                </div>
                 % endif
             </a>
-            </span>
-            <div class="home-platforms-instance-name">
-                <h4>Most Popular TV</h4>
-                <h5><a href="info?item_id=${a['rows'][0]['rating_key']}">
-                    ${a['rows'][0]['title']}
-                </a></h5>
-            </div>
-            <div class="user-platforms-instance-playcount">
-                <h3>${a['rows'][0]['users_watched']}</h3>
-                <p> users</p>
-            </div>
-        </li>
-    </div>
-    % elif a['stat_id'] == 'top_movies' and a['rows']:
-    <div class="home-platforms-instance">
+            % 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>
-            <span>
-                <a href="info?item_id=${a['rows'][0]['rating_key']}">
-                    % if a['rows'][0]['thumb']:
-                    <img class="home-platforms-instance-poster"
-                         src="pms_image_proxy?img=${a['rows'][0]['thumb']}&width=162&height=240&fallback=poster">
-                    % else:
-                    <img class="home-platforms-instance-poster" src="interfaces/default/images/poster.png">
-                    % endif
-                </a>
-            </span>
-            <div class="home-platforms-instance-name">
-                <h4>Most Watched Movie</h4>
-                <h5><a href="info?item_id=${a['rows'][0]['rating_key']}">
-                    ${a['rows'][0]['title']}
-                </a></h5>
-            </div>
-            <div class="user-platforms-instance-playcount">
-                <h3>${a['rows'][0]['total_plays']}</h3>
-                <p> plays</p>
-            </div>
-        </li>
-    </div>
-    % elif a['stat_id'] == 'top_users' and a['rows']:
-    <div class="home-platforms-instance">
-        <li>
-            <span>
-                % if a['rows'][0]['user_id']:
-                <a href="user?user_id=${a['rows'][0]['user_id']}">
-                    % else:
-                    <a href="user?user=${a['rows'][0]['user']}">
-                        % endif
-                        % if a['rows'][0]['thumb'] != '':
-                        <img class="home-platforms-instance-oval" src="${a['rows'][0]['thumb']}"
-                             class="poster-face">
-                        % else:
-                        <img class="home-platforms-instance-oval"
-                             src="interfaces/default/images/gravatar-default.png">
-                        % endif
-                    </a>
-            </span>
-            <div class="home-platforms-instance-name">
-                <h4>Most Active User</h4>
+                            <div class="home-platforms-instance-list-info">
+                                <div class="home-platforms-instance-list-name">
                                     <h5>
-                    % if a['rows'][0]['user_id']:
-                    <a href="user?user_id=${a['rows'][0]['user_id']}">
-                    % else:
-                    <a href="user?user=${a['rows'][0]['user']}">
-                        % endif
-                        ${a['rows'][0]['friendly_name']}
+                                        <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>
                                 </div>
-            <div class="user-platforms-instance-playcount">
-                <h3>${a['rows'][0]['total_plays']}</h3>
+                                <div class="home-platforms-instance-list-playcount">
+                                    % if top_stat['stat_type'] == 'total_plays':
+                                    <h3>${top_stat['rows'][loop.index]['total_plays']}</h3>
                                     <p> plays</p>
+                                    % else:
+                                    ${top_stat['rows'][loop.index]['total_duration'] | hd}
+                                    % endif
+                                </div>
+                            </div>
+                            <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>
+                            </div>
+                            % else:
+                            <div class="home-platforms-instance-poster2">
+                                <div class="home-platforms-list-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                            </div>
+                            % endif
+                            </a>
+                            <div class="home-platforms-instance-list-number">
+                                <h4>${loop.index + 1}</h4>
                             </div>
                         </li>
-    </div>
-    % elif a['stat_id'] == 'top_platforms' and a['rows']:
-    <div class="home-platforms-instance">
-        <li>
-            <div id="platform-stat">
-                <img class="home-platforms-instance-box" src="interfaces/default/images/platforms/default.png">
-            </div>
-            <div class="home-platforms-instance-name">
-                <h4>Most Active Platform</h4>
-                <h5>${a['rows'][0]['platform_type']}</h5>
-            </div>
-            <div class="user-platforms-instance-playcount">
-                <h3>${a['rows'][0]['total_plays']}</h3>
-                <p> plays</p>
-            </div>
-        </li>
-    </div>
-    <script>
-        $("#platform-stat").html("<img class='home-platforms-instance-box' src='" + getPlatformImagePath('${a['rows'][0]['platform_type']}') + "'>");
-    </script>
                         % endif
                         % endfor
+                    </div>
+                </div>
+            </ul>
+            % endif
+        </li>
+    </div>
+    % elif top_stat['stat_id'] == 'popular_tv' and top_stat['rows']:
+    <div class="home-platforms-instance">
+        <li>
+            <div class="home-platforms-instance-info">
+                <div class="home-platforms-instance-name">
+                    <h4>Most Popular TV</h4>
+                </div>
+                <div class="home-platforms-instance-playcount">
+                    <h4>
+                        <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+                            ${top_stat['rows'][0]['title']}
+                        </a>
+                    </h4>
+                    <h3>${top_stat['rows'][0]['users_watched']}</h3>
+                    <p> users</p>
+                </div>
+            </div>
+            <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>
+                </div>
+                % else:
+                <div class="home-platforms-instance-poster">
+                    <div class="home-platforms-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                </div>
+                % endif
+            </a>
+            % 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>
+                                        <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>
+                                </div>
+                                <div class="home-platforms-instance-list-playcount">
+                                    <h3>${top_stat['rows'][loop.index]['users_watched']}</h3>
+                                    <p> users</p>
+                                </div>
+                            </div>
+                            <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>
+                                </div>
+                                % else:
+                                <div class="home-platforms-instance-poster2">
+                                    <div class="home-platforms-list-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                                </div>
+                                % endif
+                            </a>
+                            <div class="home-platforms-instance-list-number">
+                                <h4>${loop.index + 1}</h4>
+                            </div>
+                        </li>
+                        % endif
+                        % endfor
+                    </div>
+                </div>
+            </ul>
+            % endif
+        </li>
+    </div>
+    % elif top_stat['stat_id'] == 'top_movies' and top_stat['rows']:
+    <div class="home-platforms-instance">
+        <li>
+            <div class="home-platforms-instance-info">
+                <div class="home-platforms-instance-name">
+                    <h4>Most Watched Movie</h4>
+                </div>
+                <div class="home-platforms-instance-playcount">
+                    <h4>
+                        <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+                            ${top_stat['rows'][0]['title']}
+                        </a>
+                    </h4>
+                    % if top_stat['stat_type'] == 'total_plays':
+                    <h3>${top_stat['rows'][0]['total_plays']}</h3>
+                    <p> plays</p>
+                    % else:
+                    ${top_stat['rows'][0]['total_duration'] | hd}
+                    % endif
+                </div>
+            </div>
+            <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>
+                </div>
+                % else:
+                <div class="home-platforms-instance-poster">
+                    <div class="home-platforms-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                </div>
+                % endif
+            </a>
+            % 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>
+                                        <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>
+                                </div>
+                                <div class="home-platforms-instance-list-playcount">
+                                    % if top_stat['stat_type'] == 'total_plays':
+                                    <h3>${top_stat['rows'][loop.index]['total_plays']}</h3>
+                                    <p> plays</p>
+                                    % else:
+                                    ${top_stat['rows'][loop.index]['total_duration'] | hd}
+                                    % endif
+                                </div>
+                            </div>
+                            <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>
+                                </div>
+                                % else:
+                                <div class="home-platforms-instance-poster2">
+                                    <div class="home-platforms-list-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                                </div>
+                                % endif
+                            </a>
+                            <div class="home-platforms-instance-list-number">
+                                <h4>${loop.index + 1}</h4>
+                            </div>
+                        </li>
+                        % endif
+                        % endfor
+                    </div>
+                </div>
+            </ul>
+            % endif
+        </li>
+    </div>
+    % elif top_stat['stat_id'] == 'popular_movies' and top_stat['rows']:
+    <div class="home-platforms-instance">
+        <li>
+            <div class="home-platforms-instance-info">
+                <div class="home-platforms-instance-name">
+                    <h4>Most Popular Movie</h4>
+                </div>
+                <div class="home-platforms-instance-playcount">
+                    <h4>
+                        <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+                            ${top_stat['rows'][0]['title']}
+                        </a>
+                    </h4>
+                    <h3>${top_stat['rows'][0]['users_watched']}</h3>
+                    <p> users</p>
+                </div>
+            </div>
+            <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>
+                </div>
+                % else:
+                <div class="home-platforms-instance-poster">
+                    <div class="home-platforms-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                </div>
+                % endif
+            </a>
+            % 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>
+                                        <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>
+                                </div>
+                                <div class="home-platforms-instance-list-playcount">
+                                    <h3>${top_stat['rows'][loop.index]['users_watched']}</h3>
+                                    <p> users</p>
+                                </div>
+                            </div>
+                            <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>
+                                </div>
+                                % else:
+                                <div class="home-platforms-instance-poster2">
+                                    <div class="home-platforms-list-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                                </div>
+                                % endif
+                            </a>
+                            <div class="home-platforms-instance-list-number">
+                                <h4>${loop.index + 1}</h4>
+                            </div>
+                        </li>
+                        % endif
+                        % endfor
+                    </div>
+                </div>
+            </ul>
+            % endif
+        </li>
+    </div>
+    % elif top_stat['stat_id'] == 'top_music' and top_stat['rows']:
+    <div class="home-platforms-instance">
+        <li>
+            <div class="home-platforms-instance-info">
+                <div class="home-platforms-instance-name">
+                    <h4>Most Listened to Artist</h4>
+                </div>
+                <div class="home-platforms-instance-playcount">
+                    <h4>
+                        <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+                            ${top_stat['rows'][0]['title']}
+                        </a>
+                    </h4>
+                    % if top_stat['stat_type'] == 'total_plays':
+                    <h3>${top_stat['rows'][0]['total_plays']}</h3>
+                    <p> plays</p>
+                    % else:
+                    ${top_stat['rows'][0]['total_duration'] | hd}
+                    % endif
+                </div>
+            </div>
+            <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>
+                </div>
+                % else:
+                <div class="home-platforms-instance-poster">
+                    <div class="home-platforms-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                </div>
+                % endif
+            </a>
+            % 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>
+                                        <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>
+                                </div>
+                                <div class="home-platforms-instance-list-playcount">
+                                    % if top_stat['stat_type'] == 'total_plays':
+                                    <h3>${top_stat['rows'][loop.index]['total_plays']}</h3>
+                                    <p> plays</p>
+                                    % else:
+                                    ${top_stat['rows'][loop.index]['total_duration'] | hd}
+                                    % endif
+                                </div>
+                            </div>
+                            <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>
+                                </div>
+                                % else:
+                                <div class="home-platforms-instance-poster2">
+                                    <div class="home-platforms-list-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                                </div>
+                                % endif
+                            </a>
+                            <div class="home-platforms-instance-list-number">
+                                <h4>${loop.index + 1}</h4>
+                            </div>
+                        </li>
+                        % endif
+                        % endfor
+                    </div>
+                </div>
+            </ul>
+            % endif
+        </li>
+    </div>
+    % elif top_stat['stat_id'] == 'popular_music' and top_stat['rows']:
+    <div class="home-platforms-instance">
+        <li>
+            <div class="home-platforms-instance-info">
+                <div class="home-platforms-instance-name">
+                    <h4>Most Popular Artist</h4>
+                </div>
+                <div class="home-platforms-instance-playcount">
+                    <h4>
+                        <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
+                            ${top_stat['rows'][0]['title']}
+                        </a>
+                    </h4>
+                    <h3>${top_stat['rows'][0]['users_watched']}</h3>
+                    <p> users</p>
+                </div>
+            </div>
+            <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>
+                </div>
+                % else:
+                <div class="home-platforms-instance-poster">
+                    <div class="home-platforms-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                </div>
+                % endif
+            </a>
+            % 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>
+                                        <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>
+                                </div>
+                                <div class="home-platforms-instance-list-playcount">
+                                    <h3>${top_stat['rows'][loop.index]['users_watched']}</h3>
+                                    <p> users</p>
+                                </div>
+                            </div>
+                            <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>
+                                </div>
+                                % else:
+                                <div class="home-platforms-instance-poster2">
+                                    <div class="home-platforms-list-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                                </div>
+                                % endif
+                            </a>
+                            <div class="home-platforms-instance-list-number">
+                                <h4>${loop.index + 1}</h4>
+                            </div>
+                        </li>
+                        % endif
+                        % endfor
+                    </div>
+                </div>
+            </ul>
+            % endif
+        </li>
+    </div>
+    % elif top_stat['stat_id'] == 'top_users' and top_stat['rows']:
+    <div class="home-platforms-instance">
+        <li>
+            <div class="home-platforms-instance-info">
+                <div class="home-platforms-instance-name">
+                    <h4>Most Active User</h4>
+                </div>
+                <div class="home-platforms-instance-playcount">
+                    <h4>
+                        % if top_stat['rows'][0]['user_id']:
+                        <a href="user?user_id=${top_stat['rows'][0]['user_id']}" title="${top_stat['rows'][0]['friendly_name']}">
+                        % else:
+                        <a href="user?user=${top_stat['rows'][0]['user']}" title="${top_stat['rows'][0]['friendly_name']}">
+                        % endif
+                            ${top_stat['rows'][0]['friendly_name']}
+                        </a>
+                    </h4>
+                    % if top_stat['stat_type'] == 'total_plays':
+                    <h3>${top_stat['rows'][0]['total_plays']}</h3>
+                    <p> plays</p>
+                    % else:
+                    ${top_stat['rows'][0]['total_duration'] | hd}
+                    % endif
+                </div>
+            </div>
+            % if top_stat['rows'][0]['user_id']:
+            <a href="user?user_id=${top_stat['rows'][0]['user_id']}" title="${top_stat['rows'][0]['friendly_name']}">
+            % else:
+            <a href="user?user=${top_stat['rows'][0]['user']}" title="${top_stat['rows'][0]['friendly_name']}">
+            % endif
+                % if top_stat['rows'][0]['user_thumb'] != '':
+                <div class="home-platforms-instance-poster">
+                    <div class="home-platforms-instance-oval" style="background-image: url(${top_stat['rows'][0]['user_thumb']});"></div>
+                </div>
+                % else:
+                <div class="home-platforms-instance-poster">
+                    <div class="home-platforms-instance-oval" style="background-image: url(interfaces/default/images/gravatar-default.png);"></div>
+                </div>
+                % endif
+            </a>
+            % 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>
+                                        % if top_stat['rows'][loop.index]['user_id']:
+                                        <a href="user?user_id=${top_stat['rows'][loop.index]['user_id']}" title="${top_stat['rows'][loop.index]['friendly_name']}">
+                                        % else:
+                                        <a href="user?user=${top_stat['rows'][loop.index]['user']}" title="${top_stat['rows'][loop.index]['friendly_name']}">
+                                        % endif
+                                            ${top_stat['rows'][loop.index]['friendly_name']}
+                                        </a>
+                                    </h5>
+                                </div>
+                                <div class="home-platforms-instance-list-playcount">
+                                    % if top_stat['stat_type'] == 'total_plays':
+                                    <h3>${top_stat['rows'][loop.index]['total_plays']}</h3>
+                                    <p> plays</p>
+                                    % else:
+                                    ${top_stat['rows'][loop.index]['total_duration'] | hd}
+                                    % endif
+                                </div>
+                            </div>
+                            % if top_stat['rows'][loop.index]['user_id']:
+                            <a href="user?user_id=${top_stat['rows'][loop.index]['user_id']}" title="${top_stat['rows'][loop.index]['friendly_name']}">
+                            % else:
+                            <a href="user?user=${top_stat['rows'][loop.index]['user']}" title="${top_stat['rows'][loop.index]['friendly_name']}">
+                            % endif
+                                % if top_stat['rows'][loop.index]['user_thumb'] != '':
+                                <div class="home-platforms-instance-poster">
+                                    <div class="home-platforms-instance-list-oval" style="background-image: url(${top_stat['rows'][loop.index]['user_thumb']});"></div>
+                                </div>
+                                % else:
+                                <div class="home-platforms-instance-poster">
+                                    <div class="home-platforms-instance-list-oval" style="background-image: url(interfaces/default/images/gravatar-default.png);"></div>
+                                </div>
+                                % endif
+                                </a>
+                            <div class="home-platforms-instance-list-number">
+                                <h4>${loop.index + 1}</h4>
+                            </div>
+                        </li>
+                        % endif
+                        % endfor
+                    </div>
+                </div>
+            </ul>
+            % endif
+        </li>
+    </div>
+    % elif top_stat['stat_id'] == 'top_platforms' and top_stat['rows']:
+    <div class="home-platforms-instance">
+        <li>
+            <div class="home-platforms-instance-info">
+                <div class="home-platforms-instance-name">
+                    <h4>Most Active Platform</h4>
+                </div>
+                <div class="home-platforms-instance-playcount">
+                    <h4 title="${top_stat['rows'][0]['platform_type']}">${top_stat['rows'][0]['platform_type']}</h4>
+                    % if top_stat['stat_type'] == 'total_plays':
+                    <h3>${top_stat['rows'][0]['total_plays']}</h3>
+                    <p> plays</p>
+                    % else:
+                    ${top_stat['rows'][0]['total_duration'] | hd}
+                    % endif
+                </div>
+            </div>
+            <div id="platform-stat" class="home-platforms-instance-poster" title="${top_stat['rows'][0]['platform_type']}">
+                <script>
+                    $("#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:
+            <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 title="${top_stat['rows'][loop.index]['platform_type']}">
+                                        ${top_stat['rows'][loop.index]['platform_type']}
+                                    </h5>
+                                </div>
+                                <div class="home-platforms-instance-list-playcount">
+                                    % if top_stat['stat_type'] == 'total_plays':
+                                    <h3>${top_stat['rows'][loop.index]['total_plays']}</h3>
+                                    <p> plays</p>
+                                    % else:
+                                    ${top_stat['rows'][loop.index]['total_duration'] | hd}
+                                    % endif
+                                </div>
+                            </div>
+                            <div class="home-platforms-instance-poster" id="home-platforms-instance-poster-${loop.index + 1}" title="${top_stat['rows'][loop.index]['platform_type']}">
+                                <script>
+                                    $("#home-platforms-instance-poster-${loop.index + 1}").html("<div class='home-platforms-instance-list-box' style='background-image: url(" + getPlatformImagePath('${top_stat['rows'][loop.index]['platform_type']}') + ");'>");
+                                </script>
+                            </div>
+                            <div class="home-platforms-instance-list-number">
+                                <h4>${loop.index + 1}</h4>
+                            </div>
+                        </li>
+                        % endif
+                        % endfor
+                    </div>
+                </div>
+            </ul>
+            % endif
+        </li>
+    </div>
+    % elif top_stat['stat_id'] == 'last_watched' and top_stat['rows']:
+    <div class="home-platforms-instance">
+        <li>
+            <div class="home-platforms-instance-info">
+                <div class="home-platforms-instance-name">
+                    <h4>Last Watched</h4>
+                </div>
+                <div class="home-platforms-instance-last-user">
+                    <h4>
+                        <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>
+                    <h5>
+                        % if top_stat['rows'][0]['user_id']:
+                        <a href="user?user_id=${top_stat['rows'][0]['user_id']}" title="${top_stat['rows'][0]['friendly_name']}">
+                        % else:
+                        <a href="user?user=${top_stat['rows'][0]['user']}" title="${top_stat['rows'][0]['friendly_name']}">
+                        % endif
+                            ${top_stat['rows'][0]['friendly_name']}
+                        </a>
+                    </h5>
+                    <p>
+                        <span id="last-watch-stat">
+                            <script>
+                                $('#last-watch-stat').text(moment(${top_stat['rows'][0]['last_watch']},"X").format(date_format));
+                            </script>
+                        </span> - ${top_stat['rows'][0]['player']}
+                    </p>
+                </div>
+            </div>
+            <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>
+                </div>
+                % else:
+                <div class="home-platforms-instance-poster">
+                    <div class="home-platforms-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                </div>
+                % endif
+            </a>
+            % 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>
+                                        <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>
+                                </div>
+                                <div class="home-platforms-instance-list-last-user">
+                                    <h5>
+                                        % if top_stat['rows'][loop.index]['user_id']:
+                                        <a href="user?user_id=${top_stat['rows'][loop.index]['user_id']}" title="${top_stat['rows'][loop.index]['friendly_name']}">
+                                        % else:
+                                        <a href="user?user=${top_stat['rows'][loop.index]['user']}" title="${top_stat['rows'][loop.index]['friendly_name']}">
+                                        % endif
+                                            ${top_stat['rows'][loop.index]['friendly_name']}
+                                        </a>
+                                    </h5>
+                                    <p>
+                                        <span id="home-platforms-instance-list-last-watch-${loop.index + 1}">
+                                            <script>
+                                                $('#home-platforms-instance-list-last-watch-${loop.index + 1}').text(moment(${top_stat['rows'][loop.index]['last_watch']},"X").format(date_format));
+                                            </script>
+                                        </span> - ${top_stat['rows'][loop.index]['player']}
+                                    </p>
+                                </div>
+                            </div>
+                            <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-list-poster">
+                                    <div class="home-platforms-list-poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
+                                </div>
+                                % endif
+                            </a>
+                            <div class="home-platforms-instance-list-number">
+                                <h4>${loop.index + 1}</h4>
+                            </div>
+                        </li>
+                        % endif
+                        % endfor
+                    </div>
+                </div>
+            </ul>
+            % 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;
+    $('.home-platforms-instance-list-chevron').on('click', function() {
+        var instanceBoxChevron = $(this);
+        var instanceBox = $(this).parents('.home-platforms-instance');
+        var instanceBoxSlider = instanceBox.find('.slider');
+        
+        topZIndex++;
+        instanceBoxChevron.toggleClass('active');
+        instanceBoxSlider.css('z-index', topZIndex);
+        instanceBoxSlider.stop().slideToggle(500);
+    });
+</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