Merge pull request #1901 from lbryio/record-view-download

record file view when clicking the download button

.flowconfig

@@ -21,5 +21,6 @@ module.name_mapper='^rewards\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/rewards\1'
 module.name_mapper='^modal\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/modal\1'
 module.name_mapper='^app\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/app\1'
 module.name_mapper='^native\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/native\1'
+module.name_mapper='^analytics\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/analytics\1'
 
 [strict]

src/renderer/component/fileDownloadLink/index.js

@@ -4,6 +4,7 @@ import {
   makeSelectDownloadingForUri,
   makeSelectLoadingForUri,
   makeSelectCostInfoForUri,
+  makeSelectClaimForUri,
 } from 'lbry-redux';
 import { doOpenFileInShell } from 'redux/actions/file';
 import { doPurchaseUri, doStartDownload } from 'redux/actions/content';
@@ -16,6 +17,7 @@ const select = (state, props) => ({
   downloading: makeSelectDownloadingForUri(props.uri)(state),
   costInfo: makeSelectCostInfoForUri(props.uri)(state),
   loading: makeSelectLoadingForUri(props.uri)(state),
+  claim: makeSelectClaimForUri(props.uri)(state),
 });
 
 const perform = dispatch => ({
@@ -25,4 +27,7 @@ const perform = dispatch => ({
   doPause: () => dispatch(doPause()),
 });
 
-export default connect(select, perform)(FileDownloadLink);
+export default connect(
+  select,
+  perform
+)(FileDownloadLink);

src/renderer/component/fileDownloadLink/view.jsx

@@ -3,8 +3,11 @@ import React from 'react';
 import Button from 'component/button';
 import * as icons from 'constants/icons';
 import ToolTip from 'component/common/tooltip';
+import analytics from 'analytics';
+import type { Claim } from 'types/claim';
 
 type Props = {
+  claim: Claim,
   uri: string,
   downloading: boolean,
   fileInfo: ?{
@@ -48,6 +51,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
       costInfo,
       loading,
       doPause,
+      claim,
     } = this.props;
 
     const openFile = () => {
@@ -80,6 +84,12 @@ class FileDownloadLink extends React.PureComponent<Props> {
             iconColor="green"
             onClick={() => {
               purchaseUri(uri);
+
+              const { name, claim_id: claimId, nout, txid } = claim;
+              // // ideally outpoint would exist inside of claim information
+              // // we can use it after https://github.com/lbryio/lbry/issues/1306 is addressed
+              const outpoint = `${txid}:${nout}`;
+              analytics.apiLogView(`${name}#${claimId}`, outpoint, claimId);
             }}
           />
         </ToolTip>

src/renderer/component/fileViewer/internal/player.jsx

@@ -46,6 +46,7 @@ class MediaPlayer extends React.PureComponent {
 
     const loadedMetadata = () => {
       this.setState({ hasMetadata: true, startedPlaying: true });
+
       if (startedPlayingCb) {
         startedPlayingCb();
       }

src/renderer/component/fileViewer/view.jsx

@@ -146,7 +146,12 @@ class FileViewer extends React.PureComponent<Props> {
   }
 
   playContent() {
-    const { play, uri } = this.props;
+    const { play, uri, fileInfo, isDownloading, isLoading } = this.props;
+
+    if (fileInfo || isDownloading || isLoading) {
+      // User may have pressed download before clicking play
+      this.startedPlayingCb = null;
+    }
 
     if (this.startedPlayingCb) {
       this.startTime = Date.now();