Improve account channel page

Set it as the default route for account page. The main goal is to better
differentiate the channel page from the account page. With the channel
page set as default, I hope people will better understand they are in
the account page, and that this account could have multiple channels.

3 files changed, 84 insertions, 44 deletions

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index c3ef1d894..63f0514fd 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -1,11 +1,17 @@
-<div *ngIf="account" class="row">
-  <a
-    *ngFor="let videoChannel of videoChannels" [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]"
-    class="video-channel" i18n-title title="See this video channel"
-  >
-    <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+<div class="margin-content">
 
-    <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
-    <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
-  </a>
-</div>
\ No newline at end of file
+  <div class="channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true">
+    <div class="section channel" *ngFor="let videoChannel of videoChannels">
+      <div class="section-title">
+        <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" i18n-title title="See this video channel">
+          <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+
+          <div>{{ videoChannel.displayName }}</div>
+          <div i18n class="followers">{{ videoChannel.followersCount }} subscribers</div>
+        </a>
+      </div>
+
+      <my-video-miniature *ngFor="let video of getVideosOf(videoChannel)" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 0c6de2efa..f2604684e 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -1,30 +1,13 @@
 @import '_variables';
 @import '_mixins';
+@import '_miniature';
 
-.row {
-  justify-content: center;
+.margin-content {
+  @include adapt-margin-content-width;
 }
 
-a.video-channel {
-  @include disable-default-a-behaviour;
+.section {
+  @include miniature-rows;
 
-  display: inline-block;
-  text-align: center;
-  color: var(--mainForegroundColor);
-  margin: 10px 30px;
-
-  img {
-    @include avatar(80px);
-
-    margin-bottom: 10px;
-  }
-
-  .video-channel-display-name {
-    font-size: 20px;
-    font-weight: $font-bold;
-  }
-
-  .video-channel-followers {
-    font-size: 15px;
-  }
-}
\ No newline at end of file
+  padding-top: 0 !important;
+}
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
index 44f5626bb..ee3b5f8e4 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
@@ -3,9 +3,14 @@ import { ActivatedRoute } from '@angular/router'
 import { Account } from '@app/shared/account/account.model'
 import { AccountService } from '@app/shared/account/account.service'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
-import { flatMap, map, tap } from 'rxjs/operators'
-import { Subscription } from 'rxjs'
+import { concatMap, map, switchMap, tap } from 'rxjs/operators'
+import { from, Subscription } from 'rxjs'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { Video } from '@app/shared/video/video.model'
+import { AuthService } from '@app/core'
+import { VideoService } from '@app/shared/video/video.service'
+import { VideoSortField } from '@app/shared/video/sort-field.type'
+import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
 
 @Component({
   selector: 'my-account-video-channels',
@@ -15,27 +20,73 @@ import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
   account: Account
   videoChannels: VideoChannel[] = []
+  videos: { [id: number]: Video[] } = {}
+
+  channelPagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 2
+  }
+
+  videosPagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 12
+  }
+  videosSort: VideoSortField = '-publishedAt'
 
   private accountSub: Subscription
 
   constructor (
-    protected route: ActivatedRoute,
+    private route: ActivatedRoute,
+    private authService: AuthService,
     private accountService: AccountService,
-    private videoChannelService: VideoChannelService
+    private videoChannelService: VideoChannelService,
+    private videoService: VideoService
   ) { }
 
+  get user () {
+    return this.authService.getUser()
+  }
+
   ngOnInit () {
     // Parent get the account for us
     this.accountSub = this.accountService.accountLoaded
-        .pipe(
-          tap(account => this.account = account),
-          flatMap(account => this.videoChannelService.listAccountVideoChannels(account)),
-          map(res => res.data)
-        )
-        .subscribe(videoChannels => this.videoChannels = videoChannels)
+        .subscribe(account => {
+          this.account = account
+
+          this.loadMoreChannels()
+        })
   }
 
   ngOnDestroy () {
     if (this.accountSub) this.accountSub.unsubscribe()
   }
+
+  loadMoreChannels () {
+    this.videoChannelService.listAccountVideoChannels(this.account, this.channelPagination)
+      .pipe(
+        tap(res => this.channelPagination.totalItems = res.total),
+        switchMap(res => from(res.data)),
+        concatMap(videoChannel => {
+          return this.videoService.getVideoChannelVideos(videoChannel, this.videosPagination, this.videosSort)
+            .pipe(map(data => ({ videoChannel, videos: data.videos })))
+        })
+      )
+      .subscribe(({ videoChannel, videos }) => {
+        this.videoChannels.push(videoChannel)
+
+        this.videos[videoChannel.id] = videos
+      })
+  }
+
+  getVideosOf (videoChannel: VideoChannel) {
+    return this.videos[ videoChannel.id ] || []
+  }
+
+  onNearOfBottom () {
+    if (!hasMoreItems(this.channelPagination)) return
+
+    this.channelPagination.currentPage += 1
+
+    this.loadMoreChannels()
+  }
 }