RELEASE 3.9.8: performance and NEW styles (#42)

Author: orizens

.angular-cli.json

@@ -7,10 +7,7 @@
     {
       "root": "src",
       "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
+      "assets": ["assets", "favicon.ico"],
       "index": "index.html",
       "main": "main.ts",
       "polyfills": "polyfills.ts",
@@ -19,6 +16,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
+        "../node_modules/font-awesome/scss/font-awesome.scss",
         "css/style.scss"
       ],
       "scripts": [],

.editorconfig

@@ -1,3 +1,11 @@
+## v 3.9.8 (2018/04/29) (codename: Adi)
+
+* [PERF] - performance optimization using pipes with function utils
+* [NEW] - cards videos & playlists rounded styles
+* [UPGRADE] - app menu with animation in/out
+* [REFACTOR] - using now more css utils to reduce css code
+* [REFACTOR] - app-search component restructure
+
 ## v 3.9.7 (2018/03/17)
 
 * [NEW] - added "Developed With YouTube" badge

CHANGELOG.md

@@ -1,13 +1,13 @@
 {
   "name": "echoes-player",
-  "version": "3.9.7",
+  "version": "3.9.8",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "start:prod": "ng serve --prod",
+    "start:prod": "ng serve --aot --build-optimizer",
     "build": "ng build",
-    "build:prod": "ng build --prod",
+    "build:prod": "ng build --aot --build-optimizer",
     "build:env": "node config/build-env.js",
     "postinstall": "npm rebuild node-sass",
     "copy:heroku": "shx cp -r ./config/heroku/*.* ./dist",
@@ -33,15 +33,17 @@
     "@angular/platform-browser": "5.2.7",
     "@angular/platform-browser-dynamic": "5.2.7",
     "@angular/router": "5.2.7",
-    "@ngrx/router": "1.0.0-beta.2",
     "core-js": "^2.4.1",
     "http-server": "0.10.0",
+    "memo-decorator": "1.0.1",
+    "node-sass": "4.7.2",
     "replace": "0.3.0",
     "rxjs": "^5.5.2",
+    "sass-loader": "7.0.1",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "@angular/cli": "^1.6.6",
+    "@angular/cli": "1.7.4",
     "@angular/compiler-cli": "5.2.7",
     "@angular/language-service": "5.2.7",
     "@ngrx/effects": "5.2.0",
@@ -51,17 +53,16 @@
     "@types/gapi": "0.0.35",
     "@types/gapi.auth2": "0.0.46",
     "@types/gapi.youtube": "3.0.34",
-    "@types/jasmine": "~2.5.53",
+    "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
     "@types/youtube": "0.0.31",
     "bootstrap-sass": "3.3.7",
     "codelyzer": "^4.0.1",
     "font-awesome": "4.7.0",
-    "jasmine-core": "~2.6.2",
+    "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~1.7.1",
-    "karma-chrome-launcher": "~2.1.1",
-    "karma-cli": "~1.0.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
@@ -70,14 +71,14 @@
     "ngrx-store-localstorage": "0.2.4",
     "ngx-infinite-scroll": "^0.8.2",
     "ngx-tooltip": "0.0.9",
-    "ngx-typeahead": "0.1.0",
+    "ngx-typeahead": "0.2.1",
     "ngx-youtube-player": "0.1.0",
     "prettier": "1.11.1",
     "protractor": "~5.1.2",
     "rimraf": "2.6.1",
     "shx": "0.2.2",
     "ts-node": "~3.2.0",
-    "tslint": "~5.7.0",
-    "typescript": "~2.4.2"
+    "tslint": "~5.9.1",
+    "typescript": "~2.5.3"
   }
 }

package.json

@@ -2,24 +2,18 @@
 
 :host {
   // DEFAULT THEME - 'arctic'
-  
+
   background-color: var(--app-bg-color);
   display: block;
   height: 100%;
-  
+
   .container-main {
     height: 100vh;
     display: block;
-    transition: margin .3s ease-out;
+    transition: margin 0.3s ease-out;
     margin-left: 0;
   }
 }
