@gcorevideo/player 2.22.23 → 2.22.24

package/dist/plugins/index.js

@@ -11241,7 +11241,7 @@ class AudioTracks extends UICorePlugin {
      * @internal
      */
     get name() {
-        return 'audio_selector'; // TODO rename to audiotracks
+        return 'audio_tracks';
     }
     /**
      * @internal
@@ -11270,7 +11270,7 @@ class AudioTracks extends UICorePlugin {
     get events() {
         return {
             'click [data-audiotracks-select]': 'onTrackSelect',
-            'click #audiotracks-button': 'toggleContextMenu',
+            'click #audiotracks-button': 'toggleMenu',
         };
     }
     /**
@@ -11287,7 +11287,11 @@ class AudioTracks extends UICorePlugin {
             mediaControl.mount('audiotracks', this.$el);
         });
         this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
-        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.hideMenu);
+        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
+            if (from !== this.name) {
+                this.hideMenu();
+            }
+        });
     }
     onActiveContainerChanged() {
         this.currentTrack = null;
@@ -11342,9 +11346,10 @@ class AudioTracks extends UICorePlugin {
     }
     hideMenu() {
         this.$el.find('#audiotracks-select').addClass('hidden');
+        this.$el.find('#audiotracks-button').attr('aria-expanded', 'false');
     }
-    toggleContextMenu() {
-        this.core.getPlugin('media_control').trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE);
+    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);
@@ -11617,7 +11622,7 @@ var GearEvents;
  * ```
  */
 class BottomGear extends UICorePlugin {
-    isHd = false;
+    hd = false;
     /**
      * @internal
      */
@@ -11710,7 +11715,7 @@ class BottomGear extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
     }
     highDefinitionUpdate(isHd) {
-        this.isHd = isHd;
+        this.hd = isHd;
         this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
     }
     /**
@@ -11721,7 +11726,7 @@ class BottomGear extends UICorePlugin {
         if (!mediaControl) {
             return this; // TODO test
         }
-        const icon = this.isHd ? gearHdIcon : gearIcon;
+        const icon = this.hd ? gearHdIcon : gearIcon;
         this.$el
             .html(BottomGear.template({ icon }))
             .find('#gear-sub-menu-wrapper')
@@ -11744,7 +11749,7 @@ class BottomGear extends UICorePlugin {
     toggleGearMenu() {
         this.core
             .getPlugin('media_control')
-            .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE);
+            .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
         this.$el.find('#gear-options-wrapper').toggle();
     }
     hide() {
@@ -11755,7 +11760,11 @@ class BottomGear extends UICorePlugin {
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
         this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hide);
-        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.hide);
+        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
+            if (from !== this.name) {
+                this.hide();
+            }
+        });
     }
     onMediaControlRendered() {
         const mediaControl = this.core.getPlugin('media_control');
@@ -17724,7 +17733,7 @@ const subtitlesOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"
 
 const subtitlesOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M16.238 16.1C13.979 16.1 12.578 14.538 12.578 11.997C12.578 9.462 13.973 7.9 16.238 7.9C18.087 7.9 19.5029 9.127 19.6219 10.824H18.032C17.876 9.927 17.168 9.338 16.238 9.338C15.011 9.338 14.249 10.354 14.249 11.997C14.249 13.641 15.011 14.662 16.243 14.662C17.178 14.662 17.881 14.111 18.038 13.251H19.627C19.492 14.938 18.119 16.1 16.238 16.1ZM8.03198 16.1C5.77298 16.1 4.37299 14.538 4.37299 11.997C4.37299 9.462 5.76798 7.9 8.03198 7.9C9.88098 7.9 11.298 9.127 11.416 10.824H9.82697C9.67097 9.927 8.96198 9.338 8.03198 9.338C6.80598 9.338 6.04297 10.354 6.04297 11.997C6.04297 13.641 6.80596 14.662 8.03796 14.662C8.97296 14.662 9.67601 14.111 9.83301 13.251H11.422C11.287 14.938 9.91398 16.1 8.03198 16.1ZM22.5 3H1.5C0.672 3 0 3.671 0 4.5V19.5C0 20.329 0.672 21 1.5 21H22.5C23.329 21 24 20.329 24 19.5V4.5C24 3.671 23.329 3 22.5 3Z\"\n    fill=\"#C9C9C9\"/>\n  <rect y=\"22\" width=\"24\" height=\"2\" rx=\"1\" fill=\"#F6413B\"/>\n</svg>\n";
 
-const comboboxHTML = "<button data-cc-button class='media-control-button media-control-icon gcore-skin-button-color' id=\"cc-button\">\n    <span class='cc-text'></span>\n</button>\n\n<ul class='gcore-skin-bg-color' id=\"cc-select\">\n    <% for (const t of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-cc-select=\"<%= t.id %>\">\n                <%= t.name %>\n            </a>\n        </li>\n    <% } %>\n    <li><a href=\"#\" class='gcore-skin-text-color' data-cc-select=\"-1\">Off</a></li>\n</ul>\n";
+const comboboxHTML = "<button data-cc-button class='media-control-button media-control-icon gcore-skin-button-color' id=\"cc-button\">\n    <span class='cc-text'></span>\n</button>\n\n<ul class='gcore-skin-bg-color' id=\"cc-select\">\n    <% for (const t of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-cc-select=\"<%= t.id %>\">\n                <%= t.name %>\n            </a>\n        </li>\n    <% } %>\n    <li><a href=\"#\" class='gcore-skin-text-color' data-cc-select=\"-1\"><%= i18n.t('off') %></a></li>\n</ul>\n";
 
 const stringHTML = "<div class=\"cc-line\" id=\"cc-line\">\n  <p></p>\n</div>\n";
 
@@ -17760,7 +17769,7 @@ const T$2 = 'plugins.cc';
  */
 class ClosedCaptions extends UICorePlugin {
     isPreselectedApplied = false;
-    isShowing = false;
+    active = false;
     track = null;
     tracks = [];
     $line = null;
@@ -17797,8 +17806,8 @@ class ClosedCaptions extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-cc-select]': 'onItemSelect',
-            'click [data-cc-button]': 'toggleMenu',
+            'click #cc-select li a': 'onItemSelect',
+            'click #cc-button': 'toggleMenu',
         };
     }
     get preselectedLanguage() {
@@ -17817,9 +17826,15 @@ class ClosedCaptions extends UICorePlugin {
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
-        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.hideMenu);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render); // TODO mount to media control
+        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, () => {
+            this.hideMenu();
+        });
+        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
+            if (from !== this.name) {
+                this.hideMenu();
+            }
+        });
     }
     onContainerChanged() {
         this.listenTo(this.core.activeContainer, Events.CONTAINER_FULLSCREEN, this.playerResize);
@@ -17881,7 +17896,7 @@ class ClosedCaptions extends UICorePlugin {
         }
     }
     onStartAd() {
-        if (this.isShowing && this.core.activeContainer) {
+        if (this.active && this.core.activeContainer) {
             this.hide();
             this.listenTo(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
         }
@@ -17896,7 +17911,7 @@ class ClosedCaptions extends UICorePlugin {
             this.track &&
             this.track.track.mode &&
             Browser.isiOS &&
-            this.isShowing;
+            this.active;
         if (shouldShow) {
             this.show();
         }
@@ -17910,7 +17925,7 @@ class ClosedCaptions extends UICorePlugin {
      * Hides the subtitles menu and the subtitles.
      */
     hide() {
-        this.isShowing = false;
+        this.active = false;
         this.renderIcon();
         this.$line.hide();
         if (this.tracks) {
@@ -17923,7 +17938,7 @@ class ClosedCaptions extends UICorePlugin {
      * Shows the subtitles menu and the subtitles.
      */
     show() {
-        this.isShowing = true;
+        this.active = true;
         this.renderIcon();
         if (this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
@@ -17958,7 +17973,8 @@ class ClosedCaptions extends UICorePlugin {
             return this;
         }
         const mediaControl = this.core.getPlugin('media_control');
-        this.$el.html(ClosedCaptions.template({ tracks: this.tracks }));
+        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.resizeFont();
@@ -17974,13 +17990,13 @@ class ClosedCaptions extends UICorePlugin {
     selectItem(item) {
         this.clearSubtitleText();
         this.track = item;
-        this.hideMenu();
         this.updateSelection();
     }
     onItemSelect(event) {
         const id = event.target.dataset.ccSelect ?? '-1';
         localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
         this.selectItem(this.findById(Number(id)));
+        this.hideMenu();
         return false;
     }
     applyPreselectedSubtitles() {
@@ -17995,19 +18011,21 @@ class ClosedCaptions extends UICorePlugin {
         }
     }
     hideMenu() {
-        this.$('[data-cc] ul').hide();
+        this.$el.find('#cc-select').hide();
     }
     toggleMenu() {
+        trace(`${T$2} toggleMenu`, { display: this.$el.find('#cc-select').css('display') });
         this.core
             .getPlugin('media_control')
-            .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE);
-        this.$el.find('[data-cc] ul').toggle();
+            .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
     }
     itemElement(id) {
-        return this.$(`ul li a[data-cc-select="${id}"]`).parent();
+        return this.$el.find(`#cc-select li a[data-cc-select="${id}"]`).parent();
     }
     allItemElements() {
-        return this.$('[data-cc] li');
+        return this.$('#cc-select li');
     }
     selectSubtitles() {
         const trackId = this.track ? this.track.id : -1;
@@ -18057,7 +18075,7 @@ class ClosedCaptions extends UICorePlugin {
             .addClass('gcore-skin-active');
     }
     renderIcon() {
-        const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon;
+        const icon = this.active ? subtitlesOnIcon : subtitlesOffIcon;
         this.$el.find('span.cc-text').html(icon);
     }
 }

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

@@ -1,5 +1,5 @@
 import { UICorePlugin } from '@clappr/core';
-import '../../../assets/audio-selector/style.scss';
+import '../../../assets/audio-tracks/style.scss';
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
@@ -55,7 +55,7 @@ export declare class AudioTracks extends UICorePlugin {
     private onTrackSelect;
     private selectAudioTrack;
     private hideMenu;
-    private toggleContextMenu;
+    private toggleMenu;
     private buttonElement;
     private buttonElementText;
     private trackElement;

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,2CAA2C,CAAA;AAUlD;;;;;;;;;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;IAUnB,OAAO,CAAC,wBAAwB;IAwBhC,OAAO,CAAC,YAAY;IAMpB;;OAEG;IACM,MAAM;IAmBf,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,iBAAiB;IAOzB,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;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"}

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

@@ -1,8 +1,8 @@
 import { Events, UICorePlugin, template } from '@clappr/core';
 import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.js';
-import pluginHtml from '../../../assets/audio-selector/track-selector.ejs';
-import '../../../assets/audio-selector/style.scss';
+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';
@@ -25,7 +25,7 @@ export class AudioTracks extends UICorePlugin {
      * @internal
      */
     get name() {
-        return 'audio_selector'; // TODO rename to audiotracks
+        return 'audio_tracks';
     }
     /**
      * @internal
@@ -54,7 +54,7 @@ export class AudioTracks extends UICorePlugin {
     get events() {
         return {
             'click [data-audiotracks-select]': 'onTrackSelect',
-            'click #audiotracks-button': 'toggleContextMenu',
+            'click #audiotracks-button': 'toggleMenu',
         };
     }
     /**
@@ -71,7 +71,11 @@ export class AudioTracks extends UICorePlugin {
             mediaControl.mount('audiotracks', this.$el);
         });
         this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
-        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.hideMenu);
+        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
+            if (from !== this.name) {
+                this.hideMenu();
+            }
+        });
     }
     onActiveContainerChanged() {
         this.currentTrack = null;
@@ -127,9 +131,10 @@ export class AudioTracks extends UICorePlugin {
     hideMenu() {
         trace(`${T} hideMenu`);
         this.$el.find('#audiotracks-select').addClass('hidden');
+        this.$el.find('#audiotracks-button').attr('aria-expanded', 'false');
     }
-    toggleContextMenu() {
-        this.core.getPlugin('media_control').trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE);
+    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);

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

@@ -81,7 +81,7 @@ export declare enum GearEvents {
  * ```
  */
 export declare class BottomGear extends UICorePlugin {
-    private isHd;
+    private hd;
     /**
      * @internal
      */

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,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAOhF,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAQ;IAEpB;;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;IASnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IAyB1D,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAqBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,sBAAsB;CAK/B"}
+{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAOhF,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,EAAE,CAAQ;IAElB;;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;IASnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IAyB1D,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAqBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,WAAW;IAqBnB,OAAO,CAAC,sBAAsB;CAK/B"}

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

@@ -91,7 +91,7 @@ export var GearEvents;
  * ```
  */
 export class BottomGear extends UICorePlugin {
-    isHd = false;
+    hd = false;
     /**
      * @internal
      */
@@ -190,7 +190,7 @@ export class BottomGear extends UICorePlugin {
     }
     highDefinitionUpdate(isHd) {
         trace(`${T} highDefinitionUpdate`, { isHd });
-        this.isHd = isHd;
+        this.hd = isHd;
         this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
     }
     /**
@@ -202,7 +202,7 @@ export class BottomGear extends UICorePlugin {
         if (!mediaControl) {
             return this; // TODO test
         }
-        const icon = this.isHd ? gearHdIcon : gearIcon;
+        const icon = this.hd ? gearHdIcon : gearIcon;
         this.$el
             .html(BottomGear.template({ icon }))
             .find('#gear-sub-menu-wrapper')
@@ -225,7 +225,7 @@ export class BottomGear extends UICorePlugin {
     toggleGearMenu() {
         this.core
             .getPlugin('media_control')
-            .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE);
+            .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
         this.$el.find('#gear-options-wrapper').toggle();
     }
     hide() {
@@ -238,7 +238,11 @@ export class BottomGear extends UICorePlugin {
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
         this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide);
-        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.hide);
+        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
+            if (from !== this.name) {
+                this.hide();
+            }
+        });
     }
     onMediaControlRendered() {
         trace(`${T} onMediaControlRendered`);

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

@@ -39,7 +39,7 @@ export type ClosedCaptionsPluginSettings = {
  */
 export declare class ClosedCaptions extends UICorePlugin {
     private isPreselectedApplied;
-    private isShowing;
+    private active;
     private track;
     private tracks;
     private $line;
@@ -69,8 +69,8 @@ export declare class ClosedCaptions extends UICorePlugin {
      * @internal
      */
     get events(): {
-        'click [data-cc-select]': string;
-        'click [data-cc-button]': string;
+        'click #cc-select li a': string;
+        'click #cc-button': string;
     };
     private get preselectedLanguage();
     /**

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,SAAS,CAAQ;IAEzB,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;IAanB,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;IA0Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,UAAU;IAQlB,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,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"}

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -41,7 +41,7 @@ const T = 'plugins.cc';
  */
 export class ClosedCaptions extends UICorePlugin {
     isPreselectedApplied = false;
-    isShowing = false;
+    active = false;
     track = null;
     tracks = [];
     $line = null;
@@ -78,8 +78,8 @@ export class ClosedCaptions extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-cc-select]': 'onItemSelect',
-            'click [data-cc-button]': 'toggleMenu',
+            'click #cc-select li a': 'onItemSelect',
+            'click #cc-button': 'toggleMenu',
         };
     }
     get preselectedLanguage() {
@@ -99,9 +99,15 @@ export class ClosedCaptions extends UICorePlugin {
         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);
-        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
-        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.hideMenu);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render); // TODO mount to media control
+        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, () => {
+            this.hideMenu();
+        });
+        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
+            if (from !== this.name) {
+                this.hideMenu();
+            }
+        });
     }
     onContainerChanged() {
         trace(`${T} onContainerChanged`);
@@ -168,7 +174,7 @@ export class ClosedCaptions extends UICorePlugin {
         }
     }
     onStartAd() {
-        if (this.isShowing && this.core.activeContainer) {
+        if (this.active && this.core.activeContainer) {
             this.hide();
             this.listenTo(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
         }
@@ -184,7 +190,7 @@ export class ClosedCaptions extends UICorePlugin {
             this.track &&
             this.track.track.mode &&
             Browser.isiOS &&
-            this.isShowing;
+            this.active;
         if (shouldShow) {
             this.show();
         }
@@ -199,7 +205,7 @@ export class ClosedCaptions extends UICorePlugin {
      * Hides the subtitles menu and the subtitles.
      */
     hide() {
-        this.isShowing = false;
+        this.active = false;
         this.renderIcon();
         this.$line.hide();
         if (this.tracks) {
@@ -212,7 +218,7 @@ export class ClosedCaptions extends UICorePlugin {
      * Shows the subtitles menu and the subtitles.
      */
     show() {
-        this.isShowing = true;
+        this.active = true;
         this.renderIcon();
         if (this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
@@ -247,7 +253,8 @@ export class ClosedCaptions extends UICorePlugin {
             return this;
         }
         const mediaControl = this.core.getPlugin('media_control');
-        this.$el.html(ClosedCaptions.template({ tracks: this.tracks }));
+        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.resizeFont();
@@ -263,7 +270,6 @@ export class ClosedCaptions extends UICorePlugin {
     selectItem(item) {
         this.clearSubtitleText();
         this.track = item;
-        this.hideMenu();
         this.updateSelection();
     }
     onItemSelect(event) {
@@ -271,6 +277,7 @@ export class ClosedCaptions extends UICorePlugin {
         trace(`${T} onItemSelect`, { id });
         localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
         this.selectItem(this.findById(Number(id)));
+        this.hideMenu();
         return false;
     }
     applyPreselectedSubtitles() {
@@ -286,20 +293,21 @@ export class ClosedCaptions extends UICorePlugin {
     }
     hideMenu() {
         trace(`${T} hideMenu`);
-        this.$('[data-cc] ul').hide();
+        this.$el.find('#cc-select').hide();
     }
     toggleMenu() {
-        trace(`${T} toggleMenu`);
+        trace(`${T} toggleMenu`, { display: this.$el.find('#cc-select').css('display') });
         this.core
             .getPlugin('media_control')
-            .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE);
-        this.$el.find('[data-cc] ul').toggle();
+            .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
     }
     itemElement(id) {
-        return this.$(`ul li a[data-cc-select="${id}"]`).parent();
+        return this.$el.find(`#cc-select li a[data-cc-select="${id}"]`).parent();
     }
     allItemElements() {
-        return this.$('[data-cc] li');
+        return this.$('#cc-select li');
     }
     selectSubtitles() {
         const trackId = this.track ? this.track.id : -1;
@@ -349,7 +357,7 @@ export class ClosedCaptions extends UICorePlugin {
             .addClass('gcore-skin-active');
     }
     renderIcon() {
-        const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon;
+        const icon = this.active ? subtitlesOnIcon : subtitlesOffIcon;
         this.$el.find('span.cc-text').html(icon);
     }
 }

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC/C;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;EAoBrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAc/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC/C;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;EAoBrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAe/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -159,6 +159,7 @@ export function createMockMediaControl(core) {
     mediaControl.mount = vi.fn();
     // @ts-ignore
     mediaControl.toggleElement = vi.fn();
+    vi.spyOn(mediaControl, 'trigger');
     return mediaControl;
 }
 export function createMockBottomGear(core) {

package/package.json

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

package/src/plugins/audio-selector/AudioTracks.ts

@@ -4,8 +4,8 @@ import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
-import pluginHtml from '../../../assets/audio-selector/track-selector.ejs'
-import '../../../assets/audio-selector/style.scss'
+import pluginHtml from '../../../assets/audio-tracks/template.ejs'
+import '../../../assets/audio-tracks/style.scss'
 import audioArrow from '../../../assets/icons/old/quality-arrow.svg'
 import { ZeptoResult } from '../../types.js'
 import { ExtendedEvents, MediaControl } from '../media-control/MediaControl.js'
@@ -34,7 +34,7 @@ export class AudioTracks extends UICorePlugin {
    * @internal
    */
   get name() {
-    return 'audio_selector' // TODO rename to audiotracks
+    return 'audio_tracks'
   }
 
   /**
@@ -68,7 +68,7 @@ export class AudioTracks extends UICorePlugin {
   override get events() {
     return {
       'click [data-audiotracks-select]': 'onTrackSelect',
-      'click #audiotracks-button': 'toggleContextMenu',
+      'click #audiotracks-button': 'toggleMenu',
     }
   }
 
@@ -91,7 +91,11 @@ export class AudioTracks extends UICorePlugin {
       mediaControl.mount('audiotracks', this.$el)
     })
     this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu)
-    this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.hideMenu)
+    this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from: string) => {
+      if (from !== this.name) {
+        this.hideMenu()
+      }
+    })
   }
 
   private onActiveContainerChanged() {
@@ -165,10 +169,11 @@ export class AudioTracks extends UICorePlugin {
   private hideMenu() {
     trace(`${T} hideMenu`)
     this.$el.find('#audiotracks-select').addClass('hidden')
+    this.$el.find('#audiotracks-button').attr('aria-expanded', 'false')
   }
 
-  private toggleContextMenu() {
-    this.core.getPlugin('media_control').trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE)
+  private 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)