src/app/modules/pro/channel/channel.component.html

@@ -7,21 +7,11 @@
  />
 
  <div class="m-proChannelTopbar__SearchBox">
- <div class="mdl-textfield mdl-js-textfield">
- <i class="material-icons search">search</i>
- <input
- [(ngModel)]="query"
- id="search"
- autocomplete="off"
- class="mdl-textfield__input ng-pristine ng-valid ng-touched"
- type="text"
- (keyup.enter)="search()"
- />
- <ng-container *ngIf="query">
- <i class="material-icons clear" (click)="clearSearch()">close</i>
- </ng-container>
- <label class="mdl-textfield__label" for="search"></label>
- </div>
+ <m-pro__searchBox
+ [(query)]="query"
+ (onSearch)="search()"
+ (onClearSearch)="clearSearch()"
+ ></m-pro__searchBox>
  </div>
 
  <ng-container *ngIf="!collapseNavItems">
@@ -99,7 +89,11 @@
  </ng-template>
  </ng-container>
 
- <m-pro__hamburger-menu></m-pro__hamburger-menu>
+ <m-pro__hamburger-menu
+ [(query)]="query"
+ (onSearch)="search()"
+ (onClearSearch)="clearSearch()"
+ ></m-pro__hamburger-menu>
  </div>
 
  <div class="m-proChannel__body">

src/app/modules/pro/channel/channel.component.scss

@@ -104,56 +104,6 @@ m-pro--channel {
  flex-grow: 1;
  max-width: 300px;
  }
-
- div.mdl-textfield.mdl-js-textfield {
- width: 100%;
- transition: width ease-in-out 0.2s;
- padding: 8px 0;
-
- i.search {
- position: absolute;
- margin: 6px;
- font-size: 20px;
-
- @include m-theme() {
- color: themed($m-black);
- }
- }
-
- i.clear {
- font-size: 16px;
-
- border-radius: 20px;
- cursor: pointer;
- position: absolute;
- top: 16px;
- right: 10px;
-
- @include m-theme() {
- color: themed($m-black);
- }
- }
-
- input {
- height: 32px;
- border-radius: 18px;
- font-family: Roboto, sans-serif;
- font-size: 14px;
- letter-spacing: 0.5px;
- font-weight: 600;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- padding: 8px 8px 8px 32px;
- box-sizing: border-box;
-
- color: var(--m-pro--text-color);
- background-color: var(--m-pro--transparent-background-color);
- }
-
- label {
- display: none;
- }
- }
  }
 
  .m-btn:disabled {

src/app/modules/pro/channel/hamburger-menu/hamburger-menu.component.html

@@ -79,6 +79,15 @@
  </a>
  </li>
 
+ <li class="m-pro__hamburger-menu-menu__search-box">
+ <m-pro__searchBox
+ [query]="query"
+ (queryChange)="queryChange.emit($event)"
+ (onSearch)="onSearch.emit($event); closeMenu()"
+ (onClearSearch)="onClearSearch.emit($event); closeMenu()"
+ ></m-pro__searchBox>
+ </li>
+
  <li class="m-pro__hamburger-menu-menu__spacer"></li>
 
  <ng-container *ngIf="items && items.length">

src/app/modules/pro/channel/hamburger-menu/hamburger-menu.component.scss

@@ -69,6 +69,19 @@ m-pro__hamburger-menu {
  }
  }
 
+ &.m-pro__hamburger-menu-menu__search-box {
+ > m-pro__searchbox {
+ width: 100%;
+ display: block;
+ margin: 0 auto 16px;
+
+ .mdl-textfield__input {
+ border: 1px solid var(--m-pro--text-color);
+ border-radius: 6px;
+ }
+ }
+ }
+
  &.m-pro__hamburger-menu-menu__spacer {
  height: 0;
  border-top: 1px solid var(--m-pro--text-color);

src/app/modules/pro/channel/hamburger-menu/hamburger-menu.component.ts

@@ -2,6 +2,7 @@ import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
+ Input,
  Output,
 } from '@angular/core';
 import { ProChannelService } from '../channel.service';