-@media (min-width: 320px) {
-  :host .container-fluid.container-main {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
 @media (min-width: 768px) {
   :host .closed + .container-main {
     margin-left: $sidebar-closed-width;
@@ -29,4 +23,4 @@
   :host .container-main {
     margin-left: $drawer-width;
   }
-}
+}

src/app/app.component.scss

@@ -3,6 +3,7 @@ import { VersionCheckerService } from './core/services/version-checker.service';
 import { Component, HostBinding, OnInit } from '@angular/core';
 import { EchoesState } from '@store/reducers';
 import { getSidebarCollapsed, getAppTheme } from '@store/app-layout';
+import { AppApi } from '@core/api/app.api';
 
 @Component({
   selector: 'body',
@@ -15,8 +16,13 @@ export class AppComponent implements OnInit {
 
   @HostBinding('class') style = 'arctic';
 
-  constructor(private store: Store<EchoesState>, private versionCheckerService: VersionCheckerService) {
+  constructor(
+    private store: Store<EchoesState>,
+    private versionCheckerService: VersionCheckerService,
+    private appApi: AppApi
+  ) {
     versionCheckerService.start();
+    appApi.checkUserAuth();
   }
 
   ngOnInit() {

src/app/app.component.ts

@@ -2,36 +2,6 @@
 
 @media (min-width: 320px) {
   :host {
-    @keyframes pulse {
-      0% {
-        transform: scale(0);
-        opacity: 1;
-      }
-      50% {
-        transform: scale(1);
-        opacity: 0.5;
-      }
-      100% {
-        transform: scale(1.5);
-        opacity: 0;
-      }
-    }
-
-    @keyframes slideInDown {
-      0% {
-        transform: scale(0.4);
-        opacity: 0;
-      }
-
-      100% {
-        transform: scale(1);
-        opacity: 1;
-      }
-    }
-    .pulse {
-      animation: pulse 2s infinite;
-    }
-
     .btn-toggle {
       padding: 1rem 1.5rem;
       font-size: 2rem;
@@ -46,22 +16,31 @@
     .menu-dropdown {
       position: absolute;
       right: 0;
-      top: -35rem;
       min-width: 250px;
       z-index: $zindex-navbar-fixed;
+      transform-origin: top right;
+
+      &.end-animation {
+        top: -35rem;
+      }
 
       &.slideInDown {
         animation: slideInDown 0.5s 1;
         top: 5rem;
         transform-origin: top right;
       }
-      .menu-backdrop {
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        left: 0;
+      &.slideOutDown {
+        animation: slideOutDown 0.8s 1 forwards;
+        top: 5rem;
+        transform-origin: top right;
       }
     }
+    .menu-backdrop {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+    }
   }
 }

src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.scss

@@ -2,18 +2,21 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AppNavbarMenuComponent } from './app-navbar-menu.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('AppNavbarMenuComponent', () => {
   let component: AppNavbarMenuComponent;
   let fixture: ComponentFixture<AppNavbarMenuComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [AppNavbarMenuComponent],
-      schemas: [NO_ERRORS_SCHEMA]
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        declarations: [AppNavbarMenuComponent],
+        schemas: [NO_ERRORS_SCHEMA],
+        imports: [NoopAnimationsModule]
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AppNavbarMenuComponent);

src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.spec.ts

@@ -1,4 +1,13 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input, Output, EventEmitter, HostListener } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+  HostListener
+} from '@angular/core';
+import { expandFadeInAnimation } from '@shared/animations/fade-in.animation';
 
 enum Key {
   Backspace = 8,
@@ -14,16 +23,19 @@ enum Key {
 
 @Component({
   selector: 'app-navbar-menu',
+  animations: [expandFadeInAnimation],
   template: `
     <button class="btn btn-navbar btn-link ux-maker btn-toggle"
       (click)="toggleMenu()">
       <icon name="ellipsis-v"></icon>
       <icon *ngIf="appVersion.isNewAvailable" name="dot-circle-o" class="pulse update-indicator text-primary"></icon>
     </button>
+    <div class="menu-backdrop" *ngIf="!hide" (click)="hideMenu()"></div>
     <div class="panel menu-dropdown"
-      [class.slideInDown]="!hide"
+      [class.end-animation]="end"
+      [@expandFadeIn]="menuState"
+      (@expandFadeIn.done)="endAnimation($event)"
       >
-      <div class="menu-backdrop" *ngIf="!hide" (click)="hideMenu()"></div>
       <div class="list-group">
         <div *ngIf="appVersion.isNewAvailable" class="list-group-item">
           <button class="btn btn-success" title="click to update Echoes"
@@ -68,9 +80,15 @@ enum Key {
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppNavbarMenuComponent implements OnInit {
+  end = false;
   hide = true;
+  get menuState() {
+    return this.hide ? 'hide' : 'show';
+  }
+
   @Input() signedIn = false;
-  @Input() appVersion = {
+  @Input()
+  appVersion = {
     semver: '',
     isNewAvailable: false,
     checkingForVersion: false
@@ -88,9 +106,9 @@ export class AppNavbarMenuComponent implements OnInit {
     }
   }
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit() { }
+  ngOnInit() {}
 
   handleSignOut() {
     this.signOut.emit();
@@ -101,6 +119,7 @@ export class AppNavbarMenuComponent implements OnInit {
   }
 
   toggleMenu() {
+    this.end = false;
     this.hide = !this.hide;
   }
 
@@ -115,4 +134,11 @@ export class AppNavbarMenuComponent implements OnInit {
   updateTheme(theme) {
     this.themeChange.emit(theme);
   }
+
+  endAnimation({ toState }) {
+    if (toState === 'hide') {
+      this.end = true;
+    }
+    console.log('animation done!');
+  }
 }