Skip to content

Commit 2293c08

Browse files
queadquead
committed
2.1 - Adding categories
1 parent 9b74f74 commit 2293c08

File tree

6 files changed

+75
-20
lines changed

6 files changed

+75
-20
lines changed

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

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,42 @@
6868
<p>{{ trendingFirst.stats.videoCount | number:'1.0' }}</p>-->
6969
</div>
7070
<div class="categories">
71-
<div *ngFor="let category of categories.items" id="category-{{category.id}}">
72-
<p>{{category.snippet.title}}</p>
73-
</div>
71+
<ng-container *ngFor="let category of categories.items">
72+
<div *ngIf="category.snippet.assignable && categoriesBlocked.indexOf(category.id) === -1" id="category-{{category.id}}" id="category-{{category.id}}">
73+
<button type="button" (click)="getCategoriesVideos(category.id)">
74+
<ng-container *ngIf="category.snippet.title === 'Film & Animation'">
75+
<i class="material-icons">movie</i>
76+
</ng-container>
77+
<ng-container *ngIf="category.snippet.title === 'Autos & Vehicles'">
78+
<i class="material-icons">directions_car</i>
79+
</ng-container>
80+
<ng-container *ngIf="category.snippet.title === 'Music'">
81+
<i class="material-icons">library_music</i>
82+
</ng-container>
83+
<ng-container *ngIf="category.snippet.title === 'Pets & Animals'">
84+
<i class="material-icons">pets</i>
85+
</ng-container>
86+
<ng-container *ngIf="category.snippet.title === 'Sports'">
87+
<i class="material-icons">pool</i>
88+
</ng-container>
89+
<ng-container *ngIf="category.snippet.title === 'Gaming'">
90+
<i class="material-icons">videogame_asset</i>
91+
</ng-container>
92+
<ng-container *ngIf="category.snippet.title === 'Comedy'">
93+
<i class="material-icons">insert_emoticon</i>
94+
</ng-container>
95+
<ng-container *ngIf="category.snippet.title === 'Entertainment'">
96+
<i class="material-icons">local_movies</i>
97+
</ng-container>
98+
<ng-container *ngIf="category.snippet.title === 'Howto & Style'">
99+
<i class="material-icons">directions_bike</i>
100+
</ng-container>
101+
<ng-container *ngIf="category.snippet.title === 'Science & Technology'">
102+
<i class="material-icons">wifi</i>
103+
</ng-container>
104+
</button>
105+
</div>
106+
</ng-container>
74107
</div>
75108
<div id="feed-video-list" class="video-list" [ngClass]="{'grid-list': !listGrid }">
76109
<div *ngFor="let feedVideo of feedVideos; let i = index" [ngClass]="{'hidden-thumbnails': !thumbnails }" [attr.data-index]="i" class="video-item">

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export class SearchComponent implements OnInit {
2323
feedVideos: Array<IFeedVideo>;
2424
channel: IChannelList;
2525
categories: any;
26+
categoriesBlocked = ['19', '22', '25', '27']
2627

2728
_shared: any;
2829
_app: any;
@@ -71,15 +72,18 @@ export class SearchComponent implements OnInit {
7172
async getCategories() {
7273
const res = await this.youtube.categories();
7374
this.categories = res;
75+
}
7476

75-
const res2 = await this.youtube.videoCategories(2);
77+
async getCategoriesVideos(val: number) {
78+
const res2 = await this.youtube.videoCategories(val);
79+
this.feedVideos = res2['items'];
7680
}
7781

7882
async setSettings() {
7983
this.thumbnails = this._shared.settings.form_settings[0].value;
8084
this.listGrid = this._shared.settings.form_settings[1].value;
8185
}
82-
86+
8387
async getFeedVideos() {
8488
await this._shared.initFeed();
8589
await this._shared.initChannel();

‎src/app/shared/lists.service.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,15 @@ export class SharedService {
5454
this.channel = res;
5555
}
5656

57+
async setApiSettings() {
58+
if (this.settings) {
59+
this.youtube.defaultApiSet(this.settings);
60+
} else {
61+
await this.getSettings();
62+
this.youtube.defaultApiSet(this.settings);
63+
}
64+
}
65+
5766
updateSettings() {
5867
localStorage.setItem('settings', JSON.stringify(this.settings));
5968
this.setLocalVersion();
@@ -68,15 +77,6 @@ export class SharedService {
6877
this.setLocalVersion();
6978
}
7079

71-
async setApiSettings() {
72-
if (this.settings) {
73-
this.youtube.defaultApiSet(this.settings);
74-
} else {
75-
await this.getSettings();
76-
this.youtube.defaultApiSet(this.settings);
77-
}
78-
}
79-
8080
setLocalVersion() {
8181
if (localStorage.getItem('version') === null) {
8282
localStorage.setItem('version', '1');

‎src/app/shared/youtube.service.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export class YoutubeGetVideo {
7474

7575
async videoCategories(category: number) {
7676
if (this.apiKey) {
77-
const res = await this.http.get(`${this.url}videos?part=snippet,contentDetails&chart=mostPopular&maxResults=25&videoCategoryId=${category}&regionCode=${this.regionCode}&key=${this.apiKey}`)
77+
const res = await this.http.get(`${this.url}videos?part=snippet,contentDetails,statistics&chart=mostPopular&maxResults=25&videoCategoryId=${category}&regionCode=${this.regionCode}&key=${this.apiKey}`)
7878
.map(response => response).toPromise();
7979
return res;
8080
}

‎src/assets/scss/_search.scss

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,29 @@
7373
display: flex;
7474
flex-wrap: nowrap;
7575
width: 100%;
76-
height: 69px;
77-
overflow-x: scroll;
7876
> div {
79-
width: 80px;
80-
flex: 0 0 80px;
77+
margin: 8px 0;
78+
flex: 0 0 calc(10% - 10px);
79+
button {
80+
background-color: var(--c-primary);
81+
color: var(--c-white);
82+
display: flex;
83+
justify-content: center;
84+
align-items: center;
85+
text-align: center;
86+
cursor: pointer;
87+
border-radius: 3px;
88+
border: none;
89+
color: inherit;
90+
padding: 0 5px;
91+
margin: 0;
92+
display: block;
93+
height: 55px;
94+
width: calc(100% - 2px);
95+
}
96+
+ div {
97+
margin-left: 10px;
98+
}
8199
}
82100
p {
83101
margin: 0;

‎src/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<base href="/">
5-
<title>YouTube Player v2.0.2</title>
5+
<title>YouTube Player v2.1</title>
66
<link rel="icon" href="favicon.ico">
77
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
88
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

0 commit comments

Comments
 (0)