@gcorevideo/player 2.20.11 → 2.20.12

package/lib/plugins/favicon/Favicon.js

@@ -5,26 +5,32 @@ import pauseIcon from '../../../assets/icons/new/pause.svg';
 import stopIcon from '../../../assets/icons/new/stop.svg';
 const FAVICON_COLOR = '#567';
 const FAVICON_SELECTOR = 'link[rel="shortcut icon"]';
-// const oldIcon = $(FAVICON_SELECTOR);
 /**
- * `PLUGIN` that adds custom favicon to the player's tab.
+ * `PLUGIN` that changes the favicon according to the player's state.
  * @beta
+ * @remarks
+ * There are three states: stopped, playing and paused.
  */
 export class Favicon extends CorePlugin {
-    _container = null;
     oldIcon;
     playIcon = null;
     pauseIcon = null;
     stopIcon = null;
+    /**
+     * @internal
+     */
     get name() {
         return 'favicon';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    //   get oldIcon() {
-    //     return oldIcon;
-    //   }
+    /**
+     * @internal
+     */
     constructor(core) {
         super(core);
         this.oldIcon = $(FAVICON_SELECTOR);
@@ -32,41 +38,31 @@ export class Favicon extends CorePlugin {
             this.stopIcon = this.createIcon(stopIcon);
             this.changeIcon(this.stopIcon);
         }
-        this.configure();
-    }
-    configure() {
-        if (this.core.options.changeFavicon) {
-            if (!this.enabled) {
-                // @ts-ignore
-                this.stopListening(this.core, Events.CORE_OPTIONS_CHANGE);
-                this.enable();
-            }
-        }
-        else if (this.enabled) {
-            this.disable();
-            this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.configure);
-        }
     }
+    /**
+     * @internal
+     */
     bindEvents() {
-        this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.configure);
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.containerChanged);
-        this.core.activeContainer && this.containerChanged();
     }
     containerChanged() {
-        // @ts-ignore
-        this._container && this.stopListening(this._container);
-        this._container = this.core.activeContainer;
-        this.listenTo(this._container, Events.CONTAINER_PLAY, this.setPlayIcon);
-        this.listenTo(this._container, Events.CONTAINER_PAUSE, this.setPauseIcon);
-        this.listenTo(this._container, Events.CONTAINER_STOP, this.resetIcon);
-        this.listenTo(this._container, Events.CONTAINER_ENDED, this.resetIcon);
-        this.listenTo(this._container, Events.CONTAINER_ERROR, this.resetIcon);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAY, this.setPlayIcon);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.setPauseIcon);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.resetIcon);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.resetIcon);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_ERROR, this.resetIcon);
         this.resetIcon();
     }
+    /**
+     * @internal
+     */
     disable() {
         super.disable();
         this.resetIcon();
     }
+    /**
+     * @internal
+     */
     destroy() {
         super.destroy();
         this.resetIcon();
@@ -97,14 +93,11 @@ export class Favicon extends CorePlugin {
         this.changeIcon(this.pauseIcon);
     }
     resetIcon() {
-        $(FAVICON_SELECTOR).remove();
         const icon = this.oldIcon.length > 0 ? this.oldIcon : this.stopIcon;
         this.changeIcon(icon);
     }
     changeIcon(icon) {
-        if (icon) {
-            $('link[rel="shortcut icon"]').remove();
-            $('head').append(icon);
-        }
+        $('link[rel="shortcut icon"]').remove();
+        $('head').append(icon);
     }
 }

package/package.json

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

package/src/plugins/context-menu/ContextMenu.ts

@@ -18,7 +18,7 @@ type MenuOption = {
 }
 
 /**
- * The plugin adds a context menu to the player.
+ * Context menu plugin settings
  * @beta
  */
 export interface ContextMenuPluginSettings {

package/src/plugins/error-screen/ErrorScreen.ts

@@ -154,7 +154,6 @@ export class ErrorScreen extends UICorePlugin {
       }),
     )
 
-    // TODO append to container instead of core?
     if (!this.el.parentElement) {
       this.core.$el.append(this.el)
     }

package/src/plugins/favicon/Favicon.ts

@@ -10,15 +10,23 @@ import stopIcon from '../../../assets/icons/new/stop.svg';
 const FAVICON_COLOR = '#567';
 const FAVICON_SELECTOR = 'link[rel="shortcut icon"]';
 
