timelines modes functionnal, fix #241 and fix #204

src/app/components/stream/stream-statuses/stream-statuses.component.html

@@ -6,12 +6,15 @@
     </div>
 
     <div class="stream-toots__new-notification" 
-        [class.stream-toots__new-notification--display]="bufferStream && bufferStream.length > 0"></div>
+        [class.stream-toots__new-notification--display]="bufferStream && bufferStream.length > 0 && !streamPositionnedAtTop"></div>
 
     <div class="stream-toots__content flexcroll" #statusstream (scroll)="onScroll()" tabindex="0">       
         <div *ngIf="displayError" class="stream-toots__error">{{displayError}}</div>
 
-        <!-- data-simplebar  -->
+        <div *ngIf="timelineLoadingMode === 3 && bufferStream && bufferStream.length > 0">
+            <a href (click)="loadBuffer()" class="stream-toots__load-buffer" title="load new items">{{ bufferStream.length }} new item<span *ngIf="bufferStream.length > 1">s</span></a>
+        </div>
+
         <div class="stream-toots__status" *ngFor="let statusWrapper of statuses" #status>
             <app-status 
                 [statusWrapper]="statusWrapper" [isThreadDisplay]="isThread"

src/app/components/stream/stream-statuses/stream-statuses.component.scss

@@ -8,6 +8,25 @@
     overflow: auto;
     position: relative;
 
+    &__load-buffer {
+        position: relative;
+        z-index: 1;
+        display:  inline-block;
+        border-bottom: 1px solid black;
+        padding: 10px;
+        margin: 0;
+        text-align: center;
+        width: 100%;
+        // border: 1px dotted greenyellow ;
+        transition: all .2s;
+        color: $status-secondary-color;
+
+        &:hover {
+            color: white;
+            text-decoration: none;
+        }
+    }
+
     &__error {
         padding: 20px 20px 0 20px;
         color: rgb(255, 113, 113);

src/app/components/stream/stream-statuses/stream-statuses.component.ts

@@ -11,6 +11,7 @@ import { MastodonWrapperService } from '../../../services/mastodon-wrapper.servi
 import { NotificationService } from '../../../services/notification.service';
 import { OpenThreadEvent, ToolsService } from '../../../services/tools.service';
 import { StatusWrapper } from '../../../models/common.model';
+import { TimeLineModeEnum } from '../../../states/settings.state';
 
 @Component({
     selector: 'app-stream-statuses',
@@ -24,6 +25,8 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
     displayError: string;
     hasContentWarnings = false;
 
+    private timelineLoadingMode: TimeLineModeEnum;
+
     private _streamElement: StreamElement;
     private account: AccountInfo;
     private websocketStreaming: StreamingWrapper;
@@ -75,6 +78,9 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit() {
+        let settings = this.toolsService.getSettings();
+        this.timelineLoadingMode = settings.timelineMode;
+
         this.goToTopSubscription = this.goToTop.subscribe(() => {
             this.applyGoToTop();
         });
@@ -112,7 +118,7 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
 
         this.deleteStatusSubscription = this.notificationService.deletedStatusStream.subscribe((status: StatusWrapper) => {
             if (status) {
-                this.statuses = this.statuses.filter(x => {       
+                this.statuses = this.statuses.filter(x => {
                     return !(x.status.url.replace('https://', '').split('/')[0] === status.provider.instance && x.status.id === status.status.id);
                 });
             }
@@ -158,7 +164,9 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
             if (update) {
                 if (update.type === EventEnum.update) {
                     if (!this.statuses.find(x => x.status.id == update.status.id)) {
-                        if (this.streamPositionnedAtTop) {
+                        if ((this.streamPositionnedAtTop || this.timelineLoadingMode === TimeLineModeEnum.Continuous)
+                            && this.timelineLoadingMode !== TimeLineModeEnum.SlowMode) {
+
                             if (this.isFiltered(update.status)) {
                                 return;
                             }
@@ -233,10 +241,12 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
     private scrolledToTop() {
         this.streamPositionnedAtTop = true;
 
-        this.loadBuffer();
+        if (this.timelineLoadingMode !== TimeLineModeEnum.SlowMode) {
+            this.loadBuffer();
+        }
     }
 
-    private loadBuffer() {
+    loadBuffer(): boolean {
         if (this.bufferWasCleared) {
             this.statuses.length = 0;
             this.bufferWasCleared = false;
@@ -253,6 +263,7 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
         }
 
         this.bufferStream.length = 0;
+        return false;
     }
 
     private scrolledToBottom() {
@@ -274,7 +285,7 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
                     this.statuses.push(wrapper);
                 }
 
-                if(!status || status.length === 0){
+                if (!status || status.length === 0) {
                     this.lastInfinityFetchReturnedNothing = true;
                 }
             })