@gcorevideo/player 0.0.1

package/dist/index.css

@@ -0,0 +1,125 @@
+@import "https://fonts.googleapis.com/css?family=Roboto";
+:root {
+  --theme-background-color: rgb(0 0 0 / 70%);
+  --theme-text-color: rgb(255 255 255 / 100%);
+  --theme-foreground-color: rgb(201 201 201 / 100%);
+  --theme-hover-color: rgb(255 255 255 / 100%);
+}
+
+.gcore-skin-bg-color {
+  background-color: var(--theme-background-color) !important;
+}
+
+.gcore-skin-text-color {
+  color: var(--theme-text-color) !important;
+}
+
+.gcore-skin-text-color svg {
+  fill: var(--theme-text-color) !important;
+}
+
+.gcore-skin-text-color svg path {
+  fill: var(--theme-text-color) !important;
+}
+
+.gcore-skin-border-textarea-color {
+  border-color: var(--theme-text-color) !important;
+}
+
+.gcore-skin-button-color {
+  color: var(--theme-foreground-color) !important;
+}
+.gcore-skin-button-color svg {
+  fill: var(--theme-foreground-color) !important;
+}
+.gcore-skin-button-color svg path {
+  fill: var(--theme-foreground-color) !important;
+}
+.gcore-skin-button-color svg path.icon-hover {
+  fill: var(--theme-foreground-color) !important;
+}
+.gcore-skin-button-color[data-fullscreen] svg {
+  stroke: var(--theme-foreground-color) !important;
+}
+.gcore-skin-button-color[data-fullscreen] svg path {
+  stroke: var(--theme-foreground-color) !important;
+}
+
+.gcore-skin-main-color {
+  background-color: var(--theme-foreground-color) !important;
+}
+
+.gcore-skin-border-color {
+  border-color: var(--theme-foreground-color) !important;
+}
+
+.gcore-skin-button-color:hover {
+  color: var(--theme-hover-color) !important;
+}
+
+.gcore-skin-button-color:hover svg {
+  fill: var(--theme-hover-color) !important;
+}
+
+.gcore-skin-button-color:hover svg path {
+  fill: var(--theme-hover-color) !important;
+}
+
+.gcore-skin-border-color:hover {
+  border-color: var(--theme-hover-color) !important;
+}
+
+.gcore-skin-button-with-bg-color:hover svg path.icon-hover {
+  fill: var(--theme-hover-color) !important;
+}
+
+.gcore-skin-active {
+  color: var(--theme-hover-color) !important;
+}
+
+.gcore-skin-active svg {
+  fill: var(--theme-hover-color) !important;
+}
+
+.gcore-skin-active svg path {
+  fill: var(--theme-hover-color) !important;
+}
+
+* {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+.player-poster[data-poster] {
+  background-size: contain !important;
+}
+
+.spinner-three-bounce > .gcore-skin-main-color {
+  box-shadow: 4px 4px 9px 1px rgba(36, 61, 81, 0.51);
+}
+
+.gplayer-lite-btn {
+  cursor: pointer;
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+  /* inherit font & color from ancestor */
+  color: inherit;
+  font: inherit;
+  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+  line-height: normal;
+  /* Corrects font smoothing for webkit */
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  /* Corrects inability to style clickable `input` types in iOS */
+  appearance: none;
+  /* Remove excess padding and border in Firefox 4+ */
+}
+.gplayer-lite-btn::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}

package/dist/index.js

