2 files changed, 27 insertions, 3 deletions
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 6968bc6f..613b8a34 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -11,6 +11,11 @@ const Timeline = {
     'userId',
     'tag'
   ],
+  data () {
+    return {
+      paused: false
+    }
+  },
   computed: {
     timelineError () { return this.$store.state.statuses.error },
     followers () {
@@ -21,6 +26,9 @@ const Timeline = {
     },
     viewing () {
       return this.timeline.viewing
+    },
+    newStatusCount () {
+      return this.timeline.newStatusCount
     }
   },
   components: {
@@ -56,6 +64,7 @@ const Timeline = {
   methods: {
     showNewStatuses () {
       this.$store.commit('showNewStatuses', { timeline: this.timelineName })
+      this.paused = false
     },
     fetchOlderStatuses () {
       const store = this.$store
@@ -90,6 +99,21 @@ const Timeline = {
         this.fetchOlderStatuses()
       }
     }
+  },
+  watch: {
+    newStatusCount (count) {
+      if (!this.$store.state.config.streaming) {
+        return
+      }
+      if (count > 0) {
+        // only 'stream' them when you're scrolled to the top
+        if (window.pageYOffset < 15 && !this.paused) {
+          this.showNewStatuses()
+        } else {
+          this.paused = true
+        }
+      }
+    }
   }
 }
 
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 01f330c2..18e27c71 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -14,7 +14,7 @@
         {{$t('timeline.up_to_date')}}
       </div>
     </div>
-    <div class="panel-body">
+    <div class="panel-body base02-background">
       <div class="timeline">
         <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
         <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
@@ -30,7 +30,7 @@
         {{$t('user_card.followers')}}
       </div>
     </div>
-    <div class="panel-body">
+    <div class="panel-body base02-background">
       <div class="timeline">
         <user-card v-for="follower in followers" :user="follower" :showFollows="false"></user-card>
       </div>
@@ -42,7 +42,7 @@
         {{$t('user_card.followees')}}
       </div>
     </div>
-    <div class="panel-body">
+    <div class="panel-body base02-background">
       <div class="timeline">
         <user-card v-for="friend in friends" :user="friend" :showFollows="true"></user-card>
       </div>