From c710303de9af16177bde0d12fe3f565a86f226a2 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Tue, 5 May 2015 11:24:47 -0400 Subject: [PATCH] added manual server form --- dashboard-ui/connectlogin.html | 56 ++++++++++- dashboard-ui/css/materialize.css | 7 +- dashboard-ui/css/mediaplayer-video.css | 6 +- dashboard-ui/scripts/connectlogin.js | 129 +++++++++++++++++++++++++ dashboard-ui/scripts/librarymenu.js | 25 ++--- dashboard-ui/scripts/selectserver.js | 31 +++++- dashboard-ui/scripts/site.js | 48 ++++----- dashboard-ui/scripts/sync.js | 4 +- dashboard-ui/selectserver.html | 7 ++ 9 files changed, 265 insertions(+), 48 deletions(-) diff --git a/dashboard-ui/connectlogin.html b/dashboard-ui/connectlogin.html index ea1b241ca6..012dc4d554 100644 --- a/dashboard-ui/connectlogin.html +++ b/dashboard-ui/connectlogin.html @@ -9,7 +9,7 @@
-
+

${HeaderSignInWithConnect}


@@ -27,18 +27,64 @@ -

+

+ -
-

${HeaderNewUsers}

- ${ButtonSignUp} +
+ + + +
diff --git a/dashboard-ui/css/materialize.css b/dashboard-ui/css/materialize.css index 3600d53bce..c74532bfb8 100644 --- a/dashboard-ui/css/materialize.css +++ b/dashboard-ui/css/materialize.css @@ -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; diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css index 5b751f02aa..b7b47742a0 100644 --- a/dashboard-ui/css/mediaplayer-video.css +++ b/dashboard-ui/css/mediaplayer-video.css @@ -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; diff --git a/dashboard-ui/scripts/connectlogin.js b/dashboard-ui/scripts/connectlogin.js index 03975e9ab3..9551896e03 100644 --- a/dashboard-ui/scripts/connectlogin.js +++ b/dashboard-ui/scripts/connectlogin.js @@ -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 = 'http://emby.media'; + $('.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; + } }; diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js index a58b6b205b..7f24f0fda9 100644 --- a/dashboard-ui/scripts/librarymenu.js +++ b/dashboard-ui/scripts/librarymenu.js @@ -40,26 +40,29 @@ html += ''; } + + if (user.name) { + + html += ''; - html += ''; + if (user.imageUrl) { - if (user.imageUrl) { + var userButtonHeight = 26; - var userButtonHeight = 26; + var url = user.imageUrl; - var url = user.imageUrl; + if (user.supportsImageParams) { + url += "&height=" + (userButtonHeight * Math.max(devicePixelRatio || 1, 2)); + } - if (user.supportsImageParams) { - url += "&height=" + (userButtonHeight * Math.max(devicePixelRatio || 1, 2)); + html += ''; + } else { + html += '
'; } - html += ''; - } else { - html += '
'; + html += ''; } - html += ''; - if (user.canManageServer) { html += '
'; } diff --git a/dashboard-ui/scripts/selectserver.js b/dashboard-ui/scripts/selectserver.js index da15d18246..97d75161a7 100644 --- a/dashboard-ui/scripts/selectserver.js +++ b/dashboard-ui/scripts/selectserver.js @@ -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) { - ConnectionManager.getUserInvitations().done(function (list) { + if (ConnectionManager.isLoggedIntoConnect()) { - renderInvitations(page, list); + 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 () { diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index ef9ba4c0b2..a39da144fd 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -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.'); diff --git a/dashboard-ui/scripts/sync.js b/dashboard-ui/scripts/sync.js index 1c92a0800c..3bc85d28b2 100644 --- a/dashboard-ui/scripts/sync.js +++ b/dashboard-ui/scripts/sync.js @@ -400,7 +400,9 @@ var page = this; - showSyncButtonsPerUser(page); + if (!Dashboard.isServerlessPage()) { + showSyncButtonsPerUser(page); + } }); diff --git a/dashboard-ui/selectserver.html b/dashboard-ui/selectserver.html index 684de14615..d2acb0c968 100644 --- a/dashboard-ui/selectserver.html +++ b/dashboard-ui/selectserver.html @@ -19,6 +19,13 @@
+
+
+ ${ButtonNewServer} +
+
+ ${ButtonSignInWithConnect} +