* VRFS-2035 allow static port config in UI

web/app/assets/javascripts/dialog/clientPreferencesDialog.js

@@ -11,17 +11,76 @@
     var $dialog = null;
     var $autoStartField = null;
     var $autoStartInput = null;
+    var $useStaticPortField = null;
+    var $useStaticPortInput = null;
+    var $staticPortField = null;
+    var $staticPortInput = null;
     var $btnSave = null;
 
+    var beforeValues = {}
+
+    function validate() {
+
+      var staticPort = $staticPortInput.val();
+
+      staticPort = new Number(staticPort);
+
+      console.log("staticPort", staticPort)
+      if(context._.isNaN(staticPort)) {
+        app.layout.notify({title: 'No Settings Have Been Saved!', text: 'Please enter a number from 1026-49150.'})
+        return false;
+      }
+
+      /**
+      if (staticPort % 2 == 1) {
+        app.layout.notify({title: 'No Settings Have Been Saved!', text: 'Please pick an even port number.'})
+        return false;
+      }
+       */
+
+      if (staticPort < 1026 || staticPort >= 65525) {
+        app.layout.notify({title: 'No Settings Have Been Saved!', text: 'Please pick a port from 1026 to 65524.'})
+        return false;
+      }
+
+      return true;
+    }
+
     function events() {
       context.JK.checkbox($autoStartInput);
+      context.JK.checkbox($useStaticPortInput);
 
       $btnSave.click(function() {
 
+        if (!validate()) {
+          return false;
+        }
+
         var autostart = $autoStartField.find('.icheckbox_minimal').is('.checked');
         context.jamClient.SetAutoStart(autostart);
+
+        var useStaticPort = $useStaticPortField.find('.icheckbox_minimal').is('.checked');
+        context.jamClient.SetUseStaticPort(useStaticPort);
+
+        var staticPort = new Number($staticPortInput.val());
+        context.jamClient.SetStaticPort(staticPort);
+
         app.layout.closeDialog('client-preferences-dialog')
         context.jamClient.SaveSettings();
+
+        logger.debug("New Client Settings", {autostart: autostart, useStaticPort: useStaticPort, staticPort: staticPort})
+        if ((beforeValues.useStaticPort != useStaticPort) || (beforeValues.staticPort != staticPort)) {
+          context.JK.Banner.showYesNo({
+            title: "Please Restart",
+            html: "The changes you made won't take effect until you restart JamKazam. Restart now?",
+            yes: function() {
+              context.jamClient.RestartApplication();
+            },
+            no : function() {
+              context.JK.Banner.hide();
+            }
+          })
+        }
         return false;
       })
     }
@@ -29,6 +88,16 @@
     function beforeShow() {
       var autostart = context.jamClient.GetAutoStart();
       autostart ? $autoStartInput.iCheck('check') : $autoStartInput.iCheck('uncheck');
+
+      var useStaticPort = context.jamClient.GetUseStaticPort();
+      useStaticPort ? $useStaticPortInput.iCheck('check') : $useStaticPortInput.iCheck('uncheck');
+
+      var staticPort = context.jamClient.GetStaticPort();
+
+      $staticPortInput.val(staticPort);
+
+      beforeValues = {autostart: autostart, useStaticPort: useStaticPort, staticPort: staticPort}
+      logger.debug("Client Settings:", beforeValues)
     }
 
     function afterHide() {
@@ -47,6 +116,10 @@
       $dialog = $(dialogId);
       $autoStartField = $dialog.find('.field[data-purpose="autostart"]')
       $autoStartInput = $dialog.find('input[name="autostart"]')
+      $useStaticPortField = $dialog.find('.field[data-purpose="use-static-port"]')
+      $useStaticPortInput = $dialog.find('input[name="use-static-port"]')
+      $staticPortField = $dialog.find('.field[data-purpose="static-port"]')
+      $staticPortInput = $dialog.find('input[name="static-port"]')
       $btnSave = $dialog.find('.btnSave')
 
       events();

web/app/assets/stylesheets/dialogs/clientPreferencesDialog.css.scss

@@ -4,42 +4,52 @@
 
 #client-preferences-dialog {
 
-  height:200px;
-  min-height:200px;
   form {
-    width:100%;
+    width: 100%;
     @include border_box_sizing;
 
     .column {
 
-      float:left;
+      float: left;
       @include border_box_sizing;
 
       &:nth-of-type(1) {
-        width:100%;
+        width: 100%;
       }
     }
   }
 
   label {
-    display:inline;
+    display: inline;
     vertical-align: middle;
   }
 
   .icheckbox_minimal {
-    margin-right:5px;
+    margin-right: 5px;
     vertical-align: middle;
   }
 
   .field[data-purpose="autostart"] {
-    line-height:18px;
+    line-height: 18px;
     vertical-align: middle;
   }
 
   p.hint {
-    font-size:12px;
-    line-height:15px;
-    margin:5px 0 0 23px;
+    font-size: 12px;
+    line-height: 15px;
+    margin: 5px 0 0 23px;
   }
 
+  .input {
+    max-width: 70px;
+    display: inline-block;
+    margin-right: 10px;
+    input {
+      width: 100%;
+      @include border_box_sizing;
+    }
+  }
+  .field {
+    margin-bottom: 20px;
+  }
 }

web/app/views/dialogs/_clientPreferencesDialog.html.slim

@@ -6,9 +6,20 @@
     form action='post'
       .column
         .field data-purpose="autostart"
-          input type="checkbox" name="autostart"
+          .input
+            input type="checkbox" name="autostart"
           label for="autostart" Start JamKazam when system starts
-          p.hint We strongly recommend that you leave this box checked to allow the JamKazam application to start each time you start your computer. It will run quietly in the background, and you won't notice it, but it will collect critical latency data periodically to help you connect with other musicians, and it will also upload/download any recordings you make in sessions.
+          p.hint If you use JamKazam mostly to play with others in real-time, we recommend that you check this box to allow the JamKazam application to start each time you start your computer. It will run quietly in the background, and you won't notice it, but it will collect critical latency data periodically to help you connect with other musicians, and it will also upload/download any recordings you make in sessions.
+        .field data-purpose="use-static-port"
+          .input
+            input type="checkbox" name="use-static-port"
+          label for="use-static-port" Always use the same set of UDP ports
+          p.hint If you are having problems with the network test or not hearing audio from others and need to configure Port Forwarding in your router, check this box.
+        .field data-purpose="static-port"
+          .input
+            input type="number" name="static-port"
+          label for="static-port" The first port that the client will open
+          p.hint You can specify any port you like, but we recommend an even number in the range including 1026-49150 to avoid conflicts with other programs.  When configuring Port Forwarding in your router, be sure to open this port along with the next ten.  For example, if this field is 12000, then in your router, forward ports 12000-12010 to your computer's IP address.
         br clear='all'
       br clear='all'
     .buttons