LSP: on the Overview page
- Last 5 recent errors in the logs - Enabled and disabled protocol list
This commit is contained in:
parent
109366e81c
commit
8ec2f6ac90
2 changed files with 144 additions and 28 deletions
13
lsp/main.css
13
lsp/main.css
|
@ -848,6 +848,19 @@ button.return:before {
|
||||||
color: rgba(0,0,0,0.8);
|
color: rgba(0,0,0,0.8);
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
.logs {
|
||||||
|
text-indent: 0;
|
||||||
|
}
|
||||||
|
.logs > div {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
}
|
||||||
|
.logs > div > * {
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
.logs .content > * {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: FuturaICGLight;
|
font-family: FuturaICGLight;
|
||||||
|
|
159
lsp/mist.js
159
lsp/mist.js
|
@ -2004,9 +2004,13 @@ var UI = {
|
||||||
break;
|
break;
|
||||||
case 'Overview':
|
case 'Overview':
|
||||||
var $versioncheck = $('<span>').text('Loading..');
|
var $versioncheck = $('<span>').text('Loading..');
|
||||||
var $streamsonline = $('<span>');
|
var $streamsactive = $('<span>');
|
||||||
|
var $errors = $('<span>').addClass('logs');
|
||||||
var $viewers = $('<span>');
|
var $viewers = $('<span>');
|
||||||
var $servertime = $('<span>');
|
var $servertime = $('<span>');
|
||||||
|
var $protocols_on = $('<span>');
|
||||||
|
var $protocols_off = $('<span>');
|
||||||
|
|
||||||
$main.append(UI.buildUI([
|
$main.append(UI.buildUI([
|
||||||
{
|
{
|
||||||
type: 'help',
|
type: 'help',
|
||||||
|
@ -2029,12 +2033,28 @@ var UI = {
|
||||||
value: $servertime
|
value: $servertime
|
||||||
},{
|
},{
|
||||||
type: 'span',
|
type: 'span',
|
||||||
label: 'Current streams',
|
label: 'Configured streams',
|
||||||
value: $streamsonline
|
value: (mist.data.streams ? Object.keys(mist.data.streams).length : 0)
|
||||||
|
},{
|
||||||
|
type: 'span',
|
||||||
|
label: 'Active streams',
|
||||||
|
value: $streamsactive
|
||||||
},{
|
},{
|
||||||
type: 'span',
|
type: 'span',
|
||||||
label: 'Current connections',
|
label: 'Current connections',
|
||||||
value: $viewers
|
value: $viewers
|
||||||
|
},{
|
||||||
|
type: 'span',
|
||||||
|
label: 'Enabled protocols',
|
||||||
|
value: $protocols_on
|
||||||
|
},{
|
||||||
|
type: 'span',
|
||||||
|
label: 'Disabled protocols',
|
||||||
|
value: $protocols_off
|
||||||
|
},{
|
||||||
|
type: 'span',
|
||||||
|
label: 'Recent problems',
|
||||||
|
value: $errors
|
||||||
},$('<br>'),{
|
},$('<br>'),{
|
||||||
type: 'str',
|
type: 'str',
|
||||||
label: 'Human readable name',
|
label: 'Human readable name',
|
||||||
|
@ -2122,15 +2142,19 @@ var UI = {
|
||||||
$versioncheck.text('');
|
$versioncheck.text('');
|
||||||
}
|
}
|
||||||
function updateViewers() {
|
function updateViewers() {
|
||||||
mist.send(function(d){
|
var request = {
|
||||||
enterStats()
|
|
||||||
},{
|
|
||||||
totals:{
|
totals:{
|
||||||
fields: ['clients'],
|
fields: ['clients'],
|
||||||
start: -10
|
start: -10
|
||||||
},
|
},
|
||||||
active_streams: true
|
active_streams: true
|
||||||
});
|
};
|
||||||
|
if (!('cabailities' in mist.data)) {
|
||||||
|
request.capabilities = true;
|
||||||
|
}
|
||||||
|
mist.send(function(d){
|
||||||
|
enterStats()
|
||||||
|
},request);
|
||||||
}
|
}
|
||||||
function enterStats() {
|
function enterStats() {
|
||||||
if ('active_streams' in mist.data) {
|
if ('active_streams' in mist.data) {
|
||||||
|
@ -2139,7 +2163,7 @@ var UI = {
|
||||||
else {
|
else {
|
||||||
var active = '?';
|
var active = '?';
|
||||||
}
|
}
|
||||||
$streamsonline.text(active+' active, '+(mist.data.streams ? Object.keys(mist.data.streams).length : 0)+' configured');
|
$streamsactive.text(active);
|
||||||
if (('totals' in mist.data) && ('all_streams' in mist.data.totals)) {
|
if (('totals' in mist.data) && ('all_streams' in mist.data.totals)) {
|
||||||
var clients = mist.data.totals.all_streams.all_protocols.clients;
|
var clients = mist.data.totals.all_streams.all_protocols.clients;
|
||||||
clients = (clients.length ? UI.format.number(clients[clients.length-1][1]) : 0);
|
clients = (clients.length ? UI.format.number(clients[clients.length-1][1]) : 0);
|
||||||
|
@ -2149,6 +2173,55 @@ var UI = {
|
||||||
}
|
}
|
||||||
$viewers.text(clients);
|
$viewers.text(clients);
|
||||||
$servertime.text(UI.format.dateTime(mist.data.config.time,'long'));
|
$servertime.text(UI.format.dateTime(mist.data.config.time,'long'));
|
||||||
|
|
||||||
|
$errors.html('');
|
||||||
|
var n = 0;
|
||||||
|
for (var i in mist.data.log) {
|
||||||
|
var l = mist.data.log[i];
|
||||||
|
if (['FAIL','ERROR'].indexOf(l[1]) > -1) {
|
||||||
|
n++;
|
||||||
|
var $content = $('<span>').addClass('content').addClass('red');
|
||||||
|
var split = l[2].split('|');
|
||||||
|
for (var i in split) {
|
||||||
|
$content.append(
|
||||||
|
$('<span>').text(split[i])
|
||||||
|
);
|
||||||
|
}
|
||||||
|
$errors.append(
|
||||||
|
$('<div>').append(
|
||||||
|
$('<span>').append(UI.format.time(l[0]))
|
||||||
|
).append(
|
||||||
|
$content
|
||||||
|
)
|
||||||
|
);
|
||||||
|
if (n == 5) { break; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (n == 0) {
|
||||||
|
$errors.html('None.');
|
||||||
|
}
|
||||||
|
|
||||||
|
var protocols = {
|
||||||
|
on: [],
|
||||||
|
off: []
|
||||||
|
};
|
||||||
|
for (var i in mist.data.config.protocols) {
|
||||||
|
var p = mist.data.config.protocols[i];
|
||||||
|
if (protocols.on.indexOf(p.connector) > -1) { continue; }
|
||||||
|
protocols.on.push(p.connector);
|
||||||
|
}
|
||||||
|
$protocols_on.text((protocols.on.length ? protocols.on.join(', ') : 'None.'));
|
||||||
|
if ('capabilities' in mist.data) {
|
||||||
|
for (var i in mist.data.capabilities.connectors) {
|
||||||
|
if (protocols.on.indexOf(i) == -1) {
|
||||||
|
protocols.off.push(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$protocols_off.text((protocols.off.length ? protocols.off.join(', ') : 'None.'));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$protocols_off.text('Loading..')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
updateViewers();
|
updateViewers();
|
||||||
enterStats();
|
enterStats();
|
||||||
|
@ -2882,14 +2955,21 @@ var UI = {
|
||||||
var host = parseURL(mist.user.host);
|
var host = parseURL(mist.user.host);
|
||||||
var passw = $main.find('[name=source]').val().match(/@.*/);
|
var passw = $main.find('[name=source]').val().match(/@.*/);
|
||||||
if (passw) { passw = passw[0].substring(1); }
|
if (passw) { passw = passw[0].substring(1); }
|
||||||
|
var ip = $main.find('[name=source]').val().replace(/(?:.+?):\/\//,'');
|
||||||
|
ip = ip.split('/');
|
||||||
|
ip = ip[0];
|
||||||
|
ip = ip.split(':');
|
||||||
|
ip = ip[0];
|
||||||
|
|
||||||
var port = {
|
var port = {
|
||||||
RTMP: mist.data.capabilities.connectors.RTMP.optional.port['default'],
|
RTMP: mist.data.capabilities.connectors.RTMP.optional.port['default'],
|
||||||
RTSP: mist.data.capabilities.connectors.RTSP.optional.port['default']
|
RTSP: mist.data.capabilities.connectors.RTSP.optional.port['default'],
|
||||||
|
TS: mist.data.capabilities.connectors.TS.optional.port['default']
|
||||||
};
|
};
|
||||||
var defport = {
|
var defport = {
|
||||||
RTMP: 1935,
|
RTMP: 1935,
|
||||||
RTSP: 554
|
RTSP: 554,
|
||||||
|
TS: -1
|
||||||
}
|
}
|
||||||
for (var protocol in port) {
|
for (var protocol in port) {
|
||||||
for (var i in mist.data.config.protocols) {
|
for (var i in mist.data.config.protocols) {
|
||||||
|
@ -2907,6 +2987,7 @@ var UI = {
|
||||||
|
|
||||||
$livestreamhint.find('.field.RTMP').setval('rtmp://'+host.host+port.RTMP+'/'+(passw ? passw : 'live')+'/'+(streamname == '' ? 'STREAMNAME' : streamname))
|
$livestreamhint.find('.field.RTMP').setval('rtmp://'+host.host+port.RTMP+'/'+(passw ? passw : 'live')+'/'+(streamname == '' ? 'STREAMNAME' : streamname))
|
||||||
$livestreamhint.find('.field.RTSP').setval('rtsp://'+host.host+port.RTSP+'/'+(streamname == '' ? 'STREAMNAME' : streamname)+(passw ? '?pass='+passw : ''))
|
$livestreamhint.find('.field.RTSP').setval('rtsp://'+host.host+port.RTSP+'/'+(streamname == '' ? 'STREAMNAME' : streamname)+(passw ? '?pass='+passw : ''))
|
||||||
|
$livestreamhint.find('.field.TS').setval('udp://'+(ip == '' ? host.host : ip)+port.TS+'/')
|
||||||
}
|
}
|
||||||
|
|
||||||
$main.append(UI.buildUI([
|
$main.append(UI.buildUI([
|
||||||
|
@ -2969,22 +3050,36 @@ var UI = {
|
||||||
if (input.name == 'Folder') {
|
if (input.name == 'Folder') {
|
||||||
$main.append($style);
|
$main.append($style);
|
||||||
}
|
}
|
||||||
if (input.name == 'Buffer') {
|
else if (['Buffer','TS'].indexOf(input.name) > -1) {
|
||||||
$livestreamhint.html('<br>').append(UI.buildUI([
|
var fields = [$('<span>').text('Configure your source to push to:')];
|
||||||
$('<span>').text('Configure your source to push to:')
|
switch (input.name) {
|
||||||
,{
|
case 'Buffer':
|
||||||
label: 'RTMP',
|
fields.push({
|
||||||
type: 'span',
|
label: 'RTMP',
|
||||||
clipboard: true,
|
type: 'span',
|
||||||
readonly: true,
|
clipboard: true,
|
||||||
classes: ['RTMP']
|
readonly: true,
|
||||||
},{
|
classes: ['RTMP']
|
||||||
label: 'RTSP',
|
});
|
||||||
type: 'span',
|
fields.push({
|
||||||
clipboard: true,
|
label: 'RTSP',
|
||||||
readonly: true,
|
type: 'span',
|
||||||
classes: ['RTSP']
|
clipboard: true,
|
||||||
}]));
|
readonly: true,
|
||||||
|
classes: ['RTSP']
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'TS':
|
||||||
|
fields.push({
|
||||||
|
label: 'TS',
|
||||||
|
type: 'span',
|
||||||
|
clipboard: true,
|
||||||
|
readonly: true,
|
||||||
|
classes: ['TS']
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
$livestreamhint.html('<br>').append(UI.buildUI(fields));
|
||||||
updateLiveStreamHint();
|
updateLiveStreamHint();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4557,7 +4652,7 @@ var UI = {
|
||||||
);
|
);
|
||||||
var $tbody = $('<tbody>').css('font-size','0.9em');
|
var $tbody = $('<tbody>').css('font-size','0.9em');
|
||||||
$main.append(
|
$main.append(
|
||||||
$('<table>').append($tbody)
|
$('<table>').addClass('logs').append($tbody)
|
||||||
);
|
);
|
||||||
|
|
||||||
function color(string){
|
function color(string){
|
||||||
|
@ -4583,13 +4678,21 @@ var UI = {
|
||||||
|
|
||||||
$tbody.html('');
|
$tbody.html('');
|
||||||
for (var index in logs) {
|
for (var index in logs) {
|
||||||
|
var $content = $('<span>').addClass('content');
|
||||||
|
var split = logs[index][2].split('|');
|
||||||
|
for (var i in split) {
|
||||||
|
$content.append(
|
||||||
|
$('<span>').text(split[i])
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
$tbody.append(
|
$tbody.append(
|
||||||
$('<tr>').html(
|
$('<tr>').html(
|
||||||
$('<td>').text(UI.format.dateTime(logs[index][0],'long')).css('white-space','nowrap')
|
$('<td>').text(UI.format.dateTime(logs[index][0],'long')).css('white-space','nowrap')
|
||||||
).append(
|
).append(
|
||||||
$('<td>').html(color(logs[index][1])).css('text-align','center')
|
$('<td>').html(color(logs[index][1])).css('text-align','center')
|
||||||
).append(
|
).append(
|
||||||
$('<td>').text(logs[index][2]).css('text-align','left')
|
$('<td>').html($content).css('text-align','left')
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue