3 files changed, 87 insertions, 0 deletions

diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
new file mode 100644
index 000000000..0d9fba375
--- /dev/null
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
@@ -0,0 +1,11 @@
+<div i18n class="title-page title-page-single">
+  Created {{pagination.totalItems}} playlists
+</div>
+
+<div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
+
+<div class="video-playlist" myInfiniteScroller (nearOfBottom)="onNearOfBottom()">
+  <div *ngFor="let playlist of videoPlaylists">
+    <my-video-playlist-miniature [playlist]="playlist" [toManage]="false"></my-video-playlist-miniature>
+  </div>
+</div>
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
new file mode 100644
index 000000000..fe9104794
--- /dev/null
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@@ -0,0 +1,9 @@
+.video-playlist {
+  display: flex;
+  justify-content: center;
+
+  my-video-playlist-miniature {
+    margin-right: 15px;
+    margin-bottom: 30px;
+  }
+}
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
new file mode 100644
index 000000000..f878a5a24
--- /dev/null
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
@@ -0,0 +1,67 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { AuthService } from '../../core/auth'
+import { ConfirmService } from '../../core/confirm'
+import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { flatMap } from 'rxjs/operators'
+import { Subscription } from 'rxjs'
+import { Notifier } from '@app/core'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+
+@Component({
+  selector: 'my-video-channel-playlists',
+  templateUrl: './video-channel-playlists.component.html',
+  styleUrls: [ './video-channel-playlists.component.scss' ]
+})
+export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
+  videoPlaylists: VideoPlaylist[] = []
+
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 20,
+    totalItems: null
+  }
+
+  private videoChannelSub: Subscription
+  private videoChannel: VideoChannel
+
+  constructor (
+    private authService: AuthService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private videoPlaylistService: VideoPlaylistService,
+    private videoChannelService: VideoChannelService
+  ) {}
+
+  ngOnInit () {
+    // Parent get the video channel for us
+    this.videoChannelSub = this.videoChannelService.videoChannelLoaded
+                               .subscribe(videoChannel => {
+                                 this.videoChannel = videoChannel
+                                 this.loadVideoPlaylists()
+                               })
+  }
+
+  ngOnDestroy () {
+    if (this.videoChannelSub) this.videoChannelSub.unsubscribe()
+  }
+
+  onNearOfBottom () {
+    // Last page
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+
+    this.pagination.currentPage += 1
+    this.loadVideoPlaylists()
+  }
+
+  private loadVideoPlaylists () {
+    this.authService.userInformationLoaded
+        .pipe(flatMap(() => this.videoPlaylistService.listChannelPlaylists(this.videoChannel)))
+        .subscribe(res => {
+          this.videoPlaylists = this.videoPlaylists.concat(res.data)
+          this.pagination.totalItems = res.total
+        })
+  }
+}