@gcorevideo/player 2.19.14 → 2.19.15

package/lib/plugins/subtitles/Subtitles.js

@@ -1,5 +1,5 @@
 import { Events, UICorePlugin, Browser, template, $, } from '@clappr/core';
-import { reportError } from '@gcorevideo/utils';
+import { reportError, trace } from '@gcorevideo/utils';
 import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.js';
 import '../../../assets/subtitles/style.scss';
@@ -8,88 +8,102 @@ import subtitlesOnIcon from '../../../assets/icons/new/subtitles-on.svg';
 import comboboxHTML from '../../../assets/subtitles/combobox.ejs';
 import stringHTML from '../../../assets/subtitles/string.ejs';
 import { isFullscreen } from '../utils.js';
-const VERSION = '0.0.1';
-const LOCAL_STORAGE_SUBTITLES_ID = 'subtitles_select';
-const T = 'plugins.media_control_subtitles';
+const VERSION = '2.19.14';
+const LOCAL_STORAGE_SUBTITLES_ID = 'gplayer.plugins.subtitles.selected';
+const T = 'plugins.subtitles';
 const NO_TRACK = { language: 'off' };
+/**
+ * A {@link MediaControl | media control} plugin that provides a UI to select the subtitles when available.
+ * @beta
+ *
+ * @remarks
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * Configuration options:
+ *
+ * - subtitles.language - The language of the subtitles to select by default.
+ *
+ * @example
+ * ```ts
+ * import { Subtitles } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(Subtitles)
+ *
+ * new Player({
+ *   ...
+ *   subtitles: {
+ *     language: 'en',
+ *   },
+ * })
+ * ```
+ */
 export class Subtitles extends UICorePlugin {
-    currentContainer;
-    currentLevel;
-    currentPlayback;
+    currentLevel = null;
+    isPreselectedApplied = false;
     isShowing = false;
-    tracks;
-    $string;
+    track = { ...NO_TRACK };
+    tracks = null;
+    $string = null;
+    /**
+     * @internal
+     */
     get name() {
-        return 'media_control_subtitles';
+        return 'subtitles';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
+    /**
+     * @internal
+     */
     static get version() {
         return VERSION;
     }
-    get template() {
-        return template(comboboxHTML);
-    }
-    get templateString() {
-        return template(stringHTML);
-    }
+    static template = template(comboboxHTML);
+    static templateString = template(stringHTML);
+    /**
+     * @internal
+     */
     get attributes() {
         return {
             class: this.name,
             'data-subtitles': '',
         };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             'click [data-subtitles-select]': 'onLevelSelect',
             'click [data-subtitles-button]': 'onShowLevelSelectMenu',
         };
     }
-    isPreselectedApplied = false;
-    track = { ...NO_TRACK };
     get preselectedLanguage() {
         return this.core.options.subtitles?.language ?? 'off';
     }
+    /**
+     * @internal
+     */
     bindEvents() {
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
         this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize);
-        this.listenToOnce(this.core, Events.CORE_READY, this.bindPlaybackEvents);
-        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
-    }
-    unBindEvents() {
-        // @ts-ignore
-        this.stopListening(this.core, Events.CORE_READY);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_SHOW);
-        if (this.currentContainer) {
-            // @ts-ignore
-            this.stopListening(this.currentContainer, Events.CONTAINER_FULLSCREEN);
-            // @ts-ignore
-            this.stopListening(this.currentContainer, 'container:advertisement:start', this.onStartAd);
-            // @ts-ignore
-            this.stopListening(this.currentContainer, 'container:advertisement:finish', this.onFinishAd);
-        }
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindPlaybackEvents);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
     }
     bindPlaybackEvents() {
-        if (this.currentPlayback &&
-            this.currentPlayback === this.core.activePlayback) {
-            return;
-        }
-        this.currentPlayback = this.core.activePlayback;
-        this.currentContainer = this.core.activeContainer;
-        this.listenTo(this.currentContainer, Events.CONTAINER_FULLSCREEN, this.playerResize);
-        this.listenToOnce(this.currentPlayback, Events.PLAYBACK_PLAY, this.getTracks);
-        this.listenTo(this.currentContainer, 'container:advertisement:start', this.onStartAd);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_FULLSCREEN, this.playerResize);
+        this.listenToOnce(this.core.activePlayback, Events.PLAYBACK_PLAY, this.getTracks);
+        this.listenTo(this.core.activeContainer, 'container:advertisement:start', this.onStartAd);
         // fix for iOS
