Merge pull request #5270 from grafixeyehero/Fix-card

src/components/cardbuilder/Card/CardFooterText.tsx

@@ -5,6 +5,7 @@ import layoutManager from 'components/layoutManager';
 import MoreVertIconButton from '../../common/MoreVertIconButton';
 import type { ItemDto } from 'types/base/models/item-dto';
 import type { CardOptions } from 'types/cardOptions';
+import Image from 'components/common/Image';
 
 const shouldShowDetailsMenu = (
     cardOptions: CardOptions,
@@ -23,9 +24,14 @@ interface LogoComponentProps {
     logoUrl: string;
 }
 
-const LogoComponent: FC<LogoComponentProps> = ({ logoUrl }) => {
-    return <Box className='lazy cardFooterLogo' data-src={logoUrl} />;
-};
+const LogoComponent: FC<LogoComponentProps> = ({ logoUrl }) => (
+    <Box className='cardFooterLogo'>
+        <Image
+            imgUrl={logoUrl}
+            containImage
+        />
+    </Box>
+);
 
 interface CardFooterTextProps {
     item: ItemDto;
@@ -51,7 +57,7 @@ const CardFooterText: FC<CardFooterTextProps> = ({
     isOuterFooter
 }) => {
     const { cardTextLines } = useCardText({
-        item,
+        item: item.ProgramInfo || item,
         cardOptions,
         forceName,
         imgUrl,

src/components/cardbuilder/Card/cardHelper.ts

@@ -6,7 +6,6 @@ import {
 } from '@jellyfin/sdk/lib/generated-client';
 import { Api } from '@jellyfin/sdk';
 import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
-import escapeHTML from 'escape-html';
 
 import { appRouter } from 'components/router/appRouter';
 import layoutManager from 'components/layoutManager';
@@ -78,15 +77,11 @@ export function getTextActionButton(
     text?: NullableString,
     serverId?: NullableString
 ): TextLine {
-    if (!text) {
-        text = itemHelper.getDisplayName(item);
-    }
-
-    text = escapeHTML(text);
+    const title = text || itemHelper.getDisplayName(item);
 
     if (layoutManager.tv) {
         return {
-            title: text
+            title
         };
     }
 
@@ -108,7 +103,7 @@ export function getTextActionButton(
     return {
         titleAction: {
             url,
-            title: text,
+            title,
             dataAttributes
         }
     };
@@ -510,7 +505,7 @@ function getChannelName(item: ItemDto) {
             item.ChannelName
         );
     } else {
-        return { title: item.ChannelName || '' || ' ' };
+        return { title: item.ChannelName || '\u00A0' };
     }
 }