2.6.0 - 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/HPPdUMC.jpg" style="height: auto; max-width:100%;" />
+    <img alt="Angular YouTube Player Logo" src="https://i.imgur.com/rcuE2Ao.png" style="height: auto; max-width:100%;" />
   </a>
 </p>
 
 # About Player
-[![Version](https://img.shields.io/badge/Current%20version-v2.5.2-brightgreen.svg?style=flat)](https://github.com/quead/angular-youtube-player)
+[![Version](https://img.shields.io/badge/Current%20version-v2.6.0-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)
@@ -18,7 +18,7 @@ This is a simple youtube web player based on [angular-cli](https://github.com/an
 
 This player is compatible only with Chrome/webkit browsers.
 
-*The project status is beta.*
+*The project status is RC (release candidate).*
 
 ## How to use
 
@@ -31,15 +31,15 @@ This player is compatible only with Chrome/webkit browsers.
 
 3. Add your youtube api key in **src/app/environments/settings.ts** or inside the app on settings page (when is running)
 
-4. To connect to your [server](https://github.com/quead/angular-youtube-server "Angular youtube server")
+4. Start your [server](https://github.com/quead/angular-youtube-server "Angular youtube server")
 
-You must change inside **src/app/environments/environment.ts** your path to your server.
+`npm install && npm start` in root folder
 
-6. Connect to your [server](https://github.com/quead/angular-youtube-server "Angular youtube server")
+5. Connect to your [server](https://github.com/quead/angular-youtube-server "Angular youtube server")
 
-`npm start` in root folder
+You must change inside **src/app/environments/environment.ts** your path to your server.
 
-**For building the app**
+**To build the app**
 
 1. Install [angular-cli 7.3.7+](https://github.com/angular/angular-cli "Angular Cli")
 
@@ -52,6 +52,12 @@ Check [angular documentation](https://angular.io/cli/build 'angular cli') for ot
 `ng build --prod=true`
 
 ## Changelog
+Angular YouTube Player 2.6.0
+- List of guests in the session
+- Minor issues fixed (RC)
+- Add mini player when you scroll
+- First video from playlist is now the current video
+
 Angular YouTube Player 2.5.2
 - Add category badge to feed videos and current video
 - UI updates
@@ -189,9 +195,9 @@ Angular YouTube Player 1.0.0
 - *Room chat **(unversioned)***
 
 #### Roadmap to 3.0
-- *List of users joined in the session **(in v2.6)***
+- *Release a stable version **(in v2.6.9)***
 - *Set private/public room **(in v2.7)***
-- *List of public rooms **(in v2.9)***
+- *List of public rooms **(in v2.8)***
 - *Room moderators which can add videos, kick roommates, mute roommates **(in v2.9)***
 
 #### Roadmap to 4.0
@@ -201,7 +207,7 @@ Angular YouTube Player 1.0.0
 - Global hotkeys for application in desktop (play/pause/next/prev, for keyboards with media buttons)
 - Adding support for NW.js to export the app for desktop compatible: Windows x64, Linux x64
 - Auto updating the app (desktop version)
-- Temporary removed theme function
+- Themes temporary removed 
 
 ## Copyright and License
 Copyright [quead](https://github.com/quead) under the [MIT license](LICENSE).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-youtube-player",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

src/app/app.component.html

@@ -35,4 +35,5 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div>
+<app-player-mini></app-player-mini>

src/app/app.module.ts

@@ -34,11 +34,15 @@ import { RelatedComponent } from './components/related/related.component';
 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 { VideoItemComponent } from './components/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';
+import { VideoItemEnhancedComponent } from './components/video-item/video-item-enhanced/video-item-enhanced.component';
+import { VideoItemGridComponent } from './components/video-item/video-item-grid/video-item-grid.component';
+import { VideoItemListComponent } from './components/video-item/video-item-list/video-item-list.component';
+import { PlayerMiniComponent } from './components/player-mini/player-mini.component';
 
 const config: SocketIoConfig = { url: environment.serverURL, options: {} };
 
@@ -69,7 +73,11 @@ const config: SocketIoConfig = { url: environment.serverURL, options: {} };
 		VideoItemComponent,
 		CategoryBadgeComponent,
 		ModalComponent,
-		ShortNumPipe
+		ShortNumPipe,
+		VideoItemEnhancedComponent,
+		VideoItemGridComponent,
+		VideoItemListComponent,
+		PlayerMiniComponent
 	],
 	bootstrap: [AppComponent],
 	providers: [

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

@@ -5,6 +5,6 @@ <h2>About</h2>
     <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>
+        <p>The project status is RC (release candidate).</p>
     </div>
-</div>
+</div>

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

@@ -1,9 +1,9 @@
 .badge {
-    background-color: rgba(#ffffff, 0.1);
-    color: var(--c-white);
+    background-color: rgba(var(--c-white), 0.1);
+    color: rgb(var(--c-white));
     padding: 2px 5px;
     margin: 0;
-    font-size: 12px;
+    font-size: var(--font-small);
     border-radius: 3px;
     text-transform: uppercase;
 

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

@@ -1,42 +1,34 @@
-<div class="app-content app-container">
-    <div class="video-item-head">
+<div class="app-container">
+    <div class="app-head">
         <h2>Trending</h2>
         <div class="categories" *ngIf="globals.categories">
             <label for="select-category"><span class="icon ion-ios-arrow-down"></span></label>
             <select id="select-category" [ngModel]="globals.currentCategory" (change)="categoryChanged($event)">
                 <option value="all">General</option>
                 <ng-container *ngFor="let category of globals.categories">
-                    <option *ngIf="category.assignable && globals.categoriesBlocked.indexOf(category.id) === -1" [value]="category.id">{{category.title}}</option>
+                    <option *ngIf="category.assignable && globals.categoriesBlocked.indexOf(category.id) === -1"
+                        [value]="category.id">{{category.title}}</option>
                 </ng-container>
             </select>
         </div>
     </div>
-    <div class="feed-video-list video-list" [ngClass]="{'grid-list': !globals.listGrid }">
-        <ng-container *ngIf="globals.isFeedLoading">
+    <div [ngClass]="!globals.listGrid ? 'video-grid' : 'video-list'">
+        <ng-container *ngIf="globals.loadingState.feed">
             <div *ngFor="let i of [0,1,2,3,4,5,6,8,9]" class="loading-feed-list loading-anim"></div>
         </ng-container>
-        <ng-container *ngIf="!globals.isFeedLoading">
-            <div *ngFor="let feedVideo of globals.feedVideos; let i = index"
-                [ngClass]="{'hidden-thumbnails': !globals.thumbnails }" [attr.data-index]="i" class="video-item">
-                <div class="video-item-info">
-                    <div *ngIf="globals.thumbnails" class="video-item-image"
-                        [ngStyle]="{'background-image': 'url(' + feedVideo.thumbnails.medium +')'}"></div>
-                    <div class="video-item-content">
-                        <app-category-badge [categoryID]="feedVideo.categoryId"></app-category-badge>
-                        <p class="video-item-title">{{feedVideo.title}}</p>
-                        <p class="video-item-autor">{{feedVideo.channelTitle}}</p>
-                        <div class="video-item-details" *ngIf="feedVideo.id?.length > 0">
-                            <p class="stats-views"><span class="icon ion-ios-play-circle"></span>
-                                {{feedVideo.stats.views | shortNum}}</p>
-                            <p class="stats-likes"><span class="icon ion-ios-thumbs-up"></span>
-                                {{feedVideo.stats.likes | shortNum}}</p>
-                            <p class="stats-dislikes"><span class="icon ion-ios-thumbs-down"></span>
-                                {{feedVideo.stats.dislikes | shortNum}}</p>
-                        </div>
-                    </div>
+        <ng-container *ngIf="!globals.loadingState.feed">
+            <ng-container *ngIf="!globals.listGrid">
+                <div *ngFor="let feedVideo of globals.feedVideos; let i = index" class="video">
+                    <app-video-item [videoIndex]="i" [videoItem]="feedVideo" [listID]="0" videoType="enhanced">
+                    </app-video-item>
                 </div>
-                <app-buttons [videoIndex]="i" [listID]="0"></app-buttons>
-            </div>
+            </ng-container>
+            <ng-container *ngIf="globals.listGrid">
+                <div *ngFor="let feedVideo of globals.feedVideos; let i = index" class="video">
+                    <app-video-item [videoIndex]="i" [videoItem]="feedVideo" [listID]="0" videoType="list">
+                    </app-video-item>
+                </div>
+            </ng-container>
         </ng-container>
     </div>
 </div>

src/app/components/category/category.component.scss

@@ -1,91 +1,3 @@
-.feed-video-list {
-	top: inherit;
-	bottom: 0;
-	width: 100%;
-	&.grid-list {
-		display: flex;
-		flex-wrap: wrap;
-		.video-item {
-			width: calc(33.333% - 10px);
-			display: block;
-			margin: 0 5px 10px;
-			padding: 0;
-			position: relative;
-			overflow: hidden;
-			&-details {
-				text-align: center;
-				margin-top: 5px;
-				margin-bottom: 0;
-				p {
-					width: 100%;
-					margin: 0 5px;
-				}
-			}
-			&-image {
-				margin: 0;
-				position: relative;
-				width: 100%;
-				height: 200px;
-				background-size: 160% auto;
-				background-repeat: no-repeat;
-				background-position: bottom center;
-				transition: all 0.1s ease-in-out;
-			}
-			&-content {
-				margin: 0;
-				position: absolute;
-				bottom: 0;
-				background-color: rgba(#000000, 0.6);
-				-webkit-backdrop-filter: blur(30px);
-				backdrop-filter: blur(30px);
-				padding: 5px 10px 10px;
-			}
-			&-info {
-				display: block;
-				padding: 0;
-			}
-			&.hidden-thumbnails {
-				.video-item-content {
-					position: relative;
-					padding: 10px;
-				}
-			}
-			&:hover {
-				.video-item {
-					&-info {
-						left: 0;
-					}
-					&-settings {
-						opacity: 1;
-						visibility: visible;
-						top: 0;
-					}
-					&-image {
-						transform: scale(1.1);
-					}
-				}
-			}
-			@media screen and (max-width: 1400px) and (min-width: 992px) {
-				width: calc(50% - 10px);
-			}
-			@media screen and (max-width: 991px) {
-				width: calc(100% - 10px);
-			}
-		}
-	}
-	&.video-list:not(.grid-list) {
-		padding-bottom: 10px;
-		.video-item {
-			margin-top: 10px;
-			padding: 5px 15px;
-		}
-	}
-	&::-webkit-scrollbar {
-		width: 6px;
-		background-color: transparent;
-	}
-}
-
 .categories {
 	display: flex;
 	flex-wrap: wrap;
@@ -97,11 +9,3 @@
 		transform: translateY(-50%);
 	}
 }
-
-@media screen and (min-width: 768px) and (max-width: 991px) {
-	.feed-video-list {
-		&.grid-list .video-item-image {
-			height: 200px;
-		}
-	}
-}

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

@@ -54,23 +54,23 @@ export class CategoryComponent implements OnInit {
 	getCategories() {
 		this.youtube.categories().then(catData => {
 			this.converFilterObject(catData);
-			this.globals.isFeedLoading = true;
 			this.getCategoriesVideos(this.globals.currentCategory);
 		});
 	}
 
 	async getCategoriesVideos(val: string) {
+		this.globals.loadingState.feed = true;
 		const res2 = await this.youtube.feedVideos(val);
 		this.shared.convertVideoObject(res2['items'], 'feedVideos');
-		this.globals.isFeedLoading = false;
+		this.globals.loadingState.feed = false;
 	}
 
 	resetCategories() {
-		this.globals.isFeedLoading = true;
+		this.globals.loadingState.feed = true;
 		this.globals.currentCategory = 'all';
 		this.globals.feedVideos = null;
 		this.shared.initFeed().then(() => {
-			this.globals.isFeedLoading = false;
+			this.globals.loadingState.feed = false;
 		});
 	}
 }

src/app/components/history/history.component.html

@@ -1,12 +1,12 @@
-<div class="app-content app-container">
+<div class="app-container">
     <div class="app-head">
         <h2>History</h2>
     </div>
-    <div class="history-video-content">
+    <div class="history-video-content video-list">
         <div *ngIf="globals.historyVideos.length === 0">
             No history
         </div>
-        <div *ngFor="let historyVideo of globals.historyVideos; let i = index" [attr.data-index]="i">
+        <div *ngFor="let historyVideo of globals.historyVideos; let i = index" [attr.data-index]="i" class="video">
             <app-video-item [videoIndex]="i" [videoItem]="historyVideo" [listID]="4"></app-video-item>
         </div>
     </div>

src/app/components/history/history.component.scss

@@ -1,9 +0,0 @@
-.history-video-content app-video-item .video-item {
-	margin-bottom: 10px;
-	width: 100%;
-	padding: 5px;
-}
-
-.history-video-content app-video-item {
-	width: 100%;
-}