Add scrolling recently watched and added to user and library pages

data/interfaces/default/css/plexpy.css

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

data/interfaces/default/library.html

@@ -118,6 +118,14 @@ DOCUMENTATION :: END
                             <div class="row">
                                 <div class="col-md-12">
                                     <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">
                                             <span><i class="fa fa-history"></i> Recently Watched</span>
                                         </div>
@@ -135,6 +143,14 @@ DOCUMENTATION :: END
                             <div class="row">
                                 <div class="col-md-12">
                                     <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">
                                             <span><i class="fa fa-history"></i> Recently Added</span>
                                         </div>
@@ -460,22 +476,13 @@ DOCUMENTATION :: END
         });
 
         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
             $.ajax({
                 url: 'get_library_recently_watched',
                 async: true,
                 data: {
                     section_id: section_id,
-                    limit: containerSize
+                    limit: 50
                 },
                 complete: function(xhr, status) {
                     $("#library-recently-watched").html(xhr.responseText);
@@ -484,22 +491,13 @@ DOCUMENTATION :: END
         }
 
         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
             $.ajax({
                 url: 'get_library_recently_added',
                 async: true,
                 data: {
                     section_id: section_id,
-                    limit: containerSize
+                    limit: 50
                 },
                 complete: function(xhr, status) {
                     $("#library-recently-added").html(xhr.responseText);
@@ -515,6 +513,54 @@ DOCUMENTATION :: END
         });
 
         $('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>
 % endif

data/interfaces/default/library_recently_added.html

@@ -32,6 +32,7 @@ DOCUMENTATION :: END
 
 % if data:
 <div class="dashboard-recent-media-row">
+    <div id="recently-added-row-scroller" style="left: 0;">
         <ul class="dashboard-recent-media list-unstyled">
             % for item in data:
             <li>
@@ -90,6 +91,7 @@ DOCUMENTATION :: END
             % endfor
         </ul>
     </div>
+</div>
 % else:
 <div class="text-muted">No stats to show.
 </div><br>

data/interfaces/default/user.html

@@ -112,6 +112,14 @@ from plexpy import helpers
                             <div class="row">
                                 <div class="col-md-12">
                                     <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">
                                             <span><i class="fa fa-history"></i> Recently Watched</span>
                                         </div>
@@ -471,22 +479,13 @@ from plexpy import helpers
         });
 
         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
             $.ajax({
                 url: 'get_user_recently_watched',
                 async: true,
                 data: {
                     user_id: user_id,
-                    limit: containerSize
+                    limit: 50
                 },
                 complete: function(xhr, status) {
                     $("#user-recently-watched").html(xhr.responseText);
@@ -495,8 +494,29 @@ from plexpy import helpers
         }
 
         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>

data/interfaces/default/user_recently_watched.html

@@ -28,6 +28,7 @@ DOCUMENTATION :: END
 
 % if data:
 <div class="dashboard-recent-media-row">
+    <div id="recently-watched-row-scroller" style="left: 0;">
         <ul class="dashboard-recent-media list-unstyled">
             % for item in data:
             <li>
@@ -79,6 +80,7 @@ DOCUMENTATION :: END
             % endfor
         </ul>
     </div>
+</div>
 % else:
 <div class="text-muted">No stats to show.</div><br>
 % endif