@@ -0,0 +1,467 @@
+import { $, Log, Loader, Player as Player$1, Browser } from '@clappr/core';
+import assert from 'assert';
+import HLSJS from 'hls.js';
+import EventLite from 'event-lite';
+
+const tracer = {
+    trace: () => { },
+    reportError: () => { },
+};
+/**
+ * @public
+ * Sets a tracer implementation, e.g., LogTracer or SentryTracer
+ */
+function setTracer(t) {
+    tracer.trace = t.trace.bind(t);
+    tracer.reportError = t.reportError.bind(t);
+}
+/**
+ * @public
+ * @param e
+ */
+function reportError(e) {
+    tracer.reportError(e);
+}
+/**
+ * @public
+ * @param msg
+ * @param data
+ */
+function trace(msg, data = {}) {
+    tracer.trace(msg, data);
+}
+
+var PlayerEvent;
+(function (PlayerEvent) {
+    PlayerEvent["Ready"] = "ready";
+    PlayerEvent["Play"] = "play";
+    PlayerEvent["Pause"] = "pause";
+    PlayerEvent["Stop"] = "stop";
+    PlayerEvent["Ended"] = "ended";
+})(PlayerEvent || (PlayerEvent = {}));
+const T = "Player";
+const DEFAULT_OPTIONS = {
+    autoPlay: false,
+    mute: false,
+    loop: false,
+};
+/**
+ * @beta
+ */
+class Player {
+    emitter = new EventLite();
+    player = null;
+    pluginLoaders = [];
+    clapprReady = false;
+    timer = null;
+    tuneInEntered = false;
+    supportedMediaTransports = [];
+    config;
+    get playing() {
+        return this.player ? this.player.isPlaying() : false;
+    }
+    get ready() {
+        return this.clapprReady;
+    }
+    constructor(config) {
+        this.config = $.extend(true, {}, DEFAULT_OPTIONS, config);
+    }
+    on(event, handler) {
+        this.emitter.on(event, handler);
+    }
+    off(event, handler) {
+        this.emitter.off(event, handler);
+    }
+    async init(playerElement) {
+        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,
+            };
+            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) {
+        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) {
+        Loader.registerPlugin(plugin);
+    }
+    loadPlugins() {
+        return Promise.all(this.pluginLoaders.map((loader) => loader())).then(() => { });
+    }
+    initPlayer(coreOptions) {
+        assert.ok(!this.player, 'Player already initialized');
+        const player = new Player$1(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
+    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);
+                }
+            });
+        }
+    }
+    configurePlugins() {
+        if (!Browser.isiOS && this.config.multisources.some((el) => el.sourceDash)) {
+            this.scheduleLoad(async () => {
+                const module = await import('./DashPlayback-BeZz7mN9.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('./HlsPlayback-Avwy8-0O.js');
+                Loader.registerPlayback(module.default);
+            });
+        }
+    }
+    events = {
+        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);
+            }
+        },
+    };
+    buildCoreOptions(playerElement) {
+        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 = {
+            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;
+    }
+    findMainSource() {
+        return this.config.multisources.find(ms => ms.live !== false);
+    }
+    scheduleLoad(cb) {
+        this.pluginLoaders.push(cb);
+    }
+    selectMediaTransport(ms, priorityTransport = ms.priorityTransport) {
+        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 '';
+    }
+    getAvailableTransportsPreference(priorityTransport) {
+        const mtp = [];
+        if (priorityTransport !== 'auto' && this.supportedMediaTransports.includes(priorityTransport)) {
+            mtp.push(priorityTransport);
+        }
+        for (const mt of this.supportedMediaTransports) {
+            if (mt !== priorityTransport) {
+                mtp.push(mt);
+            }
+        }
+        return mtp;
+    }
+    checkMediaTransportsSupport() {
+        const isDashSupported = typeof (globalThis.MediaSource || globalThis.WebKitMediaSource) === 'function';
+        if (isDashSupported) {
+            this.supportedMediaTransports.push('dash');
+        }
+        if (HLSJS.isSupported()) {
+            this.supportedMediaTransports.push('hls');
+        }
+        this.supportedMediaTransports.push('mpegts');
+    }
+    processMultisources(transport) {
+        return this.config.multisources.map((ms) => ({
+            ...ms,
+            source: this.selectMediaTransport(ms, transport),
+        })).filter((el) => !!el.source);
+    }
+}
+function unwrapSource(s) {
+    if (!s) {
+        return;
+    }
+    return typeof s === "string" ? s : s.source;
+}
+
+function fromStreamMediaSourceDto(s) {
+    return ({
+        ...s,
+        hlsCmafUrl: s.hls_cmaf_url,
+        hlsMpegtsUrl: s.hls_mpegts_url,
+        priorityTransport: s.priority_transport,
+        sourceDash: s.source_dash,
+        vtt: s.vtt,
+    });
+}
+
+const APP_NAME = "gplayer";
+class DebuggerWrapper {
+    writer;
+    namespace;
+    currentWriter;
+    constructor(writer, namespace, enabled = true) {
+        this.writer = writer;
+        this.namespace = namespace;
+        this.currentWriter = enabled ? writer : nullWriter;
+    }
+    enable() {
+        this.currentWriter = this.writer;
+    }
+    disable() {
+        this.currentWriter = nullWriter;
+    }
+    write = (m, ...args) => {
+        const tokens = args.map((_) => "%s");
+        if (typeof m === "string" || args.length > 0) {
+            tokens.unshift("%s");
+        }
+        this.currentWriter(`${this.namespace}: ${tokens.join(' ')}`, m, ...args.map(a => JSON.stringify(a)));
+    };
+}
+const currentPatterns = [];
+function parsePattern(pattern) {
+    if (pattern === "*") {
+        return /.?/;
+    }
+    return new RegExp("^" + pattern.replace(/\*/g, "[@\\w-]+"), "i");
+}
+function pass(namespace) {
+    return currentPatterns.some((p) => p.test(namespace));
+}
+function nullWriter() { }
+/**
+ * Logging utility with [debug](https://www.npmjs.com/package/debug)-like API
+ * @beta
+ */
+class Logger {
+    info;
+    warn;
+    error;
+    debug;
+    static items = [];
+    constructor(namespace, appName = APP_NAME) {
+        const ns = namespace ? `:${namespace}` : "";
+        const info = new DebuggerWrapper(console.info.bind(console), `${appName}:INFO${ns}`, pass(namespace));
+        this.info = info.write;
+        const warn = new DebuggerWrapper(console.warn.bind(console), `${appName}:WARN${ns}`, pass(namespace));
+        this.warn = warn.write;
+        const error = new DebuggerWrapper(console.error.bind(console), `${appName}:ERROR${ns}`, pass(namespace));
+        this.error = error.write;
+        const debug = new DebuggerWrapper(console.debug.bind(console), `${appName}:DEBUG${ns}`, pass(namespace));
+        this.debug = debug.write;
+        Logger.items.push(warn);
+        Logger.items.push(info);
+        Logger.items.push(error);
+        Logger.items.push(debug);
+    }
+    /**
+     * @param patterns - comma-separated list of patterns, can contain '*' as a wildcard
+     */
+    static enable(patterns) {
+        currentPatterns.splice(0, currentPatterns.length, ...patterns.split(",").filter(Boolean).map(parsePattern));
+        Logger.toggleItems();
+    }
+    static disable() {
+        currentPatterns.splice(0, currentPatterns.length);
+    }
+    static toggleItems() {
+        for (const w of Logger.items) {
+            if (pass(w.namespace)) {
+                w.enable();
+            }
+            else {
+                w.disable();
+            }
+        }
+    }
+}
+
+/**
+ * A tracer that logs to the console
+ * @public
+ */
+class LogTracer {
+    logger;
+    constructor(ns = "") {
+        this.logger = new Logger(ns);
+    }
+    reportError(e) {
+        this.logger.error(e);
+    }
+    trace(msg, data) {
+        this.logger.debug(msg, data);
+    }
+}
+
+/**
+ * @beta
+ */
+class SentryTracer {
+    client;
+    constructor(client) {
+        this.client = client;
+    }
+    reportError(e) {
+        this.client.captureException(e);
+    }
+    trace(msg, data) {
+        this.client.captureMessage(msg, "info", {
+            data,
+        });
+    }
+}
+
+export { LogTracer, Logger, Player, PlayerEvent, SentryTracer, fromStreamMediaSourceDto, reportError, setTracer, trace };

