105 lines
2.7 KiB
JavaScript
105 lines
2.7 KiB
JavaScript
import React, {
|
|
Suspense,
|
|
useRef,
|
|
useEffect,
|
|
useState,
|
|
} from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { getConfig } from '@edx/frontend-platform';
|
|
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
|
import messages from './messages';
|
|
import BookmarkButton from '../bookmark/BookmarkButton';
|
|
import { useModel } from '../../../model-store';
|
|
import PageLoading from '../../../PageLoading';
|
|
|
|
const LockPaywall = React.lazy(() => import('./lock-paywall'));
|
|
|
|
function Unit({
|
|
courseId,
|
|
onLoaded,
|
|
id,
|
|
intl,
|
|
}) {
|
|
const iframeRef = useRef(null);
|
|
const iframeUrl = `${getConfig().LMS_BASE_URL}/xblock/${id}?show_title=0&show_bookmark_button=0`;
|
|
|
|
const [iframeHeight, setIframeHeight] = useState(0);
|
|
const [hasLoaded, setHasLoaded] = useState(false);
|
|
|
|
const unit = useModel('units', id);
|
|
const course = useModel('courses', courseId);
|
|
const {
|
|
contentTypeGatingEnabled,
|
|
enrollmentMode,
|
|
} = course;
|
|
|
|
useEffect(() => {
|
|
global.onmessage = (event) => {
|
|
const { type, payload } = event.data;
|
|
|
|
console.log('MFE App', 'onmessage', id, iframeUrl, event.source, type, payload, event);
|
|
if (type === 'plugin.resize') {
|
|
setIframeHeight(payload.height);
|
|
console.log('MFE App', 'plugin.resize', hasLoaded, iframeHeight, payload.height);
|
|
if (!hasLoaded && iframeHeight === 0 && payload.height > 0) {
|
|
console.log('MFE App', 'hasLoaded', true);
|
|
setHasLoaded(true);
|
|
if (onLoaded) {
|
|
console.log('MFE App', 'fire onLoaded handler');
|
|
onLoaded();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="unit">
|
|
<h2 className="mb-0 h4">{unit.title}</h2>
|
|
<BookmarkButton
|
|
unitId={unit.id}
|
|
isBookmarked={unit.bookmarked}
|
|
isProcessing={unit.bookmarkedUpdateState === 'loading'}
|
|
/>
|
|
{ contentTypeGatingEnabled && unit.graded && enrollmentMode === 'audit' && (
|
|
<Suspense
|
|
fallback={(
|
|
<PageLoading
|
|
srMessage={intl.formatMessage(messages['learn.loading.content.lock'])}
|
|
/>
|
|
)}
|
|
>
|
|
<LockPaywall
|
|
courseId={courseId}
|
|
/>
|
|
</Suspense>
|
|
)}
|
|
<div className="unit-iframe-wrapper">
|
|
<iframe
|
|
id="unit-iframe"
|
|
title={unit.title}
|
|
ref={iframeRef}
|
|
src={iframeUrl}
|
|
allowFullScreen
|
|
height={iframeHeight}
|
|
scrolling="no"
|
|
referrerPolicy="origin"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Unit.propTypes = {
|
|
courseId: PropTypes.string.isRequired,
|
|
id: PropTypes.string.isRequired,
|
|
intl: intlShape.isRequired,
|
|
onLoaded: PropTypes.func,
|
|
};
|
|
|
|
Unit.defaultProps = {
|
|
onLoaded: undefined,
|
|
};
|
|
|
|
export default injectIntl(Unit);
|