2.3.3 - Update to latest changes

Author: quead

.angular-cli.json

@@ -1,19 +1,20 @@
 <p align="center">
-  Check 
-  <a href="https://quead.github.io/demo/" title="YouTube Player Demo">Demo</a> 
-  or
-  <a href="https://youtu.be/KB803dWQM-o/" title="Video Presentation">Video Presentation</a>
-  <img alt="Angular YouTube Player Logo" src="https://i.imgur.com/EKqK4ip.png" style="height: auto; max-width:100%;" />
+  <a href="https://quead.github.io/demo/" target="_blank" title="YouTube Player Demo"> 
+    Demo
+  </a>
+  <a href="https://quead.github.io/demo/" target="_blank" title="YouTube Player"> 
+    <img alt="Angular YouTube Player Logo" src="https://i.imgur.com/THnmBnz.png" style="height: auto; max-width:100%;" />
+  </a>
 </p>
 
 # About Player
-[![Version](https://img.shields.io/badge/Current%20version-v2.3-brightgreen.svg?style=flat)](https://github.com/quead/angular2-yt-player)
+[![Version](https://img.shields.io/badge/Current%20version-v2.3.3-brightgreen.svg?style=flat)](https://github.com/quead/angular2-yt-player)
 
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/quead/angular2-yt-player/master/LICENSE)
 [![GitHub forks](https://img.shields.io/github/forks/quead/angular2-yt-player.svg)](https://github.com/quead/angular2-yt-player/network)
 [![GitHub stars](https://img.shields.io/github/stars/quead/angular2-yt-player.svg)](https://github.com/quead/angular2-yt-player/stargazers)
 
-This is a simple youtube web player and desktop player based on [angular-cli](https://github.com/angular/angular-cli "Angular Cli") 1.7.3, [ngx-youtube-player](https://github.com/orizens/ng2-youtube-player "ngx youtube player") 6.0.0 (used for youtube iFrame API), SCSS (CSS3), HTML5.
+This is a simple youtube web player and desktop player based on [angular-cli](https://github.com/angular/angular-cli "Angular Cli") 7.0.3, [@angular/fire](https://github.com/angular/angularfire2), [ngx-youtube-player](https://github.com/orizens/ng2-youtube-player "ngx youtube player") 6.0.0 (used for youtube iFrame API), SCSS (CSS3), HTML5.
 
 This player is compatible only with Chrome/webkit browsers.
 
@@ -37,6 +38,8 @@ This player is compatible only with Chrome/webkit browsers.
 
 5. Add your youtube api key in settings.json or in the app
 
+6. To make available firebase (for session feature upload/download) update `environments.prod.ts` and `environments.ts`
+
 **For SASS development**
 
 1. Install [Sass](http://sass-lang.com/install "Sass website")
@@ -50,6 +53,13 @@ This player is compatible only with Chrome/webkit browsers.
 4. Edit files from src/assets/scss
 
 ## Changelog
+Angular YouTube Player 2.3.3
+- Fixed bugs after refactoring
+- Added session key for playlist which you can upload to cloud and download from cloud (integrated with firebase)
+- Layout update
+- Updated from angular 5.2.0 to 7.0.1
+- Carousel added for related videos (used [ngu-carousel](https://github.com/sheikalthaf/ngu-carousel))
+
 Angular YouTube Player 2.3
 - Updating to LTS angular
 - Refactoring entire app services and components
@@ -152,15 +162,14 @@ Angular YouTube Player 1.0.0
 ## Future features
 #### Backlog
 - iOS 8+ / android 5+ app **(unversioned)**
-- Change and create theme **(unversioned)**
 
 **Rooms**
 - *Room chat **(unversioned)***
 
 #### Roadmap to 3.0
-- Keep your playlist and settings in cloud **(in v2.4)**
-- Implemented session key to keep playlist in cloud (without account) **(in v2.4)**
-- Integrating ngrx store **(in v2.5)**
+- Responsive layout **(in v2.4)**
+- Sync player between session **(in v2.4)**
+- Keep your settings in cloud **(in v2.8)**
 - Integrating YouTube subscriptions/playlist **(in v2.9)**
 
 **Rooms**

README.md

@@ -0,0 +1,132 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "a2-youtube": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "src/assets/scss/main.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "a2-youtube:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "a2-youtube:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "a2-youtube:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/assets/scss/main.scss"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "a2-youtube-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "a2-youtube:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "a2-youtube",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

angular.json

@@ -1,6 +1,6 @@
 import { AppPage } from './app.po';
 
-describe('angular-youtube-player App', () => {
+describe('workspace-project App', () => {
   let page: AppPage;
 
   beforeEach(() => {
@@ -9,6 +9,6 @@ describe('angular-youtube-player App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!');
+    expect(page.getParagraphText()).toEqual('Welcome to a-youtube-player!');
   });
 });

e2e/app.e2e-spec.ts renamed to e2e/src/app.e2e-spec.ts

@@ -1,8 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "baseUrl": "./",
+    "outDir": "../out-tsc/app",
     "module": "commonjs",
     "target": "es5",
     "types": [
@@ -11,4 +10,4 @@
       "node"
     ]
   }
-}
+}

e2e/app.po.ts renamed to e2e/src/app.po.ts

@@ -4,24 +4,22 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
-      environment: 'dev'
-    },
+    
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,