fixes #1537 - [Feature Request] Provide option to select which interface(s) to bind to

dashboard-ui/css/librarymenu.css

@@ -123,6 +123,7 @@
 .headerButtonRight {
     border-width: 0 !important;
     display: inline-block;
+    flex-shrink: 0;
 }
 
     .headerButtonRight:first-child {

dashboard-ui/css/nowplayingbar.css

@@ -84,6 +84,7 @@
 
     .mediaButton.remoteControlButton, .mediaButton.muteButton, .mediaButton.unmuteButton {
         height: 26px;
+        width: 26px;
     }
 
 .nowPlayingDoubleText {
@@ -127,6 +128,7 @@
 
 .toggleRepeatButton {
     height: 32px;
+    width: 32px;
 }
 
 .repeatActive {

dashboard-ui/css/site.css

@@ -651,7 +651,7 @@ progress {
 
     .supporterPromotion:not(.inlineSupporterPromotion) {
         position: absolute;
-        top: 70px;
+        top: 110px;
         right: 20px;
         margin: 0;
     }

dashboard-ui/dashboardhosting.html

@@ -5,48 +5,56 @@
 
             <form class="dashboardHostingForm">
 
-                <ul data-role="listview" class="ulForm">
+                <div class="inputContainer">
-                    <li>
+                    <input is="emby-input" type="text" id="txtLocalAddress" label="${LabelBindToLocalNetworkAddress}" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$*" />
-                        <paper-input type="number" id="txtPortNumber" label="${LabelLocalHttpServerPortNumber}" pattern="[0-9]*" required="required" min="1"></paper-input>
+                    <div class="fieldDescription">${LabelBindToLocalNetworkAddressHelp}</div>
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtPortNumber" label="${LabelLocalHttpServerPortNumber}" pattern="[0-9]*" required="required" min="1" />
                     <div class="fieldDescription">${LabelLocalHttpServerPortNumberHelp}</div>
-                    </li>
+                </div>
-                    <li>
+                <div class="inputContainer">
-                        <paper-input type="number" label="${LabelPublicHttpPort}" id="txtPublicPort" pattern="[0-9]*" required="required" min="1"></paper-input>
+                    <input is="emby-input" type="number" id="txtHttpsPort" pattern="[0-9]*" required="required" min="1" label="${LabelHttpsPort}" />
-                        <div class="fieldDescription">${LabelPublicHttpPortHelp}</div>
-                    </li>
-                    <li>
-                        <paper-input type="number" id="txtHttpsPort" pattern="[0-9]*" required="required" min="1" label="${LabelHttpsPort}"></paper-input>
                     <div class="fieldDescription">${LabelHttpsPortHelp}</div>
-                    </li>
+                </div>
-                    <li>
+                <div class="inputContainer">
-                        <paper-input type="number" id="txtPublicHttpsPort" pattern="[0-9]*" required="required" min="1" label="${LabelPublicHttpsPort}"></paper-input>
+                    <input is="emby-input" type="number" label="${LabelPublicHttpPort}" id="txtPublicPort" pattern="[0-9]*" required="required" min="1" />
+                    <div class="fieldDescription">${LabelPublicHttpPortHelp}</div>
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtPublicHttpsPort" pattern="[0-9]*" required="required" min="1" label="${LabelPublicHttpsPort}" />
                     <div class="fieldDescription">${LabelPublicHttpsPortHelp}</div>
-                    </li>
+                </div>
-                    <li>
+
-                        <paper-input type="text" id="txtCertificatePath" label="${LabelCustomCertificatePath}" style="display: inline-block; width: 80%;"></paper-input>
+                <div class="inputContainer">
+                    <div style="display: flex; align-items: center;">
+                        <div style="flex-grow:1;">
+                            <input is="emby-input" type="text" id="txtCertificatePath" label="${LabelCustomCertificatePath}" />
+                        </div>
                         <button type="button" is="paper-icon-button-light" id="btnSelectCertPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
+                    </div>
                     <div class="fieldDescription">${LabelCustomCertificatePathHelp}</div>
-                    </li>
+                </div>
-                    <li>
+
-                        <paper-input id="txtDdns" type="text" label="${LabelExternalDDNS}"></paper-input>
+                <div class="inputContainer">
+                    <input is="emby-input" id="txtDdns" type="text" label="${LabelExternalDDNS}" />
                     <div class="fieldDescription">${LabelExternalDDNSHelp}</div>
-                    </li>
+                </div>
-                    <li>
+
+                <div>
                     <paper-checkbox id="chkEnableHttps">${LabelEnableHttps}</paper-checkbox>
                     <div class="fieldDescription paperCheckboxFieldDescription">${LabelEnableHttpsHelp}</div>
-                    </li>
+                </div>
-                    <li>
+                <div>
+                    <br />
                     <paper-checkbox id="chkEnableUpnp">${LabelEnableAutomaticPortMap}</paper-checkbox>
                     <div class="fieldDescription paperCheckboxFieldDescription">${LabelEnableAutomaticPortMapHelp}</div>
-                    </li>
+                </div>
-                </ul>
+                <br />
-
+                <br />
-                <ul data-role="listview" class="ulForm">
+                <div>
-                    <li>
                     <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
-                    </li>
+                </div>
-
-                </ul>
             </form>
 
         </div>

dashboard-ui/scripts/dashboardhosting.js

@@ -4,6 +4,10 @@
         Dashboard.showLoadingMsg();
 
         var form = this;
+        var localAddress = form.querySelector('#txtLocalAddress').value;
+        var enableUpnp = $('#chkEnableUpnp', form).checked();
+
+        confirmSelections(localAddress, enableUpnp, function () {
 
             ApiClient.getServerConfiguration().then(function (config) {
 
@@ -12,17 +16,36 @@
                 config.PublicHttpsPort = $('#txtPublicHttpsPort', form).val();
                 config.EnableHttps = $('#chkEnableHttps', form).checked();
                 config.HttpsPortNumber = $('#txtHttpsPort', form).val();
-            config.EnableUPnP = $('#chkEnableUpnp', form).checked();
+                config.EnableUPnP = enableUpnp;
                 config.WanDdns = $('#txtDdns', form).val();
                 config.CertificatePath = $('#txtCertificatePath', form).val();
 
+                config.LocalNetworkAddresses = localAddress ? [localAddress] : [];
+
                 ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult, Dashboard.processErrorResponse);
             });
+        });
 
         // Disable default form submission
         return false;
     }
 
+    function confirmSelections(localAddress, enableUpnp, callback) {
+
+        if (localAddress) {
+
+            require(['alert'], function (alert) {
+                alert({
+                    title: Globalize.translate('TitleHostingSettings'),
+                    text: Globalize.translate('SettingsWarning')
+                }).then(callback);
+            });
+
+        } else {
+            callback();
+        }
+    }
+
     function getTabs() {
         return [
         {
@@ -45,6 +68,8 @@
             $('#txtPublicPort', page).val(config.PublicPort);
             $('#txtPublicHttpsPort', page).val(config.PublicHttpsPort);
 
+            page.querySelector('#txtLocalAddress').value = config.LocalNetworkAddresses[0] || '';
+
             var chkEnableHttps = page.querySelector('#chkEnableHttps');
             chkEnableHttps.checked = config.EnableHttps;
 

dashboard-ui/scripts/site.js

@@ -2440,7 +2440,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/dashboardhosting.html',
-            dependencies: ['paper-checkbox', 'paper-input', 'emby-button'],
+            dependencies: ['paper-checkbox', 'emby-input', 'emby-button'],
             autoFocus: false,
             roles: 'admin',
             controller: 'scripts/dashboardhosting'

dashboard-ui/strings/en-US.json

@@ -2367,5 +2367,9 @@
   "XmlTvKidsCategoriesHelp": "Programs with these categories will be displayed as programs for children. Separate multiple with '|'.",
   "LabelMovieCategories": "Movie categories:",
   "XmlTvMovieCategoriesHelp": "Programs with these categories will be displayed as movies. Separate multiple with '|'.",
-  "XmlTvPathHelp": "A path to an xml tv file. Emby will read this file and periodically check it for updates. You are responsible for creating and updating the file."
+  "XmlTvPathHelp": "A path to an xml tv file. Emby will read this file and periodically check it for updates. You are responsible for creating and updating the file.",
+  "LabelBindToLocalNetworkAddress": "Bind to local network address:",
+  "LabelBindToLocalNetworkAddressHelp": "Optional. Override the local address to bind the http server to. If left empty, the server will bind to all availabile addresses. Changing this value requires restarting Emby Server.",
+  "TitleHostingSettings": "Hosting Settings",
+  "SettingsWarning": "Changing these values may cause instability or connectivity failures. If you experience any problems, we recommend changing them back to default."
 }