6 files changed, 85 insertions, 33 deletions

diff --git a/client/src/app/search/advanced-search.model.ts b/client/src/app/search/advanced-search.model.ts
index 643cc9a29..516854a8c 100644
--- a/client/src/app/search/advanced-search.model.ts
+++ b/client/src/app/search/advanced-search.model.ts
@@ -1,5 +1,4 @@
-import { SearchTargetType } from '@shared/models/search/search-target-query.model'
-import { NSFWQuery } from '../../../../shared/models/search'
+import { NSFWQuery, SearchTargetType } from '@shared/models'
 
 export class AdvancedSearch {
   startDate: string // ISO 8601
diff --git a/client/src/app/search/highlight.pipe.ts b/client/src/app/search/highlight.pipe.ts
new file mode 100644
index 000000000..50ee5c1bd
--- /dev/null
+++ b/client/src/app/search/highlight.pipe.ts
@@ -0,0 +1,54 @@
+import { PipeTransform, Pipe } from '@angular/core'
+import { SafeHtml } from '@angular/platform-browser'
+
+// Thanks https://gist.github.com/adamrecsko/0f28f474eca63e0279455476cc11eca7#gistcomment-2917369
+@Pipe({ name: 'highlight' })
+export class HighlightPipe implements PipeTransform {
+  /* use this for single match search */
+  static SINGLE_MATCH = 'Single-Match'
+  /* use this for single match search with a restriction that target should start with search string */
+  static SINGLE_AND_STARTS_WITH_MATCH = 'Single-And-StartsWith-Match'
+  /* use this for global search */
+  static MULTI_MATCH = 'Multi-Match'
+
+  transform (
+    contentString: string = null,
+    stringToHighlight: string = null,
+    option = 'Single-And-StartsWith-Match',
+    caseSensitive = false,
+    highlightStyleName = 'search-highlight'
+  ): SafeHtml {
+    if (stringToHighlight && contentString && option) {
+      let regex: any = ''
+      const caseFlag: string = !caseSensitive ? 'i' : ''
+
+      switch (option) {
+        case 'Single-Match': {
+          regex = new RegExp(stringToHighlight, caseFlag)
+          break
+        }
+        case 'Single-And-StartsWith-Match': {
+          regex = new RegExp('^' + stringToHighlight, caseFlag)
+          break
+        }
+        case 'Multi-Match': {
+          regex = new RegExp(stringToHighlight, 'g' + caseFlag)
+          break
+        }
+        default: {
+          // default will be a global case-insensitive match
+          regex = new RegExp(stringToHighlight, 'gi')
+        }
+      }
+
+      const replaced = contentString.replace(
+        regex,
+        (match) => `<span class="${highlightStyleName}">${match}</span>`
+      )
+
+      return replaced
+    } else {
+      return contentString
+    }
+  }
+}
diff --git a/client/src/app/search/search-filters.component.ts b/client/src/app/search/search-filters.component.ts
index af76260a7..14a5d0484 100644
--- a/client/src/app/search/search-filters.component.ts
+++ b/client/src/app/search/search-filters.component.ts
@@ -1,10 +1,10 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { ValidatorFn } from '@angular/forms'
-import { VideoValidatorsService } from '@app/shared'
 import { ServerService } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { AdvancedSearch } from '@app/search/advanced-search.model'
-import { ServerConfig, VideoConstant } from '../../../../shared'
+import { VideoValidatorsService } from '@app/shared/shared-forms'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ServerConfig, VideoConstant } from '@shared/models'
 
 @Component({
   selector: 'my-search-filters',
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index 6486085be..83b06e0ce 100644
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -1,20 +1,15 @@
 import { forkJoin, of, Subscription } from 'rxjs'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, Notifier, ServerService } from '@app/core'
-import { HooksService } from '@app/core/plugins/hooks.service'
-import { AdvancedSearch } from '@app/search/advanced-search.model'
-import { SearchService } from '@app/search/search.service'
-import { User, UserService } from '@app/shared'
-import { immutableAssign } from '@app/shared/misc/utils'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
-import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
-import { Video } from '@app/shared/video/video.model'
+import { AuthService, ComponentPagination, HooksService, Notifier, ServerService, User, UserService } from '@app/core'
+import { immutableAssign } from '@app/helpers'
+import { Video, VideoChannel } from '@app/shared/shared-main'
+import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
 import { MetaService } from '@ngx-meta/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { ServerConfig } from '@shared/models'
-import { SearchTargetType } from '@shared/models/search/search-target-query.model'
+import { SearchTargetType, ServerConfig } from '@shared/models'
+import { AdvancedSearch } from './advanced-search.model'
+import { SearchService } from './search.service'
 
 @Component({
   selector: 'my-search',
diff --git a/client/src/app/search/search.module.ts b/client/src/app/search/search.module.ts
index df5459802..65c954de8 100644
--- a/client/src/app/search/search.module.ts
+++ b/client/src/app/search/search.module.ts
@@ -1,11 +1,15 @@
 import { TagInputModule } from 'ngx-chips'
 import { NgModule } from '@angular/core'
-import { SearchFiltersComponent } from '@app/search/search-filters.component'
-import { SearchRoutingModule } from '@app/search/search-routing.module'
-import { SearchComponent } from '@app/search/search.component'
-import { SearchService } from '@app/search/search.service'
-import { SharedModule } from '../shared'
+import { SharedFormModule } from '@app/shared/shared-forms'
+import { SharedMainModule } from '@app/shared/shared-main'
+import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
+import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
 import { ChannelLazyLoadResolver } from './channel-lazy-load.resolver'
+import { HighlightPipe } from './highlight.pipe'
+import { SearchFiltersComponent } from './search-filters.component'
+import { SearchRoutingModule } from './search-routing.module'
+import { SearchComponent } from './search.component'
+import { SearchService } from './search.service'
 import { VideoLazyLoadResolver } from './video-lazy-load.resolver'
 
 @NgModule({
@@ -13,7 +17,10 @@ import { VideoLazyLoadResolver } from './video-lazy-load.resolver'
     TagInputModule,
 
     SearchRoutingModule,
-    SharedModule
+    SharedMainModule,
+    SharedFormModule,
+    SharedUserSubscriptionModule,
+    SharedVideoMiniatureModule
   ],
 
   declarations: [
@@ -29,7 +36,8 @@ import { VideoLazyLoadResolver } from './video-lazy-load.resolver'
   providers: [
     SearchService,
     VideoLazyLoadResolver,
-    ChannelLazyLoadResolver
+    ChannelLazyLoadResolver,
+    HighlightPipe
   ]
 })
 export class SearchModule { }
diff --git a/client/src/app/search/search.service.ts b/client/src/app/search/search.service.ts
index fdb12ea2c..36342034f 100644
--- a/client/src/app/search/search.service.ts
+++ b/client/src/app/search/search.service.ts
@@ -2,17 +2,13 @@ import { Observable } from 'rxjs'
 import { catchError, map, switchMap } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
+import { ComponentPaginationLight, RestExtractor, RestPagination, RestService } from '@app/core'
+import { peertubeLocalStorage } from '@app/helpers'
 import { AdvancedSearch } from '@app/search/advanced-search.model'
-import { RestExtractor, RestPagination, RestService } from '@app/shared'
-import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
-import { ComponentPaginationLight } from '@app/shared/rest/component-pagination.model'
-import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
-import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
-import { Video } from '@app/shared/video/video.model'
-import { VideoService } from '@app/shared/video/video.service'
-import { ResultList, Video as VideoServerModel, VideoChannel as VideoChannelServerModel } from '../../../../shared'
-import { environment } from '../../environments/environment'
+import { Video, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
+import { ResultList, Video as VideoServerModel, VideoChannel as VideoChannelServerModel } from '@shared/models'
 import { SearchTargetType } from '@shared/models/search/search-target-query.model'
+import { environment } from '../../environments/environment'
 
 @Injectable()
 export class SearchService {