initial commit

src/app/@core/utils/analytics.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { filter } from 'rxjs/operators';
+
+declare const ga: any;
+
+@Injectable()
+export class AnalyticsService {
+  private enabled: boolean;
+
+  constructor(private location: Location, private router: Router) {
+    this.enabled = false;
+  }
+
+  trackPageViews() {
+    if (this.enabled) {
+      this.router.events.pipe(
+        filter((event) => event instanceof NavigationEnd),
+      )
+        .subscribe(() => {
+          ga('send', {hitType: 'pageview', page: this.location.path()});
+        });
+    }
+  }
+
+  trackEvent(eventName: string) {
+    if (this.enabled) {
+      ga('send', 'event', eventName);
+    }
+  }
+}

src/app/@core/utils/index.ts

@@ -0,0 +1,13 @@
+import { LayoutService } from './layout.service';
+import { AnalyticsService } from './analytics.service';
+import { PlayerService } from './player.service';
+import { StateService } from './state.service';
+import { SeoService } from './seo.service';
+
+export {
+  LayoutService,
+  AnalyticsService,
+  PlayerService,
+  SeoService,
+  StateService,
+};

src/app/@core/utils/layout.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { delay, shareReplay, debounceTime } from 'rxjs/operators';
+
+@Injectable()
+export class LayoutService {
+
+  protected layoutSize$ = new Subject();
+  protected layoutSizeChange$ = this.layoutSize$.pipe(
+    shareReplay({ refCount: true }),
+  );
+
+  changeLayoutSize() {
+    this.layoutSize$.next();
+  }
+
+  onChangeLayoutSize(): Observable<any> {
+    return this.layoutSizeChange$.pipe(delay(1));
+  }
+
+  onSafeChangeLayoutSize(): Observable<any> {
+    return this.layoutSizeChange$.pipe(
+      debounceTime(350),
+    );
+  }
+}

src/app/@core/utils/player.service.ts

@@ -0,0 +1,66 @@
+import { Injectable } from '@angular/core';
+
+export class Track {
+  name: string;
+  artist: string;
+  url: string;
+  cover: string;
+}
+
+@Injectable()
+export class PlayerService {
+  current: number;
+  playlist: Track[] = [
+    {
+      name: 'Don\'t Wanna Fight',
+      artist: 'Alabama Shakes',
+      url: 'https://p.scdn.co/mp3-preview/6156cdbca425a894972c02fca9d76c0b70e001af',
+      cover: 'assets/images/cover1.jpg',
+    },
+    {
+      name: 'Harder',
+      artist: 'Daft Punk',
+      url: 'https://p.scdn.co/mp3-preview/92a04c7c0e96bf93a1b1b1cae7dfff1921969a7b',
+      cover: 'assets/images/cover2.jpg',
+    },
+    {
+      name: 'Come Together',
+      artist: 'Beatles',
+      url: 'https://p.scdn.co/mp3-preview/83090a4db6899eaca689ae35f69126dbe65d94c9',
+      cover: 'assets/images/cover3.jpg',
+    },
+  ];
+
+  random(): Track {
+    this.current = Math.floor(Math.random() * this.playlist.length);
+    return this.playlist[this.current];
+  }
+
+  next(): Track {
+    return this.getNextTrack();
+  }
+
+  prev() {
+    return this.getPrevTrack();
+  }
+
+  private getNextTrack(): Track {
+    if (this.current === this.playlist.length - 1) {
+      this.current = 0;
+    } else {
+      this.current++;
+    }
+
+    return this.playlist[this.current];
+  }
+
+  private getPrevTrack(): Track {
+    if (this.current === 0) {
+      this.current = this.playlist.length - 1;
+    } else {
+      this.current--;
+    }
+
+    return this.playlist[this.current];
+  }
+}

src/app/@core/utils/seo.service.ts

