xapiPlugin

Author: AntoLC

src/frontend/packages/lib_video/src/components/common/Player/createPlayer.ts

@@ -23,7 +23,7 @@ export const createPlayer: VideoPlayerCreator = (
       );
 
       const trackTextKind: {
-        [key in timedTextMode]?: videojs.default.TextTrack.Kind;
+        [key in timedTextMode]?: string;
       } = {
         [timedTextMode.CLOSED_CAPTIONING]: 'captions',
         [timedTextMode.SUBTITLE]: 'subtitles',

src/frontend/packages/lib_video/src/components/common/Player/createVideojsPlayer.ts

@@ -1,6 +1,5 @@
 import 'video.js/dist/video-js.css';
 
-//import 'videojs-contrib-quality-levels';
 import 'videojs-http-source-selector';
 import './videojs/qualitySelectorPlugin';
 import './videojs/p2pHlsPlugin';
@@ -13,14 +12,7 @@ import './videojs/transcriptPlugin';
 import { Maybe } from 'lib-common';
 import { Video, useP2PConfig, videoSize } from 'lib-components';
 import videojs, { Player, Plugins, Source } from 'video.js';
-// import from 'video.js/dist/types/plugin';
-// import videojs, {
-//   VideoJsPlayer,
-//   VideoJsPlayerOptions,
-//   VideoJsPlayerPluginOptions,
-// } from 'video.js';
 
-//import { VideoJsExtendedSourceObject } from '@lib-video/types/libs/video.js/extend';
 import { isMSESupported } from '@lib-video/utils/isMSESupported';
 
 export const createVideojsPlayer = (
@@ -48,9 +40,7 @@ export const createVideojsPlayer = (
   const sources: Source[] = [];
   const plugins: Partial<Plugins> = {};
 
-  console.log('urls.mp4', urls.mp4);
-
-  if (isMSESupported()) {
+  if (!isMSESupported()) {
     plugins.qualitySelector = {
       default: '480',
     };
@@ -103,8 +93,6 @@ export const createVideojsPlayer = (
     sources,
   };
 
-  console.log('options', { options, isMSESupported: isMSESupported() });
-
   const player = videojs(videoNode, options) as Player;
 
   if (video.is_live) {
@@ -113,8 +101,6 @@ export const createVideojsPlayer = (
 
   onReady?.(player);
 
-  console.log('player', { player });
-
   // plugins initialization
   if (isMSESupported()) {
     if (isP2pQueryEnabled && isP2PEnabled) {
@@ -132,7 +118,7 @@ export const createVideojsPlayer = (
     //player.httpSourceSelector();
   }
   player.id3Plugin();
-  // player.xapiPlugin({ video, locale, dispatchPlayerTimeUpdate });
+  player.xapiPlugin({ video, locale, dispatchPlayerTimeUpdate });
 
   return player;
 };

src/frontend/packages/lib_video/src/components/common/Player/videojs/id3Plugin/index.ts

@@ -30,8 +30,6 @@ export class id3Plugin extends PluginClass {
   }
 
   handleLoadedMetadata() {
-    console.log('handleLoadedMetadata', this.player);
-
     const tracks = this.player.textTracks();
     for (let index = 0; index < tracks.length; index++) {
       const track = tracks[index];

src/frontend/packages/lib_video/src/components/common/Player/videojs/p2pHlsPlugin/types.ts

@@ -1,8 +1,6 @@
 import videojs, { Player } from 'video.js';
 import PluginType from 'video.js/dist/types/plugin';
 
-const Plugin = videojs.getPlugin('plugin') as typeof PluginType;
-
 export interface HlsData {
   frag: {
     url: string;
@@ -21,6 +19,7 @@ export interface ExtendedVideoJs {
   };
 }
 
+const Plugin = videojs.getPlugin('plugin') as typeof PluginType;
 export class P2pHlsPlugin extends Plugin {
   declare player: Player;
 

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,
     );
   }

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;

src/frontend/packages/lib_video/src/types/VideoPlayer.ts

@@ -1,6 +1,6 @@
 import { Maybe } from 'lib-common';
 import { TimedText, Video } from 'lib-components';
-import { VideoJsPlayer } from 'video.js';
+import { Player } from 'video.js';
 
 export interface VideoPlayerInterface {
   addTrack(track: TimedText, languages: { [key: string]: string }): void;
@@ -17,5 +17,5 @@ export type VideoPlayerCreator = (
   dispatchPlayerTimeUpdate: (time: number) => void,
   video: Video,
   locale?: string,
-  onReady?: (player: VideoJsPlayer) => void,
+  onReady?: (player: Player) => void,
 ) => Maybe<VideoPlayerInterface>;