Add video channel account list

7 files changed, 90 insertions, 6 deletions

diff --git a/client/src/app/+account/account-routing.module.ts b/client/src/app/+account/account-routing.module.ts
index 534102121..f72d8373f 100644
--- a/client/src/app/+account/account-routing.module.ts
+++ b/client/src/app/+account/account-routing.module.ts
@@ -3,7 +3,8 @@ import { RouterModule, Routes } from '@angular/router'
 import { MetaGuard } from '@ngx-meta/core'
 import { AccountComponent } from './account.component'
 import { AccountVideosComponent } from './account-videos/account-videos.component'
-import { AccountAboutComponent } from '@app/+account/account-about/account-about.component'
+import { AccountAboutComponent } from './account-about/account-about.component'
+import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component'
 
 const accountRoutes: Routes = [
   {
@@ -26,6 +27,15 @@ const accountRoutes: Routes = [
         }
       },
       {
+        path: 'video-channels',
+        component: AccountVideoChannelsComponent,
+        data: {
+          meta: {
+            title: 'Account video channels'
+          }
+        }
+      },
+      {
         path: 'about',
         component: AccountAboutComponent,
         data: {
diff --git a/client/src/app/+account/account-video-channels/account-video-channels.component.html b/client/src/app/+account/account-video-channels/account-video-channels.component.html
new file mode 100644
index 000000000..d20b40c60
--- /dev/null
+++ b/client/src/app/+account/account-video-channels/account-video-channels.component.html
@@ -0,0 +1,11 @@
+<div *ngIf="account" class="row">
+  <a
+    *ngFor="let videoChannel of videoChannels" [routerLink]="[ '/video-channels', videoChannel.uuid ]"
+    class="video-channel" title="See this video channel"
+  >
+    <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+
+    <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
+    <div class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
+  </a>
+</div>
\ No newline at end of file
diff --git a/client/src/app/+account/account-video-channels/account-video-channels.component.scss b/client/src/app/+account/account-video-channels/account-video-channels.component.scss
new file mode 100644
index 000000000..c9c7fa8eb
--- /dev/null
+++ b/client/src/app/+account/account-video-channels/account-video-channels.component.scss
@@ -0,0 +1,30 @@
+@import '_variables';
+@import '_mixins';
+
+.row {
+  text-align: center;
+}
+
+a.video-channel {
+  @include disable-default-a-behaviour;
+
+  display: inline-block;
+  text-align: center;
+  color: #000;
+  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
diff --git a/client/src/app/+account/account-video-channels/account-video-channels.component.ts b/client/src/app/+account/account-video-channels/account-video-channels.component.ts
new file mode 100644
index 000000000..8915eb622
--- /dev/null
+++ b/client/src/app/+account/account-video-channels/account-video-channels.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import 'rxjs/add/observable/from'
+import 'rxjs/add/operator/concatAll'
+import { Account } from '@app/shared/account/account.model'
+import { AccountService } from '@app/shared/account/account.service'
+import { VideoChannel } from '../../../../../shared/models/videos'
+import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+
+@Component({
+  selector: 'my-account-video-channels',
+  templateUrl: './account-video-channels.component.html',
+  styleUrls: [ './account-video-channels.component.scss' ]
+})
+export class AccountVideoChannelsComponent implements OnInit {
+  account: Account
+  videoChannels: VideoChannel[] = []
+
+  constructor (
+    protected route: ActivatedRoute,
+    private accountService: AccountService,
+    private videoChannelService: VideoChannelService
+  ) { }
+
+  ngOnInit () {
+    // Parent get the account for us
+    this.accountService.accountLoaded
+        .do(account => this.account = account)
+        .flatMap(account => this.videoChannelService.getVideoChannels(account.id))
+        .map(res => res.data)
+        .subscribe(videoChannels => this.videoChannels = videoChannels)
+  }
+}
diff --git a/client/src/app/+account/account.component.html b/client/src/app/+account/account.component.html
index f875b37a4..d0e99edda 100644
--- a/client/src/app/+account/account.component.html
+++ b/client/src/app/+account/account.component.html
@@ -2,7 +2,7 @@
   <div class="sub-menu">
 
     <div class="account">
-      <img [src]="getAvatarUrl()" alt="Avatar" />
+      <img [src]="account.avatarUrl" alt="Avatar" />
 
       <div class="account-info">
         <div class="account-display-name">{{ account.displayName }}</div>
@@ -13,6 +13,8 @@
     <div class="links">
       <a routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
 
+      <a routerLink="video-channels" routerLinkActive="active" class="title-page">Video channels</a>
+
       <a routerLink="about" routerLinkActive="active" class="title-page">About</a>
     </div>
   </div>
diff --git a/client/src/app/+account/account.component.ts b/client/src/app/+account/account.component.ts
index ae5354ed9..d936ce2fe 100644
--- a/client/src/app/+account/account.component.ts
+++ b/client/src/app/+account/account.component.ts
@@ -22,8 +22,4 @@ export class AccountComponent implements OnInit {
     this.accountService.getAccount(accountId)
         .subscribe(account => this.account = account)
   }
-
-  getAvatarUrl () {
-    return Account.GET_ACCOUNT_AVATAR_URL(this.account)
-  }
 }
diff --git a/client/src/app/+account/account.module.ts b/client/src/app/+account/account.module.ts
index 2fe67f3c5..82ef06e76 100644
--- a/client/src/app/+account/account.module.ts
+++ b/client/src/app/+account/account.module.ts
@@ -4,6 +4,7 @@ import { AccountRoutingModule } from './account-routing.module'
 import { AccountComponent } from './account.component'
 import { AccountVideosComponent } from './account-videos/account-videos.component'
 import { AccountAboutComponent } from './account-about/account-about.component'
+import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component'
 
 @NgModule({
   imports: [
@@ -14,6 +15,7 @@ import { AccountAboutComponent } from './account-about/account-about.component'
   declarations: [
     AccountComponent,
     AccountVideosComponent,
+    AccountVideoChannelsComponent,
     AccountAboutComponent
   ],