Skip to content

Commit 59e4d50

Browse files
queadquead
committed
2.3 - Centralized into global service all important variables
1 parent f458a77 commit 59e4d50

16 files changed

+182
-230
lines changed

‎src/app/app.component.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ <h1><span class="favicon-app"></span>YouTube Player v2.0</h1>
1212
<button id="linux-maximize" (click)="winClose();"></button>
1313
</div>
1414
</div>
15-
<ng-container *ngIf="!_shared.isLogged">
15+
<ng-container *ngIf="!globals.isLogged">
1616
<button type="button" (click)="loginGoogle()">Login</button>
1717
</ng-container>
18-
<ng-container *ngIf="_shared.isLogged">
18+
<ng-container *ngIf="globals.isLogged">
1919
<button type="button" (click)="logout()">Logout</button>
2020
</ng-container>
2121
<button type="button" (click)="refresh()">Reinit</button>
@@ -53,18 +53,18 @@ <h1><span class="favicon-app"></span>YouTube Player v2.0</h1>
5353
<button type="button" class="video-item-head-btn" (click)="clearPlaylist()"><span class="fa fa-close"></span>clear</button>
5454
<button type="button" class="video-item-head-btn" (click)="exportPlaylist()"><span class="fa fa-cog"></span>manage</button>
5555
</div>
56-
<div class="playlist-video-content" [dragula]='"playlistDrag"' [dragulaModel]='_shared.playlist' #playlistContainer>
57-
<ng-container *ngIf="_shared.playlist.length === 0">
56+
<div class="playlist-video-content" [dragula]='"playlistDrag"' [dragulaModel]='globals.playlist' #playlistContainer>
57+
<ng-container *ngIf="globals.playlist.length === 0">
5858
<div *ngFor="let i of [1,2,3,4,5]" class="video-item">
5959
<div class="video-item-info">
6060
<div class="video-item-image loading-featured"></div>
6161
<div class="video-item-content loading-featured"></div>
6262
</div>
6363
</div>
6464
</ng-container>
65-
<div *ngFor="let playlistVideo of _shared.playlist; let i = index" [ngClass]="currentPlaylistItem === i ? 'active' : ''" [attr.data-index]="i" class="video-item">
65+
<div *ngFor="let playlistVideo of globals.playlist; let i = index" [ngClass]="currentPlaylistItem === i ? 'active' : ''" [attr.data-index]="i" class="video-item">
6666
<div class="video-item-info">
67-
<div *ngIf="thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + playlistVideo.snippet.thumbnails.default.url +')'}"></div>
67+
<div *ngIf="globals.thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + playlistVideo.snippet.thumbnails.default.url +')'}"></div>
6868
<div class="video-item-content">
6969
<ng-container *ngIf="currentPlaylistItem === i && currentState === 1">
7070
<p class="video-item-hint"><span class="fa fa-play"></span>Playing</p>
@@ -147,22 +147,22 @@ <h2>Player</h2>
147147
<input id="shareInput" type="text" name="current video share" #shareInput [value]="shareLink" (click)="copyShareLink(shareInput.select())" readonly>
148148
</div>
149149
</div>
150-
<div *ngIf="relatedVideos" id="related-video-list" class="video-list" [ngClass]="{'activePlayer': displayVideoPlayer }">
150+
<div *ngIf="globals.relatedVideos" id="related-video-list" class="video-list" [ngClass]="{'activePlayer': displayVideoPlayer }">
151151
<div class="video-item-head">
152152
Similar videos
153153
</div>
154154
<div class="related-video-content">
155-
<ng-container *ngIf="relatedVideos.length === 0">
155+
<ng-container *ngIf="globals.relatedVideos.length === 0">
156156
<div *ngFor="let i of [1,2,3,4]" class="video-item">
157157
<div class="video-item-info">
158158
<div class="video-item-image loading-featured"></div>
159159
<div class="video-item-content loading-featured"></div>
160160
</div>
161161
</div>
162162
</ng-container>
163-
<div *ngFor="let relatedVideo of relatedVideos; let i = index" [attr.data-index]="i" class="video-item">
163+
<div *ngFor="let relatedVideo of globals.relatedVideos; let i = index" [attr.data-index]="i" class="video-item">
164164
<div class="video-item-info">
165-
<div *ngIf="thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + relatedVideo.snippet.thumbnails.default.url +')'}"></div>
165+
<div *ngIf="globals.thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + relatedVideo.snippet.thumbnails.default.url +')'}"></div>
166166
<div class="video-item-content">
167167
<p class="video-item-title">{{ relatedVideo.snippet.title }}</p>
168168
<p class="video-item-autor">by <span>{{ relatedVideo.snippet.channelTitle }}</span></p>
@@ -200,8 +200,8 @@ <h2>Player</h2>
200200
<div *ngIf="modalPlaylist" class="modal-container">
201201
<h2>Do you want to remove this item from playlist?</h2>
202202
<div class="modal-content">
203-
<img *ngIf="thumbnails" src="{{ _shared.playlist[modalPlaylistItem].snippet.thumbnails.medium.url }}" alt="{{ _shared.playlist[modalPlaylistItem].snippet.title }}" />
204-
<p>{{ _shared.playlist[modalPlaylistItem].snippet.title }}</p>
203+
<img *ngIf="globals.thumbnails" src="{{ globals.playlist[modalPlaylistItem].snippet.thumbnails.medium.url }}" alt="{{ globals.playlist[modalPlaylistItem].snippet.title }}" />
204+
<p>{{ globals.playlist[modalPlaylistItem].snippet.title }}</p>
205205
</div>
206206
<button class="modal-close" (click)="closeModal()">
207207
<span class="fa fa-times"></span>
@@ -224,7 +224,7 @@ <h3>Import Playlist</h3>
224224
<button type="button" class="btn btn-round btn-primary" (click)="importPlaylist(importPlaylistInput)">Replace</button>
225225
</div>
226226
<h3>Export Playlist</h3>
227-
<p>Number of videos to export: {{_shared.playlist.length}}</p>
227+
<p>Number of videos to export: {{globals.playlist.length}}</p>
228228
</div>
229229
<button class="modal-close" (click)="closeModal()">
230230
<span class="fa fa-times"></span>