package/lib/Player.d.ts

@@ -0,0 +1,50 @@
+import '../assets/style/main.scss';
+import type { PlayerPlugin } from "./types";
+import { PlayerConfig } from "./types.js";
+export declare enum PlayerEvent {
+    Ready = "ready",
+    Play = "play",
+    Pause = "pause",
+    Stop = "stop",
+    Ended = "ended"
+}
+type PlayerEventHandler<T extends PlayerEvent> = () => void;
+/**
+ * @beta
+ */
+export declare class Player {
+    private emitter;
+    private player;
+    private pluginLoaders;
+    private clapprReady;
+    private timer;
+    private tuneInEntered;
+    private supportedMediaTransports;
+    private config;
+    get playing(): boolean;
+    get ready(): boolean;
+    constructor(config: PlayerConfig);
+    on<T extends PlayerEvent>(event: T, handler: PlayerEventHandler<T>): void;
+    off<T extends PlayerEvent>(event: T, handler: PlayerEventHandler<T>): void;
+    init(playerElement: HTMLElement): Promise<void>;
+    destroy(): void;
+    pause(): void;
+    play(): void;
+    seekTo(time: number): void;
+    stop(): void;
+    static registerPlugin(plugin: PlayerPlugin): void;
+    private loadPlugins;
+    private initPlayer;
+    private tuneIn;
+    private configurePlugins;
+    private events;
+    private buildCoreOptions;
+    private findMainSource;
+    private scheduleLoad;
+    private selectMediaTransport;
+    private getAvailableTransportsPreference;
+    private checkMediaTransportsSupport;
+    private processMultisources;
+}
+export {};
+//# sourceMappingURL=Player.d.ts.map

