2.1 - Fixing bugs, UI improvements

Author: quead

README.md

@@ -82,6 +82,8 @@ Angular2 YT Player v2.1
 - Categories with videos like (music, gaming, autos, films, sports, etc.)
 - Refactoring code
 - Search on specific region
+- Fixing copy link for featured video
+- UX improvements
 
 Angular2 YT Player v2.0.1
 - Import & export youtube playlist as .JSON file

src/app/app.component.ts

@@ -126,12 +126,17 @@ export class AppComponent implements OnInit {
 
   async getFeedVideos() {
     await this._shared.initFeed();
+    await this._shared.initChannel();
     this.feedVideos = this._shared.feedVideos;
     if (!this.currentVideo.id) {
       this.setDefaultPlayer();
     }
   }
 
+  async getChannel() {
+    await this._shared.initChannel();
+  }
+
   setCurrentVideoObject(data: any) {
     this.currentVideoObject = [];
     this.currentVideoObject.push(data);
@@ -623,7 +628,7 @@ export class AppComponent implements OnInit {
     let listType;
     const youtubeLink = 'https://youtu.be/';
     if (list === 0) {
-      listType = this.feedVideos[i];
+      listType = this._shared.feedVideos[i];
     }
     if (list === 1) {
       listType = this._shared.lastSearchedVideos[i];

src/app/components/youtube-search.component.html

@@ -2,14 +2,17 @@
   <form id="main-search" role="search" [formGroup]="searchForm" (ngSubmit)="onSubmit($event)" novalidate>
       <div class="form-group">
         <div class="input-group">
-          <input type="text" id="input-search" class="form-control" placeholder="Search for Songs, Videos, Artists, Albums..." formControlName="searchInput">
+          <input type="text" id="input-search" class="form-control" placeholder="Search for Songs, Videos, Artists, Albums..." formControlName="searchInput" autocomplete="off">
           <label for="input-search" class="search-icon"><span class="fa fa-search"></span></label>
           <button class="clear-button" (click)="clearSearch()"><span class="fa fa-times"></span></button>
         </div>
       </div>
       <ng-container *ngIf="searchForm.valid">
         <span class="search-list arrow-up"></span>
         <div id="search-video-list" class="video-list">
+          <div *ngIf="noResults" class="video-item text-center">
+            There are no results
+          </div>
           <div *ngFor="let video of videos; 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(' + video.snippet.thumbnails.default.url +')'}"></div>
@@ -35,6 +38,12 @@
   </form>
 </div>
 <div class="app-content">
+  <ng-container *ngIf="loading">
+      <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>
+  </ng-container>
   <ng-container *ngIf="feedVideos">
     <div [ngStyle]="{'background-image': 'url(' + trendingFirst.bannerURL + ')'}" class="video-list-featured">
         <div class="video-item" [attr.data-index]="0">
@@ -67,10 +76,11 @@
         <p>{{ trendingFirst.stats.views | number:'1.0' }}</p>
         <p>{{ trendingFirst.stats.videoCount | number:'1.0' }}</p>-->
     </div>
-    <div class="categories">
+    <div class="categories" *ngIf="categories">
       <ng-container *ngFor="let category of categories.items">
         <div *ngIf="category.snippet.assignable && categoriesBlocked.indexOf(category.id) === -1" id="category-{{category.id}}" id="category-{{category.id}}">
           <button type="button" (click)="getCategoriesVideos(category.id)">
+            <span class="tooltip">{{category.snippet.title}}</span>
             <ng-container *ngIf="category.snippet.title === 'Film & Animation'">
               <i class="material-icons">movie</i>
             </ng-container>

src/app/components/youtube-search.component.ts

@@ -18,6 +18,8 @@ export class SearchComponent implements OnInit {
 
   searchForm: FormGroup;
   thumbnails = false;
+  loading = true;
+  noResults = false;
 
   videos: Array<ISearchVideo>;
   feedVideos: Array<IFeedVideo>;
@@ -77,6 +79,10 @@ export class SearchComponent implements OnInit {
   async getCategoriesVideos(val: number) {
     const res2 = await this.youtube.videoCategories(val);
     this.feedVideos = res2['items'];
+    this._shared.feedVideos = res2['items'];
+
+    await this._shared.initChannel();
+    this.getChannelTrending();
   }
 
   async setSettings() {
@@ -85,8 +91,13 @@ export class SearchComponent implements OnInit {
   }
 
   async getFeedVideos() {
-    await this._shared.initFeed();
-    await this._shared.initChannel();
+    this.loading = true;
+    if (!this._shared.feedVideos) {
+      await this._shared.initFeed();
+    }
+    if (!this._shared.channel) {
+      await this._shared.initChannel();
+    }
     this.feedVideos = this._shared.feedVideos;
     this.channel = this._shared.channel;
     this.getChannelTrending();
@@ -95,6 +106,11 @@ export class SearchComponent implements OnInit {
   async searchVideo(query: any) {
     const res = await this.youtube.searchVideo(query);
     this.videos = res['items'];
+    if (res['items'].length === 0) {
+      this.noResults = true;
+    } else {
+      this.noResults = false;
+    }
     this._shared.lastSearchedVideos = res['items'];
   }
 
@@ -126,6 +142,7 @@ export class SearchComponent implements OnInit {
     }
     this.trendingFirst.stats.videoCount = this.channel.items[0].statistics.videoCount;
     this.trendingFirst.stats.views = this.channel.items[0].statistics.viewCount;
+    this.loading = false;
   }
 
   clearSearch() {
@@ -144,13 +161,16 @@ export class SearchComponent implements OnInit {
     } else if (list === 3) {
       this._app.getVideo(this.feedVideos[i]);
     }
+    this.clearSearch();
   }
 
   onCopyVideoItemLink(i: number, list: number) {
-      this._app.onCopyVideoItemLink(i, list);
+    this._app.onCopyVideoItemLink(i, list);
+    this.clearSearch();
   }
 
   addPlaylistItem(i: number, list: number) {
-      this._app.addPlaylistItem(i, list);
+    this._app.addPlaylistItem(i, list);
+    this.clearSearch();
   }
 }

src/assets/scss/_buttons.scss

@@ -42,9 +42,6 @@
     &-primary {
         background-color: var(--c-primary);
         color: var(--c-white);
-        &:hover {
-            box-shadow: 0 0 10px var(--c-primary);
-        }
         &:active {
             background-color: var(--c-primary-active);
         }

src/assets/scss/_common.scss

@@ -17,6 +17,11 @@
   100% { opacity: 1; top: 50%; }
 }
 
+.text-center {
+    text-align: center;
+    justify-content: center;
+}
+
 .loading-bar {
     position: fixed;
     margin: 0;
@@ -126,6 +131,10 @@
         overflow: hidden;
         .app-content {
             padding: 0 20px;
+            position: absolute;
+            .loading-app {
+                position: absolute;
+            }
         }
     }
     &-player {

src/assets/scss/_controls.scss

@@ -99,10 +99,6 @@
             left: 50%;
             transform: translate(-50%, -50%);
         }
-        &:not(#play-song):hover {
-            color: var(--c-primary);
-            text-shadow: 0 0 10px var(--c-primary);
-        }
         &:not(#play-song):active {
             color: var(--c-primary);
             transform: scale(1.2);
@@ -118,9 +114,6 @@
                 margin-left: 0;
             }
         }
-        &:hover {
-            box-shadow: 0 0 10px var(--c-primary);
-        }
         &:active {
             transform: scale(1.1);
         }
@@ -169,9 +162,6 @@
     }
     .fa {
         transition: all 0.1s ease-in-out;
-        &:hover {
-            text-shadow: 0 0 10px var(--c-primary);
-        }
     }
     &.inactive .volume-input {
         visibility: hidden;
@@ -221,7 +211,6 @@
         &:active,
         &:hover {
             + .duration-input-shadow {
-                box-shadow: 0 0 10px var(--c-primary);
                 border-radius: 20px 0 0 20px;
             }
             &::-webkit-slider-thumb {
@@ -281,7 +270,6 @@
         &:active,
         &:hover {
             + .volume-input-shadow {
-                box-shadow: 0 0 10px var(--c-primary);
                 border-radius: 20px 0 0 20px;
             }
             &::-webkit-slider-thumb {

src/assets/scss/_search.scss

@@ -69,30 +69,71 @@
     }
 }
 
+.tooltip {
+    background-color: var(--c-black);
+    padding: 5px 10px;
+    line-height: 22px;
+    width: 111px;
+    font-size: 12px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 3px;
+    opacity: 0;
+    bottom: 100%;
+    transition: all 0.1s ease-out;
+    &:before {
+        content: '';
+        background-color: var(--c-black);
+        height: 10px;
+        width: 10px;
+        left: 50%;
+        transform: translateX(-50%) rotate(45deg);
+        display: block;
+        position: absolute;
+        bottom: -4px;
+        z-index: -1;
+    }
+}
+
 .categories {
     display: flex;
     flex-wrap: nowrap;
     width: 100%;
+    height: 70px;
+    button {
+        background-color: var(--c-base);
+        color: var(--c-white);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        cursor: pointer;
+        border-radius: 3px;
+        border: none;
+        color: inherit;
+        padding: 0 5px;
+        margin: auto;
+        display: block;
+        height: 40px;
+        width: 40px;
+        transition: all 0.1s ease-out;
+        &:hover {
+            background-color: #40404c;
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
+            .tooltip {
+                opacity: 1;
+                bottom: calc(100% + 10px);
+            }
+        }
+        &:active {
+            background-color: #363642;
+        }
+    }
     > div {
-        margin: 8px 0;
+        position: relative;
+        margin: auto 0;
         flex: 0 0 calc(10% - 10px);
-        button {
-            background-color: var(--c-primary);
-            color: var(--c-white);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            cursor: pointer;
-            border-radius: 3px;
-            border: none;
-            color: inherit;
-            padding: 0 5px;
-            margin: 0;
-            display: block;
-            height: 55px;
-            width: calc(100% - 2px);
-        }
         + div {
             margin-left: 10px;
         }
@@ -116,4 +157,4 @@
             background-color: rgba(#FFF, 0.4);
         }
     }
-}
+}

src/assets/scss/_videos.scss

@@ -82,9 +82,6 @@ iframe {
         border: none;
         display: block;
         user-select: none;
-        &:hover {
-            box-shadow: 0 0 10px var(--c-primary);
-        }
         &:active {
             background-color: var(--c-primary-active);
         }

src/assets/scss/theme/light.scss

@@ -191,9 +191,11 @@ nav {
         }
     }
 
+    .search-icon,
     .clear-button {
         color: var(--c-black);
     }
+
 } 
 
 .related-video-content {
@@ -267,4 +269,8 @@ input[type="checkbox"]:checked + label .round-check:before, input[type="radio"]:
 
 .app-feed:before {
     display: none;
+}
+
+.categories {
+    color: var(--c-white);
 }