@gcorevideo/player 0.1.0 → 0.2.3

package/lib/utils/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,qBAMvC;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAyBxD;AAGD,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,CAQrD;AAED,eAAO,MAAM,aAAa;uBACI,gBAAgB,KAAG,OAAO;CAYvD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,qBAMvC;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAyBxD"}

package/lib/utils/utils.js

@@ -1,6 +1,3 @@
-// import LogManager from './LogManager';
-import { Browser } from '@clappr/core';
-import assert from 'assert';
 export function getLocation(href) {
     const l = document.createElement('a');
     l.href = href;
@@ -32,26 +29,3 @@ export function strtimeToMiliseconds(str) {
     }
     return (h + m + s);
 }
-// TODO refactor
-export function isFullscreen(el) {
-    const video = el.nodeName === "video" ? el : el.querySelector('video');
-    assert.ok(video, 'element must be a video or contain a video element');
-    if (Browser.isiOS) {
-        return FullscreenIOS.isFullscreen(video);
-    }
-    return !!(document.fullscreenElement);
-}
-export const FullscreenIOS = {
-    isFullscreen: function (el) {
-        try {
-            if (el.webkitDisplayingFullscreen !== undefined) {
-                return !!(el.webkitDisplayingFullscreen);
-            }
-        }
-        catch (e) {
-            // LogManager.exception(error);
-            reportError(e);
-        }
-        return false;
-    }
-};

package/lib/version.d.ts

@@ -0,0 +1,5 @@
+export declare function version(): {
+    gplayer: string;
+    clappr: string;
+};
+//# sourceMappingURL=version.d.ts.map

package/lib/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAGA,wBAAgB,OAAO;;;EAKtB"}

package/lib/version.js

