diff options
Diffstat (limited to 'client/src/app/+video-channels/video-channel-playlists')
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 @@ | |||
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 @@ | |||
1 | import { Component, OnDestroy, OnInit } from '@angular/core' | ||
2 | import { AuthService } from '../../core/auth' | ||
3 | import { ConfirmService } from '../../core/confirm' | ||
4 | import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' | ||
5 | import { VideoChannel } from '@app/shared/video-channel/video-channel.model' | ||
6 | import { flatMap } from 'rxjs/operators' | ||
7 | import { Subscription } from 'rxjs' | ||
8 | import { Notifier } from '@app/core' | ||
9 | import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' | ||
10 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' | ||
11 | import { 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 | }) | ||
18 | export 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 | } | ||