@gcorevideo/player 0.0.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"queryParams.d.ts","sourceRoot":"","sources":["../../src/utils/queryParams.ts"],"names":[],"mappings":""}

package/lib/utils/queryParams.js

@@ -0,0 +1,4 @@
+function isValidDebugTag(tag) {
+    return ['all', 'clappr', 'dash', 'hls', 'none'].includes(tag);
+}
+export {};

package/lib/utils/scripts-load.d.ts

@@ -0,0 +1,2 @@
+export declare function request(url: string, timeout: number): Promise<void>;
+//# sourceMappingURL=scripts-load.d.ts.map

package/lib/utils/scripts-load.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scripts-load.d.ts","sourceRoot":"","sources":["../../src/utils/scripts-load.ts"],"names":[],"mappings":"AACA,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAwBnE"}

package/lib/utils/scripts-load.js

@@ -0,0 +1,20 @@
+export function request(url, timeout) {
+    return new Promise((resolve) => {
+        const win = window, doc = document, el = 'script';
+        let timer;
+        const onLoad = () => {
+            win.clearTimeout(timer);
+            resolve();
+        };
+        const first = doc.getElementsByTagName(el)[0];
+        const script = doc.createElement(el);
+        script.src = url;
+        script.async = true;
+        script.onload = onLoad;
+        script.onerror = onLoad; // TODO reject?
+        first?.parentNode?.insertBefore(script, first);
+        if (timeout) {
+            timer = win.setTimeout(onLoad, timeout);
+        }
+    });
+}

package/lib/utils/types.d.ts

@@ -0,0 +1,4 @@
+import { $ } from "@clappr/core";
+export type ZeptoResult = ReturnType<typeof $>;
+export type TimerId = ReturnType<typeof setTimeout>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEjC,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;AAE/C,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC"}

package/lib/utils/types.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/utils.d.ts

@@ -0,0 +1,7 @@
+export declare function getLocation(href: string): HTMLAnchorElement;
+export declare function strtimeToMiliseconds(str: string): number;
+export declare function isFullscreen(el: HTMLElement): boolean;
+export declare const FullscreenIOS: {
+    isFullscreen: (el: HTMLVideoElement) => boolean;
+};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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"}

package/lib/utils/utils.js

