enable downloads on lbry.tv

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>
     );

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

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 => ({

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>
     );

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 };