‎src/app/app.component.ts

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, ElementRef, ViewChild, OnInit, HostListener } from '@angular/core';
22
import { YoutubeGetVideo } from './services/youtube.service';
33
import { SharedService } from './services/shared.service';
4+
import { GlobalsService } from './services/globals.service';
45
import { Event } from '@angular/router/src/events';
56
import { DragulaService } from 'ng2-dragula/ng2-dragula';
67

@@ -30,11 +31,9 @@ export class AppComponent implements OnInit {
3031
nw: any;
3132
videoRangePercent = 0;
3233

33-
relatedVideos: Array<IRelatedVideo> = [];
3434
tempPlaylist: Array<any> = [];
3535
currentVideoObject: Array<any> = [];
3636

37-
thumbnails = true;
3837
darkMode = true;
3938
menuActive = false;
4039

@@ -86,6 +85,7 @@ export class AppComponent implements OnInit {
8685
constructor(
8786
private youtube: YoutubeGetVideo,
8887
private shared: SharedService,
88+
private globals: GlobalsService,
8989
private dragula: DragulaService,
9090

9191
private authService: AuthService,
@@ -101,7 +101,7 @@ export class AppComponent implements OnInit {
101101
ngOnInit() {
102102
this.preventOldSettings();
103103
this.updateUserDetails();
104-
this.initDragula();
104+
this.initDragula();
105105
}
106106

107107
private hasClass(el: any, name: string) {
@@ -134,7 +134,7 @@ export class AppComponent implements OnInit {
134134
// To fix update in realtime
135135
this.authService.checkLogged();
136136
this.db2.list('sessions/' + localStorage.getItem('session_key')).valueChanges().subscribe((data) => {
137-
this.shared.updateData('check status');
137+
this.shared.updateData('check status');
138138
if (data.length > 0) {
139139
// this.clearSession();
140140
// localStorage.setItem('settings', JSON.parse(data['3']));
@@ -174,7 +174,7 @@ export class AppComponent implements OnInit {
174174
async getFeedVideos() {
175175
await this._shared.initFeed();
176176
await this._shared.initChannel();
177-
if (!this.currentVideo.id && !this._shared.isLogged) {
177+
if (!this.currentVideo.id && !this.globals.isLogged) {
178178
this.setDefaultPlayer();
179179
}
180180
}
@@ -189,12 +189,12 @@ export class AppComponent implements OnInit {
189189
}
190190

191191
setDefaultPlayer() {
192-
this.setCurrentVideoObject(this._shared.feedVideos[0]);
193-
this.currentVideo.id = this._shared.feedVideos[0].id;
194-
this.currentVideo.title = this._shared.feedVideos[0].snippet.title;
195-
this.currentVideo.stats.likes = this._shared.feedVideos[0].statistics.likeCount;
196-
this.currentVideo.stats.dislikes = this._shared.feedVideos[0].statistics.dislikeCount;
197-
this.currentVideo.stats.views = this._shared.feedVideos[0].statistics.viewCount;
192+
this.setCurrentVideoObject(this.globals.feedVideos[0]);
193+
this.currentVideo.id = this.globals.feedVideos[0].id;
194+
this.currentVideo.title = this.globals.feedVideos[0].snippet.title;
195+
this.currentVideo.stats.likes = this.globals.feedVideos[0].statistics.likeCount;
196+
this.currentVideo.stats.dislikes = this.globals.feedVideos[0].statistics.dislikeCount;
197+
this.currentVideo.stats.views = this.globals.feedVideos[0].statistics.viewCount;
198198
this.shareLink = 'https://youtu.be/' + this.currentVideo.id;
199199
this.getRelatedVideos();
200200
this.findPlaylistItem();
@@ -216,14 +216,14 @@ export class AppComponent implements OnInit {
216216
if (this.currentState === 0) {
217217
this.stopRange();
218218
if (this.repeatMode) {
219-
if (this._shared.playlist.length) {
219+
if (this.globals.playlist.length) {
220220
this.findPlaylistItem();
221221
if (this.currentPlaylistItem < 0) {
222222
this.playPlaylistItem('next', this.currentPlaylistItem);
223223
} else {
224224
this.playPlaylistItem('next', this.currentPlaylistItem);
225225
}
226-
if (this._shared.playlist.length === 1) {
226+
if (this.globals.playlist.length === 1) {
227227
this.player.playVideo();
228228
}
229229
} else {
@@ -271,7 +271,7 @@ export class AppComponent implements OnInit {
271271

272272
playlistInit() {
273273
if (localStorage.getItem('playlist') === null || localStorage.getItem('playlist').length === 2) {
274-
this._shared.playlist = JSON.parse(JSON.stringify(this.relatedVideos));
274+
this.globals.playlist = JSON.parse(JSON.stringify(this.globals.relatedVideos));
275275
this._shared.updatePlaylist();
276276
} else {
277277
this._shared.getPlaylist();
@@ -282,31 +282,31 @@ export class AppComponent implements OnInit {
282282
findPlaylistItem() {
283283
let playlistItem;
284284
if (typeof this.currentVideoObject[0].id.videoId !== 'undefined') {
285-
playlistItem = this._shared.playlist.find(item => item.id.videoId === this.currentVideoObject[0].id.videoId);
285+
playlistItem = this.globals.playlist.find(item => item.id.videoId === this.currentVideoObject[0].id.videoId);
286286
} else {
287-
playlistItem = this._shared.playlist.find(item => item.id === this.currentVideoObject[0].id);
287+
playlistItem = this.globals.playlist.find(item => item.id === this.currentVideoObject[0].id);
288288
}
289-
this.currentPlaylistItem = this._shared.playlist.indexOf(playlistItem);
289+
this.currentPlaylistItem = this.globals.playlist.indexOf(playlistItem);
290290
}
291291

292292
playPlaylistItem(direction: string, i: number) {
293293
if (direction === 'next') {
294-
if (i < this._shared.playlist.length) {
294+
if (i < this.globals.playlist.length) {
295295
i += 1;
296296
}
297-
if (i === this._shared.playlist.length) {
297+
if (i === this.globals.playlist.length) {
298298
i = 0;
299299
}
300300
}
301301
if (direction === 'prev') {
302302
if (i === 0 || i < 0) {
303-
i = this._shared.playlist.length - 1;
303+
i = this.globals.playlist.length - 1;
304304
} else {
305305
i -= 1;
306306
}
307307
}
308-
if (this._shared.playlist.length > 0) {
309-
this.getVideo(this._shared.playlist[i]);
308+
if (this.globals.playlist.length > 0) {
309+
this.getVideo(this.globals.playlist[i]);
310310
} else {
311311
this._shared.triggerNotify('Playlist is empty');
312312
this.updateNotify();
@@ -320,7 +320,7 @@ export class AppComponent implements OnInit {
320320
if (i === this.currentPlaylistItem) {
321321
this.currentPlaylistItem = -1;
322322
}
323-
this._shared.playlist.splice(i, 1);
323+
this.globals.playlist.splice(i, 1);
324324
this.updatePlaylist();
325325
}, 200);
326326
}
@@ -329,29 +329,29 @@ export class AppComponent implements OnInit {
329329
let listType;
330330
let playlistItem;
331331
if (list === 0) {
332-
listType = this._shared.feedVideos[i];
332+
listType = this.globals.feedVideos[i];
333333
}
334334
if (list === 1) {
335-
listType = this._shared.lastSearchedVideos[i];
335+
listType = this.globals.lastSearchedVideos[i];
336336
}
337337
if (list === 2) {
338-
listType = this.relatedVideos[i];
338+
listType = this.globals.relatedVideos[i];
339339
}
340340
if (list === 3) {
341341
listType = this.currentVideoObject[i];
342342
}
343343
if (list === 4) {
344-
listType = this._shared.historyVideos[i];
344+
listType = this.globals.historyVideos[i];
345345
}
346346

347347
if (typeof listType.id.videoId !== 'undefined') {
348-
playlistItem = this._shared.playlist.find(item => item.id.videoId === listType.id.videoId);
348+
playlistItem = this.globals.playlist.find(item => item.id.videoId === listType.id.videoId);
349349
} else {
350-
playlistItem = this._shared.playlist.find(item => item.id === listType.id);
350+
playlistItem = this.globals.playlist.find(item => item.id === listType.id);
351351
}
352352

353353
if (typeof playlistItem === 'undefined') {
354-
this._shared.playlist.push(listType);
354+
this.globals.playlist.push(listType);
355355
this.updatePlaylist();
356356

357357
this._shared.triggerNotify('Added to playlist');
@@ -365,7 +365,7 @@ export class AppComponent implements OnInit {
365365

366366
clearPlaylist() {
367367
this.currentPlaylistItem = -1;
368-
this._shared.playlist = [];
368+
this.globals.playlist = [];
369369
this._shared.updatePlaylist();
370370
}
371371

@@ -382,8 +382,8 @@ export class AppComponent implements OnInit {
382382
};
383383
this.currentVideo = removedCurrentVid;
384384
this.currentPlaylistItem = -1;
385-
this._shared.playlist = [];
386-
this.relatedVideos = [];
385+
this.globals.playlist = [];
386+
this.globals.relatedVideos = [];
387387
localStorage.removeItem('playlist');
388388
// localStorage.removeItem('settings');
389389
}
@@ -394,14 +394,14 @@ export class AppComponent implements OnInit {
394394

395395
exportFilePlaylist() {
396396
const a = document.createElement('a');
397-
const file = new Blob([JSON.stringify(this._shared.playlist)], {type: 'data:text/json;charset=utf8'});
397+
const file = new Blob([JSON.stringify(this.globals.playlist)], {type: 'data:text/json;charset=utf8'});
398398
a.href = URL.createObjectURL(file);
399399
a.download = 'playlist.json';
400400
a.click();
401401
}
402402

403403
importPlaylist(input: any) {
404-
this._shared.playlist = this.tempPlaylist;
404+
this.globals.playlist = this.tempPlaylist;
405405
this.tempPlaylist = [];
406406
this._shared.updatePlaylist();
407407
this.closeModal();
@@ -410,7 +410,7 @@ export class AppComponent implements OnInit {
410410
// ---------------- Init settings ----------------
411411

412412
initDragula() {
413-
this.dragula.setOptions('_shared.playlist', {
413+
this.dragula.setOptions('globals.playlist', {
414414
moves: (el, container, handle) => {
415415
return handle.className === 'video-item-settings';
416416
}
@@ -436,15 +436,15 @@ export class AppComponent implements OnInit {
436436
console.log('Updating localstorage...');
437437
localStorage.clear();
438438
this._shared.settings = null;
439-
this._shared.playlist = [];
439+
this.globals.playlist = [];
440440
}
441441
}
442442

443443
setSettings() {
444444
this._shared.getSettings();
445445
if (this._shared.settings) {
446446
this.regionCode = this._shared.settings.api_settings[1].value;
447-
this.thumbnails = this._shared.settings.form_settings[0].value;
447+
this.globals.thumbnails = this._shared.settings.form_settings[0].value;
448448
this.displayVideoPlayer = this._shared.settings.form_settings[2].value;
449449
this.repeatMode = this._shared.settings.form_settings[3].value;
450450
this.darkMode = this._shared.settings.form_settings[4].value;
@@ -467,14 +467,14 @@ export class AppComponent implements OnInit {
467467
// ---------------- Video fetching ----------------
468468

469469
onClickRelated(event: Event, i: number) {
470-
this.getVideo(this.relatedVideos[i]);
470+
this.getVideo(this.globals.relatedVideos[i]);
471471
}
472472

473473
onClickPlaylist(event: Event, i: number) {
474474
if (i === this.currentPlaylistItem) {
475475
this.playPauseVideo();
476476
} else {
477-
this.getVideo(this._shared.playlist[i]);
477+
this.getVideo(this.globals.playlist[i]);
478478
}
479479
}
480480

@@ -516,7 +516,7 @@ export class AppComponent implements OnInit {
516516

517517
async getRelatedVideos() {
518518
const res = await this.youtube.relatedVideos(this.currentVideo.id);
519-
this.relatedVideos = res['items'];
519+
this.globals.relatedVideos = res['items'];
520520
if (this.playlistPrefill) {
521521
this.playlistInit();
522522
this.playlistPrefill = false;
@@ -627,19 +627,19 @@ export class AppComponent implements OnInit {
627627
let listType;
628628
const youtubeLink = 'https://youtu.be/';
629629
if (list === 0) {
630-
listType = this._shared.feedVideos[i];
630+
listType = this.globals.feedVideos[i];
631631
}
632632
if (list === 1) {
633-
listType = this._shared.lastSearchedVideos[i];
633+
listType = this.globals.lastSearchedVideos[i];
634634
}
635635
if (list === 2) {
636-
listType = this.relatedVideos[i];
636+
listType = this.globals.relatedVideos[i];
637637
}
638638
if (list === 3) {
639-
listType = this._shared.playlist[i];
639+
listType = this.globals.playlist[i];
640640
}
641641
if (list === 4) {
642-
listType = this._shared.historyVideos[i];
642+
listType = this.globals.historyVideos[i];
643643
}
644644

645645
if (typeof listType.id.videoId !== 'undefined') {

0 commit comments

Comments
 (0)