Merge branch 'feature/streaming-posts' into 'develop'

Streaming posts

See merge request pleroma/pleroma-fe!151

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 })
     },

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>

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>
@@ -232,6 +232,20 @@
      }
  }
 
+ .status-fadein {
+   animation-duration: 0.5s;
+   animation-name: fadein;
+ }
+
+ @keyframes fadein {
+   from {
+     opacity: 0;
+   }
+   to {
+     opacity: 1;
+   }
+ }
+
  .greentext {
      color: green;
  }

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
+        }
+      }
+    }
   }
 }