@gcorevideo/player 2.19.7 → 2.19.9

package/dist/index.js

@@ -41803,11 +41803,11 @@ class HlsPlayback extends HTML5Video {
         this._hls = null;
     }
     _createHLSInstance() {
-        const config = {
-            ...this.options.playback.hlsjsConfig,
+        const config = $.extend(true, {
             maxBufferLength: 2,
             maxMaxBufferLength: 4,
-        };
+        }, this.options.playback.hlsjsConfig);
+        trace(`${T$b} _createHLSInstance`, { config });
         this._hls = new Hls(config);
     }
     _attachHLSMedia() {
@@ -42779,11 +42779,10 @@ class Player {
             sources,
         });
         this.rootNode = rootNode;
-        const coreOptions = {
-            ...this.config, // plugin settings
+        const coreOptions = $.extend(true, this.config, {
             allowUserInteraction: true,
             autoPlay: false,
-            dash: this.config.dash, // TODO move this to the playback section
+            dash: this.config.dash,
             debug: this.config.debug || 'none',
             events: this.events,
             height: rootNode.clientHeight,
@@ -42796,7 +42795,6 @@ class Player {
                 mute: this.config.mute,
                 crossOrigin: 'anonymous', // TODO
                 hlsjsConfig: {
-                    // TODO
                     debug: this.config.debug === 'all' || this.config.debug === 'hls',
                 },
             },
@@ -42807,7 +42805,7 @@ class Player {
             mimeType: source ? source.mimeType : undefined,
             sources,
             strings: this.config.strings,
-        };
+        });
         return coreOptions;
     }
     configurePlaybacks() {
@@ -42865,7 +42863,7 @@ class Player {
     }
 }
 
-var version$1 = "2.19.7";
+var version$1 = "2.19.9";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -46238,6 +46236,7 @@ class ClipsPlugin extends UICorePlugin {
     duration = 0;
     durationGetting = false;
     _oldContainer;
+    svgMask = null;
     get name() {
         return 'clips';
     }
@@ -46289,7 +46288,7 @@ class ClipsPlugin extends UICorePlugin {
         }
         for (const value of this.clips.values()) {
             if (event.current >= value.start && event.current < value.end) {
-                this.core.mediaControl.setClipText(value.text);
+                this.setClipText(value.text);
                 break;
             }
         }
@@ -46336,7 +46335,26 @@ class ClipsPlugin extends UICorePlugin {
         });
         svg += `<rect x="${finishValue}" y="0" width="${widthOfSeek - finishValue}" height="30"/>\n`;
         svg += '</clipPath>' + '</defs>' + '</svg>';
+        this.setSVGMask(svg);
+    }
+    setSVGMask(svg) {
         this.core.mediaControl.setSVGMask(svg);
+        if (this.svgMask) {
+            this.svgMask.remove();
+        }
+        const $seekBarContainer = this.core.mediaControl.getElement('seekBarContainer');
+        if ($seekBarContainer?.get(0)) {
+            $seekBarContainer.addClass('clips');
+        }
+        this.svgMask = $(svg);
+        $seekBarContainer?.append(this.svgMask);
+    }
+    setClipText(text) {
+        const $clipText = this.core.mediaControl.getElement('clipText');
+        if ($clipText && text) {
+            $clipText.show();
+            $clipText.text(`${text}`);
+        }
     }
 }
 
