feat: web interface: mode icon instead of 'Mode'

static/js/custom.js

@@ -52,6 +52,12 @@ var playModeBtns = {
     repeat: $('#repeat-mode-btn'),
     autoplay: $('#autoplay-mode-btn')
 };
+var playModeIcon = {
+    'one-shot': 'fa-tasks',
+    random: 'fa-random',
+    repeat: 'fa-redo',
+    autoplay: 'fa-robot'
+};
 
 function request(_url, _data, refresh = false) {
     console.log(_data);
@@ -263,13 +269,17 @@ function updateControls(empty, play, mode, volume) {
         }
     }
 
-    let otherModes = Object.assign({}, playModeBtns);
+    for (const otherModes of Object.values(playModeBtns)) {
-    delete otherModes[mode];
+        otherModes.removeClass('active');
-    for (_mode in otherModes) {
-        otherModes[_mode].removeClass('active');
     }
     playModeBtns[mode].addClass('active');
 
+    let playModeIndicator = $('#modeIndicator');
+    for (const icon_class of Object.values(playModeIcon)) {
+        playModeIndicator.removeClass(icon_class);
+    }
+    playModeIndicator.addClass(playModeIcon[mode]);
+
     if (volume != last_volume) {
         last_volume = volume;
         if (volume > 1) {

templates/index.html

@@ -36,7 +36,7 @@
                     <div class="dropdown mb-2 btn-space" style="margin-left: auto;">
                         <button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode"
                                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            Mode
+                            <i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i>
                         </button>
                         <div class="dropdown-menu" aria-labelledby="play-mode">
                             <a class="dropdown-item" href="#" id="one-shot-mode-btn"