(wip): See more feed list

src/app/common/components/overlay-modal/overlay-modal.component.ts

-import { Component, AfterViewInit, ViewChild, ComponentFactoryResolver, ComponentRef, Input } from '@angular/core';
+import {
+ Component,
+ AfterViewInit,
+ ViewChild,
+ ComponentFactoryResolver,
+ ComponentRef,
+ Input,
+ Injector, ElementRef
+} from '@angular/core';
 
 import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
 import { OverlayModalService } from '../../../services/ux/overlay-modal';
@@ -8,7 +16,7 @@ import { OverlayModalService } from '../../../services/ux/overlay-modal';
  selector: 'm-overlay-modal',
  template: `
  <div class="m-overlay-modal--backdrop" [hidden]="hidden" (click)="dismiss()"></div>
- <div class="m-overlay-modal {{class}}" [hidden]="hidden">
+ <div class="m-overlay-modal {{class}}" [hidden]="hidden" #modalElement>
  <a class="m-overlay-modal--close" (click)="dismiss()"><i class="material-icons">close</i></a>
  <ng-template dynamic-host></ng-template>
  </div>
@@ -25,6 +33,8 @@ export class OverlayModalComponent implements AfterViewInit {
  private componentRef: ComponentRef<{}>;
  private componentInstance;
 
+ @ViewChild('modalElement', { static: true }) protected modalElement: ElementRef;
+
  constructor(
  private service: OverlayModalService,
  private _componentFactoryResolver: ComponentFactoryResolver
@@ -34,7 +44,7 @@ export class OverlayModalComponent implements AfterViewInit {
  this.service.setContainer(this);
  }
 
- create(componentClass, opts?) {
+ create(componentClass, opts?, injector?: Injector) {
  this.dismiss();
 
  opts = { ...{
@@ -52,8 +62,9 @@ export class OverlayModalComponent implements AfterViewInit {
 
  viewContainerRef.clear();
 
- this.componentRef = viewContainerRef.createComponent(componentFactory);
+ this.componentRef = viewContainerRef.createComponent(componentFactory, void 0, injector);
  this.componentInstance = this.componentRef.instance;
+ this.componentInstance.parent = this.modalElement.nativeElement;
  }
 
  setData(data) {

src/app/modules/pro/channel/list-modal/list-modal.component.html

+<div class="m-pro--channel-list-modal">
+ <div class="m-pro--channel-list-modal--grid">
+ <ng-container *ngFor="let entity$ of (entities | async); let i = index">
+ <ng-container *ngIf="type === 'images' || type === 'videos' || type === 'blogs'">
+ <m-pro--channel-tile *ngIf="entity$ | async as entity"
+ [entity]="entity"
+ (click)="expand(entity)"
+ ></m-pro--channel-tile>
+ </ng-container>
+ </ng-container>
+ </div>
+
+ <infinite-scroll
+ distance="25%"
+ (load)="loadMore()"
+ [moreData]="feedsService.hasMore | async"
+ [inProgress]="feedsService.inProgress | async"
+ [scrollSource]="this.parent"
+ ></infinite-scroll>
+</div>
+
+<m-overlay-modal #overlayModal></m-overlay-modal>

src/app/modules/pro/channel/list-modal/list-modal.component.scss

+.m-pro--channel-list-modal--grid {
+ display: grid;
+ grid-gap: 16px;
+ grid-template-columns: repeat(3, 1fr);
+}

src/app/modules/pro/channel/list-modal/list-modal.component.ts

+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, ViewChild } from '@angular/core';
+import { ProChannelService } from '../channel.service';
+import { FeedsService } from '../../../../common/services/feeds.service';
+import { ProContentModalComponent } from '../content-modal/modal.component';
+import { OverlayModalService } from '../../../../services/ux/overlay-modal';
+import { OverlayModalComponent } from '../../../../common/components/overlay-modal/overlay-modal.component';
+
+@Component({
+ selector: 'm-pro--channel-list-modal',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl: 'list-modal.component.html',
+ providers: [OverlayModalService],
+})
+export class ProChannelListModal {
+
+ type: string;
+
+ algorithm: string;
+
+ query: string;
+
+ parent: HTMLDivElement;
+
+ @ViewChild('overlayModal', { static: true }) protected overlayModal: OverlayModalComponent;
+
+ set data({ type, query }) {
+ this.type = type;
+ this.query = query;
+ }
+
+ constructor(
+ protected channelService: ProChannelService,
+ protected feedsService: FeedsService,
+ protected modalService: OverlayModalService,
+ protected cd: ChangeDetectorRef,
+ protected injector: Injector,
+ ) {
+ }
+
+ ngAfterViewInit() {
+ this.modalService.setContainer(this.overlayModal);
+
+ this.load(true);
+ }
+
+ async load(refresh: boolean = false) {
+ if (refresh) {
+ this.feedsService.clear();
+ }
+
+ this.detectChanges();
+
+ try {
+ this.feedsService
+ .setEndpoint(`api/v2/feeds/channel/${this.channelService.currentChannel.guid}/${this.type}/${this.algorithm}`)
+ .setLimit(12)
+ .fetch();
+
+ } catch (e) {
+ console.error('ProChannelListModal.load', e);
+ }
+ }
+
+ get entities() {
+ return this.feedsService.feed;
+ }
+
+ loadMore() {
+ this.feedsService.loadMore();
+ }
+
+ async expand(entity) {
+ if (entity.subtype !== 'video' && entity.subtype !== 'image') {
+ return;
+ }
+
+ this.modalService.create(ProContentModalComponent, entity, {
+ class: 'm-overlayModal--media'
+ }, this.injector).present();
+ }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
+}

src/app/modules/pro/channel/list/list.component.html

@@ -48,9 +48,9 @@
  <li
  class="m-proChannelListContentList__seeMore"
  *ngIf="entities && displaySeeMoreTile"
- [routerLink]="seeMoreRoute"
+ (click)="seeMore()"
  i18n
- >
+  >
  See more
  </li>
  </ul>

src/app/modules/pro/channel/list/list.component.ts

-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from "@angular/router";
 import { Subscription } from "rxjs";
 import { FeedsService } from "../../../../common/services/feeds.service";
@@ -6,6 +6,7 @@ import { ProChannelService } from '../channel.service';
 import { first } from "rxjs/operators";
 import { OverlayModalService } from "../../../../services/ux/overlay-modal";
 import { ProContentModalComponent } from "../content-modal/modal.component";
+import { ProChannelListModal } from '../list-modal/list-modal.component';
 
 @Component({
  selector: 'm-pro--channel-list',
@@ -35,6 +36,7 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  protected route: ActivatedRoute,
  protected router: Router,
  protected cd: ChangeDetectorRef,
+ protected injector: Injector,
  ) {
  }
 
@@ -129,8 +131,10 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  this.cd.detectChanges();
  }
 
- get seeMoreRoute() {
- return ['/', this.channelService.currentChannel.username];
+ seeMore() {
+ this.modalService
+ .create(ProChannelListModal, { type: this.type, algorithm: 'latest', query: this.query }, void 0, this.injector)
+ .present();
  }
 
  get channelUsername() {

src/app/modules/pro/pro.module.ts

@@ -20,6 +20,7 @@ import { LegacyModule } from "../legacy/legacy.module";
 import { WireModule } from "../wire/wire.module";
 import { ProContentModalComponent } from "./channel/content-modal/modal.component";
 import { VideoModule } from "../media/components/video/video.module";
+import { ProChannelListModal } from './channel/list-modal/list-modal.component';
 
 const routes: Routes = [
  {
@@ -82,6 +83,7 @@ const routes: Routes = [
  ProSubscriptionComponent,
  ProTileComponent,
  ProContentModalComponent,
+ ProChannelListModal,
  ProChannelComponent,
  ProChannelSignupComponent,
  ProChannelListComponent,
@@ -92,6 +94,7 @@ const routes: Routes = [
  exports: [],
  entryComponents: [
  ProMarketingComponent,
+ ProChannelListModal,
  ],
 })
 export class ProModule {

src/app/services/ux/overlay-modal.ts

-import { Injectable } from '@angular/core';
+import { Injectable, Injector } from '@angular/core';
 
 import { OverlayModalComponent } from '../../common/components/overlay-modal/overlay-modal.component';
 
@@ -18,14 +18,14 @@ export class OverlayModalService {
  return this;
  }
 
- create(component, data?, opts?) {
+ create(component, data?, opts?, injector?: Injector) {
  if (!this.container) {
  throw new Error('Missing overlay container');
  }
 
  this._onDidDismissFn = void 0;
 
- this.container.create(component, opts);
+ this.container.create(component, opts, injector);
  this.container.setData(data);
 
  if (opts) {