feat(dashboard): add an audio player widget (#15)

src/app/pages/dashboard/dashboard.module.ts

@@ -13,6 +13,7 @@ import { TeamComponent } from './team/team.component';
 import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
 import { ElectricityComponent } from './electricity/electricity.component';
 import { WeatherComponent } from './weather/weather.component';
+import { PlayerComponent } from './player/player.component';
 
 @NgModule({
   imports: [
@@ -32,6 +33,7 @@ import { WeatherComponent } from './weather/weather.component';
     SecurityCamerasComponent,
     ElectricityComponent,
     WeatherComponent,
+    PlayerComponent,
   ],
 })
 export class DashboardModule { }

src/app/pages/dashboard/player/player.component.html

@@ -0,0 +1,58 @@
+<div class="player">
+  <div class="player-card-header">
+    <div class="player-menu">
+      <i class="ion-navicon"></i>
+    </div>
+    <div class="playlist-name">
+      <span>My Playlist</span>
+    </div>
+  </div>
+  <div class="player-cover">
+    <div class="album-image"></div>
+    <div class="artist-details">
+      <span class="artist-name">Kendrick Lamar</span>
+      <span class="song-name">DNA.</span>
+    </div>
+  </div>
+  <div class="player-progress">
+    <div class="status"></div>
+  </div>
+  <div class="player-commands">
+    <div class="prev">
+      <i class="ion-ios-skipbackward"></i>
+    </div>
+    <div class="play">
+      <i class="ion-ios-play"></i>
+    </div>
+    <div class="next">
+      <i class="ion-ios-skipforward"></i>
+    </div>
+  </div>
+  <div class="player-volume">
+    <div class="minus" (click)="minus()">
+      <i class="ion-ios-minus-outline"></i>
+    </div>
+    <div class="volume-items">
+      <div class="volume-item" *ngFor="let v of volume"
+           (click)="selectedVolume = v"
+           [class.active]="v < selectedVolume"
+           [class.selected]="v === selectedVolume"></div>
+    </div>
+    <div class="plus" (click)="plus()">
+      <i class="ion-ios-plus-outline"></i>
+    </div>
+  </div>
+  <div class="player-playlist-commands">
+    <div class="btn-group btn-group-block btn-group-divider" data-toggle="buttons">
+      <label class="btn btn-primary" [class.active]="playlistCommandsModel.left">
+        <input type="checkbox" [(ngModel)]="playlistCommandsModel.left"/> <i class="ion-plus-round"></i>
+      </label>
+      <label class="btn btn-primary" [class.active]="playlistCommandsModel.middle">
+        <input type="checkbox" [(ngModel)]="playlistCommandsModel.middle"/> <i class="ion-plus-round"></i>
+      </label>
+      <label class="btn btn-primary" [class.active]="playlistCommandsModel.right">
+        <input type="checkbox" [(ngModel)]="playlistCommandsModel.right"/> <i class="ion-plus-round"></i>
+      </label>
+    </div>
+  </div>
+</div>

src/app/pages/dashboard/player/player.component.scss

@@ -0,0 +1,184 @@
+@import '../../../@theme/styles/variables';
+
+@include nga-install-component() {
+
+  .player {
+    flex: 1;
+
+    // TODO: Replace with the card header styles mixin
+    .player-card-header {
+      display: flex;
+      line-height: 2rem;
+      font-size: 1.25rem;
+      font-family: nga-theme(font-secondary);
+      font-weight: nga-theme(font-weight-bolder);
+      color: nga-theme(color-fg-heading);
+      padding: 1.25rem;
+
+      .player-menu {
+        font-size: 2.5rem;
+        margin-right: 1.25rem;
+        margin-top: -0.25rem;
+      }
+    }
+
+    .player-cover {
+      background: #363175;
+      padding: 1.25rem;
+      display: flex;
+
+      .album-image {
+        background: url('./~/assets/images/damn.jpg');
+        background-size: cover;
+        background-position: center;
+        height: 94px;
+        width: 30%;
+        box-shadow: nga-theme(card-shadow);
+      }
+
+      .artist-details {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-left: 1.25rem;
+
+        .artist-name {
+          color: nga-theme(color-fg-heading);
+          font-size: 1.5rem;
+          font-family: nga-theme(font-secondary);
+          font-weight: nga-theme(font-weight-bold);
+        }
+
+        .song-name {
+          font-family: nga-theme(font-main);
+          font-size: 1.125rem;
+          color: nga-theme(color-fg);
+        }
+      }
+    }
+
+    .player-progress {
+      background-color: #2c2961;
+      height: 2px;
+
+      .status {
+        background-color: #0088ff;
+        height: 2px;
+        width: 70%;
+        box-shadow: 0 4px 8px 0 rgba(33, 7, 77, 0.4), 0 0 12px 0 rgba(51, 139, 255, 0.4);
+        position: relative;
+
+        &::before {
+          content: '';
+          border-radius: 50%;
+          width: 1rem;
+          height: 1rem;
+          position: absolute;
+          background-color: white;
+          right: 0;
+          box-shadow: 0 0 18px 0 rgba(255, 255, 255, 0.4);
+          top: -0.5rem;
+        }
+      }
+    }
+
+    .player-commands {
+      display: flex;
+      justify-content: space-around;
+      font-size: 4rem;
+      color: nga-theme(color-fg-heading);
+      padding: 2.5rem 0;
+      border-bottom: 1px solid nga-theme(separator);
+
+      .prev {
+        color: nga-theme(color-fg);
+      }
+    }
+
+    .player-volume {
+      display: flex;
+      justify-content: space-around;
+      font-size: 4rem;
+      color: nga-theme(color-fg);
+      padding: 2rem 0;
+      border-bottom: 1px solid nga-theme(separator);
+
+      .minus:hover {
+        color: nga-theme(color-fg-heading);
+      }
+
+      .plus:hover {
+        color: nga-theme(color-fg-heading);
+      }
+
+      .volume-items {
+        display: flex;
+        justify-content: space-around;
+        font-size: 2rem;
+        margin: 0 -4rem;
+
+        .volume-item {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+
+        .volume-item::before {
+          content: '';
+          width: 4px;
+          background-color: nga-theme(separator);
+          height: 30%;
+          border-radius: 1rem;
+          transition: 0.3s;
+        }
+
+        .volume-item:not(:last-child)::before {
+          margin-right: 0.25rem;
+        }
+
+        .volume-item.active::before {
+          background-image: linear-gradient(to right, #4f6fff, #00ccff);
+          box-shadow: 0 4px 10px 0 rgba(33, 7, 77, 0.5), 0 2px 12px 0 rgba(0, 136, 255, 0.7);
+        }
+
+        .volume-item.selected::before {
+          background-color: white;
+          height: 40%;
+          box-shadow: 0 0 18px 0 rgba(255, 255, 255, 0.68);
+        }
+      }
+    }
+
+    .player-playlist-commands {
+      height: 3.5rem;
+    }
+
+    .player-playlist-commands > .btn-group {
+      height: 100%;
+
+      .btn {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        border: none;
+        font-size: 2rem;
+      }
+
+      .btn.active {
+        background-color: nga-theme(card-bg);
+        color: nga-theme(color-fg);
+      }
+
+      .btn:first-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      .btn:last-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: nga-theme(card-border-radius);
+      }
+    }
+  }
+}

src/app/pages/dashboard/player/player.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { Range } from 'immutable';
+
+@Component({
+  selector: 'ngx-player',
+  styleUrls: ['./player.component.scss'],
+  templateUrl: './player.component.html',
+})
+export class PlayerComponent {
+
+  selectedVolume: number = 10;
+  volume = Range(0, 30, 1);
+  playlistCommandsModel = {
+    left: true,
+    middle: true,
+    right: false,
+  };
+
+  minus() {
+    if (this.selectedVolume !== 0) {
+      this.selectedVolume--;
+    }
+  }
+
+  plus() {
+    if (this.selectedVolume !== 29) {
+      this.selectedVolume++;
+    }
+  }
+}

src/app/pages/dashboard/rooms/room-selector/room-selector.component.html

@@ -1,3 +1,4 @@
+<div class="rooms-card-header">Room Management</div>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" [attr.viewBox]="viewBox"
      preserveAspectRatio="xMidYMid">
   <defs>

src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss

@@ -1,75 +1,89 @@
-:host {
+@import '../../../../@theme/styles/variables';
-  display: block;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
 
-svg {
+@include nga-install-component() {
-  display:block;
+  :host {
-  width: 100%;
+    display: block;
-  height: 100%;
+    align-items: center;
-}
+    width: 100%;
+    height: 100%;
+  }
 
-.stroke-pattern {
+  svg {
-  fill: none;
+    display:block;
-  stroke: #a1a1e5;
+    width: 100%;
-  stroke-miterlimit: 10;
+    height: 80%;
-  opacity: 0.1;
+  }
-  stroke-width: 1px;
-}
 
-.stroked-element {
+  .stroke-pattern {
-  stroke-width: 4px;
+    fill: none;
-  stroke: #a1a1e5;
+    stroke: #a1a1e5;
-  stroke-miterlimit: 10;
+    stroke-miterlimit: 10;
-  fill: url('#New_Pattern_Swatch_1');
+    opacity: 0.1;
-}
+    stroke-width: 1px;
+  }
 
-.room-border {
+  .stroked-element {
-  stroke-width: 4px;
+    stroke-width: 4px;
-  stroke: #a1a1e5;
+    stroke: #a1a1e5;
-  stroke-miterlimit: 10;
+    stroke-miterlimit: 10;
-  fill: none;
+    fill: url('#New_Pattern_Swatch_1');
-  transition: stroke 0.4s ease-out;
+  }
-}
 
-.room-bg {
+  .room-border {
-  fill: transparent;
+    stroke-width: 4px;
-  stroke: transparent;
+    stroke: #a1a1e5;
-  cursor: pointer;
+    stroke-miterlimit: 10;
-  transition: fill 0.4s ease-out;
+    fill: none;
-  stroke-width: 4px;
+    transition: stroke 0.4s ease-out;
-}
+  }
 
-.room-bg-border-grad {
-  fill: none;
-  stroke: none;
-  stroke-width: 4px;
-}
-
-.room-text {
-  cursor: pointer;
-  user-select: none;
-  fill: #fff;
-}
-
-.selected-room {
-  z-index: 40;
   .room-bg {
-    //stroke: rgba(0, 255, 170, 1);
+    fill: transparent;
-    fill: rgba(0, 255, 170, 0.2);
+    stroke: transparent;
-    filter: url('#f2');
+    cursor: pointer;
+    transition: fill 0.4s ease-out;
+    stroke-width: 4px;
   }
 
   .room-bg-border-grad {
-    stroke: rgba(0, 255, 170, 1);
+    fill: none;
-    filter: url('#f2');
+    stroke: none;
+    stroke-width: 4px;
   }
-  .room-border {
+
-    stroke: #00f9a6;
+  .room-text {
+    cursor: pointer;
+    user-select: none;
+    fill: #fff;
   }
-  .room-border-glow {
+
-    filter: url('#f2');
+  .selected-room {
+    z-index: 40;
+    .room-bg {
+      //stroke: rgba(0, 255, 170, 1);
+      fill: rgba(0, 255, 170, 0.2);
+      filter: url('#f2');
+    }
+
+    .room-bg-border-grad {
+      stroke: rgba(0, 255, 170, 1);
+      filter: url('#f2');
+    }
+    .room-border {
+      stroke: #00f9a6;
+    }
+    .room-border-glow {
+      filter: url('#f2');
+    }
+  }
+
+    // TODO: Replace with the card header styles mixin
+  .rooms-card-header {
+    line-height: 2rem;
+    font-size: 1.25rem;
+    font-family: nga-theme(font-secondary);
+    font-weight: nga-theme(font-weight-bolder);
+    color: nga-theme(color-fg-heading);
+    padding: 1.25rem;
   }
 }

src/app/pages/dashboard/rooms/rooms.component.scss

@@ -4,5 +4,16 @@
 
   ngx-room-selector {
     width: 65%;
+    background-image: nga-theme(radial-gradient);
+  }
+
+  ngx-player {
+    flex: 1;
+    box-shadow: nga-theme(card-shadow);
+  }
+
+  nga-card {
+    display: flex;
+    flex-direction: row;
   }
 }

src/app/pages/dashboard/rooms/rooms.component.ts

@@ -5,12 +5,8 @@ import { Component } from '@angular/core';
   styleUrls: ['./rooms.component.scss'],
   template: `
     <nga-card size="large">
-      <nga-card-header>
+      <ngx-room-selector></ngx-room-selector>
-        Room Management
+      <ngx-player></ngx-player>
-      </nga-card-header>
-      <nga-card-body>
-        <ngx-room-selector></ngx-room-selector>
-      </nga-card-body>
     </nga-card>
   `,
 })

src/app/pages/dashboard/weather/weather.component.scss

@@ -6,7 +6,7 @@
     nga-card-body {
       height: 100%;
       padding: 2rem;
-      background-image: radial-gradient(circle at 50% 50%, #423f8c, #302c6e);
+      background-image: nga-theme(radial-gradient);
     }
   }
 
@@ -42,6 +42,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
+        margin-top: 2rem;
       }
 
       .icon {

src/app/pages/forms/form-inputs/form-inputs.component.html

@@ -194,7 +194,7 @@
     </nga-card>
     <nga-card>
       <nga-card-body class="demo-rating">
-        <span class="header">Rating</span>
+        <span class="rating-header">Rating</span>
         <div>
           <ngb-rating [(rate)]="starRate" max=5>
             <ng-template let-fill="fill">

src/app/pages/forms/form-inputs/form-inputs.component.scss

@@ -48,11 +48,13 @@
     color: nga-theme(color-fg);
   }
 
-  .header {
+  // TODO: Replace with the card header styles mixin
+  .rating-header {
     line-height: 2rem;
     font-size: 1.25rem;
     font-family: nga-theme(font-secondary);
     font-weight: nga-theme(font-weight-bolder);
+    color: nga-theme(color-fg-heading);
   }
 
   .current-rate {