@gcorevideo/player 2.24.13 → 2.25.0

package/dist/index.js

@@ -43314,7 +43314,7 @@ class Player {
     }
 }
 
-var version$1 = "2.24.13";
+var version$1 = "2.25.0";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43622,16 +43622,27 @@ 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 {@link https://github.com/clappr/clappr-plugins/blob/master/LICENSE | LICENSE}.
+const STANDARD_MEDIA_CONTROL_ELEMENTS = [
+    'duration',
+    'fullscreen',
+    'hd-indicator',
+    'playpause',
+    'playstop',
+    'position',
+    'seekbar',
+    'volume',
+];
+// TODO export
 const DEFAULT_SETTINGS = {
+    default: ['seekbar'],
+    left: ['playpause', 'playstop', 'position', 'duration', 'volume'],
     right: [
-        'audiotracks',
-        'cc',
+        '*',
+        // 'hd-indicator',
         'fullscreen',
-        'gear',
-        'multicamera',
-        'pip',
-        'vr',
-    ]};
+    ],
+    seekEnabled: true,
+};
 const INITIAL_SETTINGS = {
     left: [],
     right: [],
@@ -43639,14 +43650,6 @@ const INITIAL_SETTINGS = {
     seekEnabled: false,
 };
 const T$k = 'plugins.media_control';
-const LEFT_ORDER = [
-    'playpause',
-    'playstop',
-    'volume',
-    'position',
-    'duration',
-    'dvr',
-];
 /**
  * Extended events for the {@link MediaControl} plugin
  * @beta
@@ -43657,25 +43660,21 @@ var ExtendedEvents;
     ExtendedEvents["MEDIACONTROL_MENU_COLLAPSE"] = "mediacontrol:menu:collapse";
 })(ExtendedEvents || (ExtendedEvents = {}));
 const { Config, Fullscreen, formatTime: formatTime$1, extend, removeArrayItem } = Utils;
-function orderByOrderPattern(arr, order) {
-    const arrWithoutDuplicates = [...new Set(arr)];
-    const ordered = order.filter((item) => arrWithoutDuplicates.includes(item));
-    const rest = arrWithoutDuplicates.filter((item) => !order.includes(item));
-    return [...ordered, ...rest];
-}
 /**
- * `PLUGIN` that provides basic playback controls UI and a foundation for developing custom UI.
+ * `PLUGIN` that provides framework for building media control UI.
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
  *
- * Configuration options:
+ * Configuration options (root level)
+ *
+ * - `hideMediaControlDelay`: number - specifies the delay in milliseconds before the media control UI is hidden after the last user interaction
  *
- * - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
+ * - `mediaControl`: {@link MediaControlSettings} - specifies the media control dashboard layout
  *
  * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
  *
- * - `chromeless`: boolean
+ * - `chromeless`: boolean - `common` option, hides the media control UI
  */
 class MediaControl extends UICorePlugin {
     // private advertisementPlaying = false
@@ -43683,7 +43682,7 @@ class MediaControl extends UICorePlugin {
     currentDurationValue = 0;
     currentPositionValue = 0;
     currentSeekBarPercentage = 0;
-    disabledClickableList = [];
+    // private disabledClickableList: DisabledClickable[] = []
     displayedDuration = null;
     displayedPosition = null;
     displayedSeekBarPercentage = null;
@@ -43708,7 +43707,6 @@ class MediaControl extends UICorePlugin {
     verticalVolume = false;
     $duration = null;
     $fullscreenToggle = null;
-    $multiCameraSelector = null;
     $playPauseToggle = null;
     $playStopToggle = null;
     $position = null;
@@ -43736,6 +43734,46 @@ class MediaControl extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION$1 };
     }
+    /**
+     * @returns  Default media control layout settings
+     * @remark
+     * The method can be used to change the default dashboard layout, for example, removing the standard UI elements
+     * @example
+     * ```ts
+     * const settings = MediaControl.defaultSettings()
+     * settings.left = settings.filter(item => item !== 'playpause' && item !== 'playstop')
+     * ...
+     * new Player({
+     *   mediaControl: settings,
+     * })
+     * ```
+     */
+    static defaultSettings() {
+        return $.extend(true, {}, DEFAULT_SETTINGS);
+    }
+    /**
+     * Extend the default media control layout settings
+     * @param settings - Additional settings
+     * @returns The extended settings
+     * @remarks
+     * This method allows adding custom elements to the media control dashboard.
+     * The default settings are not modified.
+     * @example
+     * ```ts
+     * new Player({
+     *   mediaControl: MediaControl.extendSettings({
+     *     left: ['*'], // add all custom elements to the left panel
+     *   }),
+     * })
+     * ```
+     */
+    static extendSettings(settings) {
+        return {
+            left: mergeElements(DEFAULT_SETTINGS.left, settings.left ?? []),
+            right: mergeElements(DEFAULT_SETTINGS.right, settings.right ?? []),
+            default: mergeElements(DEFAULT_SETTINGS.default, settings.default ?? []),
+        };
+    }
     get disabled() {
         const playbackIsNOOP = this.core.activeContainer &&
             this.core.activeContainer.getPlaybackType() === Playback.NO_OP;
@@ -43999,9 +44037,7 @@ class MediaControl extends UICorePlugin {
         this.applyButtonStyle(this.$volumeIcon);
     }
     changeTogglePlay() {
-        // assert.ok(this.$playPauseToggle, 'play/pause toggle must be present');
         this.$playPauseToggle?.html('');
-        // assert.ok(this.$playStopToggle, 'play/stop toggle must be present');
         this.$playStopToggle?.html('');
         if (this.container && this.container.isPlaying()) {
             this.$playPauseToggle?.append(pauseIcon);
@@ -44367,36 +44403,32 @@ class MediaControl extends UICorePlugin {
         }
     }
     updateSettings() {
-        const newSettings = $.extend(true, {
+        // TODO use this.options.mediaControl to additionally filter the settings
+        const container = $.extend(true, {
             left: [],
             default: [],
             right: [],
         }, this.core.activeContainer.settings);
-        newSettings.left.push('clips'); // TODO settings
-        // TODO make order controlled via CSS
-        newSettings.left = orderByOrderPattern([...newSettings.left, 'volume', 'clips'], LEFT_ORDER);
-        if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
-            this.core.activePlayback.dvrEnabled) {
-            newSettings.left.push('dvr');
-        }
-        // actual order of the items appear rendered is controlled by CSS
-        newSettings.right = DEFAULT_SETTINGS.right; // TODO get from the options
+        container.left.push('volume');
+        const setup = this.options.mediaControl ?? DEFAULT_SETTINGS;
         if ((!this.fullScreenOnVideoTagSupported && !fullscreenEnabled()) ||
             this.options.fullscreenDisable) {
             // remove fullscreen from settings if it is not available
-            removeArrayItem(newSettings.default, 'fullscreen');
-            removeArrayItem(newSettings.left, 'fullscreen');
-            removeArrayItem(newSettings.right, 'fullscreen');
+            removeArrayItem(container.default, 'fullscreen');
+            removeArrayItem(container.left, 'fullscreen');
+            removeArrayItem(container.right, 'fullscreen');
         }
-        removeArrayItem(newSettings.default, 'hd-indicator');
-        removeArrayItem(newSettings.left, 'hd-indicator');
         // TODO get from container's settings
         if (this.core.activePlayback.name === 'html5_video') {
-            newSettings.seekEnabled = this.isSeekEnabledForHtml5Playback();
+            container.seekEnabled = this.isSeekEnabledForHtml5Playback();
+            // TODO remove seekbar if seek is disabled?
         }
-        const settingsChanged = !isEqualSettings(this.settings, newSettings);
+        container.left = evalSettings(container.left, setup.left);
+        container.right = evalSettings(container.right, setup.right);
+        container.default = evalSettings(container.default, setup.default);
+        const settingsChanged = !isEqualSettings(this.settings, container);
         if (settingsChanged) {
-            this.settings = newSettings;
+            this.settings = container;
             this.hasUpdate = true;
             this.render();
         }
@@ -44422,15 +44454,37 @@ class MediaControl extends UICorePlugin {
         this.$volumeBarBackground = this.$el.find('.bar-background[data-volume]');
         this.$volumeBarFill = this.$el.find('.bar-fill-1[data-volume]');
         this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]');
-        this.$multiCameraSelector = this.$el.find('.media-control-multicamera[data-multicamera]');
         this.resetIndicators();
         this.initializeIcons();
     }
     /**
-     * Get a media control element DOM node
+     * Mount a media control to its configured location
      * @param name - The name of the media control element
      * @param element - The DOM node/fragment to mount
-     * @deprecated Use {@link MediaControl.mount} instead
+     * @remarks
+     * Media controls layout is configured via {@link MediaControlSettings}.
+     * A plugin implementing custom elements on the media control dashboard,
+     * should use this method to mount the element to the correct location.
+     * The actual location is defined by the occurence of the element token in the `left`, `right` or `default` section
+     * of the {@link MediaControlSettings}.
+     * @example
+     * ```ts
+     * class MyPlugin extends UICorePlugin {
+     *   override render() {
+     *     // mount the element where it is configured in the layout
+     *     this.core.getPlugin('media_control').slot('my-element', this.$el)
+     *   }
+     * }
+     * ...
+     * Player.registerPlugin(MyPlugin)
+     * ...
+     * // Configuration of the media control layout
+     * new Player({
+     *   mediaControl: {
+     *     left: ['my-element'], // the element will be mounted to the left panel
+     *   },
+     * })
+     * ```
      */
     slot(name, element) {
         const panel = this.getElementLocation(name);
@@ -44650,7 +44704,6 @@ class MediaControl extends UICorePlugin {
             return this;
         }
         const timeout = this.options.hideMediaControlDelay || 2000;
-        trace(`${T$k} render`, { settings: this.settings });
         this.$el.html(MediaControl.template({ settings: this.settings }));
         // const style = Styler.getStyleFor(mediaControlStyle, { baseUrl: this.options.baseUrl });
         // this.$el.append(style[0]);
@@ -44747,22 +44800,6 @@ class MediaControl extends UICorePlugin {
         }
         return 0;
     }
-    /**
-     * Enable the user interaction disabled earlier
-     */
-    enableControlButton() {
-        this.disabledClickableList.forEach((element) => {
-            element.el.css({ 'pointer-events': element.pointerEventValue });
-        });
-    }
-    /**
-     * Disable the user interaction for the control buttons
-     */
-    disabledControlButton() {
-        this.disabledClickableList.forEach((element) => {
-            element.el.css({ 'pointer-events': 'none' });
-        });
-    }
     // TODO drop
     isSeekEnabledForHtml5Playback() {
         if (this.core.getPlaybackType() === Playback.LIVE) {
@@ -44771,13 +44808,14 @@ class MediaControl extends UICorePlugin {
         return isFinite(this.core.activePlayback.getDuration());
     }
     getElementLocation(name) {
-        if (this.settings.right?.includes(name)) {
-            return this.getRightPanel();
-        }
-        if (this.settings.left?.includes(name)) {
+        if (this.settings.left.includes(name) || this.settings.left.includes('*')) {
             return this.getLeftPanel();
         }
-        if (this.settings.default?.includes(name)) {
+        if (this.settings.right.includes(name) ||
+            this.settings.right.includes('*')) {
+            return this.getRightPanel();
+        }
+        if (this.settings.default.includes(name)) {
             return this.getCenterPanel();
         }
         return null;
@@ -44795,7 +44833,8 @@ MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
 };
 function serializeSettings(s) {
-    return s.left.slice()
+    return s.left
+        .slice()
         .sort()
         .concat(s.right.slice().sort())
         .concat(s.default.slice().sort())
@@ -44810,6 +44849,25 @@ function mountTo(parent, element) {
         parent.append(element);
     }
 }
+function isStandardMediaControl(name) {
+    return STANDARD_MEDIA_CONTROL_ELEMENTS.includes(name);
+}
+function evalSettings(container, setup) {
+    return setup.filter((item) => {
+        if (isStandardMediaControl(item)) {
+            return container.includes(item);
+        }
+        return true;
+    });
+}
+function mergeElements(a, b) {
+    return b.reduce((acc, item) => {
+        if (!acc.includes(item)) {
+            acc.push(item);
+        }
+        return acc;
+    }, a);
+}
 
 const VERSION$7 = '2.22.4';
 const T$j = 'plugins.audiotracks';
@@ -48490,11 +48548,12 @@ function buildSvg(clips, duration, barWidth) {
     return svg;
 }
 
-const clipsHTML = "<div class=\"media-clip-text\" id=\"clips-text\"></div>";
+const clipsHTML = "<div class=\"gplayer-mc-clips-text\" id=\"gplayer-mc-clips-text\"></div>";
 
 const T$e = 'plugins.clips';
 const VERSION$5 = '2.22.16';
 const CLAPPR_VERSION = '0.11.4';
+const COMPACT_WIDTH = 495;
 /**
  * `PLUGIN` that allows marking up the timeline of the video
  * @beta
@@ -48524,7 +48583,7 @@ class Clips extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: 'media-control-clips',
+            class: 'media-control-clips gplayer-mc-clips',
         };
     }
     get version() {
@@ -48592,6 +48651,7 @@ class Clips extends UICorePlugin {
     onContainerChanged() {
         trace(`${T$e} onContainerChanged`);
         // TODO figure out the conditions of changing the container (without destroying the previous one)
+        // probably it is the case with the MultiCamera plugin
         if (this.oldContainer) {
             this.stopListening(this.oldContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         }
@@ -48601,12 +48661,24 @@ class Clips extends UICorePlugin {
             this.svgMask = null;
         }
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+        this.toggleCompact();
     }
     playerResize() {
         const duration = this.core.activeContainer.getDuration();
+        // TODO check
         if (duration) {
             this.makeSvg(duration);
         }
+        this.toggleCompact();
+    }
+    toggleCompact() {
+        const elText = this.$el.find('#gplayer-mc-clips-text');
+        if (this.core.activeContainer.el.clientWidth <= COMPACT_WIDTH) {
+            elText.addClass('compact');
+        }
+        else {
+            elText.removeClass('compact');
+        }
     }
     onTimeUpdate(event) {
         if (!this.svgMask) {
@@ -48644,7 +48716,7 @@ class Clips extends UICorePlugin {
     }
     setClipText(text) {
         if (text) {
-            this.$el.show().find('#clips-text').text(text);
+            this.$el.show().find('#gplayer-mc-clips-text').text(text);
         }
         else {
             this.$el.hide();
@@ -48863,7 +48935,7 @@ class DvrControls extends UICorePlugin {
         // TODO -> to MediaControl (auto hide)
         mediaControl.toggleElement('duration', false);
         mediaControl.toggleElement('position', false);
-        mediaControl.mount('left', this.$el); // TODO use independent mount point
+        mediaControl.slot('dvr', this.$el); // TODO use independent mount point
     }
     onDvrStateChanged(dvrInUse) {
         this.toggleState(dvrInUse);

package/dist/player.d.ts

@@ -575,6 +575,7 @@ export declare class Clips extends UICorePlugin {
     private onMcRender;
     private onContainerChanged;
     private playerResize;
+    private toggleCompact;
     private onTimeUpdate;
     private parseClips;
     private makeSvg;
@@ -912,6 +913,7 @@ export declare class DvrControls extends UICorePlugin {
      */
     get attributes(): {
         class: string;
+        'data-dvr': string;
     };
     /**
      * @internal
@@ -1177,25 +1179,26 @@ export declare class Logo extends UIContainerPlugin {
 export { LogTracer }
 
 /**
- * `PLUGIN` that provides basic playback controls UI and a foundation for developing custom UI.
+ * `PLUGIN` that provides framework for building media control UI.
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
  *
- * Configuration options:
+ * Configuration options (root level)
  *
- * - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
+ * - `hideMediaControlDelay`: number - specifies the delay in milliseconds before the media control UI is hidden after the last user interaction
+ *
+ * - `mediaControl`: {@link MediaControlSettings} - specifies the media control dashboard layout
  *
  * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
  *
- * - `chromeless`: boolean
+ * - `chromeless`: boolean - `common` option, hides the media control UI
  */
 export declare class MediaControl extends UICorePlugin {
     private buttonsColor;
     private currentDurationValue;
     private currentPositionValue;
     private currentSeekBarPercentage;
-    private disabledClickableList;
     private displayedDuration;
     private displayedPosition;
     private displayedSeekBarPercentage;
@@ -1220,7 +1223,6 @@ export declare class MediaControl extends UICorePlugin {
     private verticalVolume;
     private $duration;
     private $fullscreenToggle;
-    private $multiCameraSelector;
     private $playPauseToggle;
     private $playStopToggle;
     private $position;
@@ -1246,6 +1248,42 @@ export declare class MediaControl extends UICorePlugin {
     get supportedVersion(): {
         min: string;
     };
+    /**
+     * @returns  Default media control layout settings
+     * @remark
+     * The method can be used to change the default dashboard layout, for example, removing the standard UI elements
+     * @example
+     * ```ts
+     * const settings = MediaControl.defaultSettings()
+     * settings.left = settings.filter(item => item !== 'playpause' && item !== 'playstop')
+     * ...
+     * new Player({
+     *   mediaControl: settings,
+     * })
+     * ```
+     */
+    static defaultSettings(): any;
+    /**
+     * Extend the default media control layout settings
+     * @param settings - Additional settings
+     * @returns The extended settings
+     * @remarks
+     * This method allows adding custom elements to the media control dashboard.
+     * The default settings are not modified.
+     * @example
+     * ```ts
+     * new Player({
+     *   mediaControl: MediaControl.extendSettings({
+     *     left: ['*'], // add all custom elements to the left panel
+     *   }),
+     * })
+     * ```
+     */
+    static extendSettings(settings: Partial<MediaControlSettings>): {
+        left: string[];
+        right: string[];
+        default: string[];
+    };
     private get disabled();
     /**
      * Use in mediacontrol-based plugins to access the active container
@@ -1379,23 +1417,54 @@ export declare class MediaControl extends UICorePlugin {
     private onHdUpdate;
     private createCachedElements;
     /**
-     * Get a media control element DOM node
+     * Mount a media control to its configured location
      * @param name - The name of the media control element
-     * @returns The DOM node to render to or extend
+     * @param element - The DOM node/fragment to mount
+     * @remarks
+     * Media controls layout is configured via {@link MediaControlSettings}.
+     * A plugin implementing custom elements on the media control dashboard,
+     * should use this method to mount the element to the correct location.
+     * The actual location is defined by the occurence of the element token in the `left`, `right` or `default` section
+     * of the {@link MediaControlSettings}.
+     * @example
+     * ```ts
+     * class MyPlugin extends UICorePlugin {
+     *   override render() {
+     *     // mount the element where it is configured in the layout
+     *     this.core.getPlugin('media_control').slot('my-element', this.$el)
+     *   }
+     * }
+     * ...
+     * Player.registerPlugin(MyPlugin)
+     * ...
+     * // Configuration of the media control layout
+     * new Player({
+     *   mediaControl: {
+     *     left: ['my-element'], // the element will be mounted to the left panel
+     *   },
+     * })
+     * ```
+     */
+    slot(name: MediaControlElement, element: ZeptoResult): void;
+    /**
+     * Mounts a media control element at a specific location
+     * @param name - The location to mount the element
+     * @param element - The element to mount
      * @remarks
      * Use this method to render custom media control UI in a plugin
      * @example
      * ```ts
      * class MyPlugin extends UICorePlugin {
      *   override render() {
-     *     this.$el.html('<div data-clips>Here we go</div>')
-     *     this.core.getPlugin('media_control').mount('clips', this.$el)
+     *     this.$el.html('<div id="my-element" class="my-class">Here we go</div>')
+     *     this.core.getPlugin('media_control').mount('left', this.$el)
      *     return this
      *   }
      * }
      * ```
      */
-    mount(name: MediaControlElement, element: ZeptoResult): void;
+    mount(name: MediaControlSlotMountPoint, element: ZeptoResult): void;
+    private getMountParent;
     /**
      * Toggle the visibility of a media control element
      * @param name - The name of the media control element
@@ -1430,54 +1499,43 @@ export declare class MediaControl extends UICorePlugin {
     private hideControllAds;
     private static getPageX;
     private static getPageY;
-    /**
-     * Enable the user interaction disabled earlier
-     */
-    enableControlButton(): void;
-    /**
-     * Disable the user interaction for the control buttons
-     */
-    disabledControlButton(): void;
     private isSeekEnabledForHtml5Playback;
     private getElementLocation;
     private onDvrStateChanged;
 }
 
 /**
- * Built-in media control elements.
- * @beta
- */
-export declare type MediaControlElement = MediaControlLeftElement | MediaControlLayerElement | MediaControlRightElement;
-
-/**
- * Media control elements that appear in main layer, spanning the entire width of the player.
+ * Media control element.
+ * Each element's token in the media control layout settings determines where the element is rendered.
  * @beta
+ * @remarks
+ * Standard media control elements are defined in the {@link StandardMediaControlElement} type.
+ * Custom media control elements can be identified by a unique token.
  */
-export declare type MediaControlLayerElement = 'seekbar' | 'seekBarContainer';
+export declare type MediaControlElement = string;
 
-/**
- * Media control elements that appear in the left area.
- * @beta
- */
-export declare type MediaControlLeftElement = 'clipText' | 'duration' | 'dvr' | 'playpause' | 'playstop' | 'position' | 'volume' | 'clips';
+export declare type MediaControlPluginSettings = {
+    hideMediaControlDelay?: number;
+};
 
 /**
- * Media control elements that appear in the right area.
+ * Specifies the layout of media control elements.
+ * Actual elements will be rendered according to the playback settings. Custom elements rendered by the plugins
+ * will be mounted at the specified locations.
  * @beta
  */
-export declare type MediaControlRightElement = 'audiotracks' | 'cc' | 'fullscreen' | 'hd-indicator' | 'gear' | 'multicamera' | 'pip' | 'vr';
+export declare type MediaControlSettings = {
+    left: MediaControlElement[];
+    right: MediaControlElement[];
+    default: MediaControlElement[];
+    seekEnabled: boolean;
+};
 
 /**
- * Specifies the allowed media control elements in each area.
- * Can be used to restrict rendered media control elements.
+ * Identifies a location for mounting custom media control elements.
  * @beta
  */
-export declare type MediaControlSettings = {
-    left: MediaControlLeftElement[];
-    right: MediaControlRightElement[];
-    default: MediaControlLayerElement[];
-    seekEnabled: boolean;
-};
+export declare type MediaControlSlotMountPoint = 'root' | 'base' | 'left' | 'right' | 'center' | 'seekbar';
 
 /**
  * @beta
@@ -2878,6 +2936,12 @@ export declare interface StallEventData {
     time: number;
 }
 
+/**
+ * Built-in media control elements.
+ * @beta
+ */
+export declare type StandardMediaControlElement = 'duration' | 'fullscreen' | 'hd-indicator' | 'playpause' | 'playstop' | 'position' | 'seekbar' | 'volume';
+
 /**
  * Telemetry start event data
  * @beta