trigger analytics view for download on lbry.tv

ui/component/button/view.jsx

@@ -98,7 +98,14 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
 
   if (href) {
     return (
-      <OutboundLink eventLabel="outboundClick" to={href} target="_blank" className={combinedClassName} {...otherProps}>
+      <OutboundLink
+        eventLabel="outboundClick"
+        to={href}
+        target="_blank"
+        className={combinedClassName}
+        onClick={onClick}
+        {...otherProps}
+      >
         {content}
       </OutboundLink>
     );

ui/component/fileDownloadLink/index.js

@@ -6,6 +6,7 @@ import {
   makeSelectClaimIsMine,
   makeSelectClaimForUri,
 } from 'lbry-redux';
+import { makeSelectCostInfoForUri } from 'lbryinc';
 import { doOpenModal, doAnalyticsView } from 'redux/actions/app';
 import { doSetPlayingUri, doPlayUri } from 'redux/actions/content';
 import FileDownloadLink from './view';
@@ -16,12 +17,14 @@ const select = (state, props) => ({
   loading: makeSelectLoadingForUri(props.uri)(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
   claim: makeSelectClaimForUri(props.uri)(state),
+  costInfo: makeSelectCostInfoForUri(props.uri)(state),
 });
 
 const perform = dispatch => ({
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
   pause: () => dispatch(doSetPlayingUri(null)),
   download: uri => dispatch(doPlayUri(uri, false, true, () => dispatch(doAnalyticsView(uri)))),
+  triggerViewEvent: uri => dispatch(doAnalyticsView(uri)),
 });
 
 export default connect(

ui/component/fileDownloadLink/view.jsx

@@ -17,14 +17,43 @@ type Props = {
   openModal: (id: string, { path: string }) => void,
   pause: () => void,
   download: string => void,
+  triggerViewEvent: string => void,
+  costInfo: ?{ cost: string },
 };
 
 function FileDownloadLink(props: Props) {
-  const { fileInfo, downloading, loading, openModal, pause, claimIsMine, download, uri, claim } = props;
+  const {
+    fileInfo,
+    downloading,
+    loading,
+    openModal,
+    pause,
+    claimIsMine,
+    download,
+    uri,
+    claim,
+    triggerViewEvent,
+    costInfo,
+  } = props;
+  const cost = costInfo ? Number(costInfo.cost) : 0;
+  const isPaidContent = cost > 0;
   const { name, claim_id: claimId, value } = claim;
   const fileName = value && value.source && value.source.name;
   const downloadUrl = generateDownloadUrl(name, claimId, undefined, true);
 
+  function handleDownload() {
+    // @if TARGET='app'
+    download(uri);
+    // @endif;
+    // @if TARGET='web'
+    triggerViewEvent(uri);
+    // @endif;
+  }
+
+  if (IS_WEB && isPaidContent) {
+    return null;
+  }
+
   if (downloading || loading) {
     const progress = fileInfo && fileInfo.written_bytes > 0 ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100 : 0;
     const label =
@@ -46,23 +75,21 @@ function FileDownloadLink(props: Props) {
         />
       </ToolTip>
     );
-  } else {
-    return (
-      <ToolTip label={IS_WEB ? __('Download') : __('Add to your library')}>
-        <Button
-          button="alt"
-          icon={ICONS.DOWNLOAD}
-          // @if TARGET='app'
-          onClick={() => download(uri)}
-          // @endif
-          // @if TARGET='web'
-          download={fileName}
-          href={downloadUrl}
-          // @endif
-        />
-      </ToolTip>
-    );
   }
+
+  return (
+    <ToolTip label={IS_WEB ? __('Download') : __('Add to your library')}>
+      <Button
+        button="alt"
+        icon={ICONS.DOWNLOAD}
+        onClick={handleDownload}
+        // @if TARGET='web'
+        download={fileName}
+        href={downloadUrl}
+        // @endif
+      />
+    </ToolTip>
+  );
 }
 
 export default FileDownloadLink;