17 files changed, 332 insertions, 133 deletions

diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 48886fd4e..9d655c523 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -18,6 +18,7 @@ import { VideosModule } from './videos'
 import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '../../../shared/models/i18n'
 import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
+import { SearchModule } from '@app/search'
 
 export function metaFactory (serverService: ServerService): MetaLoader {
   return new MetaStaticLoader({
@@ -52,6 +53,7 @@ export function metaFactory (serverService: ServerService): MetaLoader {
     LoginModule,
     ResetPasswordModule,
     SignupModule,
+    SearchModule,
     SharedModule,
     VideosModule,
 
diff --git a/client/src/app/header/header.component.ts b/client/src/app/header/header.component.ts
index 0e999fbb1..f73d40947 100644
--- a/client/src/app/header/header.component.ts
+++ b/client/src/app/header/header.component.ts
@@ -24,7 +24,7 @@ export class HeaderComponent implements OnInit {
   }
 
   doSearch () {
-    this.router.navigate([ '/videos', 'search' ], {
+    this.router.navigate([ '/search' ], {
       queryParams: { search: this.searchValue }
     })
   }
diff --git a/client/src/app/search/index.ts b/client/src/app/search/index.ts
new file mode 100644
index 000000000..40f4e021f
--- /dev/null
+++ b/client/src/app/search/index.ts
@@ -0,0 +1,3 @@
+export * from './search-routing.module'
+export * from './search.component'
+export * from './search.module'
diff --git a/client/src/app/search/search-routing.module.ts b/client/src/app/search/search-routing.module.ts
new file mode 100644
index 000000000..0ac9e6b57
--- /dev/null
+++ b/client/src/app/search/search-routing.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { MetaGuard } from '@ngx-meta/core'
+import { SearchComponent } from '@app/search/search.component'
+
+const searchRoutes: Routes = [
+  {
+    path: 'search',
+    component: SearchComponent,
+    canActivate: [ MetaGuard ],
+    data: {
+      meta: {
+        title: 'Search'
+      }
+    }
+  }
+]
+
+@NgModule({
+  imports: [ RouterModule.forChild(searchRoutes) ],
+  exports: [ RouterModule ]
+})
+export class SearchRoutingModule {}
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
new file mode 100644
index 000000000..b8c4d7dc5
--- /dev/null
+++ b/client/src/app/search/search.component.html
@@ -0,0 +1,19 @@
+<div i18n *ngIf="pagination.totalItems === 0" class="no-result">
+  No results found
+</div>
+
+<div myInfiniteScroller [autoLoading]="true" (nearOfBottom)="onNearOfBottom()" class="search-result">
+  <div i18n *ngIf="pagination.totalItems" class="results-counter">
+    {{ pagination.totalItems | myNumberFormatter }} results for <span class="search-value">{{ currentSearch }}</span>
+  </div>
+
+  <div *ngFor="let video of videos" class="entry video">
+    <my-video-thumbnail [video]="video"></my-video-thumbnail>
+
+    <div class="video-info">
+      <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
+      <span i18n class="video-info-date-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
+      <a class="video-info-account" [routerLink]="[ '/accounts', video.by ]">{{ video.by }}</a>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
new file mode 100644
index 000000000..06e3c9542
--- /dev/null
+++ b/client/src/app/search/search.component.scss
@@ -0,0 +1,93 @@
+@import '_variables';
+@import '_mixins';
+
+.no-result {
+  height: 70vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: $font-semibold;
+}
+
+.search-result {
+  margin-left: 40px;
+  margin-top: 40px;
+
+  .results-counter {
+    font-size: 15px;
+    padding-bottom: 20px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid #DADADA;
+
+    .search-value {
+      font-weight: $font-semibold;
+    }
+  }
+
+  .entry {
+    display: flex;
+    min-height: 130px;
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+
+    &.video {
+
+      my-video-thumbnail {
+        margin-right: 10px;
+      }
+
+      .video-info {
+        flex-grow: 1;
+
+        .video-info-name {
+          @include disable-default-a-behaviour;
+
+          color: #000;
+          display: block;
+          width: fit-content;
+          font-size: 18px;
+          font-weight: $font-semibold;
+        }
+
+        .video-info-date-views {
+          font-size: 14px;
+        }
+
+        .video-info-account {
+          @include disable-default-a-behaviour;
+
+          display: block;
+          width: fit-content;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 14px;
+          color: #585858;
+
+          &:hover {
+            color: #303030;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .entry {
+    flex-direction: column;
+    height: auto;
+    text-align: center;
+
+    &.video {
+      .video-info-name {
+        margin: auto;
+      }
+
+      my-video-thumbnail {
+        margin-right: 0;
+      }
+    }
+  }
+}
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
new file mode 100644
index 000000000..be1cb3689
--- /dev/null
+++ b/client/src/app/search/search.component.ts
@@ -0,0 +1,93 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { RedirectService } from '@app/core'
+import { NotificationsService } from 'angular2-notifications'
+import { Subscription } from 'rxjs'
+import { SearchService } from '@app/search/search.service'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Video } from '../../../../shared'
+import { MetaService } from '@ngx-meta/core'
+
+@Component({
+  selector: 'my-search',
+  styleUrls: [ './search.component.scss' ],
+  templateUrl: './search.component.html'
+})
+export class SearchComponent implements OnInit, OnDestroy {
+  videos: Video[] = []
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 10, // It's per object type (so 10 videos, 10 video channels etc)
+    totalItems: null
+  }
+
+  private subActivatedRoute: Subscription
+  private currentSearch: string
+
+  constructor (
+    private i18n: I18n,
+    private route: ActivatedRoute,
+    private metaService: MetaService,
+    private redirectService: RedirectService,
+    private notificationsService: NotificationsService,
+    private searchService: SearchService
+  ) { }
+
+  ngOnInit () {
+    this.subActivatedRoute = this.route.queryParams.subscribe(
+      queryParams => {
+        const querySearch = queryParams['search']
+
+        if (!querySearch) return this.redirectService.redirectToHomepage()
+        if (querySearch === this.currentSearch) return
+
+        this.currentSearch = querySearch
+        this.updateTitle()
+
+        this.reload()
+      },
+
+      err => this.notificationsService.error('Error', err.text)
+    )
+  }
+
+  ngOnDestroy () {
+    if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe()
+  }
+
+  search () {
+    return this.searchService.searchVideos(this.currentSearch, this.pagination)
+      .subscribe(
+        ({ videos, totalVideos }) => {
+          this.videos = this.videos.concat(videos)
+          this.pagination.totalItems = totalVideos
+        },
+
+        error => {
+          this.notificationsService.error(this.i18n('Error'), error.message)
+        }
+      )
+  }
+
+  onNearOfBottom () {
+    // Last page
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+
+    this.pagination.currentPage += 1
+    this.search()
+  }
+
+  private reload () {
+    this.pagination.currentPage = 1
+    this.pagination.totalItems = null
+
+    this.videos = []
+
+    this.search()
+  }
+
+  private updateTitle () {
+    this.metaService.setTitle(this.i18n('Search') + ' ' + this.currentSearch)
+  }
+}
diff --git a/client/src/app/search/search.module.ts b/client/src/app/search/search.module.ts
new file mode 100644
index 000000000..c6ec74d20
--- /dev/null
+++ b/client/src/app/search/search.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core'
+import { SharedModule } from '../shared'
+import { SearchComponent } from '@app/search/search.component'
+import { SearchService } from '@app/search/search.service'
+import { SearchRoutingModule } from '@app/search/search-routing.module'
+
+@NgModule({
+  imports: [
+    SearchRoutingModule,
+    SharedModule
+  ],
+
+  declarations: [
+    SearchComponent
+  ],
+
+  exports: [
+    SearchComponent
+  ],
+
+  providers: [
+    SearchService
+  ]
+})
+export class SearchModule { }
diff --git a/client/src/app/search/search.service.ts b/client/src/app/search/search.service.ts
new file mode 100644
index 000000000..02d5f5915
--- /dev/null
+++ b/client/src/app/search/search.service.ts
@@ -0,0 +1,46 @@
+import { catchError, switchMap } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { VideoService } from '@app/shared/video/video.service'
+import { RestExtractor, RestService } from '@app/shared'
+import { environment } from 'environments/environment'
+import { ResultList, Video } from '../../../../shared'
+import { Video as VideoServerModel } from '@app/shared/video/video.model'
+
+export type SearchResult = {
+  videosResult: { totalVideos: number, videos: Video[] }
+}
+
+@Injectable()
+export class SearchService {
+  static BASE_SEARCH_URL = environment.apiUrl + '/api/v1/search/'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService,
+    private videoService: VideoService
+  ) {}
+
+  searchVideos (
+    search: string,
+    componentPagination: ComponentPagination
+  ): Observable<{ videos: Video[], totalVideos: number }> {
+    const url = SearchService.BASE_SEARCH_URL + 'videos'
+
+    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination)
+    params = params.append('search', search)
+
+    return this.authHttp
+               .get<ResultList<VideoServerModel>>(url, { params })
+               .pipe(
+                 switchMap(res => this.videoService.extractVideos(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index fdfb90600..99df61cdb 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -37,9 +37,14 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import {
   CustomConfigValidatorsService,
-  LoginValidatorsService, ReactiveFileComponent,
+  LoginValidatorsService,
+  ReactiveFileComponent,
   ResetPasswordValidatorsService,
-  UserValidatorsService, VideoAbuseValidatorsService, VideoChannelValidatorsService, VideoCommentValidatorsService, VideoValidatorsService
+  UserValidatorsService,
+  VideoAbuseValidatorsService,
+  VideoChannelValidatorsService,
+  VideoCommentValidatorsService,
+  VideoValidatorsService
 } from '@app/shared/forms'
 import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar'
 import { ScreenService } from '@app/shared/misc/screen.service'
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 20020e2a8..3010e5ccc 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -3,7 +3,7 @@
 
   <div class="video-miniature-information">
     <a
-      class="video-miniature-name" alt=""
+      class="video-miniature-name"
       [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur() }"
     >
       {{ video.name }}
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index 971f352ba..4909cf3f1 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -2,7 +2,7 @@
   [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
   class="video-thumbnail"
 >
-<img [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
+<img alt="" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
 
 <div class="video-thumbnail-overlay">
   {{ video.durationLabel }}
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index b4c1f10f9..f316d31ea 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -231,27 +231,6 @@ export class VideoService {
     return this.buildBaseFeedUrls(params)
   }
 
-  searchVideos (
-    search: string,
-    videoPagination: ComponentPagination,
-    sort: VideoSortField
-  ): Observable<{ videos: Video[], totalVideos: number }> {
-    const url = VideoService.BASE_VIDEO_URL + 'search'
-
-    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
-
-    let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, pagination, sort)
-    params = params.append('search', search)
-
-    return this.authHttp
-               .get<ResultList<VideoServerModel>>(url, { params })
-               .pipe(
-                 switchMap(res => this.extractVideos(res)),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
   removeVideo (id: number) {
     return this.authHttp
                .delete(VideoService.BASE_VIDEO_URL + id)
@@ -289,21 +268,7 @@ export class VideoService {
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 
-  private setVideoRate (id: number, rateType: VideoRateType) {
-    const url = VideoService.BASE_VIDEO_URL + id + '/rate'
-    const body: UserVideoRateUpdate = {
-      rating: rateType
-    }
-
-    return this.authHttp
-               .put(url, body)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  private extractVideos (result: ResultList<VideoServerModel>) {
+  extractVideos (result: ResultList<VideoServerModel>) {
     return this.serverService.localeObservable
                .pipe(
                  map(translations => {
@@ -319,4 +284,18 @@ export class VideoService {
                  })
                )
   }
+
+  private setVideoRate (id: number, rateType: VideoRateType) {
+    const url = VideoService.BASE_VIDEO_URL + id + '/rate'
+    const body: UserVideoRateUpdate = {
+      rating: rateType
+    }
+
+    return this.authHttp
+               .put(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
 }
diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts
index 5e7c7886c..5f7c8bd48 100644
--- a/client/src/app/videos/video-list/index.ts
+++ b/client/src/app/videos/video-list/index.ts
@@ -1,3 +1,3 @@
+export * from './video-local.component'
 export * from './video-recently-added.component'
 export * from './video-trending.component'
-export * from './video-search.component'
diff --git a/client/src/app/videos/video-list/video-search.component.ts b/client/src/app/videos/video-list/video-search.component.ts
deleted file mode 100644
index 33ed3f00e..000000000
--- a/client/src/app/videos/video-list/video-search.component.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { Location } from '@angular/common'
-import { RedirectService } from '@app/core'
-import { immutableAssign } from '@app/shared/misc/utils'
-import { NotificationsService } from 'angular2-notifications'
-import { Subscription } from 'rxjs'
-import { AuthService } from '../../core/auth'
-import { AbstractVideoList } from '../../shared/video/abstract-video-list'
-import { VideoService } from '../../shared/video/video.service'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { ScreenService } from '@app/shared/misc/screen.service'
-
-@Component({
-  selector: 'my-videos-search',
-  styleUrls: [ '../../shared/video/abstract-video-list.scss' ],
-  templateUrl: '../../shared/video/abstract-video-list.html'
-})
-export class VideoSearchComponent extends AbstractVideoList implements OnInit, OnDestroy {
-  titlePage: string
-  currentRoute = '/videos/search'
-  loadOnInit = false
-
-  protected otherRouteParams = {
-    search: ''
-  }
-  private subActivatedRoute: Subscription
-
-  constructor (
-    protected router: Router,
-    protected route: ActivatedRoute,
-    protected notificationsService: NotificationsService,
-    protected authService: AuthService,
-    protected location: Location,
-    protected i18n: I18n,
-    protected screenService: ScreenService,
-    private videoService: VideoService,
-    private redirectService: RedirectService
-  ) {
-    super()
-
-    this.titlePage = i18n('Search')
-  }
-
-  ngOnInit () {
-    super.ngOnInit()
-
-    this.subActivatedRoute = this.route.queryParams.subscribe(
-      queryParams => {
-        const querySearch = queryParams['search']
-
-        if (!querySearch) return this.redirectService.redirectToHomepage()
-        if (this.otherRouteParams.search === querySearch) return
-
-        this.otherRouteParams.search = querySearch
-        this.reloadVideos()
-      },
-
-      err => this.notificationsService.error('Error', err.text)
-    )
-  }
-
-  ngOnDestroy () {
-    super.ngOnDestroy()
-
-    if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe()
-  }
-
-  getVideosObservable (page: number) {
-    const newPagination = immutableAssign(this.pagination, { currentPage: page })
-    return this.videoService.searchVideos(this.otherRouteParams.search, newPagination, this.sort)
-  }
-
-  generateSyndicationList () {
-    throw new Error('Search does not support syndication.')
-  }
-}
diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts
index da786c0f9..538a43c6d 100644
--- a/client/src/app/videos/videos-routing.module.ts
+++ b/client/src/app/videos/videos-routing.module.ts
@@ -1,8 +1,7 @@
 import { NgModule } from '@angular/core'
-import { RouterModule, Routes, UrlSegment } from '@angular/router'
+import { RouterModule, Routes } from '@angular/router'
 import { VideoLocalComponent } from '@app/videos/video-list/video-local.component'
 import { MetaGuard } from '@ngx-meta/core'
-import { VideoSearchComponent } from './video-list'
 import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
 import { VideoTrendingComponent } from './video-list/video-trending.component'
 import { VideosComponent } from './videos.component'
@@ -46,15 +45,6 @@ const videosRoutes: Routes = [
         }
       },
       {
-        path: 'search',
-        component: VideoSearchComponent,
-        data: {
-          meta: {
-            title: 'Search videos'
-          }
-        }
-      },
-      {
         path: 'upload',
         loadChildren: 'app/videos/+video-edit/video-add.module#VideoAddModule',
         data: {
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
index 7c3d457b3..c38257e08 100644
--- a/client/src/app/videos/videos.module.ts
+++ b/client/src/app/videos/videos.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core'
 import { VideoLocalComponent } from '@app/videos/video-list/video-local.component'
 import { SharedModule } from '../shared'
-import { VideoSearchComponent } from './video-list'
 import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
 import { VideoTrendingComponent } from './video-list/video-trending.component'
 import { VideosRoutingModule } from './videos-routing.module'
@@ -18,8 +17,7 @@ import { VideosComponent } from './videos.component'
 
     VideoTrendingComponent,
     VideoRecentlyAddedComponent,
-    VideoLocalComponent,
-    VideoSearchComponent
+    VideoLocalComponent
   ],
 
   exports: [