Skip to content

Commit ee3e436

Browse files
queadquead
committed
2.1 - Updating categories
1 parent dc08a57 commit ee3e436

12 files changed

+296
-671
lines changed

‎src/app/app.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h1><span class="favicon-app"></span>YouTube Player v2.0</h1>
1515
<div class="device-bar">
1616
<button type="button" class="trigger-nav" (click)="openMobileMenu()"><span class="fa fa-navicon"></span>Menu</button>
1717
<div id="logo">
18-
<a routerLink="/home" class="logo-svg-small" title="Homepage"></a>
18+
<a routerLink="" class="logo-svg-small" title="Homepage"></a>
1919
<small *ngIf="regionCode">{{ regionCode }}</small>
2020
</div>
2121
</div>
@@ -28,14 +28,14 @@ <h1><span class="favicon-app"></span>YouTube Player v2.0</h1>
2828
<div class="app app-services">
2929
<div class="app-head">
3030
<div id="logo">
31-
<a routerLink="/home" class="logo-svg" title="Homepage"></a>
31+
<a routerLink="/category/all" class="logo-svg" title="Homepage"></a>
3232
<small *ngIf="regionCode">{{ regionCode }}</small>
3333
</div>
3434
</div>
3535
<div class="app-content">
3636
<nav>
3737
<ul>
38-
<li><a routerLink="/home" routerLinkActive="is-active" title="Homepage"><span class="fa fa-home"></span>Home<span class="description">Trending videos and search</span></a></li>
38+
<li><a routerLink="/category/all" routerLinkActive="is-active" title="Homepage"><span class="fa fa-home"></span>Home<span class="description">Trending videos and search</span></a></li>
3939
<li><a routerLink="/history" routerLinkActive="is-active" title="History page"><span class="fa fa-history"></span>History<span class="description">Recently played</span></a></li>
4040
<li><a routerLink="/about" routerLinkActive="is-active" title="About application page"><span class="fa fa-info-circle"></span>About<span class="description">All informations about the app</span></a></li>
4141
<li><a routerLink="/settings" routerLinkActive="is-active" title="Settings page"><span class="fa fa-gear"></span>Settings<span class="description">Change app settings</span></a></li>

‎src/app/app.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { AboutComponent } from './components/youtube-about.component';
1515
import { HistoryComponent } from './components/youtube-history.component';
1616

1717
import { YoutubePlayerModule } from 'ngx-youtube-player';
18+
import { CategoryComponent } from './components/category/category.component';
1819

