aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-library
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-05-03 11:06:19 +0200
committerChocobozzz <me@florianbigard.com>2021-05-03 16:42:15 +0200
commit1fd61899eaea245a5844e33e21f04b2562f16e5e (patch)
tree2a1d51b37b12219cade35e189d62686cd0fec105 /client/src/app/+my-library
parentdfcb6f50a607b6b402b4f8fa3d43792d61c912a5 (diff)
downloadPeerTube-1fd61899eaea245a5844e33e21f04b2562f16e5e.tar.gz
PeerTube-1fd61899eaea245a5844e33e21f04b2562f16e5e.tar.zst
PeerTube-1fd61899eaea245a5844e33e21f04b2562f16e5e.zip
Add ability to filter my videos by live
Diffstat (limited to 'client/src/app/+my-library')
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.html7
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.ts40
2 files changed, 23 insertions, 24 deletions
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 e9f436378..7c1cdb511 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,12 +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 <div class="has-feedback has-clear"> 22 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
23 <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch"
24 (ngModelChange)="onVideosSearchChanged()" />
25 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
26 <span class="sr-only" i18n>Clear filters</span>
27 </div>
28 23
29 <div class="peertube-select-container peertube-select-button"> 24 <div class="peertube-select-container peertube-select-button">
30 <select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control"> 25 <select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control">
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 356e158d6..f9c1b32b0 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,10 +1,11 @@
1import { concat, Observable, Subject } from 'rxjs' 1import { concat, Observable } from 'rxjs'
2import { debounceTime, tap, toArray } from 'rxjs/operators' 2import { tap, toArray } from 'rxjs/operators'
3import { Component, OnInit, ViewChild } from '@angular/core' 3import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router' 4import { ActivatedRoute, Router } from '@angular/router'
5import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core' 5import { AuthService, ComponentPagination, ConfirmService, Notifier, RouteFilter, 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 { DropdownAction, Video, VideoService } from '@app/shared/shared-main' 9import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
9import { LiveStreamInformationComponent } from '@app/shared/shared-video-live' 10import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
10import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' 11import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
@@ -15,7 +16,7 @@ import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.c
15 templateUrl: './my-videos.component.html', 16 templateUrl: './my-videos.component.html',
16 styleUrls: [ './my-videos.component.scss' ] 17 styleUrls: [ './my-videos.component.scss' ]
17}) 18})
18export class MyVideosComponent implements OnInit, DisableForReuseHook { 19export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewInit, DisableForReuseHook {
19 @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent 20 @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
20 @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent 21 @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
21 @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent 22 @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent
@@ -40,13 +41,18 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
40 videoActions: DropdownAction<{ video: Video }>[] = [] 41 videoActions: DropdownAction<{ video: Video }>[] = []
41 42
42 videos: Video[] = [] 43 videos: Video[] = []
43 videosSearch: string
44 videosSearchChanged = new Subject<string>()
45 getVideosObservableFunction = this.getVideosObservable.bind(this) 44 getVideosObservableFunction = this.getVideosObservable.bind(this)
46 sort: VideoSortField = '-publishedAt' 45 sort: VideoSortField = '-publishedAt'
47 46
48 user: User 47 user: User
49 48
49 inputFilters: AdvancedInputFilter[] = [
50 {
51 queryParams: { 'search': 'isLive:true' },
52 label: $localize`Only live videos`
53 }
54 ]
55
50 constructor ( 56 constructor (
51 protected router: Router, 57 protected router: Router,
52 protected serverService: ServerService, 58 protected serverService: ServerService,
@@ -57,6 +63,8 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
57 private confirmService: ConfirmService, 63 private confirmService: ConfirmService,
58 private videoService: VideoService 64 private videoService: VideoService
59 ) { 65 ) {
66 super()
67
60 this.titlePage = $localize`My videos` 68 this.titlePage = $localize`My videos`
61 } 69 }
62 70
@@ -65,20 +73,16 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
65 73
66 this.user = this.authService.getUser() 74 this.user = this.authService.getUser()
67 75
68 this.videosSearchChanged 76 this.initSearch()
69 .pipe(debounceTime(500)) 77 this.listenToSearchChange()
70 .subscribe(() => {
71 this.videosSelection.reloadVideos()
72 })
73 } 78 }
74 79
75 resetSearch () { 80 ngAfterViewInit () {
76 this.videosSearch = '' 81 if (this.search) this.setTableFilter(this.search, false)
77 this.onVideosSearchChanged()
78 } 82 }
79 83
80 onVideosSearchChanged () { 84 loadData () {
81 this.videosSearchChanged.next() 85 this.videosSelection.reloadVideos()
82 } 86 }
83 87
84 onChangeSortColumn () { 88 onChangeSortColumn () {
@@ -96,7 +100,7 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
96 getVideosObservable (page: number) { 100 getVideosObservable (page: number) {
97 const newPagination = immutableAssign(this.pagination, { currentPage: page }) 101 const newPagination = immutableAssign(this.pagination, { currentPage: page })
98 102
99 return this.videoService.getMyVideos(newPagination, this.sort, this.videosSearch) 103 return this.videoService.getMyVideos(newPagination, this.sort, this.search)
100 .pipe( 104 .pipe(
101 tap(res => this.pagination.totalItems = res.total) 105 tap(res => this.pagination.totalItems = res.total)
102 ) 106 )