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

176 lines
5.1 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2020-10-02 21:18:53 +02:00
import { SIMPLE_SITE, SITE_NAME, ENABLE_FILE_REACTIONS } from 'config';
2020-06-08 20:42:29 +02:00
import * as PAGES from 'constants/pages';
import * as MODALS from 'constants/modal_types';
import * as ICONS from 'constants/icons';
2021-03-26 23:17:06 +01:00
import * as PUBLISH_MODES from 'constants/publish_types';
import React from 'react';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2020-01-06 19:32:35 +01:00
import FileDownloadLink from 'component/fileDownloadLink';
import { buildURI } from 'lbry-redux';
import * as RENDER_MODES from 'constants/file_render_modes';
2020-08-10 22:47:39 +02:00
import { useIsMobile } from 'effects/use-screensize';
2020-06-08 20:42:29 +02:00
import ClaimSupportButton from 'component/claimSupportButton';
import { useHistory } from 'react-router';
2020-10-02 21:18:53 +02:00
import FileReactions from 'component/fileReactions';
2018-03-26 23:32:43 +02:00
type Props = {
uri: string,
2020-01-06 19:32:35 +01:00
claim: StreamClaim,
openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
prepareEdit: ({}, string, {}) => void,
2018-03-26 23:32:43 +02:00
claimIsMine: boolean,
2019-08-06 05:25:33 +02:00
fileInfo: FileListItem,
2020-01-06 19:32:35 +01:00
costInfo: ?{ cost: number },
renderMode: string,
myChannels: ?Array<ChannelClaim>,
doToast: ({ message: string }) => void,
clearPlayingUri: () => void,
2021-03-26 22:03:52 +01:00
isLivestreamClaim: boolean,
2018-03-26 23:32:43 +02:00
};
2020-01-06 19:32:35 +01:00
function FileActions(props: Props) {
const {
fileInfo,
uri,
openModal,
claimIsMine,
claim,
costInfo,
renderMode,
prepareEdit,
myChannels,
clearPlayingUri,
doToast,
2021-03-26 22:03:52 +01:00
isLivestreamClaim,
} = props;
const {
push,
location: { pathname },
} = useHistory();
const isMobile = useIsMobile();
const webShareable = costInfo && costInfo.cost === 0 && RENDER_MODES.WEB_SHAREABLE_MODES.includes(renderMode);
2020-01-06 19:32:35 +01:00
const showDelete = claimIsMine || (fileInfo && (fileInfo.written_bytes > 0 || fileInfo.blobs_completed > 0));
const hasChannels = myChannels && myChannels.length > 0;
2020-01-06 19:32:35 +01:00
const claimId = claim && claim.claim_id;
const { signing_channel: signingChannel } = claim;
const channelName = signingChannel && signingChannel.name;
// We want to use the short form uri for editing
// This is what the user is used to seeing, they don't care about the claim id
// We will select the claim id before they publish
let editUri;
if (claimIsMine) {
const uriObject: { streamName: string, streamClaimId: string, channelName?: string } = {
streamName: claim.name,
streamClaimId: claim.claim_id,
};
if (channelName) {
uriObject.channelName = channelName;
}
editUri = buildURI(uriObject);
}
function handleRepostClick() {
if (!hasChannels) {
clearPlayingUri();
push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`);
doToast({ message: __('A channel is required to repost on %SITE_NAME%', { SITE_NAME }) });
} else {
2021-01-13 17:43:45 +01:00
push(`/$/${PAGES.REPOST_NEW}?from=${encodeURIComponent(uri)}&redirect=${pathname}`);
}
}
const lhsSection = (
<>
2020-10-02 21:18:53 +02:00
{ENABLE_FILE_REACTIONS && <FileReactions uri={uri} />}
2020-09-30 22:46:20 +02:00
<ClaimSupportButton uri={uri} fileAction />
<Button
button="alt"
2020-09-30 22:46:20 +02:00
className="button--file-action"
icon={ICONS.REPOST}
label={
claim.meta.reposted > 1 ? __(`%repost_total% Reposts`, { repost_total: claim.meta.reposted }) : __('Repost')
}
description={__('Repost')}
2020-09-30 22:46:20 +02:00
requiresAuth={IS_WEB}
onClick={handleRepostClick}
/>
<Button
className="button--file-action"
icon={ICONS.SHARE}
label={__('Share')}
title={__('Share')}
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
/>
</>
);
2020-01-06 19:32:35 +01:00
const rhsSection = (
<>
{!SIMPLE_SITE && <FileDownloadLink uri={uri} />}
2020-01-06 19:32:35 +01:00
{claimIsMine && (
<Button
2020-09-30 22:46:20 +02:00
className="button--file-action"
icon={ICONS.EDIT}
label={__('Edit')}
2021-03-26 23:37:46 +01:00
navigate={`/$/${PAGES.UPLOAD}${isLivestreamClaim ? `?type=${PUBLISH_MODES.LIVESTREAM}` : ''}`}
2021-03-26 22:03:52 +01:00
onClick={() => {
prepareEdit(claim, editUri, fileInfo);
}}
/>
)}
{claimIsMine && isLivestreamClaim && (
<Button
className="button--file-action"
icon={ICONS.PUBLISH}
label={__('Publish Replay')}
2021-03-26 23:37:46 +01:00
navigate={`/$/${PAGES.UPLOAD}?type=${PUBLISH_MODES.FILE}`}
onClick={() => {
prepareEdit(claim, editUri, fileInfo);
}}
/>
)}
2020-01-06 19:32:35 +01:00
{showDelete && (
<Button
title={__('Remove from your library')}
2020-09-30 22:46:20 +02:00
className="button--file-action"
icon={ICONS.DELETE}
description={__('Delete')}
onClick={() => openModal(MODALS.CONFIRM_FILE_REMOVE, { uri })}
/>
)}
2020-09-30 22:46:20 +02:00
{!claimIsMine && (
<Button
title={__('Report content')}
2020-09-30 22:46:20 +02:00
className="button--file-action"
icon={ICONS.REPORT}
href={`https://lbry.com/dmca/${claimId}`}
/>
)}
</>
2020-01-06 19:32:35 +01:00
);
if (isMobile) {
return (
<div className="media__actions">
{lhsSection}
{rhsSection}
</div>
);
} else {
return (
<div className="media__actions">
2020-10-05 19:38:40 +02:00
<div className="section__actions section__actions--no-margin">
{lhsSection}
{rhsSection}
</div>
</div>
);
}
}
2017-06-06 06:21:55 +02:00
export default FileActions;