Add setting for showing user count after channel name

app/config.js

@@ -19,6 +19,7 @@ window.mumbleWebConfig = {
     'vadLevel': 0.3,
     'toolbarVertical': false,
     'showAvatars': 'always', // one of 'always', 'own_channel', 'linked_channel', 'minimal_only', 'never'
+    'userCountInChannelName': false,
     'audioBitrate': 40000, // bits per second
     'samplesPerPacket': 960
   },

app/index.html

@@ -249,6 +249,12 @@
                       <option value="never">Never</option>
                   </td>
                 </tr>
+                <tr>
+                    <td colspan="2">
+                        <input type="checkbox" data-bind="checked: userCountInChannelName">
+                        Show user count after channel name
+                    </td>
+                </tr>
             </table>
             <div class="dialog-footer">
               <input class="dialog-close" type="button" data-bind="click: $root.closeSettings" value="Cancel">
@@ -492,7 +498,12 @@
             data-bind="visible: $root.thisUser().channel() === $data">
           <img class="channel-icon-linked" src="/svg/channel_linked.svg"
             data-bind="visible: linked() && $root.thisUser().channel() !== $data">
-          <div class="channel-name" data-bind="text: name"></div>
+          <div class="channel-name">
+            <span data-bind="text: name"></span>
+            <!-- ko if: $root.settings.userCountInChannelName() && userCount() !== 0 -->
+            &nbsp;(<span data-bind="text: userCount()"></span>)
+            <!-- /ko -->
+          </div>
         </div>
         <!-- ko if: expanded -->
         <!-- ko foreach: users -->

app/index.js

@@ -147,6 +147,7 @@ class SettingsDialog {
     this.testVadLevel = ko.observable(0)
     this.testVadActive = ko.observable(false)
     this.showAvatars = ko.observable(settings.showAvatars())
+    this.userCountInChannelName = ko.observable(settings.userCountInChannelName())
     // Need to wrap this in a pureComputed to make sure it's always numeric
     let audioBitrate = ko.observable(settings.audioBitrate)
     this.audioBitrate = ko.pureComputed({
@@ -181,6 +182,7 @@ class SettingsDialog {
     settings.pttKey = this.pttKey()
     settings.vadLevel = this.vadLevel()
     settings.showAvatars(this.showAvatars())
+    settings.userCountInChannelName(this.userCountInChannelName())
     settings.audioBitrate = this.audioBitrate()
     settings.samplesPerPacket = this.samplesPerPacket()
   }
@@ -243,6 +245,7 @@ class Settings {
     this.vadLevel = load('vadLevel') || defaults.vadLevel
     this.toolbarVertical = load('toolbarVertical') || defaults.toolbarVertical
     this.showAvatars = ko.observable(load('showAvatars') || defaults.showAvatars)
+    this.userCountInChannelName = ko.observable(load('userCountInChannelName') || defaults.userCountInChannelName)
     this.audioBitrate = Number(load('audioBitrate')) || defaults.audioBitrate
     this.samplesPerPacket = Number(load('samplesPerPacket')) || defaults.samplesPerPacket
   }
@@ -254,6 +257,7 @@ class Settings {
     save('vadLevel', this.vadLevel)
     save('toolbarVertical', this.toolbarVertical)
     save('showAvatars', this.showAvatars())
+    save('userCountInChannelName', this.userCountInChannelName())
     save('audioBitrate', this.audioBitrate)
     save('samplesPerPacket', this.samplesPerPacket)
   }
@@ -595,6 +599,9 @@ class GlobalBindings {
         users: ko.observableArray(),
         linked: ko.observable(false)
       }
+      ui.userCount = () => {
+        return ui.channels().reduce((acc, c) => acc + c.userCount(), ui.users().length)
+      }
       ui.openContextMenu = (_, event) => openContextMenu(event, this.channelContextMenu, ui)
       ui.canJoin = () => {
         return true // TODO check for perms

themes/MetroMumbleLight/main.scss

@@ -420,6 +420,10 @@ form {
   width: 100%;
   margin: 0px;
 }
+.settings-dialog table input[type="checkbox"] {
+  width: auto;
+  margin: auto;
+}
 .settings-dialog .mic-volume-container {
   height: 10px;
   border: 3px solid $mic-volume-border-color;