added manual server form

This commit is contained in:
Luke Pulverenti 2015-05-05 11:24:47 -04:00
parent 5257e91628
commit c710303de9
9 changed files with 265 additions and 48 deletions

View File

@ -9,7 +9,7 @@
<div data-role="content">
<form class="connectLoginForm" style="text-align: center; margin: 0 auto;">
<form class="connectLoginForm" style="text-align: center; margin: 0 auto;display:none;">
<h1 style="text-align: left;">${HeaderSignInWithConnect}</h1>
<br />
@ -27,18 +27,64 @@
<button type="submit" data-icon="check">
${ButtonSignIn}
</button>
<p>
<p class="forgotPassword" style="display:none;">
<a href="http://emby.media/community/index.php?app=core&module=global&section=lostpass" target="_blank">${ButtonForgotPassword}</a>
</p>
<div class="skip">
<br />
<a data-role="button" data-icon="delete" href="connectlogin.html?mode=manualserver">${ButtonSkip}</a>
<div class="fieldDescription">${TextConnectToServerManually}</div>
</div>
<div class="newUsers" style="display:none;">
<br />
<h2 style="text-align: left;">${HeaderNewUsers}</h2>
<a data-role="button" data-icon="action" href="http://emby.media/community/index.php?app=core&module=global&section=register" target="_blank">${ButtonSignUp}</a>
</div>
</form>
<form class="manualServerForm" style="text-align: center; margin: 0 auto;display:none;">
<h1 style="text-align: left;">${HeaderNewServer}</h1>
<br />
<div>
<label for="txtServerHost" style="text-align: left;">${LabelServerHost}</label>
<input type="text" id="txtServerHost" required="required" />
<div class="fieldDescription" style="text-align:left;">${LabelServerHostHelp}</div>
</div>
<br />
<div>
<label for="txtServerPort" style="text-align: left;">${LabelServerPort}</label>
<input type="number" id="txtServerPort" step="1" min="0" />
</div>
<br /><br />
<button type="submit" data-icon="check">
${ButtonConnect}
</button>
</form>
<div class="welcomeContainer readOnlyContent" style="text-align: center; margin: 0 auto;display:none;">
<div style="text-align: left;">
<h1>${HeaderWelcomeToEmby}</h1>
<p style="margin:2em 0;">${EmbyIntroMessage}</p>
<p style="margin:2em 0;" class="embyIntroDownloadMessage"></p>
<a class="btn btnActionAccent btnIconRight" href="connectlogin.html">
<span>
${ButtonNext}
</span>
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<script type="text/javascript">
$('.connectLoginForm').off('submit', ConnectLoginPage.onSubmit).on('submit', ConnectLoginPage.onSubmit);
$('.manualServerForm').off('submit', ConnectLoginPage.onManualServerSubmit).on('submit', ConnectLoginPage.onManualServerSubmit);
</script>
</div>
</body>

View File

@ -202,11 +202,16 @@ button.btn:not(.btn-inline), button.btn-large:not(.btn-inline) {
vertical-align: middle;
}
.btn:not(.btn-inline):not(.btnNoText) i {
.btn:not(.btn-inline):not(.btnNoText):not(.btnIconRight) i {
position: absolute;
left: 10px;
}
.btnIconRight:not(.btn-inline):not(.btnNoText) i {
position: absolute;
right: 10px;
}
.btn-large i {
position: absolute;
left: 24px;

View File

@ -36,7 +36,7 @@
}
.videoControls {
padding: 0 .5em;
padding: .5em .5em;
background-color: rgba(0, 0, 0, .8);
position: fixed;
left: 0;
@ -80,7 +80,7 @@
z-index: 99999;
}
#videoPlayer .nowPlayingInfo img {
#videoPlayer .nowPlayingImage img {
height: auto !important;
max-width: 100px;
max-height: 200px;
@ -202,7 +202,7 @@
}
@media all and (min-width: 1300px) {
#videoPlayer .nowPlayingInfo img {
#videoPlayer .nowPlayingImage img {
height: auto !important;
max-width: 150px;
max-height: 300px;

View File

@ -28,6 +28,126 @@
}
function handleConnectionResult(page, result) {
switch (result.State) {
case MediaBrowser.ConnectionState.SignedIn:
{
var apiClient = result.ApiClient;
Dashboard.serverAddress(apiClient.serverAddress());
Dashboard.setCurrentUser(apiClient.getCurrentUserId(), apiClient.accessToken());
window.location = 'index.html';
}
break;
case MediaBrowser.ConnectionState.ServerSignIn:
{
window.location = 'connectlogin.html?mode=serversignin&serverid=' + result.Servers[0].Id;
}
break;
case MediaBrowser.ConnectionState.ServerSelection:
{
onLoggedIn();
}
break;
case MediaBrowser.ConnectionState.ConnectSignIn:
{
loadMode(page, 'welcome');
}
break;
default:
break;
}
}
function loadAppConnection(page) {
Dashboard.showLoadingMsg();
ConnectionManager.connect().done(function (result) {
Dashboard.hideLoadingMsg();
handleConnectionResult(page, result);
});
}
function loadPage(page) {
var mode = getParameterByName('mode');
if (!mode) {
if (Dashboard.isRunningInCordova()) {
loadAppConnection(page);
return;
}
mode = 'connect';
}
loadMode(page, mode);
}
function loadMode(page, mode) {
if (mode == 'welcome') {
$('.connectLoginForm', page).hide();
$('.welcomeContainer', page).show();
$('.manualServerForm', page).hide();
}
else if (mode == 'connect') {
$('.connectLoginForm', page).show();
$('.welcomeContainer', page).hide();
$('.manualServerForm', page).hide();
}
else if (mode == 'manualserver') {
$('.manualServerForm', page).show();
$('.connectLoginForm', page).hide();
$('.welcomeContainer', page).hide();
}
}
$(document).on('pageshow', "#connectLoginPage", function () {
var page = this;
loadPage(page);
var link = '<a href="http://emby.media" target="_blank">http://emby.media</a>';
$('.embyIntroDownloadMessage', page).html(Globalize.translate('EmbyIntroDownloadMessage', link));
if (Dashboard.isRunningInCordova()) {
$('.newUsers', page).hide();
$('.forgotPassword', page).hide();
$('.skip', page).show();
} else {
$('.skip', page).hide();
$('.newUsers', page).show();
$('.forgotPassword', page).show();
}
});
function submitManualServer(page) {
var host = $('#txtServerHost', page).val();
var port = $('#txtServerPort', page).val();
if (port) {
host += ':' + port;
}
Dashboard.showLoadingMsg();
ConnectionManager.connectToAddress(host).done(function (result) {
Dashboard.hideLoadingMsg();
handleConnectionResult(page, result);
});
}
function submit(page) {
var user = $('#txtManualName', page).val();
@ -45,6 +165,15 @@
submit(page);
return false;
},
onManualServerSubmit: function () {
var page = $(this).parents('.page');
submitManualServer(page);
return false;
}
};