@@ -13,6 +14,14 @@ import { Session } from '../../../../services/session';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProHamburgerMenu {
+ @Input() query: string = '';
+
+ @Output() queryChange: EventEmitter<string> = new EventEmitter<string>();
+
+ @Output() onSearch: EventEmitter<void> = new EventEmitter<void>();
+
+ @Output() onClearSearch: EventEmitter<void> = new EventEmitter<void>();
+
  constructor(
  protected service: ProChannelService,
  protected session: Session

src/app/modules/pro/channel/search-box/search-box.component.html

+<div class="mdl-textfield mdl-js-textfield m-pro__searchBox">
+ <i class="material-icons search">search</i>
+ <input
+ [ngModel]="query"
+ (ngModelChange)="queryChange.emit($event)"
+ id="search"
+ autocomplete="off"
+ class="mdl-textfield__input ng-pristine ng-valid ng-touched"
+ type="text"
+ (keyup.enter)="onSearch.emit()"
+ />
+ <ng-container *ngIf="query">
+ <i class="material-icons clear" (click)="onClearSearch.emit()">close</i>
+ </ng-container>
+ <label class="mdl-textfield__label" for="search"></label>
+</div>

src/app/modules/pro/channel/search-box/search-box.component.scss

+div.mdl-textfield.mdl-js-textfield.m-pro__searchBox {
+ width: 100%;
+ transition: width ease-in-out 0.2s;
+ padding: 8px 0;
+
+ i.search {
+ position: absolute;
+ margin: 6px;
+ font-size: 20px;
+
+ @include m-theme() {
+ color: themed($m-black);
+ }
+ }
+
+ i.clear {
+ font-size: 16px;
+
+ border-radius: 20px;
+ cursor: pointer;
+ position: absolute;
+ top: 16px;
+ right: 10px;
+
+ @include m-theme() {
+ color: themed($m-black);
+ }
+ }
+
+ input {
+ height: 32px;
+ border-radius: 18px;
+ font-family: Roboto, sans-serif;
+ font-size: 14px;
+ letter-spacing: 0.5px;
+ font-weight: 600;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ padding: 8px 8px 8px 32px;
+ box-sizing: border-box;
+
+ color: var(--m-pro--text-color);
+ background-color: var(--m-pro--transparent-background-color);
+ }
+
+ label {
+ display: none;
+ }
+}

src/app/modules/pro/channel/search-box/search-box.component.ts

+import {
+ ChangeDetectionStrategy,
+ Component,
+ EventEmitter,
+ Input,
+ Output,
+} from '@angular/core';
+
+@Component({
+ selector: 'm-pro__searchBox',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl: 'search-box.component.html',
+})
+export class SearchBoxComponent {
+ @Input() query: string = '';
+
+ @Output() queryChange: EventEmitter<string> = new EventEmitter<string>();
+
+ @Output() onSearch: EventEmitter<void> = new EventEmitter<void>();
+
+ @Output() onClearSearch: EventEmitter<void> = new EventEmitter<void>();
+}

src/app/modules/pro/pro.module.ts

@@ -33,6 +33,7 @@ import { ForgotPasswordComponent } from '../auth/forgot-password/forgot-password
 import { AuthModule } from '../auth/auth.module';
 import { ProHamburgerMenu } from './channel/hamburger-menu/hamburger-menu.component';
 import { SubscribeButtonComponent } from './channel/subscribe-button/subscribe-button.component';
+import { SearchBoxComponent } from './channel/search-box/search-box.component';
 
 const routes: Routes = [
  {
@@ -156,6 +157,7 @@ export const PRO_DOMAIN_ROUTES = [
  ProUnsubscribeModalComponent,
  ProHamburgerMenu,
  SubscribeButtonComponent,
+ SearchBoxComponent,
  ],
  exports: [ProChannelComponent],
  entryComponents: [

src/app/services/api/client.ts

@@ -47,8 +47,11 @@ export class Client {
  return reject(err || new Error('GET error'));
  }
  if (err.status === 401 && err.error.loggedin === false) {
- localStorage.setItem('redirect', this.location.path());
- window.location.href = '/login';
+ if (this.location.path() !== '/login') {
+ localStorage.setItem('redirect', this.location.path());
+ window.location.href = '/login';
+ }
+
  return reject(err);
  }
  return reject(err);
@@ -104,8 +107,11 @@ export class Client {
  return reject(err || new Error('POST error'));
  }
  if (err.status === 401 && err.error.loggedin === false) {
- localStorage.setItem('redirect', this.location.path());
- window.location.href = '/login';
+ if (this.location.path() !== '/login') {
+ localStorage.setItem('redirect', this.location.path());
+ window.location.href = '/login';
+ }
+
  return reject(err);
  }
  if (err.status !== 200) {
@@ -136,8 +142,11 @@ export class Client {
  },
  err => {
  if (err.status === 401 && err.data().loggedin === false) {
- localStorage.setItem('redirect', this.location.path());
- window.location.href = '/login';
+ if (this.location.path() !== '/login') {
+ localStorage.setItem('redirect', this.location.path());
+ window.location.href = '/login';
+ }
+
  return reject(err);
  }
  if (err.status !== 200) {
@@ -164,8 +173,11 @@ export class Client {
  },
  err => {
  if (err.status === 401 && err.error.loggedin === false) {
- localStorage.setItem('redirect', this.location.path());
- window.location.href = '/login';
+ if (this.location.path() !== '/login') {
+ localStorage.setItem('redirect', this.location.path());
+ window.location.href = '/login';
+ }
+
  return reject(err);
  }
  if (err.status !== 200) {