aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+video-channels
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-03-14 14:05:36 +0100
committerChocobozzz <chocobozzz@cpy.re>2019-03-18 11:17:59 +0100
commitbce47964f6241ae56f61089d144b29eb9b5da6d3 (patch)
treecad0a5ef17bc7851d483969453f7b8c2e6edad57 /client/src/app/+video-channels
parent2a10aab3d7634a252a2acc946974df903e6025be (diff)
downloadPeerTube-bce47964f6241ae56f61089d144b29eb9b5da6d3.tar.gz
PeerTube-bce47964f6241ae56f61089d144b29eb9b5da6d3.tar.zst
PeerTube-bce47964f6241ae56f61089d144b29eb9b5da6d3.zip
Add video channel view
Diffstat (limited to 'client/src/app/+video-channels')
-rw-r--r--client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html11
-rw-r--r--client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss9
-rw-r--r--client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts67
-rw-r--r--client/src/app/+video-channels/video-channels-routing.module.ts10
-rw-r--r--client/src/app/+video-channels/video-channels.component.html1
-rw-r--r--client/src/app/+video-channels/video-channels.module.ts4
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 @@
1<div i18n class="title-page title-page-single">
2 Created {{pagination.totalItems}} playlists
3</div>
4
5<div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
6
7<div class="video-playlist" myInfiniteScroller (nearOfBottom)="onNearOfBottom()">
8 <div *ngFor="let playlist of videoPlaylists">
9 <my-video-playlist-miniature [playlist]="playlist" [toManage]="false"></my-video-playlist-miniature>
10 </div>
11</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 @@
1.video-playlist {
2 display: flex;
3 justify-content: center;
4
5 my-video-playlist-miniature {
6 margin-right: 15px;
7 margin-bottom: 30px;
8 }
9}
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 @@
1import { Component, OnDestroy, OnInit } from '@angular/core'
2import { AuthService } from '../../core/auth'
3import { ConfirmService } from '../../core/confirm'
4import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
5import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
6import { flatMap } from 'rxjs/operators'
7import { Subscription } from 'rxjs'
8import { Notifier } from '@app/core'
9import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
10import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
11import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
12
13@Component({
14 selector: 'my-video-channel-playlists',
15 templateUrl: './video-channel-playlists.component.html',
16 styleUrls: [ './video-channel-playlists.component.scss' ]
17})
18export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
19 videoPlaylists: VideoPlaylist[] = []
20
21 pagination: ComponentPagination = {
22 currentPage: 1,
23 itemsPerPage: 20,
24 totalItems: null
25 }
26
27 private videoChannelSub: Subscription
28 private videoChannel: VideoChannel
29
30 constructor (
31 private authService: AuthService,
32 private notifier: Notifier,
33 private confirmService: ConfirmService,
34 private videoPlaylistService: VideoPlaylistService,
35 private videoChannelService: VideoChannelService
36 ) {}
37
38 ngOnInit () {
39 // Parent get the video channel for us
40 this.videoChannelSub = this.videoChannelService.videoChannelLoaded
41 .subscribe(videoChannel => {
42 this.videoChannel = videoChannel
43 this.loadVideoPlaylists()
44 })
45 }
46
47 ngOnDestroy () {
48 if (this.videoChannelSub) this.videoChannelSub.unsubscribe()
49 }
50
51 onNearOfBottom () {
52 // Last page
53 if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
54
55 this.pagination.currentPage += 1
56 this.loadVideoPlaylists()
57 }
58
59 private loadVideoPlaylists () {
60 this.authService.userInformationLoaded
61 .pipe(flatMap(() => this.videoPlaylistService.listChannelPlaylists(this.videoChannel)))
62 .subscribe(res => {
63 this.videoPlaylists = this.videoPlaylists.concat(res.data)
64 this.pagination.totalItems = res.total
65 })
66 }
67}
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'
4import { VideoChannelsComponent } from './video-channels.component' 4import { VideoChannelsComponent } from './video-channels.component'
5import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component' 5import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
6import { VideoChannelAboutComponent } from './video-channel-about/video-channel-about.component' 6import { VideoChannelAboutComponent } from './video-channel-about/video-channel-about.component'
7import { VideoChannelPlaylistsComponent } from '@app/+video-channels/video-channel-playlists/video-channel-playlists.component'
7 8
8const videoChannelsRoutes: Routes = [ 9const videoChannelsRoutes: Routes = [
9 { 10 {
@@ -26,6 +27,15 @@ const videoChannelsRoutes: Routes = [
26 } 27 }
27 }, 28 },
28 { 29 {
30 path: 'video-playlists',
31 component: VideoChannelPlaylistsComponent,
32 data: {
33 meta: {
34 title: 'Video channel playlists'
35 }
36 }
37 },
38 {
29 path: 'about', 39 path: 'about',
30 component: VideoChannelAboutComponent, 40 component: VideoChannelAboutComponent,
31 data: { 41 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 @@
22 22
23 <div class="links"> 23 <div class="links">
24 <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a> 24 <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
25 <a i18n routerLink="video-playlists" routerLinkActive="active" class="title-page">Video playlists</a>
25 <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a> 26 <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
26 </div> 27 </div>
27 </div> 28 </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'
4import { VideoChannelsComponent } from './video-channels.component' 4import { VideoChannelsComponent } from './video-channels.component'
5import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component' 5import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
6import { VideoChannelAboutComponent } from './video-channel-about/video-channel-about.component' 6import { VideoChannelAboutComponent } from './video-channel-about/video-channel-about.component'
7import { VideoChannelPlaylistsComponent } from '@app/+video-channels/video-channel-playlists/video-channel-playlists.component'
7 8
8@NgModule({ 9@NgModule({
9 imports: [ 10 imports: [
@@ -14,7 +15,8 @@ import { VideoChannelAboutComponent } from './video-channel-about/video-channel-
14 declarations: [ 15 declarations: [
15 VideoChannelsComponent, 16 VideoChannelsComponent,
16 VideoChannelVideosComponent, 17 VideoChannelVideosComponent,
17 VideoChannelAboutComponent 18 VideoChannelAboutComponent,
19 VideoChannelPlaylistsComponent
18 ], 20 ],
19 21
20 exports: [ 22 exports: [