add search to account view

client/src/app/+accounts/account-search/account-search.component.ts

@@ -19,6 +19,7 @@ export class AccountSearchComponent extends AbstractVideoList implements OnInit,
   titlePage: string
   loadOnInit = false
 
+  _search = ''
   filter: VideoFilter = null
 
   private account: Account
@@ -62,21 +63,31 @@ export class AccountSearchComponent extends AbstractVideoList implements OnInit,
     super.ngOnDestroy()
   }
 
+  set search (value: string) {
+    if (value === '') this.router.navigate(['../videos'], { relativeTo: this.route })
+    this._search = value
+
+    this.reloadVideos()
+  }
+
   getVideosObservable (page: number) {
     const newPagination = immutableAssign(this.pagination, { currentPage: page })
     const options = {
       account: this.account,
       videoPagination: newPagination,
       sort: this.sort,
       nsfwPolicy: this.nsfwPolicy,
-      videoFilter: this.filter
+      videoFilter: this.filter,
+      search: this._search
     }
 
     return this.videoService
                .getAccountVideos(options)
                .pipe(
                  tap(({ total }) => {
-                   this.titlePage = $localize`${total} results on this account for TODO`
+                   this.titlePage = this._search
+                     ? $localize`Published ${total} videos matching "${this._search}"`
+                     : $localize`Published ${total} videos`
                  })
                )
   }
@@ -87,5 +98,7 @@ export class AccountSearchComponent extends AbstractVideoList implements OnInit,
     this.reloadVideos()
   }
 
-  generateSyndicationList () {}
+  generateSyndicationList () {
+    /* disable syndication */
+  }
 }

client/src/app/+accounts/accounts.component.html

@@ -45,7 +45,7 @@
 
       <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
 
-      <simple-search-input (searchChanged)="searchChanged($event)" (enter)="'search'"></simple-search-input>
+      <simple-search-input (searchChanged)="searchChanged($event)"></simple-search-input>
     </div>
   </div>
 

client/src/app/+accounts/accounts.component.ts