-// const oldIcon = $(FAVICON_SELECTOR);
+/**
+ * @beta
+ */
+export interface FaviconPluginSettings {
+  /**
+   * CSS color of the favicon.
+   */
+  faviconColor?: string;
+}
 
 /**
- * `PLUGIN` that adds custom favicon to the player's tab.
+ * `PLUGIN` that changes the favicon according to the player's state.
  * @beta
+ * @remarks
+ * There are three states: stopped, playing and paused.
  */
 export class Favicon extends CorePlugin {
-  private _container: Container | null = null;
-
   private oldIcon: ZeptoResult;
 
   private playIcon: ZeptoResult | null = null;
@@ -27,18 +35,23 @@ export class Favicon extends CorePlugin {
 
   private stopIcon: ZeptoResult | null = null;
 
+  /**
+   * @internal
+   */
   get name() {
     return 'favicon';
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION };
   }
 
-  //   get oldIcon() {
-  //     return oldIcon;
-  //   }
-
+  /**
+   * @internal
+   */
   constructor(core: Core) {
     super(core);
     this.oldIcon = $(FAVICON_SELECTOR);
@@ -46,45 +59,35 @@ export class Favicon extends CorePlugin {
       this.stopIcon = this.createIcon(stopIcon);
       this.changeIcon(this.stopIcon);
     }
-    this.configure();
-  }
-
-  configure() {
-    if (this.core.options.changeFavicon) {
-      if (!this.enabled) {
-        // @ts-ignore
-        this.stopListening(this.core, Events.CORE_OPTIONS_CHANGE);
-        this.enable();
-      }
-    } else if (this.enabled) {
-      this.disable();
-      this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.configure);
-    }
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.configure);
     this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.containerChanged);
-    this.core.activeContainer && this.containerChanged();
   }
 
   private containerChanged() {
-    // @ts-ignore
-    this._container && this.stopListening(this._container);
-    this._container = this.core.activeContainer;
-    this.listenTo(this._container, Events.CONTAINER_PLAY, this.setPlayIcon);
-    this.listenTo(this._container, Events.CONTAINER_PAUSE, this.setPauseIcon);
-    this.listenTo(this._container, Events.CONTAINER_STOP, this.resetIcon);
-    this.listenTo(this._container, Events.CONTAINER_ENDED, this.resetIcon);
-    this.listenTo(this._container, Events.CONTAINER_ERROR, this.resetIcon);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAY, this.setPlayIcon);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.setPauseIcon);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.resetIcon);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.resetIcon);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_ERROR, this.resetIcon);
     this.resetIcon();
   }
 
+  /**
+   * @internal
+   */
   override disable() {
     super.disable();
     this.resetIcon();
   }
 
+  /**
+   * @internal
+   */
   override destroy() {
     super.destroy();
     this.resetIcon();
@@ -113,7 +116,6 @@ export class Favicon extends CorePlugin {
     if (!this.playIcon) {
       this.playIcon = this.createIcon(playIcon);
     }
-
     this.changeIcon(this.playIcon);
   }
 
@@ -121,21 +123,16 @@ export class Favicon extends CorePlugin {
     if (!this.pauseIcon) {
       this.pauseIcon = this.createIcon(pauseIcon);
     }
-
     this.changeIcon(this.pauseIcon);
   }
 
   private resetIcon() {
-    $(FAVICON_SELECTOR).remove();
     const icon = this.oldIcon.length > 0 ? this.oldIcon : this.stopIcon;
-
     this.changeIcon(icon);
   }
 
-  private changeIcon(icon: ZeptoResult | null) {
-    if (icon) {
-      $('link[rel="shortcut icon"]').remove();
-      $('head').append(icon);
-    }
+  private changeIcon(icon: ZeptoResult) {
+    $('link[rel="shortcut icon"]').remove();
+    $('head').append(icon);
   }
 }

package/temp/player.api.json

@@ -162,7 +162,7 @@
   },
   "kind": "Package",
   "canonicalReference": "@gcorevideo/player!",