@@ -0,0 +1,8 @@
+import * as pkg from '../package.json' with { "type": "json" };
+import * as lock from '../package-lock.json' with { "type": "json" };
+export function version() {
+    return {
+        gplayer: pkg.version,
+        clappr: lock.packages['node_modules/@clappr/core'].version,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "0.1.0",
+  "version": "0.2.3",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",
@@ -31,6 +31,7 @@
   "homepage": "https://github.com/G-Core/gcore-videoplayer-js#readme",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@types/node": "^22.10.1",
     "assert": "^2.1.0",

package/rollup.config.js

@@ -1,6 +1,7 @@
 // https://github.com/rollup/rollup-starter-lib
-import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
 import sass from 'rollup-plugin-sass';
 import { string } from 'rollup-plugin-string';
 import polyfillNode from 'rollup-plugin-polyfill-node';
@@ -15,6 +16,7 @@ export default [
       }),
       resolve(),
       commonjs(),
+      json(),
       string({
         include: [
           '**/*.ejs',

package/src/Player.ts

@@ -1,17 +1,15 @@
 import {
   Browser,
   Events as ClapprEvents,
+  HTML5Video,
   Log,
   Player as PlayerClappr,
   $,
   Loader,
 } from '@clappr/core';
 import assert from 'assert';
-import Hls from 'hls.js';
 import EventLite from "event-lite";
 
-import '../assets/style/main.scss'; // TODO check if needed
-
 import type {
   CorePlayerEvents,
   CoreOptions,
@@ -19,33 +17,26 @@ import type {
   PlayerMediaSource,
 } from "./internal.types.js";
 import type {
+  BitrateInfo,
+  PlaybackType,
   PlayerPlugin,
   StreamMediaSource,
-} from "./types";
-
-import { reportError, trace } from "./trace/index.js";
+} from "./types.js";
+import { reportError } from "./trace/index.js";
 import {
   PlayerConfig,
-  MediaTransport,
-  TransportPreference,
+  PlayerEvent,
 } from "./types.js";
 import DashPlayback from './plugins/dash-playback/DashPlayback.js';
 import HlsPlayback from './plugins/hls-playback/HlsPlayback.js';
-import Playback from '@clappr/core/types/base/playback/playback';
-
-export enum PlayerEvent {
-  Ready = 'ready',
-  Play = 'play',
-  Pause = 'pause',
-  Stop = 'stop',
-  Ended = 'ended',
-}
+
+import '../assets/style/main.scss'; // TODO check if needed
 
 // TODO implement transport retry/failover and fallback logic
 
 type PlayerEventHandler<T extends PlayerEvent> = () => void;
 
-const T = "Player";
+const T = "GPlayer";
 
 const DEFAULT_OPTIONS: Partial<PlayerConfig> = {
   autoPlay: false,
@@ -55,20 +46,6 @@ const DEFAULT_OPTIONS: Partial<PlayerConfig> = {
 
 export type PlaybackModule = 'dash' | 'hls' | 'native';
 
-// TODO drop
-// export type PlaybackInfo = {
-//   bitrate: number;
-//   hd: boolean;
-//   latency: number;
-// }
-
-type BitrateInfo = {
-  height: number;
-  width: number;
-  bitrate: number;
-  level: number;
-}
-
 type PluginOptions = Record<string, unknown>;
 
 /**
@@ -87,13 +64,11 @@ export class Player {
 
   private tuneInEntered = false;
 
-  private supportedMediaTransports: MediaTransport[] = [];
-
   private config: PlayerConfig;
 
   private bitrateInfo: BitrateInfo | null = null;
 
-  get playbackModule(): PlaybackModule | null {
+  get activePlayback(): PlaybackModule | null {
     if (!this.player?.core.activePlayback) {
       return null;
     }
@@ -115,6 +90,10 @@ export class Player {
     return this.player?.core.activePlayback?.isHighDefinitionInUse || false;
   }
 
+  get playbackType(): PlaybackType | undefined{
+    return this.player?.core.activePlayback?.getPlaybackType();
+  }
+
   get playing() {
     return this.player ? this.player.isPlaying() : false;
   }
@@ -137,9 +116,13 @@ export class Player {
     this.emitter.off(event, handler);
   }
 
+  configure(config: Partial<PlayerConfig>) {
+    $.extend(true, this.config, config);
+  }
+
   async init(playerElement: HTMLElement) {
     assert.ok(!this.player, 'Player already initialized');
-    assert.ok(playerElement, 'Player element is required');
+    assert.ok(playerElement, 'Player container element is required');
     if (
       this.config.debug === 'all' ||
       this.config.debug === 'clappr'
@@ -147,26 +130,25 @@ export class Player {
       Log.setLevel(0);
     }
 
-    Log.debug('Config', this.config);
-
-    this.configurePlugins();
-    return this.loadPlugins().then(async () => {
-      const coreOpts = this.buildCoreOptions(playerElement);
-      const {
-        core,
-        container,
-      } = Loader.registeredPlugins;
-      coreOpts.plugins = {
-        core: Object.values(core),
-        container: Object.values(container),
-        playback: Loader.registeredPlaybacks,
-      } as CorePluginOptions;
-      return this.initPlayer(coreOpts);
-    });
+    Log.debug(T, 'Config', this.config);
+
+    this.configurePlaybacks();
+    const coreOpts = this.buildCoreOptions(playerElement);
+    const {
+      core,
+      container,
+    } = Loader.registeredPlugins;
+    coreOpts.plugins = {
+      core: Object.values(core),
+      container: Object.values(container),
+      playback: Loader.registeredPlaybacks,
+    } as CorePluginOptions;
+    Log.debug(T, 'coreOpts', coreOpts);
+    return this.initPlayer(coreOpts);
   }
 
   destroy() {
-    trace(`${T} destroy`, { player: !!this.player });
+    Log.debug(T, 'destroy', { player: !!this.player });
     if (this.player) {
       this.player.destroy();
       this.player = null;
@@ -197,8 +179,8 @@ export class Player {
     Loader.registerPlugin(plugin);
   }
 
-  private loadPlugins(): Promise<void> {
-    return Promise.all(this.pluginLoaders.map((loader) => loader())).then(() => { });
+  static unregisterPlugin(plugin: PlayerPlugin) {
+    Loader.unregisterPlugin(plugin);
   }
 
   private initPlayer(coreOptions: CoreOptions) {
@@ -229,7 +211,7 @@ export class Player {
   // TODO sort this out
   private async tuneIn() {
     assert.ok(this.player);
-    trace(`${T} tuneIn enter`, {
+    Log.debug(T, 'tuneIn enter', {
       ready: this.clapprReady,
       tuneInEntered: this.tuneInEntered,
     });
@@ -247,7 +229,6 @@ export class Player {
       this.bindBitrateChangeHandler();
     }
     player.core.on(ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, () => {
-      trace(`${T} onActiveContainerChanged`);
       this.bindBitrateChangeHandler();
     }, null);
     if (
@@ -267,33 +248,9 @@ export class Player {
     }
   }
 
-  private configurePlugins() {
-    // TODO remove !isiOS?
-    const useDash = !Browser.isiOS && this.config.multisources.some(
-      (el) => el.sourceDash && DashPlayback.canPlay(el.sourceDash)
-    );
-    if (useDash) {
-      this.scheduleLoad(async () => {
-        const module = await import('./plugins/dash-playback/DashPlayback.js');
-        Loader.registerPlayback(module.default);
-      })
-    }
-    // TODO remove !isiOS?
-    // if (!Browser.isiOS && this.config.multisources.some((el) => el.hls_mpegts_url)) {
-    const useHls = this.config.multisources.some(
-      (el) => HlsPlayback.canPlay(el.hlsCmafUrl || el.hlsMpegtsUrl || el.source)
-    );
-    if (useHls) {
-      this.scheduleLoad(async () => {
-        const module = await import('./plugins/hls-playback/HlsPlayback.js');
-        Loader.registerPlayback(module.default);
-      })
-    }
-  }
-
   private events: CorePlayerEvents = {
     onReady: () => {
-      trace(`${T} onReady`, { clapprReady: this.clapprReady, player: !!this.player, core: !!this.player?.core, activeContainer: !!this.player?.core.activeContainer });
+      Log.debug(T, 'onReady', { clapprReady: this.clapprReady, player: !!this.player, core: !!this.player?.core, activeContainer: !!this.player?.core.activeContainer });
       if (this.clapprReady) {
         return;
       }
@@ -303,9 +260,6 @@ export class Player {
         clearTimeout(this.timer);
         this.timer = null;
       }
-      // trace(`${T} onReady`, {
-      //   activeContainer: !!this.player?.core.activeContainer,
-      // });
       setTimeout(() => this.tuneIn(), 0);
     },
     onPlay: () => {
@@ -339,20 +293,21 @@ export class Player {
   };
 
   private buildCoreOptions(playerElement: HTMLElement): CoreOptions {
-    this.checkMediaTransportsSupport();
-    const multisources = this.processMultisources(this.config.priorityTransport);
-    const mediaSources = multisources.map(ms => ms.source);
-    const mainSource = this.findMainSource();
-    const mainSourceUrl = unwrapSource(mainSource ? this.selectMediaTransport(mainSource, this.config.priorityTransport) : undefined);
+    const multisources = this.config.multisources;
+    const mainSource = this.config.playbackType === 'live' ? multisources.find(ms => ms.live !== false) : multisources[0];
+    const mediaSources = mainSource ? this.buildMediaSourcesList(mainSource): [];
+    const mainSourceUrl = mediaSources[0];
     const poster = mainSource?.poster ?? this.config.poster;
 
     const coreOptions: CoreOptions & PluginOptions = {
+      ...this.config.pluginSettings,
       autoPlay: this.config.autoPlay,
       debug: this.config.debug || 'none',
       events: this.events,
+      height: playerElement.clientHeight,
+      loop: this.config.loop,
       multisources,
       mute: this.config.mute,
-      ...this.config.pluginSettings,
       playback: {
         controls: false,
         preload: Browser.isiOS ? 'metadata' : 'none',
@@ -366,94 +321,62 @@ export class Player {
       playbackType: this.config.playbackType,
       poster,
       width: playerElement.clientWidth,
-      height: playerElement.clientHeight,
-      loop: this.config.loop,
-      strings: this.config.strings,
       source: mainSourceUrl,
       sources: mediaSources,
+      strings: this.config.strings,
     };
-    trace(`${T} buildCoreOptions`, coreOptions);
     return coreOptions;
   }
 
-  private findMainSource(): StreamMediaSource | undefined {
-    return this.config.multisources.find(ms => ms.live !== false);
-  }
-
-  private scheduleLoad(cb: () => Promise<void>) {
-    this.pluginLoaders.push(cb);
-  }
-
-  private selectMediaTransport(ms: StreamMediaSource, priorityTransport: TransportPreference = ms.priorityTransport): string {
-    const cmafUrl = ms.hlsCmafUrl || ms.source; // source is default url for hls
-    const mpegtsUrl = ms.hlsMpegtsUrl; // no-low-latency HLS
-    const dashUrl = ms.sourceDash;
-    const masterSource = ms.source;
-
-    const mts = this.getAvailableTransportsPreference(priorityTransport);
-    for (const mt of mts) {
-      switch (mt) {
-        case 'dash':
-          if (dashUrl) {
-            return dashUrl;
-          }
-          break;
-        case 'hls':
-          if (cmafUrl) {
-            return cmafUrl;
-          }
-          break;
-        default:
-          return mpegtsUrl || masterSource;
-      }
-    }
-    // no supported transport found
-    return '';
-  }
-
-  private getAvailableTransportsPreference(priorityTransport: TransportPreference): MediaTransport[] {
-    const mtp: MediaTransport[] = [];
-    if (priorityTransport !== 'auto' && this.supportedMediaTransports.includes(priorityTransport)) {
-      mtp.push(priorityTransport);
-    }
-    for (const mt of this.supportedMediaTransports) {
-      if (mt !== priorityTransport) {
-        mtp.push(mt);
-      }
-    }
-    return mtp;
-  }
-
-  private checkMediaTransportsSupport() {
-    const isDashSupported = typeof (globalThis.MediaSource || (globalThis as any).WebKitMediaSource) === 'function';
-    if (isDashSupported) {
-      this.supportedMediaTransports.push('dash');
-    }
-    if (Hls.isSupported()) {
-      this.supportedMediaTransports.push('hls');
-    }
-    this.supportedMediaTransports.push('mpegts');
-  }
-
-  private processMultisources(transport?: TransportPreference): StreamMediaSource[] {
-    return this.config.multisources.map((ms: StreamMediaSource): StreamMediaSource => ({
-      ...ms,
-      source: this.selectMediaTransport(ms, transport),
-    })).filter((el): el is StreamMediaSource => !!el.source);
+  private configurePlaybacks() {
+    Loader.registerPlayback(DashPlayback);
+    Loader.registerPlayback(HlsPlayback);
+    Loader.registerPlayback(HTML5Video);
   }
 
   private bindBitrateChangeHandler() {
-    trace(`${T} bindBitrateChangeHandler`, { activePlayback: !!this.player?.core.activePlayback });
     this.player?.core.activeContainer.on(ClapprEvents.CONTAINER_BITRATE, (bitrate: BitrateInfo) => {
-      trace(`${T} onPlaybackBitrate`, { bitrate });
       this.bitrateInfo = bitrate;
     });
   }
-}
 
-function unwrapSource(s: PlayerMediaSource | undefined): string | undefined {
-  if (!s) {
-    return;
+  private buildMediaSourcesList(ms: StreamMediaSource): string[] {
+    const msl: string[] = [];
+    const sources: Record<'dash' | 'master' | 'hls' | 'mpegts', string | null> = {
+      dash: ms.sourceDash,
+      master: ms.source,
+      hls: ms.hlsCmafUrl,
+      mpegts: ms.hlsMpegtsUrl,
+    }
+    switch (this.config.priorityTransport) {
+      case 'dash':
+        if (sources.dash) {
+          msl.push(sources.dash);
+          sources.dash = null;
+        }
+        break;
+      case 'hls':
+        if (sources.hls) {
+          msl.push(sources.hls);
+          sources.hls = null;
+        }
+        if (sources.master?.endsWith('.m3u8')) {
+          msl.push(sources.master);
+          sources.master = null;
+        }
+        break;
+      case 'mpegts':
+        if (sources.mpegts) {
+          msl.push(sources.mpegts);
+          sources.mpegts = null
+        }
+        break;
+    }
+    Object.values(sources).forEach(s => {
+      if (s) {
+        msl.push(s);
+      }
+    });
+    return msl;
   }
-  return typeof s === "string" ? s : s.source;
 }

package/src/backend.ts

@@ -3,8 +3,8 @@ import { StreamMediaSource, StreamMediaSourceDto } from "./types";
 export function fromStreamMediaSourceDto(s: StreamMediaSourceDto): StreamMediaSource {
   return ({
     ...s,
-    hlsCmafUrl: s.hls_cmaf_url,
-    hlsMpegtsUrl: s.hls_mpegts_url,
+    hlsCmafUrl: s.hls_cmaf_url ?? null,
+    hlsMpegtsUrl: s.hls_mpegts_url ?? null,
     priorityTransport: s.priority_transport,
     sourceDash: s.source_dash,
     vtt: s.vtt,

package/src/index.ts

@@ -7,3 +7,4 @@ export * from "./trace/index.js";
 export * from "./trace/types.js";
 export * from "./types.js";
 export * from "./utils/Logger.js";
+export * from "./version.js";

package/src/internal.types.ts

@@ -1,11 +1,17 @@
 import type {
   CorePlugin,
   ContainerPlugin,
-  Playback as PlaybackPlugin,
-  ExternalTrack,
+  Playback as ClapprPlayback,
 } from "@clappr/core";
 import { PlaybackType, PlayerDebugTag, StreamMediaSource } from "./types";
 
+type ExternalTrack = {
+  kind?: "subtitles" | "captions";
+  src: string;
+  label: string;
+  lang: string;
+}
+
 type MediacontrolStyles = {
   // TODO
   seekbar?: string;
@@ -76,10 +82,12 @@ export type ClapprVersionSpec = {
   // TODO
 }
 
+export type PlaybackPluginFactory = typeof ClapprPlayback;
+
 export type CorePluginOptions = {
   core?: CorePlugin[];
   container?: ContainerPlugin[];
-  playback?: PlaybackPlugin[];
+  playback?: PlaybackPluginFactory[];
   loadExternalPluginsFirst?: boolean;
   loadExternalPlaybacksFirst?: boolean;
 }

package/src/plugins/dash-playback/DashPlayback.ts

@@ -12,7 +12,6 @@ import DASHJS,  {
   IManifestInfo
 } from 'dashjs';
 
-import { trace } from '../../trace/index.js';
 import { Duration, TimePosition, TimeValue } from '../../playback.types.js';
 
 const AUTO = -1;
@@ -243,7 +242,6 @@ export default class DashPlayback extends HTML5Video {
   }
 
   _setup() {
-    trace(`${T} _setup`, { el: this.el });
     const dash = DASHJS.MediaPlayer().create();
     this._dash = dash;
     this._dash.initialize();
@@ -265,7 +263,6 @@ export default class DashPlayback extends HTML5Video {
 
     this._dash.on(DASHJS.MediaPlayer.events.STREAM_INITIALIZED, () => {
       const bitrates = dash.getBitrateInfoListFor('video');
-      trace(`${T} STREAM_INITIALIZED`, { bitrates });
 
       this._updatePlaybackType();
       this._fillLevels(bitrates);
@@ -575,7 +572,6 @@ export default class DashPlayback extends HTML5Video {
   }
 
   play() {
-    trace(`${T} play`, { dash: !!this._dash });
     if (!this._dash) {
       this._setup();
     }
@@ -619,13 +615,9 @@ export default class DashPlayback extends HTML5Video {
   _updatePlaybackType() {
     assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to update the playback type');
     this._playbackType = this._dash.isDynamic() ? Playback.LIVE : Playback.VOD;
-    trace(`${T} _updatePlaybackType`, {
-      playbackType: this._playbackType,
-    });
   }
 
   _fillLevels(levels: BitrateInfo[]) {
-    // trace(`${T} _fillLevels`, {levels});
     // TOOD check that levels[i].qualityIndex === i
     this._levels = levels.map((level) => {
       return { id: level.qualityIndex, level: level };
@@ -775,7 +767,6 @@ export default class DashPlayback extends HTML5Video {
   // }
 
   private onLevelSwitch(currentLevel: BitrateInfo) {
-    trace(`${T} onLevelSwitch`, {currentLevel});
     this.trigger(Events.PLAYBACK_BITRATE, {
       height: currentLevel.height,
       width: currentLevel.width,
@@ -794,12 +785,11 @@ export default class DashPlayback extends HTML5Video {
 }
 
 DashPlayback.canPlay = function (resource, mimeType) {
-  trace(`${T} canPlay resource:%s mimeType:%s`, {resource, mimeType});
   const resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || [];
   const isDash = ((resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'mpd') ||
     mimeType === 'application/dash+xml' || mimeType === 'video/mp4');
   const ctor = window.MediaSource || ('WebKitMediaSource' in window ? window.WebKitMediaSource : undefined);
   const hasBrowserSupport = typeof ctor === 'function';
-  trace(`${T} canPlay isSupportByBrowser:%s isDash:%s`, {isSupportByBrowser: hasBrowserSupport, isDash});
+  Log.debug(T, 'canPlay', {hasBrowserSupport, isDash});
   return !!(hasBrowserSupport && isDash);
 };

package/src/plugins/hls-playback/HlsPlayback.ts

@@ -16,8 +16,9 @@ import HLSJS, {
   type LevelLoadedData,
   type LevelSwitchingData,
 } from 'hls.js';
-import { PlaybackType } from '../../types';
+
 import { TimePosition } from '../../playback.types.js';
+import { PlaybackType } from '../../types';
 import { TimerId } from '../../utils/types';
 
 const { now, listContainsIgnoreCase } = Utils;
@@ -904,6 +905,9 @@ export default class HlsPlayback extends HTML5Video {
 HlsPlayback.canPlay = function (resource: string, mimeType?: string): boolean {
   const resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || [];
   const isHls = ((resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'm3u8') || listContainsIgnoreCase(mimeType, ['application/vnd.apple.mpegurl', 'application/x-mpegURL']));
-
-  return !!(HLSJS.isSupported() && isHls);
+  const isSupported = HLSJS.isSupported();
+  Log.debug(T, 'canPlay', {
+    isSupported, isHls,
+  })
+  return !!(isSupported && isHls);
 };

package/src/types.ts

@@ -7,11 +7,9 @@ export type TransportPreference = MediaTransport | 'auto';
 
 export type PlayerPlugin = {
   new(...args: any[]): unknown;
-  type: 'core' | 'container' | 'playback';
+  type: string; // 'core' | 'container' | 'playback';
 }
 
-// export type PluginName = StdPluginName | string;
-
 export type PlayerConfig = {
   autoPlay?: boolean;
   debug?: PlayerDebugSettings;
@@ -20,7 +18,6 @@ export type PlayerConfig = {
   multisources: StreamMediaSource[];
   mute?: boolean;
   playbackType: PlaybackType;
-  // plugins?: PluginName[];
   pluginSettings?: Record<string, unknown>;
   poster?: string;
   priorityTransport?: TransportPreference;
@@ -79,8 +76,8 @@ export type StreamMediaSourceDto = {
 export type StreamMediaSource = {
   description: string;
   dvr: boolean;
-  hlsCmafUrl?: string;
-  hlsMpegtsUrl?: string;
+  hlsCmafUrl: string | null;
+  hlsMpegtsUrl: string | null;
   id: number;
   live: boolean;
   priorityTransport: TransportPreference;
@@ -98,3 +95,18 @@ export type SrcProjectionType = 'regular' | '360' | 'vr180' | 'vr360tb';
 export type ProjectionType = '360' | '180' | '360_TB';
 
 export type TranslationSettings = Partial<Record<LangTag, Record<TranslationKey, string>>>;
+
+export type BitrateInfo = {
+  height: number;
+  width: number;
+  bitrate: number;
+  level: number;
+};
+
+export enum PlayerEvent {
+  Ready = 'ready',
+  Play = 'play',
+  Pause = 'pause',
+  Stop = 'stop',
+  Ended = 'ended',
+}