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

@@ -14,7 +14,6 @@ export class ProChannelService {
 
   childParamsChange: EventEmitter<any> = new EventEmitter<any>();
 
-
   protected featuredContent: Array<any> | null;
 
   constructor(
@@ -46,8 +45,7 @@ export class ProChannelService {
 
   async getFeaturedContent(): Promise<Array<any>> {
     if (!this.currentChannel) {
-      this.featuredContent = null;
-      return [];
+      throw new Error('No channel');
     }
 
     if (!this.featuredContent) {
@@ -69,6 +67,30 @@ export class ProChannelService {
     return this.featuredContent;
   }
 
+  async getContent({ limit, offset }: { limit?: number, offset? } = {}): Promise<{ content: Array<any>, offset: any }> {
+    if (!this.currentChannel) {
+      throw new Error('No channel');
+    }
+
+    const endpoint = `api/v2/feeds/channel/${this.currentChannel.guid}/all/top`;
+    const qs = {
+      limit: limit || 24,
+      from_timestamp: offset || '',
+      sync: 1,
+      exclude: ((this.currentChannel.pro_settings.featured_content || []).join(',')) || '',
+    };
+
+    const { entities: feedSyncEntities, 'load-next': loadNext } = await this.client.get(endpoint, qs) as any;
+    const { entities } = await this.entitiesService.fetch(feedSyncEntities.map(feedSyncEntity => normalizeUrn(feedSyncEntity.guid))) as any;
+
+    let nextOffset = feedSyncEntities && feedSyncEntities.length ? loadNext : '';
+
+    return {
+      content: entities,
+      offset: nextOffset,
+    };
+  }
+
   setChildParams(params: any) {
     this.childParams = params;
     this.childParamsChange.emit(this.childParams);

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

@@ -3,7 +3,15 @@
     <m-pro--channel-tile
       *ngFor="let entity of featuredContent"
       [entity]="entity"
-      (click)="onFeaturedContentClick(entity)"
+      (click)="onContentClick(entity)"
+    ></m-pro--channel-tile>
+  </div>
+
+  <div class="m-pro--channel-home--content">
+    <m-pro--channel-tile
+      *ngFor="let entity of content"
+      [entity]="entity"
+      (click)="onContentClick(entity)"
     ></m-pro--channel-tile>
   </div>
 </div>

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

@@ -14,15 +14,40 @@
     font-size: 46px;
   }
 
-  .m-pro--channel-home--featured-content {
+  .m-pro--channel-home--featured-content,
+  .m-pro--channel-home--content {
     width: 80%;
     margin: 0 auto;
     display: grid;
     grid-gap: 24px;
+
+    @media screen and (max-width: $max-mobile) {
+      width: 100%;
+    }
+  }
+
+  .m-pro--channel-home--featured-content {
     grid-template-columns: repeat(2, 1fr);
 
     *:first-child {
       grid-column: span 2;
     }
+
+    @media screen and (max-width: $max-mobile) {
+      grid-template-columns: repeat(1, 1fr);
+
+      *:first-child {
+        grid-column: initial;
+      }
+    }
+  }
+
+  .m-pro--channel-home--content {
+    margin: 24px auto;
+    grid-template-columns: repeat(3, 1fr);
+
+    @media screen and (max-width: $max-mobile) {
+      grid-template-columns: repeat(1, 1fr);
+    }
   }
 }

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

@@ -8,8 +8,14 @@ import { ProChannelService } from '../channel.service';
 })
 export class ProChannelHomeComponent implements OnInit {
 
+  inProgress: boolean = false;
+
   featuredContent: Array<any> = [];
 
+  content: Array<any> = [];
+
+  moreData: boolean = true;
+
   constructor(
     protected channelService: ProChannelService,
     protected cd: ChangeDetectorRef,
@@ -22,11 +28,31 @@ export class ProChannelHomeComponent implements OnInit {
   }
 
   async load() {
+    this.inProgress = true;
+    this.featuredContent = [];
+    this.content = [];
+    this.moreData = true;
+
+    this.detectChanges();
+
+    try {
       this.featuredContent = await this.channelService.getFeaturedContent();
       this.detectChanges();
+
+      const { content } = await this.channelService.getContent({
+        limit: 24,
+      });
+      this.content.push(...content);
+      this.detectChanges();
+    } catch (e) {
+      this.moreData = false;
+    }
+
+    this.inProgress = false;
+    this.detectChanges();
   }
 
-  onFeaturedContentClick(entity) {
+  onContentClick(entity) {
 
   }