fix viewcount being fired before video starts playing

ui/component/fileRender/view.jsx

@@ -38,6 +38,7 @@ type Props = {
   currentlyFloating: boolean,
   renderMode: string,
   thumbnail: string,
+  onStartedCallback: () => void,
 };
 
 type State = {
@@ -58,6 +59,7 @@ class FileRender extends React.PureComponent<Props, State> {
     (this: any).onEndedAutoplay = this.onEndedAutoplay.bind(this);
     (this: any).onEndedEmbedded = this.onEndedEmbedded.bind(this);
     (this: any).getOnEndedCb = this.getOnEndedCb.bind(this);
+    (this: any).onStartedCb = this.onStartedCb.bind(this);
   }
 
   componentDidMount() {
@@ -82,6 +84,14 @@ class FileRender extends React.PureComponent<Props, State> {
     remote.getCurrentWindow().setFullScreen(false);
   }
 
+  onStartedCb() {
+    const { onStartedCallback } = this.props;
+
+    if (onStartedCallback) {
+      onStartedCallback();
+    }
+  }
+
   getOnEndedCb() {
     const { setPlayingUri, currentlyFloating, embedded } = this.props;
 
@@ -114,7 +124,15 @@ class FileRender extends React.PureComponent<Props, State> {
     switch (renderMode) {
       case RENDER_MODES.AUDIO:
       case RENDER_MODES.VIDEO:
-        return <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.getOnEndedCb()} />;
+        return (
+          <VideoViewer
+            uri={uri}
+            source={source}
+            contentType={contentType}
+            onEndedCb={this.getOnEndedCb()}
+            onStartedCb={this.onStartedCb}
+          />
+        );
       case RENDER_MODES.IMAGE:
         return <ImageViewer uri={uri} source={source} />;
       case RENDER_MODES.HTML:
@@ -140,7 +158,17 @@ class FileRender extends React.PureComponent<Props, State> {
       case RENDER_MODES.PDF:
         return <PdfViewer source={downloadPath || source} />;
       case RENDER_MODES.CAD:
-        return <ThreeViewer source={{ fileExtension, downloadPath }} theme={currentTheme} />;
+        return (
+          <ThreeViewer
+            source={{
+              fileExtension,
+              downloadPath,
+              // ThreeViewer stopped working here https://github.com/lbryio/lbry-desktop/pull/3918/files#diff-440a978a7dea2b088abd77a26fdae9b8L129
+              // It requires `fileType`
+            }}
+            theme={currentTheme}
+          />
+        );
       case RENDER_MODES.COMIC:
         return <ComicBookViewer source={{ fileExtension, downloadPath }} theme={currentTheme} />;
       case RENDER_MODES.APPLICATION:

ui/component/viewers/documentViewer.jsx

@@ -14,7 +14,6 @@ type Props = {
   source: {
     file: (?string) => any,
     stream: string,
-    fileType: string,
     contentType: string,
   },
 };

ui/component/viewers/videoViewer/view.jsx

@@ -53,16 +53,18 @@ type Props = {
   contentType: string,
   thumbnail: string,
   hasFileInfo: boolean,
-  onEndedCB: any,
   claim: Claim,
   autoplayParam: ?boolean,
+  onStartedCb: () => void,
+  onEndedCb: () => void,
 };
 
 function VideoViewer(props: Props) {
   const {
     contentType,
     source,
-    onEndedCB,
+    onEndedCb,
+    onStartedCb,
     changeVolume,
     changeMute,
     volume,
@@ -97,7 +99,11 @@ function VideoViewer(props: Props) {
     }
 
     function doEnded() {
-      onEndedCB();
+      onEndedCb();
+    }
+
+    function doStarted() {
+      onStartedCb();
     }
 
     function doPause(e: Event) {
@@ -112,6 +118,7 @@ function VideoViewer(props: Props) {
     }
 
     if (currentVideo) {
+      currentVideo.addEventListener('play', doStarted);
       currentVideo.addEventListener('ended', doEnded);
       currentVideo.addEventListener('pause', doPause);
       currentVideo.addEventListener('volumechange', doVolume);
@@ -119,12 +126,13 @@ function VideoViewer(props: Props) {
     // cleanup function:
     return () => {
       if (currentVideo) {
+        currentVideo.removeEventListener('play', doStarted);
         currentVideo.removeEventListener('ended', doEnded);
         currentVideo.removeEventListener('pause', doPause);
         currentVideo.removeEventListener('volumechange', doVolume);
       }
     };
-  }, [changeMute, changeVolume, onEndedCB]);
+  }, [changeMute, changeVolume, onStartedCb, onEndedCb]);
 
   useEffect(() => {
     const { current: videoNode } = videoRef;

ui/page/embedWrapper/view.jsx

@@ -14,13 +14,13 @@ const EmbedWrapperPage = (props: Props) => {
   const { resolveUri, claim, uri, triggerAnalyticsView } = props;
   const [hasRecordedView, setHasRecordedView] = useState(false);
 
-  useEffect(() => {
+  function onStartedCallback() {
     if (!hasRecordedView && uri && claim) {
       triggerAnalyticsView(uri).then(() => {
-        setHasRecordedView(false);
+        setHasRecordedView(true);
       });
     }
-  }, [triggerAnalyticsView, setHasRecordedView, hasRecordedView, uri, claim]);
+  }
 
   useEffect(() => {
     if (resolveUri && uri) {
@@ -32,7 +32,7 @@ const EmbedWrapperPage = (props: Props) => {
     <div className={'embed__wrapper'}>
       {claim && (
         <EmbedContext.Provider value>
-          <FileRender uri={uri} embedded />
+          <FileRender uri={uri} embedded onStartedCallback={onStartedCallback} />
         </EmbedContext.Provider>
       )}
     </div>