Add video channel view

6 files changed, 101 insertions, 1 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
+        })
+  }
+}
diff --git a/client/src/app/+video-channels/video-channels-routing.module.ts b/client/src/app/+video-channels/video-channels-routing.module.ts
index 3ac3533d9..cedd07d39 100644
--- a/client/src/app/+video-channels/video-channels-routing.module.ts
+++ b/client/src/app/+video-channels/video-channels-routing.module.ts
@@ -4,6 +4,7 @@ import { MetaGuard } from '@ngx-meta/core'
 import { VideoChannelsComponent } from './video-channels.component'
 import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
 import { VideoChannelAboutComponent } from './video-channel-about/video-channel-about.component'
+import { VideoChannelPlaylistsComponent } from '@app/+video-channels/video-channel-playlists/video-channel-playlists.component'
 
 const videoChannelsRoutes: Routes = [
   {
@@ -26,6 +27,15 @@ const videoChannelsRoutes: Routes = [
         }
       },
       {
+        path: 'video-playlists',
+        component: VideoChannelPlaylistsComponent,
+        data: {
+          meta: {
+            title: 'Video channel playlists'
+          }
+        }
+      },
+      {
         path: 'about',
         component: VideoChannelAboutComponent,
         data: {
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index c65b5713d..600b7a365 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -22,6 +22,7 @@
 
     <div class="links">
       <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
+      <a i18n routerLink="video-playlists" routerLinkActive="active" class="title-page">Video playlists</a>
       <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
     </div>
   </div>
diff --git a/client/src/app/+video-channels/video-channels.module.ts b/client/src/app/+video-channels/video-channels.module.ts
index a09ea6f11..6975d05b2 100644
--- a/client/src/app/+video-channels/video-channels.module.ts
+++ b/client/src/app/+video-channels/video-channels.module.ts
@@ -4,6 +4,7 @@ import { VideoChannelsRoutingModule } from './video-channels-routing.module'
 import { VideoChannelsComponent } from './video-channels.component'
 import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
 import { VideoChannelAboutComponent } from './video-channel-about/video-channel-about.component'
+import { VideoChannelPlaylistsComponent } from '@app/+video-channels/video-channel-playlists/video-channel-playlists.component'
 
 @NgModule({
   imports: [
@@ -14,7 +15,8 @@ import { VideoChannelAboutComponent } from './video-channel-about/video-channel-
   declarations: [
     VideoChannelsComponent,
     VideoChannelVideosComponent,
-    VideoChannelAboutComponent
+    VideoChannelAboutComponent,
+    VideoChannelPlaylistsComponent
   ],
 
   exports: [