From 1efffb35c98cea4cf63b69fcad872df33811aa15 Mon Sep 17 00:00:00 2001 From: ANKESH Date: Sat, 21 Mar 2026 11:40:51 +0530 Subject: [PATCH] fix: Broken cover images #1699 --- src/common/playlists/PlayCard.jsx | 23 +++++++++++-------- .../playlists/PlayThumbnailFallBack.jsx | 12 ++++++++++ src/common/utils/coverImageUtil.js | 3 +-- src/images/img-logo-light-sm.svg | 7 ++++++ 4 files changed, 33 insertions(+), 12 deletions(-) create mode 100644 src/common/playlists/PlayThumbnailFallBack.jsx create mode 100644 src/images/img-logo-light-sm.svg diff --git a/src/common/playlists/PlayCard.jsx b/src/common/playlists/PlayCard.jsx index 31cfc20928..6bc16cc86d 100644 --- a/src/common/playlists/PlayCard.jsx +++ b/src/common/playlists/PlayCard.jsx @@ -5,6 +5,7 @@ import { BiLogoTypescript, BiLogoJavascript } from 'react-icons/bi'; import PlayShare from './PlayShare.jsx'; import Like from 'common/components/Like/Like'; import userImage from 'images/user.png'; +import PlayThumbnailFallBack from './PlayThumbnailFallBack'; const formatDate = (dateString) => dateString || ''; @@ -41,17 +42,19 @@ function PlayCard({ play, cover, likeObject }) { return (
- {cover && ( -
+
+ {cover ? ( {play.name} -
- -
- )} + ) : ( + + )} +
+ +
diff --git a/src/common/playlists/PlayThumbnailFallBack.jsx b/src/common/playlists/PlayThumbnailFallBack.jsx new file mode 100644 index 0000000000..5a3a568ab4 --- /dev/null +++ b/src/common/playlists/PlayThumbnailFallBack.jsx @@ -0,0 +1,12 @@ +import ImgLogo from 'images/img-logo-light-sm.svg'; + +const PlayThumbnailFallBack = ({ playName }) => { + return ( +
+ {playName} + {playName} +
+ ); +}; + +export default PlayThumbnailFallBack; diff --git a/src/common/utils/coverImageUtil.js b/src/common/utils/coverImageUtil.js index b702b00ae7..8552bd96ec 100644 --- a/src/common/utils/coverImageUtil.js +++ b/src/common/utils/coverImageUtil.js @@ -1,4 +1,3 @@ -import FallbackImage from 'images/play-fallback-cover.png'; import { IMAGE_EXTENSIONS, FULFILLED_STATUS } from './utilsConstants'; /** @@ -30,5 +29,5 @@ export const loadCoverImage = async (playSlug) => { (result) => result.status === FULFILLED_STATUS && result.value?.default ); - return image?.value.default || FallbackImage; + return image?.value.default || null; }; diff --git a/src/images/img-logo-light-sm.svg b/src/images/img-logo-light-sm.svg new file mode 100644 index 0000000000..5be073e4e9 --- /dev/null +++ b/src/images/img-logo-light-sm.svg @@ -0,0 +1,7 @@ + + + + + + +