From ad8fe23ef80363c73d0fdf8d5b286fff61d27ef3 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <56478732+dmitrylyzo@users.noreply.github.com>
Date: Mon, 11 Nov 2019 12:28:27 +0300
Subject: [PATCH] Make login card scalable on focus (#535)

* Make login card scalable on focus
* Remove focus related classes
---
 src/components/cardbuilder/card.css           | 11 +++---
 src/components/cardbuilder/cardBuilder.js     | 38 +++++--------------
 .../cardbuilder/chaptercardbuilder.js         | 27 ++++++-------
 .../imagedownloader/imagedownloader.js        | 16 +++++---
 src/components/imageeditor/imageeditor.js     | 14 ++++---
 .../itemidentifier/itemidentifier.js          | 16 +++++---
 src/components/themes/appletv/theme.css       |  5 ++-
 src/components/themes/blueradiance/theme.css  |  5 ++-
 src/components/themes/dark/theme.css          |  5 ++-
 src/components/themes/emby/theme.css          |  5 ++-
 src/components/themes/light/theme.css         |  5 ++-
 src/components/themes/purple-haze/theme.css   |  5 ++-
 src/components/themes/wmc/theme.css           |  5 ++-
 src/components/tunerpicker.js                 | 14 +++++--
 src/controllers/livetvstatus.js               | 14 +++++--
 src/controllers/loginpage.js                  | 22 ++++++++++-
 src/controllers/selectserver.js               | 20 +++++++---
 17 files changed, 131 insertions(+), 96 deletions(-)

diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index 942e05c77a..874b6d0416 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -26,7 +26,7 @@ button {
     font-weight: inherit !important;
 }
 
-.card-nofocustransform {
+.card:not(.show-animation) {
     contain: layout style paint;
 }
 
@@ -98,20 +98,21 @@ button {
     contain: layout style;
 }
 
-.cardBox-withfocuscontent-large {
+.card.show-focus:not(.show-animation) .cardBox {
     margin: .4em;
 }
 
-.card-focuscontent-large {
+.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
+.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
     border: .5em solid transparent;
 }
 
-.cardBox-focustransform {
+.card.show-animation .cardBox {
     will-change: transform;
     transition: transform 200ms ease-out;
 }
 
-.card:focus > .cardBox-focustransform {
+.card.show-animation:focus > .cardBox {
     transform: scale(1.18, 1.18);
 }
 
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index d91802dc71..09ad8f1a6d 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -3,7 +3,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
         'use strict';
 
         var devicePixelRatio = window.devicePixelRatio || 1;
-        var enableFocusTransfrom = !browser.slow && !browser.edge;
+        var enableFocusTransform = !browser.slow && !browser.edge;
 
         function getCardsHtml(items, options) {
             if (arguments.length === 1) {
@@ -1203,6 +1203,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 shape = shape || 'mixedSquare';
             }
 
+            // TODO move card creation code to Card component
+
             var className = 'card';
 
             if (shape) {
@@ -1221,8 +1223,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 className += ' card-hoverable';
             }
 
-            if (!enableFocusTransfrom || !layoutManager.tv) {
-                className += ' card-nofocustransform';
+            if (layoutManager.tv) {
+                className += ' show-focus';
+
+                if (enableFocusTransform) {
+                    className += ' show-animation';
+                }
             }
 
             var imgInfo = getCardImageUrl(item, apiClient, options, shape);
@@ -1250,23 +1256,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
 
-            if (layoutManager.tv) {
-
-                if (enableFocusTransfrom) {
-                    cardBoxClass += ' cardBox-focustransform cardBox-withfocuscontent';
-                } else {
-                    cardBoxClass += ' cardBox-withfocuscontent-large';
-                }
-
-                if (options.cardLayout) {
-                    cardBoxClass += ' card-focuscontent';
-
-                    if (!enableFocusTransfrom) {
-                        cardBoxClass += ' card-focuscontent-large';
-                    }
-                }
-            }
-
             var footerCssClass;
             var progressHtml = indicators.getProgressBarHtml(item);
 
@@ -1385,15 +1374,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             var cardScalableClass = 'cardScalable';
 
-            if (layoutManager.tv && !options.cardLayout) {
-
-                cardScalableClass += ' card-focuscontent';
-
-                if (!enableFocusTransfrom) {
-                    cardScalableClass += ' card-focuscontent-large';
-                }
-            }
-
             cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
             cardBoxClose = '</div>';
             cardScalableClose = '</div>';
diff --git a/src/components/cardbuilder/chaptercardbuilder.js b/src/components/cardbuilder/chaptercardbuilder.js
index 900f4befc1..0f42e14584 100644
--- a/src/components/cardbuilder/chaptercardbuilder.js
+++ b/src/components/cardbuilder/chaptercardbuilder.js
@@ -1,12 +1,20 @@
 define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browser'], function (datetime, imageLoader, connectionManager, layoutManager, browser) {
     'use strict';
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     function buildChapterCardsHtml(item, chapters, options) {
 
+        // TODO move card creation code to Card component
+
         var className = 'card itemAction chapterCard';
 
-        if (layoutManager.tv && (browser.animate || browser.edge)) {
-            className += ' card-focusscale';
+        if (layoutManager.tv) {
+            className += ' show-focus';
+
+            if (enableFocusTransform) {
+                className += ' show-animation';
+            }
         }
 
         var mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
@@ -92,19 +100,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
         var cardBoxCssClass = 'cardBox';
         var cardScalableClass = 'cardScalable';
 
-        if (layoutManager.tv) {
-            var enableFocusTransfrom = !browser.slow && !browser.edge;
-
-            cardScalableClass += ' card-focuscontent';
-
-            if (enableFocusTransfrom) {
-                cardBoxCssClass += ' cardBox-focustransform cardBox-withfocuscontent';
-            } else {
-                cardBoxCssClass += ' cardBox-withfocuscontent-large';
-                cardScalableClass += ' card-focuscontent-large';
-            }
-        }
-
         var html = '<button type="button" class="' + className + '"' + dataAttributes + '><div class="' + cardBoxCssClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainer + '</div><div class="innerCardFooter">' + nameHtml + '</div></div></div></button>';
 
         return html;
@@ -137,4 +132,4 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
         buildChapterCards: buildChapterCards
     };
 
-});
\ No newline at end of file
+});
diff --git a/src/components/imagedownloader/imagedownloader.js b/src/components/imagedownloader/imagedownloader.js
index 729bce3382..182b72071f 100644
--- a/src/components/imagedownloader/imagedownloader.js
+++ b/src/components/imagedownloader/imagedownloader.js
@@ -1,6 +1,8 @@
 define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader', 'browser', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'emby-checkbox', 'paper-icon-button-light', 'emby-button', 'formDialogStyle', 'cardStyle'], function (loading, appHost, dialogHelper, connectionManager, imageLoader, browser, layoutManager, scrollHelper, globalize, require) {
     'use strict';
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     var currentItemId;
     var currentItemType;
     var currentResolve;
@@ -164,6 +166,8 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         var tagName = layoutManager.tv ? 'button' : 'div';
         var enableFooterButtons = !layoutManager.tv;
 
+        // TODO move card creation code to Card component
+
         var html = '';
 
         var cssClass = "card scalableCard imageEditorCard";
@@ -196,12 +200,12 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         if (tagName === 'button') {
             cssClass += ' btnImageCard';
 
-            if (layoutManager.tv && !browser.slow) {
-                cardBoxCssClass += ' cardBox-focustransform';
-            }
-
             if (layoutManager.tv) {
-                cardBoxCssClass += ' card-focuscontent cardBox-withfocuscontent';
+                cssClass += ' show-focus';
+
+                if (enableFocusTransform) {
+                    cssClass += ' show-animation';
+                }
             }
 
             html += '<button type="button" class="' + cssClass + '"';
@@ -413,4 +417,4 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
             });
         }
     };
-});
\ No newline at end of file
+});
diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js
index 15c58ad8d9..2c649bdd16 100644
--- a/src/components/imageeditor/imageeditor.js
+++ b/src/components/imageeditor/imageeditor.js
@@ -1,6 +1,8 @@
 define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', 'focusManager', 'globalize', 'scrollHelper', 'imageLoader', 'require', 'browser', 'apphost', 'cardStyle', 'formDialogStyle', 'emby-button', 'paper-icon-button-light', 'css!./imageeditor'], function (dialogHelper, connectionManager, loading, dom, layoutManager, focusManager, globalize, scrollHelper, imageLoader, require, browser, appHost) {
     'use strict';
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     var currentItem;
     var hasChanges = false;
 
