From 978871a92723f30c1daf525ba477c4b373ba84cc Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 7 Jan 2020 13:17:43 -0500
Subject: [PATCH] enable downloads on lbry.tv

---
 ui/component/button/view.jsx           |  2 +-
 ui/component/fileActions/view.jsx      |  2 --
 ui/component/fileDownloadLink/index.js |  2 ++
 ui/component/fileDownloadLink/view.jsx | 19 ++++++++++++++-----
 ui/util/lbrytv.js                      |  7 ++++++-
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/ui/component/button/view.jsx b/ui/component/button/view.jsx
index 31423c628..a64080937 100644
--- a/ui/component/button/view.jsx
+++ b/ui/component/button/view.jsx
@@ -98,7 +98,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
 
   if (href) {
     return (
-      <OutboundLink eventLabel="outboundClick" to={href} target="_blank" className={combinedClassName}>
+      <OutboundLink eventLabel="outboundClick" to={href} target="_blank" className={combinedClassName} {...otherProps}>
         {content}
       </OutboundLink>
     );
diff --git a/ui/component/fileActions/view.jsx b/ui/component/fileActions/view.jsx
index 11a689d95..83724a2fe 100644
--- a/ui/component/fileActions/view.jsx
+++ b/ui/component/fileActions/view.jsx
@@ -75,9 +75,7 @@ function FileActions(props: Props) {
       </div>
 
       <div className="section__actions">
-        {/* @if TARGET='app' */}
         <FileDownloadLink uri={uri} />
-        {/* @endif */}
 
         {claimIsMine && (
           <Button
diff --git a/ui/component/fileDownloadLink/index.js b/ui/component/fileDownloadLink/index.js
index 2d079ed89..e1b22196d 100644
--- a/ui/component/fileDownloadLink/index.js
+++ b/ui/component/fileDownloadLink/index.js
@@ -4,6 +4,7 @@ import {
   makeSelectDownloadingForUri,
   makeSelectLoadingForUri,
   makeSelectClaimIsMine,
+  makeSelectClaimForUri,
 } from 'lbry-redux';
 import { doOpenModal, doAnalyticsView } from 'redux/actions/app';
 import { doSetPlayingUri, doPlayUri } from 'redux/actions/content';
@@ -14,6 +15,7 @@ const select = (state, props) => ({
   downloading: makeSelectDownloadingForUri(props.uri)(state),
   loading: makeSelectLoadingForUri(props.uri)(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+  claim: makeSelectClaimForUri(props.uri)(state),
 });
 
 const perform = dispatch => ({
diff --git a/ui/component/fileDownloadLink/view.jsx b/ui/component/fileDownloadLink/view.jsx
index e2297ab74..895ee0eff 100644
--- a/ui/component/fileDownloadLink/view.jsx
+++ b/ui/component/fileDownloadLink/view.jsx
@@ -4,9 +4,11 @@ import * as MODALS from 'constants/modal_types';
 import React from 'react';
 import Button from 'component/button';
 import ToolTip from 'component/common/tooltip';
+import { generateDownloadUrl } from 'util/lbrytv';
 
 type Props = {
   uri: string,
+  claim: StreamClaim,
   claimIsMine: boolean,
   downloading: boolean,
   loading: boolean,
@@ -18,7 +20,10 @@ type Props = {
 };
 
 function FileDownloadLink(props: Props) {
-  const { fileInfo, downloading, loading, openModal, pause, claimIsMine, download, uri } = props;
+  const { fileInfo, downloading, loading, openModal, pause, claimIsMine, download, uri, claim } = props;
+  const { name, claim_id: claimId, value } = claim;
+  const fileName = value && value.source && value.source.name;
+  const downloadUrl = generateDownloadUrl(name, claimId, undefined, true);
 
   if (downloading || loading) {
     const progress = fileInfo && fileInfo.written_bytes > 0 ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100 : 0;
@@ -43,13 +48,17 @@ function FileDownloadLink(props: Props) {
     );
   } else {
     return (
-      <ToolTip label={__('Add to your library')}>
+      <ToolTip label={IS_WEB ? __('Download') : __('Add to your library')}>
         <Button
           button="alt"
           icon={ICONS.DOWNLOAD}
-          onClick={() => {
-            download(uri);
-          }}
+          // @if TARGET='app'
+          onClick={() => download(uri)}
+          // @endif
+          // @if TARGET='web'
+          download={fileName}
+          href={downloadUrl}
+          // @endif
         />
       </ToolTip>
     );
diff --git a/ui/util/lbrytv.js b/ui/util/lbrytv.js
index b70dcf5f4..ffa49d0f5 100644
--- a/ui/util/lbrytv.js
+++ b/ui/util/lbrytv.js
@@ -9,5 +9,10 @@ function generateEmbedUrl(claimName, claimId) {
   return `${URL}/$/embed/${claimName}/${claimId}`;
 }
 
+function generateDownloadUrl(claimName, claimId, apiUrl) {
+  const streamUrl = generateStreamUrl(claimName, claimId, apiUrl);
+  return `${streamUrl}?download=1`;
+}
+
 // module.exports needed since the web server imports this function
-module.exports = { generateStreamUrl, generateEmbedUrl };
+module.exports = { generateStreamUrl, generateEmbedUrl, generateDownloadUrl };