View File

@ -41,6 +41,8 @@
}
if (user.name) {
html += '<a class="headerButton headerButtonRight headerUserButton" href="#" onclick="Dashboard.showUserFlyout(this);">';
if (user.imageUrl) {
@ -59,6 +61,7 @@
}
html += '</a>';
}
if (user.canManageServer) {
html += '<a href="dashboard.html" class="headerButton headerButtonRight dashboardEntryHeaderButton"><div class="fa fa-cog"></div></a>';

View File

@ -19,6 +19,15 @@
window.location = 'index.html';
}
break;
case MediaBrowser.ConnectionState.ServerSignIn:
{
if (Dashboard.isRunningInCordova()) {
window.location = 'connectlogin.html?mode=serversignin&serverid=' + result.Servers[0].Id;
} else {
showServerConnectionFailure();
}
}
break;
default:
showServerConnectionFailure();
break;
@ -326,11 +335,19 @@
function loadInvitations(page) {
if (ConnectionManager.isLoggedIntoConnect()) {
ConnectionManager.getUserInvitations().done(function (list) {
renderInvitations(page, list);
});
} else {
renderInvitations(page, []);
}
}
function loadPage(page) {
@ -345,6 +362,14 @@
});
loadInvitations(page);
if (Dashboard.isRunningInCordova()) {
$('.newServer', page).show();
$('.connectLogin', page).show();
} else {
$('.newServer', page).hide();
$('.connectLogin', page).hide();
}
}
$(document).on('pageshow', "#selectServerPage", function () {

View File

@ -42,8 +42,22 @@ var Dashboard = {
$.mobile.panel.prototype.options.classes.panel = "largePanel ui-panel";
},
isConnectMode: function () {
return true;
if (Dashboard.isRunningInCordova()) {
return true;
}
var url = getWindowUrl().toLowerCase();
return url.indexOf('mediabrowser.tv') != -1 ||
url.indexOf('emby.media') != -1;
},
isRunningInCordova: function () {
return true;
return window.appMode == 'cordova';
},
@ -185,18 +199,6 @@ var Dashboard = {
Dashboard.getUserPromise = null;
},
isConnectMode: function () {
if (Dashboard.isRunningInCordova()) {
return true;
}
var url = getWindowUrl().toLowerCase();
return url.indexOf('mediabrowser.tv') != -1 ||
url.indexOf('emby.media') != -1;
},
logout: function (logoutWithServer) {
store.removeItem("userId");
@ -1648,18 +1650,6 @@ $(document).on('pagecreate', ".page", function () {
var page = $(this);
var isConnectMode = Dashboard.isConnectMode();
if (isConnectMode && !page.hasClass('connectLoginPage')) {
if (!ConnectionManager.isLoggedIntoConnect()) {
console.log('Not logged into connect. Redirecting to login.');
Dashboard.logout();
return;
}
}
var apiClient = ConnectionManager.currentApiClient();
if (Dashboard.getAccessToken() && Dashboard.getCurrentUserId()) {
@ -1686,6 +1676,16 @@ $(document).on('pagecreate', ".page", function () {
else {
var isConnectMode = Dashboard.isConnectMode();
if (isConnectMode) {
if (!Dashboard.isServerlessPage()) {
Dashboard.logout();
return;
}
}
if (this.id !== "loginPage" && !page.hasClass('forgotPasswordPage') && !page.hasClass('wizardPage') && !isConnectMode) {
console.log('Not logged into server. Redirecting to login.');

View File

@ -400,7 +400,9 @@
var page = this;
if (!Dashboard.isServerlessPage()) {
showSyncButtonsPerUser(page);
}
});

View File

@ -19,6 +19,13 @@
</div>
<div class="serverList"></div>
<div class="newServer">
<br />
<a data-role="button" href="connectlogin.html?mode=manualserver" data-icon="plus">${ButtonNewServer}</a>
</div>
<div class="connectLogin">
<a data-role="button" href="connectlogin.html?mode=connect" data-icon="action">${ButtonSignInWithConnect}</a>
</div>
<br />
<div class="noServersMessage" style="display:none;padding-left:5px;">
${MessageNoServersAvailableToConnect}