@@ -47019,6 +47037,9 @@ class GoogleAnalytics extends ContainerPlugin {
 /* eslint-disable */
 // Kibo is released under the MIT License. Copyright (c) 2013 marquete.
 // see https://github.com/marquete/kibo
+/**
+ * @internal
+ */
 class Kibo {
     element;
     lastKeyCode = -1;
@@ -47715,9 +47736,14 @@ const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"
 // Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
-/**
- * The MediaControl is responsible for displaying the Player controls.
- */
+const LEFT_ORDER = [
+    'playpause',
+    'playstop',
+    'live',
+    'volume',
+    'position',
+    'duration',
+];
 const { Config, Fullscreen, formatTime: formatTime$1, extend, removeArrayItem } = Utils;
 function orderByOrderPattern(arr, order) {
     const arrWithoutDuplicates = [...new Set(arr)];
@@ -47725,6 +47751,13 @@ function orderByOrderPattern(arr, order) {
     const rest = arrWithoutDuplicates.filter((item) => !order.includes(item));
     return [...ordered, ...rest];
 }
+/**
+ * The MediaControl is responsible for displaying the Player controls.
+ * @beta
+ * @remarks
+ * This plugin provides a foundation for developing a media controls UI via additional plugins.
+ * The methods exposed are to be used by the other plugins that extend the media control UI.
+ */
 class MediaControl extends UICorePlugin {
     advertisementPlaying = false;
     buttonsColor = null;
@@ -47777,6 +47810,7 @@ class MediaControl extends UICorePlugin {
     $volumeBarScrubber = null;
     $volumeContainer = null;
     $volumeIcon = null;
+    template = tmpl(mediaControlHTML);
     get name() {
         return 'media_control';
     }
@@ -47828,14 +47862,17 @@ class MediaControl extends UICorePlugin {
             'mouseleave .media-control-layer[data-controls]': 'resetUserKeepVisible',
         };
     }
-    get template() {
-        return tmpl(mediaControlHTML);
-    }
+    /**
+     * Current volume
+     */
     get volume() {
         return this.container && this.container.isReady
             ? this.container.volume
             : this.intendedVolume;
     }
+    /**
+     * Muted state
+     */
     get muted() {
         return this.volume === 0;
     }
@@ -47930,15 +47967,27 @@ class MediaControl extends UICorePlugin {
         this.bindKeyEvents();
         this.show();
     }
+    /**
+     * Start the playback
+     */
     play() {
         this.container && this.container.play();
     }
+    /**
+     * Pause the playback
+     */
     pause() {
         this.container && this.container.pause();
     }
+    /**
+     * Stop the playback
+     */
     stop() {
         this.container && this.container.stop();
     }
+    /**
+     * Set the initial volume, which is preserved when playback is interrupted by an advertisement
+     */
     setInitialVolume() {
         const initialVolume = this.persistConfig ? Config.restore('volume') : 100;
         const options = (this.container && this.container.options) || this.options;
@@ -48138,6 +48187,13 @@ class MediaControl extends UICorePlugin {
     toggleMute() {
         this.setVolume(this.muted ? 100 : 0);
     }
+    /**
+     * Set the volume
+     * @param value - The volume value
+     * @param isInitialVolume - save as the initial volume
+     * @remarks
+     * Initial volume can be restored later
+     */
     setVolume(value, isInitialVolume = false) {
         value = Math.min(100, Math.max(value, 0));
         // this will hold the intended volume
@@ -48358,14 +48414,6 @@ class MediaControl extends UICorePlugin {
             default: [],
             right: [],
         });
-        const LEFT_ORDER = [
-            'playpause',
-            'playstop',
-            'live',
-            'volume',
-            'position',
-            'duration',
-        ];
         newSettings.left = orderByOrderPattern([...newSettings.left, 'clipsText', 'volume'], LEFT_ORDER);
         newSettings.right = [
             'fullscreen',
@@ -48432,12 +48480,20 @@ class MediaControl extends UICorePlugin {
         this.resetIndicators();
         this.initializeIcons();
     }
+    /**
+     * Get a media control element DOM node
+     * @param name - The name of the media control element
+     * @returns The DOM node to render the media control element
+     */
     getElement(name) {
         switch (name) {
+            case 'clipText':
+                return this.$clipText;
             case 'pip':
                 return this.$pip;
+            case 'seekBarContainer':
+                return this.$seekBarContainer;
         }
-        return null;
     }
     resetIndicators() {
         assert.ok(this.$duration && this.$position, 'duration and position elements must be present');
@@ -48636,9 +48692,6 @@ class MediaControl extends UICorePlugin {
         this.trigger(Events$1.MEDIACONTROL_RENDERED);
         return this;
     }
-    get bigPlayButton() {
-        return playIcon;
-    }
     handleFullScreenOnBtn() {
         this.trigger(Events$1.MEDIACONTROL_FULLSCREEN, this.name);
         this.container.fullscreen();
@@ -48656,37 +48709,24 @@ class MediaControl extends UICorePlugin {
         }
         this.resetUserKeepVisible();
     }
+    // TODO manage by the ads plugin
     onStartAd() {
         this.advertisementPlaying = true;
         this.disable();
     }
+    // TODO manage by the ads plugin
     onFinishAd() {
         this.advertisementPlaying = false;
         this.enable();
     }
-    setClipText(txt) {
-        if (this.$clipText && txt) {
-            this.$clipTextContainer?.show();
-            this.$clipText.text(`${txt}`);
-        }
-    }
+    // TODO remove
     hideControllAds() {
         if (this.container.advertisement &&
             this.container.advertisement.type !== 'idle') {
             this.hide();
         }
     }
-    setSVGMask(svg) {
-        if (this.svgMask) {
-            this.svgMask.remove();
-        }
-        if (this.$seekBarContainer?.get(0)) {
-            this.$seekBarContainer.addClass('clips');
-        }
-        this.svgMask = $(svg);
-        this.$seekBarContainer?.append(this.svgMask);
-    }
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=109212
+    // TODO
     setMuted(value) {
         this.container.options.mute = value;
     }
@@ -48702,13 +48742,17 @@ class MediaControl extends UICorePlugin {
         }
         return 0;
     }
-    //Решают проблему, когда нам не нужно, чтобы с помощью контролов человек мог запускать
-    // или останавливать поток, контролы, которыми он управляет не должны работать
+    /**
+     * Enable the control button
+     */
     enableControlButton() {
         this.disabledClickableList.forEach((element) => {
             element.el.css({ 'pointer-events': element.pointerEventValue });
         });
     }
+    /**
+     * Disable the control button
+     */
     disabledControlButton() {
         this.disabledClickableList.forEach((element) => {
             element.el.css({ 'pointer-events': 'none' });
@@ -51153,6 +51197,7 @@ class SourceController extends CorePlugin {
     onReady() {
         trace(`${T} onReady`, {
             retrying: this.active,
+            currentSource: this.sourcesList[this.currentSourceIndex],
         });
         const spinner = this.core.activeContainer?.getPlugin('spinner');
         if (spinner) {
@@ -51163,6 +51208,7 @@ class SourceController extends CorePlugin {
         else {
             this.sync = noSync;
         }
+        // TODO bind to CORE_ACTIVE_CONTAINER_CHANGED
         this.bindContainerEventListeners();
         if (this.active) {
             this.core.activeContainer?.getPlugin('poster_custom')?.disable();
@@ -51170,9 +51216,6 @@ class SourceController extends CorePlugin {
         }
     }
     bindContainerEventListeners() {
-        trace(`${T} bindContainerEventListeners`, {
-            activePlayback: this.core.activePlayback?.name,
-        });
         this.core.activePlayback.on(Events$1.PLAYBACK_ERROR, (error) => {
             trace(`${T} on PLAYBACK_ERROR`, {
                 error: {
@@ -51211,7 +51254,6 @@ class SourceController extends CorePlugin {
         trace(`${T} retryPlayback enter`, {
             currentSourceIndex: this.currentSourceIndex,
             currentSource: this.sourcesList[this.currentSourceIndex],
-            sourcesList: this.sourcesList,
         });
         this.active = true;
         this.getNextMediaSource().then((nextSource) => {
@@ -51220,9 +51262,7 @@ class SourceController extends CorePlugin {
             });
             const rnd = RETRY_DELAY_BLUR * Math.random();
             this.sync(() => {
-                trace(`${T} retryPlayback loading...`, {
-                    nextSource,
-                });
+                trace(`${T} retryPlayback loading...`);
                 this.core.load(nextSource.source, nextSource.mimeType);
                 trace(`${T} retryPlayback loaded`, {
                     nextSource,

package/dist/player.d.ts

@@ -18,7 +18,6 @@ import { CorePlugin } from '@clappr/core';
 import { Events } from 'hls.js';
 import { Logger } from '@gcorevideo/utils';
 import { LogTracer } from '@gcorevideo/utils';
-import { Player as Player_2 } from '@clappr/core';
 import { reportError as reportError_2 } from '@gcorevideo/utils';
 import { SentryTracer } from '@gcorevideo/utils';
 import { setTracer } from '@gcorevideo/utils';
@@ -93,7 +92,7 @@ export declare class BigMuteButton extends UICorePlugin {
         'click .big-mute-icon-wrapper': string;
     };
     bindEvents(): void;
-    unBindEvents(): void;
+    private unBindEvents;
     private onCoreReady;
     private onContainerVolume;
     private onContainerStart;
@@ -268,6 +267,7 @@ export declare class ClipsPlugin extends UICorePlugin {
     private duration;
     private durationGetting;
     private _oldContainer;
+    private svgMask;
     get name(): string;
     get attributes(): {
         class: string;
@@ -282,6 +282,8 @@ export declare class ClipsPlugin extends UICorePlugin {
     private parseClips;
     getText(time: number): string;
     makeSvg(duration: number): void;
+    private setSVGMask;
+    private setClipText;
 }
 
 /**
@@ -467,6 +469,9 @@ export declare class GoogleAnalytics extends ContainerPlugin {
 
 declare type KeyboardEventHandler = (e: KeyboardEvent) => boolean | undefined;
 
+/**
+ * @internal
+ */
 export declare class Kibo {
     private element;
     private lastKeyCode;
@@ -506,7 +511,6 @@ export declare type LangTag = string;
  *
  * - `labels`: The labels to show in the level selector. [vertical resolution]: string
  * - `restrictResolution`: The maximum resolution to allow in the level selector.
- * - `title`: The title to show in the level selector.
  *
  * @example
  * ```ts
@@ -552,7 +556,6 @@ export declare class LevelSelector extends UICorePlugin {
     private get maxLevel();
     private fillLevels;
     private makeLevelsLabels;
-    private findLevelBy;
     private onLevelSelect;
     private goBack;
     private setLevel;
@@ -599,6 +602,13 @@ export declare class Logo extends UIContainerPlugin {
 
 export { LogTracer }
 
+/**
+ * The MediaControl is responsible for displaying the Player controls.
+ * @beta
+ * @remarks
+ * This plugin provides a foundation for developing a media controls UI via additional plugins.
+ * The methods exposed are to be used by the other plugins that extend the media control UI.
+ */
 export declare class MediaControl extends UICorePlugin {
     private advertisementPlaying;
     private buttonsColor;
@@ -651,6 +661,7 @@ export declare class MediaControl extends UICorePlugin {
     private $volumeBarScrubber;
     private $volumeContainer;
     private $volumeIcon;
+    private readonly template;
     get name(): string;
     get supportedVersion(): {
         min: string;
@@ -689,10 +700,15 @@ export declare class MediaControl extends UICorePlugin {
         'mouseenter .media-control-layer[data-controls]': string;
         'mouseleave .media-control-layer[data-controls]': string;
     };
-    get template(): any;
+    /**
+     * Current volume
+     */
     get volume(): any;
+    /**
+     * Muted state
+     */
     get muted(): boolean;
-    constructor(core: Player_2);
+    constructor(core: Core);
     getExternalInterface(): {
         setVolume: (value: number, isInitialVolume?: boolean) => void;
         getVolume: () => any;
@@ -701,10 +717,22 @@ export declare class MediaControl extends UICorePlugin {
     bindContainerEvents(): void;
     disable(): void;
     enable(): void;
+    /**
+     * Start the playback
+     */
     play(): void;
+    /**
+     * Pause the playback
+     */
     pause(): void;
+    /**
+     * Stop the playback
+     */
     stop(): void;
-    private setInitialVolume;
+    /**
+     * Set the initial volume, which is preserved when playback is interrupted by an advertisement
+     */
+    setInitialVolume(): void;
     private onVolumeChanged;
     private onLoadedMetadataOnVideoTag;
     private updateVolumeUI;
@@ -714,66 +742,84 @@ export declare class MediaControl extends UICorePlugin {
     private onVolumeClick;
     private mousemoveOnVolumeBar;
     private playerResize;
-    togglePlayPause(): boolean;
-    togglePlayStop(): void;
-    startSeekDrag(event: MouseEvent): void;
-    startVolumeDrag(event: MouseEvent): void;
-    stopDrag: (event: MouseEvent) => void;
-    updateDrag: (event: MouseEvent | TouchEvent) => void;
-    getVolumeFromUIEvent(event: MouseEvent | TouchEvent): number;
-    toggleMute(): void;
+    private togglePlayPause;
+    private togglePlayStop;
+    private startSeekDrag;
+    private startVolumeDrag;
+    private stopDrag;
+    private updateDrag;
+    private getVolumeFromUIEvent;
+    private toggleMute;
+    /**
+     * Set the volume
+     * @param value - The volume value
+     * @param isInitialVolume - save as the initial volume
+     * @remarks
+     * Initial volume can be restored later
+     */
     setVolume(value: number, isInitialVolume?: boolean): void;
-    toggleFullscreen(): void;
-    onActiveContainerChanged(): void;
-    showVolumeBar(): void;
-    hideVolumeBar(timeout?: number): void;
-    ended(): void;
-    updateProgressBar(progress: TimeProgress): void;
-    onTimeUpdate(timeProgress: TimeProgress): void;
-    renderSeekBar(): void;
-    drawDurationAndPosition(): void;
-    seek(event: MouseEvent): false | undefined;
-    setKeepVisible(): void;
-    resetKeepVisible(): void;
-    setUserKeepVisible(): void;
-    resetUserKeepVisible(): void;
-    isVisible(): boolean;
-    show(event?: MouseEvent): void;
-    hide(delay?: number): void;
-    updateCursorStyle(showing: boolean): void;
+    private toggleFullscreen;
+    private onActiveContainerChanged;
+    private showVolumeBar;
+    private hideVolumeBar;
+    private ended;
+    private updateProgressBar;
+    private onTimeUpdate;
+    private renderSeekBar;
+    private drawDurationAndPosition;
+    private seek;
+    private setKeepVisible;
+    private resetKeepVisible;
+    private setUserKeepVisible;
+    private resetUserKeepVisible;
+    private isVisible;
+    private show;
+    private hide;
+    private updateCursorStyle;
     private settingsUpdate;
-    getSettings(): any;
-    highDefinitionUpdate(isHD: boolean): void;
-    createCachedElements(): void;
+    private getSettings;
+    private highDefinitionUpdate;
+    private createCachedElements;
+    /**
+     * Get a media control element DOM node
+     * @param name - The name of the media control element
+     * @returns The DOM node to render the media control element
+     */
     getElement(name: MediaControlElement): ZeptoResult | null;
-    resetIndicators(): void;
-    initializeIcons(): void;
-    setSeekPercentage(value: number): void;
-    seekRelative(delta: number): void;
-    bindKeyAndShow(key: string, callback: () => boolean | undefined): void;
-    bindKeyEvents(): void;
-    unbindKeyEvents(): void;
-    parseColors(): void;
-    applyButtonStyle(element: ZeptoResult | undefined): void;
+    private resetIndicators;
+    private initializeIcons;
+    private setSeekPercentage;
+    private seekRelative;
+    private bindKeyAndShow;
+    private bindKeyEvents;
+    private unbindKeyEvents;
+    private parseColors;
+    private applyButtonStyle;
     destroy(): UIObject;
-    configure(): void;
+    private configure;
     render(): this;
-    get bigPlayButton(): any;
     private handleFullScreenOnBtn;
-    onStartAd(): void;
-    onFinishAd(): void;
-    setClipText(txt: unknown): void;
-    hideControllAds(): void;
-    setSVGMask(svg: string): void;
+    private onStartAd;
+    private onFinishAd;
+    private hideControllAds;
     setMuted(value: boolean): void;
     private static getPageX;
     private static getPageY;
+    /**
+     * Enable the control button
+     */
     enableControlButton(): void;
+    /**
+     * Disable the control button
+     */
     disabledControlButton(): void;
-    isSeekEnabledForHtml5Playback(): any;
+    private isSeekEnabledForHtml5Playback;
 }
 
-declare type MediaControlElement = 'pip';
+/**
+ * @beta
+ */
+export declare type MediaControlElement = 'clipText' | 'pip' | 'seekBarContainer';
 
 declare type MediaSourceInfo = {
     live: boolean;
@@ -1827,6 +1873,11 @@ export declare type TimeProgress = TimePosition & {
     start: number;
 };
 
+/**
+ * @internal
+ */
+export declare type TimerId = ReturnType<typeof setTimeout>;
+
 /**
  * For the plugin development
  * @beta
@@ -1918,6 +1969,9 @@ export declare enum VolumeFadeEvents {
     FADE = "core:volume:fade"
 }
 
-declare type ZeptoResult = ReturnType<typeof $>;
+/**
+ * @beta
+ */
+export declare type ZeptoResult = ReturnType<typeof $>;
 
 export { }