package/lib/Player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Player.d.ts","sourceRoot":"","sources":["../src/Player.ts"],"names":[],"mappings":"AAWA,OAAO,2BAA2B,CAAC;AAQnC,OAAO,KAAK,EACV,YAAY,EAEb,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,YAAY,EAGb,MAAM,YAAY,CAAC;AAEpB,oBAAY,WAAW;IACrB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,KAAK,UAAU;IACf,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAID,KAAK,kBAAkB,CAAC,CAAC,SAAS,WAAW,IAAI,MAAM,IAAI,CAAC;AAY5D;;GAEG;AACH,qBAAa,MAAM;IACjB,OAAO,CAAC,OAAO,CAAmB;IAElC,OAAO,CAAC,MAAM,CAA6B;IAE3C,OAAO,CAAC,aAAa,CAAkC;IAEvD,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,KAAK,CAA8C;IAE3D,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,CAAC,wBAAwB,CAAwB;IAExD,OAAO,CAAC,MAAM,CAAe;IAE7B,IAAI,OAAO,YAEV;IAED,IAAI,KAAK,YAER;gBAGC,MAAM,EAAE,YAAY;IAKtB,EAAE,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAIlE,GAAG,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAI7D,IAAI,CAAC,aAAa,EAAE,WAAW;IA6BrC,OAAO;IAQP,KAAK;IAKL,IAAI;IAKJ,MAAM,CAAC,IAAI,EAAE,MAAM;IAKnB,IAAI;IAKJ,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,YAAY;IAI1C,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;YA0BJ,MAAM;IA4BpB,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,MAAM,CA8CZ;IAEF,OAAO,CAAC,gBAAgB;IAsCxB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,oBAAoB;IA2B5B,OAAO,CAAC,gCAAgC;IAaxC,OAAO,CAAC,2BAA2B;IAWnC,OAAO,CAAC,mBAAmB;CAM5B"}