5 files changed, 47 insertions, 92 deletions

diff --git a/client/src/app/search/search-filters.component.html b/client/src/app/search/search-filters.component.html
index 07fb2c048..54fc7338f 100644
--- a/client/src/app/search/search-filters.component.html
+++ b/client/src/app/search/search-filters.component.html
@@ -46,6 +46,7 @@
               type="text" id="original-publication-after" name="original-publication-after"
               i18n-placeholder placeholder="After..."
               [(ngModel)]="originallyPublishedStartYear"
+              class="form-control"
             >
           </div>
           <div class="col-sm-6">
@@ -55,6 +56,7 @@
               type="text" id="original-publication-before" name="original-publication-before"
               i18n-placeholder placeholder="Before..."
               [(ngModel)]="originallyPublishedEndYear"
+              class="form-control"
             >
           </div>
         </div>
@@ -102,8 +104,8 @@
           Reset
         </button>
         <div class="peertube-select-container">
-          <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf">
-            <option [value]="undefined" i18n>Any or no category set</option>
+          <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf" class="form-control">
+            <option [value]="undefined" i18n>Display all categories</option>
             <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
           </select>
         </div>
@@ -115,8 +117,8 @@
           Reset
         </button>
         <div class="peertube-select-container">
-          <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf">
-            <option [value]="undefined" i18n>Any or no license set</option>
+          <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf" class="form-control">
+            <option [value]="undefined" i18n>Display all licenses</option>
             <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
           </select>
         </div>
@@ -128,8 +130,8 @@
           Reset
         </button>
         <div class="peertube-select-container">
-          <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf">
-            <option [value]="undefined" i18n>Any or no language set</option>
+          <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf" class="form-control">
+            <option [value]="undefined" i18n>Display all languages</option>
             <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
           </select>
         </div>
@@ -146,7 +148,7 @@
           [(ngModel)]="advancedSearch.tagsAllOf" name="tagsAllOf" id="tagsAllOf"
           [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
           i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a tag"
-          maxItems="5" modelAsStrings="true"
+          [maxItems]="5" [modelAsStrings]="true"
         ></tag-input>
       </div>
 
@@ -159,7 +161,7 @@
           [(ngModel)]="advancedSearch.tagsOneOf" name="tagsOneOf" id="tagsOneOf"
           [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
           i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a tag"
-          maxItems="5" modelAsStrings="true"
+          [maxItems]="5" [modelAsStrings]="true"
         ></tag-input>
       </div>
     </div>
diff --git a/client/src/app/search/search-filters.component.scss b/client/src/app/search/search-filters.component.scss
index 99af2e4c5..a88a1c0b0 100644
--- a/client/src/app/search/search-filters.component.scss
+++ b/client/src/app/search/search-filters.component.scss
@@ -66,65 +66,4 @@ input[type=submit] {
   white-space: nowrap;
 }
 
-::ng-deep {
-  .ng2-tag-input {
-    border: none !important;
-  }
-
-  .ng2-tags-container {
-    display: flex;
-    align-items: center;
-    border: 1px solid #C6C6C6;
-    border-radius: 3px;
-    padding: 5px !important;
-    height: max-content;
-  }
-
-  tag-input-form {
-    input {
-      height: 30px !important;
-      font-size: 12px !important;
-
-      background-color: var(--mainBackgroundColor) !important;
-      color: var(--mainForegroundColor) !important;
-    }
-  }
-
-  tag {
-    background-color: $grey-background-color !important;
-    color: #000 !important;
-    border-radius: 3px !important;
-    font-size: 12px !important;
-    height: 30px !important;
-    line-height: 30px !important;
-    margin: 0 5px 0 0 !important;
-    cursor: default !important;
-    padding: 0 8px 0 10px !important;
-
-    div {
-      height: 100% !important;
-    }
-  }
-
-  delete-icon {
-    cursor: pointer !important;
-    height: auto !important;
-    vertical-align: middle !important;
-    padding-left: 6px !important;
-
-    svg {
-      position: relative;
-      top: -1px;
-      height: auto !important;
-      vertical-align: middle !important;
-
-      path  {
-        fill: $grey-foreground-color !important;
-      }
-    }
-
-    &:hover {
-      transform: none !important;
-    }
-  }
-}
+@include ng2-tags;
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index d4d8bbcf7..641647e2e 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -82,11 +82,35 @@
 }
 
 @media screen and (max-width: $small-view) {
-  .video-channel-names {
-    flex-direction: column !important;
+  .search-result {
+    .entry.video-channel,
+    .entry.video {
+      flex-direction: column;
+      height: auto;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      
+      img {
+        margin: 0;
+      }
+
+      img {
+        margin: 0;
+      }
 
-    .video-channel-name {
-      margin-left: 0 !important;
+      .video-channel-info .video-channel-names {
+        align-items: center;
+        flex-direction: column !important;
+
+        .video-channel-name {
+          margin-left: 0 !important;
+        }
+      }
+
+      my-subscribe-button {
+        margin-top: 5px;
+      }
     }
   }
 }
@@ -100,12 +124,6 @@
     }
 
     .entry {
-      flex-direction: column;
-      height: auto;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-
       &.video {
         .video-info-name,
         .video-info-account {
@@ -126,16 +144,6 @@
           }
         }
       }
-
-      &.video-channel {
-        .video-channel-info .video-channel-names {
-          align-items: center;
-        }
-
-        my-subscribe-button {
-          margin-top: 5px;
-        }
-      }
     }
   }
 }
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index dfd8d8823..075994dd3 100644
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -141,7 +141,8 @@ export class SearchComponent implements OnInit, OnDestroy {
     return this.advancedSearch.size()
   }
 
-  removeVideoFromArray (video: Video) {
+  // Add VideoChannel for typings, but the template already checks "video" argument is a video
+  removeVideoFromArray (video: Video | VideoChannel) {
     this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id)
   }
 
diff --git a/client/src/app/search/search.service.ts b/client/src/app/search/search.service.ts
index 7610fee8c..3cad5aaa7 100644
--- a/client/src/app/search/search.service.ts
+++ b/client/src/app/search/search.service.ts
@@ -11,6 +11,7 @@ import { Video } from '@app/shared/video/video.model'
 import { AdvancedSearch } from '@app/search/advanced-search.model'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
 
 @Injectable()
 export class SearchService {
@@ -21,7 +22,11 @@ export class SearchService {
     private restExtractor: RestExtractor,
     private restService: RestService,
     private videoService: VideoService
-  ) {}
+  ) {
+    // Add ability to override search endpoint if the user updated this local storage key
+    const searchUrl = peertubeLocalStorage.getItem('search-url')
+    if (searchUrl) SearchService.BASE_SEARCH_URL = searchUrl
+  }
 
   searchVideos (parameters: {
     search: string,