1920
@NgModule({
2021
imports: [
@@ -30,7 +31,8 @@ import { YoutubePlayerModule } from 'ngx-youtube-player';
3031
SettingsComponent,
3132
SearchComponent,
3233
AboutComponent,
33-
HistoryComponent
34+
HistoryComponent,
35+
CategoryComponent
3436
],
3537
bootstrap: [ AppComponent ],
3638
providers: [ YoutubeGetVideo, SharedService, NwjsService ]

‎src/app/app.router.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,19 @@ import { SearchComponent } from './components/youtube-search.component';
66
import { HistoryComponent } from './components/youtube-history.component';
77
import { AboutComponent } from './components/youtube-about.component';
88
import { SettingsComponent } from './components/youtube-settings.component';
9+
import { CategoryComponent } from './components/category/category.component';
910

1011
export const router: Routes = [
11-
{ path: '', redirectTo: 'home', pathMatch: 'full' },
12-
{ path: 'home', component: SearchComponent },
12+
{ path: 'category', component: SearchComponent,
13+
children: [
14+
{ path: ':id', component: CategoryComponent }
15+
]
16+
},
17+
{ path: 'category', redirectTo: 'category/all' },
1318
{ path: 'history', component: HistoryComponent },
1419
{ path: 'about', component: AboutComponent },
15-
{ path: 'settings', component: SettingsComponent }
20+
{ path: 'settings', component: SettingsComponent },
21+
{ path: '**', redirectTo: 'category/all' }
1622
];
1723

1824
export const routes: ModuleWithProviders = RouterModule.forRoot(router);

‎src/app/components/category/category.component.html

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<ng-container *ngIf="loading">
2+
<div class="loading-app">
3+
<i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
4+
<span class="sr-only">Loading...</span>
5+
</div>
6+
</ng-container>
7+
<ng-container *ngIf="feedVideos">
8+
<div [ngStyle]="{'background-image': 'url(' + trendingFirst.bannerURL + ')'}" class="video-list-featured">
9+
<div class="video-item" [attr.data-index]="0">
10+
<div class="video-item-info">
11+
<div *ngIf="thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + trendingFirst.video.img +')'}"></div>
12+
<div class="video-item-content">
13+
<p class="video-item-title">{{ trendingFirst.video.title }}</p>
14+
<p class="video-item-autor">by <span>{{ trendingFirst.video.channelTitle }}</span></p>
15+
<div *ngIf="trendingFirst.video.id?.length > 0" class="video-item-details">
16+
<p class="stats-views"><span class="fa fa-eye"></span> {{ trendingFirst.video.stats.views | number:'1.0' }}</p>
17+
<p class="stats-likes"><span class="fa fa-thumbs-up"></span> {{ trendingFirst.video.stats.likes | number:'1.0' }}</p>
18+
<p class="stats-dislikes"><span class="fa fa-thumbs-down"></span> {{ trendingFirst.video.stats.dislikes | number:'1.0' }}</p>
19+
</div>
20+
</div>
21+
</div>
22+
<div class="video-item-settings-featured">
23+
<button class="btn btn-primary btn-round" (click)="onClickVideo($event, 0, 3)">
24+
<span class="fa fa-play"></span>Play video
25+
</button>
26+
<button class="btn btn-default btn-outline btn-round" (click)="addPlaylistItem(0, 0)">
27+
<span class="fa fa-plus"></span>Add to playlist
28+
</button>
29+
<button class="btn copy-link" (click)="onCopyVideoItemLink(0, 0)">
30+
<span class="fa fa-share-alt"></span>Copy link
31+
</button>
32+
</div>
33+
</div>
34+
<!--
35+
<p>{{ trendingFirst.stats.subscribers | number:'1.0' }}</p>
36+
<p>{{ trendingFirst.stats.views | number:'1.0' }}</p>
37+
<p>{{ trendingFirst.stats.videoCount | number:'1.0' }}</p>-->
38+
</div>
39+
</ng-container>
40+
<div class="categories" *ngIf="categories">
41+
<ng-container *ngFor="let category of categories.items">
42+
<div *ngIf="category.id === currentCategory">
43+
<button type="button" (click)="resetCategories()" class="trigger back">
44+
<span class="tooltip">Go back</span>
45+
<i class="material-icons">close</i>
46+
</button>
47+
</div>
48+
<div *ngIf="category.snippet.assignable && categoriesBlocked.indexOf(category.id) === -1 && category.id !== currentCategory" id="category-{{category.id}}">
49+
<!-- (click)="getCategoriesVideos(category.id)" -->
50+
<a routerLink="/category/{{category.id}}" class="trigger">
51+
<span class="tooltip">{{category.snippet.title}}</span>
52+
<ng-container *ngIf="category.snippet.title === 'Film & Animation'">
53+
<i class="material-icons">movie</i>
54+
</ng-container>
55+
<ng-container *ngIf="category.snippet.title === 'Autos & Vehicles'">
56+
<i class="material-icons">directions_car</i>
57+
</ng-container>
58+
<ng-container *ngIf="category.snippet.title === 'Music'">
59+
<i class="material-icons">library_music</i>
60+
</ng-container>
61+
<ng-container *ngIf="category.snippet.title === 'Pets & Animals'">
62+
<i class="material-icons">pets</i>
63+
</ng-container>
64+
<ng-container *ngIf="category.snippet.title === 'Sports'">
65+
<i class="material-icons">pool</i>
66+
</ng-container>
67+
<ng-container *ngIf="category.snippet.title === 'Gaming'">
68+
<i class="material-icons">videogame_asset</i>
69+
</ng-container>
70+
<ng-container *ngIf="category.snippet.title === 'Comedy'">
71+
<i class="material-icons">insert_emoticon</i>
72+
</ng-container>
73+
<ng-container *ngIf="category.snippet.title === 'Entertainment'">
74+
<i class="material-icons">local_movies</i>
75+
</ng-container>
76+
<ng-container *ngIf="category.snippet.title === 'Howto & Style'">
77+
<i class="material-icons">directions_bike</i>
78+
</ng-container>
79+
<ng-container *ngIf="category.snippet.title === 'Science & Technology'">
80+
<i class="material-icons">wifi</i>
81+
</ng-container>
82+
</a>
83+
</div>
84+
</ng-container>
85+
</div>
86+
<div id="feed-video-list" class="video-list" [ngClass]="{'grid-list': !listGrid }">
87+
<div *ngFor="let feedVideo of feedVideos; let i = index" [ngClass]="{'hidden-thumbnails': !thumbnails }" [attr.data-index]="i" class="video-item">
88+
<div class="video-item-info">
89+
<div *ngIf="thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + feedVideo.snippet.thumbnails.medium.url +')'}"></div>
90+
<div class="video-item-content">
91+
<p class="video-item-title">{{ feedVideo.snippet.title }}</p>
92+
<p class="video-item-autor">by <span>{{ feedVideo.snippet.channelTitle }}</span></p>
93+
<div class="video-item-details" *ngIf="feedVideo.id?.length > 0">
94+
<p class="stats-views"><span class="fa fa-eye"></span> {{ feedVideo.statistics.viewCount | number:'1.0' }}</p>
95+
<p class="stats-likes"><span class="fa fa-thumbs-up"></span> {{ feedVideo.statistics.likeCount | number:'1.0' }}</p>
96+
<p class="stats-dislikes"><span class="fa fa-thumbs-down"></span> {{ feedVideo.statistics.dislikeCount | number:'1.0' }}</p>
97+
</div>
98+
</div>
99+
</div>
100+
<div class="video-item-settings">
101+
<button class="video-item-play" (click)="onClickVideo($event, i, 3)">
102+
<span class="fa fa-play"></span>
103+
</button>
104+
<button class="video-item-play" (click)="onCopyVideoItemLink(i, 0)">
105+
<span class="fa fa-share-alt"></span>
106+
</button>
107+
<button class="video-item-add" (click)="addPlaylistItem(i, 0)">
108+
<span class="fa fa-plus"></span>
109+
</button>
110+
</div>
111+
</div>
112+
</div>

‎src/app/components/category/category.component.ts

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { YoutubeGetVideo } from '../../shared/youtube.service';
3+
import { AppComponent } from '../../app.component';
4+
import { SharedService } from '../../shared/lists.service';
5+
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
6+
7+
import { IFeedVideo } from '../../models/feed-video.model';
8+
import { IChannelList } from '../../models/channel.model';
9+
10+
@Component({
11+
selector: 'app-category',
12+
templateUrl: './category.component.html',
13+
})
14+
export class CategoryComponent implements OnInit {
15+
16+
feedVideos: Array<IFeedVideo>;
17+
channel: IChannelList;
18+
categories: any;
19+
currentCategory: string;
20+
categoriesBlocked = ['19', '22', '25', '27', '29']
21+
22+
thumbnails = false;
23+
loading = true;
24+
listGrid = false;
25+
26+
trendingFirst = {
27+
bannerURL: '',
28+
video: {
29+
id: '',
30+
title: '',
31+
img: '',
32+
channelTitle: '',
33+
stats: {
34+
views: '',
35+
likes: '',
36+
dislikes: ''
37+
}
38+
},
39+
stats: {
40+
subscribers: '',
41+
views: '',
42+
videoCount: ''
43+
}
44+
};
45+
46+
_shared: any;
47+
_app: any;
48+
49+
constructor(
50+
private youtube: YoutubeGetVideo,
51+
private shared: SharedService,
52+
private app: AppComponent,
53+
private activatedRoute: ActivatedRoute,
54+
private router: Router
55+
) {
56+
this._shared = shared;
57+
this._app = app;
58+
}
59+
60+
ngOnInit() {
61+
this.activatedRoute.paramMap.subscribe(data => {
62+
if (data['params'].id === 'all') {
63+
this.getFeedVideos();
64+
} else {
65+
this.currentCategory = data['params'].id;
66+
}
67+
this.setSettings();
68+
this.getCategories();
69+
});
70+
}
71+
72+
73+
async getCategories() {
74+
const res = await this.youtube.categories();
75+
this.categories = res;
76+
if (res['items'].find(x => x.id === this.currentCategory)) {
77+
this.getCategoriesVideos(this.currentCategory);
78+
} else {
79+
this.router.navigate(['']);
80+
}
81+
}
82+
83+
async getCategoriesVideos(val: string) {
84+
const res2 = await this.youtube.videoCategories(val);
85+
this.feedVideos = res2['items'];
86+
this._shared.feedVideos = res2['items'];
87+
88+
89+
await this._shared.initChannel();
90+
this.getChannelTrending();
91+
}
92+
93+
async setSettings() {
94+
this.thumbnails = this._shared.settings.form_settings[0].value;
95+
this.listGrid = this._shared.settings.form_settings[1].value;
96+
}
97+
98+
async getFeedVideos() {
99+
this.loading = true;
100+
if (!this._shared.feedVideos) {
101+
await this._shared.initFeed();
102+
}
103+
if (!this._shared.channel) {
104+
await this._shared.initChannel();
105+
}
106+
this.feedVideos = this._shared.feedVideos;
107+
this.channel = this._shared.channel;
108+
this.getChannelTrending();
109+
}
110+
111+
getChannelTrending() {
112+
this.feedVideos = this._shared.feedVideos;
113+
this.channel = this._shared.channel;
114+
this.trendingFirst.video.id = this.feedVideos[0].id;
115+
this.trendingFirst.video.title = this.feedVideos[0].snippet.title;
116+
this.trendingFirst.video.img = this.feedVideos[0].snippet.thumbnails.medium.url;
117+
this.trendingFirst.video.stats.likes = this.feedVideos[0].statistics.likeCount;
118+
this.trendingFirst.video.stats.dislikes = this.feedVideos[0].statistics.dislikeCount;
119+
this.trendingFirst.video.stats.views = this.feedVideos[0].statistics.viewCount;
120+
this.trendingFirst.bannerURL = this.channel.items[0].brandingSettings.image.bannerTabletHdImageUrl;
121+
this.trendingFirst.video.channelTitle = this.channel.items[0].snippet.title;
122+
if (!this.channel.items[0].statistics.hiddenSubscriberCount) {
123+
this.trendingFirst.stats.subscribers = this.channel.items[0].statistics.subscriberCount;
124+
} else {
125+
this.trendingFirst.stats.subscribers = '0';
126+
}
127+
this.trendingFirst.stats.videoCount = this.channel.items[0].statistics.videoCount;
128+
this.trendingFirst.stats.views = this.channel.items[0].statistics.viewCount;
129+
this.loading = false;
130+
}
131+
132+
async resetCategories() {
133+
this.currentCategory = 'all';
134+
this.router.navigate(['category/all']);
135+
await this._shared.initFeed();
136+
await this._shared.initChannel();
137+
this.feedVideos = this._shared.feedVideos;
138+
this.channel = this._shared.channel;
139+
this.getChannelTrending();
140+
}
141+
142+
143+
}

0 commit comments

Comments
 (0)