Fixes and optimisations

.gitignore

@@ -1,5 +1,6 @@
 src/app/themes/*
 src/app/ngConstants.js
+src/app/local-config.json
 !src/app/themes/volumio/
 dist/
 node_modules/

src/app/browse/components/browse-search-box.html

@@ -3,8 +3,7 @@
       type="text"
       ng-model="browse.searchField"
       ng-change="browse.search()"
-      class="form-control"
-      placeholder="Search by artist, album or song">
+      class="form-control">
   <span class="form-control-feedback" aria-hidden="true">
     <i class="fa fa-search"></i>
   </span>

src/app/browse/components/browse-table-items.html

@@ -2,7 +2,10 @@
   <td class="image"
       ng-click="browse.clickListItem(item, $event)"
       ng-dblclick="browse.dblClickListItem(item, $event)">
-    <img ng-if="item.image" ng-src="{{item.albumart}}" alt="" style="height:80px;"/>
+    <img
+        ng-if="item.albumart"
+        ng-src="{{browse.socketService.host + item.albumart}}"
+        alt="{{item.title}}"/>
     <i ng-if="item.icon" class="{{item.icon}}"></i>
   </td>
   <td

src/app/index.route.js

@@ -43,10 +43,12 @@ function routerConfig ($stateProvider, $urlRouterProvider,
             }, () => {
               //console.log(reason);
               //Fallback socket
-              $window.socket = io('http://192.168.0.3');
-              socketService.host  = 'http://192.168.0.3';
-              toastMessageService.init();
-              updaterService.init();
+              return $http.get('/app/local-config.json').then((response) => {
+                $window.socket = io(response.data.localhost);
+                socketService.host  = response.data.localhost;
+                toastMessageService.init();
+                updaterService.init();
+              });
             });
           }
       }

src/app/plugin/core-plugin/network-status-plugin.html

@@ -5,7 +5,6 @@ <h3 class="panel-title">Network status</h3>
   </div>
   <div class="panel-body">
     <h4 ng-if="false" class="sectionDescription"></h4>
-
     <table ng-repeat="network in networkStatus.networkInfos track by $index" class="table hidden-xs">
       <tr>
         <th>

src/app/plugin/core-plugin/wifi-plugin.html

@@ -3,34 +3,21 @@
   <div class="panel-heading">
     <h3 class="panel-title">Wireless network</h3>
   </div>
+
   <div class="panel-body">
     <h4 ng-if="false" class="sectionDescription"></h4>
     <table class="table">
       <tr ng-if="wifiPlugin.wirelessNetworks.connectedTo">
-        <td>
-          {{wifiPlugin.wirelessNetworks.connectedTo.ssid}}
+        <td class="wifiIcon">
+          <img ng-src="{{assetsFolder + '/wifi-icons/' + wifiPlugin.wirelessNetworks.connectedTo.signal + '.png'}}" alt="signal-{{wifi.signal}}" />
+        </td>
+        <td class="lockIcon">
+          <i ng-if="wifiPlugin.wirelessNetworks.connectedTo.security !== 'open'" class="fa fa-lock"></i>
         </td>
         <td>
-          <i class="fa fa-wifi"></i>
-          <span class="hidden-xs">
-            <span ng-if="wifiPlugin.wirelessNetworks.connectedTo.signal === 1
-                || wifiPlugin.wirelessNetworks.connectedTo.signal === 2">
-              Low
-            </span>
-            <span ng-if="wifiPlugin.wirelessNetworks.connectedTo.signal === 3
-                || wifiPlugin.wirelessNetworks.connectedTo.signal === 4">
-              Good
-            </span>
-            <span ng-if="wifiPlugin.wirelessNetworks.connectedTo.signal === 5">
-              Strong
-            </span>
-          </span>
+          {{wifiPlugin.wirelessNetworks.connectedTo.ssid}}
         </td>
         <td>
-          <i ng-if="wifiPlugin.wirelessNetworks.connectedTo.encryption === 'open'"
-              class="fa fa-unlock-alt"></i>
-          <i ng-if="wifiPlugin.wirelessNetworks.connectedTo.encryption !== 'open'"
-              class="fa fa-lock"></i>
         </td>
         <td class="commandCol">
           <!-- <button ng-click="wifi.disconnectFromWiFi()"
@@ -40,24 +27,17 @@ <h4 ng-if="false" class="sectionDescription"></h4>
           </button> -->
         </td>
       </tr>
-
       <tr ng-if="wifiPlugin.wirelessNetworks.available.length > 0"
           ng-repeat-start="wifi in wifiPlugin.wirelessNetworks.available
           track by wifi.ssid + $index">
-        <td>
-          {{wifi.ssid}}
+        <td class="wifiIcon">
+          <img ng-src="{{assetsFolder + '/wifi-icons/' + wifi.signal + '.png'}}" alt="signal-{{wifi.signal}}" />
         </td>
-        <td>
-          <i class="fa fa-wifi"></i>
-          <span class="hidden-xs">
-            <span ng-if="wifi.signal === 1 || wifi.signal === 2"> Low</span>
-            <span ng-if="wifi.signal === 3 || wifi.signal === 4"> Good</span>
-            <span ng-if="wifi.signal === 5"> Strong</span>
-          </span>
+        <td class="lockIcon">
+          <i ng-if="wifi.security !== 'open'" class="fa fa-lock"></i>
         </td>
         <td>
-          <i ng-if="wifi.encryption === 'open'" class="fa fa-unlock-alt"></i>
-          <i ng-if="wifi.encryption !== 'open'" class="fa fa-lock"></i>
+          {{wifi.ssid}}
         </td>
         <td class="commandCol">
           <button ng-if="!wifi.insertPassword"
@@ -75,14 +55,21 @@ <h4 ng-if="false" class="sectionDescription"></h4>
             <input
                 class="form-control"
                 ng-model="wifi.password"
-                type="password"
+                type="{{wifi.showHidePassword || 'password'}}"
                 placeholder="password">
+            <button
+                ng-click="(wifi.showHidePassword === 'text') ? wifi.showHidePassword = 'password' : wifi.showHidePassword = 'text'"
+                type="button"
+                class="btn btn-info">
+              <i ng-if="!wifi.showHidePassword || wifi.showHidePassword === 'password'" class="fa fa-eye"></i>
+              <i ng-if="wifi.showHidePassword === 'text'" class="fa fa-eye-slash"></i>
+            </button>
             <button
                 class="btn btn-info"
                 ng-click="wifiPlugin.connectToWifi(wifi, $index)"
                 type="button"
                 name="btn btn-info">
-              Save
+              Connect
             </button>
         </td>
       </tr>

src/app/plugin/core-plugin/wifi-plugin.scss

@@ -8,9 +8,20 @@ tr {
       }
       text-align: center;
     }
+    &.commandCol {
+      max-width: 210px;
+      text-align: right;
+    }
+    &.wifiIcon {
+      width: 36px;
+      text-align: center;
+      img {
+        width: 20px;
+      }
+    }
+    &.lockIcon {
+      width: 30px;
+      text-align: center;
+    }
   }
 }
-.commandCol {
-  max-width: 210px;
-  text-align: right;
-}

src/app/themes/volumio/browse/volumio-browse.html

@@ -6,8 +6,6 @@
           ng-include src="'app/browse/components/browse-nav-buttons.html'">
       </div>
 
-      <h3 id="browseTitle" class="panel-title">Music sources</h3>
-
       <div id="searchBox"
           ng-include src="'app/browse/components/browse-search-box.html'">
       </div>

src/app/themes/volumio/browse/volumio-browse.scss

@@ -7,22 +7,17 @@
 #navButtons {
   @include make-sm-column(3, 0);
   @include make-xs-column(8, 0);
-  font-size: 18px;
+  button {
+    font-size: 22px;
+  }
 }
 
 #searchBox {
-  @include make-sm-column(7, 0);
+  @include make-sm-column(9, 0);
+  @include make-sm-column-offset(12);
   @include make-xs-column(16, 0);
 }
 
-#browseTitle {
-  padding-top: 7px;
-  @include make-sm-column(14, 0);
-  @include breakpoint(xs) {
-    display: none;
-  }
-}
-
 #browseTableSources {
   td {
     text-transform: uppercase;
@@ -42,6 +37,12 @@
       font-size: 13px;
       color: $volumio-accent-color;
     }
+    .image {
+      img {
+        width: 45px;
+        height: 45px;
+      }
+    }
     tr:first-of-type {
       td {
         border-top: none;

src/app/themes/volumio/components/multi-room-dock/volumio-multi-room-dock.html

@@ -1,4 +1,4 @@
-<div class="row" >
+<div class="row" ng-if="multiRoomDock.multiRoomService.devices.length > 1">
   <div id="multiRoomDockWrapper">
     <div class="panel panel-default">
     <div class="panel-heading">

src/app/themes/volumio/components/player-buttons/volumio-player-buttons.html

@@ -7,9 +7,8 @@
   <button
       ng-if="playerButtons.playerService.state.status !== 'play'"
       ng-click="playerButtons.playerService.play()"
-      class="btn btn-link"
-      >
-      <i class="fa fa-play"></i>
+      class="btn btn-link">
+    <i class="fa fa-play"></i>
   </button>
   <button
       ng-if="playerButtons.playerService.state.status === 'play'"
@@ -18,12 +17,12 @@
       ng-class="{active: playerButtons.playerService.state.status === 'play'}">
     <i class="fa fa-pause"></i>
   </button>
-  <button
+  <!-- <button
       ng-click="playerButtons.playerService.stop()"
       class="btn btn-link"
       ng-class="{active: playerButtons.playerService.state.status === 'stop'}">
     <i class="fa fa-stop"></i>
-  </button>
+  </button> -->
   <button
       ng-click="playerButtons.playerService.next()"
       class="btn btn-link">

src/app/themes/volumio/components/track-info/volumio-track-info.html

@@ -24,11 +24,10 @@
       </span>
     </div>
   </div>
-
   <div ng-if="trackInfo.playerService.state.albumart">
     <img
         ng-if="trackInfo.playerService.state.albumart"
-        ng-src="{{trackInfo.playerService.state.albumart}}"
+        ng-src="{{trackInfo.playerService.socketService.host + trackInfo.playerService.state.albumart}}"
         alt="{{trackInfo.playerService.state.album}}"/>
     <i
         ng-if="trackInfo.playerService.state.icon"

src/app/themes/volumio/components/track-info/volumio-track-info.scss

@@ -19,6 +19,6 @@
   }
   img {
     width:100%;
-    margin-top: 10px;
+    margin: 10px auto;
   };
 }

src/app/themes/volumio/footer/volumio-footer.html

@@ -1,23 +1,23 @@
-  <button
-      ui-sref="volumio.browse"
-      class="btn btn-default"
-      ng-class="{selected: state.current.name === 'volumio.browse'}">
-    <i class="fa fa-server"></i>
-    <span>Browse</span>
-  </button>
+<button
+    ui-sref="volumio.browse"
+    class="btn btn-default"
+    ng-class="{selected: state.current.name === 'volumio.browse'}">
+  <i class="fa fa-server"></i>
+  <span>Browse</span>
+</button>
 
-  <button
-      ui-sref="volumio.playback"
-      class="btn btn-default playbackBtn"
-      ng-class="{selected: state.current.name === 'volumio.playback'}">
-    <i class="fa fa-play"></i>
-    <span>Playback</span>
-  </button>
+<button
+    ui-sref="volumio.playback"
+    class="btn btn-default playbackBtn"
+    ng-class="{selected: state.current.name === 'volumio.playback'}">
+  <i class="fa fa-play"></i>
+  <span>Playback</span>
+</button>
 
-  <button
-      ui-sref="volumio.play-queue"
-      class="btn btn-default"
-      ng-class="{selected: state.current.name === 'volumio.play-queue'}">
-    <i class="fa fa-list-ul"></i>
-    <span>Queue</span>
-  </button>
+<button
+    ui-sref="volumio.play-queue"
+    class="btn btn-default"
+    ng-class="{selected: state.current.name === 'volumio.play-queue'}">
+  <i class="fa fa-list-ul"></i>
+  <span>Queue</span>
+</button>

src/app/themes/volumio/play-queue/volumio-play-queue.html

@@ -6,7 +6,7 @@
         ng-repeat="item in playQueue.playQueueService.queue"
         ng-dblclick="playQueue.playQueueService.play($index)">
         <td class="image">
-          <img ng-if="item.albumart" ng-src="{{item.albumart}}" alt="{{item.name}}"/>
+          <img ng-if="item.albumart" ng-src="{{playQueue.playQueueService.socketService.host + item.albumart}}" alt="{{item.name}}"/>
           <i ng-if="item.icon" class="{{item.icon}}"></i>
         </td>
         <td>

src/app/themes/volumio/volumio-style.scss

@@ -147,6 +147,13 @@ $progress-bar-bg: $volumio-green-color;
   }
 }
 
+#footer {
+  > button {
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+}
+
 .btn {
   outline: none !important;
   &.selected {
@@ -203,17 +210,15 @@ table {
     border: none !important;
   }
   td {
-    vertical-align: middle;
+    vertical-align: middle !important;
     padding: 5px 10px;
     &.image {
       padding-left: 6px;
       font-size:30px;
       text-align: center;
-      width: 70px;
+      width: 45px;
       img {
-        // margin-left: 10px;
-        // margin-right: 10px;
-        @include square(70px);
+        @include square(45px);
       }
     }
     &.icon-cover {
@@ -294,3 +299,21 @@ table {
   background-color: red;
   color: $volumio-green-color;
 }
+
+//Scrollbars
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  background: darken($volumio-dark-color, 6%);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: darken($volumio-accent-color, 0%);
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+}