Web: Fix 'Download' not triggering until second attempt
## Issue 4669: `Download doesn't trigger on web until 2nd attempt` The issue only happens when _Autoplay_ is disabled in the User Settings and the video hasn't been loaded when _Download_ is clicked. The following code: `if (didClickDownloadButton && streamingUrl)` didn't triggered because: 1. `streamingUrl` has not resolved yet when the Effect ran. 2. When it did resolve, the parent component was also notified and unmounted things, causing `didClickDownloadButton` to reset. ## Approach Avoid the unnecessary unmounting by not using a conditional section wrapper within a return statement. React probably couldn't do the diffs when the conditional is at a section level.
This commit is contained in:
infiinte-persistence
Sean Yesmunt
parent
d1db6fb3b3
commit
202269ebeb
2 changed files with 78 additions and 69 deletions
|
|
@ -26,6 +26,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
|||
- Fix related + search results loading slowly ([#4657](https://github.com/lbryio/lbry-desktop/pull/4657))
|
||||
- Fix partially untranslated text in the Upgrade Modal _community pr!_ ([#4722](https://github.com/lbryio/lbry-desktop/pull/4722))
|
||||
- Fix floating player being paused after dragging _community pr!_ ([#4710](https://github.com/lbryio/lbry-desktop/pull/4710))
|
||||
- Web: Fix 'Download' not triggering until second attempt _community pr!_ ([#4721](https://github.com/lbryio/lbry-desktop/pull/4721))
|
||||
|
||||
## [0.47.1] - [2020-07-23]
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
// @flow
|
||||
import type { Node } from 'react';
|
||||
import { SIMPLE_SITE } from 'config';
|
||||
import * as PAGES from 'constants/pages';
|
||||
import * as CS from 'constants/claim_search';
|
||||
|
|
@ -48,80 +47,89 @@ function FileActions(props: Props) {
|
|||
editUri = buildURI(uriObject);
|
||||
}
|
||||
|
||||
const ActionWrapper = (props: { children: Node }) =>
|
||||
isMobile ? (
|
||||
<React.Fragment>{props.children}</React.Fragment>
|
||||
) : (
|
||||
<div className="section__actions section__actions--no-margin">{props.children}</div>
|
||||
);
|
||||
const lhsSection = (
|
||||
<>
|
||||
<Button
|
||||
button="alt"
|
||||
icon={ICONS.SHARE}
|
||||
label={__('Share')}
|
||||
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
|
||||
/>
|
||||
|
||||
return (
|
||||
<div className="media__actions">
|
||||
<ActionWrapper>
|
||||
<Button
|
||||
button="alt"
|
||||
icon={ICONS.SHARE}
|
||||
label={__('Share')}
|
||||
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
|
||||
/>
|
||||
|
||||
{!SIMPLE_SITE && (
|
||||
<div className="button-group">
|
||||
{!SIMPLE_SITE && (
|
||||
<div className="button-group">
|
||||
<Button
|
||||
button="alt"
|
||||
icon={ICONS.REPOST}
|
||||
label={__('Repost')}
|
||||
requiresAuth={IS_WEB}
|
||||
onClick={() => openModal(MODALS.REPOST, { uri })}
|
||||
/>
|
||||
{claim.meta.reposted > 0 && (
|
||||
<Button
|
||||
button="alt"
|
||||
icon={ICONS.REPOST}
|
||||
label={__('Repost')}
|
||||
label={claim.meta.reposted}
|
||||
requiresAuth={IS_WEB}
|
||||
onClick={() => openModal(MODALS.REPOST, { uri })}
|
||||
navigate={`/$/${PAGES.DISCOVER}?${CS.REPOSTED_URI_KEY}=${encodeURIComponent(uri)}`}
|
||||
/>
|
||||
{claim.meta.reposted > 0 && (
|
||||
<Button
|
||||
button="alt"
|
||||
label={claim.meta.reposted}
|
||||
requiresAuth={IS_WEB}
|
||||
navigate={`/$/${PAGES.DISCOVER}?${CS.REPOSTED_URI_KEY}=${encodeURIComponent(uri)}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<ClaimSupportButton uri={uri} />
|
||||
</ActionWrapper>
|
||||
|
||||
<ActionWrapper>
|
||||
{!SIMPLE_SITE && <FileDownloadLink uri={uri} />}
|
||||
|
||||
{claimIsMine && (
|
||||
<Button
|
||||
button="alt"
|
||||
icon={ICONS.EDIT}
|
||||
label={__('Edit')}
|
||||
navigate="/$/upload"
|
||||
onClick={() => {
|
||||
prepareEdit(claim, editUri, fileInfo);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showDelete && (
|
||||
<Button
|
||||
title={__('Remove from your library')}
|
||||
button="alt"
|
||||
icon={ICONS.DELETE}
|
||||
description={__('Delete')}
|
||||
onClick={() => openModal(MODALS.CONFIRM_FILE_REMOVE, { uri })}
|
||||
/>
|
||||
)}
|
||||
{!claimIsMine && !SIMPLE_SITE && (
|
||||
<Button
|
||||
title={__('Report content')}
|
||||
button="alt"
|
||||
icon={ICONS.REPORT}
|
||||
href={`https://lbry.com/dmca/${claimId}`}
|
||||
/>
|
||||
)}
|
||||
</ActionWrapper>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<ClaimSupportButton uri={uri} />
|
||||
</>
|
||||
);
|
||||
|
||||
const rhsSection = (
|
||||
<>
|
||||
{!SIMPLE_SITE && <FileDownloadLink uri={uri} />}
|
||||
|
||||
{claimIsMine && (
|
||||
<Button
|
||||
button="alt"
|
||||
icon={ICONS.EDIT}
|
||||
label={__('Edit')}
|
||||
navigate="/$/upload"
|
||||
onClick={() => {
|
||||
prepareEdit(claim, editUri, fileInfo);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showDelete && (
|
||||
<Button
|
||||
title={__('Remove from your library')}
|
||||
button="alt"
|
||||
icon={ICONS.DELETE}
|
||||
description={__('Delete')}
|
||||
onClick={() => openModal(MODALS.CONFIRM_FILE_REMOVE, { uri })}
|
||||
/>
|
||||
)}
|
||||
{!claimIsMine && !SIMPLE_SITE && (
|
||||
<Button
|
||||
title={__('Report content')}
|
||||
button="alt"
|
||||
icon={ICONS.REPORT}
|
||||
href={`https://lbry.com/dmca/${claimId}`}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div className="media__actions">
|
||||
{lhsSection}
|
||||
{rhsSection}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="media__actions">
|
||||
<div className="section__actions section__actions--no-margin">{lhsSection}</div>
|
||||
<div className="section__actions section__actions--no-margin">{rhsSection}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default FileActions;
|
||||
|
|
|
|||
Loading…
Reference in a new issue