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

184 lines
5.8 KiB
React
Raw Normal View History

2018-09-12 18:42:15 +02:00
// @flow
2018-11-26 02:21:25 +01:00
import * as ICONS from 'constants/icons';
import React from 'react';
2018-09-12 18:42:15 +02:00
import Button from 'component/button';
2018-10-04 15:39:14 +02:00
import CopyableText from 'component/copyableText';
import EmbedTextArea from 'component/embedTextArea';
import { generateDownloadUrl } from 'util/web';
2020-03-30 21:43:27 +02:00
import useIsMobile from 'effects/use-is-mobile';
import { FormField } from 'component/common/form';
import { hmsToSeconds, secondsToHms } from 'util/time';
2020-05-07 21:41:20 +02:00
import {
generateLbryContentUrl,
generateLbryWebUrl,
generateEncodedLbryURL,
generateOpenDotLbryDotComUrl,
} from 'util/url';
2020-03-27 19:57:03 +01:00
const IOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
2020-03-30 21:43:27 +02:00
const SUPPORTS_SHARE_API = typeof navigator.share !== 'undefined';
2018-09-12 18:42:15 +02:00
type Props = {
2020-03-30 21:43:27 +02:00
claim: StreamClaim,
title: ?string,
2019-10-29 17:23:56 +01:00
webShareable: boolean,
2020-01-14 21:44:07 +01:00
referralCode: string,
user: any,
position: number,
2018-09-12 18:42:15 +02:00
};
2020-03-30 21:43:27 +02:00
function SocialShare(props: Props) {
const { claim, title, referralCode, user, webShareable, position } = props;
2020-03-30 21:43:27 +02:00
const [showEmbed, setShowEmbed] = React.useState(false);
const [showClaimLinks, setShowClaimLinks] = React.useState(false);
const [includeStartTime, setincludeStartTime]: [boolean, any] = React.useState(false);
const [startTime, setStartTime]: [string, any] = React.useState(secondsToHms(position));
2020-05-07 21:41:20 +02:00
const startTimeSeconds: number = hmsToSeconds(startTime);
2020-03-30 21:43:27 +02:00
const isMobile = useIsMobile();
2018-09-12 18:42:15 +02:00
2020-05-07 21:41:20 +02:00
if (!claim) {
return null;
2018-09-12 18:42:15 +02:00
}
2020-05-07 21:41:20 +02:00
const { canonical_url: canonicalUrl, permanent_url: permanentUrl, name, claim_id: claimId } = claim;
2020-03-30 21:43:27 +02:00
const isChannel = claim.value_type === 'channel';
const isStream = claim.value_type === 'stream';
const isVideo = isStream && claim.value.stream_type === 'video';
const isAudio = isStream && claim.value.stream_type === 'audio';
const showStartAt = isVideo || isAudio;
2020-03-30 21:43:27 +02:00
const rewardsApproved = user && user.is_reward_approved;
const OPEN_URL = 'https://open.lbry.com/';
2020-05-07 21:41:20 +02:00
const lbryUrl: string = generateLbryContentUrl(canonicalUrl, permanentUrl);
const lbryWebUrl: string = generateLbryWebUrl(lbryUrl);
2020-05-07 21:41:20 +02:00
const encodedLbryURL: string = generateEncodedLbryURL(OPEN_URL, lbryWebUrl, includeStartTime, startTimeSeconds);
const openDotLbryDotComUrl: string = generateOpenDotLbryDotComUrl(
OPEN_URL,
lbryWebUrl,
canonicalUrl,
permanentUrl,
referralCode,
rewardsApproved,
includeStartTime,
startTimeSeconds
);
2020-03-30 21:43:27 +02:00
const downloadUrl = `${generateDownloadUrl(name, claimId)}`;
2018-09-12 18:42:15 +02:00
2020-03-30 21:43:27 +02:00
function handleWebShareClick() {
if (navigator.share) {
navigator.share({
title: title || claim.name,
url: window.location.href,
});
2020-03-27 19:57:03 +01:00
}
2020-03-30 21:43:27 +02:00
}
2018-10-04 15:39:14 +02:00
2020-03-30 21:43:27 +02:00
return (
<React.Fragment>
<CopyableText label={__('LBRY Link')} copyable={openDotLbryDotComUrl} />
{showStartAt && (
<div className="section__start-at">
<FormField
type="checkbox"
name="share_start_at_checkbox"
onChange={() => setincludeStartTime(!includeStartTime)}
checked={includeStartTime}
label={__('Start at')}
/>
<FormField
type="text"
name="share_start_at"
value={startTime}
disabled={!includeStartTime}
onChange={event => setStartTime(event.target.value)}
/>
</div>
)}
2020-03-30 21:43:27 +02:00
<div className="section__actions">
<Button
className="share"
iconSize={24}
icon={ICONS.TWITTER}
href={`https://twitter.com/intent/tweet?text=${encodedLbryURL}`}
/>
<Button
className="share"
iconSize={24}
icon={ICONS.REDDIT}
title={__('Share on Facebook')}
href={`https://reddit.com/submit?url=${encodedLbryURL}`}
/>
{IOS && (
// Only ios client supports share urls
2020-03-27 19:57:03 +01:00
<Button
className="share"
iconSize={24}
2020-03-30 21:43:27 +02:00
icon={ICONS.TELEGRAM}
title={__('Share on Telegram')}
href={`tg://msg_url?url=${encodedLbryURL}&amp;text=text`}
2020-03-27 19:57:03 +01:00
/>
2020-03-30 21:43:27 +02:00
)}
<Button
className="share"
iconSize={24}
icon={ICONS.LINKEDIN}
title={__('Share on LinkedIn')}
href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedLbryURL}`}
/>
<Button
className="share"
iconSize={24}
icon={ICONS.FACEBOOK}
title={__('Share on Facebook')}
href={`https://facebook.com/sharer/sharer.php?u=${encodedLbryURL}`}
/>
{webShareable && !isChannel && (
<React.Fragment>
2020-03-27 19:57:03 +01:00
<Button
className="share"
iconSize={24}
2020-03-30 21:43:27 +02:00
icon={ICONS.EMBED}
title={__('Embed this content')}
onClick={() => {
setShowEmbed(!showEmbed);
setShowClaimLinks(false);
2020-03-30 21:43:27 +02:00
}}
2020-03-27 19:57:03 +01:00
/>
2020-03-30 21:43:27 +02:00
<Button
className="share"
iconSize={24}
icon={ICONS.SHARE_LINK}
title={__('Links')}
2020-03-30 21:43:27 +02:00
onClick={() => {
setShowClaimLinks(!showClaimLinks);
2020-03-30 21:43:27 +02:00
setShowEmbed(false);
}}
/>
</React.Fragment>
2020-03-27 19:57:03 +01:00
)}
2020-03-30 21:43:27 +02:00
</div>
{SUPPORTS_SHARE_API && isMobile && (
<div className="section__actions">
<Button icon={ICONS.SHARE} button="primary" label={__('Share via...')} onClick={handleWebShareClick} />
</div>
)}
{showEmbed && (
<EmbedTextArea
label={__('Embedded')}
claim={claim}
includeStartTime={includeStartTime}
startTime={startTimeSeconds}
/>
)}
{showClaimLinks && (
2020-03-30 21:43:27 +02:00
<div className="section">
<CopyableText label={__('LBRY URL')} copyable={`lbry://${lbryUrl}`} />
<CopyableText label={__('Download Link')} copyable={downloadUrl} />
</div>
)}
</React.Fragment>
);
2018-09-12 18:42:15 +02:00
}
export default SocialShare;