2.5.1 - Update to latest version

Author: quead

README.md

@@ -8,7 +8,7 @@
 </p>
 
 # About Player
-[![Version](https://img.shields.io/badge/Current%20version-v2.5-brightgreen.svg?style=flat)](https://github.com/quead/angular-youtube-player)
+[![Version](https://img.shields.io/badge/Current%20version-v2.5.1-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)
@@ -23,7 +23,7 @@ This player is compatible only with Chrome/webkit browsers.
 ## How to use
 
 **For development**
-1. Install [NodeJS 8.11.3+](https://nodejs.org/en/download/ "Node JS Download")
+1. Install [NodeJS 10.16.0+](https://nodejs.org/en/download/ "Node JS Download")
 
 2. Download/clone repository then install the player by
 
@@ -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.1
+- Upgrade angular to LTS (from 7 to 8)
+- Fixed repeat mode
+- Update layout for playlist / related videos
+
 Angular YouTube Player 2.5
 - Cleaned the project to avoid using a lot of dependencies
 - Fix the issue when you change the region didn't updated the player

angular.json

@@ -119,7 +119,7 @@
       }
     }
   },
-  "defaultProject": "a2-youtube",
+  "defaultProject": "angular-youtube-player",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-youtube-player",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -12,29 +12,29 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-devkit/build-angular": "^0.802.0",
     "@angular/cdk": "^7.3.7",
-    "@angular/common": "^7.2.13",
-    "@angular/compiler": "^7.2.13",
-    "@angular/core": "^7.2.13",
-    "@angular/forms": "^7.2.13",
+    "@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": "^7.2.13",
-    "@angular/platform-browser-dynamic": "^7.2.13",
-    "@angular/router": "^7.2.13",
+    "@angular/platform-browser": "^8.2.0",
+    "@angular/platform-browser-dynamic": "^8.2.0",
+    "@angular/router": "^8.2.0",
     "@ngu/carousel": "^1.5.5",
     "core-js": "^2.5.7",
     "hammerjs": "^2.0.8",
     "ngx-socket-io": "^2.1.1",
     "rxjs": "^6.4.0",
     "rxjs-compat": "^6.4.0",
     "tslib": "^1.9.0",
-    "zone.js": "^0.8.29"
+    "zone.js": "^0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.8",
-    "@angular/cli": "~7.3.8",
-    "@angular/compiler-cli": "~7.2.13",
-    "@angular/language-service": "~7.2.13",
+    "@angular/cli": "^8.0.1",
+    "@angular/compiler-cli": "~8.2.0",
+    "@angular/language-service": "~8.2.0",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
@@ -49,6 +49,6 @@
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
-    "typescript": "~3.2.4"
+    "typescript": "~3.5.3"
   }
 }

src/app/app.component.ts

@@ -10,7 +10,7 @@ import { PlaylistControlService } from './services/playlist-control.service';
 	providers: [PlaylistControlService]
 })
 export class AppComponent implements OnInit {
-	@ViewChild('videoItemIDvalue') videoItemIDvalue: ElementRef;
+	@ViewChild('videoItemIDvalue', { static: true }) videoItemIDvalue: ElementRef;
 
 	constructor(
 		public shared: SharedService,

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

@@ -1,4 +1,4 @@
-<div class="app-content">
+<div class="app-content app-container">
   <div class="video-item-head">
     <h2>Trending</h2>
     <div class="categories" *ngIf="globals.categories">

src/app/components/player/buttons/buttons.component.ts

@@ -43,6 +43,7 @@ export class ButtonsComponent implements OnInit {
 				}
 			});
 		}
+		this.globals.searchOverlay = false;
 	}
 
 	onClickVideo(i: number, list: number) {
@@ -53,6 +54,7 @@ export class ButtonsComponent implements OnInit {
 		} else {
 			this.getVideo(this.shared.getVideoFromList(i, list));
 		}
+		this.globals.searchOverlay = false;
 	}
 
 	getVideo(data: VideoModel) {

src/app/components/player/player.component.ts

@@ -71,11 +71,8 @@ export class PlayerComponent implements OnInit {
 	}
 
 	changeState(event: any) {
-		if (event.data) {
-			this.globals.currentState = event.data;
-		} else if (isNaN(event)) {
-			this.globals.currentState = event;
-		}
+		this.globals.currentState = event.data;
+
 		this.videoMaxRange = this.globals.player.getDuration();
 		this.videoCurVolume = this.globals.player.getVolume();
 

src/app/components/player/video-item/video-item.component.scss

@@ -68,7 +68,7 @@
 		justify-content: center;
 		transition: all 0.1s ease-in-out;
 		> button {
-			background-color: var(--c-dark-gray);
+			background-color: var(--c-black);
 			color: inherit;
 			height: 30px;
 			width: 30px;

src/app/components/playlist/playlist.component.html

@@ -1,4 +1,4 @@
-<div id="playlist-video-list" class="video-list">
+<div id="playlist-video-list" class="video-list app-container">
   <div class="video-item-head">
     <h2>Current playlist</h2>
     <button type="button" class="btn btn-small btn-warning" (click)="confirmClear()"

src/app/components/playlist/playlist.component.ts

@@ -12,7 +12,7 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 	styleUrls: ['./playlist.component.scss']
 })
 export class PlaylistComponent implements OnInit {
-	@ViewChild('playlistContainer') private myScrollContainer: ElementRef;
+	@ViewChild('playlistContainer', { static: true }) private myScrollContainer: ElementRef;
 
 	tempPlaylist: Array<VideoModel> = [];