4 files changed, 78 insertions, 0 deletions

diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
new file mode 100644
index 000000000..aa72fb68a
--- /dev/null
+++ b/client/src/app/header/header.component.html
@@ -0,0 +1,10 @@
+<input
+    type="text" id="search-video" name="search-video" placeholder="Search..."
+    [(ngModel)]="searchValue" (keyup.enter)="doSearch()"
+>
+<span (click)="doSearch()" class="icon icon-search"></span>
+
+<a class="upload-button" routerLink="/videos/upload">
+  <span class="icon icon-upload"></span>
+  Upload
+</a>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
new file mode 100644
index 000000000..7ba8ef26c
--- /dev/null
+++ b/client/src/app/header/header.component.scss
@@ -0,0 +1,39 @@
+#search-video {
+  @include peertube-input-text($search-input-width);
+  margin-right: 15px;
+  padding-right: 25px; // For the search icon
+
+  &::placeholder {
+    color: #000;
+  }
+}
+
+.icon.icon-search {
+  display: inline-block;
+  background: url('../../../assets/images/header/search.svg') no-repeat;
+  background-size: contain;
+  width: 25px;
+  height: 21px;
+  vertical-align: middle;
+  cursor: pointer;
+  // yolo
+  position: absolute;
+  margin-left: -50px;
+  margin-top: 5px;
+}
+
+.upload-button {
+  @include peertube-button-link;
+
+  margin-right: 25px;
+
+  .icon.icon-upload {
+    display: inline-block;
+    background: url('../../../assets/images/header/upload.svg') no-repeat;
+    background-size: contain;
+    width: 22px;
+    height: 24px;
+    vertical-align: middle;
+    margin-right: 6px;
+  }
+}
diff --git a/client/src/app/header/header.component.ts b/client/src/app/header/header.component.ts
new file mode 100644
index 000000000..a903048f2
--- /dev/null
+++ b/client/src/app/header/header.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core'
+import { Router } from '@angular/router'
+import { getParameterByName } from '../shared/misc/utils'
+
+@Component({
+  selector: 'my-header',
+  templateUrl: './header.component.html',
+  styleUrls: [ './header.component.scss' ]
+})
+
+export class HeaderComponent implements OnInit {
+  searchValue = ''
+
+  constructor (private router: Router) {}
+
+  ngOnInit () {
+    const searchQuery = getParameterByName('search', window.location.href)
+    if (searchQuery) this.searchValue = searchQuery
+  }
+
+  doSearch () {
+    if (!this.searchValue) return
+
+    this.router.navigate([ '/videos', 'search' ], {
+      queryParams: { search: this.searchValue }
+    })
+  }
+}
diff --git a/client/src/app/header/index.ts b/client/src/app/header/index.ts
new file mode 100644
index 000000000..d98d2d00a
--- /dev/null
+++ b/client/src/app/header/index.ts
@@ -0,0 +1 @@
+export * from './header.component'