@@ -95,6 +97,8 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
 
     function getCardHtml(image, index, numImages, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) {
 
+        // TODO move card creation code to Card component
+
         var html = '';
 
         var cssClass = "card scalableCard imageEditorCard";
@@ -105,12 +109,12 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
         if (tagName === 'button') {
             cssClass += ' btnImageCard';
 
-            if (layoutManager.tv && !browser.slow) {
-                cardBoxCssClass += ' cardBox-focustransform';
-            }
-
             if (layoutManager.tv) {
-                cardBoxCssClass += ' card-focuscontent cardBox-withfocuscontent';
+                cssClass += ' show-focus';
+
+                if (enableFocusTransform) {
+                    cssClass += ' show-animation';
+                }
             }
 
             html += '<button type="button" class="' + cssClass + '"';
diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js
index 86694ef4b0..fa01a4aced 100644
--- a/src/components/itemidentifier/itemidentifier.js
+++ b/src/components/itemidentifier/itemidentifier.js
@@ -1,6 +1,8 @@
 define(["dialogHelper", "loading", "connectionManager", "require", "globalize", "scrollHelper", "layoutManager", "focusManager", "browser", "emby-input", "emby-checkbox", "paper-icon-button-light", "css!./../formdialog", "material-icons", "cardStyle"], function (dialogHelper, loading, connectionManager, require, globalize, scrollHelper, layoutManager, focusManager, browser) {
     "use strict";
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     var currentItem;
     var currentItemType;
     var currentServerId;
@@ -172,6 +174,8 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
     function getSearchResultHtml(result, index) {
 
+        // TODO move card creation code to Card component
+
         var html = "";
         var cssClass = "card scalableCard";
         var cardBoxCssClass = "cardBox";
@@ -190,16 +194,16 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
             padderClass = "cardPadder-portrait";
         }
 
-        if (layoutManager.tv && !browser.slow) {
-            cardBoxCssClass += " cardBox-focustransform";
+        if (layoutManager.tv) {
+            cssClass += " show-focus";
+
+            if (enableFocusTransform) {
+                cssClass += " show-animation";
+            }
         }
 
         cardBoxCssClass += " cardBox-bottompadded";
 
-        if (layoutManager.tv) {
-            cardBoxCssClass += " card-focuscontent cardBox-withfocuscontent";
-        }
-
         html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
         html += '<div class="' + cardBoxCssClass + '">';
         html += '<div class="cardScalable">';
diff --git a/src/components/themes/appletv/theme.css b/src/components/themes/appletv/theme.css
index 35b388d1c2..128594bc72 100644
--- a/src/components/themes/appletv/theme.css
+++ b/src/components/themes/appletv/theme.css
@@ -455,8 +455,9 @@ html {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #00a4dc
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #00a4dc !important
 }
 
 .metadataSidebarIcon {
diff --git a/src/components/themes/blueradiance/theme.css b/src/components/themes/blueradiance/theme.css
index 4740fc5ee7..3af56f79b7 100644
--- a/src/components/themes/blueradiance/theme.css
+++ b/src/components/themes/blueradiance/theme.css
@@ -440,8 +440,9 @@ html {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #00a4dc
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #00a4dc !important
 }
 
 .layout-desktop ::-webkit-scrollbar {
diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css
index 161c8d6df3..b4d4bcda4b 100644
--- a/src/components/themes/dark/theme.css
+++ b/src/components/themes/dark/theme.css
@@ -417,8 +417,9 @@ html {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #00a4dc
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #00a4dc !important
 }
 
 .layout-desktop ::-webkit-scrollbar {
diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css
index d018ec715a..7206150235 100644
--- a/src/components/themes/emby/theme.css
+++ b/src/components/themes/emby/theme.css
@@ -417,8 +417,9 @@ html {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #52b54b
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #52b54b !important
 }
 
 .layout-desktop ::-webkit-scrollbar {
diff --git a/src/components/themes/light/theme.css b/src/components/themes/light/theme.css
index f7cc4da9f3..dfac15ec7c 100644
--- a/src/components/themes/light/theme.css
+++ b/src/components/themes/light/theme.css
@@ -436,8 +436,9 @@ html {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #00a4dc
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #00a4dc !important
 }
 
 .metadataSidebarIcon {
diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css
index 684ac96f1f..1bba1e6145 100644
--- a/src/components/themes/purple-haze/theme.css
+++ b/src/components/themes/purple-haze/theme.css
@@ -533,8 +533,9 @@ a[data-role=button] {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #ff77f1
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #ff77f1 !important
 }
 
 .layout-desktop,
diff --git a/src/components/themes/wmc/theme.css b/src/components/themes/wmc/theme.css
index 239e920a3d..a19eeb93a2 100644
--- a/src/components/themes/wmc/theme.css
+++ b/src/components/themes/wmc/theme.css
@@ -439,8 +439,9 @@ html {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #fff
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #fff !important
 }
 
 .layout-desktop ::-webkit-scrollbar {
diff --git a/src/components/tunerpicker.js b/src/components/tunerpicker.js
index 77bddba530..96bfc71dff 100644
--- a/src/components/tunerpicker.js
+++ b/src/components/tunerpicker.js
@@ -1,6 +1,8 @@
-define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize", "loading", "material-icons", "formDialogStyle", "emby-button", "emby-itemscontainer", "cardStyle"], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading) {
+define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize", "loading", "browser", "material-icons", "formDialogStyle", "emby-button", "emby-itemscontainer", "cardStyle"], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading, browser) {
     "use strict";
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     function getEditorHtml() {
         var html = "";
         html += '<div class="formDialogContent scrollY">';
@@ -24,12 +26,16 @@ define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize"
         cssClass += " backdropCard backdropCard-scalable";
         padderClass = "cardPadder-backdrop";
 
+        // TODO move card creation code to Card component
+
         if (layoutManager.tv) {
-            cssClass += " card-focusscale";
-            cardBoxCssClass += " cardBox-focustransform";
+            cssClass += " show-focus";
+
+            if (enableFocusTransform) {
+                cssClass += " show-animation";
+            }
         }
 
-        cardBoxCssClass += " card-focuscontent";
         html += '<button type="button" class="' + cssClass + '" data-id="' + device.DeviceId + '" style="min-width:33.3333%;">';
         html += '<div class="' + cardBoxCssClass + '">';
         html += '<div class="cardScalable visualCardBox-cardScalable">';
diff --git a/src/controllers/livetvstatus.js b/src/controllers/livetvstatus.js
index 03cad1a907..c25487fd32 100644
--- a/src/controllers/livetvstatus.js
+++ b/src/controllers/livetvstatus.js
@@ -1,6 +1,8 @@
-define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layoutManager", "loading", "listViewStyle", "flexStyles", "emby-itemscontainer", "cardStyle", "material-icons", "emby-button"], function ($, globalize, taskButton, dom, libraryMenu, layoutManager, loading) {
+define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layoutManager", "loading", "browser", "listViewStyle", "flexStyles", "emby-itemscontainer", "cardStyle", "material-icons", "emby-button"], function ($, globalize, taskButton, dom, libraryMenu, layoutManager, loading, browser) {
     "use strict";
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     function getDeviceHtml(device) {
         var padderClass;
         var html = "";
@@ -9,12 +11,16 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
         cssClass += " backdropCard backdropCard-scalable";
         padderClass = "cardPadder-backdrop";
 
+        // TODO move card creation code to Card component
+
         if (layoutManager.tv) {
-            cssClass += " card-focusscale";
-            cardBoxCssClass += " cardBox-focustransform";
+            cssClass += " show-focus";
+
+            if (enableFocusTransform) {
+                cssClass += " show-animation";
+            }
         }
 
-        cardBoxCssClass += " card-focuscontent";
         html += '<div type="button" class="' + cssClass + '" data-id="' + device.Id + '">';
         html += '<div class="' + cardBoxCssClass + '">';
         html += '<div class="cardScalable visualCardBox-cardScalable">';
diff --git a/src/controllers/loginpage.js b/src/controllers/loginpage.js
index 8344dde9cd..ef54d20bf7 100644
--- a/src/controllers/loginpage.js
+++ b/src/controllers/loginpage.js
@@ -1,6 +1,8 @@
-define(["apphost", "appSettings", "dom", "connectionManager", "loading", "cardStyle", "emby-checkbox"], function(appHost, appSettings, dom, connectionManager, loading) {
+define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layoutManager", "browser", "cardStyle", "emby-checkbox"], function(appHost, appSettings, dom, connectionManager, loading, layoutManager, browser) {
     "use strict";
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     function authenticateUserByName(page, apiClient, username, password) {
         loading.show();
         apiClient.authenticateUserByName(username, password).then(function(result) {
@@ -60,7 +62,23 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "cardSt
         var html = "";
         for (var i = 0; i < users.length; i++) {
             var user = users[i];
-            html += '<button type="button" class="card squareCard scalableCard squareCard-scalable"><div class="cardBox cardBox-bottompadded">';
+
+            // TODO move card creation code to Card component
+
+            var cssClass = "card squareCard scalableCard squareCard-scalable";
+
+            if (layoutManager.tv) {
+                cssClass += " show-focus";
+
+                if (enableFocusTransform) {
+                    cssClass += " show-animation";
+                }
+            }
+
+            var cardBoxCssClass = "cardBox cardBox-bottompadded";
+
+            html += '<button type="button" class="' + cssClass + '">';
+            html += '<div class="' + cardBoxCssClass + '">';
             html += '<div class="cardScalable">';
             html += '<div class="cardPadder cardPadder-square"></div>';
             html += '<div class="cardContent" data-haspw="' + user.HasPassword + '" data-username="' + user.Name + '" data-userid="' + user.Id + '">';
diff --git a/src/controllers/selectserver.js b/src/controllers/selectserver.js
index 80ecb13f00..255f685572 100644
--- a/src/controllers/selectserver.js
+++ b/src/controllers/selectserver.js
@@ -1,6 +1,8 @@
-define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focusManager", "connectionManager", "globalize", "actionsheet", "dom", "material-icons", "flexStyles", "emby-scroller", "emby-itemscontainer", "cardStyle", "emby-button"], function (loading, appRouter, layoutManager, appSettings, appHost, focusManager, connectionManager, globalize, actionSheet, dom) {
+define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focusManager", "connectionManager", "globalize", "actionsheet", "dom", "browser", "material-icons", "flexStyles", "emby-scroller", "emby-itemscontainer", "cardStyle", "emby-button"], function (loading, appRouter, layoutManager, appSettings, appHost, focusManager, connectionManager, globalize, actionSheet, dom, browser) {
     "use strict";
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     function renderSelectServerItems(view, servers) {
         var items = servers.map(function (server) {
             return {
@@ -21,17 +23,25 @@ define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focu
                 cardImageContainer = '<div class="cardImage" style="' + item.cardImageStyle + '"></div>';
             }
 
-            var cardBoxCssClass = "cardBox";
+            // TODO move card creation code to Card component
+
+            var cssClass = "card overflowSquareCard loginSquareCard scalableCard overflowSquareCard-scalable";
 
             if (layoutManager.tv) {
-                cardBoxCssClass += " cardBox-focustransform";
+                cssClass += " show-focus";
+
+                if (enableFocusTransform) {
+                    cssClass += " show-animation";
+                }
             }
 
+            var cardBoxCssClass = "cardBox";
+
             var innerOpening = '<div class="' + cardBoxCssClass + '">';
             var cardContainer = '';
-            cardContainer += '<button raised class="card overflowSquareCard loginSquareCard scalableCard overflowSquareCard-scalable" style="display:inline-block;" data-id="' + item.id + '" data-url="' + (item.url || "") + '" data-cardtype="' + item.cardType + '">';
+            cardContainer += '<button raised class="' + cssClass + '" style="display:inline-block;" data-id="' + item.id + '" data-url="' + (item.url || "") + '" data-cardtype="' + item.cardType + '">';
             cardContainer += innerOpening;
-            cardContainer += '<div class="cardScalable card-focuscontent">';
+            cardContainer += '<div class="cardScalable">';
             cardContainer += '<div class="cardPadder cardPadder-square">';
             cardContainer += '</div>';
             cardContainer += '<div class="cardContent">';