Add scrolling recently added to homepage

data/interfaces/default/base.html

@@ -137,15 +137,15 @@ from plexpy.helpers import anon_url
     <div id="ajaxMsg" class="ajaxMsg"></div>
     % if plexpy.CONFIG.CHECK_GITHUB and not plexpy.CURRENT_VERSION:
     <div id="updatebar" style="display: none;">
-        You're running an unknown version of PlexPy. <a href="update">Update</a> or
+        You're running an unknown version of PlexPy.<br />
-        <a href="#" id="updateDismiss">Close</a>
+        <a href="update">Update</a> or <a href="#" id="updateDismiss">Close</a>
     </div>
     % 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
+        A <a href="${anon_url('https://github.com/%s/plexpy/compare/%s...%s' % (plexpy.CONFIG.GIT_USER, plexpy.CURRENT_VERSION, plexpy.LATEST_VERSION))}" target="_blank">
-            href="${anon_url('https://github.com/%s/plexpy/compare/%s...%s' % (plexpy.CONFIG.GIT_USER, plexpy.CURRENT_VERSION, plexpy.LATEST_VERSION))}" target="_blank">
+        newer version</a> is available.<br />
-        newer version</a> is available. You're ${plexpy.COMMITS_BEHIND} commits behind. <a href="update">Update</a> or
+        You're ${plexpy.COMMITS_BEHIND} commits behind.<br />
-        <a href="#" id="updateDismiss">Close</a>
+        <a href="update">Update</a> or <a href="#" id="updateDismiss">Close</a>
     </div>
     % endif
     <nav class="navbar navbar-fixed-top">

data/interfaces/default/css/plexpy.css

@@ -886,6 +886,7 @@ a .dashboard-activity-metadata-user-thumb:hover {
     text-align: center;
     position: relative;
     z-index: 0;
+    overflow: hidden;
 }
 .dashboard-recent-media {
     width: 100%;
@@ -2759,3 +2760,19 @@ a.no-highlight:hover {
 .save-button {
     margin-top: 15px;
 }
+.nav-dashboard > li {
+    float: left;
+}
+.btn-gray.disabled,
+.btn-gray.disabled:hover {
+    color: #323232;
+    cursor: default;
+}
+.nav-header > li > a:focus,
+.nav-header > li > a:hover {
+    background-color: transparent;
+}
+#recently-added-row-scroller {
+    width: 8750px;
+    position: relative;
+}

data/interfaces/default/index.html

@@ -23,7 +23,7 @@
                 <h3>Watch Statistics <small>Last ${config['home_stats_length']} days</small></h3>
             </div>
             <div id="home-stats" class="home-platforms">
-                <div class='text-muted'><i class="fa fa-refresh fa-spin"></i> Loading stats...</div>
+                <div class="text-muted"><i class="fa fa-refresh fa-spin"></i> Loading stats...</div>
                 <br>
             </div>
         </div>
@@ -36,19 +36,27 @@
                 <h3>Library Statistics <small>${config['pms_name']}</small></h3>
             </div>
             <div id="library-stats" class="library-platforms">
-                <div class='text-muted'><i class="fa fa-refresh fa-spin"></i> Loading stats...</div>
+                <div class="text-muted"><i class="fa fa-refresh fa-spin"></i> Loading stats...</div>
                 <br>
             </div>
         </div>
     </div>
     % endif
-    <div class='row'>
+    <div class="row">
         <div class="col-md-12">
             <div class="padded-header">
+                <ul class="nav nav-header nav-dashboard pull-right">
+                    <li>
+                        <a href="#" id="recently-added-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-added-page-right" class="paginate btn-gray" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
+                    </li>
+                </ul>
                 <h3>Recently Added</h3>
             </div>
-            <div id='recentlyAdded'>
+            <div id="recentlyAdded" style="margin-right: -15px;">
-                <div class='text-muted'><i class="fa fa-refresh fa-spin"></i> Looking for new items...</div>
+                <div class="text-muted"><i class="fa fa-refresh fa-spin"></i> Looking for new items...</div>
                 <br>
             </div>
         </div>
@@ -116,31 +124,17 @@
     getLibraryStats();
 
     function recentlyAdded() {
-        var widthVal = $('body').find(".container-fluid").width();
-        var tmp = (widthVal-20) / 182;
-
-        if (tmp > 0) {
-            containerSize = parseInt(tmp);
-        } else {
-            containerSize = 1;
-        }
-
         $.ajax({
             url: 'get_recently_added',
             type: "GET",
             async: true,
-            data: { count : containerSize },
+            data: { count : 50 },
             complete: function(xhr, status) {
                 $("#recentlyAdded").html(xhr.responseText);
             }
         });
     }
-    $(document).ready(function () {
     recentlyAdded();
-        $(window).resize(function() {
-            recentlyAdded();
-        });
-    });
 
     var date_format = 'YYYY-MM-DD';
     var time_format = 'hh:mm a';
@@ -152,6 +146,30 @@
             time_format = data.time_format;
         }
     });
+
+    var leftTotal = 0;
+    $(".paginate").click(function (e) {
+        e.preventDefault();
+        var scroller = $("#recently-added-row-scroller");
+        var containerWidth = $("body").find(".container-fluid").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-added-page-left").addClass("disabled").blur();
+        } else {
+            $("#recently-added-page-left").removeClass("disabled");
+        }
+
+        if (leftTotal == leftMax) {
+            $("#recently-added-page-right").addClass("disabled").blur();
+        } else {
+            $("#recently-added-page-right").removeClass("disabled");
+        }
+    });
 </script>
 
 </%def>

data/interfaces/default/recently_added.html

@@ -32,6 +32,7 @@ DOCUMENTATION :: END
 
 % if data != None:
 <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:
             <div class="dashboard-recent-media-instance">
@@ -83,6 +84,7 @@ DOCUMENTATION :: END
             % endfor
         </ul>
     </div>
+</div>
 % else:
 <div class="text-muted">There was an error communicating with your Plex Server. Please check your <a href="settings">settings</a>.
 </div><br>