added manual server form

dashboard-ui/connectlogin.html

@@ -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>

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;

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;

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 = '<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;
+
         }
     };
 

dashboard-ui/scripts/librarymenu.js

@@ -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>';

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) {
 
+        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 () {

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.');

dashboard-ui/scripts/sync.js

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

dashboard-ui/selectserver.html

@@ -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}