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 @@ + + + + + + +