Paging while read river stories now works by fetching the entire history back for each successive page, cleverly compacting and ignoring pages as they are read. Not 100% optimal, but a lot quicker and easier than figuring out some stateful representation of paging continuations.

apps/reader/views.py

@@ -404,8 +404,10 @@ def load_river_stories(request):
     feed_ids = [int(feed_id) for feed_id in request.POST.getlist('feeds')]
     offset = int(request.REQUEST.get('offset', 0))
     limit = int(request.REQUEST.get('limit', 25))
-    page = int(request.REQUEST.get('page', 0))
-    if page: offset = limit * page
+    page = int(request.REQUEST.get('page', 0))+1
+    read_stories = int(request.REQUEST.get('read_stories', 0))
+    # if page: offset = limit * page
+    if page: limit = limit * page - read_stories
 
     def feed_qvalues(feed_id):
         feed = UserSubscription.objects.get(feed__pk=feed_id, user=user)

media/css/reader.css

@@ -1313,12 +1313,33 @@ background: transparent;
     font-size: 16px;
     padding: 0 200px 0 28px;
     background: #dadada url('../theme/images/dadada_40x100_textures_03_highlight_soft_75.png') 0 50% repeat-x;
-    border-top: 4px solid #404040;
     border-bottom: 1px solid #ADADAD;
     position: relative;
     overflow: hidden;
 }
 
+#story_pane .NB-feed-story-header-feed {
+    background: #404040 url('../img/reader/feed_view_feed_background.png') repeat-x 0 0;
+    padding: 2px 200px 2px 28px;
+    position: relative;
+    border-bottom: 1px solid #000;
+}
+
+#story_pane .NB-feed-story-feed {
+    padding: 2px 0;
+    color: white;
+    font-size: 13px;
+    text-shadow: 1px 1px 0 #000;
+}
+
+#story_pane .NB-feed-story-feed .feed_favicon {
+    position: absolute;
+    left: 6px;
+    top: 5px;
+    width: 16px;
+    height: 16px;
+}
+
 #story_pane .NB-feed-story .NB-feed-story-sentiment {
     position: absolute;
     top: 1px;

media/js/newsblur/assetmodel.js

@@ -19,11 +19,12 @@ NEWSBLUR.AssetModel.Reader = function() {
     this.feeds = {};
     this.folders = [];
     this.stories = {};
-    this.story_keys = [];
-    this.read_stories = {};
+    this.story_keys = {};
+    this.queued_read_stories = {};
     this.classifiers = {};
     this.starred_stories = [];
     this.starred_count = 0;
+    this.read_stories_river_count = 0;
     
     this.DEFAULT_VIEW = NEWSBLUR.Preferences.default_view || 'page';
 };
@@ -104,24 +105,25 @@ NEWSBLUR.AssetModel.Reader.prototype = {
                 break;
             }
         }
-        
+
         if (!read && NEWSBLUR.Globals.is_authenticated) {
-            if (!(feed_id in this.read_stories)) { this.read_stories[feed_id] = []; }
-            this.read_stories[feed_id].push(story_id);
-            NEWSBLUR.log(['Marking Read', this.read_stories, story_id]);
+            if (!(feed_id in this.queued_read_stories)) { this.queued_read_stories[feed_id] = []; }
+            this.queued_read_stories[feed_id].push(story_id);
+            // NEWSBLUR.log(['Marking Read', this.queued_read_stories, story_id]);
             
             this.make_request('/reader/mark_story_as_read', {
-                story_id: this.read_stories[feed_id],
+                story_id: this.queued_read_stories[feed_id],
                 feed_id: feed_id
-            }, function() {}, function() {}, {
+            }, null, null, {
                 'ajax_group': 'queue_clear',
                 'traditional': true,
                 'beforeSend': function() {
-                    self.read_stories[feed_id] = [];
+                    self.queued_read_stories[feed_id] = [];
                 }
             });
         }
         
+        this.read_stories_river_count += 1;
         $.isFunction(callback) && callback(read);
     },
     
