jiti-meet/react/features/invite/components/add-people-dialog/web/LiveStreamSection.js

111 lines
2.6 KiB
JavaScript

// @flow
import React, { useState } from 'react';
import { translate } from '../../../../base/i18n';
import { Icon, IconCheck, IconCopy } from '../../../../base/icons';
import { copyText } from '../../../../base/util';
type Props = {
/**
* The current known URL for a live stream in progress.
*/
liveStreamViewURL: string,
/**
* Invoked to obtain translated strings.
*/
t: Function
}
/**
* Section of the {@code AddPeopleDialog} that renders the
* live streaming url, allowing a copy action.
*
* @returns {React$Element<any>}
*/
function LiveStreamSection({ liveStreamViewURL, t }: Props) {
const [ isClicked, setIsClicked ] = useState(false);
const [ isHovered, setIsHovered ] = useState(false);
/**
* Click handler for the element.
*
* @returns {void}
*/
function onClick() {
setIsHovered(false);
if (copyText(liveStreamViewURL)) {
setIsClicked(true);
setTimeout(() => {
setIsClicked(false);
}, 2500);
}
}
/**
* Hover handler for the element.
*
* @returns {void}
*/
function onHoverIn() {
if (!isClicked) {
setIsHovered(true);
}
}
/**
* Hover handler for the element.
*
* @returns {void}
*/
function onHoverOut() {
setIsHovered(false);
}
/**
* Renders the content of the link based on the state.
*
* @returns {React$Element<any>}
*/
function renderLinkContent() {
if (isClicked) {
return (
<>
<div className = 'invite-more-dialog stream-text selected'>
{t('addPeople.linkCopied')}
</div>
<Icon src = { IconCheck } />
</>
);
}
return (
<>
<div className = 'invite-more-dialog stream-text'>
{isHovered ? t('addPeople.copyStream') : liveStreamViewURL}
</div>
<Icon src = { IconCopy } />
</>
);
}
return (
<>
<span>{t('addPeople.shareStream')}</span>
<div
className = { `invite-more-dialog stream${isClicked ? ' clicked' : ''}` }
onClick = { onClick }
onMouseOut = { onHoverOut }
onMouseOver = { onHoverIn }>
{ renderLinkContent() }
</div>
<div className = 'invite-more-dialog separator' />
</>
);
}
export default translate(LiveStreamSection);