2.3 - Implement new loading

Author: quead

src/app/app.component.html

@@ -18,6 +18,7 @@ <h1><span class="favicon-app"></span>YouTube Player v2.0</h1>
   <ng-container *ngIf="_shared.isLogged">
     <button type="button" (click)="logout()">Logout</button>
   </ng-container>
+  <button type="button" (click)="refresh()">Reinit</button>
   <div class="device-bar">
     <button type="button" class="trigger-nav" (click)="openMobileMenu()"><span class="fa fa-navicon"></span>Menu</button>
     <div id="logo">
@@ -27,7 +28,6 @@ <h1><span class="favicon-app"></span>YouTube Player v2.0</h1>
   </div>
 </header>
 <div id="app-container" [ngClass]="{'light-mode': !darkMode, 'menu-active': menuActive }">
-  <div class="loading-bar inactive"></div>
   <input type="text" class="hide-input" #videoItemIDvalue />
   <div class="container">
     <div class="col col-1">
@@ -55,7 +55,12 @@ <h1><span class="favicon-app"></span>YouTube Player v2.0</h1>
                 </div>
                 <div class="playlist-video-content" [dragula]='"playlistDrag"' [dragulaModel]='playlistVideos' #playlistContainer>
                   <div *ngIf="playlistVideos.length === 0" class="video-list-info">
-                    Empty playlist
+                    <div *ngFor="let i of [1,2,3,4,5]" class="video-item">
+                      <div class="video-item-info">
+                        <div class="video-item-image loading-featured"></div>
+                        <div class="video-item-content loading-featured"></div>
+                      </div>
+                    </div>
                   </div>
                   <div *ngFor="let playlistVideo of playlistVideos; let i = index" [ngClass]="currentPlaylistItem === i ? 'active' : ''" [attr.data-index]="i" class="video-item">
                     <div class="video-item-info">
@@ -99,11 +104,14 @@ <h2>Player</h2>
                     <p (click)="addPlaylistItem(0, 3)"><span class="fa fa-plus"></span>Add to playlist</p>
                 </div>
             </div>
+            <div *ngIf="!currentVideo.id" class="app-content">
+              <div class="youtube-player active loading-featured"></div>
+            </div>
             <div class="app-content">
-              <div id="youtube-player" *ngIf="currentVideo.id" [ngClass]="{'active': displayVideoPlayer }">
+              <div class="youtube-player" *ngIf="currentVideo.id" [ngClass]="{'active': displayVideoPlayer }">
                 <youtube-player [videoId]="currentVideo.id" (ready)="savePlayer($event)" (change)="onStateChange($event)" [playerVars]="playerVars()"></youtube-player>
               </div>
-              <div *ngIf="currentVideo.id" class="current-video-all">
+              <div class="current-video-all" *ngIf="currentVideo.id">
                   <div class="current-video-details">
                     <p class="current-video-name">{{ currentVideo.title }}</p>
                   </div>
@@ -139,11 +147,19 @@ <h2>Player</h2>
                     <input id="shareInput" type="text" name="current video share" #shareInput [value]="shareLink" (click)="copyShareLink(shareInput.select())" readonly>
                   </div>
               </div>
-              <div id="related-video-list" class="video-list" [ngClass]="{'activePlayer': displayVideoPlayer }">
+              <div *ngIf="relatedVideos" id="related-video-list" class="video-list" [ngClass]="{'activePlayer': displayVideoPlayer }">
                 <div class="video-item-head">
                     Similar videos
                 </div>
                 <div class="related-video-content">
+                  <div *ngIf="relatedVideos.length === 0" class="video-list-info">
+                    <div *ngFor="let i of [1,2,3,4]" class="video-item">
+                      <div class="video-item-info">
+                        <div class="video-item-image loading-featured"></div>
+                        <div class="video-item-content loading-featured"></div>
+                      </div>
+                    </div>
+                  </div>
                   <div *ngFor="let relatedVideo of relatedVideos; let i = index" [attr.data-index]="i" class="video-item">
                     <div class="video-item-info">
                       <div *ngIf="thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + relatedVideo.snippet.thumbnails.default.url +')'}"></div>

src/app/app.component.ts

@@ -9,16 +9,18 @@ import { DbCrudService } from './services/db-crud.service';
 import { AuthService } from './services/auth.service';
 import { AngularFireAuth } from 'angularfire2/auth';
 import { AngularFireDatabase } from 'angularfire2/database';
+import { AngularFirestore } from 'angularfire2/firestore';
 import * as firebase from 'firebase/app';
 
 import { IRelatedVideo } from './models/related-video.model';
 import { INotify } from './models/notify.model';
 import { IFeedVideo } from './models/feed-video.model';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-yt',
   templateUrl: 'app.component.html',
