From fbcb740dc9c1d568241415db18dbc474cf7a4162 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Fri, 18 Jun 2021 21:56:20 +0800 Subject: [PATCH] Move 'Download' and 'Report Content' into overflow menu. ## Issue 6236 Add context menu to file page ## Notes The download button actually handles a lot of things -- generating 'streamingUrl', differences between Web and Desktop, download progress for Desktop, etc. A simpler fix would be to put something else (maybe "Share") into the overflow menu instead. Anyway, went ahead to do it per 6236, but retained the item for Desktop since we need a progress label. --- ui/component/fileActions/index.js | 7 ++- ui/component/fileActions/view.jsx | 69 ++++++++++++++++++++++---- ui/component/fileDownloadLink/view.jsx | 12 +---- ui/util/downloadClaim.js | 13 +++++ 4 files changed, 80 insertions(+), 21 deletions(-) create mode 100644 ui/util/downloadClaim.js diff --git a/ui/component/fileActions/index.js b/ui/component/fileActions/index.js index 0e15bb7ea..f6e17a4bc 100644 --- a/ui/component/fileActions/index.js +++ b/ui/component/fileActions/index.js @@ -7,12 +7,13 @@ import { selectMyChannelClaims, makeSelectClaimIsStreamPlaceholder, makeSelectTagInClaimOrChannelForUri, + makeSelectStreamingUrlForUri, } from 'lbry-redux'; import { DISABLE_COMMENTS_TAG } from 'constants/tags'; import { makeSelectCostInfoForUri } from 'lbryinc'; -import { doSetPlayingUri } from 'redux/actions/content'; +import { doSetPlayingUri, doPlayUri } from 'redux/actions/content'; import { doToast } from 'redux/actions/notifications'; -import { doOpenModal, doSetActiveChannel, doSetIncognito } from 'redux/actions/app'; +import { doOpenModal, doSetActiveChannel, doSetIncognito, doAnalyticsView } from 'redux/actions/app'; import fs from 'fs'; import FileActions from './view'; import { makeSelectFileRenderModeForUri } from 'redux/selectors/content'; @@ -26,6 +27,7 @@ const select = (state, props) => ({ myChannels: selectMyChannelClaims(state), isLivestreamClaim: makeSelectClaimIsStreamPlaceholder(props.uri)(state), reactionsDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state), + streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state), }); const perform = (dispatch) => ({ @@ -42,6 +44,7 @@ const perform = (dispatch) => ({ }, clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })), doToast: (options) => dispatch(doToast(options)), + download: (uri) => dispatch(doPlayUri(uri, false, true, () => dispatch(doAnalyticsView(uri)))), }); export default connect(select, perform)(FileActions); diff --git a/ui/component/fileActions/view.jsx b/ui/component/fileActions/view.jsx index caafded69..6b1f3a981 100644 --- a/ui/component/fileActions/view.jsx +++ b/ui/component/fileActions/view.jsx @@ -1,5 +1,5 @@ // @flow -import { SIMPLE_SITE, SITE_NAME, ENABLE_FILE_REACTIONS } from 'config'; +import { SITE_NAME, ENABLE_FILE_REACTIONS } from 'config'; import * as PAGES from 'constants/pages'; import * as MODALS from 'constants/modal_types'; import * as ICONS from 'constants/icons'; @@ -13,6 +13,9 @@ import ClaimSupportButton from 'component/claimSupportButton'; import ClaimCollectionAddButton from 'component/claimCollectionAddButton'; import { useHistory } from 'react-router'; import FileReactions from 'component/fileReactions'; +import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button'; +import Icon from 'component/common/icon'; +import { webDownloadClaim } from 'util/downloadClaim'; type Props = { uri: string, @@ -28,6 +31,8 @@ type Props = { clearPlayingUri: () => void, isLivestreamClaim: boolean, reactionsDisabled: boolean, + download: (string) => void, + streamingUrl: ?string, }; function FileActions(props: Props) { @@ -45,6 +50,8 @@ function FileActions(props: Props) { doToast, isLivestreamClaim, reactionsDisabled, + download, + streamingUrl, } = props; const { push, @@ -57,6 +64,8 @@ function FileActions(props: Props) { const claimId = claim && claim.claim_id; const { signing_channel: signingChannel } = claim; const channelName = signingChannel && signingChannel.name; + const fileName = claim && claim.value && claim.value.source && claim.value.source.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 @@ -76,6 +85,22 @@ function FileActions(props: Props) { const urlParams = new URLSearchParams(search); const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID); + // @if TARGET='web' + const [downloadClicked, setDownloadClicked] = React.useState(false); + + function handleWebDownload() { + // download() causes 'streamingUrl' to be populated. + download(uri); + setDownloadClicked(true); + } + + React.useEffect(() => { + if (downloadClicked && streamingUrl) { + webDownloadClaim(streamingUrl, fileName); + } + }, [downloadClicked, streamingUrl, fileName]); + // @endif + function handleRepostClick() { if (!hasChannels) { clearPlayingUri(); @@ -114,7 +139,9 @@ function FileActions(props: Props) { const rhsSection = ( <> - {!SIMPLE_SITE && } + {/* @if TARGET='app' */} + + {/* @endif */} {claimIsMine && (