add time to start (in seconds) to Play track event for new downloads (#269)

* add time to start (in seconds) to Play track event for new downloads
* send time_to_start parameter with file/view call

app/src/component/mediaPlayer/view.js

@@ -93,9 +93,8 @@ class MediaPlayer extends React.PureComponent {
     }
 
     if (this.state.firstPlay) {
-      if (NativeModules.Mixpanel) {
+      if (this.props.onPlaybackStarted) {
-        const { uri } = this.props;
+        this.props.onPlaybackStarted();
-        NativeModules.Mixpanel.track('Play', { Uri: uri });
       }
       this.setState({ firstPlay: false });
       this.hidePlayerControls();

app/src/page/file/view.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Lbry, normalizeURI } from 'lbry-redux';
+import { Lbryio } from 'lbryinc';
 import {
   ActivityIndicator,
   Alert,
@@ -38,11 +39,14 @@ class FilePage extends React.PureComponent {
 
   player = null;
 
+  startTime = null;
+
   constructor(props) {
     super(props);
     this.state = {
+      fileViewLogged: false,
       mediaLoaded: false,
-      autoplayMedia: false,
+      autoPlayMedia: false,
       downloadButtonShown: false,
       downloadPressed: false,
       fullscreenMode: false,
@@ -73,7 +77,7 @@ class FilePage extends React.PureComponent {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     this.fetchFileInfo(this.props);
     const { isResolvingUri, resolveUri, claim, navigation } = this.props;
     const { uri } = navigation.state.params;
@@ -81,6 +85,18 @@ class FilePage extends React.PureComponent {
     if (!isResolvingUri && claim === undefined && uri) {
       resolveUri(uri);
     }
+
+    const prevFileInfo = prevProps.fileInfo;
+    const { fileInfo, contentType } = this.props;
+    if (!prevFileInfo && fileInfo) {
+      // started downloading
+      const mediaType = Lbry.getMediaType(contentType);
+      const isPlayable = mediaType === 'video' || mediaType === 'audio';
+      // If the media is playable, file/view will be done in onPlaybackStarted
+      if (!isPlayable && !this.state.fileViewLogged) {
+        this.logFileView(uri, fileInfo);
+      }
+    }
   }
 
   fetchFileInfo(props) {
@@ -127,7 +143,7 @@ class FilePage extends React.PureComponent {
         { text: 'No' },
         { text: 'Yes', onPress: () => {
           deleteFile(fileInfo.outpoint, true);
-          this.setState({ downloadPressed: false, mediaLoaded: false });
+          this.setState({ downloadPressed: false, fileViewLogged: false, mediaLoaded: false });
         }}
       ],
       { cancelable: true }
@@ -144,7 +160,7 @@ class FilePage extends React.PureComponent {
         { text: 'No' },
         { text: 'Yes', onPress: () => {
           stopDownload(navigation.state.params.uri, fileInfo);
-          this.setState({ downloadPressed: false, mediaLoaded: false });
+          this.setState({ downloadPressed: false, fileViewLogged: false, mediaLoaded: false });
         } }
       ],
       { cancelable: true }
@@ -220,6 +236,49 @@ class FilePage extends React.PureComponent {
     }
   }
 
+  onMediaLoaded = (title, channelName) => {
+    this.setState({ mediaLoaded: true });
+    window.currentMediaInfo = {
+      title: title,
+      channel: channelName
+    };
+  }
+
+  onPlaybackStarted = () => {
+    let timeToStartMillis, timeToStart;
+    if (this.startTime) {
+      timeToStartMillis = Date.now() - this.startTime;
+      timeToStart = Math.ceil(timeToStartMillis / 1000);
+      this.startTime = null;
+    }
+
+    const { fileInfo, navigation } = this.props;
+    const { uri } = navigation.state.params;
+    this.logFileView(uri, fileInfo, timeToStartMillis);
+
+    let payload = { 'Uri': uri };
+    if (!isNaN(timeToStart)) {
+      payload['Time to Start (seconds)'] = timeToStart;
+      payload['Time to Start (ms)'] = timeToStartMillis;
+    }
+    NativeModules.Mixpanel.track('Play', payload);
+  }
+
+  logFileView = (uri, fileInfo, timeToStart) => {
+    const { outpoint, claim_id: claimId } = fileInfo;
+    const params = {
+      uri,
+      outpoint,
+      claim_id: claimId
+    };
+    if (!isNaN(timeToStart)) {
+      params.time_to_start = timeToStart;
+    }
+
+    Lbryio.call('file', 'view', params).catch(() => {});
+    this.setState({ fileViewLogged: true });
+  }
+
   render() {
     const {
       claim,
@@ -320,7 +379,10 @@ class FilePage extends React.PureComponent {
                                       style={filePageStyle.downloadButton}
                                       openFile={openFile}
                                       isPlayable={isPlayable}
-                                      onPlay={() => this.setState({ downloadPressed: true, autoPlayMedia: true })}
+                                      onPlay={() => {
+                                        this.startTime = Date.now();
+                                        this.setState({ downloadPressed: true, autoPlayMedia: true });
+                                      }}
                                       onButtonLayout={() => this.setState({ downloadButtonShown: true })} />}
                 {!fileInfo && <FilePrice uri={uri} style={filePageStyle.filePriceContainer} textStyle={filePageStyle.filePriceText} />}
               </View>
@@ -331,25 +393,21 @@ class FilePage extends React.PureComponent {
                                                     this.setState({ playerBgHeight: evt.nativeEvent.layout.height });
                                                   }
                                                 }} />}
-              {canLoadMedia && fileInfo && <MediaPlayer fileInfo={fileInfo}
+              {canLoadMedia && fileInfo && <MediaPlayer
-                                                        ref={(ref) => { this.player = ref; }}
+                                             fileInfo={fileInfo}
-                                                        uri={uri}
+                                             ref={(ref) => { this.player = ref; }}
-                                                        style={playerStyle}
+                                             uri={uri}
-                                                        autoPlay={this.state.autoPlayMedia}
+                                             style={playerStyle}
-                                                        onFullscreenToggled={this.handleFullscreenToggle}
+                                             autoPlay={this.state.autoPlayMedia}
-                                                        onMediaLoaded={() => {
+                                             onFullscreenToggled={this.handleFullscreenToggle}
-                                                          this.setState({ mediaLoaded: true });
+                                             onLayout={(evt) => {
-                                                          window.currentMediaInfo = {
+                                               if (!this.state.playerHeight) {
-                                                            title: title,
+                                                 this.setState({ playerHeight: evt.nativeEvent.layout.height });
-                                                            channel: channelName
+                                               }
-                                                          };
+                                             }}
-                                                        }}
+                                             onMediaLoaded={() => this.onMediaLoaded(title, channelName)}
-                                                        onLayout={(evt) => {
+                                             onPlaybackStarted={this.onPlaybackStarted}
-                                                          if (!this.state.playerHeight) {
+                                            />}
-                                                            this.setState({ playerHeight: evt.nativeEvent.layout.height });
-                                                          }
-                                                        }}
-                                                        />}
 
               { showActions &&
               <View style={filePageStyle.actions}>

app/src/redux/actions/file.js

@@ -9,7 +9,7 @@ import {
     makeSelectMetadataForUri,
     selectDownloadingByOutpoint,
 } from 'lbry-redux';
-import { Lbryio, doClaimEligiblePurchaseRewards } from 'lbryinc';
+import { doClaimEligiblePurchaseRewards } from 'lbryinc';
 import { Alert, NativeModules } from 'react-native';
 import Constants from '../../constants';
 
@@ -140,16 +140,8 @@ export function doStopDownloadingFile(uri, fileInfo) {
 
 export function doDownloadFile(uri, streamInfo) {
   return dispatch => {
-    const { outpoint, claim_id: claimId } = streamInfo;
+    const { outpoint } = streamInfo;
     dispatch(doStartDownload(uri, outpoint));
-
-    // log the view
-    Lbryio.call('file', 'view', {
-      uri,
-      outpoint,
-      claim_id: claimId
-    }).catch(() => {});
-
     dispatch(doClaimEligiblePurchaseRewards());
   };
 }