You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
jellyfin/MediaBrowser.WebDashboard/Html/scripts/DashboardPage.js

423 lines
13 KiB

var DashboardPage = {
onPageShow: function () {
Dashboard.showLoadingMsg();
DashboardPage.pollForInfo();
DashboardPage.startInterval();
$(document).on("websocketmessage", DashboardPage.onWebSocketMessage).on("websocketopen", DashboardPage.onWebSocketConnectionChange).on("websocketerror", DashboardPage.onWebSocketConnectionChange).on("websocketclose", DashboardPage.onWebSocketConnectionChange);
DashboardPage.lastAppUpdateCheck = null;
DashboardPage.lastPluginUpdateCheck = null;
},
onPageHide: function () {
$(document).off("websocketmessage", DashboardPage.onWebSocketMessage).off("websocketopen", DashboardPage.onWebSocketConnectionChange).off("websocketerror", DashboardPage.onWebSocketConnectionChange).off("websocketclose", DashboardPage.onWebSocketConnectionChange);
DashboardPage.stopInterval();
},
startInterval: function () {
if (Dashboard.isWebSocketOpen()) {
Dashboard.sendWebSocketMessage("DashboardInfoStart", "0,1500");
}
},
stopInterval: function () {
if (Dashboard.isWebSocketOpen()) {
Dashboard.sendWebSocketMessage("DashboardInfoStop");
}
},
onWebSocketMessage: function (e, msg) {
if (msg.MessageType == "DashboardInfo") {
DashboardPage.renderInfo(msg.Data);
}
},
onWebSocketConnectionChange: function () {
DashboardPage.stopInterval();
DashboardPage.startInterval();
},
pollForInfo: function () {
$.getJSON("dashboardInfo").done(DashboardPage.renderInfo);
},
renderInfo: function (dashboardInfo) {
DashboardPage.lastDashboardInfo = dashboardInfo;
DashboardPage.renderRunningTasks(dashboardInfo);
DashboardPage.renderSystemInfo(dashboardInfo);
DashboardPage.renderActiveConnections(dashboardInfo);
Dashboard.hideLoadingMsg();
},
renderActiveConnections: function (dashboardInfo) {
var page = $.mobile.activePage;
var html = '';
if (!dashboardInfo.ActiveConnections.length) {
html += '<p>There are no users currently connected.</p>';
$('#divConnections', page).html(html).trigger('create');
return;
}
html += '<table class="tblConnections" style="border-collapse:collapse;">';
for (var i = 0, length = dashboardInfo.ActiveConnections.length; i < length; i++) {
var connection = dashboardInfo.ActiveConnections[i];
var user = dashboardInfo.Users.filter(function (u) {
return u.Id == connection.UserId;
})[0];
html += '<tr>';
html += '<td style="text-align:center;">';
html += DashboardPage.getClientType(connection);
html += '</td>';
html += '<td>';
html += user.Name;
html += '</td>';
html += '<td>';
html += connection.DeviceName;
html += '</td>';
html += '<td>';
html += DashboardPage.getNowPlayingImage(connection.NowPlayingItem);
html += '</td>';
html += '<td>';
html += DashboardPage.getNowPlayingText(connection, connection.NowPlayingItem);
html += '</td>';
html += '</tr>';
}
html += '</table>';
$('#divConnections', page).html(html);
},
getClientType: function (connection) {
if (connection.ClientType == "Dashboard") {
return "<img src='css/images/clients/html5.png' alt='Dashboard' title='Dashboard' />";
}
if (connection.ClientType == "Pc") {
return "<img src='css/images/clients/mb.png' alt='Media Browser' title='Media Browser' />";
}
if (connection.ClientType == "Android") {
return "<img src='css/images/clients/android.png' alt='Android' title='Android' />";
}
if (connection.ClientType == "Ios") {
return "<img src='css/images/clients/ios.png' alt='iOS' title='iOS' />";
}
if (connection.ClientType == "WindowsRT") {
return "<img src='css/images/clients/windowsrt.png' alt='Windows RT' title='Windows RT' />";
}
if (connection.ClientType == "WindowsPhone") {
return "<img src='css/images/clients/windowsphone.png' alt='Windows Phone' title='Windows Phone' />";
}
return connection.ClientType;
},
getNowPlayingImage: function (item) {
if (item) {
if (item.BackdropImageTag) {
var url = ApiClient.getImageUrl(item.Id, {
type: "Backdrop",
height: 100,
tag: item.BackdropImageTag
});
return "<img class='clientNowPlayingImage' src='" + url + "' alt='" + item.Name + "' title='" + item.Name + "' />";
}
else if (item.PrimaryImageTag) {
var url = ApiClient.getImageUrl(item.Id, {
type: "Primary",
height: 100,
tag: item.PrimaryImageTag
});
return "<img class='clientNowPlayingImage' src='" + url + "' alt='" + item.Name + "' title='" + item.Name + "' />";
}
}
return "";
},
getNowPlayingText: function (connection, item) {
var html = "";
if (item) {
html += "<div>" + item.Name + "</div>";
html += "<div>";
if (item.RunTimeTicks) {
html += DashboardPage.getDisplayText(connection.NowPlayingPositionTicks || 0) + " / ";
html += DashboardPage.getDisplayText(item.RunTimeTicks);
}
html += "</div>";
}
return html;
},
getDisplayText: function (ticks) {
var ticksPerHour = 36000000000;
var parts = [];
var hours = ticks / ticksPerHour;
hours = parseInt(hours);
if (hours) {
parts.push(hours);
}
ticks -= (hours * ticksPerHour);
var ticksPerMinute = 600000000;
var minutes = ticks / ticksPerMinute;
minutes = parseInt(minutes);
ticks -= (minutes * ticksPerMinute);
if (minutes < 10) {
minutes = '0' + minutes;
}
parts.push(minutes);
var ticksPerSecond = 10000000;
var seconds = ticks / ticksPerSecond;
seconds = parseInt(seconds);
if (seconds < 10) {
seconds = '0' + seconds;
}
parts.push(seconds);
return parts.join(':');
},
renderRunningTasks: function (dashboardInfo) {
var page = $.mobile.activePage;
var html = '';
if (!dashboardInfo.RunningTasks.length) {
html += '<p>No tasks are currently running.</p>';
}
for (var i = 0, length = dashboardInfo.RunningTasks.length; i < length; i++) {
var task = dashboardInfo.RunningTasks[i];
html += '<p>';
html += task.Name;
if (task.State == "Running") {
var progress = task.CurrentProgress || { PercentComplete: 0 };
html += '<span style="color:#267F00;margin-right:5px;font-weight:bold;"> - ' + Math.round(progress.PercentComplete) + '%</span>';
html += '<button type="button" data-icon="stop" data-iconpos="notext" data-inline="true" data-theme="b" data-mini="true" onclick="DashboardPage.stopTask(\'' + task.Id + '\');">Stop</button>';
}
else if (task.State == "Cancelling") {
html += '<span style="color:#cc0000;"> - Stopping</span>';
}
html += '</p>';
}
$('#divRunningTasks', page).html(html).trigger('create');
},
renderSystemInfo: function (dashboardInfo) {
Dashboard.updateSystemInfo(dashboardInfo.SystemInfo);
var page = $.mobile.activePage;
$('#appVersionNumber', page).html(dashboardInfo.SystemInfo.Version);
if (dashboardInfo.RunningTasks.filter(function (task) {
return task.Id == dashboardInfo.ApplicationUpdateTaskId;
}).length) {
$('#btnUpdateApplication', page).button('disable');
} else {
$('#btnUpdateApplication', page).button('enable');
}
DashboardPage.renderApplicationUpdateInfo(dashboardInfo);
DashboardPage.renderPluginUpdateInfo(dashboardInfo);
},
renderApplicationUpdateInfo: function (dashboardInfo) {
var page = $.mobile.activePage;
if (dashboardInfo.SystemInfo.IsNetworkDeployed && !dashboardInfo.SystemInfo.HasPendingRestart) {
// Only check once every 10 mins
if (DashboardPage.lastAppUpdateCheck && (new Date().getTime() - DashboardPage.lastAppUpdateCheck) < 600000) {
return;
}
DashboardPage.lastAppUpdateCheck = new Date().getTime();
ApiClient.getAvailableApplicationUpdate().done(function (packageInfo) {
var version = packageInfo.versions[0];
if (!version) {
$('#pUpToDate', page).show();
$('#pUpdateNow', page).hide();
} else {
$('#pUpToDate', page).hide();
$('#pUpdateNow', page).show();
$('#newVersionNumber', page).html("Version " + version.versionStr + " is now available for download.");
}
}).fail(function () {
Dashboard.showFooterNotification({ html: '<img src="css/images/notifications/error.png" class="notificationIcon" />There was an error connecting to the remote Media Browser repository.', id: "MB3ConnectionError" });
});
} else {
if (dashboardInfo.SystemInfo.HasPendingRestart) {
$('#pUpToDate', page).hide();
} else {
$('#pUpToDate', page).show();
}
$('#pUpdateNow', page).hide();
}
},
renderPluginUpdateInfo: function (dashboardInfo) {
// Only check once every 10 mins
if (DashboardPage.lastPluginUpdateCheck && (new Date().getTime() - DashboardPage.lastPluginUpdateCheck) < 600000) {
return;
}
DashboardPage.lastPluginUpdateCheck = new Date().getTime();
var page = $.mobile.activePage;
ApiClient.getAvailablePluginUpdates().done(function (updates) {
if (updates.length) {
$('#collapsiblePluginUpdates', page).show();
} else {
$('#collapsiblePluginUpdates', page).hide();
return;
}
var html = '';
for (var i = 0, length = updates.length; i < length; i++) {
var update = updates[i];
html += '<p><strong>A new version of ' + update.name + ' is available!</strong></p>';
html += '<button type="button" data-icon="download" data-theme="b" onclick="DashboardPage.installPluginUpdate(this);" data-name="' + update.name + '" data-version="' + update.versionStr + '" data-classification="' + update.classification + '">Update Now</button>';
}
$('#pPluginUpdates', page).html(html).trigger('create');
}).fail(function () {
Dashboard.showFooterNotification({ html: '<img src="css/images/notifications/error.png" class="notificationIcon" />There was an error connecting to the remote Media Browser repository.', id: "MB3ConnectionError" });
});
},
installPluginUpdate: function (button) {
$(button).button('disable');
var name = button.getAttribute('data-name');
var version = button.getAttribute('data-version');
var classification = button.getAttribute('data-classification');
Dashboard.showLoadingMsg();
ApiClient.installPlugin(name, classification, version).done(function () {
Dashboard.hideLoadingMsg();
});
},
updateApplication: function () {
var page = $.mobile.activePage;
$('#btnUpdateApplication', page).button('disable');
Dashboard.showLoadingMsg();
ApiClient.startScheduledTask(DashboardPage.lastDashboardInfo.ApplicationUpdateTaskId).done(function () {
DashboardPage.pollForInfo();
Dashboard.hideLoadingMsg();
});
},
stopTask: function (id) {
ApiClient.stopScheduledTask(id).done(function () {
DashboardPage.pollForInfo();
});
}
};
$(document).on('pageshow', "#dashboardPage", DashboardPage.onPageShow).on('pagehide', "#dashboardPage", DashboardPage.onPageHide);