@gcorevideo/player 2.25.6 → 2.25.8

package/lib/plugins/audio-selector/AudioTracks.d.ts

@@ -1,5 +1,4 @@
 import { UICorePlugin } from '@clappr/core';
-import '../../../assets/audio-tracks/style.scss';
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
@@ -12,6 +11,7 @@ import '../../../assets/audio-tracks/style.scss';
  */
 export declare class AudioTracks extends UICorePlugin {
     private currentTrack;
+    private open;
     private tracks;
     /**
      * @internal
@@ -38,8 +38,8 @@ export declare class AudioTracks extends UICorePlugin {
      * @internal
      */
     get events(): {
-        'click [data-audiotracks-select]': string;
-        'click #audiotracks-button': string;
+        'click #gplayer-audiotracks-menu [data-item]': string;
+        'click #gplayer-audiotracks-button': string;
     };
     /**
      * @internal
@@ -63,5 +63,6 @@ export declare class AudioTracks extends UICorePlugin {
     private startTrackSwitching;
     private updateText;
     private highlightCurrentTrack;
+    private mount;
 }
 //# sourceMappingURL=AudioTracks.d.ts.map

package/lib/plugins/audio-selector/AudioTracks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AudioTracks.d.ts","sourceRoot":"","sources":["../../../src/plugins/audio-selector/AudioTracks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAY,MAAM,cAAc,CAAA;AAO7D,OAAO,yCAAyC,CAAA;AAUhD;;;;;;;;;GASG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,MAAM,CAAmB;IAEjC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,wBAAwB;IAwBhC,OAAO,CAAC,YAAY;IAMpB;;OAEG;IACM,MAAM;IAmBf,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,qBAAqB;CAe9B"}
+{"version":3,"file":"AudioTracks.d.ts","sourceRoot":"","sources":["../../../src/plugins/audio-selector/AudioTracks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAY,MAAM,cAAc,CAAA;AAgB7D;;;;;;;;;GASG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,MAAM,CAAmB;IAEjC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,wBAAwB;IA6BhC,OAAO,CAAC,YAAY;IAMpB;;OAEG;IACM,MAAM;IAgBf,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,qBAAqB;IAgB7B,OAAO,CAAC,KAAK;CAKd"}

package/lib/plugins/audio-selector/AudioTracks.js

@@ -1,13 +1,12 @@
 import { Events, UICorePlugin, template } from '@clappr/core';
 import assert from 'assert';
+// import { trace } from '@gcorevideo/utils'
 import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/audio-tracks/template.ejs';
-import '../../../assets/audio-tracks/style.scss';
 import audioArrow from '../../../assets/icons/old/quality-arrow.svg';
 import { ExtendedEvents } from '../media-control/MediaControl.js';
-import { trace } from '@gcorevideo/utils';
 const VERSION = '2.22.4';
-const T = 'plugins.audiotracks';
+// const T = 'plugins.audiotracks'
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
@@ -20,6 +19,7 @@ const T = 'plugins.audiotracks';
  */
 export class AudioTracks extends UICorePlugin {
     currentTrack = null;
+    open = false;
     tracks = [];
     /**
      * @internal
@@ -45,7 +45,7 @@ export class AudioTracks extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: 'media-control-audiotracks',
+            class: 'media-control-audiotracks media-control-dd__wrap',
         };
     }
     /**
@@ -53,8 +53,8 @@ export class AudioTracks extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-audiotracks-select]': 'onTrackSelect',
-            'click #audiotracks-button': 'toggleMenu',
+            'click #gplayer-audiotracks-menu [data-item]': 'onTrackSelect',
+            'click #gplayer-audiotracks-button': 'toggleMenu',
         };
     }
     /**
@@ -68,8 +68,9 @@ export class AudioTracks extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
-            mediaControl.slot('audiotracks', this.$el);
+            this.mount();
         });
+        // TODO when tracks change, re-render and re-attach
         this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
         this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
             if (from !== this.name) {
@@ -84,6 +85,7 @@ export class AudioTracks extends UICorePlugin {
                 tracks.find((track) => track.kind === 'main') ?? null; // TODO test
             this.tracks = tracks;
             this.render();
+            this.mount();
         });
         this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_CHANGED, (track) => {
             this.currentTrack = track;
@@ -91,6 +93,10 @@ export class AudioTracks extends UICorePlugin {
             this.buttonElement().removeClass('changing');
             this.updateText();
         });
+        // TODO test
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => {
+            this.hideMenu();
+        });
     }
     shouldRender() {
         // Render is called from the parent class constructor so tracks aren't available
@@ -101,21 +107,19 @@ export class AudioTracks extends UICorePlugin {
      * @internal
      */
     render() {
-        if (!this.shouldRender()) {
-            return this;
-        }
         this.$el.html(AudioTracks.template({
-            tracks: this.tracks,
+            tracks: this.tracks ?? [],
             title: this.getTitle(),
             icon: audioArrow,
             current: this.currentTrack?.id,
         }));
+        this.$el.find('#gplayer-audiotracks-menu').hide();
         this.updateText();
         this.highlightCurrentTrack();
         return this;
     }
     onTrackSelect(event) {
-        const id = event.currentTarget?.dataset?.audiotracksSelect;
+        const id = event.currentTarget?.dataset?.item;
         if (id) {
             this.selectAudioTrack(id);
         }
@@ -129,25 +133,34 @@ export class AudioTracks extends UICorePlugin {
         this.updateText();
     }
     hideMenu() {
-        trace(`${T} hideMenu`);
-        this.$el.find('#audiotracks-select').addClass('hidden');
-        this.$el.find('#audiotracks-button').attr('aria-expanded', 'false');
+        this.open = false;
+        this.$el.find('#gplayer-audiotracks-menu').hide();
+        this.$el.find('#gplayer-audiotracks-button').attr('aria-expanded', 'false');
     }
     toggleMenu() {
-        this.core.getPlugin('media_control').trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
-        this.$el.find('#audiotracks-select').toggleClass('hidden'); // TODO use plain CSS display: none
-        const open = !this.$el.find('#audiotracks-select').hasClass('hidden'); // TODO hold state
-        this.$el.find('#audiotracks-button').attr('aria-expanded', open);
+        this.open = !this.open;
+        this.core
+            .getPlugin('media_control')
+            .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
+        if (this.open) {
+            this.$el.find('#gplayer-audiotracks-menu').show();
+        }
+        else {
+            this.$el.find('#gplayer-audiotracks-menu').hide();
+        }
+        this.$el
+            .find('#gplayer-audiotracks-button')
+            .attr('aria-expanded', this.open);
     }
     buttonElement() {
-        return this.$('button');
+        return this.$('#gplayer-audiotracks-button');
     }
     buttonElementText() {
-        return this.$('button .audio-text');
+        return this.$el.find('#gplayer-audiotracks-button-text');
     }
     trackElement(id) {
-        return this.$('#audiotracks-select a' +
-            (id !== undefined ? `[data-audiotracks-select="${id}"]` : '')).parent();
+        return this.$('#gplayer-audiotracks-menu a' +
+            (id !== undefined ? `[data-item="${id}"]` : '')).parent();
     }
     getTitle() {
         if (!this.currentTrack) {
@@ -178,4 +191,9 @@ export class AudioTracks extends UICorePlugin {
                 .attr('aria-checked', 'true');
         }
     }
+    mount() {
+        if (this.shouldRender()) {
+            this.core.getPlugin('media_control')?.slot('audiotracks', this.$el);
+        }
+    }
 }

package/lib/plugins/bottom-gear/BottomGear.d.ts

@@ -156,6 +156,6 @@ export declare class BottomGear extends UICorePlugin {
     private onCoreReady;
     private onMediaControlRendered;
     private mount;
-    private alignSubmenu;
+    private clampPopup;
 }
 //# sourceMappingURL=BottomGear.d.ts.map

package/lib/plugins/bottom-gear/BottomGear.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAKb,MAAM,cAAc,CAAA;AAOrB,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAU5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,EAAE,CAAQ;IAElB,OAAO,CAAC,QAAQ,CAAI;IAEpB,OAAO,CAAC,SAAS,CAAO;IAExB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IAInB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IA2B1D,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAqBf;;;;OAIG;IACH,OAAO;IAIP,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,YAAY;CASrB"}
+{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAKb,MAAM,cAAc,CAAA;AAOrB,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAU5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,EAAE,CAAQ;IAElB,OAAO,CAAC,QAAQ,CAAI;IAEpB,OAAO,CAAC,SAAS,CAAO;IAExB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IAInB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IA2B1D,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAqBf;;;;OAIG;IACH,OAAO;IAIP,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,UAAU;CAQnB"}

package/lib/plugins/bottom-gear/BottomGear.js

@@ -175,7 +175,7 @@ export class BottomGear extends UICorePlugin {
                 .appendTo(this.$el.find('#gear-options-wrapper'));
             $item.on('click', (e) => {
                 e.stopPropagation();
-                this.alignSubmenu($subMenu);
+                this.clampPopup($subMenu);
                 $subMenu.show();
                 this.$el.find('#gear-options').hide();
             });
@@ -272,9 +272,8 @@ export class BottomGear extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         mediaControl.slot('gear', this.$el);
     }
-    alignSubmenu($subMenu) {
-        const availableHeight = this.core.getPlugin('media_control').getAvailableHeight() -
-            MENU_VMARGIN * 2;
+    clampPopup($subMenu) {
+        const availableHeight = this.core.getPlugin('media_control').getAvailablePopupHeight();
         $subMenu.css('max-height', `${availableHeight}px`);
         $subMenu
             .find('.gear-sub-menu')

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

@@ -233,6 +233,10 @@ export declare class MediaControl extends UICorePlugin {
      * This takes into account the container height and excludes the height of the controls bar
      */
     getAvailableHeight(): number;
+    /**
+     * @returns Vertical space available to render a popup menu
+     */
+    getAvailablePopupHeight(): number;
     /**
      * Set the initial volume, which is preserved when playback is interrupted by an advertisement
      */

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

@@ -30,6 +30,7 @@ const STANDARD_MEDIA_CONTROL_ELEMENTS = [
     'seekbar',
     'volume',
 ];
+const MENU_VMARGIN = 12;
 // TODO export
 const DEFAULT_SETTINGS = {
     default: ['seekbar'],
@@ -356,6 +357,12 @@ export class MediaControl extends UICorePlugin {
     getAvailableHeight() {
         return (this.core.$el.height() - this.$el.find('.media-control-layer').height());
     }
+    /**
+     * @returns Vertical space available to render a popup menu
+     */
+    getAvailablePopupHeight() {
+        return this.getAvailableHeight() - MENU_VMARGIN * 2;
+    }
     /**
      * Set the initial volume, which is preserved when playback is interrupted by an advertisement
      */
@@ -888,7 +895,7 @@ export class MediaControl extends UICorePlugin {
         const panel = this.getElementLocation(name);
         if (panel) {
             element.attr(`data-${name}`, '');
-            element.addClass('gplayer-mc-panel-item');
+            element.addClass('media-control-item');
             mountTo(panel, element);
         }
     }

package/lib/plugins/subtitles/ClosedCaptions.d.ts

@@ -40,6 +40,7 @@ export type ClosedCaptionsPluginSettings = {
 export declare class ClosedCaptions extends UICorePlugin {
     private isPreselectedApplied;
     private active;
+    private open;
     private track;
     private tracks;
     private $line;
@@ -57,8 +58,8 @@ export declare class ClosedCaptions extends UICorePlugin {
      * @internal
      */
     static get version(): string;
-    private static readonly template;
-    private static readonly templateString;
+    private static readonly templateControl;
+    private static readonly templateLine;
     /**
      * @internal
      */
@@ -69,8 +70,8 @@ export declare class ClosedCaptions extends UICorePlugin {
      * @internal
      */
     get events(): {
-        'click #cc-select li a': string;
-        'click #cc-button': string;
+        'click #gplayer-cc-menu [data-item]': string;
+        'click #gplayer-cc-button': string;
     };
     private get preselectedLanguage();
     /**
@@ -114,5 +115,7 @@ export declare class ClosedCaptions extends UICorePlugin {
     private updateSelection;
     private highlightCurrentSubtitles;
     private renderIcon;
+    private clampPopup;
+    private mount;
 }
 //# sourceMappingURL=ClosedCaptions.d.ts.map

package/lib/plugins/subtitles/ClosedCaptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClosedCaptions.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/ClosedCaptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAgB7C;;;GAGG;AACH,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAM9B;IAED;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,kBAAkB;IAwC1B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IA+BzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAqBpB;;OAEG;IACH,IAAI;IAWJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA2Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAkBjC,OAAO,CAAC,UAAU;CAKnB"}
+{"version":3,"file":"ClosedCaptions.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/ClosedCaptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAgB7C;;;GAGG;AACH,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAyB;IAEhE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuB;IAE3D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAM9B;IAED;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,kBAAkB;IA2C1B,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,iBAAiB;IA+BzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAsBpB;;OAEG;IACH,IAAI;IAcJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA4Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,KAAK;CAMd"}

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -42,6 +42,7 @@ const T = 'plugins.cc';
 export class ClosedCaptions extends UICorePlugin {
     isPreselectedApplied = false;
     active = false;
+    open = false;
     track = null;
     tracks = [];
     $line = null;
@@ -63,14 +64,14 @@ export class ClosedCaptions extends UICorePlugin {
     static get version() {
         return VERSION;
     }
-    static template = template(comboboxHTML);
-    static templateString = template(stringHTML);
+    static templateControl = template(comboboxHTML);
+    static templateLine = template(stringHTML);
     /**
      * @internal
      */
     get attributes() {
         return {
-            class: 'media-control-cc',
+            class: 'media-control-cc media-control-dd__wrap',
         };
     }
     /**
@@ -78,8 +79,8 @@ export class ClosedCaptions extends UICorePlugin {
      */
     get events() {
         return {
-            'click #cc-select li a': 'onItemSelect',
-            'click #cc-button': 'toggleMenu',
+            'click #gplayer-cc-menu [data-item]': 'onItemSelect',
+            'click #gplayer-cc-button': 'toggleMenu',
         };
     }
     get preselectedLanguage() {
@@ -96,10 +97,9 @@ export class ClosedCaptions extends UICorePlugin {
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
     }
     onCoreReady() {
-        trace(`${T} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render); // TODO mount to media control
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.mount);
         this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, () => {
             this.hideMenu();
         });
@@ -110,11 +110,14 @@ export class ClosedCaptions extends UICorePlugin {
         });
     }
     onContainerChanged() {
-        trace(`${T} onContainerChanged`);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_FULLSCREEN, this.playerResize);
         this.listenTo(this.core.activeContainer, 'container:advertisement:start', this.onStartAd);
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_SUBTITLE_AVAILABLE, this.onSubtitleAvailable);
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_SUBTITLE_CHANGED, this.onSubtitleChanged);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => {
+            // TODO test
+            this.hideMenu();
+        });
         // fix for iOS
         const video = this.core.activePlayback.el;
         assert(video, 'video element is required');
@@ -132,6 +135,7 @@ export class ClosedCaptions extends UICorePlugin {
     onSubtitleAvailable() {
         trace(`${T} onSubtitleAvailable`);
         this.applyTracks();
+        this.mount();
     }
     onSubtitleChanged({ id }) {
         trace(`${T} onSubtitleChanged`, { id });
@@ -196,6 +200,7 @@ export class ClosedCaptions extends UICorePlugin {
         }
         try {
             this.resizeFont();
+            this.clampPopup();
         }
         catch (error) {
             reportError(error);
@@ -206,7 +211,10 @@ export class ClosedCaptions extends UICorePlugin {
      */
     hide() {
         this.active = false;
+        this.open = false;
         this.renderIcon();
+        this.$el.find('#gplayer-cc-menu').hide();
+        this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false');
         this.$line.hide();
         if (this.tracks) {
             for (const t of this.tracks) {
@@ -249,17 +257,18 @@ export class ClosedCaptions extends UICorePlugin {
         if (!this.core.activeContainer) {
             return this;
         }
-        if (!this.shouldRender()) {
-            return this;
-        }
-        const mediaControl = this.core.getPlugin('media_control');
-        this.$el.html(ClosedCaptions.template({ tracks: this.tracks, i18n: this.core.i18n }));
-        this.$el.find('#cc-select').hide();
-        this.core.activeContainer.$el.find('#cc-line').remove();
-        this.$line = $(ClosedCaptions.templateString());
+        this.$el.html(ClosedCaptions.templateControl({
+            tracks: this.tracks ?? [],
+            i18n: this.core.i18n,
+            current: this.track?.id ?? -1,
+        }));
+        this.$el.find('#gplayer-cc-menu').hide();
+        this.open = false;
+        this.core.activeContainer.$el.find('#gplayer-cc-line').remove();
+        this.$line = $(ClosedCaptions.templateLine());
         this.resizeFont();
+        this.clampPopup();
         this.core.activeContainer.$el.append(this.$line);
-        mediaControl.slot('cc', this.$el);
         this.updateSelection();
         this.renderIcon();
         return this;
@@ -273,9 +282,10 @@ export class ClosedCaptions extends UICorePlugin {
         this.updateSelection();
     }
     onItemSelect(event) {
-        const id = event.target.dataset.ccSelect ?? '-1';
-        trace(`${T} onItemSelect`, { id });
-        localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
+        // event.target does not exist for some reason in tests
+        const id = (event.target ?? event.currentTarget).dataset?.item ??
+            '-1';
+        localStorage.setItem(LOCAL_STORAGE_CC_ID, id); // TODO store language instead
         this.selectItem(this.findById(Number(id)));
         this.hideMenu();
         return false;
@@ -292,26 +302,33 @@ export class ClosedCaptions extends UICorePlugin {
         }
     }
     hideMenu() {
-        trace(`${T} hideMenu`);
-        this.$el.find('#cc-select').hide();
+        this.open = false;
+        this.$el.find('#gplayer-cc-menu').hide();
+        this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false');
     }
     toggleMenu() {
-        trace(`${T} toggleMenu`, { display: this.$el.find('#cc-select').css('display') });
         this.core
             .getPlugin('media_control')
             .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
-        this.$el.find('#cc-select').toggle();
-        // TODO hold state, add aria-expanded to the button, add active state to the button
+        this.open = !this.open;
+        if (this.open) {
+            this.$el.find('#gplayer-cc-menu').show();
+        }
+        else {
+            this.$el.find('#gplayer-cc-menu').hide();
+        }
+        this.$el.find('#gplayer-cc-button').attr('aria-expanded', this.open);
     }
     itemElement(id) {
-        return this.$el.find(`#cc-select li a[data-cc-select="${id}"]`).parent();
+        // TODO fix semantically
+        return this.$el.find(`#gplayer-cc-menu [data-item="${id}"]`).parent();
     }
     allItemElements() {
-        return this.$('#cc-select li');
+        return this.$el.find('#gplayer-cc-menu li'); // TODO fix semantically
     }
     selectSubtitles() {
         const trackId = this.track ? this.track.id : -1;
-        this.core.activePlayback.closedCaptionsTrackId = trackId;
+        this.core.activePlayback.closedCaptionsTrackId = trackId; // TODO test
     }
     getSubtitleText(track) {
         const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
@@ -321,6 +338,7 @@ export class ClosedCaptions extends UICorePlugin {
             for (const cue of cues) {
                 if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
                     lines.push(cue.getCueAsHTML().textContent);
+                    // TODO break?
                 }
             }
         }
@@ -346,18 +364,30 @@ export class ClosedCaptions extends UICorePlugin {
         this.allItemElements()
             .removeClass('current')
             .find('a')
-            .removeClass('gcore-skin-active');
-        trace(`${T} highlightCurrentSubtitles`, {
-            track: this.track?.id,
-        });
+            .removeClass('gcore-skin-active')
+            .attr('aria-checked', 'false');
         const currentLevelElement = this.itemElement(this.track ? this.track.id : -1);
         currentLevelElement
             .addClass('current')
             .find('a')
-            .addClass('gcore-skin-active');
+            .addClass('gcore-skin-active')
+            .attr('aria-checked', 'true');
     }
     renderIcon() {
+        // render both icons at once
         const icon = this.active ? subtitlesOnIcon : subtitlesOffIcon;
-        this.$el.find('span.cc-text').html(icon);
+        this.$el.find('#gplayer-cc-button').html(icon);
+    }
+    clampPopup() {
+        const availableHeight = this.core
+            .getPlugin('media_control')
+            .getAvailablePopupHeight();
+        this.$el.find('#gplayer-cc-menu').css('max-height', `${availableHeight}px`);
+    }
+    mount() {
+        if (this.shouldRender()) {
+            const mediaControl = this.core.getPlugin('media_control');
+            mediaControl.slot('cc', this.$el);
+        }
     }
 }

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;;EAsB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAChC,IAAI,SAAS,EACb,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCtC;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;;EA8B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAqB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;;EAsB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAChC,IAAI,SAAS,EACb,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCtC;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;;EA8B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAuB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -117,6 +117,8 @@ export function createMockMediaControl(core) {
     // @ts-ignore
     mediaControl.getAvailableHeight = vi.fn().mockReturnValue(300);
     // @ts-ignore
+    mediaControl.getAvailablePopupHeight = vi.fn().mockReturnValue(286);
+    // @ts-ignore
     mediaControl.toggleElement = vi.fn();
     vi.spyOn(mediaControl, 'trigger');
     core.$el.append(mediaControl.$el);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.25.6",
+  "version": "2.25.8",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",