Support videos stats in client

2 files changed, 67 insertions, 71 deletions

diff --git a/client/src/assets/player/shared/manager-options/manager-options-builder.ts b/client/src/assets/player/shared/manager-options/manager-options-builder.ts
index 29e851c1c..e454c719e 100644
--- a/client/src/assets/player/shared/manager-options/manager-options-builder.ts
+++ b/client/src/assets/player/shared/manager-options/manager-options-builder.ts
@@ -32,14 +32,18 @@ export class ManagerOptionsBuilder {
       peertube: {
         mode: this.mode,
         autoplay, // Use peertube plugin autoplay because we could get the file by webtorrent
-        videoViewUrl: commonOptions.videoViewUrl,
-        videoDuration: commonOptions.videoDuration,
-        userWatching: commonOptions.userWatching,
-        subtitle: commonOptions.subtitle,
-        videoCaptions: commonOptions.videoCaptions,
-        stopTime: commonOptions.stopTime,
-        isLive: commonOptions.isLive,
-        videoUUID: commonOptions.videoUUID
+
+        ...pick(commonOptions, [
+          'videoViewUrl',
+          'authorizationHeader',
+          'startTime',
+          'videoDuration',
+          'subtitle',
+          'videoCaptions',
+          'stopTime',
+          'isLive',
+          'videoUUID'
+        ])
       }
     }
 
diff --git a/client/src/assets/player/shared/peertube/peertube-plugin.ts b/client/src/assets/player/shared/peertube/peertube-plugin.ts
index 1dc3e3de0..8b65903f9 100644
--- a/client/src/assets/player/shared/peertube/peertube-plugin.ts
+++ b/client/src/assets/player/shared/peertube/peertube-plugin.ts
@@ -2,6 +2,7 @@ import debug from 'debug'
 import videojs from 'video.js'
 import { isMobile } from '@root-helpers/web-browser'
 import { timeToInt } from '@shared/core-utils'
