(feat): adds metrics to posts

src/app/common/components/post-menu/v2/menu.component.scss

@@ -8,7 +8,7 @@
   i {
     font-size: 32px;
     @include m-theme() {
-      color: themed($m-textColor--secondary);
+      color: themed($m-textColor--tertiary);
     }
   }
 }

src/app/modules/newsfeed/activity/activity.component.html

 <m-activity__ownerBlock *ngIf="service.displayOptions.showOwnerBlock">
   <ng-container class="m-activityOwnerBlock__right">
+    <m-activity__metrics></m-activity__metrics>
     <m-activity__menu></m-activity__menu>
   </ng-container>
 </m-activity__ownerBlock>

src/app/modules/newsfeed/activity/activity.module.ts

@@ -20,6 +20,7 @@ import { LegacyModule } from '../../legacy/legacy.module';
 import { ActivityMenuComponent } from './menu/menu.component';
 import { PostMenuModule } from '../../../common/components/post-menu/post-menu.module';
 import { ActivityNsfwConsentComponent } from './nsfw-consent/nsfw-consent.component';
+import { ActivityMetricsComponent } from './metrics/metrics.component';
 
 @NgModule({
   imports: [
@@ -43,6 +44,7 @@ import { ActivityNsfwConsentComponent } from './nsfw-consent/nsfw-consent.compon
     ActivityToolbarComponent,
     ActivityMenuComponent,
     ActivityNsfwConsentComponent,
+    ActivityMetricsComponent,
   ],
   providers: [],
   exports: [ActivityComponent],

src/app/modules/newsfeed/activity/activity.service.ts

@@ -33,6 +33,7 @@ export type ActivityEntity = {
   ephemeral?: boolean;
   nsfw: Array<number>;
   paywall: boolean;
+  impressions: number;
 };
 
 @Injectable()

src/app/modules/newsfeed/activity/metrics/metrics.component.html

+<span class="m-activityMetrics__views">{{ views | async }} views</span>

src/app/modules/newsfeed/activity/metrics/metrics.component.scss

+m-activity__metrics > span {
+  font-size: 14px;
+  @include m-theme() {
+    color: themed($m-textColor--tertiary);
+  }
+}

src/app/modules/newsfeed/activity/metrics/metrics.component.ts

+import {
+  Component,
+  HostListener,
+  ViewChild,
+  Input,
+  ElementRef,
+} from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { ActivityService, ActivityEntity } from '../activity.service';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'm-activity__metrics',
+  templateUrl: 'metrics.component.html',
+})
+export class ActivityMetricsComponent {
+  views: Observable<number> = this.service.entity$.pipe(
+    map((entity: ActivityEntity) => {
+      return entity.impressions;
+    })
+  );
+
+  constructor(public service: ActivityService) {}
+}

src/app/modules/newsfeed/activity/owner-block/owner-block.component.html

@@ -56,7 +56,7 @@
   </ng-container>
 </div>
 
-<div class=".m-activityOwnerBlock__right">
+<div class="m-activityOwnerBlock__right">
   <ng-content select=".m-activityOwnerBlock__right"></ng-content>
 </div>
 

src/app/modules/newsfeed/activity/owner-block/owner-block.component.scss

@@ -32,6 +32,12 @@ m-activity__ownerBlock {
   }
 }
 
+.m-activityOwnerBlock__right {
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row;
+}
+
 .m-activityOwnerBlock__displayName {
   display: block;
   font-size: 16px;