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.featuredContent = await this.channelService.getFeaturedContent();
+ 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) {
 
  }