3 files changed, 102 insertions, 0 deletions

diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
new file mode 100644
index 000000000..4c68cd1a5
--- /dev/null
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
@@ -0,0 +1,23 @@
+<div class="video-channels">
+  <div *ngFor="let videoChannel of videoChannels" class="video-channel">
+    <a [routerLink]="[ '/video-channels', videoChannel.name ]">
+      <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+    </a>
+
+    <div class="video-channel-info">
+      <a [routerLink]="[ '/video-channels', videoChannel.name ]" class="video-channel-names" i18n-title title="Go to the channel">
+        <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
+        <div class="video-channel-name">{{ videoChannel.name }}</div>
+      </a>
+
+      <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
+
+      <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner">
+        <span i18n>Created by {{ videoChannel.ownerBy }}</span>
+        <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+      </a>
+    </div>
+
+    <my-subscribe-button [videoChannel]="videoChannel"></my-subscribe-button>
+  </div>
+</div>
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
new file mode 100644
index 000000000..2fbfa335b
--- /dev/null
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
@@ -0,0 +1,49 @@
+@import '_variables';
+@import '_mixins';
+
+.video-channel {
+  @include row-blocks;
+
+  img {
+    @include avatar(80px);
+
+    margin-right: 10px;
+  }
+
+  .video-channel-info {
+    flex-grow: 1;
+
+    a.video-channel-names {
+      @include disable-default-a-behaviour;
+
+      width: fit-content;
+      display: flex;
+      align-items: baseline;
+      color: #000;
+
+      .video-channel-display-name {
+        font-weight: $font-semibold;
+        font-size: 18px;
+      }
+
+      .video-channel-name {
+        font-size: 14px;
+        color: $grey-actor-name;
+        margin-left: 5px;
+      }
+    }
+  }
+
+  .actor-owner {
+    @include actor-owner;
+  }
+
+  my-subscribe-button {
+    /deep/ span[role=button] {
+      padding: 7px 12px;
+      font-size: 16px;
+    }
+  }
+}
+
+
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
new file mode 100644
index 000000000..1e94cf90b
--- /dev/null
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core'
+import { NotificationsService } from 'angular2-notifications'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { UserSubscriptionService } from '@app/shared/user-subscription'
+
+@Component({
+  selector: 'my-account-subscriptions',
+  templateUrl: './my-account-subscriptions.component.html',
+  styleUrls: [ './my-account-subscriptions.component.scss' ]
+})
+export class MyAccountSubscriptionsComponent implements OnInit {
+  videoChannels: VideoChannel[] = []
+
+  constructor (
+    private userSubscriptionService: UserSubscriptionService,
+    private notificationsService: NotificationsService,
+    private i18n: I18n
+  ) {}
+
+  ngOnInit () {
+    this.userSubscriptionService.listSubscriptions()
+      .subscribe(
+        res => { console.log(res); this.videoChannels = res.data },
+
+        error => this.notificationsService.error(this.i18n('Error'), error.message)
+      )
+  }
+
+}