continuous-integration/drone/push Build is passing
TypeScript:
- menu_ts.ts split into menu.ts, content.ts, popup.ts and xmltv.ts; the
other files drop their _ts suffix. Bundle order fixed in ts/tsconfig.json.
- All 94 string event handlers (setAttribute("onclick", "javascript: ..."))
replaced with addEventListener closures. changeButtonAction, which
rewrote an onclick attribute from select values, is gone.
- Settings rows are generated from one SETTINGS_FIELDS table instead of
~20 copy-pasted blocks; rendered HTML is byte-identical to before.
saveSettings now serialises password inputs, so a changed Plex token is
actually sent (the server treats the mask as unchanged).
- createLayout rebuilds the menu list only when the set of visible items
changes, so focus in the menu survives a refresh.
- announce()/alertUser(): alerts are mirrored into an aria-live region.
- Filter popup offers a third type, Regular Expression (regex-filter), and
the filter table labels it. Playlist popups get a Buffer select
(default / none / xTeVe / FFmpeg / VLC) saved as the playlist's
"buffer" parameter; the tuner field stays editable when the
playlist's own buffer is active.
Tests: tests/ holds 27 jsdom tests (Node's built-in runner, jsdom pinned)
that load the built bundle with a fixture server payload: menu visibility
rules, mapping table renders names as text, settings panel fields, popup
flows, sorting, bulk select, layout refresh keeps nodes, live region,
regex option, buffer select. npm test runs in the Drone webui-check step.
README-DEV documents the layout and the test workflow.
343 lines
14 KiB
TypeScript
343 lines
14 KiB
TypeScript
// One entry per settings key. The categories in base.ts decide which keys
|
|
// are shown and in which order; this table decides how each one renders.
|
|
interface SettingsFieldOption {
|
|
text:string
|
|
value:string
|
|
}
|
|
|
|
interface SettingsField {
|
|
key:string
|
|
title:string
|
|
type:"text" | "checkbox" | "number" | "select" | "password"
|
|
placeholder?:string
|
|
autocomplete?:string
|
|
options?:SettingsFieldOption[]
|
|
// Static text written in the source; may contain HTML.
|
|
description:string
|
|
}
|
|
|
|
function settingsOptions(text:string[], values:string[]):SettingsFieldOption[] {
|
|
var options:SettingsFieldOption[] = []
|
|
for (var i = 0; i < text.length; i++) {
|
|
options.push({text: text[i], value: values[i]})
|
|
}
|
|
return options
|
|
}
|
|
|
|
function settingsNumberOptions(from:number, to:number):SettingsFieldOption[] {
|
|
var options:SettingsFieldOption[] = []
|
|
for (var i = from; i <= to; i++) {
|
|
options.push({text: i.toString(), value: i.toString()})
|
|
}
|
|
return options
|
|
}
|
|
|
|
const SETTINGS_FIELDS:SettingsField[] = [
|
|
|
|
// Text inputs
|
|
{key: "update", title: "Schedule for updating (Playlist, XMLTV, Backup)", type: "text", placeholder: "0000,1000,2000",
|
|
description: "Time in 24 hour format (0800 = 8:00 am). More times can be entered comma separated. Leave this field empty if no updates are to be carried out."},
|
|
{key: "backup.path", title: "Location for automatic backups", type: "text", placeholder: "/mnt/data/backup/xteve/",
|
|
description: "Before any update of the provider data by the schedule, xTeVe creates a backup. The path for the automatic backups can be changed. xTeVe requires write permission for this folder."},
|
|
{key: "temp.path", title: "Location for the temporary files", type: "text", placeholder: "/tmp/xteve/",
|
|
description: "Location for the buffer files."},
|
|
{key: "user.agent", title: "User Agent", type: "text", placeholder: "xTeVe",
|
|
description: "User Agent for HTTP requests. For every HTTP connection, this value is used for the user agent. Should only be changed if xTeVe is blocked."},
|
|
{key: "plex.url", title: "Plex Server URL", type: "text", placeholder: "http://plex-host:32400",
|
|
description: "Base URL of your Plex server. Example: http://192.168.1.10:32400"},
|
|
// The server sends the mask "********" and treats it coming back as "unchanged".
|
|
{key: "plex.token", title: "Plex API Token", type: "password", placeholder: "Plex X-Plex-Token", autocomplete: "off",
|
|
description: "Plex token used for authenticated API calls to refresh your DVR guide."},
|
|
{key: "buffer.timeout", title: "Timeout for new client connections", type: "text", placeholder: "100",
|
|
description: "The xTeVe buffer waits until new client connections are established. Helpful for fast channel switching. Value in milliseconds."},
|
|
{key: "ffmpeg.path", title: "FFmpeg Binary Path", type: "text", placeholder: "/path/to/ffmpeg",
|
|
description: "Path to FFmpeg binary."},
|
|
{key: "ffmpeg.options", title: "FFmpeg Options", type: "text", placeholder: "Leave blank to set default settings",
|
|
description: "FFmpeg options.<br>Only change if you know what you are doing.<br>Leave blank to set default settings."},
|
|
{key: "vlc.path", title: "VLC / CVLC Binary Path", type: "text", placeholder: "/path/to/cvlc",
|
|
description: "Path to VLC / CVLC binary."},
|
|
{key: "vlc.options", title: "VLC / CVLC Options", type: "text", placeholder: "Leave blank to set default settings",
|
|
description: "VLC / CVLC options.<br>Only change if you know what you are doing.<br>Leave blank to set default settings."},
|
|
{key: "udpxy", title: "UDPxy address", type: "text", placeholder: "host:port",
|
|
description: "The address of your UDPxy server. If set, and the channel URLs in the m3u is multicast, xTeVe will rewrite it so that it is accessed via the UDPxy service."},
|
|
|
|
// Checkboxes
|
|
{key: "authentication.web", title: "WEB Authentication", type: "checkbox",
|
|
description: "Access to the web interface only possible with credentials."},
|
|
{key: "authentication.pms", title: "PMS Authentication", type: "checkbox",
|
|
description: "Plex requests are only possible with authentication. <br><b>Warning!!!</b> After activating this function xTeVe must be delete in the PMS DVR settings and set up again."},
|
|
{key: "authentication.m3u", title: "M3U Authentication", type: "checkbox",
|
|
description: "Downloading the xteve.m3u file via an HTTP request is only possible with authentication."},
|
|
{key: "authentication.xml", title: "XML Authentication", type: "checkbox",
|
|
description: "Downloading the xteve.xml file via an HTTP request is only possible with authentication"},
|
|
// Only rendered while web authentication is on (see SettingsCategoryItem.createCategory).
|
|
{key: "authentication.api", title: "API Authentication", type: "checkbox",
|
|
description: "Access to the API interface is only possible with authentication."},
|
|
{key: "files.update", title: "Updates all files at startup", type: "checkbox",
|
|
description: "Updates all playlists, tuner and XMLTV files at startup."},
|
|
{key: "cache.images", title: "Image Caching", type: "checkbox",
|
|
description: "All images from the XMLTV file are cached, allowing faster rendering of the grid in the client.<br>Downloading the images may take a while and will be done in the background."},
|
|
{key: "xepg.replace.missing.images", title: "Replace missing program images", type: "checkbox",
|
|
description: "If the poster in the XMLTV program is missing, the channel logo will be used."},
|
|
{key: "api", title: "API Interface", type: "checkbox",
|
|
description: "Via API interface it is possible to send commands to xTeVe. API documentation is <a href='https://github.com/xteve-project/xTeVe-Documentation/blob/master/en/configuration.md#api'>here</a>"},
|
|
{key: "use_plexAPI", title: "Use Plex API Refresh", type: "checkbox",
|
|
description: "When enabled, xTeVe calls Plex directly to refresh DVR guide data after lineup or XEPG updates."},
|
|
|
|
// Selects
|
|
{key: "xepg.missing.epg.mode", title: "Missing EPG Handling", type: "select",
|
|
options: settingsOptions(["Strict (deactivate channels)", "Relaxed (keep active / dummy guide)"], ["strict", "relaxed"]),
|
|
description: "Strict: channels are deactivated when XMLTV mappings disappear.<br>Relaxed: channels stay active with last-known mappings and fall back to a dummy guide whenever guide data cannot be resolved."},
|
|
{key: "tuner", title: "Number of Tuners", type: "select",
|
|
options: settingsNumberOptions(1, 100),
|
|
description: "Number of parallel connections that can be established to the provider.<br>Available for: Plex, Emby (HDHR), M3U (with active buffer).<br>After a change, xTeVe must be delete in the Plex / Emby DVR settings and set up again."},
|
|
{key: "epgSource", title: "EPG Source", type: "select",
|
|
options: settingsOptions(["PMS", "XEPG"], ["PMS", "XEPG"]),
|
|
description: "PMS:<br>- Use EPG data from Plex or Emby <br><br>XEPG:<br>- Use of one or more XMLTV files<br>- Channel management<br>- M3U / XMLTV export (HTTP link for IPTV apps)"},
|
|
{key: "backup.keep", title: "Number of backups to keep", type: "select",
|
|
options: settingsOptions(["5", "10", "20", "30", "40", "50"], ["5", "10", "20", "30", "40", "50"]),
|
|
description: "Number of backups to keep. Older backups are automatically deleted."},
|
|
{key: "buffer.size.kb", title: "Buffer Size", type: "select",
|
|
options: settingsOptions(["0.5 MB", "1 MB", "2 MB", "3 MB", "4 MB", "5 MB", "6 MB", "7 MB", "8 MB"], ["512", "1024", "2048", "3072", "4096", "5120", "6144", "7168", "8192"]),
|
|
description: "Buffer size in MB.<br>M3U8: If the TS segment smaller then the buffer size, the file size of the segment is used."},
|
|
{key: "buffer", title: "Stream Buffer", type: "select",
|
|
options: settingsOptions(["No Buffer (Client connects to the streaming server)", "xTeVe: (xTeVe connects to the streaming server)", "FFmpeg: (FFmpeg connects to the streaming server)", "VLC: (VLC connects to the streaming server)"], ["-", "xteve", "ffmpeg", "vlc"]),
|
|
description: "Functions of the buffer:<br>- The stream is passed from xTeVe, FFmpeg or VLC to Plex, Emby or M3U Player<br>- Small jerking of the streams can be compensated<br>- HLS / M3U8 support<br>- RTP / RTPS support (only FFmpeg or VLC)<br>- Re-streaming<br>- Separate tuner limit for each playlist"},
|
|
]
|
|
|
|
function getSettingsField(settingsKey:string):SettingsField {
|
|
for (var i = 0; i < SETTINGS_FIELDS.length; i++) {
|
|
if (SETTINGS_FIELDS[i].key == settingsKey) {
|
|
return SETTINGS_FIELDS[i]
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
class SettingsCategory {
|
|
DocumentID:string = "content_settings"
|
|
createCategoryHeadline(value:string):any {
|
|
var element = document.createElement("H4")
|
|
element.innerHTML = value
|
|
return element
|
|
}
|
|
|
|
createHR():any {
|
|
var element = document.createElement("HR")
|
|
return element
|
|
}
|
|
|
|
// createControl builds the input for one field, filled with the current value.
|
|
createControl(field:SettingsField, data:any):HTMLElement {
|
|
var content:PopupContent = new PopupContent()
|
|
var control:HTMLElement
|
|
|
|
switch (field.type) {
|
|
|
|
case "checkbox":
|
|
control = content.createCheckbox(field.key);
|
|
(control as HTMLInputElement).checked = data
|
|
break
|
|
|
|
case "select":
|
|
var text:string[] = field.options.map(function(option) { return option.text })
|
|
var values:string[] = field.options.map(function(option) { return option.value })
|
|
control = content.createSelect(text, values, data, field.key)
|
|
break
|
|
|
|
default:
|
|
// "text", "password", "number": lists (the update schedule) render comma separated.
|
|
var value:any = data
|
|
if (Array.isArray(data)) {
|
|
value = data.join(",")
|
|
}
|
|
control = content.createInput(field.type, field.key, value)
|
|
if (field.placeholder != undefined) {
|
|
control.setAttribute("placeholder", field.placeholder)
|
|
}
|
|
if (field.autocomplete != undefined) {
|
|
control.setAttribute("autocomplete", field.autocomplete)
|
|
}
|
|
break
|
|
}
|
|
|
|
markChangedOnChange(control)
|
|
return control
|
|
}
|
|
|
|
createSettings(settingsKey:string):any {
|
|
var setting = document.createElement("TR")
|
|
var field:SettingsField = getSettingsField(settingsKey)
|
|
if (field == undefined) {
|
|
return setting
|
|
}
|
|
|
|
var data = SERVER["settings"][settingsKey]
|
|
|
|
var tdLeft = document.createElement("TD")
|
|
tdLeft.textContent = field.title + ":"
|
|
|
|
var tdRight = document.createElement("TD")
|
|
tdRight.appendChild(this.createControl(field, data))
|
|
|
|
setting.appendChild(tdLeft)
|
|
setting.appendChild(tdRight)
|
|
return setting
|
|
}
|
|
|
|
createDescription(settingsKey:string):any {
|
|
var description = document.createElement("TR")
|
|
var field:SettingsField = getSettingsField(settingsKey)
|
|
var text:string = ""
|
|
if (field != undefined) {
|
|
text = field.description
|
|
}
|
|
|
|
var tdLeft = document.createElement("TD")
|
|
tdLeft.innerHTML = ""
|
|
|
|
var tdRight = document.createElement("TD")
|
|
var pre = document.createElement("PRE")
|
|
pre.innerHTML = text
|
|
tdRight.appendChild(pre)
|
|
|
|
description.appendChild(tdLeft)
|
|
description.appendChild(tdRight)
|
|
|
|
return description
|
|
}
|
|
|
|
}
|
|
|
|
class SettingsCategoryItem extends SettingsCategory {
|
|
headline:string
|
|
settingsKeys:string
|
|
|
|
constructor(headline:string, settingsKeys:string) {
|
|
super()
|
|
this.headline = headline
|
|
this.settingsKeys = settingsKeys
|
|
}
|
|
|
|
createCategory():void {
|
|
var headline = this.createCategoryHeadline(this.headline)
|
|
var settingsKeys = this.settingsKeys
|
|
|
|
var doc = document.getElementById(this.DocumentID)
|
|
doc.appendChild(headline)
|
|
|
|
// Tabelle für die Kategorie erstellen
|
|
|
|
var table = document.createElement("TABLE")
|
|
|
|
var keys = settingsKeys.split(",")
|
|
|
|
keys.forEach(settingsKey => {
|
|
|
|
switch (settingsKey) {
|
|
|
|
case "authentication.pms":
|
|
case "authentication.m3u":
|
|
case "authentication.xml":
|
|
case "authentication.api":
|
|
if (SERVER["settings"]["authentication.web"] == false) {
|
|
break
|
|
}
|
|
|
|
default:
|
|
var item = this.createSettings(settingsKey)
|
|
var description = this.createDescription(settingsKey)
|
|
|
|
table.appendChild(item)
|
|
table.appendChild(description)
|
|
break
|
|
|
|
}
|
|
|
|
});
|
|
|
|
doc.appendChild(table)
|
|
doc.appendChild(this.createHR())
|
|
}
|
|
|
|
}
|
|
|
|
function showSettings() {
|
|
console.log("SETTINGS");
|
|
|
|
for (let i = 0; i < settingsCategory.length; i++) {
|
|
settingsCategory[i].createCategory()
|
|
}
|
|
|
|
}
|
|
|
|
function saveSettings() {
|
|
console.log("Save Settings");
|
|
|
|
var cmd = "saveSettings"
|
|
var div = document.getElementById("content_settings")
|
|
var settings = div.getElementsByClassName("changed")
|
|
|
|
var newSettings = new Object();
|
|
|
|
for (let i = 0; i < settings.length; i++) {
|
|
|
|
var name:string
|
|
var value:any
|
|
|
|
switch (settings[i].tagName) {
|
|
case "INPUT":
|
|
|
|
switch ((settings[i] as HTMLInputElement).type) {
|
|
case "checkbox":
|
|
name = (settings[i] as HTMLInputElement).name
|
|
value = (settings[i] as HTMLInputElement).checked
|
|
newSettings[name] = value
|
|
break
|
|
|
|
case "text":
|
|
case "password":
|
|
name = (settings[i] as HTMLInputElement).name
|
|
value = (settings[i] as HTMLInputElement).value
|
|
|
|
switch (name) {
|
|
case "update":
|
|
value = value.split(",")
|
|
value = value.filter(function(e:any) { return e})
|
|
break
|
|
|
|
case "buffer.timeout":
|
|
value = parseFloat(value)
|
|
|
|
}
|
|
|
|
newSettings[name] = value
|
|
break
|
|
}
|
|
|
|
break
|
|
|
|
case "SELECT":
|
|
name = (settings[i] as HTMLSelectElement).name
|
|
value = (settings[i] as HTMLSelectElement).value
|
|
|
|
// Wenn der Wert eine Zahl ist, wird dieser als Zahl gespeichert
|
|
if(isNaN(value)){
|
|
newSettings[name] = value
|
|
} else {
|
|
newSettings[name] = parseInt(value)
|
|
}
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var data = new Object()
|
|
data["settings"] = newSettings
|
|
|
|
var server:Server = new Server(cmd)
|
|
server.request(data)
|
|
}
|