src/app/modules/legacy/components/cards/activity/activity-analytics-on-view.service.ts

+import { ElementRef, Injectable, OnDestroy } from "@angular/core";
+import { debounceTime } from "rxjs/operators";
+import { Subject, Subscription } from "rxjs";
+
+import { ScrollService } from "../../../../../services/ux/scroll";
+import { NewsfeedService } from "../../../../newsfeed/services/newsfeed.service";
+
+@Injectable()
+export class ActivityAnalyticsOnViewService implements OnDestroy {
+
+ protected element: HTMLElement;
+
+ protected entity;
+
+ protected visibility$: Subscription;
+
+ protected visibilitySubject: Subject<boolean> = new Subject();
+
+ protected scroll$: Subscription;
+
+ protected visible: boolean = false;
+
+ protected onViewFn: () => void;
+
+ protected enabled: boolean = true;
+
+ constructor(
+ protected scroll: ScrollService,
+ protected newsfeedService: NewsfeedService,
+ ) {
+ this.init();
+ }
+
+ setElementRef(elementRef: ElementRef | null) {
+ this.element = (elementRef && elementRef.nativeElement) || void 0;
+ return this;
+ }
+
+ setEntity(entity) {
+ this.entity = entity || void 0;
+ return this;
+ }
+
+ onView(fn: () => void) {
+ this.onViewFn = fn;
+ return this;
+ }
+
+ setEnabled(enabled: boolean) {
+ this.enabled = enabled;
+ return this;
+ }
+
+ init() {
+ this.visibility$ = this.visibilitySubject
+ .pipe(debounceTime(300))
+ .subscribe(() => {
+ if (this.entity && this.visible) {
+ this.scroll.unListen(this.scroll$);
+ this.newsfeedService.recordView(this.entity);
+
+ if (this.onViewFn) {
+ this.onViewFn();
+ }
+ }
+ });
+
+ this.scroll$ = this.scroll.listenForView()
+ .subscribe(() => {
+ if (!this.element) {
+ console.warn('Missing element ref');
+ return;
+ }
+
+ if (!this.element.offsetHeight || !this.enabled) {
+ return;
+ }
+
+ const top = this.element.offsetTop;
+ const bottom = top + this.element.offsetHeight;
+ const vpTop = this.scroll.view.scrollTop;
+ const vpBottom = vpTop + this.scroll.view.clientHeight;
+ const totalH = Math.max(bottom, vpBottom) - Math.min(top, vpTop);
+ const vpComp = totalH - this.scroll.view.clientHeight;
+ const vpEl = this.element.offsetHeight - vpComp;
+ const visible = vpEl <= 0 ? 0 : (vpEl / this.element.offsetHeight);
+
+ if (visible > 0 && !this.visible) {
+ this.visible = true;
+ this.visibilitySubject.next(this.visible);
+ } else {
+ this.visible = false;
+ }
+ });
+ }
+
+ ngOnDestroy() {
+ this.scroll.unListen(this.scroll$);
+
+ if (this.visibility$) {
+ this.visibility$.unsubscribe();
+ }
+ }
+}

src/app/modules/legacy/components/cards/activity/activity.ts

-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, ElementRef, Input, ViewChild } from '@angular/core';
+import {
+ Component,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ EventEmitter,
+ ElementRef,
+ Input,
+ ViewChild,
+ OnInit
+} from '@angular/core';
 
 import { Client } from '../../../../../services/api';
 import { Session } from '../../../../../services/session';
-import { ScrollService } from '../../../../../services/ux/scroll';
 import { AttachmentService } from '../../../../../services/attachment';
 import { TranslationService } from '../../../../../services/translation';
 import { OverlayModalService } from '../../../../../services/ux/overlay-modal';
 import { BoostCreatorComponent } from '../../../../boost/creator/creator.component';
 import { WireCreatorComponent } from '../../../../wire/creator/creator.component';
 import { MindsVideoComponent } from '../../../../media/components/video/video.component';
-import { NewsfeedService } from '../../../../newsfeed/services/newsfeed.service';
 import { EntitiesService } from "../../../../../common/services/entities.service";
 import { Router } from "@angular/router";
 import { BlockListService } from "../../../../../common/services/block-list.service";
+import { ActivityAnalyticsOnViewService } from "./activity-analytics-on-view.service";
 
 @Component({
  moduleId: module.id,
@@ -22,11 +30,12 @@ import { BlockListService } from "../../../../../common/services/block-list.serv
  },
  inputs: ['object', 'commentsToggle', 'focusedCommentGuid', 'visible', 'canDelete', 'showRatingToggle'],
  outputs: ['_delete: delete', 'commentsOpened', 'onViewed'],
+ providers: [ActivityAnalyticsOnViewService],
  templateUrl: 'activity.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
-export class Activity {
+export class Activity implements OnInit {
 
  minds = window.Minds;
 
@@ -42,6 +51,16 @@ export class Activity {
  @Input('boost-toggle')
  @Input() showBoostMenuOptions: boolean = false;
 
+ visibilityEvents: boolean = true;
+ @Input('visibilityEvents') set _visibilityEvents(visibilityEvents: boolean) {
+ this.visibilityEvents = visibilityEvents;
+
+ if (this.activityAnalyticsOnViewService) {
+ this.activityAnalyticsOnViewService
+ .setEnabled(this.visibilityEvents);
+ }
+ }
+
  type: string;
  element: any;
  visible: boolean = false;
@@ -52,7 +71,6 @@ export class Activity {
  _delete: EventEmitter<any> = new EventEmitter();
  commentsOpened: EventEmitter<any> = new EventEmitter();
  @Input() focusedCommentGuid: string;
- scroll_listener;
 
  childEventsEmitter: EventEmitter<any> = new EventEmitter();
  onViewed: EventEmitter<{activity, visible}> = new EventEmitter<{activity, visible}>();
@@ -80,9 +98,6 @@ export class Activity {
  constructor(
  public session: Session,
  public client: Client,
- public scroll: ScrollService,
- public newsfeedService: NewsfeedService,
- _element: ElementRef,
  public attachment: AttachmentService,
  public translationService: TranslationService,
  private overlayModal: OverlayModalService,
@@ -90,10 +105,21 @@ export class Activity {
  private entitiesService: EntitiesService,
  private router: Router,
  protected blockListService: BlockListService,
+ protected activityAnalyticsOnViewService: ActivityAnalyticsOnViewService,
+ elementRef: ElementRef,
  ) {
+ this.activityAnalyticsOnViewService
+ .setElementRef(elementRef)
+ .onView(() => {
+ this.onViewed.emit({activity: this.activity, visible: true});
+ });
+ }
 
- this.element = _element.nativeElement;
- this.isVisible();
+ ngOnInit() {
+ this.activityAnalyticsOnViewService
+ .setEnabled(this.visibilityEvents);
+
+ this.loadBlockedUsers();
  }
 
  set object(value: any) {
@@ -102,6 +128,8 @@ export class Activity {
  this.activity = value;
  this.activity.url = window.Minds.site_url + 'newsfeed/' + value.guid;
 
+ this.activityAnalyticsOnViewService.setEntity(this.activity);
+
  if (
  this.activity.custom_type == 'batch' 
  && this.activity.custom_data 
@@ -326,39 +354,10 @@ export class Activity {
  this.attachment.setNSFW(reasons);
  }
 
- private viewed:boolean = false;
-
- isVisible() {
- if (this.visible) {
- this.onViewed.emit({activity: this.activity, visible: true});
- return true;
- }
- this.scroll_listener = this.scroll.listenForView().subscribe((view) => {
- if (this.element.offsetTop - this.scroll.view.clientHeight <= this.scroll.view.scrollTop && !this.visible) {
- //stop listening
- this.scroll.unListen(this.scroll_listener);
- //make visible
- this.visible = true;
-
- //this.onViewed.emit({activity: this.activity, visible: true});
- //update the analytics
- this.newsfeedService.recordView(this.activity);
- }
- });
- }
-
  isUnlisted() {
  return this.activity.access_id === '0' || this.activity.access_id === 0;
  }
 
- ngOnInit() {
- this.loadBlockedUsers();
- }
-
- ngOnDestroy() {
- this.scroll.unListen(this.scroll_listener);
- }
-
  propagateTranslation($event) {
  if (this.activity.remind_object && this.translationService.isTranslatable(this.activity.remind_object)) {
  this.childEventsEmitter.emit({

src/app/modules/newsfeed/boost-rotator/boost-rotator.component.html

@@ -30,6 +30,7 @@
  visible="true"
  [hidden]="i != currentPosition"
  [showBoostMenuOptions]="true"
+ [visibilityEvents]="false"
  #activities
  ></minds-activity>
 </ng-container>