Add query param to replace the connect dialog with a single join button

E.g. https://server/?address=server&port=443&username=test&joinDialog=true

app/index.html

@@ -21,7 +21,7 @@
     </div>
     <div id="container" style="display: none" data-bind="visible: true">
       <!-- ko with: connectDialog --> 
-      <div class="connect-dialog dialog" data-bind="visible: visible">
+      <div class="connect-dialog dialog" data-bind="visible: visible() && !joinOnly()">
           <div class="dialog-header">
             Connect to Server
           </div>
@@ -55,6 +55,16 @@
           </form>
         </div>
       <!-- /ko -->
+      <!-- ko with: connectDialog -->
+      <div class="join-dialog dialog" data-bind="visible: visible() && joinOnly()">
+          <div class="dialog-header">
+            Mumble Voice Conference
+          </div>
+          <form data-bind="submit: connect">
+            <input class="dialog-submit" type="submit" value="Join Conference">
+          </form>
+        </div>
+      <!-- /ko -->
       <!-- ko with: settingsDialog -->
       <div class="settings-dialog dialog" data-bind="visible: $data">
           <div class="dialog-header">
@@ -106,7 +116,8 @@
       <div class="toolbar">
         <img class="handle-horizontal" src="/svg/handle_horizontal.svg">
         <img class="handle-vertical" src="/svg/handle_horizontal.svg">
-        <img class="tb-connect" data-bind="click: connectDialog.show"
+        <img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(),
+                                           click: connectDialog.show"
                       rel="connect" src="/svg/applications-internet.svg">
         <img class="tb-information" data-bind="click: connectionInfo.show"
                       rel="information" src="/svg/information_icon.svg">

app/index.js

@@ -28,6 +28,7 @@ function ConnectDialog () {
   self.token = ko.observable('')
   self.username = ko.observable('')
   self.password = ko.observable('')
+  self.joinOnly = ko.observable(false)
   self.visible = ko.observable(true)
   self.show = self.visible.bind(self.visible, true)
   self.hide = self.visible.bind(self.visible, false)
@@ -580,21 +581,29 @@ window.mumbleUi = ui
 
 window.onload = function () {
   var queryParams = url.parse(document.location.href, true).query
+  var useJoinDialog = queryParams.joinDialog
   if (queryParams.address) {
     ui.connectDialog.address(queryParams.address)
+  } else {
+    useJoinDialog = false
   }
   if (queryParams.port) {
     ui.connectDialog.port(queryParams.port)
+  } else {
+    useJoinDialog = false
   }
   if (queryParams.token) {
     ui.connectDialog.token(queryParams.token)
   }
   if (queryParams.username) {
     ui.connectDialog.username(queryParams.username)
+  } else {
+    useJoinDialog = false
   }
   if (queryParams.password) {
     ui.connectDialog.password(queryParams.password)
   }
+  ui.connectDialog.joinOnly(useJoinDialog)
   ko.applyBindings(ui)
 }
 

themes/MetroMumbleLight/main.css

@@ -266,6 +266,19 @@ form {
 .settings-dialog .mic-volume {
   height: 100%;
 }
+.join-dialog {
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.join-dialog .dialog-submit {
+  float: none;
+  width: 200px;
+  position: absolute;
+  top: calc(50% - 10px);
+  left: calc(50% - 100px);
+}
 .connect-dialog {
   width: 300px;
   height: 227px;