2 files changed, 28 insertions, 57 deletions

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 74ab85d3..f28b85bd 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -2,6 +2,7 @@ import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue'
 import UserCard from '../user_card/user_card.vue'
+import { throttle } from 'lodash'
 
 const Timeline = {
   props: [
@@ -13,7 +14,8 @@ const Timeline = {
   ],
   data () {
     return {
-      paused: false
+      paused: false,
+      unfocused: false
     }
   },
   computed: {
@@ -65,8 +67,15 @@ const Timeline = {
       this.fetchFollowers()
     }
   },
+  mounted () {
+    if (typeof document.hidden !== 'undefined') {
+      document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
+      this.unfocused = document.hidden
+    }
+  },
   destroyed () {
     window.removeEventListener('scroll', this.scrollLoad)
+    if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
   methods: {
@@ -80,7 +89,7 @@ const Timeline = {
         this.paused = false
       }
     },
-    fetchOlderStatuses () {
+    fetchOlderStatuses: throttle(function () {
       const store = this.$store
       const credentials = store.state.users.currentUser.credentials
       store.commit('setLoading', { timeline: this.timelineName, value: true })
@@ -93,7 +102,7 @@ const Timeline = {
         userId: this.userId,
         tag: this.tag
       }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
-    },
+    }, 1000, this),
     fetchFollowers () {
       const id = this.userId
       this.$store.state.api.backendInteractor.fetchFollowers({ id })
@@ -105,13 +114,17 @@ const Timeline = {
         .then((friends) => this.$store.dispatch('addFriends', { friends }))
     },
     scrollLoad (e) {
-      const height = Math.max(document.body.offsetHeight, document.body.scrollHeight)
+      const bodyBRect = document.body.getBoundingClientRect()
+      const height = Math.max(bodyBRect.height, -(bodyBRect.y))
       if (this.timeline.loading === false &&
           this.$store.state.config.autoLoad &&
           this.$el.offsetHeight > 0 &&
           (window.innerHeight + window.pageYOffset) >= (height - 750)) {
         this.fetchOlderStatuses()
       }
+    },
+    handleVisibilityChange () {
+      this.unfocused = document.hidden
     }
   },
   watch: {
@@ -121,7 +134,10 @@ const Timeline = {
       }
       if (count > 0) {
         // only 'stream' them when you're scrolled to the top
-        if (window.pageYOffset < 15 && !this.paused) {
+        if (window.pageYOffset < 15 &&
+            !this.paused &&
+            !(this.unfocused && this.$store.state.config.pauseOnUnfocused)
+           ) {
           this.showNewStatuses()
         } else {
           this.paused = true
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c4e0fbce..bc7f74c2 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -4,13 +4,13 @@
       <div class="title">
         {{title}}
       </div>
-      <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
-        {{$t('timeline.show_new')}}{{newStatusCountStr}}
-      </button>
       <div @click.prevent class="loadmore-error alert error" v-if="timelineError">
         {{$t('timeline.error_fetching')}}
       </div>
-      <div @click.prevent class="loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
+      <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
+        {{$t('timeline.show_new')}}{{newStatusCountStr}}
+      </button>
+      <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError">
         {{$t('timeline.up_to_date')}}
       </div>
     </div>
@@ -57,53 +57,8 @@
 @import '../../_variables.scss';
 
 .timeline {
-  .timeline-heading {
-    position: relative;
-    display: flex;
-  }
-
-  .title {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 70%;
-  }
-
-  .loadmore-button {
-    position: absolute;
-    right: 0.6em;
-    font-size: 14px;
-
-    min-width: 6em;
-    height: 1.8em;
-    line-height: 100%;
-  }
-
   .loadmore-text {
-    position: absolute;
-    right: 0.6em;
-    font-size: 14px;
-    min-width: 6em;
-    font-family: sans-serif;
-    text-align: center;
-    padding: 0 0.5em 0 0.5em;
-    opacity: 0.8;
-    background-color: transparent;
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
-  }
-
-  .loadmore-error {
-    position: absolute;
-    right: 0.6em;
-    font-size: 14px;
-    min-width: 6em;
-    font-family: sans-serif;
-    text-align: center;
-    padding: 0 0.25em 0 0.25em;
-    margin: 0;
-    color: $fallback--fg;
-    color: var(--fg, $fallback--fg);
+    opacity: 1;
   }
 }
 
@@ -116,7 +71,7 @@
   border-color: var(--border, $fallback--border);
   padding: 10px;
   z-index: 1;
-  background-color: $fallback--btn;
-  background-color: var(--btn, $fallback--btn);
+  background-color: $fallback--fg;
+  background-color: var(--panel, $fallback--fg);
 }
 </style>