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

65 lines
1.7 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 { generateStreamUrl } from 'util/lbrytv';
import { LBRY_TV_API } from 'config';
type Props = {
copyable: string,
snackMessage: ?string,
doToast: ({ message: string }) => void,
label?: string,
claim: Claim,
};
export default function EmbedArea(props: Props) {
const { doToast, snackMessage, label, claim } = props;
const { claim_id: claimId, name } = claim;
const input = useRef();
const streamUrl = generateStreamUrl(name, claimId, LBRY_TV_API);
let embedText = `<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;
2019-11-04 13:50:51 +01:00
console.log(topRef);
2019-10-29 17:23:56 +01:00
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 (
<fieldset-section>
<FormField
type="textarea"
className="form-field--copyable"
label={label}
value={embedText || ''}
ref={input}
onFocus={onFocus}
/>
<div className="card__actions card__actions--center">
<Button
icon={ICONS.COPY}
2019-11-04 13:50:51 +01:00
button="link"
2019-10-29 17:23:56 +01:00
onClick={() => {
copyToClipboard();
}}
/>
</div>
</fieldset-section>
);
}