Merge branch 'master' of gitlab.com:minds/front into feat/a13-upgrade…

…-ben

src/app/common/common.module.ts

@@ -200,6 +200,7 @@ import { TagSelectorComponent } from './components/tag-selector/tag-selector.com
 
 import { ModalCloseButtonComponent } from './components/modal-close-button/modal-close-button.component';
 import { BlurhashDirective } from './directives/blurhash/blurhash.directive';
+import { ExperimentsService } from '../modules/experiments/experiments.service';
 import { AuthRedirectService } from './services/auth-redirect.service';
 
 const routes: Routes = [
@@ -541,9 +542,12 @@ const routes: Routes = [
     NSFWSelectorConsumerService,
     {
       provide: FeaturedContentService,
-      useFactory: boostedContentService =>
-        new FeaturedContentService(boostedContentService),
-      deps: [FeedsService],
+      useFactory: (
+        boostedContentService: FeedsService,
+        experimentsService: ExperimentsService
+      ): FeaturedContentService =>
+        new FeaturedContentService(boostedContentService, experimentsService),
+      deps: [FeedsService, ExperimentsService],
     },
     {
       provide: RouterHistoryService,

src/app/common/components/featured-content/featured-content.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { filter, first, switchMap, mergeMap, skip, take } from 'rxjs/operators';
 import { FeedsService } from '../../services/feeds.service';
 import { Subscription } from 'rxjs';
+import { ExperimentsService } from '../../../modules/experiments/experiments.service';
 
 @Injectable()
 export class FeaturedContentService {
@@ -10,7 +11,10 @@ export class FeaturedContentService {
   feedLength = 0;
   protected feedSubscription: Subscription;
 
-  constructor(protected feedsService: FeedsService) {
+  constructor(
+    protected feedsService: FeedsService,
+    private experiments: ExperimentsService
+  ) {
     this.onInit();
   }
 
@@ -20,6 +24,10 @@ export class FeaturedContentService {
       this.maximumOffset = this.feedLength - 1;
     });
 
+    if (this.experiments.hasVariation('new-user-boosts', true)) {
+      this.feedsService.setParams({ show_boosts_after_x: 604800 }); // 1 week
+    }
+
     this.feedsService
       .setLimit(12)
       .setOffset(0)

src/app/helpers/move-cursor-to-end.ts

@@ -0,0 +1,28 @@
+/**
+ * moves cursor to the end of a [contentEditable] div.
+ * may not work on <textArea /> or <input />
+ * @param { HTMLDivElement } el a div with contentEditable true
+ * @returns { void }
+ */
+function moveCursorToEnd(el) {
+  var range, selection;
+  if (document.createRange) {
+    //Firefox, Chrome, Opera, Safari, IE 9+
+    range = document.createRange(); //Create a range (a range is a like the selection but invisible)
+    range.selectNodeContents(el); //Select the entire contents of the element with the range
+    range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
+    selection = window.getSelection(); //get the selection object (allows you to change selection)
+    selection.removeAllRanges(); //remove any selections already made
+    selection.addRange(range); //make the range you have just created the visible selection
+    // @ts-ignore
+  } else if (document.selection) {
+    //IE 8 and lower
+    // @ts-ignore
+    range = document.body.createTextRange(); //Create a range (a range is a like the selection but invisible)
+    range.moveToElementText(el); //Select the entire contents of the element with the range
+    range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
+    range.select(); //Select the range (make it the visible selection
+  }
+}
+
+export default moveCursorToEnd;

src/app/modules/comments/comment/comment.component.html

@@ -62,8 +62,7 @@
           <span
             class="m-comment__timestamp m-commentOwnerRowItem__timestamp"
             [title]="comment.time_created * 1000 | date: 'medium'"
-            *ngIf="commentAge$ | async as commentAge"
-            >{{ commentAge | friendlydatediff }}</span
+            >{{ commentAge$ | async | friendlydatediff }}</span
           >
           <ng-container *ngIf="comment.edited">
             <span class="m-commentOwnerRow__dot">·</span>
@@ -590,6 +589,7 @@
       [canEdit]="canEdit"
       [canDelete]="canDelete"
       [showReplies]="showReplies"
+      (onHeightChange)="onHeightChange.emit($event)"
       *ngIf="comment.can_reply && showReplies"
     >
     </m-comments__thread>

src/app/modules/comments/comment/comment.component.ng.scss

@@ -9,6 +9,7 @@
   }
   .m-comment--compact {
     padding: 5px 30px 20px;
+
     .m-dropdown--v2 {
       margin-right: 0;
     }
@@ -18,7 +19,6 @@
     .m-commentOwnerRow__text {
       flex-direction: column;
       align-items: flex-start;
-      max-width: calc(100% - 50px);
 
       > div {
         display: flex;
@@ -28,9 +28,10 @@
 
       .m-commentOwnerRowItem__name,
       .m-commentOwnerRowItem__username {
-        max-width: 50%;
+        max-width: 70%;
       }
     }
+
     .minds-body {
       max-width: 100%;
       margin-left: 10px;
@@ -279,6 +280,7 @@
   }
 
   .m-comment__timestamp {
+    min-height: 20px;
     @include m-theme() {
       color: themed($m-textColor--tertiary);
     }

src/app/modules/comments/comment/comment.component.ts

@@ -1,3 +1,4 @@
+import { CommentPosterComponent } from './../poster/poster.component';
 import {
   Component,
   EventEmitter,
@@ -102,10 +103,15 @@ export class CommentComponentV2 implements OnChanges, OnInit, AfterViewInit {
   @Input() canDelete: boolean = false;
   @Input() hideToolbar: boolean = false;
 
-  @Input() poster: any;
+  @Input() poster: CommentPosterComponent;
 
   @Output() onReply = new EventEmitter();
 
+  @Output() onHeightChange: EventEmitter<{
+    oldHeight: number;
+    newHeight: number;
+  }> = new EventEmitter();
+
   menuOpened$: BehaviorSubject<boolean> = new BehaviorSubject(false);
   posterMenuOpened$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
@@ -429,11 +435,22 @@ export class CommentComponentV2 implements OnChanges, OnInit, AfterViewInit {
     if (this.level === 2 && this.poster) {
       const targetTag = `@${this.comment.ownerObj.username}`;
 
-      if (this.poster.content.indexOf(targetTag) === -1) {
-        this.poster.content = `${targetTag} ${this.poster.content}`;
-        this.poster.detectChanges();
+      const posterEl = this.poster?.elRef?.nativeElement;
+      if (posterEl) {
+        // set input content
+        if (this.poster.content.indexOf(targetTag) === -1) {
+          this.poster.content = `${targetTag} ${this.poster.content}`;
+          this.poster.detectChanges();
+        }
+        // scroll poster into view and stick it to the bottom (with 10vh offset)
+        posterEl?.scrollIntoView?.({
+          behavior: 'smooth',
+          block: 'end',
+        });
+
+        // focus the input
+        this.poster?.focus();
       }
-
       return;
     }
     this.showReplies = !this.showReplies;

src/app/modules/comments/comments.service.ts

@@ -64,6 +64,7 @@ export class CommentsService {
       entity_guid: opts.entity_guid,
       parent_path: opts.parent_path,
       limit: opts.limit,
+      desc: opts.descending,
       include_offset: opts.includeOffset || false,
     };
 

src/app/modules/comments/entity-outlet/entity-outlet.component.html

@@ -80,6 +80,7 @@
         (delete)="delete(i)"
         (saved)="edited(i, $event)"
         (onReply)="reply($event.comment)"
+        (onHeightChange)="onHeightChange.emit($event)"
       ></m-comment>
     </ng-container>
   </div>
@@ -93,5 +94,6 @@
   [entity]="entity"
   [canDelete]="canDelete"
   [compact]="compact"
+  (onHeightChange)="onHeightChange.emit($event)"
 >
 </m-comments__tree>

src/app/modules/comments/entity-outlet/entity-outlet.component.ts

@@ -52,6 +52,10 @@ export class CommentsEntityOutletComponent implements OnInit, OnDestroy {
   @Input() fixedHeight = false;
   @Input() showOnlyPoster = true;
   @Input() compact = false;
+  @Output() onHeightChange: EventEmitter<{
+    oldHeight: number;
+    newHeight: number;
+  }> = new EventEmitter();
   optimisticList: Array<any> = [];
 
   constructor(

src/app/modules/comments/poster/poster.component.ng.scss

@@ -0,0 +1,3 @@
+:host {
+  scroll-margin: 10vh;
+}

src/app/modules/comments/poster/poster.component.ts

@@ -28,11 +28,13 @@ import { AuthModalService } from '../../auth/modal/auth-modal.service';
 import { IsCommentingService } from './is-commenting.service';
 import { Router } from '@angular/router';
 import isMobile from '../../../helpers/is-mobile';
+import moveCursorToEnd from '../../../helpers/move-cursor-to-end';
 
 @Component({
   selector: 'm-comment__poster',
   templateUrl: 'poster.component.html',
   providers: [AttachmentService],
+  styleUrls: ['poster.component.ng.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CommentPosterComponent implements OnInit, OnDestroy {
@@ -49,7 +51,7 @@ export class CommentPosterComponent implements OnInit, OnDestroy {
   @Output('posted') posted$: EventEmitter<any> = new EventEmitter();
 
   @ViewChild('message')
-  messageTextarea: Textarea;
+  textArea: Textarea;
 
   menuOpened$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
@@ -76,7 +78,8 @@ export class CommentPosterComponent implements OnInit, OnDestroy {
     private cd: ChangeDetectorRef,
     private configs: ConfigsService,
     private authModalService: AuthModalService,
-    private isCommentingService: IsCommentingService
+    private isCommentingService: IsCommentingService,
+    public elRef: ElementRef
   ) {}
 
   ngOnInit() {
@@ -258,7 +261,7 @@ export class CommentPosterComponent implements OnInit, OnDestroy {
    * sets caret position
    */
   updateCaretPosition() {
-    const element = this.messageTextarea?.editorControl?.nativeElement;
+    const element = this.textArea?.editorControl?.nativeElement;
     var caretOffset = 0;
 
     if (element && window.getSelection) {
@@ -323,4 +326,21 @@ export class CommentPosterComponent implements OnInit, OnDestroy {
     this.cd.markForCheck();
     this.cd.detectChanges();
   }
+
+  /**
+   * focuses the input
+   * @param { boolean } shouldMoveCursorToEnd should move cursor to end
+   * @returns { void }
+   */
+  focus(shouldMoveCursorToEnd: boolean = true) {
+    const el = this.textArea?.editorControl?.nativeElement;
+    if (el) {
+      el.focus({
+        preventScroll: true,
+      });
+      if (shouldMoveCursorToEnd) {
+        moveCursorToEnd(el);
+      }
+    }
+  }
 }