Add refresh button to images

This commit is contained in:
JonnyWong16 2016-06-04 12:43:45 -07:00
parent 6a58895d37
commit 0f92dc0fdf
14 changed files with 114 additions and 13 deletions

View file

@ -1184,6 +1184,7 @@ a:hover .dashboard-recent-media-cover {
margin: 0 40px 0 25px;
height: 100px;
overflow: visible;
position: relative;
}
.summary-poster-face {
background-position: center;
@ -1922,6 +1923,7 @@ a .library-user-instance-box:hover {
.home-platforms-instance-poster {
margin-left: 0px;
position: absolute;
overflow: hidden;
}
.home-platforms-instance-poster .home-platforms-poster-face {
background-position: center;
@ -2079,6 +2081,7 @@ a .library-user-instance-box:hover {
.home-platforms-instance-list-poster {
position: absolute;
left: 20px;
overflow: hidden;
}
.home-platforms-instance-list-poster .home-platforms-list-poster-face {
background-position: center;
@ -2965,3 +2968,40 @@ a.no-highlight:hover {
border: 0px solid #444;
border-radius: 3px;
}
.overlay-refresh-image {
opacity: 0;
color: #000;
font-size: 16px;
float: left;
position: absolute;
top: 0px;
right: 10px;
z-index: 1;
transition: all .1s cubic-bezier(.4,0,1,1);
-webkit-transition: all .1s cubic-bezier(.4,0,1,1);
-moz-transition: all .1s cubic-bezier(.4,0,1,1);
-o-transition: all .1s cubic-bezier(.4,0,1,1);
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.overlay-refresh-image.left {
left: 10px;
}
.overlay-refresh-image.info-art {
color: #999;
top: 15px;
right: 25px;
opacity: 1;
text-shadow: none;
cursor: pointer;
}
.overlay-refresh-image.info-art:hover {
color: #fff;
text-shadow: none;
}
a:hover .overlay-refresh-image {
opacity: .25;
top: 8px;
}
a:hover .overlay-refresh-image:hover {
opacity: .9;
}

View file

@ -106,6 +106,7 @@ DOCUMENTATION :: END
% else:
<div class="dashboard-activity-poster-face" style="background-image: url(${a['art']});"></div>
% endif
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
<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>

View file

@ -108,6 +108,7 @@ DOCUMENTATION :: END
% else:
<div class="dashboard-activity-poster-face" style="background-image: url(${data['art']});"></div>
% endif
<span class="overlay-refresh-image left" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
<div class="dashboard-activity-button-info">
<button type="button" class="btn btn-activity-info btn-lg" data-target="#stream-${data['session_key']}" data-id="${data['session_key']}">
<i class="fa fa-info-circle"></i>

View file

@ -103,6 +103,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-poster">
@ -149,6 +150,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-list-poster">
@ -199,6 +201,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-poster">
@ -241,6 +244,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-list-poster">
@ -295,6 +299,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-poster">
@ -341,6 +346,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-list-poster">
@ -391,6 +397,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-poster">
@ -433,6 +440,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-list-poster">
@ -487,6 +495,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-poster">
@ -533,6 +542,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-list-poster">
@ -583,6 +593,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-poster">
@ -625,6 +636,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-list-poster">
@ -847,6 +859,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-poster">
@ -903,6 +916,7 @@ DOCUMENTATION :: END
% 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>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
% else:
<div class="home-platforms-instance-list-poster">

View file

@ -68,6 +68,7 @@ DOCUMENTATION :: END
<div class="container-fluid">
<div class="row">
<div class="art-face" style="background-image:url(pms_image_proxy?img=${data['art']}&width=1920&height=1080)"></div>
<span class="overlay-refresh-image info-art" title="Refresh background image"><i class="fa fa-refresh refresh_pms_image"></i></span>
<div class="summary-container">
<div class="summary-navbar">
<div class="col-md-12">
@ -119,18 +120,21 @@ DOCUMENTATION :: END
<span></span>
</div>
</div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
% elif data['media_type'] == 'artist' or data['media_type'] == 'album' or data['media_type'] == 'track':
<div class="summary-poster-face-track" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=500&height=500&fallback=cover);">
<div class="summary-poster-face-overlay">
<span></span>
</div>
</div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
% else:
<div class="summary-poster-face" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=450&fallback=poster);">
<div class="summary-poster-face-overlay">
<span></span>
</div>
</div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
% endif
</a>
</div>

View file

@ -51,6 +51,7 @@ DOCUMENTATION :: END
</div>
</div>
</div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
</a>
% elif data['children_type'] == 'episode':
@ -63,6 +64,7 @@ DOCUMENTATION :: END
</div>
</div>
</div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
</a>
<div class="item-children-instance-text-wrapper episode-item">
@ -74,6 +76,7 @@ DOCUMENTATION :: END
<a href="info?rating_key=${child['rating_key']}" title="${child['title']}">
<div class="item-children-poster">
<div class="item-children-poster-face album-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=300&fallback=cover);"></div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
</a>
<div class="item-children-instance-text-wrapper album-item">

View file

@ -65,6 +65,7 @@ DOCUMENTATION :: END
<a href="info?rating_key=${child['rating_key']}" id="${child['rating_key']}">
<div class="item-children-poster">
<div class="item-children-poster-face season-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=450&fallback=poster);"></div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
<div class="item-children-instance-text-wrapper season-item">
<h3 title="${child['title']}">${child['title']}</h3>
@ -87,6 +88,7 @@ DOCUMENTATION :: END
<a href="info?rating_key=${child['rating_key']}" id="${child['rating_key']}">
<div class="item-children-poster">
<div class="item-children-poster-face season-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=450&fallback=poster);"></div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
<div class="item-children-instance-text-wrapper season-item">
<h3 title="${child['title']}">${child['title']}</h3>
@ -109,6 +111,7 @@ DOCUMENTATION :: END
<a href="info?rating_key=${child['rating_key']}" id="${child['rating_key']}">
<div class="item-children-poster">
<div class="item-children-poster-face season-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=450&fallback=poster);"></div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
<div class="item-children-instance-text-wrapper season-item">
<h3 title="${child['parent_title']}">${child['parent_title']}</h3>
@ -131,6 +134,7 @@ DOCUMENTATION :: END
<a href="info?rating_key=${child['rating_key']}" id="${child['rating_key']}">
<div class="item-children-poster">
<div class="item-children-poster-face episode-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=500&height=250&fallback=art);"></div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
<div class="item-children-instance-text-wrapper episode-item">
<h3 title="${child['grandparent_title']}">${child['grandparent_title']}</h3>
@ -154,6 +158,7 @@ DOCUMENTATION :: END
<a href="info?rating_key=${child['rating_key']}" id="${child['rating_key']}">
<div class="item-children-poster">
<div class="item-children-poster-face album-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=300&fallback=cover);"></div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
<div class="item-children-instance-text-wrapper album-item">
<h3 title="${child['title']}">${child['title']}</h3>
@ -175,6 +180,7 @@ DOCUMENTATION :: END
<a href="info?rating_key=${child['rating_key']}" id="${child['rating_key']}">
<div class="item-children-poster">
<div class="item-children-poster-face album-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=300&fallback=cover);"></div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
<div class="item-children-instance-text-wrapper album-item">
<h3 title="${child['parent_title']}">${child['parent_title']}</h3>
@ -204,6 +210,7 @@ DOCUMENTATION :: END
</div>
</div>
</div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
<div class="item-children-instance-text-wrapper album-item">
<h3 title="${child['grandparent_title']}">${child['grandparent_title']}</h3>
<h3 title="${child['title']}">${child['title']}</h3>

View file

@ -400,3 +400,26 @@ window.onerror = function (message, file, line) {
};
$.post("log_js_errors", e, function (data) { });
};
$('*').on('click', '.refresh_pms_image', function (e) {
e.preventDefault();
e.stopPropagation();
var background_div = $(this).parent().siblings(['style*=pms_image_proxy']).first();
var pms_proxy_url = background_div.css('background-image');
pms_proxy_url = /^url\((['"]?)(.*)\1\)$/.exec(pms_proxy_url);
pms_proxy_url = pms_proxy_url ? pms_proxy_url[2] : ""; // If matched, retrieve url, otherwise ""
if (pms_proxy_url.indexOf('pms_image_proxy') == -1) {
console.log('PMS image proxy url not found.');
} else {
if (pms_proxy_url.indexOf('refresh=true') > -1) {
pms_proxy_url = pms_proxy_url.replace("&refresh=true", "");
console.log(pms_proxy_url)
background_div.css('background-image', 'url(' + pms_proxy_url + ')');
background_div.css('background-image', 'url(' + pms_proxy_url + '&refresh=true)');
} else {
background_div.css('background-image', 'url(' + pms_proxy_url + '&refresh=true)');
}
}
});

View file

@ -39,6 +39,7 @@ DOCUMENTATION :: END
<div class="row">
% if data['library_art']:
<div class="art-face" style="background-image:url(pms_image_proxy?img=${data['library_art']}&width=1920&height=1080)"></div>
<span class="overlay-refresh-image info-art" title="Refresh background image"><i class="fa fa-refresh refresh_pms_image"></i></span>
% endif
<div class="summary-container">
<div class="summary-navbar">

View file

@ -60,6 +60,7 @@ DOCUMENTATION :: END
</div>
</div>
</div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
</a>
<div class="dashboard-recent-media-metacontainer">

View file

@ -49,6 +49,7 @@ DOCUMENTATION :: END
</div>
</div>
</div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
</a>
<div class="dashboard-recent-media-metacontainer">
@ -69,6 +70,7 @@ DOCUMENTATION :: END
</div>
</div>
</div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
</a>
<div class="dashboard-recent-media-metacontainer">
@ -91,6 +93,7 @@ DOCUMENTATION :: END
</div>
</div>
</div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
</a>
<div class="dashboard-recent-media-metacontainer">

View file

@ -49,6 +49,7 @@ DOCUMENTATION :: END
</div>
</div>
</div>
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
</div>
</a>
<div class="dashboard-recent-media-metacontainer">

View file

@ -3209,6 +3209,8 @@ class WebInterface(object):
logger.error('No image input received.')
return
refresh = True if refresh == 'true' else False
if rating_key and not img:
img = '/library/metadata/%s/thumb/1337' % rating_key
@ -3245,7 +3247,7 @@ class WebInterface(object):
raise Exception(u'PMS image request failed')
except Exception as e:
logger.exception(u'Failed to get image %s, falling back to %s.' % (img, fallback))
logger.warn(u'Failed to get image %s, falling back to %s.' % (img, fallback))
fbi = None
if fallback == 'poster':
fbi = common.DEFAULT_POSTER_THUMB

View file

@ -190,17 +190,17 @@ def initialize(options):
'tools.auth.on': False,
'tools.sessions.on': False
},
'/pms_image_proxy': {
'tools.staticdir.on': True,
'tools.staticdir.dir': os.path.join(plexpy.CONFIG.CACHE_DIR, 'images'),
'tools.caching.on': True,
'tools.caching.force': True,
'tools.caching.delay': 0,
'tools.expires.on': True,
'tools.expires.secs': 60 * 60 * 24 * 30, # 30 days
'tools.auth.on': False,
'tools.sessions.on': False
},
#'/pms_image_proxy': {
# 'tools.staticdir.on': True,
# 'tools.staticdir.dir': os.path.join(plexpy.CONFIG.CACHE_DIR, 'images'),
# 'tools.caching.on': True,
# 'tools.caching.force': True,
# 'tools.caching.delay': 0,
# 'tools.expires.on': True,
# 'tools.expires.secs': 60 * 60 * 24 * 30, # 30 days
# 'tools.auth.on': False,
# 'tools.sessions.on': False
#},
'/favicon.ico': {
'tools.staticfile.on': True,
'tools.staticfile.filename': os.path.abspath(os.path.join(plexpy.PROG_DIR, 'data/interfaces/default/images/favicon.ico')),