edcf2fd756
Course thumbnails on IOS Safari stretch to the full height of the image, instead of being limited by width and preserving aspect ratio. This seems to be a IOS Safari specific behavior[1]. Learner dashboard MFE uses a custom implementation of CourseCardImage, because the one in Paragon currently doesn't allow the image to be clickable. Because of that, we are fixing this issue in this repo for now, instead of fixing it in Paragon, until Paragon updates their implementation and this repo is updated to use a newer version of Paragon. 1: https://stackoverflow.com/a/44250830
69 lines
2.2 KiB
JavaScript
69 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useIntl } from '@edx/frontend-platform/i18n';
|
|
|
|
import { Badge } from '@openedx/paragon';
|
|
|
|
import track from 'tracking';
|
|
import { reduxHooks } from 'hooks';
|
|
import verifiedRibbon from 'assets/verified-ribbon.png';
|
|
import useActionDisabledState from './hooks';
|
|
|
|
import messages from '../messages';
|
|
|
|
const { courseImageClicked } = track.course;
|
|
|
|
export const CourseCardImage = ({ cardId, orientation }) => {
|
|
const { formatMessage } = useIntl();
|
|
const { bannerImgSrc } = reduxHooks.useCardCourseData(cardId);
|
|
const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
|
|
const { isVerified } = reduxHooks.useCardEnrollmentData(cardId);
|
|
const { disableCourseTitle } = useActionDisabledState(cardId);
|
|
const handleImageClicked = reduxHooks.useTrackCourseEvent(courseImageClicked, cardId, homeUrl);
|
|
const wrapperClassName = `pgn__card-wrapper-image-cap d-inline-block overflow-visible ${orientation}`;
|
|
const image = (
|
|
<>
|
|
<img
|
|
// w-100 is necessary for images on Safari, otherwise stretches full height of the image
|
|
// https://stackoverflow.com/a/44250830
|
|
className="pgn__card-image-cap w-100 show"
|
|
src={bannerImgSrc}
|
|
alt={formatMessage(messages.bannerAlt)}
|
|
/>
|
|
{
|
|
isVerified && (
|
|
<span
|
|
className="course-card-verify-ribbon-container"
|
|
title={formatMessage(messages.verifiedHoverDescription)}
|
|
>
|
|
<Badge as="div" variant="success" className="w-100">
|
|
{formatMessage(messages.verifiedBanner)}
|
|
</Badge>
|
|
<img src={verifiedRibbon} alt={formatMessage(messages.verifiedBannerRibbonAlt)} />
|
|
</span>
|
|
)
|
|
}
|
|
</>
|
|
);
|
|
return disableCourseTitle
|
|
? (<div className={wrapperClassName}>{image}</div>)
|
|
: (
|
|
<a
|
|
className={wrapperClassName}
|
|
href={homeUrl}
|
|
onClick={handleImageClicked}
|
|
tabIndex="-1"
|
|
>
|
|
{image}
|
|
</a>
|
|
);
|
|
};
|
|
CourseCardImage.propTypes = {
|
|
cardId: PropTypes.string.isRequired,
|
|
orientation: PropTypes.string.isRequired,
|
|
};
|
|
|
|
CourseCardImage.defaultProps = {};
|
|
|
|
export default CourseCardImage;
|