Merge pull request #2343 from jellyfin/plugin-icon

fix image alignment on plugin cards

src/components/cardbuilder/card.css

@@ -174,6 +174,7 @@ button::-moz-focus-inner {
 
 .cardScalable .cardImageContainer {
     height: 100%;
+    width: 100%;
     contain: strict;
 }
 
@@ -225,8 +226,8 @@ button::-moz-focus-inner {
 }
 
 .visualCardBox .cardContent {
-    border-bottom-left-radius: 0;
+    border-top-left-radius: 0.2em;
-    border-bottom-right-radius: 0;
+    border-top-right-radius: 0.2em;
 }
 
 .cardContent-shadow,
@@ -368,11 +369,6 @@ button::-moz-focus-inner {
     color: inherit;
 }
 
-.cardImageIcon-small {
-    font-size: 3em !important;
-    margin-bottom: 0.1em;
-}
-
 .cardIndicators {
     right: 0.225em;
     top: 0.225em;

src/controllers/dashboard/devices/devices.js

@@ -96,7 +96,7 @@ import confirm from '../../../components/confirm/confirm';
             deviceHtml += '<div class="cardBox visualCardBox">';
             deviceHtml += '<div class="cardScalable">';
             deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
-            deviceHtml += '<a is="emby-linkbutton" href="' + (canEdit ? '#!/device.html?id=' + device.Id : '#') + '" class="cardContent cardImageContainer">';
+            deviceHtml += `<a is="emby-linkbutton" href="${canEdit ? '#!/device.html?id=' + device.Id : '#'}" class="cardContent cardImageContainer">`;
             const iconUrl = imageHelper.getDeviceIcon(device);
 
             if (iconUrl) {

src/controllers/dashboard/library.js

@@ -9,6 +9,7 @@ import '../../components/cardbuilder/card.css';
 import '../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator';
 import Dashboard, { pageClassOn, pageIdOn } from '../../scripts/clientUtils';
 import confirm from '../../components/confirm/confirm';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
 
 /* eslint-disable indent */
 
@@ -276,11 +277,12 @@ import confirm from '../../components/confirm/confirm';
         let hasCardImageContainer;
 
         if (imgUrl) {
-            html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;background-image:url(\'' + imgUrl + "');\">";
+            html += `<div class="cardImageContainer editLibrary ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer">`;
+            html += `<img src="${imgUrl}" style="width:100%" />`;
             hasCardImageContainer = true;
         } else if (!virtualFolder.showNameWithIcon) {
-            html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;">';
+            html += `<div class="cardImageContainer editLibrary ${cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer;">`;
-            html += '<span class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
+            html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
             hasCardImageContainer = true;
         }
 
@@ -293,7 +295,7 @@ import confirm from '../../components/confirm/confirm';
 
         if (!imgUrl && virtualFolder.showNameWithIcon) {
             html += '<h3 class="cardImageContainer addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;flex-direction:column;">';
-            html += '<span class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
+            html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
 
             if (virtualFolder.showNameWithIcon) {
                 html += '<div style="margin:1em 0;position:width:100%;">';

src/controllers/dashboard/plugins/available/index.js

@@ -1,6 +1,7 @@
 import loading from '../../../../components/loading/loading';
 import libraryMenu from '../../../../scripts/libraryMenu';
 import globalize from '../../../../scripts/globalize';
+import * as cardBuilder from '../../../../components/cardbuilder/cardBuilder.js';
 import '../../../../components/cardbuilder/card.css';
 import '../../../../elements/emby-button/emby-button';
 import '../../../../elements/emby-checkbox/emby-checkbox';
@@ -102,10 +103,20 @@ function getPluginHtml(plugin, options, installedPlugins) {
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable visualCardBox-cardScalable">';
     html += '<div class="cardPadder cardPadder-backdrop"></div>';
-    html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + '>';
+    html += '<div class="cardContent">';
-    html += '<span class="cardImageIcon material-icons folder"></span>';
+    html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${href}" ${target}>`;
+
+    if (plugin.imageUrl) {
+        html += `<img src="${plugin.imageUrl}" style="width:100%" />`;
+    } else {
+        html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
+        html += '<span class="cardImageIcon material-icons extension"></span>';
+        html += '</div>';
+    }
+
     html += '</a>';
     html += '</div>';
+    html += '</div>';
     html += '<div class="cardFooter">';
     html += "<div class='cardText'>";
     html += plugin.name;

src/controllers/dashboard/plugins/installed/index.js

@@ -2,6 +2,7 @@ import loading from '../../../../components/loading/loading';
 import libraryMenu from '../../../../scripts/libraryMenu';
 import dom from '../../../../scripts/dom';
 import globalize from '../../../../scripts/globalize';
+import * as cardBuilder from '../../../../components/cardbuilder/cardBuilder.js';
 import '../../../../components/cardbuilder/card.css';
 import '../../../../elements/emby-button/emby-button';
 import Dashboard, { pageIdOn } from '../../../../scripts/clientUtils';
@@ -53,22 +54,31 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
     const configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
         return pluginConfigurationPage.PluginId == plugin.Id;
     })[0];
+
     const configPageUrl = configPage ? Dashboard.getPluginUrl(configPage.Name) : null;
     let html = '';
+
     html += `<div data-id='${plugin.Id}' data-version='${plugin.Version}' data-name='${plugin.Name}' data-removable='${plugin.CanUninstall}' data-status='${plugin.Status}' class='card backdropCard'>`;
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable">';
     html += '<div class="cardPadder cardPadder-backdrop"></div>';
-    html += configPageUrl ? `<a class="cardContent cardImageContainer" is="emby-linkbutton" href="${configPageUrl}">` : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer emby-button">';
+    html += '<div class="cardContent">';
-    html += '<span class="cardImageIcon';
+    if (configPageUrl) {
-    if (plugin.HasImage) {
+        html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${configPageUrl}">`;
-        html += `"><img src="/Plugins/${plugin.Id}/${plugin.Version}/Image" style="width:100%;height:auto"/>`;
     } else {
-        html += ' material-icons folder">';
+        html += '<div class="cardImageContainer noConfigPluginCard noHoverEffect emby-button">';
+    }
+
+    if (plugin.HasImage) {
+        html += `<img src="/Plugins/${plugin.Id}/${plugin.Version}/Image" style="width:100%" />`;
+    } else {
+        html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
+        html += '<span class="cardImageIcon material-icons extension"></span>';
+        html += '</div>';
     }
-    html += '</span> ';
     html += configPageUrl ? '</a>' : '</div>';
     html += '</div>';
+    html += '</div>';
     html += '<div class="cardFooter">';
 
     if (configPage || plugin.CanUninstall) {
@@ -133,7 +143,7 @@ function showPluginMenu(page, elem) {
     const id = card.getAttribute('data-id');
     const name = card.getAttribute('data-name');
     const removable = card.getAttribute('data-removable');
-    const configHref = card.querySelector('.cardContent').getAttribute('href');
+    const configHref = card.querySelector('.cardImageContainer').getAttribute('href');
     const status = card.getAttribute('data-status');
     const version = card.getAttribute('data-version');
     const menuItems = [];

src/controllers/dashboard/users/userprofilespage.js

@@ -10,6 +10,7 @@ import '../../../components/indicators/indicators.css';
 import '../../../assets/css/flexstyles.scss';
 import Dashboard, { pageIdOn } from '../../../scripts/clientUtils';
 import confirm from '../../../components/confirm/confirm';
+import cardBuilder from '../../../components/cardbuilder/cardBuilder';
 
 /* eslint-disable indent */
 
@@ -93,7 +94,7 @@ import confirm from '../../../components/confirm/confirm';
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable visualCardBox-cardScalable">';
         html += '<div class="cardPadder cardPadder-square"></div>';
-        html += '<a is="emby-linkbutton" class="cardContent" href="#!/useredit.html?userId=' + user.Id + '">';
+        html += `<a is="emby-linkbutton" class="cardContent ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}" href="#!/useredit.html?userId=${user.Id}">`;
         let imgUrl;
 
         if (user.PrimaryImageTag) {
@@ -113,7 +114,7 @@ import confirm from '../../../components/confirm/confirm';
         if (imgUrl) {
             html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + "');\">";
         } else {
-            html += '<div class="' + imageClass + ' flex align-items-center justify-content-center">';
+            html += `<div class="${imageClass} ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()} flex align-items-center justify-content-center">`;
             html += '<span class="material-icons cardImageIcon person"></span>';
         }
 

src/controllers/session/login/index.js

@@ -13,6 +13,7 @@ import ServerConnections from '../../../components/ServerConnections';
 import toast from '../../../components/toast/toast';
 import dialogHelper from '../../../components/dialogHelper/dialogHelper';
 import baseAlert from '../../../components/alert';
+import cardBuilder from '../../../components/cardbuilder/cardBuilder';
 
 /* eslint-disable indent */
 
@@ -131,29 +132,6 @@ import baseAlert from '../../../components/alert';
         }
     }
 
-    const metroColors = ['#6FBD45', '#4BB3DD', '#4164A5', '#E12026', '#800080', '#E1B222', '#008040', '#0094FF', '#FF00C7', '#FF870F', '#7F0037'];
-
-    function getRandomMetroColor() {
-        const index = Math.floor(Math.random() * (metroColors.length - 1));
-        return metroColors[index];
-    }
-
-    function getMetroColor(str) {
-        if (str) {
-            const character = String(str.substr(0, 1).charCodeAt());
-            let sum = 0;
-
-            for (let i = 0; i < character.length; i++) {
-                sum += parseInt(character.charAt(i));
-            }
-
-            const index = String(sum).substr(-1);
-            return metroColors[index];
-        }
-
-        return getRandomMetroColor();
-    }
-
     function loadUserList(context, apiClient, users) {
         let html = '';
 
@@ -176,7 +154,7 @@ import baseAlert from '../../../components/alert';
             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 + '">';
+            html += `<div class="cardContent" style="border-radius:0.2em" data-haspw="${user.HasPassword}" data-username="${user.Name}" data-userid="${user.Id}">`;
             let imgUrl;
 
             if (user.PrimaryImageTag) {
@@ -185,11 +163,12 @@ import baseAlert from '../../../components/alert';
                     tag: user.PrimaryImageTag,
                     type: 'Primary'
                 });
+
                 html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + imgUrl + "');\"></div>";
             } else {
-                const background = getMetroColor(user.Id);
+                html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
-                imgUrl = 'assets/img/avatar.png';
+                html += '<span class="material-icons cardImageIcon person"></span>';
-                html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + imgUrl + "');background-color:" + background + ';"></div>';
+                html += '</div>';
             }
 
             html += '</div>';

src/controllers/session/selectServer/index.js

@@ -17,6 +17,7 @@ import '../../../elements/emby-button/emby-button';
 import Dashboard from '../../../scripts/clientUtils';
 import ServerConnections from '../../../components/ServerConnections';
 import alert from '../../../components/alert';
+import cardBuilder from '../../../components/cardbuilder/cardBuilder';
 
 /* eslint-disable indent */
 
@@ -64,7 +65,7 @@ import alert from '../../../components/alert';
             cardContainer += '<div class="cardPadder cardPadder-square">';
             cardContainer += '</div>';
             cardContainer += '<div class="cardContent">';
-            cardContainer += '<div class="cardImageContainer coveredImage" style="background:#0288D1;border-radius:.15em;">';
+            cardContainer += `<div class="cardImageContainer coveredImage ${cardBuilder.getDefaultBackgroundClass()}" style="border-radius:0.2em">`;
             cardContainer += cardImageContainer;
             cardContainer += '</div>';
             cardContainer += '</div>';

src/strings/en-us.json

@@ -179,6 +179,8 @@
     "DirectStreamHelp1": "The video stream is compatible with the device, but has an incompatible audio format (DTS, TRUEHD, etc) or number of audio channels. The video stream will be repackaged losslessly on the fly before being sent to the device. Only the audio stream will be transcoded.",
     "DirectStreamHelp2": "Power consumed by direct streaming usually depends on the audio profile. Only the video stream is lossless.",
     "DirectStreaming": "Direct streaming",
+    "EnablePlugin": "Enable Plugin",
+    "DisablePlugin": "Disable Plugin",
     "Disc": "Disc",
     "Disconnect": "Disconnect",
     "Display": "Display",