1 files changed, 74 insertions, 0 deletions

diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
new file mode 100644
index 000000000..3b748eccf
--- /dev/null
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
@@ -0,0 +1,74 @@
+import { Subject } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
+import { Component, OnInit } from '@angular/core'
+import { ComponentPagination, Notifier } from '@app/core'
+import { VideoChannel } from '@app/shared/shared-main'
+import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
+
+@Component({
+  templateUrl: './my-subscriptions.component.html',
+  styleUrls: [ './my-subscriptions.component.scss' ]
+})
+export class MySubscriptionsComponent implements OnInit {
+  videoChannels: VideoChannel[] = []
+
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 10,
+    totalItems: null
+  }
+
+  onDataSubject = new Subject<any[]>()
+
+  subscriptionsSearch: string
+  subscriptionsSearchChanged = new Subject<string>()
+
+  constructor (
+    private userSubscriptionService: UserSubscriptionService,
+    private notifier: Notifier
+  ) {}
+
+  ngOnInit () {
+    this.loadSubscriptions()
+
+    this.subscriptionsSearchChanged
+      .pipe(debounceTime(500))
+      .subscribe(() => {
+        this.pagination.currentPage = 1
+        this.loadSubscriptions(false)
+      })
+  }
+
+  resetSearch () {
+    this.subscriptionsSearch = ''
+    this.onSubscriptionsSearchChanged()
+  }
+
+  onSubscriptionsSearchChanged () {
+    this.subscriptionsSearchChanged.next()
+  }
+
+  onNearOfBottom () {
+    // Last page
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+
+    this.pagination.currentPage += 1
+    this.loadSubscriptions()
+  }
+
+  private loadSubscriptions (more = true) {
+    this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.subscriptionsSearch })
+        .subscribe(
+          res => {
+            this.videoChannels = more
+              ? this.videoChannels.concat(res.data)
+              : res.data
+            this.pagination.totalItems = res.total
+
+            this.onDataSubject.next(res.data)
+          },
+
+          error => this.notifier.error(error.message)
+        )
+  }
+}