github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-07-31 12:00:08 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add scrolling recently watched and added to user and library pages

Browse source
This commit is contained in:
JonnyWong16 2016-02-27 00:00:11 -08:00
parent fed7d4cc34
commit b5e9ff3b4e
5 changed files with 200 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

3
data/interfaces/default/css/plexpy.css
View file

@ -2772,7 +2772,8 @@ a.no-highlight:hover {
.nav-header > li > a:hover { .nav-header > li > a:hover {
background-color: transparent; background-color: transparent;
} }
#recently-added-row-scroller { #recently-added-row-scroller,
#recently-watched-row-scroller {
width: 8750px; width: 8750px;
position: relative; position: relative;
} }

86
data/interfaces/default/library.html
View file

@ -118,6 +118,14 @@ DOCUMENTATION :: END
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="table-card-header"> <div class="table-card-header">
<ul class="nav nav-header nav-dashboard pull-right">
<li>
<a href="#" id="recently-watched-page-left" class="paginate-watched btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
</li>
<li>
<a href="#" id="recently-watched-page-right" class="paginate-watched btn-gray" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
</li>
</ul>
<div class="header-bar"> <div class="header-bar">
<span><i class="fa fa-history"></i> Recently Watched</span> <span><i class="fa fa-history"></i> Recently Watched</span>
</div> </div>
@ -135,6 +143,14 @@ DOCUMENTATION :: END
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="table-card-header"> <div class="table-card-header">
<ul class="nav nav-header nav-dashboard pull-right">
<li>
<a href="#" id="recently-added-page-left" class="paginate-added btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
</li>
<li>
<a href="#" id="recently-added-page-right" class="paginate-added btn-gray" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
</li>
</ul>
<div class="header-bar"> <div class="header-bar">
<span><i class="fa fa-history"></i> Recently Added</span> <span><i class="fa fa-history"></i> Recently Added</span>
</div> </div>
@ -460,22 +476,13 @@ DOCUMENTATION :: END
}); });
function recentlyWatched() { function recentlyWatched() {
var widthVal = $("#library-recently-watched").width();
var tmp = (widthVal-25) / 175;
if (tmp > 0) {
var containerSize = parseInt(tmp);
} else {
var containerSize = 1;
}
// Populate recently watched // Populate recently watched
$.ajax({ $.ajax({
url: 'get_library_recently_watched', url: 'get_library_recently_watched',
async: true, async: true,
data: { data: {
section_id: section_id, section_id: section_id,
limit: containerSize limit: 50
}, },
complete: function(xhr, status) { complete: function(xhr, status) {
$("#library-recently-watched").html(xhr.responseText); $("#library-recently-watched").html(xhr.responseText);
@ -484,22 +491,13 @@ DOCUMENTATION :: END
} }
function recentlyAdded() { function recentlyAdded() {
var widthVal = $("#library-recently-added").width();
var tmp = (widthVal-25) / 175;
if (tmp > 0) {
var containerSize = parseInt(tmp);
} else {
var containerSize = 1;
}
// Populate recently added // Populate recently added
$.ajax({ $.ajax({
url: 'get_library_recently_added', url: 'get_library_recently_added',
async: true, async: true,
data: { data: {
section_id: section_id, section_id: section_id,
limit: containerSize limit: 50
}, },
complete: function(xhr, status) { complete: function(xhr, status) {
$("#library-recently-added").html(xhr.responseText); $("#library-recently-added").html(xhr.responseText);
@ -515,6 +513,54 @@ DOCUMENTATION :: END
}); });
$('div.art-face').animate({ opacity: 0.2 }, { duration: 1000 }); $('div.art-face').animate({ opacity: 0.2 }, { duration: 1000 });
var leftTotalWatched = 0;
$(".paginate-watched").click(function (e) {
e.preventDefault();
var scroller = $("#recently-watched-row-scroller");
var containerWidth = $("#library-recently-watched").width();
var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175;
var leftMax = -(parseInt(scroller.width()) + scrollAmount);
leftTotalWatched = Math.max(Math.min(leftTotalWatched + scrollAmount, 0), leftMax);
scroller.animate({ left: leftTotalWatched }, 250);
if (leftTotalWatched == 0) {
$("#recently-watched-page-left").addClass("disabled").blur();
} else {
$("#recently-watched-page-left").removeClass("disabled");
}
if (leftTotalWatched == leftMax) {
$("#recently-watched-page-right").addClass("disabled").blur();
} else {
$("#recently-watched-page-right").removeClass("disabled");
}
});
var leftTotalAdded = 0;
$(".paginate-added").click(function (e) {
e.preventDefault();
var scroller = $("#recently-added-row-scroller");
var containerWidth = $("#library-recently-added").width();
var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175;
var leftMax = -(parseInt(scroller.width()) + scrollAmount);
leftTotalAdded = Math.max(Math.min(leftTotalAdded + scrollAmount, 0), leftMax);
scroller.animate({ left: leftTotalAdded }, 250);
if (leftTotalAdded == 0) {
$("#recently-added-page-left").addClass("disabled").blur();
} else {
$("#recently-added-page-left").removeClass("disabled");
}
if (leftTotalAdded == leftMax) {
$("#recently-added-page-right").addClass("disabled").blur();
} else {
$("#recently-added-page-right").removeClass("disabled");
}
});
}); });
</script> </script>
% endif % endif

106
data/interfaces/default/library_recently_added.html
View file

@ -32,63 +32,65 @@ DOCUMENTATION :: END
% if data: % if data:
<div class="dashboard-recent-media-row"> <div class="dashboard-recent-media-row">
<ul class="dashboard-recent-media list-unstyled"> <div id="recently-added-row-scroller" style="left: 0;">
% for item in data: <ul class="dashboard-recent-media list-unstyled">
<li> % for item in data:
% if item['media_type'] == 'episode' or item['media_type'] == 'movie': <li>
<a href="info?rating_key=${item['rating_key']}"> % if item['media_type'] == 'episode' or item['media_type'] == 'movie':
<div class="dashboard-recent-media-poster"> <a href="info?rating_key=${item['rating_key']}">
% if item['media_type'] == 'episode': <div class="dashboard-recent-media-poster">
% if item['parent_thumb']: % if item['media_type'] == 'episode':
<div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['parent_thumb']}&width=300&height=450&fallback=poster);"> % if item['parent_thumb']:
% else: <div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['parent_thumb']}&width=300&height=450&fallback=poster);">
<div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['grandparent_thumb']}&width=300&height=450&fallback=poster);"> % else:
% endif <div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['grandparent_thumb']}&width=300&height=450&fallback=poster);">
% elif item['media_type'] == 'movie': % endif
<div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=450&fallback=poster);"> % elif item['media_type'] == 'movie':
% endif <div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=450&fallback=poster);">
<div class="dashboard-recent-media-overlay"> % endif
<div class="dashboard-recent-media-overlay-text" id="added_at-${item['rating_key']}"> <div class="dashboard-recent-media-overlay">
<script> <div class="dashboard-recent-media-overlay-text" id="added_at-${item['rating_key']}">
<script>
$('#added_at-${item['rating_key']}').text('Added ' + moment(${item['added_at']}, "X").fromNow())
</script>
</div>
</div>
</div>
</div>
<div class="dashboard-recent-media-metacontainer">
% if item['media_type'] == 'episode':
<h3 title="${item['grandparent_title']}">${item['grandparent_title']}</h3>
<h3 title="${item['title']}">${item['title']}</h3>
<h3 class="text-muted">S${item['parent_media_index']} &middot; E${item['media_index']}</h3>
% elif item['media_type'] == 'movie':
<h3 title="${item['title']}">${item['title']}</h3>
<h3 class="text-muted">${item['year']}</h3>
% endif
</div>
</a>
% elif item['media_type'] == 'album':
<a href="info?rating_key=${item['rating_key']}">
<div class="dashboard-recent-media-cover">
<div class="dashboard-recent-media-cover-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=300&fallback=cover);">
<div class="dashboard-recent-media-overlay">
<div class="dashboard-recent-media-overlay-text" id="added_at-${item['rating_key']}">
<script>
$('#added_at-${item['rating_key']}').text('Added ' + moment(${item['added_at']}, "X").fromNow()) $('#added_at-${item['rating_key']}').text('Added ' + moment(${item['added_at']}, "X").fromNow())
</script> </script>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="dashboard-recent-media-metacontainer">
<div class="dashboard-recent-media-metacontainer"> <h3 title="${item['parent_title']}">${item['parent_title']}</h3>
% if item['media_type'] == 'episode': <h3 class="text-muted">${item['title']}</h3>
<h3 title="${item['grandparent_title']}">${item['grandparent_title']}</h3>
<h3 title="${item['title']}">${item['title']}</h3>
<h3 class="text-muted">S${item['parent_media_index']} &middot; E${item['media_index']}</h3>
% elif item['media_type'] == 'movie':
<h3 title="${item['title']}">${item['title']}</h3>
<h3 class="text-muted">${item['year']}</h3>
% endif
</div>
</a>
% elif item['media_type'] == 'album':
<a href="info?rating_key=${item['rating_key']}">
<div class="dashboard-recent-media-cover">
<div class="dashboard-recent-media-cover-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=300&fallback=cover);">
<div class="dashboard-recent-media-overlay">
<div class="dashboard-recent-media-overlay-text" id="added_at-${item['rating_key']}">
<script>
$('#added_at-${item['rating_key']}').text('Added ' + moment(${item['added_at']}, "X").fromNow())
</script>
</div>
</div>
</div> </div>
</div> </a>
<div class="dashboard-recent-media-metacontainer"> % endif
<h3 title="${item['parent_title']}">${item['parent_title']}</h3> </li>
<h3 class="text-muted">${item['title']}</h3> % endfor
</div> </ul>
</a> </div>
% endif
</li>
% endfor
</ul>
</div> </div>
% else: % else:
<div class="text-muted">No stats to show. <div class="text-muted">No stats to show.