@@ -0,0 +1,58 @@
+import { Injectable, Inject, PLATFORM_ID, OnDestroy } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { NavigationEnd, Router } from '@angular/router';
+import { NB_DOCUMENT } from '@nebular/theme';
+import { filter, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class SeoService implements OnDestroy {
+
+  private readonly destroy$ = new Subject<void>();
+  private readonly dom: Document;
+  private readonly isBrowser: boolean;
+  private linkCanonical: HTMLLinkElement;
+
+  constructor(
+    private router: Router,
+    @Inject(NB_DOCUMENT) document,
+    @Inject(PLATFORM_ID) platformId,
+  ) {
+    this.isBrowser = isPlatformBrowser(platformId);
+    this.dom = document;
+
+    if (this.isBrowser) {
+      this.createCanonicalTag();
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  createCanonicalTag() {
+    this.linkCanonical = this.dom.createElement('link');
+    this.linkCanonical.setAttribute('rel', 'canonical');
+    this.dom.head.appendChild(this.linkCanonical);
+    this.linkCanonical.setAttribute('href', this.getCanonicalUrl());
+  }
+
+  trackCanonicalChanges() {
+    if (!this.isBrowser) {
+      return;
+    }
+
+    this.router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      takeUntil(this.destroy$),
+    )
+      .subscribe(() => {
+        this.linkCanonical.setAttribute('href', this.getCanonicalUrl());
+      });
+  }
+
+  private getCanonicalUrl(): string {
+    return this.dom.location.origin + this.dom.location.pathname;
+  }
+}

src/app/@core/utils/state.service.ts

@@ -0,0 +1,92 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { of as observableOf,  Observable,  BehaviorSubject } from 'rxjs';
+import { takeWhile } from 'rxjs/operators';
+
+import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
+
+@Injectable()
+export class StateService implements OnDestroy {
+
+  protected layouts: any = [
+    {
+      name: 'One Column',
+      icon: 'nb-layout-default',
+      id: 'one-column',
+      selected: true,
+    },
+    {
+      name: 'Two Column',
+      icon: 'nb-layout-two-column',
+      id: 'two-column',
+    },
+    {
+      name: 'Center Column',
+      icon: 'nb-layout-centre',
+      id: 'center-column',
+    },
+  ];
+
+  protected sidebars: any = [
+    {
+      name: 'Sidebar at layout start',
+      icon: 'nb-layout-sidebar-left',
+      id: 'start',
+      selected: true,
+    },
+    {
+      name: 'Sidebar at layout end',
+      icon: 'nb-layout-sidebar-right',
+      id: 'end',
+    },
+  ];
+
+  protected layoutState$ = new BehaviorSubject(this.layouts[0]);
+  protected sidebarState$ = new BehaviorSubject(this.sidebars[0]);
+
+  alive = true;
+
+  constructor(directionService: NbLayoutDirectionService) {
+    directionService.onDirectionChange()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(direction => this.updateSidebarIcons(direction));
+
+    this.updateSidebarIcons(directionService.getDirection());
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+
+  private updateSidebarIcons(direction: NbLayoutDirection) {
+    const [ startSidebar, endSidebar ] = this.sidebars;
+    const isLtr = direction === NbLayoutDirection.LTR;
+    const startIconClass = isLtr ? 'nb-layout-sidebar-left' : 'nb-layout-sidebar-right';
+    const endIconClass = isLtr ? 'nb-layout-sidebar-right' : 'nb-layout-sidebar-left';
+    startSidebar.icon = startIconClass;
+    endSidebar.icon = endIconClass;
+  }
+
+  setLayoutState(state: any): any {
+    this.layoutState$.next(state);
+  }
+
+  getLayoutStates(): Observable<any[]> {
+    return observableOf(this.layouts);
+  }
+
+  onLayoutState(): Observable<any> {
+    return this.layoutState$.asObservable();
+  }
+
+  setSidebarState(state: any): any {
+    this.sidebarState$.next(state);
+  }
+
+  getSidebarStates(): Observable<any[]> {
+    return observableOf(this.sidebars);
+  }
+
+  onSidebarState(): Observable<any> {
+    return this.sidebarState$.asObservable();
+  }
+}