@gcorevideo/player 2.19.12 → 2.19.14

package/lib/plugins/media-control/MediaControl.d.ts

@@ -3,15 +3,22 @@ import { ZeptoResult } from '../../utils/types.js';
 import '../../../assets/media-control/media-control.scss';
 import '../../../assets/media-control/plugins.scss';
 /**
+ * Media control elements, mount points for additional plugins
  * @beta
  */
-export type MediaControlElement = 'clipText' | 'pip' | 'seekBarContainer';
+export type MediaControlElement = 'bottomGear' | 'clipText' | 'gear' | 'pip' | 'playbackRate' | 'seekBarContainer';
 /**
- * The MediaControl is responsible for displaying the Player controls.
+ * The MediaControl provides a foundation for developing custom media controls UI.
  * @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.
+ * The plugin registration should be arranged so that MediaControl is initialized before every other plugin that depends on it.
+ * @example
+ * ```ts
+ * Player.registerPlugin(MediaControl) // <--- This must go first
+ * Player.registerPlugin(LevelSelector) // a media control plugin
+ * Player.registerPlugin(NerdStats) // another media control plugin
+ * ```
  */
 export declare class MediaControl extends UICorePlugin {
     private advertisementPlaying;
@@ -37,7 +44,6 @@ export declare class MediaControl extends UICorePlugin {
     private persistConfig;
     private rendered;
     private settings;
-    private svgMask;
     private userDisabled;
     private userKeepVisible;
     private verticalVolume;
@@ -66,17 +72,37 @@ export declare class MediaControl extends UICorePlugin {
     private $volumeContainer;
     private $volumeIcon;
     private static readonly template;
+    /**
+     * @internal
+     */
     get name(): string;
+    /**
+     * @internal
+     */
     get supportedVersion(): {
         min: string;
     };
-    get disabled(): any;
+    private get disabled();
+    /**
+     * @internal
+     * @deprecated
+     */
     get container(): any;
+    /**
+     * @internal
+     * @deprecated
+     */
     get playback(): any;
+    /**
+     * @internal
+     */
     get attributes(): {
         class: string;
         'data-media-control-skin-1': string;
     };
+    /**
+     * @internal
+     */
     get events(): {
         'click [data-play]': string;
         'click [data-pause]': string;
@@ -105,34 +131,34 @@ export declare class MediaControl extends UICorePlugin {
         'mouseleave .media-control-layer[data-controls]': string;
     };
     /**
-     * Current volume
+     * Current volume [0..100]
      */
-    get volume(): any;
+    get volume(): number;
     /**
      * Muted state
      */
     get muted(): boolean;
     constructor(core: Core);
+    /**
+     * @internal
+     */
     getExternalInterface(): {
         setVolume: (value: number, isInitialVolume?: boolean) => void;
-        getVolume: () => any;
+        getVolume: () => number;
     };
-    bindEvents(): void;
-    bindContainerEvents(): void;
-    disable(): void;
-    enable(): void;
     /**
-     * Start the playback
+     * @internal
      */
-    play(): void;
+    bindEvents(): void;
+    private bindContainerEvents;
     /**
-     * Pause the playback
+     * Disables the plugin and unmounts its UI
      */
-    pause(): void;
+    disable(): void;
     /**
-     * Stop the playback
+     * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
-    stop(): void;
+    enable(): void;
     /**
      * Set the initial volume, which is preserved when playback is interrupted by an advertisement
      */
@@ -187,7 +213,20 @@ export declare class MediaControl extends UICorePlugin {
     /**
      * 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
+     * @returns The DOM node to render to or extend
+     * @remarks
+     * Use this method to render custom media control UI in a plugin
+     * @example
+     * ```ts
+     * class MyPlugin extends UICorePlugin {
+     *   override render() {
+     *     const mediaControl = this.core.getPlugin('media_control')
+     *     const clipText = mediaControl.getElement('clipText')
+     *     clipText?.el.text('Here we go')
+     *     return this
+     *   }
+     * }
+     * ```
      */
     getElement(name: MediaControlElement): ZeptoResult | null;
     private resetIndicators;
@@ -199,22 +238,27 @@ export declare class MediaControl extends UICorePlugin {
     private unbindKeyEvents;
     private parseColors;
     private applyButtonStyle;
+    /**
+     * @internal
+     */
     destroy(): import("@clappr/core").UIObject;
     private configure;
+    /**
+     * @internal
+     */
     render(): this;
     private handleFullScreenOnBtn;
     private onStartAd;
     private onFinishAd;
     private hideControllAds;
-    setMuted(value: boolean): void;
     private static getPageX;
     private static getPageY;
     /**
-     * Enable the control button
+     * Enable the user interaction disabled earlier
      */
     enableControlButton(): void;
     /**
-     * Disable the control button
+     * Disable the user interaction for the control buttons
      */
     disabledControlButton(): void;
     private isSeekEnabledForHtml5Playback;

package/lib/plugins/media-control/MediaControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaControl.d.ts","sourceRoot":"","sources":["../../../src/plugins/media-control/MediaControl.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"MediaControl.d.ts","sourceRoot":"","sources":["../../../src/plugins/media-control/MediaControl.ts"],"names":[],"mappings":"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"}

package/lib/plugins/media-control/MediaControl.js

@@ -5,7 +5,7 @@ import assert from 'assert';
 import { Events, UICorePlugin, Browser, Playback, Utils, template, $, } from '@clappr/core';
 import { reportError } from '@gcorevideo/utils';
 import { Kibo } from '../kibo/index.js';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import { getPageX, isFullscreen } from '../utils.js';
 import '../../../assets/media-control/media-control.scss';
 import '../../../assets/media-control/plugins.scss';
@@ -34,11 +34,17 @@ function orderByOrderPattern(arr, order) {
     return [...ordered, ...rest];
 }
 /**
- * The MediaControl is responsible for displaying the Player controls.
+ * The MediaControl provides a foundation for developing custom media controls UI.
  * @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.
+ * The plugin registration should be arranged so that MediaControl is initialized before every other plugin that depends on it.
+ * @example
+ * ```ts
+ * Player.registerPlugin(MediaControl) // <--- This must go first
+ * Player.registerPlugin(LevelSelector) // a media control plugin
+ * Player.registerPlugin(NerdStats) // another media control plugin
+ * ```
  */
 export class MediaControl extends UICorePlugin {
     advertisementPlaying = false;
@@ -64,7 +70,6 @@ export class MediaControl extends UICorePlugin {
     persistConfig;
     rendered = false;
     settings = {};
-    svgMask = null;
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
@@ -93,9 +98,15 @@ export class MediaControl extends UICorePlugin {
     $volumeContainer = null;
     $volumeIcon = null;
     static template = template(mediaControlHTML);
+    /**
+     * @internal
+     */
     get name() {
         return 'media_control';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
@@ -103,18 +114,32 @@ export class MediaControl extends UICorePlugin {
         const playbackIsNOOP = this.container && this.container.getPlaybackType() === Playback.NO_OP;
         return this.userDisabled || playbackIsNOOP;
     }
+    /**
+     * @internal
+     * @deprecated
+     */
     get container() {
         return this.core && this.core.activeContainer;
     }
+    /**
+     * @internal
+     * @deprecated
+     */
     get playback() {
         return this.core && this.core.activePlayback;
     }
+    /**
+     * @internal
+     */
     get attributes() {
         return {
             class: 'media-control-skin-1',
             'data-media-control-skin-1': '',
         };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             'click [data-play]': 'play',
@@ -145,11 +170,11 @@ export class MediaControl extends UICorePlugin {
         };
     }
     /**
-     * Current volume
+     * Current volume [0..100]
      */
     get volume() {
-        return this.container && this.container.isReady
-            ? this.container.volume
+        return this.core.activeContainer?.isReady
+            ? this.core.activeContainer.volume
             : this.intendedVolume;
     }
     /**
@@ -165,8 +190,7 @@ export class MediaControl extends UICorePlugin {
         this.kibo = new Kibo(this.options.focusElement);
         this.bindKeyEvents();
         this.userDisabled = false;
-        if ((this.container && this.container.mediaControlDisabled) ||
-            this.options.chromeless) {
+        if (this.options.chromeless) {
             this.disable();
         }
         $(document).bind('mouseup', this.stopDrag);
@@ -174,12 +198,18 @@ export class MediaControl extends UICorePlugin {
         $(document).bind('touchend', this.stopDrag);
         $(document).bind('touchmove', this.updateDrag);
     }
+    /**
+     * @internal
+     */
     getExternalInterface() {
         return {
             setVolume: this.setVolume,
             getVolume: () => this.volume,
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         // @ts-ignore
         this.stopListening();
@@ -235,12 +265,18 @@ export class MediaControl extends UICorePlugin {
             this.listenToOnce(this.container, Events.CONTAINER_LOADEDMETADATA, this.onLoadedMetadataOnVideoTag);
         }
     }
+    /**
+     * Disables the plugin and unmounts its UI
+     */
     disable() {
         this.userDisabled = true;
         this.hide();
         this.unbindKeyEvents();
         this.$el.hide();
     }
+    /**
+     * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
+     */
     enable() {
         if (this.options.chromeless) {
             return;
@@ -249,24 +285,6 @@ export 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
      */
@@ -765,14 +783,32 @@ export class MediaControl extends UICorePlugin {
     /**
      * 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
+     * @returns The DOM node to render to or extend
+     * @remarks
+     * Use this method to render custom media control UI in a plugin
+     * @example
+     * ```ts
+     * class MyPlugin extends UICorePlugin {
+     *   override render() {
+     *     const mediaControl = this.core.getPlugin('media_control')
+     *     const clipText = mediaControl.getElement('clipText')
+     *     clipText?.el.text('Here we go')
+     *     return this
+     *   }
+     * }
+     * ```
      */
     getElement(name) {
         switch (name) {
             case 'clipText':
                 return this.$clipText;
+            case 'bottomGear':
+            case 'gear':
+                return this.$bottomGear;
             case 'pip':
                 return this.$pip;
+            case 'playbackRate':
+                return this.$playbackRate;
             case 'seekBarContainer':
                 return this.$seekBarContainer;
         }
@@ -906,6 +942,9 @@ export class MediaControl extends UICorePlugin {
             element &&
             $(element).find('svg path').css({ fill: this.buttonsColor });
     }
+    /**
+     * @internal
+     */
     destroy() {
         $(document).unbind('mouseup', this.stopDrag);
         $(document).unbind('mousemove', this.updateDrag);
@@ -918,6 +957,9 @@ export class MediaControl extends UICorePlugin {
         this.advertisementPlaying ? this.disable() : this.enable();
         this.trigger(Events.MEDIACONTROL_OPTIONS_CHANGE);
     }
+    /**
+     * @internal
+     */
     render() {
         const timeout = this.options.hideMediaControlDelay || 2000;
         const html = MediaControl.template({ settings: this.settings ?? {} });
@@ -1005,10 +1047,6 @@ export class MediaControl extends UICorePlugin {
             this.hide();
         }
     }
-    // TODO
-    setMuted(value) {
-        this.container.options.mute = value;
-    }
     static getPageX(event) {
         return getPageX(event);
     }
@@ -1022,7 +1060,7 @@ export class MediaControl extends UICorePlugin {
         return 0;
     }
     /**
-     * Enable the control button
+     * Enable the user interaction disabled earlier
      */
     enableControlButton() {
         this.disabledClickableList.forEach((element) => {
@@ -1030,7 +1068,7 @@ export class MediaControl extends UICorePlugin {
         });
     }
     /**
-     * Disable the control button
+     * Disable the user interaction for the control buttons
      */
     disabledControlButton() {
         this.disabledClickableList.forEach((element) => {
@@ -1044,7 +1082,6 @@ export class MediaControl extends UICorePlugin {
         return isFinite(this.core.activePlayback.getDuration());
     }
 }
-// TODO drop?
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
 };

package/lib/plugins/multi-camera/MultiCamera.js

@@ -1,13 +1,13 @@
 import { Browser, Events, Playback, template, UICorePlugin } from '@clappr/core';
 import { reportError, trace } from '@gcorevideo/utils';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/multi-camera/multicamera.ejs';
 import '../../../assets/multi-camera/style.scss';
 import streamsIcon from '../../../assets/icons/old/streams.svg';
 import streamsMomentoIcon from '../../../assets/icons/old/language.svg';
 import streamsWhiteNightsIcon from '../../../assets/icons/old/wn.svg';
 const VERSION = '0.0.1';
-const T = 'plugins.multicamera';
+const T = 'plugins.media_control_multicamera';
 export class MultiCamera extends UICorePlugin {
     currentCamera = null;
     currentTime = 0;
@@ -15,7 +15,7 @@ export class MultiCamera extends UICorePlugin {
     multicamera = [];
     noActiveStreams = false;
     get name() {
-        return 'multicamera';
+        return 'media_control_multicamera';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };

package/lib/plugins/picture-in-picture/PictureInPicture.js

@@ -1,14 +1,14 @@
 import { UICorePlugin, template, Events } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import pipIcon from '../../../assets/icons/new/pip.svg';
 import buttonHtml from '../../../assets/picture-in-picture/button.ejs';
 import '../../../assets/picture-in-picture/button.scss';
 const VERSION = '0.0.1';
-const T = `plugins.picture_in_picture`;
+const T = `plugins.media_control_pip`;
 export class PictureInPicture extends UICorePlugin {
     get name() {
-        return 'picture_in_picture';
+        return 'media_control_pip';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };

package/lib/plugins/playback-rate/PlaybackRate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,MAAM,cAAc,CAAC;AAgCxE,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,eAAe,CAAyB;IAEhD,OAAO,CAAC,aAAa,CAAgD;IAErE,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,YAAY,CAAiC;IAErD,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;;;MAMlB;IAEQ,UAAU;IAoBnB,YAAY;IAOZ,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,gBAAgB;IAcxB,MAAM;IAKN,OAAO,CAAC,YAAY;IAUX,MAAM;IAyCf,SAAS;IAMT,UAAU;IAMV,MAAM;IAWN,MAAM;IAIN,YAAY,CAAC,KAAK,EAAE,UAAU;IAW9B,UAAU;IAaV,MAAM;IAIN,kBAAkB,CAAC,IAAI,EAAE,MAAM;IAI/B,eAAe,CAAC,IAAI,EAAE,MAAM;IAQ5B,QAAQ;IAYR,oBAAoB;CASrB"}
+{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,MAAM,cAAc,CAAC;AAiCxE,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,eAAe,CAAyB;IAEhD,OAAO,CAAC,aAAa,CAAgD;IAErE,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,YAAY,CAAiC;IAErD,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;;;MAMlB;IAEQ,UAAU;IAoBnB,YAAY;IAOZ,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,gBAAgB;IAcxB,MAAM;IAKN,OAAO,CAAC,YAAY;IAUX,MAAM;IAyCf,SAAS;IAMT,UAAU;IAMV,MAAM;IAWN,MAAM;IAIN,YAAY,CAAC,KAAK,EAAE,UAAU;IAW9B,UAAU;IAaV,MAAM;IAIN,kBAAkB,CAAC,IAAI,EAAE,MAAM;IAI/B,eAAe,CAAC,IAAI,EAAE,MAAM;IAQ5B,QAAQ;IAYR,oBAAoB;CASrB"}

package/lib/plugins/playback-rate/PlaybackRate.js

@@ -1,5 +1,5 @@
 import { Events, UICorePlugin, Playback, template } from '@clappr/core';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/playback-rate/playback-rate-selector.ejs';
 import buttonHtml from '../../../assets/playback-rate/button.ejs';
 import listHtml from '../../../assets/playback-rate/list.ejs';
@@ -17,6 +17,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: '2.0', label: '2x' }
 ];
 const DEFAULT_PLAYBACK_RATE = '1.0';
+// TODO
 const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
 export class PlaybackRate extends UICorePlugin {
     currentPlayback = null;
@@ -24,7 +25,7 @@ export class PlaybackRate extends UICorePlugin {
     prevSelectedRate;
     selectedRate = DEFAULT_PLAYBACK_RATE;
     get name() {
-        return 'playback_rate';
+        return 'media_control_playback_rate';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -202,4 +203,3 @@ export class PlaybackRate extends UICorePlugin {
         currentLevelElement.find('a').addClass('gcore-skin-active');
     }
 }
-// PlaybackRate.MEDIACONTROL_PLAYBACKRATE = 'playbackRate';

package/lib/plugins/poster/Poster.d.ts

@@ -1,27 +1,75 @@
 import { UIContainerPlugin } from '@clappr/core';
 import '../../../assets/poster/poster.scss';
+/**
+ * Displays a poster image in the background and a big play button on top when playback is stopped
+ * @beta
+ * @remarks
+ * When the playback is stopped, media control UI is disabled.
+ *
+ * Configuration options:
+ *
+ * - `poster.custom` - custom CSS background
+ *
+ * - `poster.showForNoOp` - whether to show the poster when the playback is not started
+ *
+ * - `poster.url` - the URL of the poster image
+ *
+ * - `poster.showOnVideoEnd` - whether to show the poster when the playback is ended
+ *
+ * @example
+ * ```ts
+ * new Player({
+ *  ...
+ *  poster: {
+ *    showForNoOp: true,
+ *    url: 'https://via.placeholder.com/150.png',
+ *  }
+ * })
+ * ```
+ */
 export declare class Poster extends UIContainerPlugin {
     private hasFatalError;
     private hasStartedPlaying;
     private playRequested;
     private $playButton;
     private $playWrapper;
+    /**
+     * @internal
+     */
     get name(): string;
+    /**
+     * @internal
+     */
     get supportedVersion(): {
         min: string;
     };
-    get template(): any;
-    get shouldRender(): boolean;
+    private static readonly template;
+    private get shouldRender();
+    /**
+     * @internal
+     */
     get attributes(): {
         class: string;
         'data-poster': string;
     };
+    /**
+     * @internal
+     */
     get events(): {
         click: string;
     };
-    get showOnVideoEnd(): boolean;
+    private get showOnVideoEnd();
+    /**
+     * @internal
+     */
     bindEvents(): void;
+    /**
+     * Reenables earlier disabled plugin
+     */
     enable(): void;
+    /**
+     * Disables the plugin, unmounting it from the DOM
+     */
     disable(): void;
     private onError;
     private onPlay;
@@ -36,7 +84,13 @@ export declare class Poster extends UIContainerPlugin {
     private updatePoster;
     private showPoster;
     private hidePoster;
+    /**
+     * @internal
+     */
     render(): this;
+    /**
+     * @internal
+     */
     destroy(): this;
 }
 //# sourceMappingURL=Poster.d.ts.map

package/lib/plugins/poster/Poster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Poster.d.ts","sourceRoot":"","sources":["../../../src/plugins/poster/Poster.ts"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EAIlB,MAAM,cAAc,CAAA;AAMrB,OAAO,oCAAoC,CAAA;AAO3C,qBAAa,MAAO,SAAQ,iBAAiB;IAC3C,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,WAAW,CAA2B;IAE9C,OAAO,CAAC,YAAY,CAA2B;IAE/C,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAI,YAAY,YAef;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;MAIlB;IAED,IAAI,cAAc,YAEjB;IAEQ,UAAU;IAiBV,MAAM;IAMN,OAAO;IAOhB,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,MAAM;IAiBd,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,UAAU;IAYT,MAAM;IAuCN,OAAO;CAIjB"}
+{"version":3,"file":"Poster.d.ts","sourceRoot":"","sources":["../../../src/plugins/poster/Poster.ts"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EAIlB,MAAM,cAAc,CAAA;AAMrB,OAAO,oCAAoC,CAAA;AAO3C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,MAAO,SAAQ,iBAAiB;IAC3C,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,WAAW,CAA2B;IAE9C,OAAO,CAAC,YAAY,CAA2B;IAE/C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD,OAAO,KAAK,YAAY,GAUvB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED,OAAO,KAAK,cAAc,GAEzB;IAED;;OAEG;IACM,UAAU;IAiBnB;;OAEG;IACM,MAAM;IAMf;;OAEG;IACM,OAAO;IAOhB,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,MAAM;IAiBd,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,UAAU;IAYlB;;OAEG;IACM,MAAM;IAuCf;;OAEG;IACM,OAAO;CAIjB"}