add connect linking

dashboard-ui/css/card.css

@@ -48,6 +48,12 @@
     margin: 4px;
 }
 
+.grayscale {
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
 @media all and (max-width: 800px) {
 
     .cardBox {

dashboard-ui/css/librarybrowser.css

@@ -566,6 +566,7 @@ a.itemTag:hover {
 .libraryPanelHeader {
     margin: 5px 0 15px 0;
     font-size: 15px;
+    font-family: Gotham;
 }
 
     .libraryPanelHeader a {

dashboard-ui/css/librarymenu.css

@@ -135,6 +135,7 @@
     padding-left: 0 !important;
     margin-left: -8px;
     cursor: default;
+    font-family: Gotham;
 }
 
 .viewMenuBar {

dashboard-ui/css/site.css

@@ -61,6 +61,13 @@
     src: local('Roboto Bold'), local('Roboto-Bold'), url(fonts/RobotoBold.woff) format('woff');
 }
 
+@font-face {
+    font-family: 'Gotham';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Gotham'), url(fonts/gotham-book.woff) format('woff');
+}
+
 * {
     text-shadow: none !important;
 }
@@ -345,7 +352,6 @@ h1 .imageLink {
     }
 
 .page > .ui-content {
-
     /* Need this so that the audio player doesn't cover content, but also for unveil lazy loading. */
     padding-bottom: 160px;
 }

dashboard-ui/scripts/useredit.js

@@ -1,6 +1,10 @@
 (function ($, window, document) {
 
-    function loadUser(page, user, loggedInUser) {
+    var currentConnectInfo;
+
+    function loadUser(page, user, loggedInUser, connectInfo) {
+
+        currentConnectInfo = connectInfo;
 
         if (!loggedInUser.Configuration.IsAdministrator) {
 
@@ -16,6 +20,12 @@
             $('.lnkEditUserPreferencesContainer', page).show();
         }
 
+        if (user.Id && loggedInUser.Configuration.IsAdministrator) {
+            $('#fldConnectInfo', page).show();
+        } else {
+            $('#fldConnectInfo', page).hide();
+        }
+
         if (!loggedInUser.Configuration.IsAdministrator || !user.Id) {
 
             $('.lnkEditUserPreferencesContainer', page).hide();
@@ -29,6 +39,7 @@
         Dashboard.setPageTitle(user.Name || Globalize.translate('AddUser'));
 
         $('#txtUserName', page).val(user.Name);
+        $('#txtConnectUserName', page).val(connectInfo.Username);
 
         $('#chkIsAdmin', page).checked(user.Configuration.IsAdministrator || false).checkboxradio("refresh");
         $('#chkBlockNotRated', page).checked(user.Configuration.BlockNotRated || false).checkboxradio("refresh");
@@ -45,19 +56,78 @@
         Dashboard.hideLoadingMsg();
     }
 
-    function onSaveComplete(page) {
+    function onSaveComplete(page, user) {
 
         Dashboard.hideLoadingMsg();
 
         var userId = getParameterByName("userId");
 
         if (userId) {
+
+            var currentConnectUsername = currentConnectInfo.Username || '';
+            var enteredConnectUsername = $('#txtConnectUserName', page).val();
+
+            if (currentConnectUsername == enteredConnectUsername) {
                 Dashboard.alert(Globalize.translate('SettingsSaved'));
+            } else {
+                updateConnectInfo(page, user);
+            }
         } else {
             Dashboard.navigate("userprofiles.html");
         }
     }
 
+    function updateConnectInfo(page, user) {
+
+        var currentConnectUsername = currentConnectInfo.Username || '';
+        var enteredConnectUsername = $('#txtConnectUserName', page).val();
+
+        var linkUrl = ApiClient.getUrl('Users/' + user.Id + '/Connect/Link');
+
+        if (currentConnectUsername && !enteredConnectUsername) {
+
+            // Remove connect info
+            // Add/Update connect info
+            ApiClient.ajax({
+
+                type: "DELETE",
+                url: linkUrl
+
+            }).done(function () {
+
+                Dashboard.alert(Globalize.translate('SettingsSaved'));
+                loadData(page);
+            });
+
+        }
+        else if (currentConnectUsername != enteredConnectUsername) {
+
+            // Add/Update connect info
+            ApiClient.ajax({
+
+                type: "POST",
+                url: linkUrl,
+                data: {
+                    ConnectUsername: enteredConnectUsername
+                }
+
+            }).done(function () {
+
+                Dashboard.alert({
+
+                    message: Globalize.translate('MessageMediaBrowserAccontAdded'),
+                    title: Globalize.translate('HeaderMediaBrowserAccountAdded'),
+
+                    callback: function () {
+
+                        loadData(page);
+                    }
+
+                });
+            });
+        }
+    }
+
     function saveUser(user, page) {
 
         user.Name = $('#txtUserName', page).val();
@@ -78,11 +148,11 @@
 
         if (userId) {
             ApiClient.updateUser(user).done(function () {
-                onSaveComplete(page);
+                onSaveComplete(page, user);
             });
         } else {
             ApiClient.createUser(user).done(function () {
-                onSaveComplete(page);
+                onSaveComplete(page, user);
             });
         }
     }
@@ -97,23 +167,70 @@
 
             Dashboard.showLoadingMsg();
 
-            var userId = getParameterByName("userId");
+            getUser().done(function (result) {
-
-            if (!userId) {
-                saveUser({
-                    Configuration: {}
-                }, page);
-            } else {
-                ApiClient.getUser(userId).done(function (result) {
                 saveUser(result, page);
             });
-            }
 
             // Disable default form submission
             return false;
         };
     }
 
+    function getUser() {
+
+        var userId = getParameterByName("userId");
+
+        if (userId) {
+
+            return ApiClient.getUser(userId);
+        }
+
+        var deferred = $.Deferred();
+
+        deferred.resolveWith(null, [{
+            Configuration: {
+                IsAdministrator: false,
+                EnableLiveTvManagement: true,
+                EnableLiveTvAccess: true,
+                EnableRemoteControlOfOtherUsers: true,
+                EnableMediaPlayback: true
+            }
+        }]);
+
+        return deferred.promise();
+    }
+
+    function getConnectUserInfo() {
+
+        var userId = getParameterByName("userId");
+
+        if (userId) {
+
+            return ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Connect/Info'));
+        }
+
+        var deferred = $.Deferred();
+
+        deferred.resolveWith(null, [[{}]]);
+
+        return deferred.promise();
+    }
+
+    function loadData(page) {
+
+        Dashboard.showLoadingMsg();
+
+        var promise1 = getUser();
+        var promise2 = Dashboard.getCurrentUser();
+        var promise3 = getConnectUserInfo();
+
+        $.when(promise1, promise2, promise3).done(function (response1, response2, response3) {
+
+            loadUser(page, response1[0] || response1, response2[0], response3[0]);
+
+        });
+    }
+
     window.EditUserPage = new editUserPage();
 
     $(document).on('pagebeforeshow', "#editUserPage", function () {
@@ -141,39 +258,7 @@
 
         var page = this;
 
-        Dashboard.showLoadingMsg();
+        loadData(page);
-
-        var userId = getParameterByName("userId");
-
-        var promise1;
-
-        if (!userId) {
-
-            var deferred = $.Deferred();
-
-            deferred.resolveWith(null, [{
-                Configuration: {
-                    IsAdministrator: true,
-                    EnableLiveTvManagement: true,
-                    EnableLiveTvAccess: true,
-                    EnableRemoteControlOfOtherUsers: true,
-                    EnableMediaPlayback: true
-                }
-            }]);
-
-            promise1 = deferred.promise();
-        } else {
-
-            promise1 = ApiClient.getUser(userId);
-        }
-
-        var promise2 = Dashboard.getCurrentUser();
-
-        $.when(promise1, promise2).done(function (response1, response2) {
-
-            loadUser(page, response1[0] || response1, response2[0]);
-
-        });
 
         $("form input:first", page).focus();
     });

dashboard-ui/scripts/userprofilespage.js

@@ -1,8 +1,12 @@
 (function (document, window, $) {
 
-    function deleteUser(page, id, name) {
+    function deleteUser(page, id) {
 
-        var msg = Globalize.translate('DeleteUserConfirmation').replace('{0}', name);
+        $('.userMenu', page).on("popupafterclose.deleteuser", function() {
+
+            $(this).off('popupafterclose.deleteuser');
+
+            var msg = Globalize.translate('DeleteUserConfirmation');
 
             Dashboard.confirm(msg, Globalize.translate('DeleteUser'), function (result) {
 
@@ -15,13 +19,59 @@
                     });
                 }
             });
+
+        }).popup('close');
+    }
+
+    function closeUserMenu(page) {
+        $('.userMenu', page).popup('close').remove();
+    }
+
+    function showUserMenu(elem) {
+
+        var card = $(elem).parents('.card');
+        var page = $(elem).parents('.page');
+        var userId = card.attr('data-userid');
+
+        $('.userMenu', page).popup("close").remove();
+
+        var html = '<div data-role="popup" class="userMenu" data-history="false" data-theme="a">';
+
+        html += '<ul data-role="listview" style="min-width: 180px;">';
+        html += '<li data-role="list-divider">Menu</li>';
+
+        html += '<li><a href="#" class="btnDeleteUser" data-userid="' + userId + '">' + Globalize.translate('ButtonDelete') + '</a></li>';
+
+        html += '<li><a href="useredit.html?userid=' + userId + '">' + Globalize.translate('ButtonOpen') + '</a></li>';
+
+        html += '</ul>';
+
+        html += '</div>';
+
+        page.append(html);
+
+        var flyout = $('.userMenu', page).popup({ positionTo: elem || "window" }).trigger('create').popup("open").on("popupafterclose", function () {
+
+            $(this).off("popupafterclose").remove();
+
+        });
+
+        $('.btnDeleteUser', flyout).on('click', function () {
+            deleteUser(page, this);
+        });
     }
 
     function getUserHtml(user) {
 
         var html = '';
 
-        html += "<div class='card homePageSquareCard alternateHover bottomPaddedCard'>";
+        var cssClass = "card homePageSquareCard alternateHover bottomPaddedCard";
+
+        if (user.Configuration.IsDisabled) {
+            cssClass += ' grayscale';
+        }
+
+        html += "<div data-userid='" + user.Id + "' class='" + cssClass + "'>";
 
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
@@ -36,7 +86,7 @@
         if (user.PrimaryImageTag) {
 
             imgUrl = ApiClient.getUserImageUrl(user.Id, {
-                width: 200,
+                width: 300,
                 tag: user.PrimaryImageTag,
                 type: "Primary"
             });
@@ -66,7 +116,7 @@
 
         html += '<div class="cardText" style="text-align:right; float:right;">';
 
-        html += '<button type="button" data-inline="true" data-iconpos="notext" data-icon="ellipsis-v" style="margin: 2px 0 0;"></button>';
+        html += '<button class="btnUserMenu" 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;">';
@@ -82,54 +132,37 @@
         // card
         html += "</div>";
 
+        return html;
+    }
 
+    function getUserSectionHtml(users) {
 
-        //html += "<li>";
+        var html = '';
 
-        //html += "<a href='useredit.html?userId=" + user.Id + "'>";
+        html += users.map(getUserHtml).join('');
-
-        //if (user.PrimaryImageTag) {
-
-        //    var url = ApiClient.getUserImageUrl(user.Id, {
-        //        width: 80,
-        //        tag: user.PrimaryImageTag,
-        //        type: "Primary"
-        //    });
-        //    html += "<img src='" + url + "' />";
-        //} else {
-        //    html += "<img src='css/images/userflyoutdefault.png' />";
-        //}
-
-        //html += "<h3>" + user.Name;
-
-        //html += "</h3>";
-
-        //html += "<p class='ui-li-aside'>";
-        //if (user.HasConfiguredPassword) html += '<img src="css/images/userdata/password.png" alt="' + Globalize.translate('Password') + '" title="' + Globalize.translate('Password') + '" class="userProfileIcon" />';
-        //if (user.Configuration.IsAdministrator) html += '<img src="css/images/userdata/administrator.png" alt="' + Globalize.translate('Administrator') + '" title="' + Globalize.translate('Administrator') + '" class="userProfileIcon" />';
-
-        //html += "</p>";
-
-        //html += "</a>";
-
-
-        //html += "<a onclick='UserProfilesPage.deleteUser(this);' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#'>" + Globalize.translate('Delete') + "</a>";
-
-        //html += "</li>";
 
         return html;
     }
 
+    function renderUsers(page, users) {
+
+        var html = '';
+
+        html += getUserSectionHtml(users);
+
+        var elem = $('.users', page).html(html).trigger('create');
+
+        $('.btnUserMenu', elem).on('click', function () {
+            showUserMenu(this);
+        });
+    }
+
     function loadUsers(page) {
 
         Dashboard.showLoadingMsg();
 
         ApiClient.getUsers().done(function (users) {
-
+            renderUsers(page, users);
-            var html = users.map(getUserHtml).join('');
-
-            $('.users', page).html(html).trigger('create');
-
             Dashboard.hideLoadingMsg();
         });
     }

dashboard-ui/useredit.html

@@ -23,37 +23,32 @@
                     <ul data-role="listview" class="ulForm">
                         <li id="fldUserName">
                             <label for="txtUserName">${LabelName}</label>
-                            <input id="txtUserName" name="txtUserName" required="required" type="text" />
+                            <input id="txtUserName" required="required" type="text" />
+                        </li>
+                        <li id="fldConnectInfo" style="display: none;">
+                            <label for="txtConnectUserName">${LabelConnectUserName}</label>
+                            <input id="txtConnectUserName" type="text" />
+                            <div class="fieldDescription">${LabelConnectUserNameHelp}</div>
                         </li>
                         <li id="fldIsAdmin" style="display: none;">
                             <input type="checkbox" id="chkIsAdmin" name="chkIsAdmin" />
                             <label for="chkIsAdmin">${OptionAllowUserToManageServer}</label>
                         </li>
                     </ul>
-                    <div id="featureAccessFields">
+                    <fieldset id="featureAccessFields" data-role="controlgroup">
-                        <h2>${HeaderFeatureAccess}</h2>
+                        <legend>${HeaderFeatureAccess}</legend>
-                        <div>
+                        <input type="checkbox" id="chkEnableMediaPlayback" name="chkEnableMediaPlayback" />
-                            <input type="checkbox" id="chkEnableMediaPlayback" name="chkEnableMediaPlayback" data-mini="true" />
                         <label for="chkEnableMediaPlayback">${OptionAllowMediaPlayback}</label>
-                        </div>
+                        <input type="checkbox" id="chkEnableLiveTvAccess" name="chkEnableLiveTvAccess" />
-                        <div>
-                            <input type="checkbox" id="chkEnableLiveTvAccess" name="chkEnableLiveTvAccess" data-mini="true" />
                         <label for="chkEnableLiveTvAccess">${OptionAllowBrowsingLiveTv}</label>
-                        </div>
+                        <input type="checkbox" id="chkManageLiveTv" name="chkManageLiveTv" />
-                        <div>
-                            <input type="checkbox" id="chkManageLiveTv" name="chkManageLiveTv" data-mini="true" />
                         <label for="chkManageLiveTv">${OptionAllowManageLiveTv}</label>
-                        </div>
+                        <input type="checkbox" id="chkEnableContentDeletion" name="chkEnableContentDeletion" />
-                        <div>
-                            <input type="checkbox" id="chkEnableContentDeletion" name="chkEnableContentDeletion" data-mini="true" />
                         <label for="chkEnableContentDeletion">${OptionAllowDeleteLibraryContent}</label>
-                        </div>
+                        <input type="checkbox" id="chkEnableRemoteControlOtherUsers" name="chkEnableRemoteControlOtherUsers" />
-                        <div>
-                            <input type="checkbox" id="chkEnableRemoteControlOtherUsers" name="chkEnableRemoteControlOtherUsers" data-mini="true" />
                         <label for="chkEnableRemoteControlOtherUsers">${OptionAllowRemoteControlOthers}</label>
-                        </div>
+                    </fieldset>
                     <br />
-                    </div>
                     <div id="accessControlDiv" style="display: none" data-role="collapsible">
                         <h2>${HeaderAdvancedControl}</h2>
                         <div id="fldIsEnabled" style="margin: 1em 0 2em;">

dashboard-ui/userprofiles.html

@@ -14,11 +14,14 @@
                 </div>
 
                 <div class="readOnlyContent">
-                    <p id="pAddUser">
+                    <div>
-                        <button type="button" data-icon="plus" data-iconpos="right" onclick="Dashboard.navigate('useredit.html');">
+                        <a data-role="button" data-icon="plus" href="useredit.html" data-inline="true">
-                            ${ButtonAddUser}
+                            ${ButtonAddLocalUser}
-                        </button>
+                        </a>
-                    </p>
+                        <!--<a data-role="button" data-icon="plus" href="useredit.html" data-inline="true">
+                            ${ButtonInviteMediaBrowserUser}
+                        </a>-->
+                    </div>
                 </div>
 
                 <div class="itemsContainer users" style="text-align:left;">