1.x - Creating functionality for sharing module

Author: quead

src/app/app.component.html

@@ -1,4 +1,4 @@
-<div  class="loading-bar" [ngClass]="loading ? 'active' : 'inactive' "></div>
+<div class="loading-bar inactive"></div>
 <header>
     <div class="win-controls">
         <button id="win-minimize"><span class="fa fa-window-minimize"></span></button>

src/app/app.component.ts

@@ -2,8 +2,6 @@ import { Component, ChangeDetectorRef, OnInit } from '@angular/core';
 import { YoutubeGetVideo } from './config/youtube.config';
 import { SharedService } from './config/shared.module';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { Router, Event as RouterEvent, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
-import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'app-yt',
@@ -14,8 +12,8 @@ export class AppComponent implements OnInit {
 
   searchForm: FormGroup;
 
-  relatedVideos = false;
-  feedVideos = false;
+  relatedVideos: Array<any>;
+  feedVideos: Array<any>;
 
   debuggingInfo = false;
 
@@ -40,36 +38,14 @@ export class AppComponent implements OnInit {
 
   loading: boolean = true;
 
-  constructor(private youtube: YoutubeGetVideo, private ref: ChangeDetectorRef, private router: Router, private shared:SharedService) {
+  constructor(private youtube: YoutubeGetVideo, private ref: ChangeDetectorRef, private shared:SharedService) {
     this._ref = ref;
     this._shared = shared;
-    router.events.subscribe((event: RouterEvent) => {
-        this.navigationInterceptor(event);
-    });
   }
 
   ngOnInit() {
       console.log('app comp');
-      console.log(this._shared);
-      this.feedVideos = this._shared.feedVideos;
-      this.setDefaultPlayer();
-  }
-
-  navigationInterceptor(event: RouterEvent) {
-        if (event instanceof NavigationStart) {
-            this.loading = true;
-        }
-        if (event instanceof NavigationEnd) {
-            this.loading = false;
-        }
-
-        // Set loading state to false in both of the below events to hide the spinner in case a request fails
-        if (event instanceof NavigationCancel) {
-            this.loading = false;
-        }
-        if (event instanceof NavigationError) {
-            this.loading = false;
-        }
+      this.getFeedVideos();
   }
 
   onClickRelated(event: Event, i: number) {
@@ -94,6 +70,15 @@ export class AppComponent implements OnInit {
     return playerVars;
   }
 
+  getFeedVideos() {
+      this._shared.getFeed().subscribe(data => {
+        if(data) {
+          this.feedVideos = data;
+          this.setDefaultPlayer();
+        }
+      });
+  }
+
   getRelatedVideos() {
     this.youtube.relatedVideos(this.currentVideoID).subscribe(
         result => {

src/app/components/youtube-search.component.ts

@@ -27,7 +27,6 @@ export class SearchComponent implements OnInit {
 
   ngOnInit() {
     console.log('search');
-    console.log(this._shared);
     this.searchFunction();
     this.getFeedVideos();
   }
@@ -54,16 +53,11 @@ export class SearchComponent implements OnInit {
   }
 
   getFeedVideos() {
-    this.youtube.feedVideos().subscribe(
-      result => {
-        this.feedVideos = result.items;
-        this._shared.feedVideos = this.feedVideos;
-        //this._app.setDefaultPlayer(this.feedVideos);
-      },
-      error => {
-        console.log('error on feed videos');
-      }
-    );
+      this._shared.getFeed().subscribe(data => {
+        if(data) {
+          this.feedVideos = data;
+        }
+      });
   }
 
   clearSearch() {
@@ -76,6 +70,7 @@ export class SearchComponent implements OnInit {
   }
 
   onClickVideo(event: Event, i: any, list: number) {
+    console.log(i, list);
     if (list === 1) {
       const videoID = this.videos[i].id.videoId;
       const videoName = this.videos[i].snippet.title;

src/app/components/youtube-settings.component.ts

@@ -28,8 +28,13 @@ export class SettingsComponent implements OnInit {
 
     ngOnInit() {
         console.log('settings');
-        console.log(this._shared);
-        this.fetchJSONsettings();
+        this._shared.getSettings().subscribe(data => {
+            if(data) {
+                this.playerAttr.settings = data;
+                this.finished = true;
+                this.setForm();
+            }
+        });
     }
 
     setForm() {
@@ -43,20 +48,6 @@ export class SettingsComponent implements OnInit {
         return this.settingsForm.get('settings') as FormArray;
     };
 
-    fetchJSONsettings() {
-        this.http.get('assets/settings.json')
-            .map(res => res.json())
-            .subscribe(
-            data => {
-                this.playerAttr.settings = data;
-            },
-            err => console.log('JSON Settings ' + err),
-            () => {
-                this.finished = true; this.setForm();
-            }
-        );
-    }
-
     checkInputs() {
         this._shared.settings = this.playerAttr.settings;
         //this._app.setSettings(this.playerAttr.settings, 1);

src/app/config/shared.module.ts

@@ -1,44 +1,57 @@
-import { Component, Injectable, OnInit } from '@angular/core';
+import { Component, Injectable } from '@angular/core';
 import { YoutubeGetVideo } from './youtube.config';
+import { Http } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import 'rxjs/add/operator/map';
 
-export interface Todo {
-    id: number | string;
-    createdAt: number;
-    value: string;
-}
-
 @Injectable()
-export class SharedService implements OnInit{
+export class SharedService {
 
-    todos: Observable<Todo[]>
-    private _todos: BehaviorSubject<Todo[]>;
-    private baseUrl: string;
-    private dataStore: {
-        todos: Todo[]
-    };
+    videoID: string;
+    feedVideos: Array<Object>;
+    settings: Array<Object>;
 
+    constructor(private youtube: YoutubeGetVideo, private http: Http) {
 
-    constructor(private youtube: YoutubeGetVideo) {
-        this._todos = <BehaviorSubject<Todo[]>>new BehaviorSubject([]);
-        this._todos.asObservable();
     }
 
-    ngOnInit(){
-        this.player();
+    getFeed(): Observable<any> {
+        return new Observable(observer => {
+            if (this.feedVideos) {
+                observer.next(this.feedVideos);
+                return observer.complete();
+            }
+            this.youtube.feedVideos().subscribe(
+                result => {
+                    this.feedVideos = result.items;
+                    observer.next(this.feedVideos);
+                    observer.complete();
+                },
+                error => {
+                    console.log('error on feed videos');
+                }
+            );
+        });
     }
 
-    player() {
-        this.youtube.feedVideos().subscribe(
-            result => {
-                this.dataStore.todos = result.items;
-                this._todos.next(Object.assign({}, this.dataStore).todos);
-            },
-            error => {
-            console.log('error on feed videos');
+    getSettings(): Observable<any> {
+        return new Observable(observer => {
+            if (this.settings) {
+                observer.next(this.settings);
+                return observer.complete();
             }
-        );
+            this.http.get('assets/settings.json')
+                .map(res => res.json())
+                .subscribe(
+                data => {
+                    this.settings = data;
+                    observer.next(this.settings);
+                    observer.complete();
+                },
+                err => { 
+                    console.log('JSON Settings ' + err);
+                }
+            );
+        });
     }
 }