@@ -0,0 +1,57 @@
+// 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;
+    return l;
+}
+export function strtimeToMiliseconds(str) {
+    if (!str) {
+        return 0;
+    }
+    const arr = str.split(/:/);
+    let h = 0, m = 0, s = 0;
+    if (arr.length >= 3) {
+        h = parseInt(arr[arr.length - 3]) * 60 * 60;
+    }
+    else {
+        h = 0;
+    }
+    if (arr.length >= 2) {
+        m = parseInt(arr[arr.length - 2]) * 60;
+    }
+    else {
+        m = 0;
+    }
+    if (arr.length >= 1) {
+        s = parseInt(arr[arr.length - 1]);
+    }
+    else {
+        s = 0;
+    }
+    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/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@gcorevideo/player",
+  "version": "0.0.1",
+  "description": "Gcore JavaScript video player",
+  "main": "dist/index.js",
+  "type": "module",
+  "typings": "lib/index.d.ts",
+  "scripts": {
+    "build": "npm run build:ts && npm run build:bundle",
+    "build:1": "npm run build:ts && npm run build:bundle && date",
+    "build:ts": "tsc",
+    "build:bundle": "rollup -c",
+    "docs": "npm run docs:extract && npm run docs:build",
+    "docs:extract": "api-extractor run --local --verbose",
+    "docs:build": "api-documenter markdown --input-folder=temp --output-folder=docs/api",
+    "format": "prettier --write src/",
+    "lint": "oxlint -c ../../.oxlintrc.json --tsconfig=./tsconfig.json --fix --ignore-path=../../.gitignore src",
+    "ship": "npm run build && npm run build:bundle && npm publish --access public",
+    "test": "vitest --environment=jsdom run",
+    "test:watch": "vitest --environment=jsdom watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/G-Core/gcore-videoplayer-js.git"
+  },
+  "author": "Gcore",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/G-Core/gcore-videoplayer-js/issues"
+  },
+  "homepage": "https://github.com/G-Core/gcore-videoplayer-js#readme",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@types/can-autoplay": "^3.0.5",
+    "@types/node": "^22.10.1",
+    "@types/ua-parser-js": "^0.7.39",
+    "assert": "^2.1.0",
+    "rollup": "^4.27.4",
+    "rollup-plugin-sass": "^1.14.0",
+    "rollup-plugin-scss": "^4.0.1",
+    "rollup-plugin-string": "^3.0.0",
+    "sass": "^1.83.0",
+    "typescript": "^5.7.2"
+  },
+  "dependencies": {
+    "@clappr/core": "^0.11.3",
+    "@clappr/plugins": "^0.8.3",
+    "@sentry/browser": "^8.41.0",
+    "can-autoplay": "^3.0.2",
+    "dashjs": "^4.7.4",
+    "event-lite": "^1.0.0",
+    "hls.js": "^1.5.17",
+    "kibo": "file:../kibo",
+    "ua-parser-js": "^2.0.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,34 @@
+// https://github.com/rollup/rollup-starter-lib
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import sass from 'rollup-plugin-sass';
+import { string } from 'rollup-plugin-string';
+
+export default [
+  {
+    input: 'lib/index.js',
+    plugins: [
+      sass({
+        output: 'dist/index.css',
+        verbose: true,
+      }),
+      resolve({
+        resolveOnly: ["ms"],
+      }),
+      commonjs(),
+      string({
+        include: [
+          '**/*.ejs',
+          '**/*.svg',
+        ],
+      }),
+    ],
+    output: [
+      {
+        dir: 'dist',
+        format: 'es',
+        generatedCode: 'es2015',
+      }
+    ]
+  }
+];

package/src/Player.ts

@@ -0,0 +1,390 @@
+import {
+  Browser,
+  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,
+  CorePluginOptions,
+  PlayerMediaSource,
+} from "./internal.types.js";
+import type {
+  PlayerPlugin,
+  StreamMediaSource,
+} from "./types";
+
+import { reportError, trace } from "./trace/index.js";
+import {
+  PlayerConfig,
+  MediaTransport,
+  TransportPreference,
+} from "./types.js";
+
+export enum PlayerEvent {
+  Ready = 'ready',
+  Play = 'play',
+  Pause = 'pause',
+  Stop = 'stop',
+  Ended = 'ended',
+}
+
+// TODO implement transport retry/failover and fallback logic
+
+type PlayerEventHandler<T extends PlayerEvent> = () => void;
+
+const T = "Player";
+
+const DEFAULT_OPTIONS: Partial<PlayerConfig> = {
+  autoPlay: false,
+  mute: false,
+  loop: false,
+}
+
+type PluginOptions = Record<string, unknown>;
+
+/**
+ * @beta
+ */
+export class Player {
+  private emitter = new EventLite();
+
+  private player: PlayerClappr | null = null;
+
+  private pluginLoaders: Array<() => Promise<void>> = [];
+
+  private clapprReady = false;
+
+  private timer: ReturnType<typeof setTimeout> | null = null;
+
+  private tuneInEntered = false;
+
+  private supportedMediaTransports: MediaTransport[] = [];
+
+  private config: PlayerConfig;
+
+  get playing() {
+    return this.player ? this.player.isPlaying() : false;
+  }
+
+  get ready() {
+    return this.clapprReady;
+  }
+
+  constructor(
+    config: PlayerConfig,
+  ) {
+    this.config = $.extend(true, {}, DEFAULT_OPTIONS, config);
+  }
+
+  on<T extends PlayerEvent>(event: T, handler: PlayerEventHandler<T>) {
+    this.emitter.on(event, handler);
+  }
+
+  off<T extends PlayerEvent>(event: T, handler: PlayerEventHandler<T>) {
+    this.emitter.off(event, handler);
+  }
+
+  async init(playerElement: HTMLElement) {
+    assert.ok(!this.player, 'Player already initialized');
+    assert.ok(playerElement, 'Player element is required');
+    if (
+      this.config.debug === 'all' ||
+      this.config.debug === 'clappr'
+    ) {
+      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;
+      console.log('plugins', coreOpts.plugins);
+      return this.initPlayer(coreOpts);
+    });
+  }
+
+  destroy() {
+    trace(`${T} destroy`, { player: !!this.player });
+    if (this.player) {
+      this.player.destroy();
+      this.player = null;
+    }
+  }
+
+  pause() {
+    assert.ok(this.player, 'Player not initialized');
+    this.player.pause();
+  }
+
+  play() {
+    assert.ok(this.player, 'Player not initialized');
+    this.player.play();
+  }
+
+  seekTo(time: number) {
+    assert.ok(this.player, 'Player not initialized');
+    this.player.seek(time);
+  }
+
+  stop() {
+    assert.ok(this.player, 'Player not initialized');
+    this.player.stop();
+  }
+
+  static registerPlugin(plugin: PlayerPlugin) {
+    Loader.registerPlugin(plugin);
+  }
+
+  private loadPlugins(): Promise<void> {
+    return Promise.all(this.pluginLoaders.map((loader) => loader())).then(() => { });
+  }
+
+  private initPlayer(coreOptions: CoreOptions) {
+    assert.ok(!this.player, 'Player already initialized');
+
+    const player = new PlayerClappr(
+      coreOptions
+    );
+    this.player = player;
+
+    this.timer = globalThis.setTimeout(() => {
+      try {
+        if (
+          !this.clapprReady &&
+          player.core &&
+          player.core
+            .activePlayback
+        ) {
+          this.tuneIn();
+          // player.onReady = null; // TODO ?
+        }
+      } catch (e) {
+        reportError(e);
+      }
+    }, 4000);
+  }
+
+  // TODO sort this out
+  private async tuneIn() {
+    assert.ok(this.player);
+    trace(`${T} tuneIn enter`, {
+      ready: this.clapprReady,
+      tuneInEntered: this.tuneInEntered,
+    });
+    if (this.tuneInEntered) {
+      return;
+    }
+    this.tuneInEntered = true;
+    const player = this.player;
+    if (
+      Browser.isiOS &&
+      player.core.activePlayback
+    ) {
+      player.core.activePlayback.$el.on(
+        'webkitendfullscreen',
+        () => {
+          try {
+            player.core.handleFullscreenChange();
+          } catch (e) {
+            reportError(e);
+          }
+        },
+      );
+    }
+  }
+
+  private configurePlugins() {
+    if (!Browser.isiOS && this.config.multisources.some((el) => el.sourceDash)) {
+      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)) {
+    if (this.config.multisources.some((el) => el.hlsMpegtsUrl || el.hlsCmafUrl || el.source.endsWith('.m3u8'))) {
+      this.scheduleLoad(async () => {
+        const module = await import('./plugins/hls-playback/HlsPlayback.js');
+        Loader.registerPlayback(module.default);
+      })
+    }
+  }
+
+  private events: CorePlayerEvents = {
+    onReady: () => {
+      if (this.clapprReady) {
+        return;
+      }
+      this.clapprReady = true;
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+      trace(`${T} onReady`);
+      setTimeout(() => this.tuneIn(), 0);
+      try {
+        this.emitter.emit(PlayerEvent.Ready);
+      } catch (e) {
+        reportError(e);
+      }
+    },
+    onPlay: () => {
+      try {
+        this.emitter.emit(PlayerEvent.Play);
+      } catch (e) {
+        reportError(e);
+      }
+    },
+    onPause: () => {
+      try {
+        this.emitter.emit(PlayerEvent.Pause);
+      } catch (e) {
+        reportError(e);
+      }
+    },
+    onEnded: () => {
+      try {
+        this.emitter.emit(PlayerEvent.Ended);
+      } catch (e) {
+        reportError(e);
+      }
+    },
+    onStop: () => {
+      try {
+        this.emitter.emit(PlayerEvent.Stop);
+      } catch (e) {
+        reportError(e);
+      }
+    },
+  };
+
+  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 poster = mainSource?.poster ?? this.config.poster;
+
+    const coreOptions: CoreOptions & PluginOptions = {
+      autoPlay: this.config.autoPlay,
+      debug: this.config.debug || 'none',
+      events: this.events,
+      multisources,
+      mute: this.config.mute,
+      ...this.config.pluginSettings,
+      playback: {
+        controls: false,
+        preload: Browser.isiOS ? 'metadata' : 'none',
+        playInline: true,
+        crossOrigin: 'anonymous', // TODO
+        hlsjsConfig: {
+          debug: this.config.debug === 'all' || this.config.debug === 'hls',
+        },
+      },
+      parent: playerElement,
+      playbackType: this.config.playbackType,
+      poster,
+      width: playerElement.clientWidth,
+      height: playerElement.clientHeight,
+      loop: this.config.loop,
+      strings: this.config.strings,
+      source: mainSourceUrl,
+      sources: mediaSources,
+    };
+    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);
+  }
+}
+
+function unwrapSource(s: PlayerMediaSource | undefined): string | undefined {
+  if (!s) {
+    return;
+  }
+  return typeof s === "string" ? s : s.source;
+}

package/src/backend.ts

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

package/src/constants.ts

@@ -0,0 +1,17 @@
+/**
+ * @deprecated
+ */
+export const SentryLogLevel = {
+  FATAL: 'fatal',
+  ERROR: 'error',
+  WARNING: 'warning',
+  LOG: 'log',
+  INFO: 'info',
+  DEBUG: 'debug'
+};
+
+export enum QueryParams {
+  DEBUG = "debug",
+  NO_LOW_LATENCY = 'no_low_latency',
+  SUBTITLES_LANGUAGE = 'sub_lang',
+};

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from "./Player.js"
+export * from "./backend.js";
+export * from "./playback.types.js";
+export * from "./trace/LogTracer.js";
+export * from "./trace/SentryTracer.js";
+export * from "./trace/index.js";
+export * from "./trace/types.js";
+export * from "./types.js";
+export * from "./utils/Logger.js";