aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-library
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+my-library')
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.html7
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts46
-rw-r--r--client/src/app/+my-library/my-history/my-history.component.html32
-rw-r--r--client/src/app/+my-library/my-history/my-history.component.ts75
-rw-r--r--client/src/app/+my-library/my-ownership/my-ownership.component.ts6
-rw-r--r--client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html7
-rw-r--r--client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss1
-rw-r--r--client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts35
-rw-r--r--client/src/app/+my-library/my-video-imports/my-video-imports.component.ts2
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html7
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts45
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.html4
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.ts21
13 files changed, 111 insertions, 177 deletions
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index 2ed0c93d6..8d5eb04e2 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -5,12 +5,7 @@
5</h1> 5</h1>
6 6
7<div class="video-channels-header d-flex justify-content-between"> 7<div class="video-channels-header d-flex justify-content-between">
8 <div class="has-feedback has-clear"> 8 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
9 <input type="text" placeholder="Search your channels" i18n-placeholder [(ngModel)]="channelsSearch"
10 (ngModelChange)="onChannelsSearchChanged()" />
11 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
12 <span class="sr-only" i18n>Clear filters</span>
13 </div>
14 9
15 <a class="create-button" routerLink="create"> 10 <a class="create-button" routerLink="create">
16 <my-global-icon iconName="add" aria-hidden="true"></my-global-icon> 11 <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
index f6ba50a48..9e3bf35b4 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
@@ -1,29 +1,26 @@
1import { ChartData } from 'chart.js' 1import { ChartData } from 'chart.js'
2import { max, maxBy, min, minBy } from 'lodash-es' 2import { max, maxBy, min, minBy } from 'lodash-es'
3import { Subject } from 'rxjs' 3import { mergeMap } from 'rxjs/operators'
4import { debounceTime, mergeMap } from 'rxjs/operators' 4import { Component } from '@angular/core'
5import { Component, OnInit } from '@angular/core' 5import { AuthService, ConfirmService, Notifier, ScreenService } from '@app/core'
6import { AuthService, ConfirmService, Notifier, ScreenService, User } from '@app/core'
7import { VideoChannel, VideoChannelService } from '@app/shared/shared-main' 6import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
8 7
9@Component({ 8@Component({
10 templateUrl: './my-video-channels.component.html', 9 templateUrl: './my-video-channels.component.html',
11 styleUrls: [ './my-video-channels.component.scss' ] 10 styleUrls: [ './my-video-channels.component.scss' ]
12}) 11})
13export class MyVideoChannelsComponent implements OnInit { 12export class MyVideoChannelsComponent {
14 totalItems: number 13 totalItems: number
15 14
16 videoChannels: VideoChannel[] = [] 15 videoChannels: VideoChannel[] = []
16
17 videoChannelsChartData: ChartData[] 17 videoChannelsChartData: ChartData[]
18 videoChannelsMinimumDailyViews = 0 18 videoChannelsMinimumDailyViews = 0
19 videoChannelsMaximumDailyViews: number 19 videoChannelsMaximumDailyViews: number
20 20
21 channelsSearch: string
22 channelsSearchChanged = new Subject<string>()
23
24 chartOptions: any 21 chartOptions: any
25 22
26 private user: User 23 search: string
27 24
28 constructor ( 25 constructor (
29 private authService: AuthService, 26 private authService: AuthService,
@@ -31,31 +28,15 @@ export class MyVideoChannelsComponent implements OnInit {
31 private confirmService: ConfirmService, 28 private confirmService: ConfirmService,
32 private videoChannelService: VideoChannelService, 29 private videoChannelService: VideoChannelService,
33 private screenService: ScreenService 30 private screenService: ScreenService
34 ) {} 31 ) {}
35
36 ngOnInit () {
37 this.user = this.authService.getUser()
38
39 this.loadVideoChannels()
40
41 this.channelsSearchChanged
42 .pipe(debounceTime(500))
43 .subscribe(() => {
44 this.loadVideoChannels()
45 })
46 }
47 32
48 get isInSmallView () { 33 get isInSmallView () {
49 return this.screenService.isInSmallView() 34 return this.screenService.isInSmallView()
50 } 35 }
51 36
52 resetSearch () { 37 onSearch (search: string) {
53 this.channelsSearch = '' 38 this.search = search
54 this.onChannelsSearchChanged() 39 this.loadVideoChannels()
55 }
56
57 onChannelsSearchChanged () {
58 this.channelsSearchChanged.next()
59 } 40 }
60 41
61 async deleteVideoChannel (videoChannel: VideoChannel) { 42 async deleteVideoChannel (videoChannel: VideoChannel) {
@@ -85,8 +66,11 @@ channel with the same name (${videoChannel.name})!`,
85 66
86 private loadVideoChannels () { 67 private loadVideoChannels () {
87 this.authService.userInformationLoaded 68 this.authService.userInformationLoaded
88 .pipe(mergeMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true, this.channelsSearch))) 69 .pipe(mergeMap(() => {
89 .subscribe(res => { 70 const user = this.authService.getUser()
71
72 return this.videoChannelService.listAccountVideoChannels(user.account, null, true, this.search)
73 })).subscribe(res => {
90 this.videoChannels = res.data 74 this.videoChannels = res.data
91 this.totalItems = res.total 75 this.totalItems = res.total
92 76
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index 9dec64645..45ca37e0d 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -5,14 +5,7 @@
5 5
6<div class="top-buttons"> 6<div class="top-buttons">
7 <div class="search-wrapper"> 7 <div class="search-wrapper">
8 <div class="input-group has-feedback has-clear"> 8 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
9 <input
10 type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
11 (keyup)="onSearch($event)"
12 >
13 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
14 <span class="sr-only" i18n>Clear filters</span>
15 </div>
16 </div> 9 </div>
17 10
18 <div class="history-switch"> 11 <div class="history-switch">
@@ -26,14 +19,15 @@
26 </button> 19 </button>
27</div> 20</div>
28 21
29 22<my-videos-selection
30<div class="no-history" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">You don't have any video in your watch history yet.</div> 23 [pagination]="pagination"
31 24 [(videosModel)]="videos"
32<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" class="videos"> 25 [miniatureDisplayOptions]="miniatureDisplayOptions"
33 <div class="video" *ngFor="let video of videos"> 26 [titlePage]="titlePage"
34 <my-video-miniature 27 [getVideosObservableFunction]="getVideosObservableFunction"
35 [video]="video" [displayAsRow]="true" 28 [user]="user"
36 (videoRemoved)="removeVideoFromArray(video)" (videoBlocked)="removeVideoFromArray(video)" 29 [loadOnInit]="false"
37 ></my-video-miniature> 30 i18n-noResultMessage noResultMessage="You don't have any video in your watch history yet."
38 </div> 31 [enableSelection]="false"
39</div> 32 #videosSelection
33></my-videos-selection>
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
index 1695bd7ad..ad83db7ab 100644
--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -1,36 +1,55 @@
1import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core' 1import { Subject } from 'rxjs'
2import { tap } from 'rxjs/operators'
3import { Component, ComponentFactoryResolver, OnInit, ViewChild } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router' 4import { ActivatedRoute, Router } from '@angular/router'
3import { 5import {
4 AuthService, 6 AuthService,
5 ComponentPagination, 7 ComponentPagination,
6 ConfirmService, 8 ConfirmService,
9 DisableForReuseHook,
7 LocalStorageService, 10 LocalStorageService,
8 Notifier, 11 Notifier,
9 ScreenService, 12 ScreenService,
10 ServerService, 13 ServerService,
14 User,
11 UserService 15 UserService
12} from '@app/core' 16} from '@app/core'
13import { immutableAssign } from '@app/helpers' 17import { immutableAssign } from '@app/helpers'
14import { UserHistoryService } from '@app/shared/shared-main' 18import { UserHistoryService, Video } from '@app/shared/shared-main'
15import { AbstractVideoList } from '@app/shared/shared-video-miniature' 19import { MiniatureDisplayOptions, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
16import { Subject } from 'rxjs'
17import { debounceTime, tap, distinctUntilChanged } from 'rxjs/operators'
18 20
19@Component({ 21@Component({
20 templateUrl: './my-history.component.html', 22 templateUrl: './my-history.component.html',
21 styleUrls: [ './my-history.component.scss' ] 23 styleUrls: [ './my-history.component.scss' ]
22}) 24})
23export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnDestroy { 25export class MyHistoryComponent implements OnInit, DisableForReuseHook {
26 @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
27
24 titlePage: string 28 titlePage: string
25 pagination: ComponentPagination = { 29 pagination: ComponentPagination = {
26 currentPage: 1, 30 currentPage: 1,
27 itemsPerPage: 5, 31 itemsPerPage: 5,
28 totalItems: null 32 totalItems: null
29 } 33 }
34
30 videosHistoryEnabled: boolean 35 videosHistoryEnabled: boolean
31 search: string
32 36
33 protected searchStream: Subject<string> 37 miniatureDisplayOptions: MiniatureDisplayOptions = {
38 date: true,
39 views: true,
40 by: true,
41 privacyLabel: false,
42 privacyText: true,
43 state: true,
44 blacklistInfo: true
45 }
46
47 getVideosObservableFunction = this.getVideosObservable.bind(this)
48
49 user: User
50
51 videos: Video[] = []
52 search: string
34 53
35 constructor ( 54 constructor (
36 protected router: Router, 55 protected router: Router,
@@ -45,45 +64,31 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
45 private userHistoryService: UserHistoryService, 64 private userHistoryService: UserHistoryService,
46 protected cfr: ComponentFactoryResolver 65 protected cfr: ComponentFactoryResolver
47 ) { 66 ) {
48 super()
49
50 this.titlePage = $localize`My watch history` 67 this.titlePage = $localize`My watch history`
51 } 68 }
52 69
53 ngOnInit () { 70 ngOnInit () {
54 super.ngOnInit() 71 this.user = this.authService.getUser()
55 72
56 this.authService.userInformationLoaded 73 this.authService.userInformationLoaded
57 .subscribe(() => { 74 .subscribe(() => this.videosHistoryEnabled = this.user.videosHistoryEnabled)
58 this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled 75 }
59 })
60
61 this.searchStream = new Subject()
62 76
63 this.searchStream 77 disableForReuse () {
64 .pipe( 78 this.videosSelection.disableForReuse()
65 debounceTime(400),
66 distinctUntilChanged()
67 )
68 .subscribe(search => {
69 this.search = search
70 this.reloadVideos()
71 })
72 } 79 }
73 80
74 onSearch (event: Event) { 81 enabledForReuse () {
75 const target = event.target as HTMLInputElement 82 this.videosSelection.enabledForReuse()
76 this.searchStream.next(target.value)
77 } 83 }
78 84
79 resetSearch () { 85 reloadData () {
80 const searchInput = document.getElementById('history-search') as HTMLInputElement 86 this.videosSelection.reloadVideos()
81 searchInput.value = ''
82 this.searchStream.next('')
83 } 87 }
84 88
85 ngOnDestroy () { 89 onSearch (search: string) {
86 super.ngOnDestroy() 90 this.search = search
91 this.reloadData()
87 } 92 }
88 93
89 getVideosObservable (page: number) { 94 getVideosObservable (page: number) {
@@ -129,7 +134,7 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
129 () => { 134 () => {
130 this.notifier.success($localize`Videos history deleted`) 135 this.notifier.success($localize`Videos history deleted`)
131 136
132 this.reloadVideos() 137 this.reloadData()
133 }, 138 },
134 139
135 err => this.notifier.error(err.message) 140 err => this.notifier.error(err.message)
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.ts b/client/src/app/+my-library/my-ownership/my-ownership.component.ts
index a938023b4..aaf028474 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.ts
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.ts
@@ -48,18 +48,18 @@ export class MyOwnershipComponent extends RestTable implements OnInit {
48 } 48 }
49 49
50 accepted () { 50 accepted () {
51 this.loadData() 51 this.reloadData()
52 } 52 }
53 53
54 refuse (videoChangeOwnership: VideoChangeOwnership) { 54 refuse (videoChangeOwnership: VideoChangeOwnership) {
55 this.videoOwnershipService.refuseOwnership(videoChangeOwnership.id) 55 this.videoOwnershipService.refuseOwnership(videoChangeOwnership.id)
56 .subscribe( 56 .subscribe(
57 () => this.loadData(), 57 () => this.reloadData(),
58 err => this.notifier.error(err.message) 58 err => this.notifier.error(err.message)
59 ) 59 )
60 } 60 }
61 61
62 protected loadData () { 62 protected reloadData () {
63 return this.videoOwnershipService.getOwnershipChanges(this.pagination, this.sort) 63 return this.videoOwnershipService.getOwnershipChanges(this.pagination, this.sort)
64 .subscribe( 64 .subscribe(
65 resultList => { 65 resultList => {
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
index 853d47fe6..f91cebacf 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
@@ -7,12 +7,7 @@
7</h1> 7</h1>
8 8
9<div class="video-subscriptions-header"> 9<div class="video-subscriptions-header">
10 <div class="has-feedback has-clear"> 10 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
11 <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
12 (ngModelChange)="onSubscriptionsSearchChanged()" />
13 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
14 <span class="sr-only" i18n>Clear filters</span>
15 </div>
16</div> 11</div>
17 12
18<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscription yet.</div> 13<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscription yet.</div>
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index 53ceaa250..6c1ddf716 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -58,6 +58,7 @@ input[type=text] {
58 58
59.video-subscriptions-header { 59.video-subscriptions-header {
60 margin-bottom: 30px; 60 margin-bottom: 30px;
61 display: flex;
61} 62}
62 63
63@media screen and (max-width: $small-view) { 64@media screen and (max-width: $small-view) {
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
index 3b748eccf..1f4a931a0 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
@@ -1,6 +1,5 @@
1import { Subject } from 'rxjs' 1import { Subject } from 'rxjs'
2import { debounceTime } from 'rxjs/operators' 2import { Component } from '@angular/core'
3import { Component, OnInit } from '@angular/core'
4import { ComponentPagination, Notifier } from '@app/core' 3import { ComponentPagination, Notifier } from '@app/core'
5import { VideoChannel } from '@app/shared/shared-main' 4import { VideoChannel } from '@app/shared/shared-main'
6import { UserSubscriptionService } from '@app/shared/shared-user-subscription' 5import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
@@ -9,7 +8,7 @@ import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
9 templateUrl: './my-subscriptions.component.html', 8 templateUrl: './my-subscriptions.component.html',
10 styleUrls: [ './my-subscriptions.component.scss' ] 9 styleUrls: [ './my-subscriptions.component.scss' ]
11}) 10})
12export class MySubscriptionsComponent implements OnInit { 11export class MySubscriptionsComponent {
13 videoChannels: VideoChannel[] = [] 12 videoChannels: VideoChannel[] = []
14 13
15 pagination: ComponentPagination = { 14 pagination: ComponentPagination = {
@@ -20,34 +19,13 @@ export class MySubscriptionsComponent implements OnInit {
20 19
21 onDataSubject = new Subject<any[]>() 20 onDataSubject = new Subject<any[]>()
22 21
23 subscriptionsSearch: string 22 search: string
24 subscriptionsSearchChanged = new Subject<string>()
25 23
26 constructor ( 24 constructor (
27 private userSubscriptionService: UserSubscriptionService, 25 private userSubscriptionService: UserSubscriptionService,
28 private notifier: Notifier 26 private notifier: Notifier
29 ) {} 27 ) {}
30 28
31 ngOnInit () {
32 this.loadSubscriptions()
33
34 this.subscriptionsSearchChanged
35 .pipe(debounceTime(500))
36 .subscribe(() => {
37 this.pagination.currentPage = 1
38 this.loadSubscriptions(false)
39 })
40 }
41
42 resetSearch () {
43 this.subscriptionsSearch = ''
44 this.onSubscriptionsSearchChanged()
45 }
46
47 onSubscriptionsSearchChanged () {
48 this.subscriptionsSearchChanged.next()
49 }
50
51 onNearOfBottom () { 29 onNearOfBottom () {
52 // Last page 30 // Last page
53 if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return 31 if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
@@ -56,8 +34,13 @@ export class MySubscriptionsComponent implements OnInit {
56 this.loadSubscriptions() 34 this.loadSubscriptions()
57 } 35 }
58 36
37 onSearch (search: string) {
38 this.search = search
39 this.loadSubscriptions(false)
40 }
41
59 private loadSubscriptions (more = true) { 42 private loadSubscriptions (more = true) {
60 this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.subscriptionsSearch }) 43 this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.search })
61 .subscribe( 44 .subscribe(
62 res => { 45 res => {
63 this.videoChannels = more 46 this.videoChannels = more
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts b/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
index d6d7d7a1b..359535526 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
@@ -62,7 +62,7 @@ export class MyVideoImportsComponent extends RestTable implements OnInit {
62 return '/videos/update/' + video.uuid 62 return '/videos/update/' + video.uuid
63 } 63 }
64 64
65 protected loadData () { 65 protected reloadData () {
66 this.videoImportService.getMyVideoImports(this.pagination, this.sort) 66 this.videoImportService.getMyVideoImports(this.pagination, this.sort)
67 .subscribe( 67 .subscribe(
68 resultList => { 68 resultList => {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
index b88ea3db7..309afcf13 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
@@ -4,12 +4,7 @@
4</h1> 4</h1>
5 5
6<div class="video-playlists-header d-flex justify-content-between"> 6<div class="video-playlists-header d-flex justify-content-between">
7 <div class="has-feedback has-clear"> 7 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
8 <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch"
9 (ngModelChange)="onVideoPlaylistSearchChanged()" />
10 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
11 <span class="sr-only" i18n>Clear filters</span>
12 </div>
13 8
14 <a class="create-button" routerLink="create"> 9 <a class="create-button" routerLink="create">
15 <my-global-icon iconName="add" aria-hidden="true"></my-global-icon> 10 <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts
index f6d394923..d90102693 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts
@@ -1,7 +1,7 @@
1import { Subject } from 'rxjs' 1import { Subject } from 'rxjs'
2import { debounceTime, mergeMap } from 'rxjs/operators' 2import { mergeMap } from 'rxjs/operators'
3import { Component, OnInit } from '@angular/core' 3import { Component } from '@angular/core'
4import { AuthService, ComponentPagination, ConfirmService, Notifier, User } from '@app/core' 4import { AuthService, ComponentPagination, ConfirmService, Notifier } from '@app/core'
5import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' 5import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
6import { VideoPlaylistType } from '@shared/models' 6import { VideoPlaylistType } from '@shared/models'
7 7
@@ -9,10 +9,8 @@ import { VideoPlaylistType } from '@shared/models'
9 templateUrl: './my-video-playlists.component.html', 9 templateUrl: './my-video-playlists.component.html',
10 styleUrls: [ './my-video-playlists.component.scss' ] 10 styleUrls: [ './my-video-playlists.component.scss' ]
11}) 11})
12export class MyVideoPlaylistsComponent implements OnInit { 12export class MyVideoPlaylistsComponent {
13 videoPlaylistsSearch: string
14 videoPlaylists: VideoPlaylist[] = [] 13 videoPlaylists: VideoPlaylist[] = []
15 videoPlaylistSearchChanged = new Subject<string>()
16 14
17 pagination: ComponentPagination = { 15 pagination: ComponentPagination = {
18 currentPage: 1, 16 currentPage: 1,
@@ -22,27 +20,14 @@ export class MyVideoPlaylistsComponent implements OnInit {
22 20
23 onDataSubject = new Subject<any[]>() 21 onDataSubject = new Subject<any[]>()
24 22
25 private user: User 23 search: string
26 24
27 constructor ( 25 constructor (
28 private authService: AuthService, 26 private authService: AuthService,
29 private notifier: Notifier, 27 private notifier: Notifier,
30 private confirmService: ConfirmService, 28 private confirmService: ConfirmService,
31 private videoPlaylistService: VideoPlaylistService 29 private videoPlaylistService: VideoPlaylistService
32 ) {} 30 ) {}
33
34 ngOnInit () {
35 this.user = this.authService.getUser()
36
37 this.loadVideoPlaylists()
38
39 this.videoPlaylistSearchChanged
40 .pipe(
41 debounceTime(500))
42 .subscribe(() => {
43 this.loadVideoPlaylists(true)
44 })
45 }
46 31
47 async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) { 32 async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) {
48 const res = await this.confirmService.confirm( 33 const res = await this.confirmService.confirm(
@@ -76,22 +61,20 @@ export class MyVideoPlaylistsComponent implements OnInit {
76 this.loadVideoPlaylists() 61 this.loadVideoPlaylists()
77 } 62 }
78 63
79 resetSearch () { 64 onSearch (search: string) {
80 this.videoPlaylistsSearch = '' 65 this.search = search
81 this.onVideoPlaylistSearchChanged() 66 this.loadVideoPlaylists(true)
82 }
83
84 onVideoPlaylistSearchChanged () {
85 this.videoPlaylistSearchChanged.next()
86 } 67 }
87 68
88 private loadVideoPlaylists (reset = false) { 69 private loadVideoPlaylists (reset = false) {
89 this.authService.userInformationLoaded 70 this.authService.userInformationLoaded
90 .pipe(mergeMap(() => { 71 .pipe(mergeMap(() => {
91 return this.videoPlaylistService.listAccountPlaylists(this.user.account, this.pagination, '-updatedAt', this.videoPlaylistsSearch) 72 const user = this.authService.getUser()
92 })) 73
93 .subscribe(res => { 74 return this.videoPlaylistService.listAccountPlaylists(user.account, this.pagination, '-updatedAt', this.search)
75 })).subscribe(res => {
94 if (reset) this.videoPlaylists = [] 76 if (reset) this.videoPlaylists = []
77
95 this.videoPlaylists = this.videoPlaylists.concat(res.data) 78 this.videoPlaylists = this.videoPlaylists.concat(res.data)
96 this.pagination.totalItems = res.total 79 this.pagination.totalItems = res.total
97 80
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index 7c1cdb511..8d8b482ad 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -19,7 +19,7 @@
19</h1> 19</h1>
20 20
21<div class="videos-header d-flex justify-content-between"> 21<div class="videos-header d-flex justify-content-between">
22 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter> 22 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
23 23
24 <div class="peertube-select-container peertube-select-button"> 24 <div class="peertube-select-container peertube-select-button">
25 <select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control"> 25 <select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control">
@@ -41,6 +41,7 @@
41 [titlePage]="titlePage" 41 [titlePage]="titlePage"
42 [getVideosObservableFunction]="getVideosObservableFunction" 42 [getVideosObservableFunction]="getVideosObservableFunction"
43 [user]="user" 43 [user]="user"
44 [loadOnInit]="false"
44 #videosSelection 45 #videosSelection
45> 46>
46 <ng-template ptTemplate="globalButtons"> 47 <ng-template ptTemplate="globalButtons">
@@ -59,6 +60,5 @@
59 </ng-template> 60 </ng-template>
60</my-videos-selection> 61</my-videos-selection>
61 62
62
63<my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership> 63<my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
64<my-live-stream-information #liveStreamInformationModal></my-live-stream-information> 64<my-live-stream-information #liveStreamInformationModal></my-live-stream-information>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index f9c1b32b0..1e4a4406d 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -1,8 +1,8 @@
1import { concat, Observable } from 'rxjs' 1import { concat, Observable } from 'rxjs'
2import { tap, toArray } from 'rxjs/operators' 2import { tap, toArray } from 'rxjs/operators'
3import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core' 3import { Component, OnInit, ViewChild } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router' 4import { ActivatedRoute, Router } from '@angular/router'
5import { AuthService, ComponentPagination, ConfirmService, Notifier, RouteFilter, ScreenService, ServerService, User } from '@app/core' 5import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core'
6import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' 6import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
7import { immutableAssign } from '@app/helpers' 7import { immutableAssign } from '@app/helpers'
8import { AdvancedInputFilter } from '@app/shared/shared-forms' 8import { AdvancedInputFilter } from '@app/shared/shared-forms'
@@ -16,7 +16,7 @@ import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.c
16 templateUrl: './my-videos.component.html', 16 templateUrl: './my-videos.component.html',
17 styleUrls: [ './my-videos.component.scss' ] 17 styleUrls: [ './my-videos.component.scss' ]
18}) 18})
19export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewInit, DisableForReuseHook { 19export class MyVideosComponent implements OnInit, DisableForReuseHook {
20 @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent 20 @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
21 @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent 21 @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
22 @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent 22 @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent
@@ -42,6 +42,7 @@ export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewI
42 42
43 videos: Video[] = [] 43 videos: Video[] = []
44 getVideosObservableFunction = this.getVideosObservable.bind(this) 44 getVideosObservableFunction = this.getVideosObservable.bind(this)
45
45 sort: VideoSortField = '-publishedAt' 46 sort: VideoSortField = '-publishedAt'
46 47
47 user: User 48 user: User
@@ -53,6 +54,8 @@ export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewI
53 } 54 }
54 ] 55 ]
55 56
57 private search: string
58
56 constructor ( 59 constructor (
57 protected router: Router, 60 protected router: Router,
58 protected serverService: ServerService, 61 protected serverService: ServerService,
@@ -63,8 +66,6 @@ export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewI
63 private confirmService: ConfirmService, 66 private confirmService: ConfirmService,
64 private videoService: VideoService 67 private videoService: VideoService
65 ) { 68 ) {
66 super()
67
68 this.titlePage = $localize`My videos` 69 this.titlePage = $localize`My videos`
69 } 70 }
70 71
@@ -72,16 +73,14 @@ export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewI
72 this.buildActions() 73 this.buildActions()
73 74
74 this.user = this.authService.getUser() 75 this.user = this.authService.getUser()
75
76 this.initSearch()
77 this.listenToSearchChange()
78 } 76 }
79 77
80 ngAfterViewInit () { 78 onSearch (search: string) {
81 if (this.search) this.setTableFilter(this.search, false) 79 this.search = search
80 this.reloadData()
82 } 81 }
83 82
84 loadData () { 83 reloadData () {
85 this.videosSelection.reloadVideos() 84 this.videosSelection.reloadVideos()
86 } 85 }
87 86