mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

add server management to web client

Browse source
This commit is contained in:
Luke Pulverenti 2014-11-04 07:41:12 -05:00
parent 6b8d9149bc
commit f7ba95439b
11 changed files with 363 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

5
dashboard-ui/css/card.css
View file

@ -89,6 +89,11 @@
background: #fff;
}
.visualCardBox-b {
border-radius: 3px;
background: #111;
}
.cardScalable {
position: relative;
}

BIN
dashboard-ui/css/images/server.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

7
dashboard-ui/css/librarybrowser.css
View file

@ -108,6 +108,13 @@
top: 3px;
}
@media all and (min-width: 600px) {
.ehsContent {
width: 95%;
}
}
@media all and (min-width: 1200px) {
.ehsContent {

2
dashboard-ui/css/mediaplayer.css
View file

@ -90,7 +90,7 @@
}
.sliderContainer .ui-slider-track {
margin-left: 15px !important;
margin: 0 15px !important;
}
.volumeSliderContainer .ui-slider-track {

2
dashboard-ui/css/site.css
View file

@ -42,7 +42,7 @@
/* For some reason jquery mobile 1.4.5 wants to horitontally pad mini form fields. */
.ui-mini {
margin: .5em 0;
margin-left: 0;
}
* {

2
dashboard-ui/scripts/medialibrarypage.js
View file

@ -111,7 +111,7 @@
html += '</ul>';
if (addPathMappingInfo) {
html += '<p style="margin:1.5em 0;">'+Globalize.translate('LabelPathSubstitutionHelp')+'</p>';
html += '<div class="fieldDescription" style="margin:.5em 0 1.5em;">' + Globalize.translate('LabelPathSubstitutionHelp') + '</div>';
}
html += '<p>';

275
dashboard-ui/scripts/selectserver.js
View file

@ -37,6 +37,58 @@
});
}
function getServerHtml(server) {
var html = '';
var cssClass = "card homePageSquareCard alternateHover bottomPaddedCard";
html += "<div data-id='" + server.Id + "' class='" + cssClass + "'>";
html += '<div class="cardBox visualCardBox visualCardBox-b">';
html += '<div class="cardScalable">';
html += '<div class="cardPadder"></div>';
var href = "#";
html += '<a class="cardContent lnkServer" data-serverid="' + server.Id + '" href="' + href + '">';
var imgUrl = 'css/images/server.png';
html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');">';
html += "</div>";
// cardContent
html += "</a>";
// cardScalable
html += "</div>";
html += '<div class="cardFooter">';
html += '<div class="cardText" style="text-align:right; float:right;">';
//html += '<button class="btnServerMenu" type="button" data-inline="true" data-iconpos="notext" data-icon="ellipsis-v" style="margin: 2px 0 0;"></button>';
html += "</div>";
html += '<div class="cardText" style="margin-right: 30px; padding: 11px 0 10px;">';
html += server.Name;
html += "</div>";
// cardFooter
html += "</div>";
// cardBox
html += "</div>";
// card
html += "</div>";
return html;
}
function renderServers(page, servers) {
if (servers.length) {
@ -45,27 +97,9 @@
$('.noServersMessage', page).show();
}
var html = '<ul data-role="listview" data-inset="true">';
var html = '';
html += servers.map(function (s) {
var serverHtml = '';
serverHtml += '<li>';
serverHtml += '<a class="lnkServer" data-serverid="' + s.Id + '" href="#">';
serverHtml += '<h3>';
serverHtml += s.Name;
serverHtml += '</h3>';
serverHtml += '</a>';
serverHtml += '</li>';
return serverHtml;
}).join('');
html += '</ul>';
html += servers.map(getServerHtml).join('');
var elem = $('.serverList', page).html(html).trigger('create');
@ -78,6 +112,205 @@
connectToServer(page, server);
});
$('.btnServerMenu', elem).on('click', function () {
showServerMenu(this);
});
}
function showGeneralError() {
// Need the timeout because jquery mobile will not show a popup if there's currently already one in the process of closing
setTimeout(function () {
Dashboard.hideLoadingMsg();
Dashboard.alert({
message: Globalize.translate('DefaultErrorMessage')
});
}, 300);
}
function acceptInvitation(page, id) {
Dashboard.showLoadingMsg();
// Add/Update connect info
ConnectionManager.acceptServer(id).done(function () {
Dashboard.hideLoadingMsg();
loadPage(page);
}).fail(function () {
showGeneralError();
});
}
function rejectInvitation(page, id) {
Dashboard.showLoadingMsg();
// Add/Update connect info
ConnectionManager.deleteServer(id).done(function () {
Dashboard.hideLoadingMsg();
loadPage(page);
}).fail(function () {
showGeneralError();
});
}
function showServerMenu(elem) {
var card = $(elem).parents('.card');
var page = $(elem).parents('.page');
var id = card.attr('data-id');
$('.serverMenu', page).popup("close").remove();
var html = '<div data-role="popup" class="serverMenu" data-theme="a">';
html += '<ul data-role="listview" style="min-width: 180px;">';
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
html += '<li><a href="#" class="btnDelete" data-id="' + id + '">' + Globalize.translate('ButtonDelete') + '</a></li>';
html += '</ul>';
html += '</div>';
page.append(html);
var flyout = $('.serverMenu', page).popup({ positionTo: elem || "window" }).trigger('create').popup("open").on("popupafterclose", function () {
$(this).off("popupafterclose").remove();
});
$('.btnDelete', flyout).on('click', function () {
rejectInvitation(page, this.getAttribute('data-id'));
$('.serverMenu', page).popup("close").remove();
});
}
function showPendingInviteMenu(elem) {
var card = $(elem).parents('.card');
var page = $(elem).parents('.page');
var id = card.attr('data-id');
$('.inviteMenu', page).popup("close").remove();
var html = '<div data-role="popup" class="inviteMenu" data-theme="a">';
html += '<ul data-role="listview" style="min-width: 180px;">';
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
html += '<li><a href="#" class="btnAccept" data-id="' + id + '">' + Globalize.translate('ButtonAccept') + '</a></li>';
html += '<li><a href="#" class="btnReject" data-id="' + id + '">' + Globalize.translate('ButtonReject') + '</a></li>';
html += '</ul>';
html += '</div>';
page.append(html);
var flyout = $('.inviteMenu', page).popup({ positionTo: elem || "window" }).trigger('create').popup("open").on("popupafterclose", function () {
$(this).off("popupafterclose").remove();
});
$('.btnAccept', flyout).on('click', function () {
acceptInvitation(page, this.getAttribute('data-id'));
$('.inviteMenu', page).popup("close").remove();
});
$('.btnReject', flyout).on('click', function () {
rejectInvitation(page, this.getAttribute('data-id'));
$('.inviteMenu', page).popup("close").remove();
});
}
function getPendingInviteHtml(invite) {
var html = '';
var cssClass = "card homePageSquareCard alternateHover bottomPaddedCard";
html += "<div data-id='" + invite.Id + "' class='" + cssClass + "'>";
html += '<div class="cardBox visualCardBox visualCardBox-b">';
html += '<div class="cardScalable">';
html += '<div class="cardPadder"></div>';
var href = "#";
html += '<a class="cardContent" href="' + href + '">';
var imgUrl = 'css/images/server.png';
html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');">';
html += "</div>";
// cardContent
html += "</a>";
// cardScalable
html += "</div>";
html += '<div class="cardFooter">';
html += '<div class="cardText" style="text-align:right; float:right;">';
html += '<button class="btnInviteMenu" type="button" data-inline="true" data-iconpos="notext" data-icon="ellipsis-v" style="margin: 2px 0 0;"></button>';
html += "</div>";
html += '<div class="cardText" style="margin-right: 30px; padding: 11px 0 10px;">';
html += invite.Name;
html += "</div>";
// cardFooter
html += "</div>";
// cardBox
html += "</div>";
// card
html += "</div>";
return html;
}
function renderInvitations(page, list) {
if (list.length) {
$('.invitationSection', page).show();
} else {
$('.invitationSection', page).hide();
}
var html = list.map(getPendingInviteHtml).join('');
var elem = $('.invitationList', page).html(html).trigger('create');
$('.btnInviteMenu', elem).on('click', function () {
showPendingInviteMenu(this);
});
}
function loadInvitations(page) {
ConnectionManager.getUserInvitations().done(function (list) {
renderInvitations(page, list);
});
}
function loadPage(page) {
@ -90,6 +323,8 @@
Dashboard.hideLoadingMsg();
});
loadInvitations(page);
}
$(document).on('pageshow', "#selectServerPage", function () {

6
dashboard-ui/scripts/site.js
View file

@ -437,7 +437,7 @@ var Dashboard = {
Dashboard.alert("Settings saved.");
},
defaultErrorMessage: "There was an error processing the request.",
defaultErrorMessage: Globalize.translate('DefaultErrorMessage'),
processServerConfigurationUpdateResult: function (result) {
@ -567,11 +567,13 @@ var Dashboard = {
html += '<form>';
var isConnectMode = Dashboard.isConnectMode();
if (user.localUser && user.localUser.Configuration.EnableUserPreferenceAccess) {
html += '<p><a data-mini="true" data-role="button" href="mypreferencesdisplay.html?userId=' + user.localUser.Id + '" data-icon="gear">' + Globalize.translate('ButtonMyPreferences') + '</button></a>';
}
if (Dashboard.isConnectMode()) {
if (isConnectMode) {
html += '<p><a data-mini="true" data-role="button" href="selectserver.html" data-icon="cloud">' + Globalize.translate('ButtonSelectServer') + '</button></a>';
}

21
dashboard-ui/scripts/userparentalcontrol.js
View file

@ -111,12 +111,6 @@
Dashboard.hideLoadingMsg();
}
function getDisplayTime(hour) {
return new Date(2000, 1, 1, hour, 0, 0, 0).toLocaleTimeString();
}
function deleteAccessSchedule(page, schedules, index) {
schedules.splice(index, 1);
@ -214,6 +208,19 @@
}
};
function getDisplayTime(hours) {
var minutes = 0;
var pct = hours % 1;
if (pct) {
minutes = parseInt(pct * 60);
}
return new Date(2000, 1, 1, hours, minutes, 0, 0).toLocaleTimeString();
}
function populateHours(page) {
var html = '';
@ -223,6 +230,8 @@
html += '<option value="' + i + '">' + getDisplayTime(i) + '</option>';
}
html += '<option value="24">' + getDisplayTime(0) + '</option>';
$('#selectStart', page).html(html).selectmenu('refresh');
$('#selectEnd', page).html(html).selectmenu('refresh');
}

15
dashboard-ui/selectserver.html
View file

@ -8,14 +8,23 @@
<div data-role="content">
<div class="readOnlyContent" style="margin: 0 auto;">
<h1>${HeaderSelectServer}</h1>
<div class="ehsContent" style="margin: 0 auto;">
<h1 style="margin-bottom:.5em;padding-left:5px;">${HeaderSelectServer}</h1>
<div class="serverList"></div>
<br />
<div class="noServersMessage" style="display:none;">
<div class="noServersMessage" style="display:none;padding-left:5px;">
${MessageNoServersAvailableToConnect}
</div>
<div class="invitationSection" style="display:none;">
<br />
<h1 style="margin-bottom:.5em;padding-left:5px;">${HeaderInvitations}</h1>
<div class="invitationList">
</div>
</div>
</div>
</div>

68
dashboard-ui/thirdparty/apiclient/connectionmanager.js vendored
View file

@ -751,19 +751,25 @@
});
};
function replaceAll(str, find, replace) {
return str.split(find).join(replace);
//return str.replace(new RegExp(find, 'g'), replace);
}
self.getConnectPasswordHash = function (password) {
password = password || '';
password = password
.replace("&", "&amp;")
.replace("/", "&#092;")
.replace("!", "&#33;")
.replace("$", "&#036;")
.replace("\"", "&quot;")
.replace("<", "&lt;")
.replace(">", "&gt;")
.replace("'", "&#39;");
password = replaceAll(password, "&", "&amp;");
password = replaceAll(password, "/", "&#092;");
password = replaceAll(password, "!", "&#33;");
password = replaceAll(password, "$", "&#036;");
password = replaceAll(password, "\"", "&quot;");
password = replaceAll(password, "<", "&lt;");
password = replaceAll(password, ">", "&gt;");
password = replaceAll(password, "'", "&#39;");
return CryptoJS.MD5(password).toString();
};
@ -784,6 +790,50 @@
})[0];
};
self.getUserInvitations = function () {
var url = "https://connect.mediabrowser.tv/service/servers?userId=" + self.connectUserId() + "&status=Waiting";
return $.ajax({
type: "GET",
url: url,
dataType: "json",
headers: {
"X-Connect-UserToken": self.connectToken()
}
});
};
self.deleteServer = function (serverId) {
var url = "https://connect.mediabrowser.tv/service/serverAuthorizations?serverId=" + serverId + "&userId=" + self.connectUserId();
return $.ajax({
type: "DELETE",
url: url,
headers: {
"X-Connect-UserToken": self.connectToken()
}
});
};
self.acceptServer = function (authorizationId) {
var url = "https://connect.mediabrowser.tv/service/ServerAuthorizations/accept?id=" + authorizationId;
return $.ajax({
type: "GET",
url: url,
headers: {
"X-Connect-UserToken": self.connectToken()
}
});
};
};
})(window, jQuery);