jiti-meet/react/features/prejoin/components/preview/CopyMeetingUrl.js

199 lines
4.7 KiB
JavaScript

// @flow
import React, { Component } from 'react';
import { connect } from '../../../base/redux';
import { translate } from '../../../base/i18n';
import { getCurrentConferenceUrl } from '../../../base/connection';
import { Icon, IconCopy, IconCheck } from '../../../base/icons';
import logger from '../../logger';
type Props = {
/**
* The meeting url.
*/
url: string,
/**
* Used for translation.
*/
t: Function
};
type State = {
/**
* If true it shows the 'copy link' message.
*/
showCopyLink: boolean,
/**
* If true it shows the 'link copied' message.
*/
showLinkCopied: boolean,
};
const COPY_TIMEOUT = 2000;
/**
* Component used to copy meeting url on prejoin page.
*/
class CopyMeetingUrl extends Component<Props, State> {
textarea: Object;
/**
* Initializes a new {@code Prejoin} instance.
*
* @inheritdoc
*/
constructor(props) {
super(props);
this.textarea = React.createRef();
this.state = {
showCopyLink: false,
showLinkCopied: false
};
this._copyUrl = this._copyUrl.bind(this);
this._hideCopyLink = this._hideCopyLink.bind(this);
this._hideLinkCopied = this._hideLinkCopied.bind(this);
this._showCopyLink = this._showCopyLink.bind(this);
this._showLinkCopied = this._showLinkCopied.bind(this);
}
_copyUrl: () => void;
/**
* Callback invoked to copy the url to clipboard.
*
* @returns {void}
*/
_copyUrl() {
const textarea = this.textarea.current;
try {
textarea.select();
document.execCommand('copy');
textarea.blur();
this._showLinkCopied();
window.setTimeout(this._hideLinkCopied, COPY_TIMEOUT);
} catch (err) {
logger.error('error when copying the meeting url');
}
}
_hideLinkCopied: () => void;
/**
* Hides the 'Link copied' message.
*
* @private
* @returns {void}
*/
_hideLinkCopied() {
this.setState({
showLinkCopied: false
});
}
_hideCopyLink: () => void;
/**
* Hides the 'Copy link' text.
*
* @private
* @returns {void}
*/
_hideCopyLink() {
this.setState({
showCopyLink: false
});
}
_showCopyLink: () => void;
/**
* Shows the dark 'Copy link' text on hover.
*
* @private
* @returns {void}
*/
_showCopyLink() {
this.setState({
showCopyLink: true
});
}
_showLinkCopied: () => void;
/**
* Shows the green 'Link copied' message.
*
* @private
* @returns {void}
*/
_showLinkCopied() {
this.setState({
showLinkCopied: true,
showCopyLink: false
});
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { showCopyLink, showLinkCopied } = this.state;
const { url, t } = this.props;
const { _copyUrl, _showCopyLink, _hideCopyLink } = this;
const src = showLinkCopied ? IconCheck : IconCopy;
const iconCls = showCopyLink || showCopyLink ? 'prejoin-copy-icon--white' : 'prejoin-copy-icon--light';
return (
<div
className = 'prejoin-copy-meeting'
onMouseEnter = { _showCopyLink }
onMouseLeave = { _hideCopyLink }>
<div className = 'prejoin-copy-url'>{url}</div>
{showCopyLink && <div
className = 'prejoin-copy-badge prejoin-copy-badge--hover'
onClick = { _copyUrl }>
{t('prejoin.copyAndShare')}
</div>}
{showLinkCopied && <div
className = 'prejoin-copy-badge prejoin-copy-badge--done'>
{t('prejoin.linkCopied')}
</div>}
<Icon
className = { `prejoin-copy-icon ${iconCls}` }
onClick = { _copyUrl }
size = { 24 }
src = { src } />
<textarea
className = 'prejoin-copy-textarea'
readOnly = { true }
ref = { this.textarea }
tabIndex = '-1'
value = { url } />
</div>);
}
}
/**
* Maps (parts of) the redux state to the React {@code Component} props.
*
* @param {Object} state - The redux state.
* @returns {Object}
*/
function mapStateToProps(state) {
return {
url: getCurrentConferenceUrl(state)
};
}
export default connect(mapStateToProps)(translate(CopyMeetingUrl));