@instructure/canvas-rce
Version:
A component wrapping Canvas's usage of Tinymce
87 lines • 3.12 kB
JavaScript
import _pt from "prop-types";
import React, { useRef, useEffect, useState, useCallback } from 'react';
import { createRoot } from 'react-dom/client';
import { Text } from '@instructure/ui-text';
import { View } from '@instructure/ui-view';
import { Flex } from '@instructure/ui-flex';
import { CondensedButton } from '@instructure/ui-buttons';
import { IconPlayLine } from '@instructure/ui-icons';
import formatMessage from '../format-message';
const YoutubeEmbedOverlay = ({
iframeElement,
height,
width
}) => {
const [showOverlay, setShowOverlay] = useState(true);
const containerRef = useRef(null);
useEffect(() => {
if (containerRef.current && iframeElement) {
if (width) {
containerRef.current.style.width = `${width}px`;
}
if (height) {
containerRef.current.style.height = `${height}px`;
}
containerRef.current.appendChild(iframeElement);
}
}, [height, iframeElement, width]);
const handleCloseOverlay = useCallback(() => {
setShowOverlay(false);
}, [setShowOverlay]);
return /*#__PURE__*/React.createElement(View, {
as: "div",
position: "relative",
display: "inline-block"
}, showOverlay && /*#__PURE__*/React.createElement(View, {
as: "div",
position: "absolute",
width: "100%",
height: "100%",
background: "primary",
themeOverride: {
backgroundPrimary: 'rgba(10, 71, 91, 0.65)'
},
overflowY: "hidden"
}, /*#__PURE__*/React.createElement(Flex, {
justifyItems: "center",
height: "100%"
}, /*#__PURE__*/React.createElement(Flex.Item, {
shouldShrink: true,
shouldGrow: true,
textAlign: "center"
}, /*#__PURE__*/React.createElement(Flex, {
justifyItems: "center",
margin: "0 0 small"
}, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Text, {
color: "secondary-inverse",
weight: "bold"
}, formatMessage('This video may display YouTube ads.')))), /*#__PURE__*/React.createElement(Flex, {
justifyItems: "center",
margin: "0 0 medium"
}, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CondensedButton, {
"data-test-id": "youtube-migration-close-overlay",
color: "primary-inverse",
onClick: handleCloseOverlay
}, /*#__PURE__*/React.createElement(IconPlayLine, null), "\xA0", formatMessage('Continue to YouTube content'))))))), /*#__PURE__*/React.createElement("div", {
ref: containerRef
}));
};
YoutubeEmbedOverlay.propTypes = {
height: _pt.number.isRequired,
width: _pt.number.isRequired
};
export const createOverlay = iframes => {
iframes.forEach(iframe => {
const iframeElement = iframe;
const height = iframeElement.offsetHeight;
const width = iframeElement.offsetWidth;
const container = document.createElement('div');
container.setAttribute('data-test-id', 'youtube-migration-container');
iframe.replaceWith(container);
createRoot(container).render(/*#__PURE__*/React.createElement(YoutubeEmbedOverlay, {
iframeElement: iframeElement,
height: height,
width: width
}));
});
};