fix(dashboard): improve rooms selector and player responsiveness

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

@@ -34,13 +34,13 @@
 <div class="footer">
 
   <div class="volume">
-    <i class="nb-volume-mute quiet"></i>
+    <i class="nb-volume-mute"></i>
     <div class="progress-wrap">
       <input type="range" class="progress" [value]="getVolume()" max="100"
              (input)="setVolume(volume.value)" #volume>
       <div class="progress-foreground" [style.width.%]="getVolume()"></div>
     </div>
-    <i class="nb-volume-high loud"></i>
+    <i class="nb-volume-high"></i>
   </div>
 
 </div>

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

@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@import '../../../../@theme/styles/themes';
 @import '~bootstrap/scss/mixins/breakpoints';
 @import '~@nebular/theme/components/card/card.component.theme';
 @import '~@nebular/theme/styles/global/bootstrap/breakpoints';
@@ -118,7 +118,7 @@
     }
 
     .shuffle, .loop {
-      font-size: 1.25rem;
+      font-size: 1.5rem;
       color: nb-theme(color-fg);
 
       &.active {
@@ -135,10 +135,7 @@
       height: 3.5rem;
       border: 2px solid nb-theme(separator);
       border-radius: 50%;
-
+      font-size: 1.75rem;
-      &::before {
-        font-size: 1.25rem;
-      }
     }
 
     .play {
@@ -150,9 +147,15 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 0 1.25rem;
+    margin: 0;
     position: relative;
 
+    i {
+      font-size: 1.5rem;
+      margin: 0.25rem;
+      color: nb-theme(color-fg);
+    }
+
     .progress-wrap {
       height: 2.25rem;
       margin: 0;
@@ -178,30 +181,6 @@
         }
       }
     }
-
-    .quite, .loud {
-      color: nb-theme(color-fg);
-    }
-
-    .quite {
-      font-size: 1.25rem;
-    }
-
-    .loud {
-      font-size: 1.5rem;
-    }
-  }
-
-  @include media-breakpoint-down(xl) {
-    border: none;
-
-    .header {
-      display: none;
-    }
-
-    .controls, .volume {
-      max-width: 20rem;
-      margin: 0 auto;
   }
 
   &.collapsed {
@@ -263,33 +242,35 @@
         display: none;
       }
 
-        .next {
+      .play, .next {
-          font-size: 1.8rem;
+        font-size: 2rem;
         border: none;
       }
-
-        .play {
-          font-size: 2.2rem;
-        }
     }
 
     .volume {
       display: none;
     }
   }
+
+  @include media-breakpoint-down(sm) {
+    .cover {
+      .details {
+        font-size: 0.875rem;
+        h4 {
+          font-size: 1.25rem;
+        }
+      }
+    }
   }
 
-  @include media-breakpoint-between(xl, xxl) {
+  @include media-breakpoint-down(is) {
-    .controls {
+    .cover {
-      margin: 0.875rem -1rem;
+      .details {
-      justify-content: space-around;
+        font-size: 0.75rem;
+        h4 {
+          font-size: 1rem;
         }
-
-    .volume {
-      margin: 0 -1rem;
-
-      i {
-        margin: 0.25rem;
       }
     }
   }

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

@@ -1,6 +1,5 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { PlayerService, Track } from '../../../@core/data/player.service';
+import { PlayerService, Track } from '../../../../@core/data/player.service';
-
 
 @Component({
   selector: 'ngx-player',

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

@@ -1,6 +1,7 @@
 <div class="header">Room Management</div>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+<div class="room-selector">
-     class="room-selector" [attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+       [attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
     <defs>
 
       <filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
@@ -81,4 +82,5 @@
       <text class="room-text" (click)="selectRoom(room.id)" text-anchor="middle"
             [attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text>
     </g>
-</svg>
+  </svg>
+</div>

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

@@ -2,6 +2,11 @@
 @import '~@nebular/theme/components/card/card.component.theme';
 
 @include nb-install-component() {
+
+  svg {
+    width: 100%;
+  }
+
   .stroke-pattern {
     fill: none;
     stroke: #bdc4cd;
@@ -60,12 +65,7 @@
   .header {
     @include nb-card-header();
     border-bottom: none;
-  }
+    padding-bottom: 0;
-
-  .room-selector {
-    width: 80%;
-    display: block;
-    margin: 0 auto;
   }
 
   @include nb-for-theme(cosmic) {

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

@@ -16,7 +16,24 @@
     flex-direction: row;
   }
 
-  @include media-breakpoint-down(xl) {
+  ngx-room-selector {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    /deep/ .room-selector {
+      display: flex;
+      align-items: center;
+      justify-items: center;
+      flex: 1;
+      margin: 0 auto;
+      width: 90%;
+      max-width: 650px;
+      padding-bottom: 1rem;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
     &.expanded ngx-room-selector {
       display: none;
     }

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

@@ -1,5 +1,5 @@
 import { Component, HostBinding } from '@angular/core';
-import { NbMediaBreakpoint } from '@nebular/theme';
+import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
 
 @Component({
   selector: 'ngx-rooms',
@@ -8,7 +8,7 @@ import { NbMediaBreakpoint } from '@nebular/theme';
     <nb-card size="large">
       <i (click)="collapse()" class="ion-ios-arrow-down collapse" [hidden]="isCollapsed()"></i>
       <ngx-room-selector (select)="select($event)"></ngx-room-selector>
-      <ngx-player [collapsed]="isCollapsed()"></ngx-player>
+      <ngx-player [collapsed]="isCollapsed() && breakpoint.width <= breakpoints.md"></ngx-player>
     </nb-card>
   `,
 })
@@ -18,6 +18,19 @@ export class RoomsComponent {
   private expanded: boolean;
   private selected: number;
 
+  breakpoint: NbMediaBreakpoint;
+  breakpoints: any;
+
+  constructor(private themeService: NbThemeService,
+              private breakpointService: NbMediaBreakpointsService) {
+
+    this.breakpoints = breakpointService.getBreakpointsMap();
+    themeService.onMediaQueryChange()
+      .subscribe(([oldValue, newValue]) => {
+        this.breakpoint = newValue;
+      });
+  }
+
   select(roomNumber) {
     if (this.isSelected(roomNumber)) {
       this.expand();