From a23dcd1aa2374e2cf9aab1c124a0942b632cf2cf Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Thu, 30 Aug 2018 12:43:18 +0100 Subject: [PATCH 1/3] add time to start (in seconds) to Play track event for new downloads --- app/src/component/mediaPlayer/view.js | 5 +- app/src/page/file/view.js | 68 ++++++++++++++++++--------- 2 files changed, 49 insertions(+), 24 deletions(-) diff --git a/app/src/component/mediaPlayer/view.js b/app/src/component/mediaPlayer/view.js index 2caafc31..6033f2d5 100644 --- a/app/src/component/mediaPlayer/view.js +++ b/app/src/component/mediaPlayer/view.js @@ -93,9 +93,8 @@ class MediaPlayer extends React.PureComponent { } if (this.state.firstPlay) { - if (NativeModules.Mixpanel) { - const { uri } = this.props; - NativeModules.Mixpanel.track('Play', { Uri: uri }); + if (this.props.onPlaybackStarted) { + this.props.onPlaybackStarted(); } this.setState({ firstPlay: false }); this.hidePlayerControls(); diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js index e165411d..2d49ce93 100644 --- a/app/src/page/file/view.js +++ b/app/src/page/file/view.js @@ -38,11 +38,13 @@ class FilePage extends React.PureComponent { player = null; + startTime = null; + constructor(props) { super(props); this.state = { mediaLoaded: false, - autoplayMedia: false, + autoPlayMedia: false, downloadButtonShown: false, downloadPressed: false, fullscreenMode: false, @@ -220,6 +222,31 @@ class FilePage extends React.PureComponent { } } + onMediaLoaded = (title, channelName) => { + this.setState({ mediaLoaded: true }); + window.currentMediaInfo = { + title: title, + channel: channelName + }; + } + + onPlaybackStarted = () => { + let timeToStart = null; + if (this.startTime) { + timeToStart = Math.ceil((Date.now() - this.startTime) / 1000); + this.startTime = null; + } + + const { navigation } = this.props; + const { uri } = navigation.state.params; + let payload = { 'Uri': uri }; + if (!isNaN(timeToStart)) { + payload['Time to Start (seconds)'] = timeToStart; + } + + NativeModules.Mixpanel.track('Play', payload); + } + render() { const { claim, @@ -320,7 +347,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 && } @@ -331,25 +361,21 @@ class FilePage extends React.PureComponent { this.setState({ playerBgHeight: evt.nativeEvent.layout.height }); } }} />} - {canLoadMedia && fileInfo && { this.player = ref; }} - uri={uri} - style={playerStyle} - autoPlay={this.state.autoPlayMedia} - onFullscreenToggled={this.handleFullscreenToggle} - onMediaLoaded={() => { - this.setState({ mediaLoaded: true }); - window.currentMediaInfo = { - title: title, - channel: channelName - }; - }} - onLayout={(evt) => { - if (!this.state.playerHeight) { - this.setState({ playerHeight: evt.nativeEvent.layout.height }); - } - }} - />} + {canLoadMedia && fileInfo && { this.player = ref; }} + uri={uri} + style={playerStyle} + autoPlay={this.state.autoPlayMedia} + onFullscreenToggled={this.handleFullscreenToggle} + onLayout={(evt) => { + if (!this.state.playerHeight) { + this.setState({ playerHeight: evt.nativeEvent.layout.height }); + } + }} + onMediaLoaded={() => this.onMediaLoaded(title, channelName)} + onPlaybackStarted={this.onPlaybackStarted} + />} { showActions && -- 2.45.3 From 3044e0870ffe417749aa5db6f7ba3446a386795f Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Thu, 30 Aug 2018 15:17:14 +0100 Subject: [PATCH 2/3] send time_to_start parameter with file/view call --- app/src/page/file/view.js | 46 +++++++++++++++++++++++++++++------ app/src/redux/actions/file.js | 10 +------- 2 files changed, 40 insertions(+), 16 deletions(-) diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js index 2d49ce93..0361a67b 100644 --- a/app/src/page/file/view.js +++ b/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, @@ -43,6 +44,7 @@ class FilePage extends React.PureComponent { constructor(props) { super(props); this.state = { + fileViewLogged: false, mediaLoaded: false, autoPlayMedia: false, downloadButtonShown: false, @@ -75,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; @@ -83,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) { @@ -129,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 } @@ -146,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 } @@ -231,20 +245,38 @@ class FilePage extends React.PureComponent { } onPlaybackStarted = () => { - let timeToStart = null; + let timeToStartMillis, timeToStart; if (this.startTime) { - timeToStart = Math.ceil((Date.now() - this.startTime) / 1000); + timeToStartMillis = Date.now() - this.startTime; + timeToStart = Math.ceil(timeToStartMillis / 1000); this.startTime = null; } - const { navigation } = this.props; + 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; } - NativeModules.Mixpanel.track('Play', payload); + Lbryio.call('file', 'view', params).catch(() => {}); + this.setState({ fileViewLogged: true }); } render() { diff --git a/app/src/redux/actions/file.js b/app/src/redux/actions/file.js index 06a95556..871e9059 100644 --- a/app/src/redux/actions/file.js +++ b/app/src/redux/actions/file.js @@ -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()); }; } -- 2.45.3 From 0ec42f99e5f02bc12c7964aa72a1293090c9c1bf Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Thu, 30 Aug 2018 15:41:42 +0100 Subject: [PATCH 3/3] remove unused import --- app/src/redux/actions/file.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/redux/actions/file.js b/app/src/redux/actions/file.js index 871e9059..ec10e47c 100644 --- a/app/src/redux/actions/file.js +++ b/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'; -- 2.45.3