@@ -15,6 +15,7 @@ import { AccountSearchComponent } from './account-search/account-search.componen
 })
 export class AccountsComponent implements OnInit, OnDestroy {
   @ViewChild('accountReportModal') accountReportModal: AccountReportComponent
+  accountSearch: AccountSearchComponent
 
   account: Account
   accountUser: User
@@ -102,13 +103,14 @@ export class AccountsComponent implements OnInit, OnDestroy {
 
   onOutletLoaded (component: Component) {
     if (component instanceof AccountSearchComponent) {
-      console.log('AccounSearchComponent')
+      this.accountSearch = component
+    } else {
+      this.accountSearch = undefined
     }
-    console.log('not AccountSearchComponent')
   }
 
   searchChanged (search: string) {
-    console.log('search: ' + search)
+    if (this.accountSearch) this.accountSearch.search = search
   }
 
   private onAccount (account: Account) {

client/src/app/shared/shared-main/misc/simple-search-input.component.html

@@ -1,13 +1,15 @@
-<my-global-icon iconName="search" aria-label="Search" role="button" (click)="showInput()"></my-global-icon>
+<span>
+  <my-global-icon iconName="search" aria-label="Search" role="button" (click)="showInput()"></my-global-icon>
+
+  <input
+    #searchVideos
+    name="search-videos"
+    type="text"
+    [(ngModel)]="search"
+    i18n-placeholder placeholder="Search videos"
+    (focusout)="focusLost()"
+    (keyup.enter)="searchChange()"
+    [hidden]="!shown"
+  >
+</span>
 
-<input
-  #searchVideos
-  name="search-videos"
-  type="text"
-  [(ngModel)]="search"
-  (ngModelChange)="searchChange"
-  i18n-placeholder placeholder="Search videos"
-  (focusout)="focusLost()"
-  (keyup.enter)="navigate()"
-  [hidden]="!shown"
->

client/src/app/shared/shared-main/misc/simple-search-input.component.scss

@@ -1,13 +1,18 @@
 @import '_variables';
 @import '_mixins';
 
+span {
+  opacity: .6;
+
+  &:focus-within {
+    opacity: 1;
+  }
+}
+
 my-global-icon {
   height: 18px;
   position: relative;
   top: -2px;
-
-  opacity: .6;
-  color: pvar(--mainForegroundColor);
 }
 
 input {

client/src/app/shared/shared-main/misc/simple-search-input.component.ts

@@ -9,16 +9,14 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
   styleUrls: [ './simple-search-input.component.scss' ]
 })
 export class SimpleSearchInputComponent implements OnInit {
-  @ViewChild("searchVideos") input: ElementRef
-
-  @Input() enter: string
+  @ViewChild('searchVideos') input: ElementRef
 
   @Output() searchChanged = new EventEmitter<string>()
 
   search = ''
   shown: boolean
 
-  private searchSubject= new Subject<string>()
+  private searchSubject = new Subject<string>()
 
   constructor (
     private router: Router,
@@ -38,9 +36,7 @@ export class SimpleSearchInputComponent implements OnInit {
 
   showInput () {
     this.shown = true
-    setTimeout(()=> {
-      this.input.nativeElement.focus()
-    })
+    setTimeout(() => this.input.nativeElement.focus())
   }
 
   focusLost () {
@@ -49,10 +45,7 @@ export class SimpleSearchInputComponent implements OnInit {
   }
 
   searchChange () {
-    this.searchChanged.emit(this.search)
-  }
-
-  navigate () {
     this.router.navigate(['./search'], { relativeTo: this.route })
+    this.searchSubject.next(this.search)
   }
 }

client/src/app/shared/shared-main/video/video.service.ts

@@ -140,8 +140,9 @@ export class VideoService implements VideosProvider {
     sort: VideoSortField
     nsfwPolicy?: NSFWPolicyType
     videoFilter?: VideoFilter
+    search?: string
   }): Observable<ResultList<Video>> {
-    const { account, videoPagination, sort, videoFilter, nsfwPolicy } = parameters
+    const { account, videoPagination, sort, videoFilter, nsfwPolicy, search } = parameters
 
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
 
@@ -156,6 +157,10 @@ export class VideoService implements VideosProvider {
       params = params.set('filter', videoFilter)
     }
 
+    if (search) {
+      params = params.set('search', search)
+    }
+
     return this.authHttp
                .get<ResultList<Video>>(AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/videos', { params })
                .pipe(

server/controllers/api/accounts.ts

@@ -175,7 +175,8 @@ async function listAccountVideos (req: express.Request, res: express.Response) {
     withFiles: false,
     accountId: account.id,
     user: res.locals.oauth ? res.locals.oauth.token.User : undefined,
-    countVideos
+    countVideos,
+    search: req.query.search
   }, 'filter:api.accounts.videos.list.params')
 
   const resultList = await Hooks.wrapPromiseFun(

server/middlewares/validators/videos/videos.ts

@@ -6,6 +6,7 @@ import { MVideoFullLight } from '@server/types/models'
 import { ServerErrorCode, UserRight, VideoChangeOwnershipStatus, VideoPrivacy } from '../../../../shared'
 import { VideoChangeOwnershipAccept } from '../../../../shared/models/videos/video-change-ownership-accept.model'
 import {
+  exists,
   isBooleanValid,
   isDateValid,
   isFileFieldValid,
@@ -444,6 +445,9 @@ const commonVideosFiltersValidator = [
     .optional()
     .customSanitizer(toBooleanOrNull)
     .custom(isBooleanValid).withMessage('Should have a valid skip count boolean'),
+  query('search')
+    .optional()
+    .custom(exists).withMessage('Should have a valid search'),
 
   (req: express.Request, res: express.Response, next: express.NextFunction) => {
     logger.debug('Checking commons video filters query', { parameters: req.query })

server/models/video/video.ts

@@ -1087,6 +1087,7 @@ export class VideoModel extends Model {
     user?: MUserAccountId
     historyOfUser?: MUserId
     countVideos?: boolean
+    search?: string
   }) {
     if ((options.filter === 'all-local' || options.filter === 'all') && !options.user.hasRight(UserRight.SEE_ALL_VIDEOS)) {
       throw new Error('Try to filter all-local but no user has not the see all videos right')
@@ -1123,7 +1124,8 @@ export class VideoModel extends Model {
       includeLocalVideos: options.includeLocalVideos,
       user: options.user,
       historyOfUser: options.historyOfUser,
-      trendingDays
+      trendingDays,
+      search: options.search
     }
 
     return VideoModel.getAvailableForApi(queryOptions, options.countVideos)