@@ -203,6 +205,8 @@ NEWSBLUR.AssetModel.Reader.prototype = {
     },
     
     load_feed_precallback: function(data, feed_id, callback, first_load) {
+        var self = this;
+        
         // NEWSBLUR.log(['load_feed_precallback', feed_id, first_load]);
         if ((feed_id != this.feed_id && data) || first_load) {
             this.stories = data.stories;
@@ -211,31 +215,20 @@ NEWSBLUR.AssetModel.Reader.prototype = {
             this.feed_id = feed_id;
             this.classifiers = data.classifiers;
             this.starred_stories = data.starred_stories;
-            this.story_keys = [];
+            this.story_keys = {};
             for (var s in data.stories) {
-                this.story_keys.push(data.stories[s].id);
+                this.story_keys[data.stories[s].id] = true;
             }
         } else if (data) {
-            $.merge(this.stories, data.stories);
-            
-            // Assemble key cache for later, removing dupes
-            var data_stories = $.merge([], data.stories);
-            for (var s in data_stories) {
-                var story_id = data_stories[s].id;
-                if (!(story_id in this.story_keys)) {
-                    this.story_keys.push(story_id);
-                } else {
-                    // There's a dupe story. Remove it!
-                    for (var s2 in this.stories) {
-                        if (story_id == this.stories[s2].id) {
-                            delete this.stories[s2];
-                            delete data.stories[s];
-                            break;
-                        }
-                    }
+            data.stories = _.select(data.stories, function(story) {
+                if (!self.story_keys[story.id]) {
+                    self.stories.push(story);
+                    self.story_keys[story.id] = true;
+                    return true;
                 }
-            }
+            });
         }
+
         $.isFunction(callback) && callback(data, first_load);
     },
     
@@ -256,13 +249,16 @@ NEWSBLUR.AssetModel.Reader.prototype = {
     fetch_river_stories: function(feeds, page, callback, first_load) {
         var self = this;
         
+        if (first_load || !page) this.read_stories_river_count = 0;
+
         var pre_callback = function(data) {
             return self.load_feed_precallback(data, 'river', callback, first_load);
         };
-
+        
         this.make_request('/reader/load_river_stories', {
             feeds: feeds,
-            page: page
+            page: page,
+            read_stories: this.read_stories_river_count
         }, pre_callback, null, {
             'ajax_group': (page ? 'feed_page' : 'feed')
         });

media/js/newsblur/reader.js

@@ -1754,7 +1754,7 @@
             var feed_id = parseInt($story_title.data('feed_id'), 10) || this.active_feed;
             var feed = this.model.get_feed(feed_id);
             var $feed_list = this.$s.$feed_list;
-            var $feed = $('.feed.selected', $feed_list);
+            var $feed = this.find_feed_in_feed_list(feed_id);
             var $feed_counts = $('.feed_counts_floater', $feed);
             var $content_pane = this.$s.$content_pane;
             
@@ -2407,6 +2407,7 @@
 
             for (var s in stories) {
                 var story = stories[s];
+                if (options.river_stories) var feed = this.model.get_feed(story.story_feed_id);
                 var read = story.read_status
                     ? ' read '
                     : '';
@@ -2419,9 +2420,17 @@
                 if (score < 0) score_color = 'negative';
 
                 var $story = $.make('li', { className: 'NB-feed-story ' + read + river_stories + ' NB-story-' + score_color }, [
+                    $.make('div', { className: 'NB-feed-story-header-feed' }, [
+                        (options.river_stories && 
+                            $.make('div', { className: 'NB-feed-story-feed' }, [
+                               $.make('img', { className: 'feed_favicon', src: NEWSBLUR.Globals.google_favicon_url + feed.feed_link }),
+                               $.make('span', { className: 'feed_title' }, feed.feed_title)
+                            ])
+                        )
+                    ]),
                     $.make('div', { className: 'NB-feed-story-header' }, [
                         $.make('div', { className: 'NB-feed-story-sentiment' }),
-                        ( story.story_authors &&
+                        (story.story_authors &&
                             $.make('div', { className: 'NB-feed-story-author' }, story.story_authors)),
                         $.make('div', { className: 'NB-feed-story-title-container' }, [
                             $.make('div', { className: 'NB-feed-story-sentiment' }),
@@ -2469,6 +2478,10 @@
                 }
             }
             
+            if (!stories.length) {
+                this.fetch_story_locations_in_feed_view();
+            }
+            
             this.show_stories_preference_in_feed_view(true);
         },