1.1 - Improving UI/UX

Author: quead

dist/inline.bundle.js.map

@@ -8,6 +8,9 @@
       </div>
       <div *ngIf="searchForm.valid" id="search-video-list" class="video-list">
         <div *ngFor="let video of videos; let i = index" [attr.data-index]="i" class="video-item" (click)="onClickVideo($event, i)">
+          <div class="video-item-image">
+            <img src="{{ video.snippet.thumbnails.default.url }}" alt="video thumbnail" />
+          </div>
           <div class="video-item-content">
             <p>{{ video.snippet.title }}</p>
           </div>
@@ -16,6 +19,7 @@
       <div *ngIf="relatedVideos" id="related-video-list" class="video-list">
         <div class="video-item-head">
             Recommended videos
+            <span (click)="clearRelatedVideos()" class="video-list-clear"><span class="fa fa-close"></span>Clear</span>
         </div>
         <div *ngFor="let relatedVideo of relatedVideos; let i = index" [attr.data-index]="i" class="video-item" (click)="onClickRelatedVideo($event, i)">
           <div class="video-item-image">

dist/main.bundle.js

@@ -97,6 +97,10 @@ export class SearchComponent implements OnInit {
       );
   }
 
+  clearRelatedVideos() {
+    this.relatedVideos = null;
+  }
+
   clearSearch() {
     this.searchForm.reset();
     this.videos = null;
@@ -110,7 +114,6 @@ export class SearchComponent implements OnInit {
     const clickedVideo = this.videos[i];
     this.currentVideoID = clickedVideo.id.videoId;
     this.currentVideoName = clickedVideo.snippet.title;
-    console.log(this.currentVideoID);
     this.player.loadVideoById(this.currentVideoID);
     this.getRelatedVideos();
     this.clearSearch();

dist/main.bundle.js.map

@@ -43,17 +43,21 @@ export class SettingsComponent implements OnInit {
         this.http.get('assets/settings.json')
             .map(res => res.json())
             .subscribe(
-            data => { this.playerAttr.settings = data },
+            data => {
+                this.playerAttr.settings = data
+            },
             err => console.log('JSON Settings ' + err),
-            () => { this.finished = true; this.setForm(); }
+            () => {
+                this.finished = true; this.setForm();
+            }
         );
     }
 
     checkInputs() {
         this.showSettings(this.playerAttr);
         this.settingsForm.valueChanges.subscribe((data) => {
             Object.keys(data.settings).map(i => {
-                this.playerAttr.settings[i] = data.settings[i];
+                this.playerAttr.settings[i].selected = data.settings[i];
             });
             this.showSettings(data);
         });

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

@@ -613,7 +613,7 @@ footer {
 }
 
 #search-video-list {
-  z-index: 1;
+  z-index: 9;
 }
 
 #search-video-list .video-item:last-child {
@@ -766,3 +766,16 @@ iframe {
 #related-video-list .video-item-content {
   margin-top: 20px;
 }
+
+.video-list-clear {
+  float: right;
+  cursor: pointer;
+  background-color: #ffffff;
+  color: #212121;
+  padding: 2px 10px;
+  border-radius: 20px;
+}
+
+.video-list-clear .fa {
+  margin-right: 5px;
+}

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

@@ -19,7 +19,7 @@
 }
 
 #search-video-list {
-    z-index: 1;
+    z-index: 9;
     .video-item:last-child {
         box-shadow: 0px 10px 10px 0px rgba($c-black,0.1);
     }
@@ -149,4 +149,16 @@ iframe {
     .video-item-content {
         margin-top: 20px;
     }
+}
+
+.video-list-clear {
+    float: right;
+    cursor: pointer;
+    background-color: $c-white;
+    color: $c-black;
+    padding: 2px 10px;
+    border-radius: 20px;
+    .fa {
+        margin-right: 5px;
+    }
 }