2.5.2 - Update to latest version

Author: quead

README.md

@@ -3,12 +3,12 @@
     Demo
   </a>
   <a href="https://habarnam.io/player/home" target="_blank" title="YouTube Player"> 
-    <img alt="Angular YouTube Player Logo" src="https://i.imgur.com/HyLDe9j.jpg" style="height: auto; max-width:100%;" />
+    <img alt="Angular YouTube Player Logo" src="https://i.imgur.com/HPPdUMC.jpg" style="height: auto; max-width:100%;" />
   </a>
 </p>
 
 # About Player
-[![Version](https://img.shields.io/badge/Current%20version-v2.5.1-brightgreen.svg?style=flat)](https://github.com/quead/angular-youtube-player)
+[![Version](https://img.shields.io/badge/Current%20version-v2.5.2-brightgreen.svg?style=flat)](https://github.com/quead/angular-youtube-player)
 
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/quead/angular-youtube-player/master/LICENSE)
 [![GitHub forks](https://img.shields.io/github/forks/quead/angular-youtube-player.svg)](https://github.com/quead/angular-youtube-player/network)
@@ -52,6 +52,11 @@ Check [angular documentation](https://angular.io/cli/build 'angular cli') for ot
 `ng build --prod=true`
 
 ## Changelog
+Angular YouTube Player 2.5.2
+- Add category badge to feed videos and current video
+- UI updates
+- New modal component
+
 Angular YouTube Player 2.5.1
 - Upgrade angular to LTS (from 7 to 8)
 - Fixed repeat mode

angular.json

@@ -21,12 +21,19 @@
               "src/favicon.ico"
             ],
             "styles": [
-              "src/assets/scss/main.scss"
+              "src/assets/scss/main.scss",
+              "./node_modules/ionicons/dist/scss/ionicons.scss"
             ],
             "scripts": []
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -71,7 +78,8 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "src/assets/scss/main.scss"
+              "src/assets/scss/main.scss",
+              "./node_modules/ionicons/dist/scss/ionicons.scss"
             ],
             "assets": [
               "src/assets",

browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-youtube-player",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -12,33 +12,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/build-angular": "^0.802.0",
-    "@angular/cdk": "^7.3.7",
-    "@angular/common": "^8.2.0",
-    "@angular/compiler": "^8.2.0",
-    "@angular/core": "^8.2.0",
-    "@angular/forms": "^8.2.0",
-    "@angular/http": "^7.2.13",
-    "@angular/platform-browser": "^8.2.0",
-    "@angular/platform-browser-dynamic": "^8.2.0",
-    "@angular/router": "^8.2.0",
+    "@angular-devkit/build-angular": "~0.803.14",
+    "@angular/cdk": "^8.2.3",
+    "@angular/common": "^8.2.12",
+    "@angular/compiler": "^8.2.12",
+    "@angular/core": "^8.2.12",
+    "@angular/forms": "^8.2.12",
+    "@angular/platform-browser": "^8.2.12",
+    "@angular/platform-browser-dynamic": "^8.2.12",
+    "@angular/router": "^8.2.12",
     "@ngu/carousel": "^1.5.5",
     "core-js": "^2.5.7",
     "hammerjs": "^2.0.8",
-    "ngx-socket-io": "^2.1.1",
-    "rxjs": "^6.4.0",
+    "ionicons": "^4.6.2",
+    "ngx-socket-io": "^3.0.1",
+    "rxjs": "^6.5.3",
     "rxjs-compat": "^6.4.0",
-    "tslib": "^1.9.0",
-    "zone.js": "^0.9.1"
+    "tslib": "^1.10.0",
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular/cli": "^8.0.1",
-    "@angular/compiler-cli": "~8.2.0",
-    "@angular/language-service": "~8.2.0",
+    "@angular/cli": "^8.3.14",
+    "@angular/compiler-cli": "~8.2.12",
+    "@angular/language-service": "~8.2.12",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
-    "codelyzer": "~4.5.0",
+    "codelyzer": "^5.0.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "^4.0.1",

src/app/app.component.html

@@ -1,4 +1,7 @@
 <header>
+	<div id="github">
+		<a href="https://github.com/quead/angular-youtube-player" target="_blank" title="Angular Youtube Player GitHub" class="github-svg">Angular Youtube Player GitHub</a>
+	</div>
 	<div id="logo">
 		<a routerLink="/category/all" class="logo-svg" title="Homepage"></a>
 		<small>{{globals.regionCode}}</small>
@@ -27,7 +30,7 @@
 				<router-outlet></router-outlet>
 			</div>
 			<div [ngClass]="{'active': notify.defaults.enabled }" class="notif notif-primary">
-				<span class="fa fa-cog fa-spin fa-fw"></span>
+				<span class="icon ion-ios-settings"></span>
 				<p>{{ notify.defaults.message }}</p>
 			</div>
 		</div>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
+import { Component, ElementRef, ViewChild, OnInit, HostListener } from '@angular/core';
 import { SharedService } from './services/shared.service';
 import { NotifyService } from './services/notify.service';
 import { GlobalsService } from './services/globals.service';
@@ -11,13 +11,23 @@ import { PlaylistControlService } from './services/playlist-control.service';
 })
 export class AppComponent implements OnInit {
 	@ViewChild('videoItemIDvalue', { static: true }) videoItemIDvalue: ElementRef;
+	@HostListener('window:scroll', ['$event'])
+	onWindowScroll() {
+		const pos = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight;
+		const max = document.documentElement.scrollHeight;
+		if (pos === max) {
+			console.log('End of page');
+			// To check if is on homepage and implement virtual scroll
+			// this.shared.initFeed('', this.globals.nextPageToken)
+		}
+	}
 
 	constructor(
 		public shared: SharedService,
 		public globals: GlobalsService,
 		public playlistCTRL: PlaylistControlService,
 		public notify: NotifyService
-	) {}
+	) { }
 
 	ngOnInit() {
 		this.globals.videoItemIDvalue = this.videoItemIDvalue;

src/app/app.module.ts

@@ -13,6 +13,7 @@ import {
 	NguCarousel
 } from '@ngu/carousel';
 import { environment } from '../environments/environment';
+import { ShortNumPipe } from './pipes/short-num.pipe';
 
 import { AppComponent } from './app.component';
 import { SessionManagerService } from './services/session-manager.service';
@@ -34,6 +35,10 @@ import { RoomComponent } from './components/room/room.component';
 import { YoutubeIframeComponent } from './components/youtube-iframe/youtube-iframe.component';
 import { ButtonsComponent } from './components/player/buttons/buttons.component';
 import { VideoItemComponent } from './components/player/video-item/video-item.component';
+import { CategoryBadgeComponent } from './components/category/category-badge/category-badge.component';
+
+import { ModalComponent } from './components/modal/modal.component';
+import { ModalService } from './services/modal.service';
 
 const config: SocketIoConfig = { url: environment.serverURL, options: {} };
 
@@ -61,7 +66,10 @@ const config: SocketIoConfig = { url: environment.serverURL, options: {} };
 		RoomComponent,
 		YoutubeIframeComponent,
 		ButtonsComponent,
-		VideoItemComponent
+		VideoItemComponent,
+		CategoryBadgeComponent,
+		ModalComponent,
+		ShortNumPipe
 	],
 	bootstrap: [AppComponent],
 	providers: [
@@ -72,9 +80,12 @@ const config: SocketIoConfig = { url: environment.serverURL, options: {} };
 		PlaylistControlService,
 		SharedService,
 		GlobalsService,
+		ModalService,
+		ModalComponent,
 		NguCarouselConfig,
 		NguCarousel,
-		ButtonsComponent
+		ButtonsComponent,
+		CategoryBadgeComponent
 	]
 })
-export class AppModule {}
+export class AppModule { }

src/app/components/about/about.component.html

@@ -1,8 +1,10 @@
-<div class="app-head">
-    <h2>About</h2>
-</div>
-<div class="app-content">
-    <p>This is a simple youtube web player and desktop player based on angular-cli, socket.io, ngu-carousel, @angular/material.</p>
-    <p>This player is compatible only with Chrome/webkit browsers.</p>
-    <p>The project status is beta.</p>
+<div class="app-container">
+    <div class="app-head">
+        <h2>About</h2>
+    </div>
+    <div>
+        <p>This is a simple youtube web player and desktop player based on angular-cli, socket.io, ngu-carousel, @angular/material.</p>
+        <p>This player is compatible only with Chrome/webkit browsers.</p>
+        <p>The project status is beta.</p>
+    </div>
 </div>

src/app/components/about/about.component.scss

@@ -1,10 +0,0 @@
-app-about {
-	.app-content {
-		background-color: var(--c-dark-gray);
-		padding: 10px 20px;
-		border-radius: 5px;
-		p {
-			margin: 5px 0;
-		}
-	}
-}

src/app/components/category/category-badge/category-badge.component.html

@@ -0,0 +1,7 @@
+<ng-container *ngIf="globals.categories">
+    <div class="badge-container">
+        <ng-container *ngFor="let category of globals.categories">
+            <p *ngIf="category.id === categoryID" class="badge">{{category.title}}</p>
+        </ng-container>
+    </div>
+</ng-container>