Add a navigation filter to Music Library

src/app/browse/browse.controller.js

@@ -17,6 +17,7 @@ class BrowseController {
     this.$scope = $scope;
     this.$rootScope = $rootScope;
     this.uiSettingsService = uiSettingsService;
+    this.isMusicLibrary = false;
 
     if (this.browseService.isBrowsing || this.browseService.isSearching) {
       this.renderBrowseTable();
@@ -30,13 +31,16 @@ class BrowseController {
 
   fetchLibrary(item, back = false) {
     this.$log.debug(item);
+    if (item.uri.startsWith('music-library')) { this.isMusicLibrary = true;}
+    else { this.isMusicLibrary = false;}
     if (item.uri !== 'cd') {
       this.browseService.fetchLibrary(item, back);
     }
   }
 
   backHome() {
     this.searchField = '';
+    this.isMusicLibrary = false;
     this.browseService.backHome();
   }
 
@@ -282,9 +286,27 @@ class BrowseController {
         }
 
         this.table += `<div class="listWrapper">`;
+        var firstChar = '';
         list.items.forEach((item, itemIndex) => {
           //Print items
           this.table += `<div class="itemWrapper"><div class="itemTab">`;
+
+          var currentChar = item.title.charAt(0).toLowerCase();
+          var isNumber = RegExp('[0-9]');
+          var isAlpha = RegExp('[a-z]');
+          if (!isNumber.test(currentChar) && !isAlpha.test(currentChar)) {
+            // if 1char is not a number and not an alpha, then use # as first char
+            currentChar = '0';
+          }
+          else if (isNumber.test(currentChar)) {
+            // if 1char is a number, then use # as first char
+            currentChar = '0';
+          }
+          if (firstChar != currentChar) {
+            this.table += `<a id="scrollto-${currentChar}"></a>`;
+            firstChar = currentChar;
+          }
+
           if (item.icon || item.albumart) {
           this.table += `<div class="image" id="${item.active ? 'source-active': ''}"
               onclick="${angularThis}.clickListItemByIndex(${listIndex}, ${itemIndex})">`;
@@ -393,6 +415,33 @@ class BrowseController {
       }
     }
   }
+
+  showAlphaFilter() {
+    var alphalist = "0abcdefghijklmnopqrstuvwxyz".split("");
+    let
+      templateUrl = 'app/browse/components/modal/modal-alphanav.html',
+      controller = 'ModalAlphanavController',
+      params = {
+        browseController: this,
+        title: 'Alphabetic Navigation',
+        alphabet: alphalist,
+      };
+    this.modalService.openModal(
+      controller,
+      templateUrl,
+      params,
+      'lg');
+  }
+
+  scrollTo(hash) {
+    var element = angular.element('#scrollto-'+hash);
+    if(element.length > 0) {
+      var container = angular.element('#browseTablesWrapper');
+      container.scrollTop(0);
+      var scrolling = element.offset().top - container.offset().top;
+      container.animate({scrollTop: scrolling}, "fast");
+    }
+  }
 }
 
 export default BrowseController;

src/app/browse/components/browse-nav-buttons.html

@@ -33,3 +33,9 @@
     title="{{'COMMON.RIP' | translate}}">
   <i class="fa fa-download"></i>
 </button>
+<button
+    class="btn-link"
+    ng-click="browse.showAlphaFilter()"
+    ng-if="browse.isMusicLibrary">
+  <i class="fa fa-filter"></i>
+</button>

src/app/browse/components/modal/modal-alphanav.controller.js

@@ -0,0 +1,23 @@
+class ModalAlphanavController {
+  constructor(socketService, $uibModalInstance, dataObj) {
+    'ngInject';
+    this.socketService = socketService;
+    this.$uibModalInstance = $uibModalInstance;
+    this.dataObj = dataObj;
+  }
+
+  ok() {
+    this.$uibModalInstance.close();
+  }
+
+  cancel() {
+    this.$uibModalInstance.dismiss();
+  }
+
+  alphaClick(alpha) {
+    this.dataObj.browseController.scrollTo(alpha);
+    this.$uibModalInstance.close();
+  }
+}
+
+export default ModalAlphanavController;

src/app/browse/components/modal/modal-alphanav.html

@@ -0,0 +1,14 @@
+<div class="modal-header">
+  <h3 class="modal-title">{{::modal.dataObj.title}}</h3>
+</div>
+<div class="modal-body">
+  <ul style="list-style-type:none;">
+        <li style="display:inline-block; padding: 4px; font-family: monospace;" ng-repeat="alpha in modal.dataObj.alphabet">
+          <button class="btn btn-primary" ng-click="modal.alphaClick(alpha)"><span>{{alpha}}</span></button>
+        </li>
+    </ul>
+</div>
+
+<div class="modal-footer">
+  <button class="btn btn-primary" ng-click="modal.ok()"><span translate="COMMON.OK"></span></button>
+</div>

src/app/index.module.js

@@ -93,7 +93,7 @@ import ModalTrackManagerActionsController from
   './components/track-manager/components/modals/modal-track-manager-actions.controller';
 import ModalNetwordDrivesPasswordController from './plugin/core-plugin/modals/modal-network-drive-password.controller';
 import ModalCryptoController from './components/modals/modal-crypto.controller';
-
+import ModalAlphanavController from './browse/components/modal/modal-alphanav.controller';
 
 //Core plugin controller
 import WifiPluginController from './plugin/core-plugin/wifi-plugin.controller';
@@ -226,6 +226,7 @@ angular.module('volumio', [
   .controller('ModalTrackManagerActionsController', ModalTrackManagerActionsController)
   .controller('ModalNetwordDrivesPasswordController', ModalNetwordDrivesPasswordController)
   .controller('ModalCryptoController', ModalCryptoController)
+  .controller('ModalAlphanavController', ModalAlphanavController)
 
 
   .controller('WifiPluginController',  WifiPluginController)

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

@@ -7,7 +7,10 @@
 }
 .navButtons {
   button {
-    padding: 4px 10px;
+    padding: 4px 4px;
+    @media screen and (min-width: 380px) {
+        padding: 4px 10px;
+    }
     font-size: 24px;
   }
 }