+import { VideoView, VideoViewEvent } from '@shared/models/videos'
 import {
   getStoredLastSubtitle,
   getStoredMute,
@@ -11,7 +12,7 @@ import {
   saveVideoWatchHistory,
   saveVolumeInStore
 } from '../../peertube-player-local-storage'
-import { PeerTubePluginOptions, UserWatching, VideoJSCaption } from '../../types'
+import { PeerTubePluginOptions, VideoJSCaption } from '../../types'
 import { SettingsButton } from '../settings/settings-menu-button'
 
 const logger = debug('peertube:player:peertube')
@@ -20,18 +21,19 @@ const Plugin = videojs.getPlugin('plugin')
 
 class PeerTubePlugin extends Plugin {
   private readonly videoViewUrl: string
-  private readonly videoDuration: number
+  private readonly authorizationHeader: string
+
+  private readonly videoUUID: string
+  private readonly startTime: number
+
   private readonly CONSTANTS = {
-    USER_WATCHING_VIDEO_INTERVAL: 5000 // Every 5 seconds, notify the user is watching the video
+    USER_VIEW_VIDEO_INTERVAL: 5000 // Every 5 seconds, notify the user is watching the video
   }
 
   private videoCaptions: VideoJSCaption[]
   private defaultSubtitle: string
 
   private videoViewInterval: any
-  private userWatchingVideoInterval: any
-
-  private isLive: boolean
 
   private menuOpened = false
   private mouseInControlBar = false
@@ -42,9 +44,11 @@ class PeerTubePlugin extends Plugin {
     super(player)
 
     this.videoViewUrl = options.videoViewUrl
-    this.videoDuration = options.videoDuration
+    this.authorizationHeader = options.authorizationHeader
+    this.videoUUID = options.videoUUID
+    this.startTime = timeToInt(options.startTime)
+
     this.videoCaptions = options.videoCaptions
-    this.isLive = options.isLive
     this.initialInactivityTimeout = this.player.options_.inactivityTimeout
 
     if (options.autoplay) this.player.addClass('vjs-has-autoplay')
@@ -101,15 +105,12 @@ class PeerTubePlugin extends Plugin {
       this.player.duration(options.videoDuration)
 
       this.initializePlayer()
-      this.runViewAdd()
-
-      this.runUserWatchVideo(options.userWatching, options.videoUUID)
+      this.runUserViewing()
     })
   }
 
   dispose () {
     if (this.videoViewInterval) clearInterval(this.videoViewInterval)
-    if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
   }
 
   onMenuOpened () {
@@ -142,74 +143,65 @@ class PeerTubePlugin extends Plugin {
     this.listenFullScreenChange()
   }
 
-  private runViewAdd () {
-    this.clearVideoViewInterval()
+  private runUserViewing () {
+    let lastCurrentTime = this.startTime
+    let lastViewEvent: VideoViewEvent
 
-    // After 30 seconds (or 3/4 of the video), add a view to the video
-    let minSecondsToView = 30
+    this.player.one('play', () => {
+      this.notifyUserIsWatching(this.startTime, lastViewEvent)
+    })
 
-    if (!this.isLive && this.videoDuration < minSecondsToView) {
-      minSecondsToView = (this.videoDuration * 3) / 4
-    }
+    this.player.on('seeked', () => {
+      // Don't take into account small seek events
+      if (Math.abs(this.player.currentTime() - lastCurrentTime) < 3) return
 
-    let secondsViewed = 0
-    this.videoViewInterval = setInterval(() => {
-      if (this.player && !this.player.paused()) {
-        secondsViewed += 1
-
-        if (secondsViewed > minSecondsToView) {
-          // Restart the loop if this is a live
-          if (this.isLive) {
-            secondsViewed = 0
-          } else {
-            this.clearVideoViewInterval()
-          }
+      lastViewEvent = 'seek'
+    })
 
-          this.addViewToVideo().catch(err => console.error(err))
-        }
-      }
-    }, 1000)
-  }
+    this.player.one('ended', () => {
+      const currentTime = Math.floor(this.player.duration())
+      lastCurrentTime = currentTime
 
-  private runUserWatchVideo (options: UserWatching, videoUUID: string) {
-    let lastCurrentTime = 0
+      this.notifyUserIsWatching(currentTime, lastViewEvent)
 
-    this.userWatchingVideoInterval = setInterval(() => {
+      lastViewEvent = undefined
+    })
+
+    this.videoViewInterval = setInterval(() => {
       const currentTime = Math.floor(this.player.currentTime())
 
-      if (currentTime - lastCurrentTime >= 1) {
-        lastCurrentTime = currentTime
+      // No need to update
+      if (currentTime === lastCurrentTime) return
 
-        if (options) {
-          this.notifyUserIsWatching(currentTime, options.url, options.authorizationHeader)
-            .catch(err => console.error('Cannot notify user is watching.', err))
-        } else {
-          saveVideoWatchHistory(videoUUID, currentTime)
-        }
-      }
-    }, this.CONSTANTS.USER_WATCHING_VIDEO_INTERVAL)
-  }
+      lastCurrentTime = currentTime
 
-  private clearVideoViewInterval () {
-    if (this.videoViewInterval !== undefined) {
-      clearInterval(this.videoViewInterval)
-      this.videoViewInterval = undefined
-    }
+      this.notifyUserIsWatching(currentTime, lastViewEvent)
+        .catch(err => console.error('Cannot notify user is watching.', err))
+
+      lastViewEvent = undefined
+
+      // Server won't save history, so save the video position in local storage
+      if (!this.authorizationHeader) {
+        saveVideoWatchHistory(this.videoUUID, currentTime)
+      }
+    }, this.CONSTANTS.USER_VIEW_VIDEO_INTERVAL)
   }
 
-  private addViewToVideo () {
+  private notifyUserIsWatching (currentTime: number, viewEvent: VideoViewEvent) {
     if (!this.videoViewUrl) return Promise.resolve(undefined)
 
-    return fetch(this.videoViewUrl, { method: 'POST' })
-  }
+    const body: VideoView = {
+      currentTime,
+      viewEvent
+    }
 
-  private notifyUserIsWatching (currentTime: number, url: string, authorizationHeader: string) {
-    const body = new URLSearchParams()
-    body.append('currentTime', currentTime.toString())
+    const headers = new Headers({
+      'Content-type': 'application/json; charset=UTF-8'
+    })
 
-    const headers = new Headers({ Authorization: authorizationHeader })
+    if (this.authorizationHeader) headers.set('Authorization', this.authorizationHeader)
 
-    return fetch(url, { method: 'PUT', body, headers })
+    return fetch(this.videoViewUrl, { method: 'POST', body: JSON.stringify(body), headers })
   }
 
   private listenFullScreenChange () {