aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account/my-account-videos
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-28 01:10:26 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-28 01:10:26 +0100
commitbf64ed4196938ba9002c887cadb01bd2a6e3127a (patch)
tree889b8f89c59cd513edd973785a76ccf6f8c23f3d /client/src/app/+my-account/my-account-videos
parent71810d0bcbed0e46ddaa1d4eadd028154786fffb (diff)
downloadPeerTube-bf64ed4196938ba9002c887cadb01bd2a6e3127a.tar.gz
PeerTube-bf64ed4196938ba9002c887cadb01bd2a6e3127a.tar.zst
PeerTube-bf64ed4196938ba9002c887cadb01bd2a6e3127a.zip
Add search bars for a user's videos and playlist library
Diffstat (limited to 'client/src/app/+my-account/my-account-videos')
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.html4
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.scss11
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.ts25
3 files changed, 35 insertions, 5 deletions
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 2854093c4..a898cd938 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -1,3 +1,7 @@
1<div class="videos-header">
2 <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
3</div>
4
1<my-videos-selection 5<my-videos-selection
2 [pagination]="pagination" 6 [pagination]="pagination"
3 [(selection)]="selection" 7 [(selection)]="selection"
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index 87398e7c8..44545b3e1 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -1,6 +1,17 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.videos-header {
5 display: flex;
6 justify-content: space-between;
7 text-align: right;
8 margin: 20px 0 50px;
9
10 input[type=text] {
11 @include peertube-input-text(300px);
12 }
13}
14
4.action-button-delete-selection { 15.action-button-delete-selection {
5 display: inline-block; 16 display: inline-block;
6 17
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 2c86a3c56..dd4b25d08 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -1,6 +1,6 @@
1import { concat, Observable } from 'rxjs' 1import { concat, Observable, Subject } from 'rxjs'
2import { tap, toArray } from 'rxjs/operators' 2import { tap, toArray, debounceTime } from 'rxjs/operators'
3import { Component, ViewChild } from '@angular/core' 3import { Component, ViewChild, OnInit } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router' 4import { ActivatedRoute, Router } from '@angular/router'
5import { immutableAssign } from '@app/shared/misc/utils' 5import { immutableAssign } from '@app/shared/misc/utils'
6import { ComponentPagination } from '@app/shared/rest/component-pagination.model' 6import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
@@ -22,7 +22,7 @@ import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
22 templateUrl: './my-account-videos.component.html', 22 templateUrl: './my-account-videos.component.html',
23 styleUrls: [ './my-account-videos.component.scss' ] 23 styleUrls: [ './my-account-videos.component.scss' ]
24}) 24})
25export class MyAccountVideosComponent implements DisableForReuseHook { 25export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
26 @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent 26 @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
27 @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent 27 @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
28 28
@@ -43,6 +43,8 @@ export class MyAccountVideosComponent implements DisableForReuseHook {
43 blacklistInfo: true 43 blacklistInfo: true
44 } 44 }
45 videos: Video[] = [] 45 videos: Video[] = []
46 videosSearch: string
47 videosSearchChanged = new Subject<string>()
46 getVideosObservableFunction = this.getVideosObservable.bind(this) 48 getVideosObservableFunction = this.getVideosObservable.bind(this)
47 49
48 constructor ( 50 constructor (
@@ -59,6 +61,19 @@ export class MyAccountVideosComponent implements DisableForReuseHook {
59 this.titlePage = this.i18n('My videos') 61 this.titlePage = this.i18n('My videos')
60 } 62 }
61 63
64 ngOnInit () {
65 this.videosSearchChanged
66 .pipe(
67 debounceTime(500))
68 .subscribe(() => {
69 this.videosSelection.reloadVideos()
70 })
71 }
72
73 onVideosSearchChanged () {
74 this.videosSearchChanged.next()
75 }
76
62 disableForReuse () { 77 disableForReuse () {
63 this.videosSelection.disableForReuse() 78 this.videosSelection.disableForReuse()
64 } 79 }
@@ -70,7 +85,7 @@ export class MyAccountVideosComponent implements DisableForReuseHook {
70 getVideosObservable (page: number, sort: VideoSortField) { 85 getVideosObservable (page: number, sort: VideoSortField) {
71 const newPagination = immutableAssign(this.pagination, { currentPage: page }) 86 const newPagination = immutableAssign(this.pagination, { currentPage: page })
72 87
73 return this.videoService.getMyVideos(newPagination, sort) 88 return this.videoService.getMyVideos(newPagination, sort, this.videosSearch)
74 } 89 }
75 90
76 async deleteSelectedVideos () { 91 async deleteSelectedVideos () {