Skip to content

Commit dd650c3

Browse files
queadquead
committed
2.3 - Refactoring entire app services/components
1 parent 7e45e05 commit dd650c3

25 files changed

+296
-528
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ This player is compatible only with Chrome/webkit browsers.
5353
## Changelog
5454
Angular YouTube Player 2.3
5555
- Updating to LTS angular
56-
- Fixed player issues
56+
- Refactoring entire app services and components
57+
- Improved speed performance and fixed major bugs
5758
- Implemented login with google account
5859
- Keep your playlist and settings in cloud
5960
- New way to loading the app

‎src/app/app.component.html

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,19 @@ <h1><span class="favicon-app"></span>YouTube Player v2.0</h1>
2323
<button type="button" class="trigger-nav" (click)="openMobileMenu()"><span class="fa fa-navicon"></span>Menu</button>
2424
<div id="logo">
2525
<a routerLink="" class="logo-svg-small" title="Homepage"></a>
26-
<small *ngIf="regionCode">{{ regionCode }}</small>
26+
<small *ngIf="globals.regionCode">{{ globals.regionCode }}</small>
2727
</div>
2828
</div>
2929
</header>
30-
<div id="app-container" [ngClass]="{'light-mode': !darkMode, 'menu-active': menuActive }">
30+
<div id="app-container" [ngClass]="{'light-mode': !globals.darkMode, 'menu-active': menuActive }">
3131
<input type="text" class="hide-input" #videoItemIDvalue />
3232
<div class="container">
3333
<div class="col col-1">
3434
<div class="app app-services">
3535
<div class="app-head">
3636
<div id="logo">
3737
<a routerLink="/category/all" class="logo-svg" title="Homepage"></a>
38-
<small *ngIf="regionCode">{{ regionCode }}</small>
38+
<small *ngIf="globals.regionCode">{{ globals.regionCode }}</small>
3939
</div>
4040
</div>
4141
<div class="app-content">
@@ -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]='globals.playlist' #playlistContainer>
57-
<ng-container *ngIf="globals.playlist.length === 0">
56+
<div class="playlist-video-content" [dragula]='"playlistDrag"' [dragulaModel]='globals.playlistVideos' #playlistContainer>
57+
<ng-container *ngIf="globals.playlistVideos.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 globals.playlist; let i = index" [ngClass]="currentPlaylistItem === i ? 'active' : ''" [attr.data-index]="i" class="video-item">
65+
<div *ngFor="let playlistVideo of globals.playlistVideos; let i = index" [ngClass]="currentPlaylistItem === i ? 'active' : ''" [attr.data-index]="i" class="video-item">
6666
<div class="video-item-info">
67-
<div *ngIf="globals.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.thumbnails.default +')'}"></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>
@@ -75,8 +75,8 @@ <h1><span class="favicon-app"></span>YouTube Player v2.0</h1>
7575
<ng-container *ngIf="currentPlaylistItem === i && currentState === -1">
7676
<p class="video-item-hint"><span class="fa fa-stop"></span>Not started</p>
7777
</ng-container>
78-
<p class="video-item-title">{{ playlistVideo.snippet.title }}</p>
79-
<p class="video-item-autor">by <span>{{ playlistVideo.snippet.channelTitle }}</span></p>
78+
<p class="video-item-title">{{ playlistVideo.title }}</p>
79+
<p class="video-item-autor">by <span>{{ playlistVideo.channelTitle }}</span></p>
8080
</div>
8181
</div>
8282
<div class="video-item-settings">
@@ -104,18 +104,18 @@ <h2>Player</h2>
104104
<p (click)="addPlaylistItem(0, 3)"><span class="fa fa-plus"></span>Add to playlist</p>
105105
</div>
106106
</div>
107-
<div *ngIf="!currentVideo.id" class="app-content">
107+
<div *ngIf="!globals.currentVideo" class="app-content">
108108
<div class="youtube-player active loading-featured"></div>
109109
</div>
110110
<div class="app-content">
111-
<div class="youtube-player" *ngIf="currentVideo.id" [ngClass]="{'active': displayVideoPlayer }">
112-
<youtube-player [videoId]="currentVideo.id" (ready)="savePlayer($event)" (change)="onStateChange($event)" [playerVars]="playerVars()"></youtube-player>
111+
<div class="youtube-player" *ngIf="globals.currentVideo" [ngClass]="{'active': globals.displayVideoPlayer }">
112+
<youtube-player [videoId]="globals.currentVideo.id" (ready)="savePlayer($event)" (change)="onStateChange($event)" [playerVars]="playerVars()"></youtube-player>
113113
</div>
114-
<div class="current-video-all" *ngIf="currentVideo.id">
114+
<div class="current-video-all" *ngIf="globals.currentVideo">
115115
<div class="current-video-details">
116-
<p class="current-video-name">{{ currentVideo.title }}</p>
116+
<p class="current-video-name">{{ globals.currentVideo.title }}</p>
117117
</div>
118-
<div *ngIf="!displayVideoPlayer" id="player-controls">
118+
<div *ngIf="!globals.displayVideoPlayer" id="player-controls">
119119
<div class="player-buttons">
120120
<button id="previous-song" (click)="playPlaylistItem('prev', currentPlaylistItem)"><span class="fa fa-backward"></span></button>
121121
<button id="play-song" (click)="playPauseVideo()" ><span class="fa" [ngClass]="currentState === 1 ? 'fa-pause' : 'fa-play' "></span></button>
@@ -138,16 +138,16 @@ <h2>Player</h2>
138138
</div>
139139
</div>
140140
<div class="current-video-stats">
141-
<p class="stats-views">{{ currentVideo.stats.views | number:'1.0' }} Views</p>
142-
<p class="stats-likes"><span class="fa fa-thumbs-up"></span> {{ currentVideo.stats.likes | number:'1.0' }}</p>
143-
<p class="stats-dislikes"><span class="fa fa-thumbs-down"></span> {{ currentVideo.stats.dislikes | number:'1.0' }}</p>
141+
<p class="stats-views">{{ globals.currentVideo.stats.views | number:'1.0' }} Views</p>
142+
<p class="stats-likes"><span class="fa fa-thumbs-up"></span> {{ globals.currentVideo.stats.likes | number:'1.0' }}</p>
143+
<p class="stats-dislikes"><span class="fa fa-thumbs-down"></span> {{ globals.currentVideo.stats.dislikes | number:'1.0' }}</p>
144144
</div>
145145
<div class="current-video-share">
146146
<label for="shareInput">Share link</label>
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="globals.relatedVideos" id="related-video-list" class="video-list" [ngClass]="{'activePlayer': displayVideoPlayer }">
150+
<div id="related-video-list" class="video-list" [ngClass]="{'activePlayer': globals.displayVideoPlayer }">
151151
<div class="video-item-head">
152152
Similar videos
153153
</div>
@@ -160,26 +160,28 @@ <h2>Player</h2>
160160
</div>
161161
</div>
162162
</ng-container>
163-
<div *ngFor="let relatedVideo of globals.relatedVideos; let i = index" [attr.data-index]="i" class="video-item">
164-
<div class="video-item-info">
165-
<div *ngIf="globals.thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + relatedVideo.snippet.thumbnails.default.url +')'}"></div>
166-
<div class="video-item-content">
167-
<p class="video-item-title">{{ relatedVideo.snippet.title }}</p>
168-
<p class="video-item-autor">by <span>{{ relatedVideo.snippet.channelTitle }}</span></p>
163+
<ng-container *ngIf="globals.relatedVideos">
164+
<div *ngFor="let relatedVideo of globals.relatedVideos; let i = index" [attr.data-index]="i" class="video-item">
165+
<div class="video-item-info">
166+
<div *ngIf="globals.thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + relatedVideo.thumbnails.default +')'}"></div>
167+
<div class="video-item-content">
168+
<p class="video-item-title">{{ relatedVideo.title }}</p>
169+
<p class="video-item-autor">by <span>{{ relatedVideo.channelTitle }}</span></p>
170+
</div>
171+
</div>
172+
<div class="video-item-settings">
173+
<button class="video-item-play" (click)="onClickRelated($event, i)">
174+
<span class="fa fa-play"></span>
175+
</button>
176+
<button class="video-item-share" (click)="onCopyVideoItemLink(i, 2)">
177+
<span class="fa fa-share-alt"></span>
178+
</button>
179+
<button class="video-item-add" (click)="addPlaylistItem(i, 2)">
180+
<span class="fa fa-plus"></span>
181+
</button>
169182
</div>
170183
</div>
171-
<div class="video-item-settings">
172-
<button class="video-item-play" (click)="onClickRelated($event, i)">
173-
<span class="fa fa-play"></span>
174-
</button>
175-
<button class="video-item-share" (click)="onCopyVideoItemLink(i, 2)">
176-
<span class="fa fa-share-alt"></span>
177-
</button>
178-
<button class="video-item-add" (click)="addPlaylistItem(i, 2)">
179-
<span class="fa fa-plus"></span>
180-
</button>
181-
</div>
182-
</div>
184+
</ng-container>
183185
</div>
184186
</div>
185187
</div>
@@ -189,9 +191,9 @@ <h2>Player</h2>
189191
<div class="app app-feed">
190192
<router-outlet></router-outlet>
191193
</div>
192-
<div [ngClass]="{'active': _shared.notify.enabled }" class="notif notif-primary">
194+
<div [ngClass]="{'active': shared.notify.enabled }" class="notif notif-primary">
193195
<span class="fa fa-cog fa-spin fa-fw"></span>
194-
<p>{{ _shared.notify.message }}</p>
196+
<p>{{ shared.notify.message }}</p>
195197
</div>
196198
</div>
197199
</div>
@@ -200,8 +202,8 @@ <h2>Player</h2>
200202
<div *ngIf="modalPlaylist" class="modal-container">
201203
<h2>Do you want to remove this item from playlist?</h2>
202204
<div class="modal-content">
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>
205+
<img *ngIf="globals.thumbnails" src="{{ globals.playlistVideos[modalPlaylistItem].thumbnails.medium }}" alt="{{ globals.playlistVideos[modalPlaylistItem].title }}" />
206+
<p>{{ globals.playlistVideos[modalPlaylistItem].title }}</p>
205207
</div>
206208
<button class="modal-close" (click)="closeModal()">
207209
<span class="fa fa-times"></span>
@@ -224,7 +226,7 @@ <h3>Import Playlist</h3>
224226
<button type="button" class="btn btn-round btn-primary" (click)="importPlaylist(importPlaylistInput)">Replace</button>
225227
</div>
226228
<h3>Export Playlist</h3>
227-
<p>Number of videos to export: {{globals.playlist.length}}</p>
229+
<p>Number of videos to export: {{globals.playlistVideos.length}}</p>
228230
</div>
229231
<button class="modal-close" (click)="closeModal()">
230232
<span class="fa fa-times"></span>

0 commit comments

Comments
 (0)