1.7 - Updating feed videos

Author: quead

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

@@ -28,6 +28,19 @@
       </div>
   </form>
   <div *ngIf="feedVideos" id="feed-video-list" class="video-list" [ngClass]="{'grid-list': !listGrid }">
+    <div *ngIf="trendingFirst.video.id" class="video-list-featured">
+      <p>{{ trendingFirst.bannerURL }}</p>
+      <p>{{ trendingFirst.video.title }}</p>
+      <p>{{ trendingFirst.video.img }}</p>
+      <p>{{ trendingFirst.stats.subscribers | number:'1.0' }}</p>
+      <p>{{ trendingFirst.stats.views | number:'1.0' }}</p>
+      <p>{{ trendingFirst.stats.videoCount | number:'1.0' }}</p>
+      <div class="video-item-details">
+          <p class="stats-views"><span class="fa fa-eye"></span> {{ trendingFirst.video.stats.views | number:'1.0' }}</p>
+          <p class="stats-likes"><span class="fa fa-thumbs-up"></span> {{ trendingFirst.video.stats.likes | number:'1.0' }}</p>
+          <p class="stats-dislikes"><span class="fa fa-thumbs-down"></span> {{ trendingFirst.video.stats.dislikes| number:'1.0' }}</p>
+      </div>
+    </div>
     <div *ngFor="let feedVideo of feedVideos; let i = index" [attr.data-index]="i" class="video-item" (click)="onClickVideo($event, i, 3)">
       <div *ngIf="thumbnails" class="video-item-image">
         <img src="{{ feedVideo.snippet.thumbnails.medium.url }}" alt="feed video thumbnail" />

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

