From 202269ebeba690565a3d5bf2177bc54f2bdadc76 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Thu, 3 Sep 2020 09:08:25 +0800
Subject: [PATCH] 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.
---
 CHANGELOG.md                      |   1 +
 ui/component/fileActions/view.jsx | 146 ++++++++++++++++--------------
 2 files changed, 78 insertions(+), 69 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a8e3e1c35..1ab549b61 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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]
 
diff --git a/ui/component/fileActions/view.jsx b/ui/component/fileActions/view.jsx
index df0fd20e2..bc9093b17 100644
--- a/ui/component/fileActions/view.jsx
+++ b/ui/component/fileActions/view.jsx
@@ -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;