@gcorevideo/player 2.22.23 → 2.22.25

package/dist/index.js

@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.23";
+var version$1 = "2.22.25";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -44802,7 +44802,7 @@ class AudioTracks extends UICorePlugin {
      * @internal
      */
     get name() {
-        return 'audio_selector'; // TODO rename to audiotracks
+        return 'audio_tracks';
     }
     /**
      * @internal
@@ -44831,7 +44831,7 @@ class AudioTracks extends UICorePlugin {
     get events() {
         return {
             'click [data-audiotracks-select]': 'onTrackSelect',
-            'click #audiotracks-button': 'toggleContextMenu',
+            'click #audiotracks-button': 'toggleMenu',
         };
     }
     /**
@@ -44848,7 +44848,11 @@ class AudioTracks extends UICorePlugin {
             mediaControl.mount('audiotracks', this.$el);
         });
         this.listenTo(mediaControl, Events$1.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;
@@ -44904,9 +44908,10 @@ class AudioTracks extends UICorePlugin {
     hideMenu() {
         trace(`${T$h} 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);
@@ -45189,7 +45194,7 @@ var GearEvents;
  * ```
  */
 class BottomGear extends UICorePlugin {
-    isHd = false;
+    hd = false;
     /**
      * @internal
      */
@@ -45288,7 +45293,7 @@ class BottomGear extends UICorePlugin {
     }
     highDefinitionUpdate(isHd) {
         trace(`${T$f} highDefinitionUpdate`, { isHd });
-        this.isHd = isHd;
+        this.hd = isHd;
         this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
     }
     /**
@@ -45300,7 +45305,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')
@@ -45323,7 +45328,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() {
@@ -45336,7 +45341,11 @@ class BottomGear extends UICorePlugin {
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
         this.listenTo(mediaControl, Events$1.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$f} onMediaControlRendered`);
@@ -51339,7 +51348,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";
 
@@ -51375,7 +51384,7 @@ const T$3 = 'plugins.cc';
  */
 class ClosedCaptions extends UICorePlugin {
     isPreselectedApplied = false;
-    isShowing = false;
+    active = false;
     track = null;
     tracks = [];
     $line = null;
@@ -51412,8 +51421,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() {
@@ -51433,9 +51442,15 @@ class ClosedCaptions extends UICorePlugin {
         trace(`${T$3} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideMenu);
-        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.hideMenu);
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render); // TODO mount to media control
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, () => {
+            this.hideMenu();
+        });
+        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
+            if (from !== this.name) {
+                this.hideMenu();
+            }
+        });
     }
     onContainerChanged() {
         trace(`${T$3} onContainerChanged`);
@@ -51502,7 +51517,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);
         }
@@ -51518,7 +51533,7 @@ class ClosedCaptions extends UICorePlugin {
             this.track &&
             this.track.track.mode &&
             Browser.isiOS &&
-            this.isShowing;
+            this.active;
         if (shouldShow) {
             this.show();
         }
@@ -51533,7 +51548,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) {
@@ -51546,7 +51561,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) &&
@@ -51581,7 +51596,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();
@@ -51597,7 +51613,6 @@ class ClosedCaptions extends UICorePlugin {
     selectItem(item) {
         this.clearSubtitleText();
         this.track = item;
-        this.hideMenu();
         this.updateSelection();
     }
     onItemSelect(event) {
@@ -51605,6 +51620,7 @@ class ClosedCaptions extends UICorePlugin {
         trace(`${T$3} onItemSelect`, { id });
         localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
         this.selectItem(this.findById(Number(id)));
+        this.hideMenu();
         return false;
     }
     applyPreselectedSubtitles() {
@@ -51620,20 +51636,21 @@ class ClosedCaptions extends UICorePlugin {
     }
     hideMenu() {
         trace(`${T$3} hideMenu`);
-        this.$('[data-cc] ul').hide();
+        this.$el.find('#cc-select').hide();
     }
     toggleMenu() {
-        trace(`${T$3} toggleMenu`);
+        trace(`${T$3} 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;
@@ -51683,7 +51700,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);
     }
 }