1.3 - Adding functionality for change country for trending videos and implementing list and grid functionality

Author: quead

src/app/app.component.html

@@ -13,7 +13,7 @@
           <div class="app-head">
               <div id="logo">
                 <img src="assets/img/logo.svg" height="35"/>
-                <small *ngIf="nregionCode">{{ regionCode }}</small>
+                <small *ngIf="regionCode">{{ regionCode }}</small>
               </div>
           </div>
           <div class="app-content">

src/app/app.component.ts

@@ -89,10 +89,12 @@ export class AppComponent implements OnInit {
   }
 
   getFeedVideos() {
-      this._shared.getFeed().subscribe(data => {
-          this.feedVideos = data;
-          this.setDefaultPlayer();
-      });
+    this._shared.getFeed().subscribe(data => {
+      this.feedVideos = data;
+      if (typeof this.currentVideoID === 'undefined') {
+        this.setDefaultPlayer();
+      }
+    });
   }
 
   getRelatedVideos() {
@@ -107,12 +109,10 @@ export class AppComponent implements OnInit {
   }
 
   setDefaultPlayer() {
-      if (this.currentState < 0) {
-        this.feedVideos = this._shared.feedVideos;
-        this.currentVideoID = this.feedVideos[0].id;
-        this.currentVideoName = this.feedVideos[0].snippet.title;
-        this.getRelatedVideos();
-      }
+      this.feedVideos = this._shared.feedVideos;
+      this.currentVideoID = this.feedVideos[0].id;
+      this.currentVideoName = this.feedVideos[0].snippet.title;
+      this.getRelatedVideos();
   }
 
   setSettings(data: any, from: number) {
@@ -189,6 +189,7 @@ export class AppComponent implements OnInit {
       this.videoCurRange = this.player.getCurrentTime();
       this.videoCurFull = this.timeFormat(this.videoCurRange);
       this._ref.markForCheck();
+      console.log('test');
     }, 1000);
   }
 

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule } from '@angular/http';
 import { ReactiveFormsModule } from '@angular/forms';
-import { routes } from './app.routes';
+import { routes } from './app.router';
 
 import { AppComponent } from './app.component';
 import { SharedService } from './config/shared.module';

src/app/app.routes.ts renamed to src/app/app.router.ts

@@ -12,8 +12,8 @@
       <div class="settings">
         <span>List mode:</span>
         <div id="toggle-list-mode">
-          <p class="fa fa-list"></p>
-          <p class="fa fa-th"></p>
+          <p class="fa fa-list" [ngClass]="{'active': listGrid }" (click)="toggleList(0)"></p>
+          <p class="fa fa-th" [ngClass]="{'active': !listGrid }" (click)="toggleList(1)"></p>
         </div>
       </div>
       <div *ngIf="searchForm.valid" id="search-video-list" class="video-list">
@@ -27,7 +27,7 @@
         </div>
       </div>
   </form>
-  <div *ngIf="feedVideos" id="feed-video-list" class="video-list">
+  <div *ngIf="feedVideos" id="feed-video-list" class="video-list" [ngClass]="{'grid-list': !listGrid }">
     <div *ngFor="let feedVideo of feedVideos; let i = index" [attr.data-index]="i" class="video-item" (click)="onClickVideo($event, i, 3)">
       <div class="video-item-image">
         <img src="{{ feedVideo.snippet.thumbnails.default.url }}" alt="feed video thumbnail" />

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

