lbry-desktop/ui/component/embedTextArea/view.jsx

69 lines
1.9 KiB
React
Raw Normal View History

2019-10-29 17:23:56 +01:00
// @flow
import * as ICONS from 'constants/icons';
import { FormField } from 'component/common/form';
import Button from 'component/button';
import React, { useRef } from 'react';
import { generateEmbedUrl } from 'util/web';
2019-10-29 17:23:56 +01:00
type Props = {
copyable: string,
snackMessage: ?string,
doToast: ({ message: string }) => void,
label?: string,
claim: Claim,
includeStartTime: boolean,
startTime: number,
2020-10-05 22:30:44 +02:00
referralCode: ?string,
2019-10-29 17:23:56 +01:00
};
export default function EmbedTextArea(props: Props) {
2020-10-05 22:30:44 +02:00
const { doToast, snackMessage, label, claim, includeStartTime, startTime, referralCode } = props;
2019-10-29 17:23:56 +01:00
const { claim_id: claimId, name } = claim;
const input = useRef();
2020-10-05 22:30:44 +02:00
const streamUrl = generateEmbedUrl(name, claimId, includeStartTime, startTime, referralCode);
let embedText = `<iframe id="lbry-iframe" width="560" height="315" src="${streamUrl}" allowfullscreen></iframe>`;
2019-11-04 13:50:51 +01:00
2019-10-29 17:23:56 +01:00
function copyToClipboard() {
const topRef = input.current;
if (topRef && topRef.input && topRef.input.current) {
topRef.input.current.select();
2019-11-04 13:50:51 +01:00
document.execCommand('copy');
doToast({ message: snackMessage || 'Embed link copied' });
2019-10-29 17:23:56 +01:00
}
}
function onFocus() {
// We have to go a layer deep since the input is inside the form component
2019-11-04 13:50:51 +01:00
const topRef = input && input.current;
2019-10-29 17:23:56 +01:00
if (topRef && topRef.input && topRef.input.current) {
topRef.input.current.select();
}
}
return (
2020-03-27 19:57:03 +01:00
<div className="section">
2019-10-29 17:23:56 +01:00
<FormField
type="textarea"
className="form-field--copyable"
label={label}
value={embedText || ''}
ref={input}
onFocus={onFocus}
readOnly
2019-10-29 17:23:56 +01:00
/>
2020-03-27 19:57:03 +01:00
<div className="section__actions">
<Button
icon={ICONS.COPY}
button="secondary"
label={__('Copy')}
onClick={() => {
copyToClipboard();
}}
/>
</div>
</div>
2019-10-29 17:23:56 +01:00
);
}