update select server

dashboard-ui/apiclient/connectionmanager.js

@@ -1232,31 +1232,42 @@
 
         self.deleteServer = function (serverId) {
 
-            var connectToken = self.connectToken();
-
             if (!serverId) {
                 throw new Error("null serverId");
             }
 
+            var server = credentialProvider.credentials().Servers.filter(function (s) {
+                return s.Id == serverId;
+            });
+            server = server.length ? server[0] : null;
+
             var deferred = DeferredBuilder.Deferred();
 
             function onDone() {
                 var credentials = credentialProvider.credentials();
 
                 credentials.Servers = credentials.Servers.filter(function (s) {
-                    return s.ConnectServerId != serverId;
+                    return s.Id != serverId;
                 });
 
                 credentialProvider.credentials(credentials);
                 deferred.resolve();
             }
 
-            if (!connectToken || !self.connectUserId()) {
+            if (!server.ConnectServerId) {
                 onDone();
                 return deferred.promise();
             }
 
-            var url = "https://connect.emby.media/service/serverAuthorizations?serverId=" + serverId + "&userId=" + self.connectUserId();
+            var connectToken = self.connectToken();
+            var connectUserId = self.connectUserId();
+
+            if (!connectToken || !connectUserId) {
+                onDone();
+                return deferred.promise();
+            }
+
+            var url = "https://connect.emby.media/service/serverAuthorizations?serverId=" + server.ConnectServerId + "&userId=" + connectUserId;
 
             HttpClient.send({
                 type: "DELETE",

dashboard-ui/apiclient/credentials.js

@@ -96,6 +96,9 @@
                 if (server.LastConnectionMode != null) {
                     existing.LastConnectionMode = server.LastConnectionMode;
                 }
+                if (server.ConnectServerId) {
+                    existing.ConnectServerId = server.ConnectServerId;
+                }
                 existing.DateLastLocalConnection = Math.max(existing.DateLastLocalConnection || 0, server.DateLastLocalConnection || 0);
 
                 return existing;

dashboard-ui/cordova/registrationservices.js

@@ -49,11 +49,19 @@
         return ConnectionManager.getRegistrationInfo(feature, ApiClient);
     }
 
+    var validatedFeatures = [];
+
     function validateFeature(id, deferred) {
 
+        if (validatedFeatures.indexOf(id) != -1) {
+            deferred.resolve();
+            return;
+        }
+
         var info = IapManager.getProductInfo(id) || {};
 
         if (info.owned) {
+            validatedFeatures.push(id);
             deferred.resolve();
             return;
         }
@@ -71,6 +79,7 @@
         getRegistrationInfo(prefix + 'appunlock', productInfo.enableSupporterUnlock).done(function (registrationInfo) {
 
             if (registrationInfo.IsRegistered) {
+                validatedFeatures.push(id);
                 deferred.resolve();
                 return;
             }

dashboard-ui/css/librarybrowser.css

@@ -525,6 +525,11 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 .primaryDetailsContainer {
     float: left;
     padding: .75em 0 0 1.5em;
+    width: 68%;
+}
+
+.portraitDetailImageContainer + .primaryDetailsContainer {
+    width: 75%;
 }
 
 .parentName {
@@ -557,9 +562,21 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 
 @media all and (max-width: 1000px) {
 
+    .primaryDetailsContainer {
+        width: 64%;
+    }
+
+    .portraitDetailImageContainer + .primaryDetailsContainer {
+        width: 72%;
+    }
+
     .detailImageContainer img {
         max-width: 240px;
     }
+
+    .portraitDetailImageContainer img {
+        max-width: 180px;
+    }
 }
 
 @media all and (max-width: 800px) {

dashboard-ui/css/pluginupdates.css

@@ -1,11 +0,0 @@
-/*
-    Plugin updates Page
-    */
-#pluginUpdatesForm table {
-    width: 100%;
-}
-
-#pluginUpdatesForm td + td {
-    text-align: center;
-    
-}

dashboard-ui/scripts/itemdetailpage.js

@@ -411,7 +411,7 @@
         var topOverview = page.querySelector('.topOverview');
         var bottomOverview = page.querySelector('.bottomOverview');
 
-        var seasonOnBottom = screen.availHeight < 1080 || screen.availWidth < 1920;
+        var seasonOnBottom = screen.availHeight < 600 || screen.availWidth < 600;
 
         if (item.Type == 'MusicAlbum' || item.Type == 'MusicArtist' || (item.Type == 'Season' && seasonOnBottom) || (item.Type == 'Series' && seasonOnBottom)) {
             LibraryBrowser.renderOverview([bottomOverview], item);

dashboard-ui/scripts/selectserver.js

@@ -48,61 +48,29 @@
 
         var html = '';
 
-        var cssClass = "card squareCard bottomPaddedCard";
+        html += '<paper-icon-item class="serverItem" data-id="' + server.Id + '">';
 
-        html += "<div data-id='" + server.Id + "' data-connectserverid='" + (server.ConnectServerId || '') + "' class='" + cssClass + "'>";
+        html += '<paper-fab class="listAvatar blue lnkServer" icon="wifi" item-icon></paper-fab>';
 
-        html += '<div class="cardBox visualCardBox">';
+        html += '<paper-item-body class="lnkServer" two-line>';
-        html += '<div class="cardScalable">';
+        html += '<a class="clearLink" href="#">';
 
-        html += '<div class="cardPadder"></div>';
+        html += '<div>';
-
-        var href = server.href || "#";
-        html += '<a class="cardContent lnkServer" data-serverid="' + server.Id + '" href="' + href + '">';
-
-        var imgUrl = server.Id == 'connect' ? 'css/images/logo536.png' : '';
-
-        if (imgUrl) {
-            html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');">';
-        } else {
-            html += '<div class="cardImage" style="text-align:center;">';
-
-            var icon = server.Id == 'new' ? 'add' : 'wifi';
-            html += '<iron-icon icon="' + icon + '" style="color:#fff;vertical-align:middle;margin-top:30%;height:64px;width:64px;"></iron-icon>';
-        }
-
-        html += "</div>";
-
-        // cardContent'
-        html += "</a>";
-
-        // cardScalable
-        html += "</div>";
-
-        html += '<div class="cardFooter outerCardFooter">';
-
-        if (server.showOptions !== false) {
-            html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
-            html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnServerMenu"></paper-icon-button>';
-            html += "</div>";
-        }
-
-        html += '<div class="cardText">';
         html += server.Name;
-        html += "</div>";
+        html += '</div>';
 
-        html += '<div class="cardText">';
+        html += '<div secondary>';
-        html += '&nbsp;';
+        html += MediaBrowser.ServerInfo.getServerAddress(server, server.LastConnectionMode);
-        html += "</div>";
+        html += '</div>';
 
-        // cardFooter
+        html += '</a>';
-        html += "</div>";
+        html += '</paper-item-body>';
 
-        // cardBox
+        if (server.Id) {
-        html += "</div>";
+            html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnServerMenu"></paper-icon-button>';
+        }
 
-        // card
+        html += '</paper-icon-item>';
-        html += "</div>";
 
         return html;
     }
@@ -111,8 +79,10 @@
 
         if (servers.length) {
             $('.noServersMessage', page).hide();
+            $('.serverList', page).show();
         } else {
             $('.noServersMessage', page).show();
+            $('.serverList', page).hide();
         }
 
         var html = '';
@@ -123,16 +93,14 @@
 
         $('.lnkServer', elem).on('click', function () {
 
-            var id = this.getAttribute('data-serverid');
+            var item = $(this).parents('.serverItem')[0];
-
+            var id = item.getAttribute('data-id');
-            if (id != 'new' && id != 'connect') {
 
             var server = servers.filter(function (s) {
                 return s.Id == id;
             })[0];
 
             connectToServer(page, server);
-            }
 
         });
 
@@ -170,12 +138,12 @@
         });
     }
 
-    function deleteServer(page, id) {
+    function deleteServer(page, serverId) {
 
         Dashboard.showModalLoadingMsg();
 
         // Add/Update connect info
-        ConnectionManager.deleteServer(id).done(function () {
+        ConnectionManager.deleteServer(serverId).done(function () {
 
             Dashboard.hideModalLoadingMsg();
 
@@ -208,10 +176,9 @@
 
     function showServerMenu(elem) {
 
-        var card = $(elem).parents('.card');
+        var card = $(elem).parents('.serverItem');
         var page = $(elem).parents('.page');
         var serverId = card.attr('data-id');
-        var connectserverid = card.attr('data-connectserverid');
 
         var menuItems = [];
 
@@ -231,7 +198,7 @@
                     switch (id) {
 
                         case 'delete':
-                            deleteServer(page, connectserverid);
+                            deleteServer(page, serverId);
                             break;
                         default:
                             break;
@@ -244,40 +211,45 @@
 
     function showPendingInviteMenu(elem) {
 
-        var card = $(elem).parents('.card');
+        var card = $(elem).parents('.inviteItem');
         var page = $(elem).parents('.page');
-        var id = card.attr('data-id');
+        var invitationId = card.attr('data-id');
 
-        $('.inviteMenu', page).popup("close").remove();
+        var menuItems = [];
-
-        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();
 
+        menuItems.push({
+            name: Globalize.translate('ButtonAccept'),
+            id: 'accept',
+            ironIcon: 'add'
         });
 
-        $('.btnAccept', flyout).on('click', function () {
+        menuItems.push({
-            acceptInvitation(page, this.getAttribute('data-id'));
+            name: Globalize.translate('ButtonReject'),
-            $('.inviteMenu', page).popup("close").remove();
+            id: 'reject',
+            ironIcon: 'cancel'
+        });
+
+        require(['actionsheet'], function () {
+
+            ActionSheetElement.show({
+                items: menuItems,
+                positionTo: elem,
+                callback: function (id) {
+
+                    switch (id) {
+
+                        case 'accept':
+                            acceptInvitation(page, invitationId);
+                            break;
+                        case 'reject':
+                            rejectInvitation(page, invitationId);
+                            break;
+                        default:
+                            break;
+                    }
+                }
             });
 
-        $('.btnReject', flyout).on('click', function () {
-            rejectInvitation(page, this.getAttribute('data-id'));
-            $('.inviteMenu', page).popup("close").remove();
         });
     }
 
@@ -285,50 +257,21 @@
 
         var html = '';
 
-        var cssClass = "card squareCard alternateHover bottomPaddedCard";
+        html += '<paper-icon-item class="inviteItem" data-id="' + invite.Id + '">';
 
-        html += "<div data-id='" + invite.Id + "' class='" + cssClass + "'>";
+        html += '<paper-fab class="listAvatar blue lnkServer" icon="wifi" item-icon></paper-fab>';
 
-        html += '<div class="cardBox visualCardBox">';
+        html += '<paper-item-body two-line>';
-        html += '<div class="cardScalable">';
 
-        html += '<div class="cardPadder"></div>';
+        html += '<div>';
-
-        var href = "#";
-        html += '<a class="cardContent" href="' + href + '">';
-
-        html += '<div class="cardImage" style="text-align:center;">';
-        html += '<iron-icon icon="wifi" style="color:#fff;vertical-align:middle;margin-top:30%;height:64px;width:64px;"></iron-icon>';
-        html += "</div>";
-
-        // cardContent
-        html += "</a>";
-
-        // cardScalable
-        html += "</div>";
-
-        html += '<div class="cardFooter outerCardFooter">';
-
-        html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
-        html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnInviteMenu"></paper-icon-button>';
-        html += "</div>";
-
-        html += '<div class="cardText">';
         html += invite.Name;
-        html += "</div>";
+        html += '</div>';
 
-        html += '<div class="cardText">';
+        html += '</paper-item-body>';
-        html += '&nbsp;';
-        html += "</div>";
 
-        // cardFooter
+        html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnInviteMenu"></paper-icon-button>';
-        html += "</div>";
 
-        // cardBox
+        html += '</paper-icon-item>';
-        html += "</div>";
-
-        // card
-        html += "</div>";
 
         return html;
     }
@@ -371,8 +314,6 @@
 
         Dashboard.showLoadingMsg();
 
-        Backdrops.setDefault(page);
-
         ConnectionManager.getAvailableServers().done(function (servers) {
 
             servers = servers.slice(0);

dashboard-ui/selectserver.html

@@ -8,24 +8,25 @@
 
         <div data-role="content">
 
-            <div class="ehsContent" style="margin: 0 auto;">
+            <div class="readOnlyContent" style="margin: 0 auto;">
 
                 <div style="margin:1em 0 .5em;padding-left:5px;">
                     <h1 style="display:inline-block;vertical-align:middle;margin: 0;">${HeaderSelectServer}</h1>
                     <a href="https://github.com/MediaBrowser/Wiki/wiki/Emby%20Connect" target="_blank" class="clearLink" style="margin-top:0;display:inline-block;vertical-align:middle;margin-left:1em;"><paper-button raised class="secondary mini"><iron-icon icon="info"></iron-icon><span>${ButtonHelp}</span></paper-button></a>
                 </div>
 
-                <div class="serverList"></div>
+                <div class="serverList paperList"></div>
                 <br />
                 <div class="noServersMessage" style="display:none;padding-left:5px;">
                     ${MessageNoServersAvailableToConnect}
+                    <br/><br />
                 </div>
 
-                <div class="addServer" style="margin:1.5em 0;">
+                <div class="addServer" style="margin:0 0 1em;">
                     <a href="connectlogin.html?mode=manualserver" class="clearLink"><paper-button raised class="submit block"><iron-icon icon="add"></iron-icon><span>${ButtonAddServer}</span></paper-button></a>
                 </div>
 
-                <div class="connectLogin" style="margin:1.5em 0;display:none;">
+                <div class="connectLogin" style="margin:1em 0;display:none;">
                     <a href="connectlogin.html?mode=connect" class="clearLink"><paper-button raised class="accent block"><iron-icon icon="check"></iron-icon><span>${ButtonSignInWithConnect}</span></paper-button></a>
                 </div>
 
@@ -33,7 +34,7 @@
                     <br />
                     <h1 style="margin-bottom:.5em;padding-left:5px;">${HeaderInvitations}</h1>
 
-                    <div class="invitationList">
+                    <div class="invitationList paperList">
 
                     </div>
                 </div>

dashboard-ui/thirdparty/jquerymobile-1.4.5/jquery.mobile.custom.theme.css

@@ -225,12 +225,6 @@ html .ui-alt-icon .ui-radio-off:after {
 	background-color: #000;
 }
 
-/* Loader */
-.ui-icon-loading {
-	background: url("images/ajax-loader.gif");
-	background-size: 2.875em 2.875em;
-}
-
 /* Swatches */
 
 /* A