(wip): Load channel and content tiles

src/app/interfaces/entities.ts

@@ -68,6 +68,8 @@ export interface MindsUser {
  mature_lock?: boolean;
  tags?: Array<string>;
  toaster_notifications?: boolean;
+ pro?: boolean;
+ pro_settings?: { [key: string]: string };
 }
 
 export interface MindsGroup {

src/app/modules/groups/profile/feed/sorted.component.ts

@@ -64,8 +64,8 @@ export class GroupProfileFeedSortedComponent {
  @ViewChild('poster', { static: false }) protected poster: PosterComponent;
 
  constructor(
- protected service: GroupsService,
  public feedsService: FeedsService,
+ protected service: GroupsService,
  protected sortedService: SortedService,
  protected session: Session,
  protected router: Router,

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

-<div class="m-proChannel__topbar">
- <img class="m-proChannelTopbar__logo"
- src="https://yt3.ggpht.com/a/AGF-l7-24Iy1c6QKw0mRaO56Fj5jUcGP5Al9J7_2FQ=s900-mo-c-c0xffffffff-rj-k-no">
- <input>
- <a routerLink="/pro/{{username}}/videos" [routerLinkActive]="'active'">Videos</a>
- <a routerLink="/pro/{{username}}/images" [routerLinkActive]="'active'">Images</a>
- <a routerLink="/pro/{{username}}/articles" [routerLinkActive]="'active'">Articles</a>
- <a routerLink="/pro/{{username}}/groups" [routerLinkActive]="'active'">Groups</a>
- <a routerLink="/pro/{{username}}/donate" [routerLinkActive]="'active'">Donate</a>
- <a routerLink="/pro/{{username}}/signup" [routerLinkActive]="'active'">Signup | Login</a>
-</div>
+<div
+ *ngIf="channel"
+ class="m-pro--channel"
+ [ngStyle]="{ 'background-image': 'url(' + channel.pro_settings.background_image + ')' }"
+>
+ <div class="m-proChannel__topbar">
+ <img
+ class="m-proChannelTopbar__logo"
+ [src]="channel.pro_settings.logo_image"
+ >
+
+ <input type="search" placeholder="Search..." i18n>
+
+ <a [routerLink]="['/pro', channel.username, 'videos']" routerLinkActive="active" i18n>Videos</a>
+ <a [routerLink]="['/pro', channel.username, 'images']" routerLinkActive="active" i18n>Images</a>
+ <a [routerLink]="['/pro', channel.username, 'articles']" routerLinkActive="active" i18n>Articles</a>
+ <a [routerLink]="['/pro', channel.username, 'groups']" routerLinkActive="active" i18n>Groups</a>
+ <a [routerLink]="['/pro', channel.username, 'feed']" routerLinkActive="active" i18n>Feed</a>
+<!-- <a [routerLink]="['/pro', username, 'donate']" routerLinkActive="active">Donate</a>-->
+<!-- <a [routerLink]="['/pro', username, 'signup']" routerLinkActive="active">Signup | Login</a>-->
+ </div>
 
-<div class="m-proChannel__body">
- <router-outlet></router-outlet>
+ <div class="m-proChannel__body">
+ <router-outlet></router-outlet>
+ </div>
 </div>

src/app/modules/pro/channel/channel.component.scss

-@import "defaults";
-
-m-pro--channel {
+.m-pro--channel {
  display: grid;
  grid-template-rows: repeat(2, 100px) 1fr;
  grid-template-columns: repeat(12, 1fr);
- background-image: url("http://localhost:8080/fs/v1/banners/984862704493895680/fat/1560185652");
+ background: none no-repeat fixed;
  background-size: cover;
- background-repeat: no-repeat;
- background-attachment: fixed;
+ min-height: 100%;
 
  .m-proChannel__topbar {
  grid-row: 1 / span 1;

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

-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from "@angular/router";
 import { Session } from "../../../services/session";
 import { Subscription } from "rxjs";
@@ -8,50 +8,83 @@ import { Title } from "@angular/platform-browser";
 import { ProService } from "../pro.service";
 
 @Component({
+ providers: [
+ ProService,
+ ],
  selector: 'm-pro--channel',
- templateUrl: 'channel.component.html'
+ templateUrl: 'channel.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
 })
-
-export class ProChannelComponent {
- minds = window.Minds;
-
+export class ProChannelComponent implements OnInit, OnDestroy {
  username: string;
 
- user: MindsUser = null;
+ channel: MindsUser;
+
+ inProgress: boolean;
 
  error: string;
 
- paramsSubscription: Subscription;
+ params$: Subscription;
 
  constructor(
- public session: Session,
- private proService: ProService,
- private client: Client,
- private title: Title,
- private router: Router,
- private route: ActivatedRoute,
+ protected session: Session,
+ protected proService: ProService,
+ protected client: Client,
+ protected title: Title,
+ protected router: Router,
+ protected route: ActivatedRoute,
+ protected cd: ChangeDetectorRef,
  ) {
- this.paramsSubscription = this.route.params.subscribe(params => {
+ }
+
+ ngOnInit() {
+ this.params$ = this.route.params.subscribe(params => {
  if (params['username']) {
  this.username = params['username'];
  }
 
- if (!this.session.isLoggedIn()) {
- this.router.navigate(['/pro', this.username, 'signup']);
- }
+ // if (!this.session.isLoggedIn()) {
+ // this.router.navigate(['/pro', this.username, 'signup']);
+ // return;
+ // }
 
- this.loadChannel();
+ if (this.username && (!this.channel || this.channel.username != this.username)) {
+ this.load();
+ }
  });
  }
 
- async loadChannel() {
+ ngOnDestroy() {
+ this.params$.unsubscribe();
+ }
+
+ async load() {
+ if (!this.username) {
+ return;
+ }
+
+ this.inProgress = true;
+ this.detectChanges();
+
  try {
- this.user = await this.proService.loadChannel(this.username);
+ this.channel = await this.proService.load(this.username);
+
+ let title = this.channel.pro_settings.title || this.channel.name;
 
- this.title.setTitle(`${this.user.name} (@${this.user.username})`);
+ if (this.channel.pro_settings.headline) {
+ title += ` - ${this.channel.pro_settings.headline}`;
+ }
+
+ this.title.setTitle(title);
  } catch (e) {
  this.error = e.getMessage();
  }
+
+ this.detectChanges();
  }
 
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
 }

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

+<!--&lt;!&ndash; TODO: i18n &ndash;&gt;-->
+<!--<h1>{{type | titlecase}}</h1>-->
+<!--<div class="m-proChannelList__content">-->
+<!-- <i class="material-icons">keyboard_arrow_left</i>-->
+<!-- <ul class="m-proChannelListContent__list">-->
+<!-- &lt;!&ndash; <li *ngFor="let entity of (feedsService.feed | async); let i = index">&ndash;&gt;-->
+<!-- &lt;!&ndash; TODO: custom tile here &ndash;&gt;-->
+<!-- &lt;!&ndash; </li>&ndash;&gt;-->
+<!-- <li>-->
+<!-- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>-->
+<!-- </li>-->
+<!-- <li>-->
+<!-- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>-->
+<!-- </li>-->
+<!-- <li>-->
+<!-- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>-->
+<!-- </li>-->
+<!-- <li>-->
+<!-- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>-->
+<!-- </li>-->
+<!-- <li>-->
+<!-- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>-->
+<!-- </li>-->
+<!-- <li>-->
+<!-- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>-->
+<!-- </li>-->
+<!-- <li>-->
+<!-- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>-->
+<!-- </li>-->
+<!-- <li>-->
+<!-- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>-->
+<!-- </li>-->
+
+<!-- </ul>-->
+<!-- <i class="material-icons">keyboard_arrow_right</i>-->
+<!--</div>-->
+<!--&lt;!&ndash; TODO: add infinite scroll or something to load more &ndash;&gt;-->
+
+<div class="m-proChannelList__content">
+ <ul class="m-proChannelListContent__list">
+ <li *ngFor="let entity of (feedsService.feed | async)">
+ <img style="max-height: 320px; width: 100%; height: 100%; object-fit: cover" [src]="(entity | async).thumbnail_src" alt="">
+ </li>
+ </ul>
+</div>

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

-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from "@angular/router";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from "@angular/router";
 import { Subscription } from "rxjs";
 import { FeedsService } from "../../../../common/services/feeds.service";
 import { ProService } from "../../pro.service";
 
 @Component({
  selector: 'm-pro--channel-list',
- template: `
- <!-- TODO: i18n -->
- <h1>{{type | titlecase}}</h1>
- <div class="m-proChannelList__content">
- <i class="material-icons">keyboard_arrow_left</i>
- <ul class="m-proChannelListContent__list">
-<!-- <li *ngFor="let entity of (feedsService.feed | async); let i = index">-->
- <!-- TODO: custom tile here -->
-<!-- </li>-->
- <li>
- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>
- </li>
- <li>
- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>
- </li>
- <li>
- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>
- </li>
- <li>
- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>
- </li>
- <li>
- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>
- </li>
- <li>
- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>
- </li>
- <li>
- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>
- </li>
- <li>
- <video src="https://cdn-cinemr.minds.com/cinemr_com/943902545938489353/720.mp4"></video>
- </li>
-
- </ul>
- <i class="material-icons">keyboard_arrow_right</i>
- </div>
- <!-- TODO: add infinite scroll or something to load more -->
- `
+ templateUrl: 'list.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
 })
-
 export class ProChannelListComponent implements OnInit {
  type: string;
 
- paramsSubscription: Subscription;
+ params$: Subscription;
 
  constructor(
  public feedsService: FeedsService,
  private proService: ProService,
  private route: ActivatedRoute,
- private router: Router,
+ protected cd: ChangeDetectorRef,
  ) {
+ }
 
- this.paramsSubscription = this.route.params.subscribe(params => {
-
-
+ ngOnInit() {
+ this.params$ = this.route.params.subscribe(params => {
  if (params['type']) {
  this.type = params['type'];
  }
 
- switch (this.type) {
+ switch (params['type']) {
  case 'videos':
+ this.type = 'videos';
  break;
  case 'images':
+ this.type = 'images';
  break;
  case 'articles':
+ this.type = 'blogs';
  break;
  case 'groups':
+ this.type = 'groups';
+ break;
+ case 'feed':
+ this.type = 'activities';
  break;
  default:
-
+ throw new Error('Unknown type');
  }
 
- this.load();
-
+ this.load(true);
  });
- }
-
- ngOnInit() {
-
- }
+}
 
  async load(refresh: boolean = false) {
- if (!refresh) {
- return;
- }
-
  if (refresh) {
  this.feedsService.clear();
  }
 
- // this.detectChanges();
+ this.detectChanges();
 
  try {
-
  this.feedsService
  .setEndpoint(`api/v2/feeds/container/${this.proService.currentChannel.guid}/${this.type}`)
  .setLimit(8)
@@ -110,10 +69,15 @@ export class ProChannelListComponent implements OnInit {
  console.error('ProChannelListComponent.load', e);
  }
 
- // this.detectChanges();
+ this.detectChanges();
  }
 
  loadNext() {
  this.feedsService.loadMore();
  }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
 }

src/app/modules/pro/pro.service.ts

@@ -23,7 +23,7 @@ export class ProService {
 
  async enable(): Promise<boolean> {
  // TODO: Payments
- await this.client.post('api/v2/pro/enable');
+ await this.client.post('api/v2/pro');
  return true;
  }
 
@@ -32,9 +32,11 @@ export class ProService {
  return true;
  }
 
- async loadChannel(username: string) {
+ async load(id: string) {
  try {
- const response: MindsChannelResponse = <MindsChannelResponse>await this.client.get(`api/v1/channel/${username}`);
+ this.currentChannel = void 0;
+
+ const response: MindsChannelResponse = await this.client.get(`api/v1/channel/${id}`) as MindsChannelResponse;
 
  this.currentChannel = response.channel;