diff --git a/src/components/Learningpath/LearningpathEmbed.tsx b/src/components/Learningpath/LearningpathEmbed.tsx index 707faf0924..ed2f74a903 100644 --- a/src/components/Learningpath/LearningpathEmbed.tsx +++ b/src/components/Learningpath/LearningpathEmbed.tsx @@ -43,6 +43,9 @@ interface StyledIframeContainerProps { } const StyledIframeContainer = styled.div` margin-bottom: ${spacing.normal}; + max-width: 720px; + margin-left: auto; + margin-right: auto; & > iframe { padding-top: 1em; border: 0 none; @@ -167,7 +170,7 @@ const LearningpathEmbed = ({ oembedWidth={oembed.width} oembedHeight={oembed.height} > - + ); } diff --git a/src/components/Learningpath/LearningpathIframe.tsx b/src/components/Learningpath/LearningpathIframe.tsx index d64f4966c1..46f5ec124e 100644 --- a/src/components/Learningpath/LearningpathIframe.tsx +++ b/src/components/Learningpath/LearningpathIframe.tsx @@ -6,7 +6,7 @@ * */ -import { MutableRefObject, useEffect, useRef, useState } from 'react'; +import { useEffect, useRef } from 'react'; import parse from 'html-react-parser'; export const urlIsNDLAApiUrl = (url: string) => @@ -20,86 +20,22 @@ export const urlIsNDLAUrl = (url: string) => interface Props { html: string; - url: string; } -const LearningpathIframe = ({ html, url }: Props) => { - const iframeRef = useRef() as MutableRefObject; - const [listeningToMessages, setListeningToMessages] = useState(true); - - const handleIframeResizing = (url: string) => { - if (urlIsNDLAUrl(url)) { - enableIframeMessageListener(); - } else { - disableIframeMessageListener(); - } - }; +const LearningpathIframe = ({ html }: Props) => { + const iframeWrapperRef = useRef(null); useEffect(() => { - handleIframeResizing(url); - }); - - const getIframeDOM = () => { - return iframeRef.current?.children[0] as HTMLIFrameElement; - }; - - const enableIframeMessageListener = () => { - window.addEventListener('message', handleIframeMessages); - setListeningToMessages(true); - }; - - const disableIframeMessageListener = () => { - window.removeEventListener('message', handleIframeMessages); - setListeningToMessages(false); - }; - - const handleScrollTo = (evt: MessageEvent) => { - const iframe = getIframeDOM(); - if (iframe) { - const rect = iframe.getBoundingClientRect(); - const scrollTop = - window.pageYOffset || document.documentElement.scrollTop; - - const top = evt.data.top + rect.top + scrollTop; - window.scroll({ top }); - } - }; - - const handleResize = (evt: MessageEvent) => { - if (!evt.data.height) { - return; - } - const iframe = getIframeDOM(); - if (iframe) { - const newHeight = parseInt(evt.data.height, 10); - iframe.style.height = `${newHeight}px`; // eslint-disable-line no-param-reassign - } - }; - - const handleIframeMessages = (event: MessageEvent) => { - const iframe = getIframeDOM(); - /* Needed to enforce content to stay within iframe on Safari iOS */ + const iframe = iframeWrapperRef.current?.querySelector('iframe'); if (iframe) { - iframe.setAttribute('scrolling', 'no'); - } - - if (!listeningToMessages || !event || !event.data) { - return; - } - - switch (event.data.event) { - case 'resize': - handleResize(event); - break; - case 'scrollTo': - handleScrollTo(event); - break; - default: - break; + const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)]; + iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`; + iframe.width = ''; + iframe.height = ''; } - }; + }, []); - return
{parse(html)}
; + return
{parse(html)}
; }; export default LearningpathIframe;