Add search bars for a user's videos and playlist library

5 files changed, 8 insertions, 6 deletions

diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index 41ee87197..051e0bfa4 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -88,7 +88,7 @@ export class UserService {
   }
 
   getMyVideoQuotaUsed () {
-    const url = UserService.BASE_USERS_URL + '/me/video-quota-used'
+    const url = UserService.BASE_USERS_URL + 'me/video-quota-used'
 
     return this.authHttp.get<UserVideoQuota>(url)
                .pipe(catchError(err => this.restExtractor.handleError(err)))
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
index ba30953b9..6e0989227 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -42,7 +42,7 @@
   </div>
 
   <div class="input-container">
-    <input type="text" placeholder="Search playlists" [(ngModel)]="videoPlaylistSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
+    <input type="text" placeholder="Search playlists" i18n-placeholder [(ngModel)]="videoPlaylistSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
   </div>
 
   <div class="playlists">
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index a2a12bec7..746359851 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -150,6 +150,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
     this.getVideosObservable(this.pagination.currentPage).subscribe(
       ({ data, total }) => {
         this.pagination.totalItems = total
+        this.videos = []
         this.videos = this.videos.concat(data)
 
         if (this.groupByDate) this.buildGroupedDateLabels()
@@ -170,7 +171,6 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
 
   reloadVideos () {
     this.pagination.currentPage = 1
-    this.videos = []
     this.loadMoreVideos()
   }
 
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 3988cc055..ac83c5dfa 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -100,7 +100,8 @@ $more-margin-right: 15px;
     flex-direction: row;
     margin-bottom: 0;
     height: auto;
-    width: 100%;
+    display: flex;
+    flex-grow: 1;
 
     my-video-thumbnail {
       margin-right: 10px;
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 9adf46495..2dd47d74e 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -121,14 +121,15 @@ export class VideoService implements VideosProvider {
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 
-  getMyVideos (videoPagination: ComponentPagination, sort: VideoSortField): Observable<ResultList<Video>> {
+  getMyVideos (videoPagination: ComponentPagination, sort: VideoSortField, search?: string): Observable<ResultList<Video>> {
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
+    params = this.restService.addObjectParams(params, { search })
 
     return this.authHttp
-               .get<ResultList<Video>>(UserService.BASE_USERS_URL + '/me/videos', { params })
+               .get<ResultList<Video>>(UserService.BASE_USERS_URL + 'me/videos', { params })
                .pipe(
                  switchMap(res => this.extractVideos(res)),
                  catchError(err => this.restExtractor.handleError(err))