Skip to content

Commit be679bf

Browse files
queadquead
authored
Merge pull request #16 from quead/1.x-develop
2.1 - Updatting to latest version
2 parents fd22f70 + 6f8163b commit be679bf

21 files changed

+550
-814
lines changed

‎README.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<a href="https://quead.github.io/demo/" title="YouTube Player Demo">Demo</a>
44
or
55
<a href="https://youtu.be/KB803dWQM-o/" title="Video Presentation">Video Presentation</a>
6-
<img alt="Angular YouTube Player Logo" src="https://i.imgur.com/GyNXPTg.png" style="height: auto; max-width:100%;" />
6+
<img alt="Angular YouTube Player Logo" src="https://i.imgur.com/EKqK4ip.png" style="height: auto; max-width:100%;" />
77
</p>
88

99
# About Player
10-
[![Version](https://img.shields.io/badge/Current%20version-v2.0-brightgreen.svg?style=flat)](https://github.com/quead/angular2-yt-player)
10+
[![Version](https://img.shields.io/badge/Current%20version-v2.1-brightgreen.svg?style=flat)](https://github.com/quead/angular2-yt-player)
1111
[![Build Status](https://semaphoreci.com/api/v1/quead/angular2-yt-player/branches/master/badge.svg)](https://semaphoreci.com/quead/angular2-yt-player)
1212

1313
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/quead/angular2-yt-player/master/LICENSE)
@@ -79,6 +79,13 @@ or
7979
<a href="https://youtu.be/KB803dWQM-o/" title="Video Presentation">Video Presentation</a>
8080

8181
## Changelog
82+
Angular2 YT Player v2.1
83+
- Categories with videos like (music, gaming, autos, films, sports, etc.)
84+
- Refactoring code
85+
- Search on specific region
86+
- Fixing copy link for featured video
87+
- UX improvements
88+
8289
Angular2 YT Player v2.0.1
8390
- Import & export youtube playlist as .JSON file
8491

@@ -170,7 +177,6 @@ Angular2 YT Player v1.0.0
170177
- *Room chat **(unversioned)***
171178

172179
#### Roadmap to 3.0
173-
- Categories with videos like (music, gaming, autos, films, sports, much more) **(in v2.1)**
174180
- Drag and drop videos to playlist **(in v2.2)**
175181
- Arrange playlist by drag and drop **(in v2.2)**
176182
- Integrating Google accounts **(in v2.4)**

‎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.component.ts

Lines changed: 38 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,9 @@ export class AppComponent implements OnInit {
9797
}
9898
});
9999
this.preventOldSettings();
100+
100101
this.setSettings();
102+
101103
this.getFeedVideos();
102104
}
103105

@@ -122,13 +124,17 @@ export class AppComponent implements OnInit {
122124
return playerVars;
123125
}
124126

125-
getFeedVideos() {
126-
this._shared.getFeed().subscribe(data => {
127-
this.feedVideos = data;
128-
if (!this.currentVideo.id) {
129-
this.setDefaultPlayer();
130-
}
131-
});
127+
async getFeedVideos() {
128+
await this._shared.initFeed();
129+
await this._shared.initChannel();
130+
this.feedVideos = this._shared.feedVideos;
131+
if (!this.currentVideo.id) {
132+
this.setDefaultPlayer();
133+
}
134+
}
135+
136+
async getChannel() {
137+
await this._shared.initChannel();
132138
}
133139

134140
setCurrentVideoObject(data: any) {
@@ -186,7 +192,6 @@ export class AppComponent implements OnInit {
186192
this.stopRange();
187193
if (this.currentState) {
188194
this.videoRangeTimer = setInterval(() => {
189-
console.log('Rangeu merge de nebun...');
190195
this.videoCurRange = this.player.getCurrentTime();
191196
this.videoCurFull = this.timeFormat(this.videoCurRange);
192197
this.videoRangePercent = (this.videoCurRange / this.videoMaxRange) * 100;
@@ -347,7 +352,7 @@ export class AppComponent implements OnInit {
347352
// ---------------- Init settings ----------------
348353

349354
preventOldSettings() {
350-
if (localStorage.length === 1 || localStorage.getItem('version') === null) {
355+
if (localStorage.length === 1 || !localStorage.getItem('version')) {
351356
console.log('Updating localstorage...');
352357
localStorage.removeItem('version');
353358
localStorage.removeItem('playlist');
@@ -359,14 +364,13 @@ export class AppComponent implements OnInit {
359364
}
360365
}
361366

362-
setSettings() {
363-
this._shared.getSettings().subscribe(data => {
364-
this.regionCode = data.api_settings[1].value;
365-
this.thumbnails = data.form_settings[0].value;
366-
this.displayVideoPlayer = data.form_settings[2].value;
367-
this.repeatMode = data.form_settings[3].value;
368-
this.darkMode = data.form_settings[4].value;
369-
});
367+
async setSettings() {
368+
await this._shared.getSettings();
369+
this.regionCode = this._shared.settings.api_settings[1].value;
370+
this.thumbnails = this._shared.settings.form_settings[0].value;
371+
this.displayVideoPlayer = this._shared.settings.form_settings[2].value;
372+
this.repeatMode = this._shared.settings.form_settings[3].value;
373+
this.darkMode = this._shared.settings.form_settings[4].value;
370374
}
371375

372376
toggleHeadSettings(int: number) {
@@ -421,36 +425,24 @@ export class AppComponent implements OnInit {
421425
}
422426
}
423427

424-
getStatsVideos(query: string) {
425-
this.youtube.statsVideos(query).subscribe(
426-
result => {
427-
this.currentVideo.id = result['items'][0].id;
428-
this.currentVideo.title = result['items'][0].snippet.title;
429-
this.currentVideo.channelTitle = result['items'][0].snippet.channelTitle;
430-
this.currentVideo.stats.likes = result['items'][0].statistics.likeCount;
431-
this.currentVideo.stats.dislikes = result['items'][0].statistics.dislikeCount;
432-
this.currentVideo.stats.views = result['items'][0].statistics.viewCount;
433-
this.shareLink = 'https://youtu.be/' + this.currentVideo.id;
434-
},
435-
error => {
436-
console.log('error on related videos');
437-
}
438-
);
428+
async getStatsVideos(query: string) {
429+
const res = await this.youtube.statsVideos(query);
430+
this.currentVideo.id = res['items'][0].id;
431+
this.currentVideo.title = res['items'][0].snippet.title;
432+
this.currentVideo.channelTitle = res['items'][0].snippet.channelTitle;
433+
this.currentVideo.stats.likes = res['items'][0].statistics.likeCount;
434+
this.currentVideo.stats.dislikes = res['items'][0].statistics.dislikeCount;
435+
this.currentVideo.stats.views = res['items'][0].statistics.viewCount;
436+
this.shareLink = 'https://youtu.be/' + this.currentVideo.id;
439437
}
440438

441-
getRelatedVideos() {
442-
this.youtube.relatedVideos(this.currentVideo.id).subscribe(
443-
result => {
444-
this.relatedVideos = result['items'];
445-
if (this.playlistPrefill) {
446-
this.playlistInit();
447-
this.playlistPrefill = false;
448-
}
449-
},
450-
error => {
451-
console.log('error on related videos');
452-
}
453-
);
439+
async getRelatedVideos() {
440+
const res = await this.youtube.relatedVideos(this.currentVideo.id);
441+
this.relatedVideos = res['items'];
442+
if (this.playlistPrefill) {
443+
this.playlistInit();
444+
this.playlistPrefill = false;
445+
}
454446
}
455447

456448
// ---------------- Player controls ----------------
@@ -636,7 +628,7 @@ export class AppComponent implements OnInit {
636628
let listType;
637629
const youtubeLink = 'https://youtu.be/';
638630
if (list === 0) {
639-
listType = this.feedVideos[i];
631+
listType = this._shared.feedVideos[i];
640632
}
641633
if (list === 1) {
642634
listType = this._shared.lastSearchedVideos[i];
@@ -677,7 +669,6 @@ export class AppComponent implements OnInit {
677669

678670
copyShareLink() {
679671
if (!this.notify.enabled) {
680-
console.log('test');
681672
document.execCommand('Copy');
682673
this._shared.triggerNotify('Copied');
683674
this.updateNotify();

‎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>

0 commit comments

Comments
 (0)