-  providers: [ AuthService, DbCrudService ]
+  providers: [ AuthService, DbCrudService, AngularFirestore ]
 })
 
 export class AppComponent implements OnInit {
@@ -29,12 +31,12 @@ export class AppComponent implements OnInit {
   nw: any;
   videoRangePercent = 0;
 
-  relatedVideos: Array<IRelatedVideo>;
+  relatedVideos: Array<IRelatedVideo> = [];
   feedVideos: Array<IFeedVideo>;
   playlistVideos: Array<any> = [];
   tempPlaylist: Array<any> = [];
   currentVideoObject: Array<any> = [];
-
+  
   thumbnails = true;
   darkMode = true;
   menuActive = false;
@@ -91,6 +93,7 @@ export class AppComponent implements OnInit {
 
     private authService: AuthService,
     public afAuth: AngularFireAuth,
+    private db: AngularFirestore,
     private db2: AngularFireDatabase,
     private dbcrud: DbCrudService
   ) {
@@ -137,6 +140,7 @@ export class AppComponent implements OnInit {
       if (data.length > 0) {
         this.currentVideo = data['2'];
         this.shareLink = 'https://youtu.be/' + this.currentVideo.id;
+        this.updatePlaylist();
         this.getRelatedVideos();    
       } else {
         this.setDefaultPlayer();
@@ -145,6 +149,14 @@ export class AppComponent implements OnInit {
     this.setSettings();
   }
 
+  refresh() {
+    console.log('da');
+    this.currentVideo.id = '';
+    this.clearSession();
+    // this.playlistInit();
+    // this.updatePlaylist();
+  }
+
   // ---------------- Init player ----------------
 
   savePlayer(player) {
@@ -366,10 +378,17 @@ export class AppComponent implements OnInit {
   }
 
   clearPlaylist() {
-      this.currentPlaylistItem = -1;
-      this.playlistVideos = [];
-      this._shared.playlist = [];
-      this._shared.updatePlaylist();
+    this.currentPlaylistItem = -1;
+    this.playlistVideos = [];
+    this._shared.playlist = [];
+    this._shared.updatePlaylist();
+  }
+
+  clearSession() {
+    this.currentPlaylistItem = -1;
+    this.playlistVideos = [];
+    this._shared.playlist = [];
+    this.relatedVideos = [];
   }
 
   exportPlaylist() {

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

@@ -14,7 +14,7 @@
     </ng-container>
   </div>
   <div class="feed-video-list grid-list loading-list">
-    <div *ngFor="let i of [1,2,3,4]" class="video-item loading-featured-video-item">
+    <div *ngFor="let i of [1,2,3,4,5,6,7,8,9,10,11,12,13]" class="video-item loading-featured-video-item">
       <div class="video-item-info">
         <div class="video-item-image"></div>
         <div class="video-item-content">

src/assets/scss/_common.scss

@@ -1,17 +1,3 @@
-.loading-app {
-    position: fixed;
-    color: var(--c-white);
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 10;
-}
-
-@keyframes loading-animation {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
 @keyframes loading-modal {
   0% { opacity: 0; top: 60% }
   100% { opacity: 1; top: 50%; }
@@ -22,35 +8,6 @@
     justify-content: center;
 }
 
-.loading-bar {
-    position: fixed;
-    margin: 0;
-    padding: 0;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 99999;
-    &:before {
-        content: '';
-        display: block;
-        margin: 0;
-        padding: 0;
-        z-index: 99998;
-        background-color: var(--c-primary);
-        color: var(--c-primary);
-        box-shadow: 0 0 10px 0;
-        height: 2px;
-        opacity: 0;
-        width: 0%;
-        transition: all 0.5s ease-in-out;
-    }
-    &.active {
-        &:before {
-            animation: loading-animation 2s 1;
-        }
-    }
-}
-
 .hide {
     display: none;
 }
@@ -132,9 +89,6 @@
         .app-content {
             padding: 0 20px;
             position: absolute;
-            .loading-app {
-                position: absolute;
-            }
         }
     }
     &-player {
@@ -144,7 +98,7 @@
     }
 }
 
-#youtube-player {
+.youtube-player {
     height: 0;
     opacity: 0;
     transition: opacity 0.1s ease-out, visibility 0.1s ease-out, height 0.1s ease-out 0.1s;

src/assets/scss/_global.scss

@@ -21,7 +21,6 @@ body {
     cursor: default;
     -webkit-app-region: no-drag;
     overflow: hidden;
-    animation: loading-animation 2s 1;
 }
 
 a,

src/assets/scss/_loading.scss

@@ -36,4 +36,13 @@
 .loading-list {
     width: 100%;
     height: 100%;
+}
+
+.video-item-content.loading-featured,
+.video-item-image.loading-featured {
+    height: 60px;
+}
+
+.youtube-player.loading-featured {
+    height: 375px;
 }

src/assets/scss/_responsive.scss

@@ -44,7 +44,7 @@
         width: calc(100% - 20px);
     }
 
-    #youtube-player {
+    .youtube-player {
         padding: 0 10px;
     }
 }

src/assets/scss/_videos.scss

@@ -279,6 +279,9 @@ iframe {
         width: 100%;
         overflow: auto;
         z-index: 0;
+        .video-list-info {
+            margin: 0;
+        }
         &::-webkit-scrollbar-track {
             border-radius: 2px;
         }

src/index.html

@@ -10,10 +10,6 @@
     </head>
     <body>
         <app-yt>
-            <div class="loading-app">
-                <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
-                <span class="sr-only">Loading...</span>
-            </div>
         </app-yt>
     </body>
 </html>