Skip to content

Commit 2c3d2f0

Browse files
queadquead
committed
2.3 - Sync the loading for app component and updating the localstorage vars
1 parent eb74bdb commit 2c3d2f0

File tree

4 files changed

+38
-34
lines changed

4 files changed

+38
-34
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@ Angular YouTube Player 1.0.0
174174
- Global hotkeys for application in desktop (play/pause/next/prev, for keyboards with media buttons)
175175
- Adding support for NW.js to export the app for desktop compatible: Windows x64, Linux x64
176176
- Auto updating the app (desktop version)
177+
- Temporary removed theme function
177178

178179
## Copyright and License
179180
Copyright [quead](https://github.com/quead) under the [MIT license](LICENSE).

‎src/app/app.component.html

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -54,43 +54,45 @@ <h1><span class="favicon-app"></span>YouTube Player v2.0</h1>
5454
<button type="button" class="video-item-head-btn" (click)="exportPlaylist()"><span class="fa fa-cog"></span>manage</button>
5555
</div>
5656
<div class="playlist-video-content" [dragula]='"playlistDrag"' [dragulaModel]='globals.playlistVideos' #playlistContainer>
57-
<ng-container *ngIf="globals.playlistVideos.length === 0">
57+
<ng-container *ngIf="loading">
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 globals.playlistVideos; let i = index" [ngClass]="currentPlaylistItem === i ? 'active' : ''" [attr.data-index]="i" class="video-item">
66-
<div class="video-item-info">
67-
<div *ngIf="globals.thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + playlistVideo.thumbnails.default +')'}"></div>
68-
<div class="video-item-content">
69-
<ng-container *ngIf="currentPlaylistItem === i && currentState === 1">
70-
<p class="video-item-hint"><span class="fa fa-play"></span>Playing</p>
71-
</ng-container>
72-
<ng-container *ngIf="currentPlaylistItem === i && currentState !== 1 && currentState !== -1">
73-
<p class="video-item-hint"><span class="fa fa-pause"></span>Paused</p>
74-
</ng-container>
75-
<ng-container *ngIf="currentPlaylistItem === i && currentState === -1">
76-
<p class="video-item-hint"><span class="fa fa-stop"></span>Not started</p>
77-
</ng-container>
78-
<p class="video-item-title">{{ playlistVideo.title }}</p>
79-
<p class="video-item-autor">by <span>{{ playlistVideo.channelTitle }}</span></p>
65+
<ng-container *ngIf="!loading">
66+
<div *ngFor="let playlistVideo of globals.playlistVideos; let i = index" [ngClass]="currentPlaylistItem === i ? 'active' : ''" [attr.data-index]="i" class="video-item">
67+
<div class="video-item-info">
68+
<div *ngIf="globals.thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + playlistVideo.thumbnails.default +')'}"></div>
69+
<div class="video-item-content">
70+
<ng-container *ngIf="currentPlaylistItem === i && currentState === 1">
71+
<p class="video-item-hint"><span class="fa fa-play"></span>Playing</p>
72+
</ng-container>
73+
<ng-container *ngIf="currentPlaylistItem === i && currentState !== 1 && currentState !== -1">
74+
<p class="video-item-hint"><span class="fa fa-pause"></span>Paused</p>
75+
</ng-container>
76+
<ng-container *ngIf="currentPlaylistItem === i && currentState === -1">
77+
<p class="video-item-hint"><span class="fa fa-stop"></span>Not started</p>
78+
</ng-container>
79+
<p class="video-item-title">{{ playlistVideo.title }}</p>
80+
<p class="video-item-autor">by <span>{{ playlistVideo.channelTitle }}</span></p>
81+
</div>
82+
</div>
83+
<div class="video-item-settings">
84+
<button class="video-item-play" (click)="onClickPlaylist($event, i)">
85+
<span class="fa " [ngClass]="currentPlaylistItem === i && currentState === 1 ? 'fa-pause' : 'fa-play'"></span>
86+
</button>
87+
<button class="video-item-share" (click)="onCopyVideoItemLink(i, 3)">
88+
<span class="fa fa-share-alt"></span>
89+
</button>
90+
<button class="video-item-remove" (click)="showPlaylistModal(i)">
91+
<span class="fa fa-times"></span>
92+
</button>
8093
</div>
8194
</div>
82-
<div class="video-item-settings">
83-
<button class="video-item-play" (click)="onClickPlaylist($event, i)">
84-
<span class="fa " [ngClass]="currentPlaylistItem === i && currentState === 1 ? 'fa-pause' : 'fa-play'"></span>
85-
</button>
86-
<button class="video-item-share" (click)="onCopyVideoItemLink(i, 3)">
87-
<span class="fa fa-share-alt"></span>
88-
</button>
89-
<button class="video-item-remove" (click)="showPlaylistModal(i)">
90-
<span class="fa fa-times"></span>
91-
</button>
92-
</div>
93-
</div>
95+
</ng-container>
9496
</div>
9597
</div>
9698
</div>
@@ -104,11 +106,11 @@ <h2>Player</h2>
104106
<p (click)="addPlaylistItem(0, 3)"><span class="fa fa-plus"></span>Add to playlist</p>
105107
</div>
106108
</div>
107-
<div *ngIf="!globals.currentVideo" class="app-content">
109+
<div *ngIf="loading" class="app-content">
108110
<div class="youtube-player active loading-featured"></div>
109111
</div>
110112
<div class="app-content">
111-
<div class="youtube-player" *ngIf="globals.currentVideo" [ngClass]="{'active': globals.displayVideoPlayer }">
113+
<div class="youtube-player" *ngIf="!loading" [ngClass]="{'active': globals.displayVideoPlayer }">
112114
<youtube-player [videoId]="globals.currentVideo.id" (ready)="savePlayer($event)" (change)="onStateChange($event)" [playerVars]="playerVars()"></youtube-player>
113115
</div>
114116
<div class="current-video-all" *ngIf="globals.currentVideo">
@@ -152,15 +154,15 @@ <h2>Player</h2>
152154
Similar videos
153155
</div>
154156
<div class="related-video-content">
155-
<ng-container *ngIf="globals.relatedVideos.length === 0">
157+
<ng-container *ngIf="loading">
156158
<div *ngFor="let i of [1,2,3,4]" class="video-item">
157159
<div class="video-item-info">
158160
<div class="video-item-image loading-featured"></div>
159161
<div class="video-item-content loading-featured"></div>
160162
</div>
161163
</div>
162164
</ng-container>
163-
<ng-container *ngIf="globals.relatedVideos">
165+
<ng-container *ngIf="!loading">
164166
<div *ngFor="let relatedVideo of globals.relatedVideos; let i = index" [attr.data-index]="i" class="video-item">
165167
<div class="video-item-info">
166168
<div *ngIf="globals.thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + relatedVideo.thumbnails.default +')'}"></div>

‎src/app/app.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -364,7 +364,7 @@ export class AppComponent implements OnInit {
364364
}
365365

366366
preventOldSettings() {
367-
if (localStorage.length === 1 || !localStorage.getItem('version')) {
367+
if (localStorage.length === 1 || !localStorage.getItem('version') || localStorage.getItem('version') == '1') {
368368
console.log('Updating localstorage...');
369369
localStorage.clear();
370370
this.globals.settings = null;
@@ -427,6 +427,7 @@ export class AppComponent implements OnInit {
427427
this.playlistInit();
428428
this.playlistPrefill = false;
429429
}
430+
this.loading = false;
430431
}
431432

432433
// ---------------- Player controls ----------------

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export class SharedService {
9595

9696
setLocalVersion() {
9797
if (localStorage.getItem('version') === null) {
98-
localStorage.setItem('version', '1');
98+
localStorage.setItem('version', '2');
9999
}
100100
}
101101

0 commit comments

Comments
 (0)