From 8ae2f718f4e90d49ef1eab739071a6a0c266e61c Mon Sep 17 00:00:00 2001 From: Jonathan Wong Date: Mon, 24 Aug 2015 12:13:38 -0700 Subject: [PATCH 01/10] Initial implementation of homepage top lists * Top lists for all stats, default max 5 items --- data/interfaces/default/css/plexpy.css | 291 +++++++++++----- data/interfaces/default/home_stats.html | 420 ++++++++++++++++++++---- data/interfaces/default/index.html | 6 +- plexpy/config.py | 3 +- plexpy/datafactory.py | 17 +- plexpy/webserve.py | 10 +- 6 files changed, 585 insertions(+), 162 deletions(-) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index 587bee7b..38ae1dde 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -1350,40 +1350,27 @@ a .season-episodes-card-overlay:hover { list-style: none; margin: 0; } -.home-platforms-instance-poster { - margin-left: 0px; +.home-platforms-instance { + background-color: #282828; + position: relative; + float: left; + width: 300px; + padding: 10px; + margin-right: 20px; + margin-bottom: 20px; + webkit-box-sizing: content-box; + box-sizing: content-box; + z-index: 0; } -.home-platforms-instance-poster .poster-face { +.home-platforms-instance li { + position: relative; +} +.home-platforms-instance-info { + float: left; + position: relative; + padding-left: 80px; + width: 100%; height: 120px; - width: 80px; -} -.home-platforms-instance-box { - background-size: contain; - position: absolute; - left: 10px; - bottom: 35px; - height: 80px; - width: 80px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); - -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); - box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -} -.home-platforms-instance-oval { - background-size: contain; - position: absolute; - left: 10px; - bottom: 35px; - height: 80px; - width: 80px; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); - -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); - box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); } .home-platforms-instance-name { float: left; @@ -1395,64 +1382,214 @@ a .season-episodes-card-overlay:hover { line-height: 15px; font-weight: bold; width: 100%; - padding: 10px 0 0 10px; + padding: 0 0 0 20px; +} +.home-platforms-instance-name h5 { + font-size: 16px; + margin: 20px 0 2px 0; } .home-platforms-instance-playcount { float: left; - width: 180px; -} -.home-platforms-instance-mediainfo { - float: left; - background-color: #282828; - position: absolute; - bottom: 0; - left: 0; - padding-left: 170px; - width: 100%; - height: 175px; -} -.home-platforms-instance-media { position: relative; - float: left; - width: 375px; - height: 225px; - padding-bottom: 10px; - margin-right: 25px; - margin-bottom: 25px; - webkit-box-sizing: content-box; - box-sizing: content-box; + padding: 6px 0 0 20px; + width: 100%; } -.home-platforms-instance-info { - float: left; - background-color: #282828; - position: absolute; +.home-platforms-instance-playcount h3 { + font-size: 30px; + font-weight: bold; + color: #F9AA03; + line-height: 22px; + position: relative; top: 5px; - left: 0; - padding-left: 100px; - width: 100%; - height: 120px; -} -.home-platforms-instance { - background-color: #282828; - position: relative; + margin: 0 5px 0 0; float: left; - width: 300px; +} +.home-platforms-instance-playcount p { + color: #aaa; + font-size: 12px; + float: left; + position: relative; + top: 14px; + left: 0px; + margin-right: 5px; +} +.home-platforms-instance-poster { + margin-left: 0px; + position: absolute; +} +.home-platforms-instance-poster .home-platforms-poster-face { + background-position: center; + background-size: cover; height: 120px; - padding: 10px; - margin-right: 20px; - margin-bottom: 20px; - webkit-box-sizing: content-box; - box-sizing: content-box; + width: 80px; } -a .home-platforms-instance-oval:hover { +.home-platforms-instance-box { + background-position: center; + background-size: cover; + margin: 20px 0 0 0px; + height: 80px; + width: 80px; + position: relative; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + overflow: hidden; +} +.home-platforms-instance-oval { + background-position: center; + background-size: cover; + margin: 20px 0 0 0px; + height: 80px; + width: 80px; + position: relative; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + overflow: hidden; +} +.home-platforms-instance-list { + float: left; + position: relative; + width: 100%; + padding: 0 10px 20px 10px; +} +.home-platforms-instance-list li { + margin-top: 25px; + position: relative; + height: 60px; +} +.home-platforms-instance-list-number { + background-color: #e9a049; + float: left; + position: absolute; + top: -10px; + left: 10px; + height: 20px; + width: 20px; + display: block; + text-align: center; + padding-top: 1px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; +} +.home-platforms-instance-list-number h4 { + color: #000; + font-size: 15px; + font-weight: bold; + margin: 0; +} +.home-platforms-instance-list-info { + float: left; + position: relative; + padding-left: 75px; + width: 100%; + height: 60px; +} +.home-platforms-instance-list-name { + float: left; + color: #fff; + text-overflow: ellipsis; + overflow: hidden; + position: relative; + font-size: 13px; + line-height: 15px; + font-weight: bold; + width: 100%; + padding: 2px 0 0 10px; +} +.home-platforms-instance-list-name h5 { + margin: 5px 0px; +} +.home-platforms-instance-list-playcount { + float: left; + position: relative; + padding: 4px 0 0 10px; + width: 100%; +} +.home-platforms-instance-list-playcount h3 { + font-size: 20px; + font-weight: bold; + color: #F9AA03; + line-height: 22px; + position: relative; + margin: 0 5px 0 0; + float: left; +} +.home-platforms-instance-list-playcount p { + color: #aaa; + font-size: 12px; + float: left; + position: relative; + top: 5px; + left: 0px; + margin-right: 5px; +} +.home-platforms-instance-list-poster { + position: absolute; + left: 20px; +} +.home-platforms-instance-list-poster .home-platforms-list-poster-face { + background-position: center; + background-size: cover; + height: 60px; + width: 40px; +} +.home-platforms-instance-list-box { + background-position: center; + background-size: cover; + margin: 10px 0 0 20px; + height: 40px; + width: 40px; + position: relative; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + overflow: hidden; +} +.home-platforms-instance-list-oval { + background-position: center; + background-size: cover; + margin: 10px 0 0 20px; + height: 40px; + width: 40px; + position: relative; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + overflow: hidden; +} +a .home-platforms-instance-box:hover, +a .home-platforms-instance-oval:hover, +a .home-platforms-instance-list-box:hover, +a .home-platforms-instance-list-oval:hover, +.home-platforms-poster-face:hover, +.home-platforms-list-poster-face:hover + { webkit-box-shadow: inset 0 0 0 2px #e9a049; -moz-box-shadow: inset 0 0 0 2px #e9a049; box-shadow: inset 0 0 0 2px #e9a049; } -a .home-platforms-instance-box:hover { - webkit-box-shadow: inset 0 0 0 2px #e9a049; - -moz-box-shadow: inset 0 0 0 2px #e9a049; - box-shadow: inset 0 0 0 2px #e9a049; +.home-platforms-instance .slider { + background-color: #282828; + width: 320px; + display: none; + position: absolute; + top: 130px; + left: -10px; + z-index: 2; } .history-table-title { text-overflow: ellipsis; diff --git a/data/interfaces/default/home_stats.html b/data/interfaces/default/home_stats.html index 2a05ca34..c6a99149 100644 --- a/data/interfaces/default/home_stats.html +++ b/data/interfaces/default/home_stats.html @@ -48,7 +48,7 @@ DOCUMENTATION :: END def hd(minutes): if int(minutes) > 60: hours = int(helpers.cast_to_float(minutes) / 60) - minutes = int(helpers.cast_to_float(minutes) % hours) + minutes = int(helpers.cast_to_float(minutes) % 60 ) if minutes > 0: return "

" + str(hours) + "

hrs

" + str(minutes) + "

mins

" else: @@ -58,199 +58,479 @@ DOCUMENTATION :: END %> % if data: -% if data[0]['rows'] or data[2]['rows']: +% if data[0]['rows'] or data[1]['rows'] or data[2]['rows'] or data[3]['rows'] or data[4]['rows'] or data[5]['rows']: + % else:
No stats for selected period.

% endif diff --git a/data/interfaces/default/index.html b/data/interfaces/default/index.html index 9e221a9d..8a31845c 100644 --- a/data/interfaces/default/index.html +++ b/data/interfaces/default/index.html @@ -45,12 +45,12 @@ diff --git a/plexpy/config.py b/plexpy/config.py index 5fe59e29..51145685 100644 --- a/plexpy/config.py +++ b/plexpy/config.py @@ -1,4 +1,4 @@ -import plexpy.logger +import plexpy.logger import itertools import os import re @@ -84,6 +84,7 @@ _CONFIG_DEFINITIONS = { 'GROWL_ON_WATCHED': (int, 'Growl', 0), 'HOME_STATS_LENGTH': (int, 'General', 30), 'HOME_STATS_TYPE': (int, 'General', 0), + 'HOME_STATS_COUNT': (int, 'General', 5), 'HTTPS_CERT': (str, 'General', ''), 'HTTPS_KEY': (str, 'General', ''), 'HTTP_HOST': (str, 'General', '0.0.0.0'), diff --git a/plexpy/datafactory.py b/plexpy/datafactory.py index b60c654b..5257f5ae 100644 --- a/plexpy/datafactory.py +++ b/plexpy/datafactory.py @@ -129,7 +129,7 @@ class DataFactory(object): return dict - def get_home_stats(self, time_range='30', stat_type='0'): + def get_home_stats(self, time_range='30', stat_type='0', stat_count='5'): monitor_db = database.MonitorDatabase() if not time_range.isdigit(): @@ -137,6 +137,9 @@ class DataFactory(object): sort_type = 'total_plays' if stat_type == '0' else 'total_duration' + if not time_range.isdigit(): + stat_count = '5' + # This actually determines the output order in the home page stats_queries = ["top_tv", "popular_tv", "top_movies", "popular_movies", "top_users", "top_platforms"] home_stats = [] @@ -161,7 +164,7 @@ class DataFactory(object): '>= datetime("now", "-%s days", "localtime") ' \ 'AND session_history_metadata.media_type = "episode" ' \ 'GROUP BY session_history_metadata.grandparent_title ' \ - 'ORDER BY %s DESC LIMIT 10' % (time_range, sort_type) + 'ORDER BY %s DESC LIMIT %s' % (time_range, sort_type, stat_count) result = monitor_db.select(query) except: logger.warn("Unable to execute database query.") @@ -207,7 +210,7 @@ class DataFactory(object): '>= datetime("now", "-%s days", "localtime") ' \ 'AND session_history_metadata.media_type = "movie" ' \ 'GROUP BY session_history_metadata.full_title ' \ - 'ORDER BY %s DESC LIMIT 10' % (time_range, sort_type) + 'ORDER BY %s DESC LIMIT %s' % (time_range, sort_type, stat_count) result = monitor_db.select(query) except: logger.warn("Unable to execute database query.") @@ -251,7 +254,7 @@ class DataFactory(object): 'AND session_history_metadata.media_type = "episode" ' \ 'GROUP BY session_history_metadata.grandparent_title ' \ 'ORDER BY users_watched DESC, total_plays DESC ' \ - 'LIMIT 10' % time_range + 'LIMIT %s' % (time_range, stat_count) result = monitor_db.select(query) except: logger.warn("Unable to execute database query.") @@ -293,7 +296,7 @@ class DataFactory(object): 'AND session_history_metadata.media_type = "movie" ' \ 'GROUP BY session_history_metadata.full_title ' \ 'ORDER BY users_watched DESC, total_plays DESC ' \ - 'LIMIT 10' % time_range + 'LIMIT %s' % (time_range, stat_count) result = monitor_db.select(query) except: logger.warn("Unable to execute database query.") @@ -338,7 +341,7 @@ class DataFactory(object): 'WHERE datetime(session_history.stopped, "unixepoch", "localtime") >= ' \ 'datetime("now", "-%s days", "localtime") '\ 'GROUP BY session_history.user_id ' \ - 'ORDER BY %s DESC LIMIT 10' % (time_range, sort_type) + 'ORDER BY %s DESC LIMIT %s' % (time_range, sort_type, stat_count) result = monitor_db.select(query) except: logger.warn("Unable to execute database query.") @@ -386,7 +389,7 @@ class DataFactory(object): 'WHERE datetime(session_history.stopped, "unixepoch", "localtime") ' \ '>= datetime("now", "-%s days", "localtime") ' \ 'GROUP BY session_history.platform ' \ - 'ORDER BY total_plays DESC' % time_range + 'ORDER BY total_plays DESC LIMIT %s' % (time_range, stat_count) result = monitor_db.select(query) except: logger.warn("Unable to execute database query.") diff --git a/plexpy/webserve.py b/plexpy/webserve.py index 54fc8d9f..3c0bf770 100644 --- a/plexpy/webserve.py +++ b/plexpy/webserve.py @@ -1,4 +1,4 @@ -# This file is part of PlexPy. +# This file is part of PlexPy. # # PlexPy is free software: you can redistribute it and/or modify # it under the terms of the GNU General Public License as published by @@ -66,7 +66,8 @@ class WebInterface(object): def home(self): config = { "home_stats_length": plexpy.CONFIG.HOME_STATS_LENGTH, - "home_stats_type": plexpy.CONFIG.HOME_STATS_TYPE + "home_stats_type": plexpy.CONFIG.HOME_STATS_TYPE, + "home_stats_count": plexpy.CONFIG.HOME_STATS_COUNT } return serve_template(templatename="index.html", title="Home", config=config) @@ -119,9 +120,9 @@ class WebInterface(object): return json.dumps(formats) @cherrypy.expose - def home_stats(self, time_range='30', stat_type='0', **kwargs): + def home_stats(self, time_range='30', stat_type='0', stat_count='5', **kwargs): data_factory = datafactory.DataFactory() - stats_data = data_factory.get_home_stats(time_range=time_range, stat_type=stat_type) + stats_data = data_factory.get_home_stats(time_range=time_range, stat_type=stat_type, stat_count=stat_count) return serve_template(templatename="home_stats.html", title="Stats", data=stats_data) @@ -453,6 +454,7 @@ class WebInterface(object): "notify_on_watched_body_text": plexpy.CONFIG.NOTIFY_ON_WATCHED_BODY_TEXT, "home_stats_length": plexpy.CONFIG.HOME_STATS_LENGTH, "home_stats_type": checked(plexpy.CONFIG.HOME_STATS_TYPE), + "home_stats_count": checked(plexpy.CONFIG.HOME_STATS_COUNT), "buffer_threshold": plexpy.CONFIG.BUFFER_THRESHOLD, "buffer_wait": plexpy.CONFIG.BUFFER_WAIT } From 58efd299ccba497d21112b69ac1193bbfc033268 Mon Sep 17 00:00:00 2001 From: Jonathan Wong Date: Mon, 24 Aug 2015 15:01:39 -0700 Subject: [PATCH 02/10] Add setting to change the number of items in the top lists --- data/interfaces/default/settings.html | 9 +++++++++ plexpy/webserve.py | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/data/interfaces/default/settings.html b/data/interfaces/default/settings.html index 3145c4ae..16abd1e1 100644 --- a/data/interfaces/default/settings.html +++ b/data/interfaces/default/settings.html @@ -96,6 +96,15 @@ available_notification_agents = notifiers.available_notification_agents()

Specify the number of days for the statistics on the home page. Default is 30 days.

+
+ +
+
+ +
+
+

Specify the number of items to show in the top lists for the statistics on the home page. Max is 10 items.

+
@@ -430,8 +439,9 @@ available_notification_agents = notifiers.available_notification_agents()
- +
+

Set the progress percentage of when a watched notification should be triggered. Minimum 50, Maximum 95.

@@ -561,7 +571,7 @@ available_notification_agents = notifiers.available_notification_agents()

Notification Agents

- Toggle the desired notification options by clicking the bolt icon and configure it by selecting the settings icon to the right. + Toggle the desired notification options by clicking the bell icon and configure it by clicking the settings icon to the right.


% else:
No stats for selected period.

From dd7390d1119162db9c18bca647b18d0ee9e1a3e8 Mon Sep 17 00:00:00 2001 From: Jonathan Wong Date: Wed, 26 Aug 2015 20:17:42 -0700 Subject: [PATCH 07/10] Fix box shadow on slider --- data/interfaces/default/css/plexpy.css | 11 ++++++----- data/interfaces/default/home_stats.html | 1 - 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index ac05a5e2..9283347c 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -1454,7 +1454,7 @@ a .season-episodes-card-overlay:hover { float: left; position: relative; width: 100%; - padding: 0 10px 20px 10px; + padding: 0 10px 25px 10px; } .home-platforms-instance-list li { margin-top: 25px; @@ -1613,12 +1613,13 @@ a .home-platforms-instance-list-oval:hover, width: 320px; display: none; position: absolute; - top: 129px; + top: 128px; left: -10px; - border-right: 1px solid rgba(255,255,255,.1); - border-bottom: 1px solid rgba(255,255,255,.1); - border-left: 1px solid rgba(255,255,255,.1); + webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); z-index: 1; + clip: rect(1px, 324px, 1000px, -2px); } .history-table-title { text-overflow: ellipsis; diff --git a/data/interfaces/default/home_stats.html b/data/interfaces/default/home_stats.html index 4c5f498a..870b2075 100644 --- a/data/interfaces/default/home_stats.html +++ b/data/interfaces/default/home_stats.html @@ -536,7 +536,6 @@ DOCUMENTATION :: END topZIndex++; instanceBoxChevron.toggleClass('active'); - instanceBoxSlider.toggleClass('slider-open'); instanceBoxSlider.css('z-index', topZIndex); instanceBoxSlider.stop().slideToggle(500); }); From dfbf435c77120f335ef8797c4e4cfcb94c232fce Mon Sep 17 00:00:00 2001 From: Jonathan Wong Date: Wed, 26 Aug 2015 20:34:06 -0700 Subject: [PATCH 08/10] Fix clipping on long titles --- data/interfaces/default/css/plexpy.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index 9283347c..57d9bf17 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -1378,9 +1378,16 @@ a .season-episodes-card-overlay:hover { width: 100%; padding: 0 0 0 20px; } +.home-platforms-instance-name h4 { + margin: 10px 0 20px 0; +} .home-platforms-instance-name h5 { - font-size: 16px; - margin: 20px 0 2px 0; + font-size: 14px; + line-height: 16px; + margin: 15px 0 2px 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .home-platforms-instance-playcount { float: left; From f00de8e548066dce6b7cf3f2c3a92fd1f3709b30 Mon Sep 17 00:00:00 2001 From: Jonathan Wong Date: Wed, 26 Aug 2015 20:41:05 -0700 Subject: [PATCH 09/10] Another clipping text fix --- data/interfaces/default/css/plexpy.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index 57d9bf17..25c6b5b3 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -1513,6 +1513,9 @@ a .season-episodes-card-overlay:hover { } .home-platforms-instance-list-name h5 { margin: 5px 0px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .home-platforms-instance-list-playcount { float: left; From b91a4844e07b3b3b648aa34d4df9809f53cecb70 Mon Sep 17 00:00:00 2001 From: Jonathan Wong Date: Wed, 26 Aug 2015 23:45:19 -0700 Subject: [PATCH 10/10] Cleanup dashboard activity styles --- data/interfaces/default/css/plexpy.css | 213 ++++++++++++------ data/interfaces/default/current_activity.html | 40 ++-- 2 files changed, 159 insertions(+), 94 deletions(-) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index 25c6b5b3..97d2b46e 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -80,24 +80,6 @@ img { .padded-header h3 { font-size: 20px; } -.activity-progress { - overflow: hidden; - height: 4px; - background-color: #111; - float: left; - width: 100%; - margin: 0 10px 5px 0; -} -.activity-progress .bar { - background-color: #faa732; - background-image: -moz-linear-gradient(top, #fbb450, #f89406); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); - background-image: -webkit-linear-gradient(top, #fbb450, #f89406); - background-image: -o-linear-gradient(top, #fbb450, #f89406); - background-image: linear-gradient(to bottom, #fbb450, #f89406); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); -} .btn { outline:0px !important; -webkit-appearance:none; @@ -431,20 +413,13 @@ input[type="color"], text-align: center; pointer-events: none; } -.poster { - float: left; - min-height: 225px; - min-width: 150px; - margin-bottom: 8px; - position: relative; -} .poster-face { background-position: center; background-size: cover; height: 225px; width: 150px; position: relative; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; @@ -456,7 +431,7 @@ input[type="color"], width: 150px; position: absolute; bottom: 0; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); } @@ -469,14 +444,14 @@ input[type="color"], -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); } a .poster-face:hover, a .cover-face:hover, a .users-poster-face:hover { - webkit-box-shadow: inset 0 0 0 2px #e9a049; + -webkit-box-shadow: inset 0 0 0 2px #e9a049; -moz-box-shadow: inset 0 0 0 2px #e9a049; box-shadow: inset 0 0 0 2px #e9a049; } @@ -508,19 +483,19 @@ a .users-poster-face:hover { margin-left: 5px; float: left; } -.dashboard-activity-metadata-wrapper { +.dashboard-instance { + padding-bottom: 15px; + float: left; position: relative; - left: 0px; - width: 250px; - font-size: 13px; + margin-right: 27px; } -.dashboard-activity-button-info { - position: absolute; - top: 3px; - left: 5px; - z-index: 1; +.dashboard-poster { + float: left; + min-width: 150px; + margin-bottom: 8px; + position: relative; } -.dashboard-activity-poster-face { +.dashboard-activity-poster { height: 141px; width: 250px; position: relative; @@ -528,21 +503,85 @@ a .users-poster-face:hover { background-color: rgba(255,255,255,.03); margin-bottom: 11px; text-align: center; -} -.dashboard-activity-poster-face img { - bottom: 0; overflow: hidden; - height: 140px; - min-width: 140px; - max-width: 250px; } -.dashboard-activity-poster-music-bg { +.dashboard-activity-poster-face { background-position: center; - position:absolute; - width:100%; - height:100%; - opacity: 0.7; - z-index: -999; + background-size: cover; + height: 140px; + width: 250px; + position: relative; + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + margin-bottom: 11px; + text-align: center; +} +.dashboard-activity-cover-face-bg { + background-position: center; + background-size: cover; + background-repeat: no-repeat; + height: 140px; + width: 250px; + position: relative; + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + margin-bottom: 11px; + text-align: center; + -webkit-filter: blur(5px); + -moz-filter: blur(5px); + filter: blur(5px); + opacity: 0.75; +} +.dashboard-activity-cover-face { + background-position: center; + background-size: cover; + background-repeat: no-repeat; + height: 140px; + width: 140px; + position: relative; + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + margin-bottom: 11px; + text-align: center; + position: absolute; + top: 0; + left: 55px; +} +.dashboard-activity-clip-face-bg { + background-position: center; + background-size: cover; + background-repeat: no-repeat; + height: 140px; + width: 250px; + position: relative; + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + margin-bottom: 11px; + text-align: center; + -webkit-filter: blur(5px); + -moz-filter: blur(5px); + filter: blur(5px); + opacity: 0.75; +} +.dashboard-activity-clip-face { + background-position: center; + background-size: cover; + background-repeat: no-repeat; + height: 140px; + width: 94px; + position: relative; + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + margin-bottom: 11px; + text-align: center; + position: absolute; + top: 0; + left: 78px; } .dashboard-activity-poster-info-bar { position:absolute; @@ -581,6 +620,36 @@ a .users-poster-face:hover { font-size: 12px; color: #eee; } +.dashboard-activity-progress { + overflow: hidden; + height: 4px; + background-color: #111; + float: left; + width: 100%; + margin: 0 10px 5px 0; +} +.dashboard-activity-progress .bar { + background-color: #faa732; + background-image: -moz-linear-gradient(top, #fbb450, #f89406); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); + background-image: -webkit-linear-gradient(top, #fbb450, #f89406); + background-image: -o-linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(to bottom, #fbb450, #f89406); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); +} +.dashboard-activity-button-info { + position: absolute; + top: 3px; + left: 5px; + z-index: 1; +} +.dashboard-activity-metadata-wrapper { + position: relative; + left: 0px; + width: 250px; + font-size: 13px; +} .dashboard-activity-metadata-user { text-overflow: ellipsis; overflow: hidden; @@ -611,7 +680,9 @@ a .users-poster-face:hover { .dashboard-activity-metadata-platform { float: right; } -.dashboard-activity-metadata-platform img { +.dashboard-activity-metadata-platform-box { + background-position: center; + background-size: cover; width: 40px; height: 40px; } @@ -651,12 +722,6 @@ a .users-poster-face:hover { color: #fff; font-weight: normal; } -.instance { - padding-bottom: 15px; - float: left; - position: relative; - margin-right: 27px; -} .dashboard-recent-media-row { width: 100%; margin:0 auto; @@ -1063,7 +1128,7 @@ a .users-poster-face:hover { margin-right: 25px; } a .season-episodes-card-overlay:hover { - webkit-box-shadow: inset 0 0 0 2px #e9a049; + -webkit-box-shadow: inset 0 0 0 2px #e9a049; -moz-box-shadow: inset 0 0 0 2px #e9a049; box-shadow: inset 0 0 0 2px #e9a049; } @@ -1078,7 +1143,7 @@ a .season-episodes-card-overlay:hover { height: 140px; width: 250px; position: relative; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); } @@ -1089,7 +1154,7 @@ a .season-episodes-card-overlay:hover { height: 140px; } .season-episodes-poster-face img:hover { - webkit-box-shadow: 0 0 0 2px #F9AA03; + -webkit-box-shadow: 0 0 0 2px #F9AA03; -moz-box-shadow: 0 0 0 2px #F9AA03; box-shadow: 0 0 0 2px #F9AA03; } @@ -1172,7 +1237,7 @@ a .season-episodes-card-overlay:hover { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); } @@ -1297,7 +1362,7 @@ a .season-episodes-card-overlay:hover { float: left; width: 75px; border-radius: 3px; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); background-size: contain; @@ -1350,9 +1415,9 @@ a .season-episodes-card-overlay:hover { padding: 10px; margin-right: 20px; margin-bottom: 20px; - webkit-box-sizing: content-box; + -webkit-box-sizing: content-box; box-sizing: content-box; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); } @@ -1423,7 +1488,7 @@ a .season-episodes-card-overlay:hover { background-size: cover; height: 120px; width: 80px; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); } @@ -1437,7 +1502,7 @@ a .season-episodes-card-overlay:hover { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; @@ -1452,7 +1517,7 @@ a .season-episodes-card-overlay:hover { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; @@ -1482,7 +1547,7 @@ a .season-episodes-card-overlay:hover { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); } @@ -1550,7 +1615,7 @@ a .season-episodes-card-overlay:hover { background-size: cover; height: 60px; width: 40px; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); } @@ -1564,7 +1629,7 @@ a .season-episodes-card-overlay:hover { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; @@ -1579,7 +1644,7 @@ a .season-episodes-card-overlay:hover { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; @@ -1614,7 +1679,7 @@ a .home-platforms-instance-list-oval:hover, .home-platforms-poster-face:hover, .home-platforms-list-poster-face:hover { - webkit-box-shadow: inset 0 0 0 2px #e9a049; + -webkit-box-shadow: inset 0 0 0 2px #e9a049; -moz-box-shadow: inset 0 0 0 2px #e9a049; box-shadow: inset 0 0 0 2px #e9a049; } @@ -1625,7 +1690,7 @@ a .home-platforms-instance-list-oval:hover, position: absolute; top: 128px; left: -10px; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); z-index: 1; diff --git a/data/interfaces/default/current_activity.html b/data/interfaces/default/current_activity.html index 3bea2b89..ef401039 100644 --- a/data/interfaces/default/current_activity.html +++ b/data/interfaces/default/current_activity.html @@ -61,22 +61,23 @@ DOCUMENTATION :: END % if data is not None: % if data['stream_count'] != '0': % for a in data['sessions']: -
-
-
+
+
+
% if a['type'] == 'movie' and not a['indexes']: - +
% elif a['indexes']: - + % else: - % if a['type'] == 'track': -
- % endif - % if a['type'] == 'clip': - - % else: - - % endif + % if a['type'] == 'track': +
+
+ % elif a['type'] == 'clip': +
+
+ % else: +
+ % endif % endif
@@ -96,7 +97,7 @@ DOCUMENTATION :: END
-
+
${a['progress_percent']}%
@@ -186,7 +187,7 @@ DOCUMENTATION :: END
% endfor @@ -204,11 +205,10 @@ DOCUMENTATION :: END $('.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'); + $('.dashboard-activity-poster').hover(function() { + $('.dashboard-activity-poster-info-bar', this).stop().slideDown('fast'); + }, function() { + $('.dashboard-activity-poster-info-bar', this).stop().slideUp('fast'); }); // Tooltips