♻️(lib-video) adapt plugin video.js xapiPlugin

We adapt the plugin xapiPlugin to work with video.js version 8.
openfun · Feb 21, 2024 · cee17f3 · cee17f3
1 parent 82b83bd
commit cee17f3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/src/frontend/packages/lib_video/src/components/common/Player/videojs/xapiPlugin/index.ts b/src/frontend/packages/lib_video/src/components/common/Player/videojs/xapiPlugin/index.ts
@@ -9,7 +9,7 @@ import {
   useCurrentSession,
   useJwt,
 } from 'lib-components';
-import videojs from 'video.js';
+import videojs, { Player } from 'video.js';
 
 import { pushAttendance } from '@lib-video/api/pushAttendance';
 import { useAttendance } from '@lib-video/hooks/useAttendance';
@@ -19,11 +19,11 @@ import { isMSESupported } from '@lib-video/utils/isMSESupported';
 
 import { Events } from '../qualitySelectorPlugin/types';
 
-import { XapiPluginOptions } from './types';
+import { XapiPluginOptions, XapiPluginType } from './types';
 
-const Plugin = videojs.getPlugin('plugin');
+const PluginClass = videojs.getPlugin('plugin') as XapiPluginType;
 
-export class xapiPlugin extends Plugin {
+export class xapiPlugin extends PluginClass {
   private xapiStatement: VideoXAPIStatementInterface;
   video: Video;
   currentTime: number;
@@ -34,8 +34,9 @@ export class xapiPlugin extends Plugin {
   hasAttendance: boolean;
   currentTrack: Nullable<TextTrack>;
   locale: Maybe<string>;
+  declare player: Player;
 
-  constructor(player: videojs.Player, options: XapiPluginOptions) {
+  constructor(player: Player, options: XapiPluginOptions) {
     super(player, options);
 
     this.video = options.video;
@@ -74,20 +75,20 @@ export class xapiPlugin extends Plugin {
     player.on('canplaythrough', this.initialize.bind(this));
     player.on('play', () => {
       this.xapiStatement.played({
-        time: player.currentTime(),
+        time: player.currentTime() || 0,
       });
     });
     player.on('pause', () => {
       this.xapiStatement.paused({
-        time: player.currentTime(),
+        time: player.currentTime() || 0,
       });
     });
 
     player.on('timeupdate', () => {
       if (this.isInitialized && !player.seeking()) {
-        this.currentTime = player.currentTime();
+        this.currentTime = player.currentTime() || 0;
       }
-      options.dispatchPlayerTimeUpdate(player.currentTime());
+      options.dispatchPlayerTimeUpdate(player.currentTime() || 0);
     });
 
     player.on('seeking', () => {
@@ -102,7 +103,7 @@ export class xapiPlugin extends Plugin {
       this.hasSeeked = false;
       this.xapiStatement.seeked({
         timeFrom: this.seekingAt,
-        timeTo: player.currentTime(),
+        timeTo: player.currentTime() || 0,
       });
     });
     player.on('fullscreenchange', this.interacted.bind(this));
@@ -122,7 +123,7 @@ export class xapiPlugin extends Plugin {
         return;
       }
 
-      this.xapiStatement.terminated({ time: player.currentTime() });
+      this.xapiStatement.terminated({ time: player.currentTime() || 0 });
 
       if (this.interval) {
         player.clearInterval(this.interval);
@@ -165,7 +166,7 @@ export class xapiPlugin extends Plugin {
     const contextExtensions = {
       ccSubtitleEnabled: this.currentTrack !== null,
       fullScreen: this.player.isFullscreen(),
-      length: this.player.duration(),
+      length: this.player.duration() || 0,
       speed: `${this.player.playbackRate()}x`,
       volume: this.player.volume(),
     };
@@ -215,7 +216,7 @@ export class xapiPlugin extends Plugin {
     }
 
     this.xapiStatement.interacted(
-      { time: this.player.currentTime() },
+      { time: this.player.currentTime() || 0 },
       contextExtensions,
     );
   }

diff --git a/src/frontend/packages/lib_video/src/components/common/Player/videojs/xapiPlugin/types.ts b/src/frontend/packages/lib_video/src/components/common/Player/videojs/xapiPlugin/types.ts
@@ -1,8 +1,21 @@
 import { Maybe } from 'lib-common';
 import { Video } from 'lib-components';
+import videojs, { Player } from 'video.js';
+import PluginType from 'video.js/dist/types/plugin';
 
 export interface XapiPluginOptions {
   video: Video;
   locale: Maybe<string>;
   dispatchPlayerTimeUpdate: (time: number) => void;
 }
+
+const Plugin = videojs.getPlugin('plugin') as typeof PluginType;
+export class XapiPlugin extends Plugin {
+  declare player: Player;
+
+  constructor(player: Player, _options?: XapiPluginOptions) {
+    super(player);
+  }
+}
+
+export type XapiPluginType = typeof XapiPlugin;