From 46f23b7de7a5e27dd4f9f13f063d263fbb1ec85d Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 13 Nov 2017 01:06:48 +0200
Subject: [PATCH] Add an option to automatically show new posts when scrolled
 to the top, also add fade-in animation for posts.

---
 src/components/settings/settings.js  |  4 ++++
 src/components/settings/settings.vue |  4 ++++
 src/components/status/status.vue     | 16 +++++++++++++++-
 src/components/timeline/timeline.js  | 24 ++++++++++++++++++++++++
 src/i18n/messages.js                 |  2 ++
 src/modules/config.js                |  1 +
 6 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index b3bb82909f..b88937bbcc 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -9,6 +9,7 @@ const settings = {
       hideNsfwLocal: this.$store.state.config.hideNsfw,
       muteWordsString: this.$store.state.config.muteWords.join('\n'),
       autoLoadLocal: this.$store.state.config.autoLoad,
+      streamingLocal: this.$store.state.config.streaming,
       hoverPreviewLocal: this.$store.state.config.hoverPreview
     }
   },
@@ -33,6 +34,9 @@ const settings = {
     autoLoadLocal (value) {
       this.$store.dispatch('setOption', { name: 'autoLoad', value })
     },
+    streamingLocal (value) {
+      this.$store.dispatch('setOption', { name: 'streaming', value })
+    },
     hoverPreviewLocal (value) {
       this.$store.dispatch('setOption', { name: 'hoverPreview', value })
     },
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 5978e4ed54..6a311d5594 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -32,6 +32,10 @@
                 <input type="checkbox" id="autoLoad" v-model="autoLoadLocal">
                 <label for="autoLoad">{{$t('settings.autoload')}}</label>
             </li>
+            <li>
+                <input type="checkbox" id="streaming" v-model="streamingLocal">
+                <label for="streaming">{{$t('settings.streaming')}}</label>
+            </li>
             <li>
                 <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
                 <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index cc315a9043..33851b6cb1 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -14,7 +14,7 @@
     </div>
     <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/>
   </div>
-  <div class="status-el base00-background base03-border" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
+  <div class="status-el base00-background base03-border status-fadein" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
     <template v-if="muted">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -226,6 +226,20 @@
      }
  }
 
+ .status-fadein {
+   animation-duration: 0.5s;
+   animation-name: fadein;
+ }
+
+ @keyframes fadein {
+   from {
+     opacity: 0;
+   }
+   to {
+     opacity: 1;
+   }
+ }
+
  .greentext {
      color: green;
  }
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 6968bc6fec..613b8a34a9 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/i18n/messages.js b/src/i18n/messages.js
index b9a4f756ee..cedb7fd706 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -103,6 +103,7 @@ const fi = {
     hide_attachments_in_convo: 'Piilota liitteet keskusteluissa',
     nsfw_clickthrough: 'Piilota NSFW liitteet klikkauksen taakse.',
     autoload: 'Lataa vanhempia viestejä automaattisesti ruudun pohjalla',
+    streaming: 'Näytä uudet viestit automaattisesti ollessasi ruudun huipulla',
     reply_link_preview: 'Keskusteluiden vastauslinkkien esikatselu'
   },
   notifications: {
@@ -186,6 +187,7 @@ const en = {
     hide_attachments_in_convo: 'Hide attachments in conversations',
     nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding',
     autoload: 'Enable automatic loading when scrolled to the bottom',
+    streaming: 'Enable automatic streaming of new posts when scrolled to the top',
     reply_link_preview: 'Enable reply-link preview on mouse hover'
   },
   notifications: {
diff --git a/src/modules/config.js b/src/modules/config.js
index f7d6e9c845..ac17747e8a 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -8,6 +8,7 @@ const defaultState = {
   hideAttachmentsInConv: false,
   hideNsfw: true,
   autoLoad: true,
+  streaming: false,
   hoverPreview: true,
   muteWords: []
 }