2.4 - Update to latest version

Author: quead

README.md

@@ -1,26 +1,26 @@
 <p align="center">
-  <a href="https://quead.github.io/demo/" target="_blank" title="YouTube Player Demo"> 
+  <a href="https://habarnam.io/player/home" 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 href="https://habarnam.io/player/home" target="_blank" title="YouTube Player"> 
+    <img alt="Angular YouTube Player Logo" src="https://i.imgur.com/h4x3o5k.jpg" style="height: auto; max-width:100%;" />
   </a>
 </p>
 
 # About Player
-[![Version](https://img.shields.io/badge/Current%20version-v2.3.3-brightgreen.svg?style=flat)](https://github.com/quead/angular2-yt-player)
+[![Version](https://img.shields.io/badge/Current%20version-v2.4-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/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)
+[![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)
+[![GitHub stars](https://img.shields.io/github/stars/quead/angular-youtube-player.svg)](https://github.com/quead/angular-youtube-player/stargazers)
 
-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 is a simple youtube web player based on [angular-cli](https://github.com/angular/angular-cli "Angular Cli"), [ngx-youtube-player](https://github.com/orizens/ng2-youtube-player "ngx youtube player"), [ngx-socket-io](https://github.com/rodgc/ngx-socket-io "ngx socket.io"), [ng2-dragula](https://github.com/valor-software/ng2-dragula "ng2 dragula").
 
 This player is compatible only with Chrome/webkit browsers.
 
 *The project status is beta.*
 
-## Usage
+## How to use
 
 **For Angular and Typescript Development**
 1. Install [NodeJS 8.11.3+](https://nodejs.org/en/download/ "Node JS Download")
@@ -38,7 +38,9 @@ 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`
+6. To connect to your [server](https://github.com/quead/angular-youtube-server "Angular youtube server")
+
+You must change inside **app.modules.ts** your path to your server.
 
 **For SASS development**
 
@@ -53,6 +55,14 @@ This player is compatible only with Chrome/webkit browsers.
 4. Edit files from src/assets/scss
 
 ## Changelog
+Angular YouTube Player 2.4
+- Switched from firebase to json through socket.io and private server
+- Responsive layout
+- Sync player in session
+- Rooms: join/leave room by unique id
+- Playlist is no more auto populated when is empty
+- You can't export/import anymore from .JSON file
+
 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)
@@ -149,7 +159,6 @@ Angular YouTube Player 1.1
 - *Show/hide debugging features*
 - *Show/hide thumbnails in search*
 
-
 Angular YouTube Player 1.0.2
 - Change volume on your video
 - Related videos
@@ -167,17 +176,12 @@ Angular YouTube Player 1.0.0
 - *Room chat **(unversioned)***
 
 #### Roadmap to 3.0
-- 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**
-- *Create room where you can watch videos with others in sync by sharing the room link **(in v2.7)***
 - *Set private/public room **(in v2.7)***
-- *List of public rooms **(in v2.8)***
+- *List of public rooms **(in v2.9)***
 - *Room moderators which can add videos, kick roommates, mute roommates, rename room title and description **(in v2.9)***
 
+#### Roadmap to 4.0
+- Integrating YouTube account subscriptions/playlist **(in v3.0)**
 
 #### Removed features
 - Global hotkeys for application in desktop (play/pause/next/prev, for keyboards with media buttons)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-youtube-player",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -12,45 +12,45 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^7.0.1",
-    "@angular/common": "^7.0.1",
-    "@angular/compiler": "^7.0.1",
-    "@angular/core": "^7.0.1",
-    "@angular/fire": "^5.1.0",
-    "@angular/forms": "^7.0.1",
-    "@angular/http": "^7.0.1",
-    "@angular/platform-browser": "^7.0.1",
-    "@angular/platform-browser-dynamic": "^7.0.1",
-    "@angular/router": "^7.0.1",
-    "@ngu/carousel": "^1.5.4",
+    "@angular/animations": "^7.2.10",
+    "@angular/common": "^7.2.10",
+    "@angular/compiler": "^7.2.10",
+    "@angular/core": "^7.2.10",
+    "@angular/forms": "^7.2.10",
+    "@angular/http": "^7.2.10",
+    "@angular/platform-browser": "^7.2.10",
+    "@angular/platform-browser-dynamic": "^7.2.10",
+    "@angular/router": "^7.2.10",
+    "@ngu/carousel": "^1.5.5",
     "core-js": "^2.5.7",
-    "firebase": "^5.5.5",
     "hammerjs": "^2.0.8",
     "ng2-dragula": "^2.1.0",
+    "ngx-socket-io": "^2.1.1",
     "ngx-youtube-player": "^6.0.0",
-    "rxjs": "^6.3.3",
-    "rxjs-compat": "^6.2.1",
-    "zone.js": "^0.8.26"
+    "rxjs": "^6.4.0",
+    "rxjs-compat": "^6.4.0",
+    "tslib": "^1.9.0",
+    "zone.js": "^0.8.29"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.10.0",
-    "@angular/cli": "~7.0.3",
-    "@angular/compiler-cli": "~7.0.0",
-    "@angular/language-service": "~7.0.0",
-    "@types/node": "~8.9.4",
+    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular/cli": "~7.3.6",
+    "@angular/compiler-cli": "~7.2.10",
+    "@angular/language-service": "~7.2.10",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~3.0.0",
+    "karma": "^4.0.1",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
-    "typescript": "~3.1.1"
+    "typescript": "~3.2.4"
   }
 }

src/app/app.component.html

@@ -21,19 +21,17 @@
 			<app-related></app-related>
 		</div>
 		<div class="col col-3">
+			<app-room></app-room>
 			<app-playlist></app-playlist>
 		</div>
 		<div class="col col-5">
 			<div class="app app-feed">
 				<router-outlet></router-outlet>
 			</div>
-			<div [ngClass]="{'active': shared.notify.enabled }" class="notif notif-primary">
+			<div [ngClass]="{'active': notify.defaults.enabled }" class="notif notif-primary">
 				<span class="fa fa-cog fa-spin fa-fw"></span>
-				<p>{{ shared.notify.message }}</p>
+				<p>{{ notify.defaults.message }}</p>
 			</div>
 		</div>
 	</div>
-	<div id="mobile-unavailable">
-	The app is not ready for mobile/tablet, soon...
-	</div>
 </div>

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
 import { SharedService } from './services/shared.service';
+import { NotifyService } from './services/notify.service';
 import { GlobalsService } from './services/globals.service';
 import { PlaylistControlService } from './services/playlist-control.service';
 
@@ -16,19 +17,11 @@ export class AppComponent implements OnInit {
         public shared: SharedService,
         public globals: GlobalsService,
         public playlistCTRL: PlaylistControlService,
+        public notify: NotifyService
     ) {
-        localStorage.removeItem('firebase:previous_websocket_failure');
     }
 
     ngOnInit() {
         this.globals.videoItemIDvalue = this.videoItemIDvalue;
-        this.shared.preventOldSettings();
-    }
-
-    // ---------------- Update app ----------------
-    setApp() {
-        this.shared.initFeed().then(() => {
-            this.playlistCTRL.fillPlaylist();
-        });
     }
 }

src/app/app.module.ts

@@ -4,7 +4,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AppRoutingModule } from './app.router';
-
+import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
 import { DragulaModule } from 'ng2-dragula';
 import { NguCarouselModule, NguCarouselConfig, NguCarousel } from '@ngu/carousel';
 
@@ -23,25 +23,23 @@ import { PlayerComponent } from './components/player/player.component';
 import { YoutubePlayerModule } from 'ngx-youtube-player';
 import { CategoryComponent } from './components/category/category.component';
 
-// Firebase
-import { AngularFireModule } from '@angular/fire';
-import { AngularFireDatabase } from '@angular/fire/database';
-
-import { environment } from '../environments/environment';
 import { PlaylistComponent } from './components/playlist/playlist.component';
 import { RelatedComponent } from './components/related/related.component';
+import { RoomComponent } from './components/room/room.component';
+
+const config: SocketIoConfig = { url: 'https://habarnam.io:8888/', options: {} };
 
 @NgModule({
   imports: [
-    AngularFireModule.initializeApp(environment.firebase, 'angular-yt-player-quead'),
     BrowserModule,
     HttpClientModule,
     ReactiveFormsModule,
     YoutubePlayerModule,
     FormsModule,
     DragulaModule.forRoot(),
     NguCarouselModule,
-    AppRoutingModule
+    AppRoutingModule,
+    SocketIoModule.forRoot(config)
   ],
   declarations: [
     AppComponent,
@@ -52,7 +50,8 @@ import { RelatedComponent } from './components/related/related.component';
     CategoryComponent,
     PlayerComponent,
     PlaylistComponent,
-    RelatedComponent
+    RelatedComponent,
+    RoomComponent
   ],
   bootstrap: [ AppComponent ],
   providers: [
@@ -63,7 +62,6 @@ import { RelatedComponent } from './components/related/related.component';
     PlaylistControlService,
     SharedService,
     GlobalsService,
-    AngularFireDatabase,
     NguCarouselConfig,
     NguCarousel
   ]

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

@@ -13,7 +13,7 @@ <h2>Trending</h2>
   </div>
   <div class="feed-video-list video-list" [ngClass]="{'grid-list': !globals.listGrid }">
     <ng-container *ngIf="loading">
-        <div *ngFor="let i of [1,2,3,4,5,6,8,9,10]" class="loading-feed-list loading-anim"></div>
+        <div *ngFor="let i of [0,1,2,3,4,5,6,8,9,10]" class="loading-feed-list loading-anim"></div>
     </ng-container>
     <ng-container *ngIf="!loading">
       <div *ngFor="let feedVideo of globals.feedVideos; let i = index" [ngClass]="{'hidden-thumbnails': !globals.thumbnails }" [attr.data-index]="i" class="video-item">
@@ -29,17 +29,22 @@ <h2>Trending</h2>
             </div>
           </div>
         </div>
-        <div class="video-item-settings">
-            <button class="video-item-play" (click)="onClickVideo(i, 0)">
-              <span class="fa fa-play"></span>
-            </button>
-            <button class="video-item-play" (click)="shared.onCopyVideoItemLink(i, 0)">
+        <div class="video-item-settings" *ngIf="!globals.isTempSessionActive">
+          <button class="video-item-play" (click)="onClickVideo(i, 0)">
+            <span class="fa fa-play"></span>
+          </button>
+          <button class="video-item-play" (click)="shared.onCopyVideoItemLink(i, 0)">
+            <span class="fa fa-share-alt"></span>
+          </button>
+          <button class="video-item-add" (click)="playlist.addPlaylistItem(i, 0)">
+            <span class="fa fa-plus"></span>
+          </button>
+        </div>
+        <div class="video-item-settings" *ngIf="globals.isTempSessionActive">
+          <button class="video-item-play" (click)="shared.onCopyVideoItemLink(i, 0)">
               <span class="fa fa-share-alt"></span>
             </button>
-            <button class="video-item-add" (click)="playlist.addPlaylistItem(i, 0)">
-              <span class="fa fa-plus"></span>
-            </button>
-          </div>
+        </div>
       </div>
     </ng-container>
   </div>

src/app/components/category/category.component.ts

@@ -39,11 +39,7 @@ export class CategoryComponent implements OnInit {
         this.globals.currentCategory = category;
         this.getCategories();
     } else {
-        this.globals.currentCategory = 'all';
-        this.globals.feedVideos = null;
-        this.shared.initFeed().then(() => {
-            this.loading = false;
-        });
+        this.resetCategories();
     }
   }