-  "docComment": "/**\n * Video player for the Gcore streaming platform\n *\n * @remarks\n *\n * This package provides a video player for the Gcore streaming platform. It is built on top of the Clappr library and provides a framework for building custom integrations. Start with {@link Player} for more information.\n *\n * Various plugins (marked with `PLUGIN` keyword) are available to extend the player with additional features.\n *\n * @example\n * ```ts\n * import { Player, MediaControl, ErrorScreen } from '@gcorevideo/player'\n *\n * Player.registerPlugin(MediaControl)\n * Player.registerPlugin(ErrorScreen)\n *\n * const player = new Player({\n *   autoPlay: true,\n *   mute: true,\n *   sources: [{ source: 'https://example.com/a.mpd', mimeType: 'application/dash+xml' }],\n * })\n *\n * player.attachTo(document.getElementById('container'))\n * ```\n *\n * @packageDocumentation\n */\n",
+  "docComment": "/**\n * Video player for the Gcore streaming platform\n *\n * @remarks\n *\n * This package provides a video player for the Gcore streaming platform. It is built on top of the {@link https://github.com/clappr/clappr | Clappr} library and provides a framework for building custom integrations. Start with {@link Player} for more information.\n *\n * Various plugins (marked with `PLUGIN` keyword) are available to extend the player with additional features.\n *\n * @example\n * ```ts\n * import { Player, MediaControl, ErrorScreen } from '@gcorevideo/player'\n *\n * Player.registerPlugin(MediaControl)\n * Player.registerPlugin(ErrorScreen)\n *\n * const player = new Player({\n *   autoPlay: true,\n *   mute: true,\n *   sources: [{ source: 'https://example.com/a.mpd', mimeType: 'application/dash+xml' }],\n * })\n *\n * player.attachTo(document.getElementById('container'))\n * ```\n *\n * @packageDocumentation\n */\n",
   "name": "@gcorevideo/player",
   "preserveMemberOrder": false,
   "members": [
@@ -1043,7 +1043,7 @@
         {
           "kind": "Interface",
           "canonicalReference": "@gcorevideo/player!ContextMenuPluginSettings:interface",
-          "docComment": "/**\n * The plugin adds a context menu to the player.\n *\n * @beta\n */\n",
+          "docComment": "/**\n * Context menu plugin settings\n *\n * @beta\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -1331,7 +1331,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@gcorevideo/player!Favicon:class",
-          "docComment": "/**\n * `PLUGIN` that adds custom favicon to the player's tab.\n *\n * @beta\n */\n",
+          "docComment": "/**\n * `PLUGIN` that changes the favicon according to the player's state.\n *\n * @remarks\n *\n * There are three states: stopped, playing and paused.\n *\n * The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the `Favicon` class.\n *\n * @beta\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -1352,172 +1352,36 @@
           "isAbstract": false,
           "name": "Favicon",
           "preserveMemberOrder": false,
-          "members": [
-            {
-              "kind": "Constructor",
-              "canonicalReference": "@gcorevideo/player!Favicon:constructor(1)",
-              "docComment": "/**\n * Constructs a new instance of the `Favicon` class\n */\n",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "constructor(core: "
-                },
-                {
-                  "kind": "Reference",
-                  "text": "Core",
-                  "canonicalReference": "@clappr/core!default:class"
-                },
-                {
-                  "kind": "Content",
-                  "text": ");"
-                }
-              ],
-              "releaseTag": "Beta",
-              "isProtected": false,
-              "overloadIndex": 1,
-              "parameters": [
-                {
-                  "parameterName": "core",
-                  "parameterTypeTokenRange": {
-                    "startIndex": 1,
-                    "endIndex": 2
-                  },
-                  "isOptional": false
-                }
-              ]
-            },
-            {
-              "kind": "Method",
-              "canonicalReference": "@gcorevideo/player!Favicon#bindEvents:member(1)",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "bindEvents(): "
-                },
-                {
-                  "kind": "Content",
-                  "text": "void"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isStatic": false,
-              "returnTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "releaseTag": "Beta",
-              "isProtected": false,
-              "overloadIndex": 1,
-              "parameters": [],
-              "isOptional": false,
-              "isAbstract": false,
-              "name": "bindEvents"
-            },
-            {
-              "kind": "Method",
-              "canonicalReference": "@gcorevideo/player!Favicon#configure:member(1)",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "configure(): "
-                },
-                {
-                  "kind": "Content",
-                  "text": "void"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isStatic": false,
-              "returnTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "releaseTag": "Beta",
-              "isProtected": false,
-              "overloadIndex": 1,
-              "parameters": [],
-              "isOptional": false,
-              "isAbstract": false,
-              "name": "configure"
-            },
-            {
-              "kind": "Method",
-              "canonicalReference": "@gcorevideo/player!Favicon#destroy:member(1)",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "destroy(): "
-                },
-                {
-                  "kind": "Content",
-                  "text": "void"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isStatic": false,
-              "returnTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "releaseTag": "Beta",
-              "isProtected": false,
-              "overloadIndex": 1,
-              "parameters": [],
-              "isOptional": false,
-              "isAbstract": false,
-              "name": "destroy"
-            },
+          "members": [],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "implementsTokenRanges": []
+        },
+        {
+          "kind": "Interface",
+          "canonicalReference": "@gcorevideo/player!FaviconPluginSettings:interface",
+          "docComment": "/**\n * @beta\n */\n",
+          "excerptTokens": [
             {
-              "kind": "Method",
-              "canonicalReference": "@gcorevideo/player!Favicon#disable:member(1)",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "disable(): "
-                },
-                {
-                  "kind": "Content",
-                  "text": "void"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isStatic": false,
-              "returnTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "releaseTag": "Beta",
-              "isProtected": false,
-              "overloadIndex": 1,
-              "parameters": [],
-              "isOptional": false,
-              "isAbstract": false,
-              "name": "disable"
-            },
+              "kind": "Content",
+              "text": "export interface FaviconPluginSettings "
+            }
+          ],
+          "fileUrlPath": "src/plugins/favicon/Favicon.ts",
+          "releaseTag": "Beta",
+          "name": "FaviconPluginSettings",
+          "preserveMemberOrder": false,
+          "members": [
             {
-              "kind": "Property",
-              "canonicalReference": "@gcorevideo/player!Favicon#name:member",
-              "docComment": "",
+              "kind": "PropertySignature",
+              "canonicalReference": "@gcorevideo/player!FaviconPluginSettings#faviconColor:member",
+              "docComment": "/**\n * CSS color of the favicon.\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "get name(): "
+                  "text": "faviconColor?: "
                 },
                 {
                   "kind": "Content",
@@ -1528,54 +1392,17 @@
                   "text": ";"
                 }
               ],
