Search typeahead initial design

2 files changed, 55 insertions, 0 deletions

diff --git a/client/src/app/shared/angular/highlight.pipe.ts b/client/src/app/shared/angular/highlight.pipe.ts
new file mode 100644
index 000000000..4199d833e
--- /dev/null
+++ b/client/src/app/shared/angular/highlight.pipe.ts
@@ -0,0 +1,52 @@
+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: string = "Single-Match"
+  /* use this for single match search with a restriction that target should start with search string */
+  static SINGLE_AND_STARTS_WITH_MATCH: string = "Single-And-StartsWith-Match"
+  /* use this for global search */
+  static MULTI_MATCH: string = "Multi-Match"
+
+  constructor() {}
+  transform(
+      contentString: string = null,
+      stringToHighlight: string = null,
+      option: string = "Single-And-StartsWith-Match",
+      caseSensitive: boolean = false,
+      highlightStyleName: string = "search-highlight"
+  ): SafeHtml {
+      if (stringToHighlight && contentString && option) {
+          let regex: any = ""
+          let 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/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 98211c727..090a5b7f9 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -89,6 +89,7 @@ import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe'
 import { VideoDurationPipe } from '@app/shared/angular/video-duration-formatter.pipe'
 import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe'
 import { FromNowPipe } from '@app/shared/angular/from-now.pipe'
+import { HighlightPipe }from '@app/shared/angular/highlight.pipe'
 import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
 import { VideoActionsDropdownComponent } from '@app/shared/video/video-actions-dropdown.component'
 import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklist.component'
@@ -149,6 +150,7 @@ import { ClipboardModule } from '@angular/cdk/clipboard'
     NumberFormatterPipe,
     ObjectLengthPipe,
     FromNowPipe,
+    HighlightPipe,
     PeerTubeTemplateDirective,
     VideoDurationPipe,
 
@@ -254,6 +256,7 @@ import { ClipboardModule } from '@angular/cdk/clipboard'
     NumberFormatterPipe,
     ObjectLengthPipe,
     FromNowPipe,
+    HighlightPipe,
     PeerTubeTemplateDirective,
     VideoDurationPipe
   ],