fix time to start analytics for desktop and fix rewards link

This commit is contained in:
Sean Yesmunt 2020-05-05 14:02:12 -04:00
parent 5d0e7af049
commit 96d9e24a4b
6 changed files with 48 additions and 6 deletions

View file

@ -1199,5 +1199,6 @@
"For video content, use MP4s in H264/AAC format and a friendly bitrate (under 5 mbps) and resolution (720p) for more reliable streaming.": "For video content, use MP4s in H264/AAC format and a friendly bitrate (under 5 mbps) and resolution (720p) for more reliable streaming.", "For video content, use MP4s in H264/AAC format and a friendly bitrate (under 5 mbps) and resolution (720p) for more reliable streaming.": "For video content, use MP4s in H264/AAC format and a friendly bitrate (under 5 mbps) and resolution (720p) for more reliable streaming.",
"this channel": "this channel", "this channel": "this channel",
"Share this channel": "Share this channel", "Share this channel": "Share this channel",
"File preview": "File preview" "File preview": "File preview",
"Go Home": "Go Home"
} }

View file

@ -32,6 +32,7 @@ type Props = {
autoplay: boolean, autoplay: boolean,
renderMode: string, renderMode: string,
thumbnail: string, thumbnail: string,
desktopPlayStartTime?: number,
}; };
class FileRender extends React.PureComponent<Props> { class FileRender extends React.PureComponent<Props> {
@ -64,13 +65,29 @@ class FileRender extends React.PureComponent<Props> {
} }
renderViewer() { renderViewer() {
const { currentTheme, contentType, downloadPath, fileExtension, streamingUrl, uri, renderMode } = this.props; const {
currentTheme,
contentType,
downloadPath,
fileExtension,
streamingUrl,
uri,
renderMode,
desktopPlayStartTime,
} = this.props;
const source = streamingUrl; const source = streamingUrl;
switch (renderMode) { switch (renderMode) {
case RENDER_MODES.AUDIO: case RENDER_MODES.AUDIO:
case RENDER_MODES.VIDEO: case RENDER_MODES.VIDEO:
return <VideoViewer uri={uri} source={source} contentType={contentType} />; return (
<VideoViewer
uri={uri}
source={source}
contentType={contentType}
desktopPlayStartTime={desktopPlayStartTime}
/>
);
case RENDER_MODES.IMAGE: case RENDER_MODES.IMAGE:
return <ImageViewer uri={uri} source={source} />; return <ImageViewer uri={uri} source={source} />;
case RENDER_MODES.HTML: case RENDER_MODES.HTML:

View file

@ -40,6 +40,7 @@ export default function FileRenderFloating(props: Props) {
} = props; } = props;
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const [fileViewerRect, setFileViewerRect] = useState(); const [fileViewerRect, setFileViewerRect] = useState();
const [desktopPlayStartTime, setDesktopPlayStartTime] = useState();
const [position, setPosition] = usePersistedState('floating-file-viewer:position', { const [position, setPosition] = usePersistedState('floating-file-viewer:position', {
x: -25, x: -25,
y: window.innerHeight - 400, y: window.innerHeight - 400,
@ -73,6 +74,12 @@ export default function FileRenderFloating(props: Props) {
}; };
}, [setFileViewerRect, isFloating]); }, [setFileViewerRect, isFloating]);
useEffect(() => {
// @if TARGET='app'
setDesktopPlayStartTime(Date.now());
// @endif
}, [uri]);
if (!isPlayable || !uri || (isFloating && (isMobile || !floatingPlayerEnabled))) { if (!isPlayable || !uri || (isFloating && (isMobile || !floatingPlayerEnabled))) {
return null; return null;
} }
@ -134,7 +141,16 @@ export default function FileRenderFloating(props: Props) {
</div> </div>
)} )}
{isReadyToPlay ? <FileRender uri={uri} /> : <LoadingScreen status={loadingMessage} />} {isReadyToPlay ? (
<FileRender
uri={uri}
// @if TARGET='app'
desktopPlayStartTime={desktopPlayStartTime}
// @endif
/>
) : (
<LoadingScreen status={loadingMessage} />
)}
{isFloating && ( {isFloating && (
<div className="draggable content__info"> <div className="draggable content__info">
<div className="claim-preview__title" title={title || uri}> <div className="claim-preview__title" title={title || uri}>

View file

@ -73,7 +73,7 @@ function InviteNew(props: Props) {
<div className={'columns'}> <div className={'columns'}>
<Card <Card
title={__('Invite Link')} title={__('Invite Link')}
subtitle={__('Share this link with friends (or enemies) and get LBC when they join lbry.tv')} subtitle={__('Share this link with friends (or enemies) and earn LBC when they join lbry.tv')}
actions={ actions={
<React.Fragment> <React.Fragment>
<CopyableText label={__('Your invite link')} copyable={referral} /> <CopyableText label={__('Your invite link')} copyable={referral} />

View file

@ -31,6 +31,7 @@ function RewardAuthIntro(props: Props) {
} }
actions={ actions={
<Button <Button
requiresAuth
button="primary" button="primary"
navigate={`/$/${PAGES.REWARDS_VERIFY}?redirect=/$/${PAGES.REWARDS}`} navigate={`/$/${PAGES.REWARDS_VERIFY}?redirect=/$/${PAGES.REWARDS}`}
label={__('Unlock Rewards')} label={__('Unlock Rewards')}

View file

@ -29,6 +29,7 @@ type Props = {
uri: string, uri: string,
autoplaySetting: boolean, autoplaySetting: boolean,
autoplayIfEmbedded: boolean, autoplayIfEmbedded: boolean,
desktopPlayStartTime?: number,
doAnalyticsView: (string, number) => Promise<any>, doAnalyticsView: (string, number) => Promise<any>,
claimRewards: () => void, claimRewards: () => void,
savePosition: (string, number) => void, savePosition: (string, number) => void,
@ -56,6 +57,7 @@ function VideoViewer(props: Props) {
doAnalyticsView, doAnalyticsView,
claimRewards, claimRewards,
savePosition, savePosition,
desktopPlayStartTime,
} = props; } = props;
const claimId = claim && claim.claim_id; const claimId = claim && claim.claim_id;
const isAudio = contentType.includes('audio'); const isAudio = contentType.includes('audio');
@ -85,7 +87,12 @@ function VideoViewer(props: Props) {
} }
function doTrackingFirstPlay(e: Event, data: any) { function doTrackingFirstPlay(e: Event, data: any) {
const timeToStartInMs = data.secondsToLoad * 1000; let timeToStartInMs = data.secondsToLoad * 1000;
if (desktopPlayStartTime !== undefined) {
const differenceToAdd = Date.now() - desktopPlayStartTime;
timeToStartInMs += differenceToAdd;
}
analytics.videoStartEvent(claimId, timeToStartInMs); analytics.videoStartEvent(claimId, timeToStartInMs);
doAnalyticsView(uri, timeToStartInMs).then(() => { doAnalyticsView(uri, timeToStartInMs).then(() => {
claimRewards(); claimRewards();