2.1 - Adding categories

Author: quead

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

@@ -67,6 +67,11 @@
         <p>{{ trendingFirst.stats.views | number:'1.0' }}</p>
         <p>{{ trendingFirst.stats.videoCount | number:'1.0' }}</p>-->
     </div>
+    <div class="categories">
+      <div *ngFor="let category of categories.items" id="category-{{category.id}}">
+        <p>{{category.snippet.title}}</p>
+      </div>
+    </div>
     <div id="feed-video-list" class="video-list" [ngClass]="{'grid-list': !listGrid }">
       <div *ngFor="let feedVideo of feedVideos; let i = index" [ngClass]="{'hidden-thumbnails': !thumbnails }" [attr.data-index]="i" class="video-item">
         <div class="video-item-info">

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

@@ -22,6 +22,7 @@ export class SearchComponent implements OnInit {
   videos: Array<ISearchVideo>;
   feedVideos: Array<IFeedVideo>;
   channel: IChannelList;
+  categories: any;
 
   _shared: any;
   _app: any;
@@ -62,6 +63,21 @@ export class SearchComponent implements OnInit {
     this.setSettings();
     this.searchFunction();
     this.getFeedVideos();
+    this.initCategories();
+  }
+
+  initCategories() {
+    this._shared.getCategories().subscribe(
+      data => {
+        this.categories = data;
+        console.log(this.categories);
+      }
+    );
+    this._shared.getVideoCategories(2).subscribe(
+      result => {
+        console.log(result);
+      }
+    );
   }
 
   searchFunction() {

src/app/shared/lists.service.ts

@@ -12,6 +12,8 @@ export class SharedService {
     public historyVideos: Array<any> = [];
     public settings: any;
     public channel: any;
+    public categories: any;
+    public videoCategories: any;
     public playlist: Array<any>;
 
     _update: any;
@@ -73,6 +75,46 @@ export class SharedService {
         });
     }
 
+    getCategories(): Observable<any> {
+        return new Observable(observer => {
+            if (this.categories) {
+                observer.next(this.categories);
+                return observer.complete();
+            } else {
+                this.youtube.categories().subscribe(
+                    result => {
+                        this.categories = result;
+                        observer.next(this.categories);
+                        observer.complete();
+                    },
+                    error => {
+                        console.log(error);
+                    }
+                );
+            }
+        });
+    }
+
+    getVideoCategories(value: number): Observable<any> {
+        return new Observable(observer => {
+            if (this.videoCategories) {
+                observer.next(this.videoCategories);
+                return observer.complete();
+            } else {
+                this.youtube.videoCategories(value).subscribe(
+                    result => {
+                        this.videoCategories = result;
+                        observer.next(this.videoCategories);
+                        observer.complete();
+                    },
+                    error => {
+                        console.log(error);
+                    }
+                );
+            }
+        });
+    }
+
     getSettings(): Observable<any> {
         return new Observable(observer => {
             if (this.settings) {

src/app/shared/youtube.service.ts

@@ -88,4 +88,27 @@ export class YoutubeGetVideo {
                 .map(response => response);
         }
     }
+
+    categories() {
+        if (this.apiKey) {
+            return this.http.get(
+                    this.url + 'videoCategories?part=snippet&regionCode='
+                    + this.regionCode + '&key='
+                    + this.apiKey
+                )
+                .map(response => response);
+        }
+    }
+
+    videoCategories(category: number) {
+        if (this.apiKey) {
+            return this.http.get(
+                    this.url + 'videos?part=snippet,contentDetails&chart=mostPopular&maxResults=25&videoCategoryId='
+                    + category + '&regionCode='
+                    + this.regionCode + '&key='
+                    + this.apiKey
+                )
+                .map(response => response);
+        }
+    }
 }

src/assets/scss/_search.scss

@@ -67,4 +67,35 @@
         margin-top: 20px;
         align-items: center;
     }
+}
+
+.categories {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 69px;
+    overflow-x: scroll;
+    > div {
+        width: 80px;
+        flex: 0 0 80px;
+    }
+    p {
+        margin: 0;
+    }
+    &::-webkit-scrollbar-track {
+        border-radius: 2px;
+    }
+
+    &::-webkit-scrollbar {
+        height: 6px;
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 20px;
+        background-color: rgba(#FFF, 0.1);
+        &:hover {
+            background-color: rgba(#FFF, 0.4);
+        }
+    }
 }

src/assets/scss/_videos.scss

@@ -322,6 +322,7 @@ iframe {
 .video-list-featured {
     margin: 0;
     height: 200px;
+    width: 100%;
     background-position: center center;
     background-size: cover;
     position: relative;
@@ -386,7 +387,7 @@ iframe {
 #feed-video-list {
     top: inherit;
     bottom: 0;
-    height: calc(100% - 200px);
+    height: calc(100% - 270px);
     width: calc(100% - 40px);
     max-height: none;
     background-color: var(--c-gray);