trigger file/view event for livestream claims

ui/component/fileSubtitle/view.jsx

@@ -8,21 +8,18 @@ type Props = {
   uri: string,
   livestream?: boolean,
   activeViewers?: number,
-  stateOfViewers: string,
+  isLive?: boolean,
 };
 
 function FileSubtitle(props: Props) {
-  const { uri, livestream = false, activeViewers = 0, stateOfViewers } = props;
+  const { uri, livestream = false, activeViewers, isLive = false } = props;
 
   return (
     <div className="media__subtitle--between">
       <div className="file__viewdate">
         {livestream ? <span>{__('Right now')}</span> : <DateTime uri={uri} show={DateTime.SHOW_DATE} />}
-        {livestream ? (
-          <span>{__('%viewer_count% currently %viewer_state%', { viewer_count: activeViewers, viewer_state: stateOfViewers })}</span>
-        ) : (
-          <FileViewCount uri={uri} />
-        )}
+
+        <FileViewCount uri={uri} livestream={livestream} activeViewers={activeViewers} isLive={isLive} />
       </div>
 
       <FileActions uri={uri} />

ui/component/fileTitleSection/view.jsx

@@ -20,12 +20,12 @@ type Props = {
   nsfw: boolean,
   isNsfwBlocked: boolean,
   livestream?: boolean,
+  isLive?: boolean,
   activeViewers?: number,
-  stateOfViewers: string,
 };
 
 function FileTitleSection(props: Props) {
-  const { title, uri, nsfw, isNsfwBlocked, livestream = false, activeViewers, stateOfViewers } = props;
+  const { title, uri, nsfw, isNsfwBlocked, livestream = false, isLive = false, activeViewers } = props;
   const [hasAcknowledgedSec, setHasAcknowledgedSec] = usePersistedState('sec-nag', false);
 
   return (
@@ -35,9 +35,7 @@ function FileTitleSection(props: Props) {
           <Button button="close" icon={ICONS.REMOVE} onClick={() => setHasAcknowledgedSec(true)} />
           <h1 className="section__title">{__('Help LBRY Save Crypto')}</h1>
           <p className="section__subtitle">
-            {__(
-              'The US government is attempting to destroy the cryptocurrency industry. Can you help?'
-            )}{' '}
+            {__('The US government is attempting to destroy the cryptocurrency industry. Can you help?')}{' '}
             <Button label={__('Learn more and sign petition')} button="link" href="https://helplbrysavecrypto.com" />
           </p>
         </div>
@@ -59,12 +57,7 @@ function FileTitleSection(props: Props) {
         body={
           <React.Fragment>
             <ClaimInsufficientCredits uri={uri} />
-            <FileSubtitle
-              uri={uri}
-              livestream={livestream}
-              activeViewers={activeViewers}
-              stateOfViewers={stateOfViewers}
-            />
+            <FileSubtitle uri={uri} isLive={isLive} livestream={livestream} activeViewers={activeViewers} />
           </React.Fragment>
         }
         actions={

ui/component/fileViewCount/index.js

@@ -1,15 +1,17 @@
 import { connect } from 'react-redux';
-import { doFetchViewCount, makeSelectViewCountForUri } from 'lbryinc';
-import FileViewCount from './view';
 import { makeSelectClaimForUri } from 'lbry-redux';
+import { doFetchViewCount, makeSelectViewCountForUri } from 'lbryinc';
+import { doAnalyticsView } from 'redux/actions/app';
+import FileViewCount from './view';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
   viewCount: makeSelectViewCountForUri(props.uri)(state),
 });
 
-const perform = dispatch => ({
-  fetchViewCount: claimId => dispatch(doFetchViewCount(claimId)),
+const perform = (dispatch) => ({
+  fetchViewCount: (claimId) => dispatch(doFetchViewCount(claimId)),
+  doAnalyticsView: (uri) => dispatch(doAnalyticsView(uri)),
 });
 
 export default connect(select, perform)(FileViewCount);

ui/component/fileViewCount/view.jsx

@@ -1,19 +1,32 @@
 // @flow
-import React, { useEffect } from 'react';
+import { SIMPLE_SITE } from 'config';
+import React from 'react';
 import HelpLink from 'component/common/help-link';
 
 type Props = {
   claim: ?StreamClaim,
-  fetchViewCount: string => void,
+  fetchViewCount: (string) => void,
   uri: string,
   viewCount: string,
+  livestream?: boolean,
+  activeViewers?: number,
+  isLive?: boolean,
+  doAnalyticsView: (string) => void,
 };
 
 function FileViewCount(props: Props) {
-  const { claim, uri, fetchViewCount, viewCount } = props;
+  const { claim, uri, fetchViewCount, viewCount, livestream, activeViewers, isLive = false, doAnalyticsView } = props;
   const claimId = claim && claim.claim_id;
 
-  useEffect(() => {
+  React.useEffect(() => {
+    if (livestream) {
+      // Regular claims will call the file/view event when a user actually watches the claim
+      // This can be removed when we get rid of the livestream iframe
+      doAnalyticsView(uri);
+    }
+  }, [livestream, doAnalyticsView, uri]);
+
+  React.useEffect(() => {
     if (claimId) {
       fetchViewCount(claimId);
     }
@@ -23,8 +36,15 @@ function FileViewCount(props: Props) {
 
   return (
     <span className="media__subtitle--centered">
-      {viewCount !== 1 ? __('%view_count% views', { view_count: formattedViewCount }) : __('1 view')}
-      <HelpLink href="https://lbry.com/faq/views" />
+      {activeViewers !== undefined
+        ? __('%viewer_count% currently %viewer_state%', {
+            viewer_count: activeViewers,
+            viewer_state: isLive ? __('watching') : __('waiting'),
+          })
+        : viewCount !== 1
+        ? __('%view_count% views', { view_count: formattedViewCount })
+        : __('1 view')}
+      {!SIMPLE_SITE && <HelpLink href="https://lbry.com/faq/views" />}
     </span>
   );
 }

ui/component/livestreamLayout/view.jsx

@@ -41,13 +41,7 @@ export default function LivestreamLayout(props: Props) {
             })}
           </div>
         )}
-        <FileTitleSection
-          uri={uri}
-          livestream
-          isLive={isLive}
-          activeViewers={activeViewers}
-          stateOfViewers={isLive ? __('watching') : __('waiting')}
-        />
+        <FileTitleSection uri={uri} livestream isLive={isLive} activeViewers={activeViewers} />
       </div>
       <LivestreamComments uri={uri} />
     </>