@@ -13,7 +13,6 @@ import 'rxjs/add/operator/map';
 export class SearchComponent implements OnInit {
 
   searchForm: FormGroup;
-
   searchVideoImage = false;
 
   videos: any;
@@ -22,6 +21,8 @@ export class SearchComponent implements OnInit {
   _shared: any;
   _app: any;
 
+  private listGrid = true;
+
   constructor(
     private youtube: YoutubeGetVideo,
     private shared: SharedService,
@@ -99,4 +100,12 @@ export class SearchComponent implements OnInit {
     }
   }
 
+  toggleList(int: number) {
+    if (int === 1) {
+      this.listGrid = false;
+    } else {
+      this.listGrid = true;
+    }
+  }
+
 }

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

@@ -8,8 +8,9 @@
             <label [attr.for]="'setting-' + i">{{ settings[i].name }}<span class="round-check"></span></label>
         </div>
         <div class="form-group form-select">
-            <label for="val-search-results">Trending sort by country</label>
-            <select class="form-field" [value]="regionCode" [formControl]="RegionSettings" (change)="changeRegion($event.target.value)">
+            <label for="val-search-results">Set trending country</label>
+            <span *ngIf="loadingRegion" class="loading-region fa fa-circle-o-notch fa-spin fa-fw"></span>
+            <select class="form-field" [value]="regionCode" (change)="changeRegion($event.target.value)" [disabled]="loadingRegion">
                 <option value="US">United States</option>
                 <option value="GB">United Kingdom</option>
                 <option value="RO">Romania</option>
@@ -31,7 +32,10 @@
             <span class="fa fa-exclamation-circle fa-color-danger"></span>
         </div>
         <div class="alert alert-danger" role="alert">
-            <span class="fa fa-exclamation-circle"></span>All marked fields you can change in next version (<a href="https://github.com/quead/angular2-yt-player#changelog" target="_blank">check changelog</a>). Now you can only change it from "assets/settings.json".
+            <span class="fa fa-exclamation-circle"></span>All marked fields you can change in upcoming verions (<a href="https://github.com/quead/angular2-yt-player#changelog" target="_blank">check changelog</a>). Now you can only change it from "assets/settings.json".
+        </div>
+        <div class="alert alert-info" role="alert">
+            <span class="fa fa-info-circle"></span>The settings will be saved in upcoming versions (<a href="https://github.com/quead/angular2-yt-player#changelog" target="_blank">check changelog</a>). You can set default settings from "assets/settings.json".
         </div>
     </form>
 </div>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormArray, FormGroup, FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormArray, FormGroup, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { AppComponent } from '../app.component';
 import { SearchComponent } from './youtube-search.component';
 import { SharedService } from '../config/shared.module';
@@ -28,6 +28,7 @@ export class SettingsComponent implements OnInit {
     private regionCode: string;
     private numSearchRes: string;
     private numRelatedRes: string;
+    private loadingRegion = false;
 
     constructor(
         private fb: FormBuilder,
@@ -49,8 +50,7 @@ export class SettingsComponent implements OnInit {
 
     setForm() {
         this.settingsForm = this._fb.group({
-            settings: this.mapSettings(),
-            RegionSettings: this.regionCode
+            settings: this.mapSettings()
         });
         this.checkInputs();
     }
@@ -89,8 +89,12 @@ export class SettingsComponent implements OnInit {
     }
 
     changeRegion(data: any) {
+        this.loadingRegion = true;
         this._shared.settings.api_settings[1].value = data;
         this._shared.setApiSettings();
-        console.log(this.shared.settings);
+        this._shared.feedVideos = null;
+        this._app.getSettings();
+        this._app.getFeedVideos();
+        setTimeout(() => this.loadingRegion = false, 3000);
     }
 }

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

@@ -7,7 +7,7 @@ import 'rxjs/add/operator/map';
 @Injectable()
 export class SharedService {
 
-    feedVideos: Array<Object>;
+    public feedVideos: Array<Object>;
     settings: Array<Object>;
 
     constructor(
@@ -22,23 +22,21 @@ export class SharedService {
             if (this.feedVideos) {
                 observer.next(this.feedVideos);
                 return observer.complete();
-            } else {
-                this.getSettings().subscribe(data => {
-                    this.setApiSettings();
-                    this.settings = data;
-                    this.youtube.feedVideos().subscribe(
-                        result => {
-                            console.log('fac feed de');
-                            this.feedVideos = result.items;
-                            observer.next(this.feedVideos);
-                            observer.complete();
-                        },
-                        error => {
-                            console.log('error on feed videos' + error);
-                        }
-                    );
-                });
-            }
+            } 
+            this.getSettings().subscribe(data => {
+                this.setApiSettings();
+                this.settings = data;
+                this.youtube.feedVideos().subscribe(
+                    result => {
+                        this.feedVideos = result.items;
+                        observer.next(this.feedVideos);
+                        observer.complete();
+                    },
+                    error => {
+                        console.log('error on feed videos' + error);
+                    }
+                );
+            });
         });
     }
 
@@ -52,7 +50,6 @@ export class SharedService {
                     .map(res => res.json())
                     .subscribe(
                     data => {
-                        console.log('fac settings de')
                         this.settings = data;
                         observer.next(this.settings);
                         observer.complete();

src/app/config/shared.module.ts

@@ -8,7 +8,7 @@ export class YoutubeGetVideo {
 
     private apiKey: string;
     private url = 'https://www.googleapis.com/youtube/v3/';
-    private regionCode: string;
+    public regionCode: string;
     private numSearchRes: string;
     private numRelatedRes: string;
     private videoDetails = 'part=snippet,contentDetails,statistics,status';
@@ -28,23 +28,20 @@ export class YoutubeGetVideo {
     }
 
     searchVideo(query: string) {
-        if (this.apiKey) {
-            return this.http.get(this.url + 'search?part=snippet&q=' + query + '&maxResults=' + this.numSearchRes + '&type=video&key=' + this.apiKey)
-                .map(response => response.json());
-        }
+        return this.http.get(this.url + 'search?part=snippet&q=' + query + '&maxResults=' + this.numSearchRes + '&type=video&key=' + this.apiKey)
+            .map(response => response.json());
+        
     }
 
     relatedVideos(query: string) {
-        if (this.apiKey) {
-            return this.http.get(this.url + 'search?part=snippet&relatedToVideoId=' + query + '&maxResults='+ this.numRelatedRes +'&type=video&key=' + this.apiKey)
-                .map(response => response.json());
-        }
+        return this.http.get(this.url + 'search?part=snippet&relatedToVideoId=' + query + '&maxResults='+ this.numRelatedRes +'&type=video&key=' + this.apiKey)
+            .map(response => response.json());
+        
     }
 
     feedVideos() {
-        if (this.apiKey) {
-            return this.http.get(this.url + 'videos?' + this.videoDetails + this.feedDetails + '&regionCode=' + this.regionCode + '&maxResults=25&key=' + this.apiKey)
-                .map(response => response.json());
-        }
+        return this.http.get(this.url + 'videos?' + this.videoDetails + this.feedDetails + '&regionCode=' + this.regionCode + '&maxResults=25&key=' + this.apiKey)
+            .map(response => response.json());
+    
     }    
 }