1.x - Added functionality for settings and for search click videos

quead · quead · commit cbd32c6ca116 · 2017-07-08T16:42:11.000+03:00
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -36,16 +36,21 @@ export class AppComponent implements OnInit {
 
   videoCurVolume = -1;
 
-  loading: boolean = true;
+  loading = true;
 
-  constructor(private youtube: YoutubeGetVideo, private ref: ChangeDetectorRef, private shared:SharedService) {
+  constructor(
+    private youtube: YoutubeGetVideo,
+    private ref: ChangeDetectorRef,
+    private shared: SharedService
+  ) {
     this._ref = ref;
     this._shared = shared;
   }
 
   ngOnInit() {
       console.log('app comp');
       this.getFeedVideos();
+      this.getSettings();
   }
 
   onClickRelated(event: Event, i: number) {
@@ -70,9 +75,17 @@ export class AppComponent implements OnInit {
     return playerVars;
   }
 
+  getSettings() {
+    this._shared.getSettings().subscribe(data => {
+      if (data) {
+        this.debuggingInfo = data[0].selected;
+      }
+    });
+  }
+
   getFeedVideos() {
       this._shared.getFeed().subscribe(data => {
-        if(data) {
+        if (data) {
           this.feedVideos = data;
           this.setDefaultPlayer();
         }
@@ -98,10 +111,10 @@ export class AppComponent implements OnInit {
         this.getRelatedVideos();
       }
   }
-  
+
   setSettings(data: any, from: number) {
-    if(from === 1) {
-      console.log(data);
+    if (from === 0) {
+      this.debuggingInfo = data[from].selected;
     }
   }
 
diff --git a/src/app/components/youtube-search.component.ts b/src/app/components/youtube-search.component.ts
@@ -1,34 +1,41 @@
 import { Component, OnInit } from '@angular/core';
 import { YoutubeGetVideo } from '../config/youtube.config';
+import { AppComponent } from '../app.component';
 import { SharedService } from '../config/shared.module';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'app-search',
-  templateUrl: 'youtube-search.component.html',
+  templateUrl: 'youtube-search.component.html'
 })
 
 export class SearchComponent implements OnInit {
 
   searchForm: FormGroup;
 
-  debuggingInfo = false;
   searchVideoImage = false;
 
   videos: any;
   feedVideos: any;
 
   _shared: any;
+  _app: any;
 
-  constructor(private youtube: YoutubeGetVideo, shared: SharedService) {
+  constructor(
+    private youtube: YoutubeGetVideo,
+    private shared: SharedService,
+    private app: AppComponent
+  ) {
     this._shared = shared;
+    this._app = app;
   }
 
   ngOnInit() {
     console.log('search');
     this.searchFunction();
     this.getFeedVideos();
+    this.getSettings();
   }
 
   searchFunction() {
@@ -52,9 +59,17 @@ export class SearchComponent implements OnInit {
     });
   }
 
+  getSettings() {
+    this._shared.getSettings().subscribe(data => {
+      if (data) {
+        this.searchVideoImage = data[1].selected;
+      }
+    });
+  }
+
   getFeedVideos() {
       this._shared.getFeed().subscribe(data => {
-        if(data) {
+        if (data) {
           this.feedVideos = data;
         }
       });
@@ -70,31 +85,21 @@ 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;
-      //this._app.getVideo(videoID, videoName);
+      this._app.getVideo(videoID, videoName);
+      this.clearSearch();
     } else if (list === 3) {
       const videoID = this.feedVideos[i].id;
       const videoName = this.feedVideos[i].snippet.title;
-      //this._app.getVideo(videoID, videoName);
+      this._app.getVideo(videoID, videoName);
     }
-    this.clearSearch();
   }
 
-  changeStates(event) {
-    // Trigger from youtube-settings.component
-    if (event.settings[0].selected != null) {
-      this.debuggingInfo = event.settings[0].selected;
-    } else {
-      this.debuggingInfo = event.settings[0];
-    }
-
-    if (event.settings[1].selected != null) {
-      this.searchVideoImage = event.settings[1].selected;
-    } else {
-      this.searchVideoImage = event.settings[1];
+  setSettings(data: any, from: number) {
+    if (from === 0) {
+      this.searchVideoImage = data[from].selected;
     }
   }
 
diff --git a/src/app/components/youtube-settings.component.ts b/src/app/components/youtube-settings.component.ts
@@ -1,40 +1,47 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormArray, FormGroup, FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { AppComponent } from '../app.component';
+import { SearchComponent } from './youtube-search.component';
 import { SharedService } from '../config/shared.module';
 import { Http } from '@angular/http';
 
 @Component({
     selector: 'app-settings',
-    templateUrl: 'youtube-settings.component.html'
+    templateUrl: 'youtube-settings.component.html',
+    providers: [ SearchComponent ]
 })
 
 export class SettingsComponent implements OnInit {
 
     private finished = false;
 
-    _fb: any;
     _shared: any;
+    _fb: any;
+    _app: any;
+    _search: any;
 
     settingsForm: FormGroup;
 
     playerAttr = {
         settings: []
     };
 
-    constructor(private fb: FormBuilder, private http: Http, private shared: SharedService) {
-        this._fb = fb;
+    constructor(
+        private fb: FormBuilder,
+        private http: Http,
+        private shared: SharedService,
+        private app: AppComponent,
+        private search: SearchComponent
+    ) {
         this._shared = shared;
+        this._fb = fb;
+        this._app = app;
+        this._search = search;
     }
 
     ngOnInit() {
         console.log('settings');
-        this._shared.getSettings().subscribe(data => {
-            if(data) {
-                this.playerAttr.settings = data;
-                this.finished = true;
-                this.setForm();
-            }
-        });
+        this.getDefaultSettings();
     }
 
     setForm() {
@@ -50,12 +57,12 @@ export class SettingsComponent implements OnInit {
 
     checkInputs() {
         this._shared.settings = this.playerAttr.settings;
-        //this._app.setSettings(this.playerAttr.settings, 1);
         this.settingsForm.valueChanges.subscribe((data) => {
             Object.keys(data.settings).map(i => {
                 this.playerAttr.settings[i].selected = data.settings[i];
             });
-            console.log('se schimba ceva prin settings');
+            this._app.setSettings(this.playerAttr.settings, 0);
+            this._search.setSettings(this.playerAttr.settings, 1);
         });
     }
 
@@ -66,4 +73,14 @@ export class SettingsComponent implements OnInit {
         return this.fb.array(arr);
     }
 
+    getDefaultSettings() {
+        this._shared.getSettings().subscribe(data => {
+            if (data) {
+                this.playerAttr.settings = data;
+                this.finished = true;
+                this.setForm();
+            }
+        });
+    }
+
 }
diff --git a/src/app/config/shared.module.ts b/src/app/config/shared.module.ts
@@ -7,11 +7,13 @@ import 'rxjs/add/operator/map';
 @Injectable()
 export class SharedService {
 
-    videoID: string;
     feedVideos: Array<Object>;
     settings: Array<Object>;
 
-    constructor(private youtube: YoutubeGetVideo, private http: Http) {
+    constructor(
+        private youtube: YoutubeGetVideo,
+        private http: Http
+    ) {
 
     }
 
@@ -20,17 +22,18 @@ export class SharedService {
             if (this.feedVideos) {
                 observer.next(this.feedVideos);
                 return observer.complete();
+            } else {
+                this.youtube.feedVideos().subscribe(
+                    result => {
+                        this.feedVideos = result.items;
+                        observer.next(this.feedVideos);
+                        observer.complete();
+                    },
+                    error => {
+                        console.log('error on feed videos' + error);
+                    }
+                );
             }
-            this.youtube.feedVideos().subscribe(
-                result => {
-                    this.feedVideos = result.items;
-                    observer.next(this.feedVideos);
-                    observer.complete();
-                },
-                error => {
-                    console.log('error on feed videos');
-                }
-            );
         });
     }
 
@@ -39,19 +42,20 @@ export class SharedService {
             if (this.settings) {
                 observer.next(this.settings);
                 return observer.complete();
+            } else {
+                this.http.get('assets/settings.json')
+                    .map(res => res.json())
+                    .subscribe(
+                    data => {
+                        this.settings = data;
+                        observer.next(this.settings);
+                        observer.complete();
+                    },
+                    error => {
+                        console.log('error on get settings ' + error);
+                    }
+                );
             }
-            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);
-                }
-            );
         });
     }
 }
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -197,6 +197,7 @@ a:active {
 
 .debugging-info {
   display: none;
+  color: #ffffff;
 }
 
 .debugging-info.active {
diff --git a/src/assets/scss/_common.scss b/src/assets/scss/_common.scss
@@ -45,6 +45,7 @@
 
 .debugging-info {
     display: none;
+    color: $c-white;
     &.active {
         display: block;
     }

Original file line number	Diff line number	Diff line change
`@@ -197,6 +197,7 @@ a:active {`
`197`	`197`
`198`	`198`	`.debugging-info {`
`199`	`199`	`display: none;`
	`200`	`+ color: #ffffff;`
`200`	`201`	`}`
`201`	`202`
`202`	`203`	`.debugging-info.active {`
Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,7 @@`
`45`	`45`
`46`	`46`	`.debugging-info {`
`47`	`47`	`display: none;`
	`48`	`+ color: $c-white;`
`48`	`49`	`&.active {`
`49`	`50`	`display: block;`
`50`	`51`	`}`