-        const video = this.currentPlayback?.el;
+        const video = this.core.activePlayback.el;
         assert(video, 'video element is required');
         video.addEventListener('webkitbeginfullscreen', () => {
             if (Browser.isiOS) {
@@ -103,10 +117,13 @@ export class Subtitles extends UICorePlugin {
         });
     }
     getTracks() {
-        if (this.currentPlayback) {
+        if (this.core.activePlayback) {
             try {
-                const tracks = this.currentPlayback.el.textTracks;
-                tracks.length > 0 && this.fillLevels(tracks);
+                const tracks = this.core.activePlayback.el
+                    .textTracks;
+                if (tracks.length > 0) {
+                    this.setTracks(tracks);
+                }
             }
             catch (error) {
                 reportError(error);
@@ -114,23 +131,18 @@ export class Subtitles extends UICorePlugin {
         }
     }
     onStartAd() {
-        if (this.isShowing && this.currentContainer) {
+        if (this.isShowing && this.core.activeContainer) {
             this.hide();
-            this.listenTo(this.currentContainer, 'container:advertisement:finish', this.onFinishAd);
+            this.listenTo(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
         }
     }
     onFinishAd() {
         this.show();
-        this.stopListening(this.currentContainer, 'container:advertisement:finish', this.onFinishAd);
-    }
-    reload() {
-        this.unBindEvents();
-        this.bindEvents();
-        this.bindPlaybackEvents();
+        this.stopListening(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
     }
     playerResize() {
-        const shouldShow = this.currentContainer &&
-            isFullscreen(this.currentContainer.el) &&
+        const shouldShow = this.core.activeContainer &&
+            isFullscreen(this.core.activeContainer.el) &&
             this.currentLevel &&
             this.currentLevel.mode &&
             Browser.isiOS &&
@@ -145,6 +157,9 @@ export class Subtitles extends UICorePlugin {
             reportError(error);
         }
     }
+    /**
+     * Hides the subtitles menu and the subtitles.
+     */
     hide() {
         this.isShowing = false;
         this.renderIcon();
@@ -155,11 +170,14 @@ export class Subtitles extends UICorePlugin {
             }
         }
     }
+    /**
+     * Shows the subtitles menu and the subtitles.
+     */
     show() {
         this.isShowing = true;
         this.renderIcon();
-        if (this.currentContainer &&
-            isFullscreen(this.currentContainer.el) &&
+        if (this.core.activeContainer &&
+            isFullscreen(this.core.activeContainer.el) &&
             this.currentLevel &&
             this.currentLevel.mode &&
             Browser.isiOS) {
@@ -171,59 +189,61 @@ export class Subtitles extends UICorePlugin {
         }
     }
     shouldRender() {
-        if (!this.currentContainer) {
-            return false;
-        }
-        if (!this.currentPlayback) {
-            return false;
-        }
-        // Only care if we have at least 2 to choose from
-        const hasLevels = !!(this.tracks && this.tracks.length > 0);
-        return hasLevels;
+        return !!(this.tracks && this.tracks.length > 0);
     }
     resizeFont() {
-        if (!this.currentContainer) {
+        if (!this.core.activeContainer) {
             return;
         }
         if (!this.$string) {
             return;
         }
-        const skinWidth = this.currentContainer.$el.width();
+        const skinWidth = this.core.activeContainer.$el.width();
         this.$string.find('p').css('font-size', skinWidth * 0.03);
     }
+    /**
+     * @internal
+     */
     render() {
-        if (this.shouldRender()) {
-            this.$el.html(this.template({ tracks: this.tracks }));
-            this.currentContainer?.$el.find('.subtitle-string').remove();
-            this.$string = $(this.templateString());
-            this.resizeFont();
-            this.currentContainer?.$el.append(this.$string[0]);
-            if (this.core.mediaControl.$subtitlesSelector &&
-                this.core.mediaControl.$subtitlesSelector.length > 0) {
-                this.core.mediaControl.$subtitlesSelector.append(this.el);
-            }
-            else {
-                this.core.mediaControl.$('.media-control-right-panel').append(this.el);
-            }
-            this.updateCurrentLevel(this.track);
-            this.highlightCurrentSubtitles();
-            this.applyPreselectedSubtitles();
+        if (!this.core.activeContainer) {
+            return this;
+        }
+        if (!this.shouldRender()) {
+            return this;
+        }
+        trace(`${T} render`, {
+            tracks: this.tracks?.length,
+            track: this.track?.language,
+        });
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        this.$el.html(Subtitles.template({ tracks: this.tracks }));
+        this.core.activeContainer.$el.find('.subtitle-string').remove();
+        this.$string = $(Subtitles.templateString());
+        this.resizeFont();
+        this.core.activeContainer.$el.append(this.$string[0]);
+        const ss = mediaControl.getElement('subtitlesSelector');
+        if (ss && ss.length > 0) {
+            ss.append(this.el);
         }
-        if (this.core.mediaControl.$subtitlesSelector?.find('span.subtitle-text')
-            .length > 0) {
-            this.renderIcon();
+        else {
+            mediaControl.getRightPanel().append(this.el);
         }
+        this.updateCurrentLevel(this.track);
+        this.highlightCurrentSubtitles();
+        this.applyPreselectedSubtitles();
+        this.renderIcon();
         return this;
     }
-    fillLevels(tracks) {
+    setTracks(tracks) {
         this.tracks = tracks;
         this.render();
     }
     findLevelBy(id) {
         if (this.tracks) {
-            for (let i = 0; i < this.tracks.length; i++) {
-                if (this.tracks[i].language === id) {
-                    return this.tracks[i]; // TODO TrackInfo?
+            for (const track of this.tracks) {
+                if (track.language === id) {
+                    return track; // TODO TrackInfo?
                 }
             }
         }
@@ -254,21 +274,21 @@ export class Subtitles extends UICorePlugin {
         }
     }
     onShowLevelSelectMenu() {
+        trace(`${T} onShowLevelSelectMenu`);
         this.toggleContextMenu();
     }
     hideSelectLevelMenu() {
         ;
-        this.$('.subtitles ul').hide();
+        this.$('[data-subtitles] ul').hide();
     }
     toggleContextMenu() {
-        ;
-        this.$('.subtitles ul').toggle();
+        this.$('[data-subtitles] ul').toggle();
     }
     buttonElement() {
-        return this.$('.subtitles button');
+        return this.$('[data-subtitles] button');
     }
     levelElement(id) {
-        return this.$('.subtitles ul a' + (id ? '[data-subtitles-select="' + id + '"]' : '')).parent();
+        return this.$('[data-subtitles] ul a' + (id ? '[data-subtitles-select="' + id + '"]' : '')).parent();
     }
     startLevelSwitch() {
         this.buttonElement().addClass('changing');
@@ -285,7 +305,7 @@ export class Subtitles extends UICorePlugin {
                 const track = this.tracks[i];
                 if (track.language === this.currentLevel.language) {
                     track.mode = 'showing';
-                    const currentTime = this.currentPlayback?.getCurrentTime() ?? 0;
+                    const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
                     const cues = track.cues;
                     let subtitleText = '';
                     if (cues && cues.length) {
@@ -347,8 +367,10 @@ export class Subtitles extends UICorePlugin {
     }
     renderIcon() {
         const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon;
-        this.core.mediaControl.$subtitlesSelector
-            .find('span.subtitle-text')
+        this.core
+            .getPlugin('media_control')
+            .getElement('subtitlesSelector')
+            ?.find('span.subtitle-text')
             .html(icon);
     }
 }

package/package.json

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

package/src/plugins/bottom-gear/BottomGear.ts

@@ -13,9 +13,15 @@ import { ZeptoResult } from '../../utils/types.js';
 
 const VERSION = '2.19.12';
 
-const T = 'plugins.media_control_gear';
+const T = 'plugins.bottom_gear';
 
-export enum Events {
+/**
+ * Custom events emitted by the plugin
+ */
+export enum GearEvents {
+  /**
+   * Emitted when the gear menu is rendered
+   */
   MEDIACONTROL_GEAR_RENDERED = 'mediacontrol:gear:rendered',
 }
 
@@ -30,6 +36,10 @@ export type GearItemElement = 'quality' | 'rate' | 'nerd';
  * @beta
  * @remarks
  * The plugins provides a base for attaching custom settings UI in the gear menu
+ * 
+ * Depends on:
+ *
+ * - {@link MediaControl | media_control}
  */
 export class BottomGear extends UICorePlugin {
   private isHd = false;
@@ -38,7 +48,7 @@ export class BottomGear extends UICorePlugin {
    * @internal
    */
   get name() {
-    return 'media_control_gear';
+    return 'bottom_gear';
   }
 
   /**
@@ -89,10 +99,22 @@ export class BottomGear extends UICorePlugin {
     this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
   }
 
+  /**
+   * @param name - Name of a gear menu placeholder item to attach custom UI
+   * @returns Zepto result of the element
+   */
   getElement(name: GearItemElement): ZeptoResult | null {
     return this.core.getPlugin('media_control')?.getElement('gear')?.find(`.gear-options-list [data-${name}]`);
   }
 
+  /**
+   * Replaces the content of the gear menu
+   * @param content - Zepto result of the element
+   */
+  setContent(content: ZeptoResult) {
+    this.$el.find('.gear-wrapper').html(content);
+  }
+
   private onActiveContainerChanged() {
     trace(`${T} onActiveContainerChanged`);
     this.bindContainerEvents();
@@ -131,7 +153,7 @@ export class BottomGear extends UICorePlugin {
 
     mediaControl.getElement('gear')?.html(this.el);
     this.core.trigger('gear:rendered'); // @deprecated
-    mediaControl.trigger(Events.MEDIACONTROL_GEAR_RENDERED);
+    mediaControl.trigger(GearEvents.MEDIACONTROL_GEAR_RENDERED);
     return this;
   }
 

package/src/plugins/clappr-nerd-stats/ClapprNerdStats.ts

@@ -21,7 +21,7 @@ import '../../../assets/clappr-nerd-stats/clappr-nerd-stats.scss';
 import pluginHtml from '../../../assets/clappr-nerd-stats/clappr-nerd-stats.ejs';
 import buttonHtml from '../../../assets/clappr-nerd-stats/button.ejs';
 import statsIcon from '../../../assets/icons/new/stats.svg';
-import { BottomGear, Events as BottomGearEvents } from '../bottom-gear/BottomGear.js';
+import { BottomGear, GearEvents } from '../bottom-gear/BottomGear.js';
 import { MediaControl } from '../media-control/MediaControl.js';
 import assert from 'assert';
 
@@ -128,7 +128,7 @@ export class ClapprNerdStats extends UICorePlugin {
   private iconPosition: IconPosition;
 
   get name() {
-    return 'media_control_nerd_stats';
+    return 'nerd_stats';
   }
 
   get supportedVersion() {
@@ -186,7 +186,7 @@ export class ClapprNerdStats extends UICorePlugin {
     const mediaControl = this.core.getPlugin('media_control') as MediaControl;
     assert(mediaControl, 'media_control plugin is required');
     this.listenToOnce(this.core, Events.CORE_READY, this.init);
-    this.listenTo(mediaControl, BottomGearEvents.MEDIACONTROL_GEAR_RENDERED, this.addToBottomGear);
+    this.listenTo(mediaControl, GearEvents.MEDIACONTROL_GEAR_RENDERED, this.addToBottomGear);
   }
 
   private init() {
@@ -316,7 +316,7 @@ export class ClapprNerdStats extends UICorePlugin {
   }
 
   private addToBottomGear() {
-    const gear = this.core.getPlugin('media_control_gear') as BottomGear;
+    const gear = this.core.getPlugin('bottom_gear') as BottomGear;
     const $el = gear.getElement('nerd')
     $el.html(buttonHtml)
     const $button = $el.find('.nerd-button');

package/src/plugins/level-selector/LevelSelector.ts

@@ -5,6 +5,7 @@ import { type QualityLevel } from '../../playback.types.js'
 import { CLAPPR_VERSION } from '../../build.js'
 import { ZeptoResult } from '../../utils/types.js'
 import { TemplateFunction } from '../types.js'
+import { BottomGear } from '../bottom-gear/BottomGear.js'
 
 import buttonHtml from '../../../assets/level-selector/button.ejs'
 import listHtml from '../../../assets/level-selector/list.ejs'
@@ -13,9 +14,10 @@ import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg'
 import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg'
 import checkIcon from '../../../assets/icons/new/check.svg'
 import '../../../assets/level-selector/style.scss'
+import assert from 'assert'
 
 
-const T = 'plugins.media_control_level_selector'
+const T = 'plugins.level_selector'
 const VERSION = '2.19.4'
 
 /**
@@ -23,7 +25,14 @@ const VERSION = '2.19.4'
  * @beta
  *
  * @remarks
- * The plugin is rendered as a button in the {@link BottomGear | gear menu}.
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * - {@link BottomGear}
+ *
+ * The plugin is rendered as an item in the gear menu.
+ *
  * When clicked, it shows a list of quality levels to choose from.
  *
  * Configuration options:
@@ -53,15 +62,15 @@ export class LevelSelector extends UICorePlugin {
 
   private isOpen = false
 
-  private buttonTemplate: TemplateFunction | null = null
+  private static readonly buttonTemplate: TemplateFunction = template(buttonHtml)
 
-  private listTemplate: TemplateFunction | null = null
+  private static readonly listTemplate: TemplateFunction = template(listHtml)
 
   /**
    * @internal
    */
   get name() {
-    return 'media_control_level_selector'
+    return 'level_selector'
   }
 
   /**
@@ -183,6 +192,8 @@ export class LevelSelector extends UICorePlugin {
    * @internal
    */
   override render() {
+    assert(this.core.getPlugin('bottom_gear'), 'bottom_gear plugin is required')
+
     if (!this.shouldRender()) {
       return this
     }
@@ -193,29 +204,21 @@ export class LevelSelector extends UICorePlugin {
   }
 
   private renderButton() {
-    if (!this.buttonTemplate) {
-      this.buttonTemplate = template(buttonHtml)
-    }
     if (!this.isOpen) {
-      const html = this.buttonTemplate?.({
+      const html = LevelSelector.buttonTemplate({
         arrowRightIcon,
         currentText: this.currentText,
         isHd: this.isHd,
         hdIcon,
       })
       this.$el.html(html)
-      const mediaControl = this.core.getPlugin('media_control')
-      mediaControl.getElement('bottomGear')
-        ?.find('.gear-options-list [data-quality]')
-        ?.html(this.el)
+      const gear = this.core.getPlugin('bottom_gear') as BottomGear
+      gear.getElement('quality')?.html(this.el)
     }
   }
 
   private renderDropdown() {
-    if (!this.listTemplate) {
-      this.listTemplate = template(listHtml)
-    }
-    const html = this.listTemplate!({
+    const html = LevelSelector.listTemplate({
       arrowLeftIcon,
       checkIcon,
       labels: this.levelLabels,
@@ -224,8 +227,8 @@ export class LevelSelector extends UICorePlugin {
       removeAuto: this.removeAuto,
     })
     this.$el.html(html)
-    const mediaControl = this.core.getPlugin('media_control')
-    mediaControl.getElement('bottomGear')?.find('.gear-wrapper').html(this.el)
+    const gear = this.core.getPlugin('bottom_gear') as BottomGear
+    gear?.setContent(this.el)
   }
 
   private get maxLevel() {