-              "isReadonly": true,
-              "isOptional": false,
+              "isReadonly": false,
+              "isOptional": true,
               "releaseTag": "Beta",
-              "name": "name",
+              "name": "faviconColor",
               "propertyTypeTokenRange": {
                 "startIndex": 1,
                 "endIndex": 2
-              },
-              "isStatic": false,
-              "isProtected": false,
-              "isAbstract": false
-            },
-            {
-              "kind": "Property",
-              "canonicalReference": "@gcorevideo/player!Favicon#supportedVersion:member",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "get supportedVersion(): "
-                },
-                {
-                  "kind": "Content",
-                  "text": "{\n        min: string;\n    }"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isReadonly": true,
-              "isOptional": false,
-              "releaseTag": "Beta",
-              "name": "supportedVersion",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "isStatic": false,
-              "isProtected": false,
-              "isAbstract": false
+              }
             }
           ],
-          "extendsTokenRange": {
-            "startIndex": 1,
-            "endIndex": 2
-          },
-          "implementsTokenRanges": []
+          "extendsTokenRanges": []
         },
         {
           "kind": "TypeAlias",
@@ -2976,6 +2803,37 @@
               "isAbstract": false,
               "name": "enableControlButton"
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@gcorevideo/player!MediaControl#getCenterPanel:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "getCenterPanel(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "any"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Beta",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "getCenterPanel"
+            },
             {
               "kind": "Method",
               "canonicalReference": "@gcorevideo/player!MediaControl#getElement:member(1)",
@@ -3030,6 +2888,37 @@
               "isAbstract": false,
               "name": "getElement"
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@gcorevideo/player!MediaControl#getLeftPanel:member(1)",
+              "docComment": "/**\n * Get the left panel area to append custom elements to\n *\n * @returns ZeptoSelector of the left panel element\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "getLeftPanel(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "any"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Beta",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "getLeftPanel"
+            },
             {
               "kind": "Method",
               "canonicalReference": "@gcorevideo/player!MediaControl#getRightPanel:member(1)",