mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Add files via upload
For use with https://github.com/jellyfin/jellyfin/pull/4124
This commit is contained in:
parent
80c700cc71
commit
db4235e2f8
2 changed files with 268 additions and 22 deletions
202
src/controllers/dashboard/networking.html
Normal file
202
src/controllers/dashboard/networking.html
Normal file
|
@ -0,0 +1,202 @@
|
|||
<div id="networkingPage" data-role="page" class="page type-interior advancedConfigurationPage">
|
||||
<div>
|
||||
<div class="content-primary">
|
||||
<form class="dashboardHostingForm">
|
||||
<div class="verticalSection verticalSection-extrabottompadding">
|
||||
<div class="sectionTitleContainer flex align-items-center">
|
||||
<h2 class="sectionTitle">${TabNetworking}</h2>
|
||||
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/networking/index.html">${Help}</a>
|
||||
</div>
|
||||
|
||||
<fieldset class='verticalSection verticalSection-extrabottompadding'>
|
||||
<legend><h3>${HeaderServerAddressSettings}</h3></legend>
|
||||
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="number" id="txtPortNumber" label="${LabelLocalHttpServerPortNumber}" pattern="[0-9]*" required="required" min="1" max="65535" />
|
||||
<div class="fieldDescription">${LabelLocalHttpServerPortNumberHelp}</div>
|
||||
</div>
|
||||
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkEnableHttps" />
|
||||
<span>${LabelEnableHttps}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${LabelEnableHttpsHelp}</div>
|
||||
</div>
|
||||
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="number" id="txtHttpsPort" pattern="[0-9]*" required="required" min="1" max="65535" label="${LabelHttpsPort}" />
|
||||
<div class="fieldDescription">${LabelHttpsPortHelp}</div>
|
||||
</div>
|
||||
|
||||
<div class="inputContainer fldBaseUrl">
|
||||
<input is="emby-input" id="txtBaseUrl" type="text" label="${LabelBaseUrl}" />
|
||||
<div class="fieldDescription">${LabelBaseUrlHelp}</div>
|
||||
</div>
|
||||
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="text" id="txtLocalAddress" label="${LabelBindToLocalNetworkAddress}" />
|
||||
<div class="fieldDescription">${LabelBindToLocalNetworkAddressHelp}</div>
|
||||
</div>
|
||||
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="text" id="txtLanNetworks" label="${LabelLanNetworks}" />
|
||||
<div class="fieldDescription">${LanNetworksHelp}</div>
|
||||
</div>
|
||||
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="text" id="txtKnownProxies" label="${LabelKnownProxies}" />
|
||||
<div class="fieldDescription">${KnownProxiesHelp}</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class='verticalSection verticalSection-extrabottompadding'>
|
||||
<legend><h3>${HeaderHttpsSettings}</h3></legend>
|
||||
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkRequireHttps" />
|
||||
<span>${LabelRequireHttps}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${LabelRequireHttpsHelp}</div>
|
||||
</div>
|
||||
|
||||
<div class="inputContainer fldCertificatePath">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div style="flex-grow:1;">
|
||||
<input is="emby-input" type="text" id="txtCertificatePath" label="${LabelCustomCertificatePath}" autocomplete="off" />
|
||||
</div>
|
||||
<button type="button" is="paper-icon-button-light" id="btnSelectCertPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
|
||||
</div>
|
||||
<div class="fieldDescription">${LabelCustomCertificatePathHelp}</div>
|
||||
</div>
|
||||
|
||||
<div class="inputContainer fldCertPassword">
|
||||
<input is="emby-input" id="txtCertPassword" type="password" label="${LabelCertificatePassword}" autocomplete="new-password" />
|
||||
<div class="fieldDescription">${LabelCertificatePasswordHelp}</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class='verticalSection verticalSection-extrabottompadding'>
|
||||
<legend><h3>${HeaderRemoteAccessSettings}</h3></legend>
|
||||
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkRemoteAccess" />
|
||||
<span>${AllowRemoteAccess}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${AllowRemoteAccessHelp}</div>
|
||||
</div>
|
||||
<div class="inputContainer fldExternalAddressFilter hide">
|
||||
<input is="emby-input" type="text" id="txtExternalAddressFilter" label="${LabelAllowedRemoteAddresses}" />
|
||||
<div class="fieldDescription">${AllowedRemoteAddressesHelp}</div>
|
||||
</div>
|
||||
<div class="selectContainer fldExternalAddressFilterMode hide">
|
||||
<select is="emby-select" id="selectExternalAddressFilterMode" label="${LabelAllowedRemoteAddressesMode}">
|
||||
<option value="whitelist">${Whitelist}</option>
|
||||
<option value="blacklist">${Blacklist}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="checkboxContainer checkboxContainer-withDescription fldEnableUpnp hide">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkEnableUpnp" />
|
||||
<span>${LabelEnableAutomaticPortMap}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${LabelEnableAutomaticPortMapHelp}</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkCreateHttpPortMap" />
|
||||
<span>${LabelCreateHttpPortMap}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${LabelCreateHttpPortMapHelp}</div>
|
||||
</div>
|
||||
<div class="inputContainer fldPublicPort hide">
|
||||
<input is="emby-input" type="number" label="${LabelPublicHttpPort}" id="txtPublicPort" pattern="[0-9]*" required="required" min="1" max="65535" />
|
||||
<div class="fieldDescription">${LabelPublicHttpPortHelp}</div>
|
||||
</div>
|
||||
<div class="inputContainer fldPublicHttpsPort hide">
|
||||
<input is="emby-input" type="number" id="txtPublicHttpsPort" pattern="[0-9]*" required="required" min="1" max="65535" label="${LabelPublicHttpsPort}" />
|
||||
<div class="fieldDescription">${LabelPublicHttpsPortHelp}</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class='verticalSection verticalSection-extrabottompadding'>
|
||||
<legend><h3>${HeaderNetworking}</h3></legend>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkEnableIP4" />
|
||||
<span>${LabelEnableIP4}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${LabelEnableIP4Help}</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkEnableIP6" />
|
||||
<span>${LabelEnableIP6}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${LabelEnableIP6Help}</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
|
||||
<fieldset class='verticalSection verticalSection-extrabottompadding'>
|
||||
<legend><h3>${HeaderAutoDiscovery}</h3></legend>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkEnableAutoDiscovery" />
|
||||
<span>${LabelAutomaticDiscovery}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${LabelAutomaticDiscoveryHelp}</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class='verticalSection verticalSection-extrabottompadding'>
|
||||
<legend><h3>${HeaderPortRanges}</h3></legend>
|
||||
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="text" id="txtPublishedServer" label="${LabelPublishedServerUri}" />
|
||||
<div class="fieldDescription">${LabelPublishedServerUriHelp}</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="text" id="txtUDPPortRange" pattern="[0-9\-]*" label="${LabelUDPPortRange}" />
|
||||
<div class="fieldDescription">${LabelUDPPortRangeHelp}</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="text" id="txtHDHomerunPortRange" pattern="[0-9\-]*" label="${LabelHDHomerunPortRange}" />
|
||||
<div class="fieldDescription">${LabelHDHomerunPortRangeHelp}</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class='verticalSection verticalSection-extrabottompadding'>
|
||||
<legend><h3>${HeaderDebugging}</h3></legend>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkEnableSSDPTracing" />
|
||||
<span>${LabelEnableSSDPTracing}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${LabelEnableSSDPTracingHelp}</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="text" id="txtSSDPTracingFilter" pattern="[0-9\.]*" label="${LabelSSDPTracingFilter}" />
|
||||
<div class="fieldDescription">${LabelSSDPTracingFilterHelp}</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkCreateHttpPortMap" />
|
||||
<span>${LabelAutoDiscoveryTracing}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${LabelAutoDiscoveryTracingHelp}</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div>
|
||||
<button is="emby-button" type="submit" class="raised button-submit block">
|
||||
<span>${Save}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,12 +1,16 @@
|
|||
define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) {
|
||||
'use strict';
|
||||
import loading from 'loading';
|
||||
import globalize from 'globalize';
|
||||
import 'emby-checkbox';
|
||||
import 'emby-select';
|
||||
|
||||
/* eslint-disable indent */
|
||||
|
||||
function onSubmit(e) {
|
||||
var form = this;
|
||||
var localAddress = form.querySelector('#txtLocalAddress').value;
|
||||
var enableUpnp = form.querySelector('#chkEnableUpnp').checked;
|
||||
const form = this;
|
||||
const localAddress = form.querySelector('#txtLocalAddress').value;
|
||||
const enableUpnp = form.querySelector('#chkEnableUpnp').checked;
|
||||
confirmSelections(localAddress, enableUpnp, function () {
|
||||
var validationResult = getValidationAlert(form);
|
||||
const validationResult = getValidationAlert(form);
|
||||
|
||||
if (validationResult) {
|
||||
showAlertText(validationResult);
|
||||
|
@ -15,7 +19,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
|
|||
|
||||
validateHttps(form).then(function () {
|
||||
loading.show();
|
||||
ApiClient.getServerConfiguration().then(function (config) {
|
||||
ApiClient.getNamedConfiguration('network').then(function (config) {
|
||||
config.LocalNetworkSubnets = form.querySelector('#txtLanNetworks').value.split(',').map(function (s) {
|
||||
return s.trim();
|
||||
}).filter(function (s) {
|
||||
|
@ -26,7 +30,24 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
|
|||
}).filter(function (s) {
|
||||
return s.length > 0;
|
||||
});
|
||||
config.IsRemoteIPFilterBlacklist = 'blacklist' === form.querySelector('#selectExternalAddressFilterMode').value;
|
||||
config.KnownProxies = form.querySelector('#txtKnownProxies').value.split(',').map(function (s) {
|
||||
return s.trim();
|
||||
}).filter(function (s) {
|
||||
return s.length > 0;
|
||||
});
|
||||
config.LocalNetworkAddresses = form.querySelector('#txtLocalAddress').value.split(',').map(function (s) {
|
||||
return s.trim();
|
||||
}).filter(function (s) {
|
||||
return s.length > 0;
|
||||
});
|
||||
|
||||
config.PublishedServerUriBySubnet = form.querySelector('#txtPublishedServer').value.split(',').map(function (s) {
|
||||
return s.trim();
|
||||
}).filter(function (s) {
|
||||
return s.length > 0;
|
||||
});
|
||||
|
||||
config.IsRemoteIPFilterBlacklist = form.querySelector('#selectExternalAddressFilterMode').value === 'blacklist';
|
||||
config.PublicPort = form.querySelector('#txtPublicPort').value;
|
||||
config.PublicHttpsPort = form.querySelector('#txtPublicHttpsPort').value;
|
||||
config.HttpServerPortNumber = form.querySelector('#txtPortNumber').value;
|
||||
|
@ -38,8 +59,18 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
|
|||
config.EnableRemoteAccess = form.querySelector('#chkRemoteAccess').checked;
|
||||
config.CertificatePath = form.querySelector('#txtCertificatePath').value || null;
|
||||
config.CertificatePassword = form.querySelector('#txtCertPassword').value || null;
|
||||
config.LocalNetworkAddresses = localAddress ? [localAddress] : [];
|
||||
ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult, Dashboard.processErrorResponse);
|
||||
|
||||
config.UPnPCreateHttpPortMap = form.querySelector('#chkCreateHttpPortMap').checked;
|
||||
config.AutoDiscovery = form.querySelector('#chkAutodiscovery').checked;
|
||||
config.AutoDiscoveryTracing = form.querySelector('#chkAutodiscoveryTracing').checked;
|
||||
config.EnableIP6 = form.querySelector('#chkEnableIP6').checked;
|
||||
config.EnableIP4 = form.querySelector('#chkEnableIP4').checked;
|
||||
config.UPnPCreateHttpPortMap = form.querySelector('#chkCreateHttpPortMap').checked;
|
||||
config.UDPPortRange = form.querySelector('#txtUDPPortRange').value || null;
|
||||
config.HDHomerunPortRange = form.querySelector('#txtHDHomerunPortRange').checked || null;
|
||||
config.EnableSSDPTracing = form.querySelector('#chkEnableSSDPTracing').checked;
|
||||
config.SSDPTracingFilter = form.querySelector('#txtSSDPTracingFilter').value || null;
|
||||
ApiClient.updateNamedConfiguration('network', config).then(Dashboard.processServerConfigurationUpdateResult, Dashboard.processErrorResponse);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -47,7 +78,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
|
|||
}
|
||||
|
||||
function triggerChange(select) {
|
||||
var evt = document.createEvent('HTMLEvents');
|
||||
const evt = document.createEvent('HTMLEvents');
|
||||
evt.initEvent('change', false, true);
|
||||
select.dispatchEvent(evt);
|
||||
}
|
||||
|
@ -65,8 +96,8 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
|
|||
}
|
||||
|
||||
function validateHttps(form) {
|
||||
var certPath = form.querySelector('#txtCertificatePath').value || null;
|
||||
var httpsEnabled = form.querySelector('#chkEnableHttps').checked;
|
||||
const certPath = form.querySelector('#txtCertificatePath').value || null;
|
||||
const httpsEnabled = form.querySelector('#chkEnableHttps').checked;
|
||||
|
||||
if (httpsEnabled && !certPath) {
|
||||
return showAlertText({
|
||||
|
@ -80,7 +111,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
|
|||
|
||||
function showAlertText(options) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
require(['alert'], function (alert) {
|
||||
import('alert').then(({default: alert}) => {
|
||||
alert(options).then(resolve, reject);
|
||||
});
|
||||
});
|
||||
|
@ -97,25 +128,37 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
|
|||
}
|
||||
}
|
||||
|
||||
return function (view, params) {
|
||||
export default function (view, params) {
|
||||
function loadPage(page, config) {
|
||||
page.querySelector('#txtPortNumber').value = config.HttpServerPortNumber;
|
||||
page.querySelector('#txtPublicPort').value = config.PublicPort;
|
||||
page.querySelector('#txtPublicHttpsPort').value = config.PublicHttpsPort;
|
||||
page.querySelector('#txtLocalAddress').value = config.LocalNetworkAddresses[0] || '';
|
||||
page.querySelector('#txtLanNetworks').value = (config.LocalNetworkSubnets || []).join(', ');
|
||||
page.querySelector('#txtKnownProxies').value = (config.KnownProxies || []).join(', ');
|
||||
page.querySelector('#txtExternalAddressFilter').value = (config.RemoteIPFilter || []).join(', ');
|
||||
page.querySelector('#selectExternalAddressFilterMode').value = config.IsRemoteIPFilterBlacklist ? 'blacklist' : 'whitelist';
|
||||
page.querySelector('#chkRemoteAccess').checked = null == config.EnableRemoteAccess || config.EnableRemoteAccess;
|
||||
page.querySelector('#chkRemoteAccess').checked = config.EnableRemoteAccess == null || config.EnableRemoteAccess;
|
||||
page.querySelector('#txtHttpsPort').value = config.HttpsPortNumber;
|
||||
page.querySelector('#chkEnableHttps').checked = config.EnableHttps;
|
||||
page.querySelector('#chkRequireHttps').checked = config.RequireHttps;
|
||||
page.querySelector('#txtBaseUrl').value = config.BaseUrl || '';
|
||||
var txtCertificatePath = page.querySelector('#txtCertificatePath');
|
||||
const txtCertificatePath = page.querySelector('#txtCertificatePath');
|
||||
txtCertificatePath.value = config.CertificatePath || '';
|
||||
page.querySelector('#txtCertPassword').value = config.CertificatePassword || '';
|
||||
page.querySelector('#chkEnableUpnp').checked = config.EnableUPnP;
|
||||
triggerChange(page.querySelector('#chkRemoteAccess'));
|
||||
form.querySelector('#chkCreateHttpPortMap').checked = config.UPnPCreateHttpPortMap;
|
||||
form.querySelector('#chkAutodiscovery').checked = config.AutoDiscovery;
|
||||
form.querySelector('#chkAutodiscoveryTracing').checked = config.AutoDiscoveryTracing;
|
||||
form.querySelector('#chkEnableIP6').checked = config.EnableIP6;
|
||||
form.querySelector('#chkEnableIP4').checked = config.EnableIP4;
|
||||
form.querySelector('#chkCreateHttpPortMap').checked = config.UPnPCreateHttpPortMap;
|
||||
form.querySelector('#txtUDPPortRange').value = config.UDPPortRange;
|
||||
form.querySelector('#txtHDHomerunPortRange').checked = config.HDHomerunPortRange;
|
||||
form.querySelector('#chkEnableSSDPTracing').checked = config.EnableSSDPTracing;
|
||||
form.querySelector('#txtSSDPTracingFilter').value = config.SSDPTracingFilter;
|
||||
|
||||
loading.hide();
|
||||
}
|
||||
|
||||
|
@ -135,8 +178,8 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
|
|||
}
|
||||
});
|
||||
view.querySelector('#btnSelectCertPath').addEventListener('click', function () {
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
var picker = new directoryBrowser();
|
||||
import('directorybrowser').then(({default: directoryBrowser}) => {
|
||||
const picker = new directoryBrowser();
|
||||
picker.show({
|
||||
includeFiles: true,
|
||||
includeDirectories: true,
|
||||
|
@ -154,9 +197,10 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
|
|||
view.querySelector('.dashboardHostingForm').addEventListener('submit', onSubmit);
|
||||
view.addEventListener('viewshow', function (e) {
|
||||
loading.show();
|
||||
ApiClient.getServerConfiguration().then(function (config) {
|
||||
ApiClient.getNamedConfiguration('network').then(function (config) {
|
||||
loadPage(view, config);
|
||||
});
|
||||
});
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue