(feat): media & blog tile

(feat): use new api/v2/feeds/channel endpoint
(fix): cleanup

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;-->
-
 <h1 [ngSwitch]="type">
  <ng-template ngSwitchCase="videos" i18n>Videos</ng-template>
  <ng-template ngSwitchCase="images" i18n>Images</ng-template>
@@ -46,17 +8,22 @@
 </h1>
 
 <div class="m-proChannelList__content">
- <ng-container *ngIf="type === 'images' || type === 'videos' || type === 'blogs'">
- <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>
- </ng-container>
+ <ul class="m-proChannelListContent__list">
+ <li *ngFor="let entity of (feedsService.feed | async)">
+ <ng-container *ngIf="type === 'images' || type === 'videos' || type === 'blogs'">
+ <m-pro--channel-tile
+ [entity]="entity | async"
+ ></m-pro--channel-tile>
+ </ng-container>
+ </li>
+ <li class="m-proChannelListContentList__seeMore" (click)="seeMore()">See more</li>
+ </ul>
  <ng-container *ngIf="type === 'activities'">
  <pre *ngFor="let entity of (feedsService.feed | async)">{{entity | async | json}}</pre>
+ <!-- talk to Emi about this -->
  </ng-container>
  <ng-container *ngIf="type === 'groups'">
  <pre *ngFor="let entity of (feedsService.feed | async)">{{entity | async | json}}</pre>
+ <!-- TODO: see if we can use old tile, or create a new one based on the old one // use name, avatar and banner -->
  </ng-container>
 </div>

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

@@ -38,8 +38,17 @@ m-pro--channel-list {
  justify-content: center;
  align-items: center;
 
- //width: 100px;
- //height:
+ &.m-proChannelListContentList__seeMore {
+ color: white;
+ background-color: rgba(0, 0, 0, 0.7);
+ border: 1px solid #777;
+
+ font-size: 30px;
+ text-align: center;
+ vertical-align: middle;
+
+ cursor: pointer;
+ }
 
  &:nth-child(1), &:nth-child(2) {
  & > video {

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

@@ -51,7 +51,7 @@ export class ProChannelListComponent implements OnInit {
 
  this.load(true);
  });
-}
+ }
 
  async load(refresh: boolean = false) {
  if (refresh) {
@@ -62,7 +62,7 @@ export class ProChannelListComponent implements OnInit {
 
  try {
  this.feedsService
- .setEndpoint(`api/v2/feeds/container/${this.proService.currentChannel.guid}/${this.type}`)
+ .setEndpoint(`api/v2/feeds/channel/${this.proService.currentChannel.guid}/${this.type}`)
  .setLimit(8)
  .fetch();
 
@@ -77,6 +77,24 @@ export class ProChannelListComponent implements OnInit {
  this.feedsService.loadMore();
  }
 
+ seeMore() {
+ let url = `${window.Minds.site_url}${this.proService.currentChannel.username}`;
+
+ let type = this.type;
+
+ if (this.type === 'feed') {
+ type = null;
+ }
+ else if (this.type === 'articles') {
+ type = 'blogs';
+ }
+
+ if (type) {
+ url += `/${type}`;
+ }
+ window.location.href = url;
+ }
+
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();

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

+@import "defaults";
+
+m-pro--channel-tile {
+ cursor: pointer;
+ position: relative;
+
+ img {
+ max-height: 320px;
+ width: 100%;
+ object-fit: cover;
+ }
+
+
+ .m-proChannelTile__text {
+ position: absolute;
+ bottom: 0;
+ background-color: white;
+ color: black;
+ min-width: stretch;
+ padding: $minds-padding*2 $minds-padding*2 0;
+ font-size: 20px;
+
+ h2 {
+ font-size: 20px;
+ line-height: 20px;
+ overflow: visible;
+ color: rgba(0, 0, 0, .75) !important;
+ margin: 0;
+ }
+
+ p {
+ font-size: 13px;
+ text-overflow: ellipsis;
+ text-rendering: auto;
+ white-space: pre-wrap;
+ overflow: hidden;
+ max-height: 48px;
+ margin: 8px 0;
+ padding: 0;
+ line-height: 1.25;
+ color: #263238 !important;
+ }
+
+ a {
+ text-decoration: none;
+ color: #333;
+ }
+ }
+}

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

+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'm-pro--channel-tile',
+ template: `
+ <img [src]="entity.thumbnail_src">
+ <div class="m-proChannelTile__text" *ngIf="getTitle() || getText()">
+ <h2>{{getTitle()}}</h2>
+ <p [innerHTML]="getText()"></p>
+ </div>
+ `
+})
+
+export class ProTileComponent {
+ @Input() entity: any;
+
+ static getType(entity: any) {
+ return entity.type === 'object' ? `${entity.type}:${entity.subtype}` : entity.type;
+ }
+
+ getTitle() {
+ switch (ProTileComponent.getType(this.entity)) {
+ case 'object:blog':
+ return this.entity.title;
+ case 'object:image':
+ case 'object:video':
+ return this.entity.title && this.entity.title.trim() !== '' ? this.entity.title : this.entity.message;
+ default:
+ return '';
+ }
+ }
+
+ getText() {
+ switch (ProTileComponent.getType(this.entity)) {
+ case 'object:blog':
+ return this.entity.description;
+ case 'object:image':
+ case 'object:video':
+ return this.entity.description;
+ default:
+ return '';
+ }
+ }
+
+}

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

@@ -11,6 +11,7 @@ import { ProChannelSignupComponent } from "./channel/signup/signup.component";
 import { MindsFormsModule } from "../forms/forms.module";
 import { ProChannelListComponent } from "./channel/list/list.component";
 import { ProChannelDonateComponent } from './channel/donate/donate.component';
+import { ProTileComponent } from "./channel/tile/tile.component";
 
 const routes: Routes = [
  {
@@ -45,6 +46,7 @@ const routes: Routes = [
  declarations: [
  ProMarketingComponent,
  ProSubscriptionComponent,
+ ProTileComponent,
  ProChannelComponent,
  ProChannelSignupComponent,
  ProChannelListComponent,