From fed7d4cc34aa92b9fd0fad7f8cd291c11385df22 Mon Sep 17 00:00:00 2001
From: JonnyWong16 <Jonny.Wong.16@gmail.com>
Date: Fri, 26 Feb 2016 23:53:03 -0800
Subject: [PATCH] Add scrolling recently added to homepage

---
 data/interfaces/default/base.html           | 12 +--
 data/interfaces/default/css/plexpy.css      | 19 ++++-
 data/interfaces/default/index.html          | 60 +++++++++-----
 data/interfaces/default/recently_added.html | 90 +++++++++++----------
 4 files changed, 109 insertions(+), 72 deletions(-)

diff --git a/data/interfaces/default/base.html b/data/interfaces/default/base.html
index e21f5646..e32ba5d3 100644
--- a/data/interfaces/default/base.html
+++ b/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
-        <a href="#" id="updateDismiss">Close</a>
+        You're running an unknown version of PlexPy.<br />
+        <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
-            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. You're ${plexpy.COMMITS_BEHIND} commits behind. <a href="update">Update</a> or
-        <a href="#" id="updateDismiss">Close</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">
+        newer version</a> is available.<br />
+        You're ${plexpy.COMMITS_BEHIND} commits behind.<br />
+        <a href="update">Update</a> or <a href="#" id="updateDismiss">Close</a>
     </div>
     % endif
     <nav class="navbar navbar-fixed-top">
diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index e200da78..c519aac6 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -882,10 +882,11 @@ a .dashboard-activity-metadata-user-thumb:hover {
 }
 .dashboard-recent-media-row {
     width: 100%;
-    margin:0 auto;
+    margin: 0 auto;
     text-align: center;
     position: relative;
     z-index: 0;
+    overflow: hidden;
 }
 .dashboard-recent-media {
     width: 100%;
@@ -2758,4 +2759,20 @@ 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;
 }
\ No newline at end of file
diff --git a/data/interfaces/default/index.html b/data/interfaces/default/index.html
index 8948df34..71958e47 100644
--- a/data/interfaces/default/index.html
+++ b/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 class='text-muted'><i class="fa fa-refresh fa-spin"></i> Looking for new items...</div>
+            <div id="recentlyAdded" style="margin-right: -15px;">
+                <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();
-        });
-    });
+    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>
diff --git a/data/interfaces/default/recently_added.html b/data/interfaces/default/recently_added.html
index bba1601b..10e786a7 100644
--- a/data/interfaces/default/recently_added.html
+++ b/data/interfaces/default/recently_added.html
@@ -32,56 +32,58 @@ DOCUMENTATION :: END
 
 % if data != None:
 <div class="dashboard-recent-media-row">
-    <ul class="dashboard-recent-media list-unstyled">
-        % for item in data:
-        <div class="dashboard-recent-media-instance">
-            <li>
-                % if item['media_type'] == 'season' or item['media_type'] == 'movie':
-				<a href="info?rating_key=${item['rating_key']}">
-					<div class="dashboard-recent-media-poster">
-						<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">
-                                <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 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">
+                <li>
+                    % if item['media_type'] == 'season' or item['media_type'] == 'movie':
+				    <a href="info?rating_key=${item['rating_key']}">
+					    <div class="dashboard-recent-media-poster">
+						    <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">
+                                    <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>
-					<div class="dashboard-recent-media-metacontainer">
-						% if item['media_type'] == 'season':
-						<h3 title="${item['parent_title']}">${item['parent_title']}</h3>
-						<h3 class="text-muted">${item['title']}</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 class="dashboard-recent-media-metacontainer">
+						    % if item['media_type'] == 'season':
+						    <h3 title="${item['parent_title']}">${item['parent_title']}</h3>
+						    <h3 class="text-muted">${item['title']}</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>
-                    <div class="dashboard-recent-media-metacontainer">
-                        <h3 title="${item['parent_title']}">${item['parent_title']}</h3>
-                        <h3 class="text-muted">${item['title']}</h3>
-                    </div>
-                </a>
-				% endif
-            </li>
-        </div>
-        % endfor
-    </ul>
+                        <div class="dashboard-recent-media-metacontainer">
+                            <h3 title="${item['parent_title']}">${item['parent_title']}</h3>
+                            <h3 class="text-muted">${item['title']}</h3>
+                        </div>
+                    </a>
+				    % endif
+                </li>
+            </div>
+            % 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>.