WIP: add user agent video stats

client/src/app/+stats/video/video-stats.component.ts

@@ -12,7 +12,8 @@ import {
   VideoStatsOverall,
   VideoStatsRetention,
   VideoStatsTimeserie,
-  VideoStatsTimeserieMetric
+  VideoStatsTimeserieMetric,
+  VideoStatsUserAgent
 } from '@peertube/peertube-models'
 import { VideoStatsService } from './video-stats.service'
 import { ButtonComponent } from '../../shared/shared-main/buttons/button.component'
@@ -29,11 +30,13 @@ import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
 import { LiveVideoService } from '@app/shared/shared-video-live/live-video.service'
 import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
 
-type ActiveGraphId = VideoStatsTimeserieMetric | 'retention' | 'countries' | 'regions'
+const BAR_GRAPHS = [ 'countries', 'regions', 'browser', 'device', 'operatingSystem' ] as const
+type BarGraphs = typeof BAR_GRAPHS[number]
+type ActiveGraphId = VideoStatsTimeserieMetric | 'retention' | BarGraphs
 
 type GeoData = { name: string, viewers: number }[]
 
-type ChartIngestData = VideoStatsTimeserie | VideoStatsRetention | GeoData
+type ChartIngestData = VideoStatsTimeserie | VideoStatsRetention | GeoData | VideoStatsUserAgent
 type ChartBuilderResult = {
   type: 'line' | 'bar'
 
@@ -46,6 +49,8 @@ type ChartBuilderResult = {
 
 type Card = { label: string, value: string | number, moreInfo?: string, help?: string }
 
+const isBarGraph = (graphId: ActiveGraphId): graphId is BarGraphs => BAR_GRAPHS.some((graph) => graph === graphId)
+
 ChartJSDefaults.backgroundColor = getComputedStyle(document.body).getPropertyValue('--bg')
 ChartJSDefaults.borderColor = getComputedStyle(document.body).getPropertyValue('--bg-secondary-500')
 ChartJSDefaults.color = getComputedStyle(document.body).getPropertyValue('--fg')
@@ -140,6 +145,21 @@ export class VideoStatsComponent implements OnInit {
         id: 'regions',
         label: $localize`Regions`,
         zoomEnabled: false
+      },
+      {
+        id: 'browser',
+        label: $localize`Browser`,
+        zoomEnabled: false
+      },
+      {
+        id: 'device',
+        label: $localize`Device`,
+        zoomEnabled: false
+      },
+      {
+        id: 'operatingSystem',
+        label: $localize`Operating system`,
+        zoomEnabled: false
       }
     ]
 
@@ -359,6 +379,9 @@ export class VideoStatsComponent implements OnInit {
   private loadChart () {
     const obsBuilders: { [ id in ActiveGraphId ]: Observable<ChartIngestData> } = {
       retention: this.statsService.getRetentionStats(this.video.uuid),
+      browser: this.statsService.getUserAgentStats(this.video.uuid),
+      device: this.statsService.getUserAgentStats(this.video.uuid),
+      operatingSystem: this.statsService.getUserAgentStats(this.video.uuid),
 
       aggregateWatchTime: this.statsService.getTimeserieStats({
         videoId: this.video.uuid,
@@ -393,6 +416,9 @@ export class VideoStatsComponent implements OnInit {
     const dataBuilders: {
       [ id in ActiveGraphId ]: (rawData: ChartIngestData) => ChartBuilderResult
     } = {
+      browser: (rawData: VideoStatsUserAgent) => this.buildUserAgentChartOptions(rawData, 'browser'),
+      device: (rawData: VideoStatsUserAgent) => this.buildUserAgentChartOptions(rawData, 'device'),
+      operatingSystem: (rawData: VideoStatsUserAgent) => this.buildUserAgentChartOptions(rawData, 'operatingSystem'),
       retention: (rawData: VideoStatsRetention) => this.buildRetentionChartOptions(rawData),
       aggregateWatchTime: (rawData: VideoStatsTimeserie) => this.buildTimeserieChartOptions(rawData),
       viewers: (rawData: VideoStatsTimeserie) => this.buildTimeserieChartOptions(rawData),
@@ -416,6 +442,7 @@ export class VideoStatsComponent implements OnInit {
         scales: {
           x: {
             ticks: {
+              stepSize: isBarGraph(graphId) ? 1 : undefined,
               callback: function (value) {
                 return self.formatXTick({
                   graphId,
@@ -548,6 +575,43 @@ export class VideoStatsComponent implements OnInit {
     }
   }
 
+  private buildUserAgentChartOptions (rawData: VideoStatsUserAgent, type: BarGraphs): ChartBuilderResult {
+    const labels: string[] = []
+    const data: number[] = []
+    const rawDataKey = type === 'browser' ? 'userAgentFamily' : type === 'device' ? 'userAgentDeviceFamily' : 'userAgentOsFamily'
+
+    for (const d of rawData[rawDataKey]) {
+      labels.push(d.name)
+      data.push(d.viewers)
+    }
+
+    return {
+      type: 'bar' as 'bar',
+
+      options: {
+        indexAxis: 'y'
+      },
+
+      displayLegend: true,
+
+      plugins: {
+        ...this.buildDisabledZoomPlugin()
+      },
+
+      data: {
+        labels,
+        datasets: [
+          {
+            label: $localize`Viewers`,
+            backgroundColor: this.buildChartColor(),
+            maxBarThickness: 20,
+            data
+          }
+        ]
+      }
+    }
+  }
+
   private buildGeoChartOptions (rawData: GeoData): ChartBuilderResult {
     const labels: string[] = []
     const data: number[] = []
@@ -628,7 +692,7 @@ export class VideoStatsComponent implements OnInit {
 
     if (graphId === 'retention') return value + ' %'
     if (graphId === 'aggregateWatchTime') return secondsToTime(+value)
-    if ((graphId === 'countries' || graphId === 'regions') && scale) return scale.getLabelForValue(value as number)
+    if (isBarGraph(graphId) && scale) return scale.getLabelForValue(value as number)
 
     return value.toLocaleString(this.localeId)
   }

client/src/app/+stats/video/video-stats.service.ts

@@ -3,7 +3,13 @@ import { environment } from 'src/environments/environment'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor } from '@app/core'
-import { VideoStatsOverall, VideoStatsRetention, VideoStatsTimeserie, VideoStatsTimeserieMetric } from '@peertube/peertube-models'
+import {
+  VideoStatsOverall,
+  VideoStatsRetention,
+  VideoStatsTimeserie,
+  VideoStatsTimeserieMetric,
+  VideoStatsUserAgent
+} from '@peertube/peertube-models'
 import { VideoService } from '@app/shared/shared-main/video/video.service'
 
 @Injectable({
@@ -52,4 +58,9 @@ export class VideoStatsService {
     return this.authHttp.get<VideoStatsRetention>(VideoService.BASE_VIDEO_URL + '/' + videoId + '/stats/retention')
       .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
+
+  getUserAgentStats (videoId: string) {
+    return this.authHttp.get<VideoStatsUserAgent>(VideoService.BASE_VIDEO_URL + '/' + videoId + '/stats/user-agent')
+      .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
 }

package.json

@@ -224,6 +224,7 @@
     "@types/node": "^18.13.0",
     "@types/nodemailer": "^6.2.0",
     "@types/supertest": "^6.0.2",
+    "@types/useragent": "^2.3.4",
     "@types/validator": "^13.9.0",
     "@types/webtorrent": "^0.109.0",
     "@types/ws": "^8.2.0",

packages/models/src/videos/stats/index.ts

@@ -4,3 +4,4 @@ export * from './video-stats-retention.model.js'
 export * from './video-stats-timeserie-query.model.js'
 export * from './video-stats-timeserie-metric.type.js'
 export * from './video-stats-timeserie.model.js'
+export * from './video-stats-user-agent.model.js'

packages/models/src/videos/stats/video-stats-user-agent.model.ts

@@ -0,0 +1,6 @@
+export type VideoStatsUserAgent = {
+  [key in 'userAgentFamily' | 'userAgentDeviceFamily' | 'userAgentOsFamily']: {
+    name: string
+    viewers: number
+  }[]
+}

server/core/controllers/api/videos/stats.ts

@@ -6,7 +6,8 @@ import {
   authenticate,
   videoOverallStatsValidator,
   videoRetentionStatsValidator,
-  videoTimeserieStatsValidator
+  videoTimeserieStatsValidator,
+  videoUserAgentStatsValidator
 } from '../../../middlewares/index.js'
 
 const statsRouter = express.Router()
@@ -29,6 +30,12 @@ statsRouter.get('/:videoId/stats/retention',
   asyncMiddleware(getRetentionStats)
 )
 
+statsRouter.get('/:videoId/stats/user-agent',
+  authenticate,
+  asyncMiddleware(videoUserAgentStatsValidator),
+  asyncMiddleware(getUserAgentStats)
+)
+
 // ---------------------------------------------------------------------------
 
 export {
@@ -58,6 +65,14 @@ async function getRetentionStats (req: express.Request, res: express.Response) {
   return res.json(stats)
 }
 
+async function getUserAgentStats (req: express.Request, res: express.Response) {
+  const video = res.locals.videoAll
+
+  const stats = await LocalVideoViewerModel.getUserAgentStats(video)
+
+  return res.json(stats)
+}
+
 async function getTimeserieStats (req: express.Request, res: express.Response) {
   const video = res.locals.videoAll
   const metric = req.params.metric as VideoStatsTimeserieMetric

server/core/controllers/api/videos/view.ts

@@ -1,4 +1,5 @@
 import express from 'express'
+import { lookup } from 'useragent'
 import { HttpStatusCode, VideoView } from '@peertube/peertube-models'
 import { Hooks } from '@server/lib/plugins/hooks.js'
 import { VideoViewsManager } from '@server/lib/views/video-views-manager.js'
@@ -38,6 +39,7 @@ async function viewVideo (req: express.Request, res: express.Response) {
 
   const ip = req.ip
   const { successView } = await VideoViewsManager.Instance.processLocalView({
+    userAgent: lookup(req.headers['user-agent']),
     video,
     ip,
     currentTime: body.currentTime,

server/core/initializers/constants.ts

@@ -46,7 +46,7 @@ import { CONFIG, registerConfigChangedHandler } from './config.js'
 
 // ---------------------------------------------------------------------------
 
-export const LAST_MIGRATION_VERSION = 865
+export const LAST_MIGRATION_VERSION = 875
 
 // ---------------------------------------------------------------------------
 

server/core/initializers/migrations/0875-local-video-viewer-user-agent.ts

@@ -0,0 +1,53 @@
+import * as Sequelize from 'sequelize'
+
+async function up (utils: {
+  transaction: Sequelize.Transaction
+  queryInterface: Sequelize.QueryInterface
+  sequelize: Sequelize.Sequelize
+}): Promise<void> {
+  const { transaction } = utils
+
+  {
+    await utils.queryInterface.addColumn('localVideoViewer', 'userAgentFamily', {
+      type: Sequelize.STRING,
+      defaultValue: null,
+      allowNull: true
+    }, { transaction })
+
+    await utils.queryInterface.addIndex('localVideoViewer', [ 'userAgentFamily' ], {
+      transaction
+    })
+  }
+
+  {
+    await utils.queryInterface.addColumn('localVideoViewer', 'userAgentDeviceFamily', {
+      type: Sequelize.STRING,
+      defaultValue: null,
+      allowNull: true
+    }, { transaction })
+
+    await utils.queryInterface.addIndex('localVideoViewer', [ 'userAgentDeviceFamily' ], {
+      transaction
+    })
+  }
+
+  {
+    await utils.queryInterface.addColumn('localVideoViewer', 'userAgentOsFamily', {
+      type: Sequelize.STRING,
+      defaultValue: null,
+      allowNull: true
+    }, { transaction })
+
+    await utils.queryInterface.addIndex('localVideoViewer', [ 'userAgentOsFamily' ], {
+      transaction
+    })
+  }
+}
+
+function down (options) {
+  throw new Error('Not implemented.')
+}
+
+export {
+  down, up
+}

server/core/lib/views/shared/video-viewer-stats.ts

@@ -12,6 +12,7 @@ import { LocalVideoViewerWatchSectionModel } from '@server/models/view/local-vid
 import { LocalVideoViewerModel } from '@server/models/view/local-video-viewer.js'
 import { MVideo, MVideoImmutable } from '@server/types/models/index.js'
 import { Transaction } from 'sequelize'
+import { Agent } from 'useragent'
 
 const lTags = loggerTagsFactory('views')
 
@@ -26,6 +27,10 @@ type LocalViewerStats = {
 
   watchTime: number
 
+  userAgentFamily: string
+  userAgentDeviceFamily: string
+  userAgentOsFamily: string
+
   country: string
   subdivisionName: string
 
@@ -47,13 +52,14 @@ export class VideoViewerStats {
   // ---------------------------------------------------------------------------
 
   async addLocalViewer (options: {
+    userAgent: Agent
     video: MVideoImmutable
     currentTime: number
     ip: string
     sessionId: string
     viewEvent?: VideoViewEvent
   }) {
-    const { video, ip, viewEvent, currentTime, sessionId } = options
+    const { video, ip, viewEvent, currentTime, sessionId, userAgent } = options
 
     logger.debug(
       'Adding local viewer to video stats %s.', video.uuid,
@@ -83,6 +89,10 @@ export class VideoViewerStats {
 
         watchTime: 0,
 
+        userAgentFamily: userAgent.family,
+        userAgentDeviceFamily: userAgent.device.family,
+        userAgentOsFamily: userAgent.os.family,
+
         country,
         subdivisionName,
 
@@ -181,6 +191,9 @@ export class VideoViewerStats {
       startDate: new Date(stats.firstUpdated),
       endDate: new Date(stats.lastUpdated),
       watchTime: stats.watchTime,
+      userAgentFamily: stats.userAgentFamily,
+      userAgentDeviceFamily: stats.userAgentDeviceFamily,
+      userAgentOsFamily: stats.userAgentOsFamily,
       country: stats.country,
       subdivisionName: stats.subdivisionName,
       videoId: video.id

server/core/lib/views/video-views-manager.ts

@@ -4,6 +4,7 @@ import { logger, loggerTagsFactory } from '@server/helpers/logger.js'
 import { CONFIG } from '@server/initializers/config.js'
 import { MVideo, MVideoImmutable } from '@server/types/models/index.js'
 import { VideoScope, VideoViewerCounters, VideoViewerStats, VideoViews, ViewerScope } from './shared/index.js'
+import { Agent } from 'useragent'
 
 /**
  * If processing a local view:
@@ -43,13 +44,14 @@ export class VideoViewsManager {
   }
 
   async processLocalView (options: {
+    userAgent: Agent
     video: MVideoImmutable
     currentTime: number
     ip: string | null
     sessionId?: string
     viewEvent?: VideoViewEvent
   }) {
-    const { video, ip, viewEvent, currentTime } = options
+    const { video, ip, viewEvent, currentTime, userAgent } = options
 
     let sessionId = options.sessionId
     if (!sessionId || CONFIG.VIEWS.VIDEOS.TRUST_VIEWER_SESSION_ID !== true) {
@@ -58,7 +60,7 @@ export class VideoViewsManager {
 
     logger.debug(`Processing local view for ${video.url}, ip ${ip} and session id ${sessionId}.`, lTags())
 
-    await this.videoViewerStats.addLocalViewer({ video, ip, sessionId, viewEvent, currentTime })
+    await this.videoViewerStats.addLocalViewer({ video, ip, sessionId, viewEvent, currentTime, userAgent })
 
     const successViewer = await this.videoViewerCounters.addLocalViewer({ video, sessionId })