44
data/interfaces/default/user.html
View file

@ -112,6 +112,14 @@ from plexpy import helpers
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="table-card-header"> <div class="table-card-header">
<ul class="nav nav-header nav-dashboard pull-right">
<li>
<a href="#" id="recently-watched-page-left" class="paginate btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
</li>
<li>
<a href="#" id="recently-watched-page-right" class="paginate btn-gray" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
</li>
</ul>
<div class="header-bar"> <div class="header-bar">
<span><i class="fa fa-history"></i> Recently Watched</span> <span><i class="fa fa-history"></i> Recently Watched</span>
</div> </div>
@ -471,22 +479,13 @@ from plexpy import helpers
}); });
function recentlyWatched() { function recentlyWatched() {
var widthVal = $("#user-recently-watched").width();
var tmp = (widthVal-25) / 175;
if (tmp > 0) {
var containerSize = parseInt(tmp);
} else {
var containerSize = 1;
}
// Populate recently watched // Populate recently watched
$.ajax({ $.ajax({
url: 'get_user_recently_watched', url: 'get_user_recently_watched',
async: true, async: true,
data: { data: {
user_id: user_id, user_id: user_id,
limit: containerSize limit: 50
}, },
complete: function(xhr, status) { complete: function(xhr, status) {
$("#user-recently-watched").html(xhr.responseText); $("#user-recently-watched").html(xhr.responseText);
@ -495,8 +494,29 @@ from plexpy import helpers
} }
recentlyWatched(); recentlyWatched();
$(window).resize(function() {
recentlyWatched(); var leftTotal = 0;
$(".paginate").click(function (e) {
e.preventDefault();
var scroller = $("#recently-watched-row-scroller");
var containerWidth = $("#user-recently-watched").width();
var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175;
var leftMax = -(parseInt(scroller.width()) + scrollAmount);
leftTotal = Math.max(Math.min(leftTotal + scrollAmount, 0), leftMax);
scroller.animate({ left: leftTotal }, 250);
if (leftTotal == 0) {
$("#recently-watched-page-left").addClass("disabled").blur();
} else {
$("#recently-watched-page-left").removeClass("disabled");
}
if (leftTotal == leftMax) {
$("#recently-watched-page-right").addClass("disabled").blur();
} else {
$("#recently-watched-page-right").removeClass("disabled");
}
}); });
}); });
</script> </script>

90
data/interfaces/default/user_recently_watched.html
View file

@ -28,56 +28,58 @@ DOCUMENTATION :: END
% if data: % if data:
<div class="dashboard-recent-media-row"> <div class="dashboard-recent-media-row">
<ul class="dashboard-recent-media list-unstyled"> <div id="recently-watched-row-scroller" style="left: 0;">
% for item in data: <ul class="dashboard-recent-media list-unstyled">
<li> % for item in data:
% if item['media_type'] == 'episode' or item['media_type'] == 'movie': <li>
<a href="info?source=history&rating_key=${item['rating_key']}"> % if item['media_type'] == 'episode' or item['media_type'] == 'movie':
<div class="dashboard-recent-media-poster"> <a href="info?source=history&rating_key=${item['rating_key']}">
<div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=450&fallback=poster);"> <div class="dashboard-recent-media-poster">
<div class="dashboard-recent-media-overlay"> <div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=450&fallback=poster);">
<div class="dashboard-recent-media-overlay-text" id="time-${item['time']}"> <div class="dashboard-recent-media-overlay">
<script> <div class="dashboard-recent-media-overlay-text" id="time-${item['time']}">
$('#time-${item['time']}').text('Watched ' + moment(${item['time']}, "X").fromNow()) <script>
</script> $('#time-${item['time']}').text('Watched ' + moment(${item['time']}, "X").fromNow())
</script>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="dashboard-recent-media-metacontainer">
<div class="dashboard-recent-media-metacontainer"> % if item['media_type'] == 'episode':
% if item['media_type'] == 'episode': <h3 title="${item['grandparent_title']}">${item['grandparent_title']}</h3>
<h3 title="${item['grandparent_title']}">${item['grandparent_title']}</h3> <h3 title="${item['title']}">${item['title']}</h3>
<h3 title="${item['title']}">${item['title']}</h3> <h3 class="text-muted">S${item['parent_media_index']} &middot; E${item['media_index']}</h3>
<h3 class="text-muted">S${item['parent_media_index']} &middot; E${item['media_index']}</h3> % elif item['media_type'] == 'movie':
% elif item['media_type'] == 'movie': <h3 title="${item['title']}">${item['title']}</h3>
<h3 title="${item['title']}">${item['title']}</h3> <h3 class="text-muted">${item['year']}</h3>
<h3 class="text-muted">${item['year']}</h3> % endif
% endif </div>
</div> </a>
</a> % elif item['media_type'] == 'track':
% elif item['media_type'] == 'track': <a href="info?source=history&rating_key=${item['rating_key']}">
<a href="info?source=history&rating_key=${item['rating_key']}"> <div class="dashboard-recent-media-cover">
<div class="dashboard-recent-media-cover"> <div class="dashboard-recent-media-cover-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=300&fallback=cover);">
<div class="dashboard-recent-media-cover-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=300&fallback=cover);"> <div class="dashboard-recent-media-overlay">
<div class="dashboard-recent-media-overlay"> <div class="dashboard-recent-media-overlay-text" id="time-${item['time']}">
<div class="dashboard-recent-media-overlay-text" id="time-${item['time']}"> <script>
<script> $('#time-${item['time']}').text('Watched ' + moment(${item['time']}, "X").fromNow())
$('#time-${item['time']}').text('Watched ' + moment(${item['time']}, "X").fromNow()) </script>
</script> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="dashboard-recent-media-metacontainer">
<div class="dashboard-recent-media-metacontainer"> <h3 title="${item['grandparent_title']}">${item['grandparent_title']}</h3>
<h3 title="${item['grandparent_title']}">${item['grandparent_title']}</h3> <h3 title="${item['title']}">${item['title']}</h3>
<h3 title="${item['title']}">${item['title']}</h3> <h3 class="text-muted">${item['parent_title']}</h3>
<h3 class="text-muted">${item['parent_title']}</h3> </div>
</div> </a>
</a> % endif
% endif </li>
</li> % endfor
% endfor </ul>
</ul> </div>
</div> </div>
% else: % else:
<div class="text-muted">No stats to show.</div><br> <div class="text-muted">No stats to show.</div><br>