93 lines
2.5 KiB
JavaScript
93 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { defineMessages } from 'react-intl';
|
|
import { safeMatch } from '/imports/utils/string-utils';
|
|
import { isUrlValid } from '/imports/ui/components/external-video-player/service';
|
|
import BBBMenu from '/imports/ui/components/common/menu/component';
|
|
import Styled from './styles';
|
|
|
|
const intlMessages = defineMessages({
|
|
externalVideo: {
|
|
id: 'app.smartMediaShare.externalVideo',
|
|
},
|
|
});
|
|
|
|
const createAction = (url, startWatching) => {
|
|
const hasHttps = url?.startsWith('https://');
|
|
const finalUrl = hasHttps ? url : `https://${url}`;
|
|
const label = hasHttps ? url?.replace('https://', '') : url;
|
|
|
|
if (isUrlValid(finalUrl)) {
|
|
return {
|
|
label,
|
|
onClick: () => startWatching(finalUrl),
|
|
};
|
|
}
|
|
};
|
|
|
|
export const SmartMediaShare = (props) => {
|
|
const {
|
|
currentSlide, intl, isMobile, isRTL, startWatching,
|
|
} = props;
|
|
const linkPatt = /(https?:\/\/.*?)(?=\s|$)/g;
|
|
const externalLinks = safeMatch(linkPatt, currentSlide?.content?.replace(/[\r\n]/g, ' '), false);
|
|
if (!externalLinks) return null;
|
|
|
|
const actions = [];
|
|
|
|
externalLinks?.forEach((l) => {
|
|
const action = createAction(l, startWatching);
|
|
if (action) actions.push(action);
|
|
});
|
|
|
|
if (actions?.length === 0) return null;
|
|
|
|
const customStyles = { top: '-1rem' };
|
|
|
|
return (
|
|
<BBBMenu
|
|
customStyles={!isMobile ? customStyles : null}
|
|
trigger={(
|
|
<Styled.QuickVideoButton
|
|
role="button"
|
|
label={intl.formatMessage(intlMessages.externalVideo)}
|
|
color="primary"
|
|
circle
|
|
icon="external-video"
|
|
size="md"
|
|
onClick={() => null}
|
|
hideLabel
|
|
/>
|
|
)}
|
|
actions={actions}
|
|
opts={{
|
|
id: 'external-video-dropdown-menu',
|
|
keepMounted: true,
|
|
transitionDuration: 0,
|
|
elevation: 3,
|
|
getcontentanchorel: null,
|
|
fullwidth: 'true',
|
|
anchorOrigin: { vertical: 'top', horizontal: isRTL ? 'right' : 'left' },
|
|
transformOrigin: { vertical: 'bottom', horizontal: isRTL ? 'right' : 'left' },
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default SmartMediaShare;
|
|
|
|
SmartMediaShare.propTypes = {
|
|
currentSlide: PropTypes.shape({
|
|
content: PropTypes.string.isRequired,
|
|
}),
|
|
intl: PropTypes.shape({
|
|
formatMessage: PropTypes.func.isRequired,
|
|
}).isRequired,
|
|
isMobile: PropTypes.bool.isRequired,
|
|
isRTL: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
SmartMediaShare.defaultProps = {
|
|
currentSlide: undefined,
|
|
};
|