@@ -17,10 +17,30 @@ export class SearchComponent implements OnInit {
 
   videos: any;
   feedVideos: any;
+  channel: any;
 
   _shared: any;
   _app: any;
 
+  trendingFirst = {
+      bannerURL: '',
+      video: {
+        id: '',
+        title: '',
+        img: '',
+        stats: {
+          views: '',
+          likes: '',
+          dislikes: ''
+        }
+      },
+      stats: {
+        subscribers: '',
+        views: '',
+        videoCount: ''
+      }
+  }
+
   private listGrid = true;
 
   constructor(
@@ -69,6 +89,30 @@ export class SearchComponent implements OnInit {
   getFeedVideos() {
       this._shared.getFeed().subscribe(data => {
           this.feedVideos = data;
+          this.getChannelTrending(this.feedVideos[0].snippet.channelId);
+      });
+  }
+
+  getChannelTrending(query: any) {
+      this._shared.getChannel(query).subscribe(data => {
+          this.feedVideos = this._shared.feedVideos;
+          this.channel = this._shared.channel;
+          this.trendingFirst.video.id = this.feedVideos[0].id;
+          this.trendingFirst.video.title = this.feedVideos[0].snippet.title;
+          this.trendingFirst.video.img = this.feedVideos[0].snippet.thumbnails.medium.url;
+          this.trendingFirst.video.stats.likes = this.feedVideos[0].statistics.likeCount;
+          this.trendingFirst.video.stats.dislikes = this.feedVideos[0].statistics.dislikeCount;
+          this.trendingFirst.video.stats.views = this.feedVideos[0].statistics.viewCount;
+
+          this.trendingFirst.bannerURL = this.channel.items[0].brandingSettings.image.bannerTabletHdImageUrl;
+          if (!this.channel.items[0].statistics.hiddenSubscriberCount) {
+            this.trendingFirst.stats.subscribers = this.channel.items[0].statistics.subscriberCount;
+          } else {
+            this.trendingFirst.stats.subscribers = '0';
+          }
+          this.trendingFirst.stats.videoCount = this.channel.items[0].statistics.videoCount;
+          this.trendingFirst.stats.views = this.channel.items[0].statistics.viewCount;
+          this.feedVideos.shift();
       });
   }
 

src/app/config/shared.module.ts

@@ -8,7 +8,8 @@ import 'rxjs/add/operator/map';
 export class SharedService {
 
     public feedVideos: Array<Object>;
-    settings: Array<Object>;
+    public settings: Array<Object>;
+    public channel: Array<Object>;
 
     notify = {
         enabled: false,
@@ -34,6 +35,11 @@ export class SharedService {
                 this.youtube.feedVideos().subscribe(
                     result => {
                         this.feedVideos = result.items;
+                        this.youtube.getChannel(result.items[0].snippet.channelId).subscribe(
+                        result => {
+                            this.channel = result;
+                            console.log(result);
+                        });
                         observer.next(this.feedVideos);
                         observer.complete();
                     },
@@ -45,6 +51,26 @@ export class SharedService {
         });
     }
 
+    getChannel(query: any): Observable<any> {
+        return new Observable(observer => {
+            if (this.channel) {
+                observer.next(this.channel);
+                return observer.complete();
+            } else {
+                this.youtube.getChannel(query).subscribe(
+                    result => {
+                        this.channel = result;
+                        observer.next(this.channel);
+                        observer.complete();
+                    },
+                    error => {
+                        console.log('error on get channel ' + error);
+                    }
+                );
+            }
+        });
+    }
+
     getSettings(): Observable<any> {
         return new Observable(observer => {
             if (this.settings) {

src/app/config/youtube.config.ts

@@ -12,6 +12,7 @@ export class YoutubeGetVideo {
     private numSearchRes: string;
     private numRelatedRes: string;
     private videoDetails = 'part=snippet,contentDetails,statistics,status';
+    private channelDetails = 'part=brandingSettings,snippet,contentDetails,statistics'
     private feedDetails = '&chart=mostPopular';
     private settings: Array<any>;
 
@@ -27,6 +28,13 @@ export class YoutubeGetVideo {
         this.numRelatedRes = this.settings[3].value;
     }
 
+    getChannel(query: string) {
+        if (this.apiKey) {
+            return this.http.get(this.url + 'channels?'+ this.channelDetails +'&id=' + query + '&key=' + this.apiKey)
+                .map(response => response.json());
+        }
+    }
+
     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)

src/assets/css/main.css

@@ -772,41 +772,36 @@ nav ul {
 }
 
 nav li {
-  padding-left: 15px;
+  padding-left: 0;
 }
 
 nav a {
   display: block;
   text-decoration: none;
   color: #ffffff;
   font-size: 14px;
-  text-transform: uppercase;
-  padding: 5px 15px;
-  margin: 10px 0;
+  padding: 10px 15px;
   transition: all 0.1s ease-out;
   border-left: 3px solid transparent;
 }
 
 nav a .fa {
   margin-right: 10px;
-}
-
-nav a:hover {
   color: #e52d27;
 }
 
-nav a:active {
+nav a:hover {
   border-left-color: #e52d27;
-  color: #ffffff;
 }
 
-nav a.is-active {
+nav a.is-active, nav a:active {
+  background: #e52d27;
   border-left-color: #e52d27;
   color: #ffffff;
 }
 
-nav a.is-active:hover {
-  color: #e52d27;
+nav a.is-active .fa, nav a:active .fa {
+  color: #ffffff;
 }
 
 #main-search {

src/assets/scss/_navbar.scss

@@ -21,33 +21,30 @@ nav {
         margin: 0;
     }
     li {
-        padding-left: 15px;
+        padding-left: 0;
     }
     a {
         display: block;
         text-decoration: none;
         color: $c-white;
         font-size: 14px;
-        text-transform: uppercase;
-        padding: 5px 15px;
-        margin: 10px 0;
+        padding: 10px 15px;
         transition: all 0.1s ease-out;
         border-left: 3px solid transparent;
         .fa {
             margin-right: 10px;
-        }
-        &:hover {
             color: $c-primary;
         }
-        &:active {
+        &:hover {
             border-left-color: $c-primary;
-            color: $c-white;
         }
-        &.is-active {
+        &.is-active,
+        &:active {
+            background: $c-primary;
             border-left-color: $c-primary;
             color: $c-white;
-            &:hover {
-                color: $c-primary;
+            .fa {
+                color: $c-white;
             }
         }
     }

src/assets/settings.json

@@ -14,7 +14,7 @@
       "value": "AIzaSyDcMvWlqPTHg7rHm-CTVXJwpaVGXKu7cBc"
     }, {
       "name": "Country trending",
-      "value": "US"
+      "value": "RO"
     }, {
       "name": "Number of search results",
       "value": 15