(feat): media & blog tile

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>
@@ -48,15 +10,19 @@
 <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 class="img-tile" *ngFor="let entity of (feedsService.feed | async)">
+ <m-pro--channel-tile
+ [entity]="entity | async"
+ ></m-pro--channel-tile>
  </li>
  </ul>
  </ng-container>
  <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,9 +38,6 @@ m-pro--channel-list {
  justify-content: center;
  align-items: center;
 
- //width: 100px;
- //height:
-
  &:nth-child(1), &:nth-child(2) {
  & > video {
  width: 500px;

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) {

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

+@import "defaults";
+
+m-pro--channel-tile {
+ 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 '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 '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,