fix(FEC-13517): Wrong and inconsistent order of plugins & Plugins but…

…tons sometimes display with the wrong icon (#51) ### Description of the Changes **fix:** **Wrong and inconsistent order of plugins** **fix:** **Plugins buttons sometimes display with the wrong icon** **fix:** **Decoupling the UpperBarManager and sidePanelBarManager services** , Removing all UpperBarManager related logic from sidePanelBarManager **fix:** **fix Demo test pages** of both (UpperBarManager and sidePanelBarManager services) **refactor:** **decoupling plugins order config** from ui-managers and setting it dynamically at run time based on the supplied order param while calling add icon API **solves: FEC-13517 FEC-13517** #### Related Prs kaltura/playkit-js-transcript#175 kaltura/playkit-js-share#38 kaltura/playkit-js-moderation#74 kaltura/playkit-js-playlist#53 kaltura/playkit-js-related#61 kaltura/playkit-js-info#90 kaltura/playkit-js-navigation#348 kaltura/playkit-js-downloads#39 kaltura/playkit-js-qna#334 --------- Co-authored-by: JonathanTGold <jonathan.gold@[email protected]>
kaltura · Jan 23, 2024 · 281cb2a · 281cb2a
1 parent c8cdf1f
commit 281cb2a
Show file tree

Hide file tree

Showing 29 changed files with 261 additions and 241 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -15,7 +15,7 @@
     "@typescript-eslint/explicit-function-return-type": "warn",
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/explicit-member-accessibility":[
       "error",
       {

diff --git a/demo/side-panels-manager/index.html b/demo/side-panels-manager/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <title>UI Managers</title>
     <link rel="stylesheet" type="text/css" href="style.css" />
-    <script src="https://raw.githack.com/kaltura/kaltura-player-js/master/dist/kaltura-ovp-player.js"></script>
+    <script src="https://unpkg.com/@playkit-js/kaltura-player-js@canary/dist/kaltura-ovp-player.js"></script>
     <script src="../playkit-ui-managers.js"></script>
   </head>
   <body>
@@ -19,16 +19,6 @@
         playback: {
           autoplay: true
         },
-        // translations - for local environment
-        ui: {
-          translations: {
-            "en": {
-              "controls": {
-                "moreIcon": "More"
-              }
-            }
-          }
-        },
         plugins: {
           somePlugin: {},
           uiManagers: {}

diff --git a/demo/side-panels-manager/some-plugin.js b/demo/side-panels-manager/some-plugin.js
@@ -1,7 +1,7 @@
 const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
 const { SidePanelModes, SidePanelPositions, ReservedPresetNames } = ui;
 
-const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
+const ICON_PATH = 'M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 2C10.477 6 6 10.477 6 16s4.477 10 10 10 10-4.477 10-10S21.523 6 16 6zm0 9a1 1 0 0 1 1 .99v4.02a.992.992 0 0 1-.883.983L16 21a1 1 0 0 1-1-.99v-4.02c0-.507.383-.926.883-.983L16 15zm0-4.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'
 
 
 import {
@@ -24,7 +24,7 @@ export class somePlugin extends BasePlugin {
     super(name, player);
     this.player.ready().then(() => {
       const panelItemAId = this.player.getService('sidePanelsManager').add({
-        label: 'Panel A',
+        label: 'Panel-A',
         panelComponent: PanelItemComponent,
         iconComponent: {component: IconComponent, svgIcon: {path: ICON_PATH}},
         presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
@@ -38,33 +38,41 @@ export class somePlugin extends BasePlugin {
         }
       });
 
+      this.addUpperBarIcon('Panel-A', panelItemAId, IconComponent);
+
       const PanelItemBId = this.player.getService('sidePanelsManager').add({
-        label: 'Panel B',
+        label: 'Panel-B',
         panelComponent: AnotherPanelItemComponent,
         iconComponent: {component: AnotherIconComponent, svgIcon: {path: ICON_PATH}},
         presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
         position: SidePanelPositions.LEFT,
         expandMode: SidePanelModes.ALONGSIDE
       });
 
+      this.addUpperBarIcon('Panel-B', PanelItemBId, AnotherIconComponent);
+
       const PanelItemCId = this.player.getService('sidePanelsManager').add({
-        label: 'Panel C',
+        label: 'Panel-C',
         panelComponent: SomePanelItemComponent,
         iconComponent: {component: SomeIconComponent, svgIcon: {path: ICON_PATH}},
         presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
         position: SidePanelPositions.RIGHT,
         expandMode: SidePanelModes.OVER
       });
 
+      this.addUpperBarIcon('Panel-C', PanelItemCId, SomeIconComponent);
+
       const PanelItemDId = this.player.getService('sidePanelsManager').add({
-        label: 'Panel D',
+        label: 'Panel-D',
         panelComponent: MorePanelItemComponent,
         iconComponent: {component: MoreIconComponent, svgIcon: {path: ICON_PATH}},
         presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
         position: SidePanelPositions.BOTTOM,
         expandMode: SidePanelModes.ALONGSIDE
       });
 
+      this.addUpperBarIcon('Panel-D', PanelItemDId, MoreIconComponent);
+
       this.player.getService('sidePanelsManager').activateItem(panelItemAId);
       console.log(this.player.getService('sidePanelsManager').isItemActive(panelItemAId));
       // true
@@ -76,6 +84,24 @@ export class somePlugin extends BasePlugin {
     });
   }
 
+  addUpperBarIcon(pluginName, panelItemAIconId, IconComponent) {
+    this.player.getService('upperBarManager').add({
+      displayName: pluginName,
+      ariaLabel: pluginName,
+      svgIcon: {path: ICON_PATH},
+      component: IconComponent,
+      onClick: () => this.toggle(panelItemAIconId)
+    });
+  }
+
+  toggle(panelItemId) {
+    if (this.player.getService('sidePanelsManager').isItemActive(panelItemId)) {
+      this.player.getService('sidePanelsManager').deactivateItem(panelItemId);
+    } else {
+      this.player.getService('sidePanelsManager').activateItem(panelItemId);
+    }
+  }
+
 
   static isValid() {
     return true;

diff --git a/demo/uppar-bar-manager/index.html b/demo/uppar-bar-manager/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <title>UI Managers</title>
     <link rel="stylesheet" type="text/css" href="style.css" />
-    <script src="https://raw.githack.com/kaltura/kaltura-player-js/master/dist/kaltura-ovp-player.js"></script>
+    <script src="https://unpkg.com/@playkit-js/kaltura-player-js@canary/dist/kaltura-ovp-player.js"></script>
     <script src="../playkit-ui-managers.js"></script>
   </head>
   <body>
@@ -24,29 +24,8 @@
         playback: {
           autoplay: true
         },
-        // translations - for local environment
-        ui: {
-          translations: {
-            "en": {
-              "controls": {
-                "moreIcon": "More"
-              }
-            }
-          }
-        },
         plugins: {
-          uiManagers: {
-            upperBarManager: {
-              pluginsIconsOrder: {
-                'Plugin A': 100,
-                'Plugin B': 110,
-                'Plugin C': 120,
-                'Plugin D': 130,
-                'Plugin E': 140,
-                'Plugin F': 150
-              }
-            }
-          },
+          uiManagers: {},
           pluginA: {},
           pluginB: {},
           pluginC: {},

diff --git a/demo/uppar-bar-manager/plugin-A.js b/demo/uppar-bar-manager/plugin-A.js
@@ -1,7 +1,7 @@
 const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
 const { h, preact, style } = KalturaPlayer.ui;
 
-const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
+const ICON_PATH = 'M8.378 7.084l5.175 19.314c.134.497-.126 1.005-.594 1.19l-.112.037c-.533.143-1.08-.165-1.225-.71L6.447 7.603c-.134-.497.126-1.005.594-1.19l.112-.037c.533-.143 1.08.165 1.225.71zM21.882 7c1.878 0 2.79 1.622 1.84 3.239l-1.386 2.36 2.94 3.246C26.6 17.31 25.842 19 23.868 19h-10.21c-.452 0-.848-.304-.966-.741l-2.68-10c-.17-.635.31-1.259.967-1.259h10.902zm.211 1.994l-.21.006h-9.6l2.144 8h9.196l-3.263-3.604c-.293-.324-.342-.8-.12-1.178l1.757-2.992c.114-.194.168-.23.096-.232z';
 
 class IconComponent extends preact.Component {
   render() {
@@ -23,7 +23,9 @@ export class PluginA extends BasePlugin {
   addUpperBarIcon() {
     this.player.ready().then(() => {
       this.iconId = this.player.getService('upperBarManager').add({
-        label: 'Plugin A',
+        displayName: 'Plugin-A',
+        ariaLabel: 'Plugin-A',
+        order: 100,
         svgIcon: {path: ICON_PATH},
         component: IconComponent,
         onClick: () => alert('hello from plugin A')

diff --git a/demo/uppar-bar-manager/plugin-B.js b/demo/uppar-bar-manager/plugin-B.js
@@ -1,7 +1,7 @@
 const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
 const { h, preact, style } = KalturaPlayer.ui;
 
-const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
+const ICON_PATH = 'M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 2C10.477 6 6 10.477 6 16s4.477 10 10 10 10-4.477 10-10S21.523 6 16 6zm0 9a1 1 0 0 1 1 .99v4.02a.992.992 0 0 1-.883.983L16 21a1 1 0 0 1-1-.99v-4.02c0-.507.383-.926.883-.983L16 15zm0-4.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'
 
 
 class IconComponent extends preact.Component {
@@ -24,7 +24,9 @@ export class PluginB extends BasePlugin {
   addUpperBarIcon() {
     this.player.ready().then(() => {
       this.iconId = this.player.getService('upperBarManager').add({
-        label: 'Plugin B',
+        displayName: 'Plugin-B',
+        ariaLabel: 'Plugin-B',
+        order: 110,
         svgIcon: {path: ICON_PATH},
         component: IconComponent,
         onClick: () => alert('hello from plugin B')

diff --git a/demo/uppar-bar-manager/plugin-C.js b/demo/uppar-bar-manager/plugin-C.js
@@ -1,7 +1,7 @@
 const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
 const { h, preact, style } = KalturaPlayer.ui;
 
-const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
+const ICON_PATH = 'M11.6592 10.245L6.70483 5.29061C6.31701 4.9028 5.68581 4.90476 5.29528 5.29528C4.90204 5.68853 4.90267 6.31688 5.29061 6.70483L10.245 11.6592L5.29061 16.6137C4.9028 17.0015 4.90476 17.6327 5.29528 18.0232C5.68853 18.4165 6.31688 18.4158 6.70483 18.0279L11.6592 13.0735L16.6137 18.0279C17.0015 18.4157 17.6327 18.4137 18.0232 18.0232C18.4165 17.63 18.4158 17.0016 18.0279 16.6137L13.0735 11.6592L18.0279 6.70483C18.4157 6.31701 18.4137 5.68581 18.0232 5.29528C17.63 4.90204 17.0016 4.90267 16.6137 5.29061L11.6592 10.245Z'
 
 class IconComponent extends preact.Component {
   render() {
@@ -23,7 +23,9 @@ export class PluginC extends BasePlugin {
   addUpperBarIcon() {
     this.player.ready().then(() => {
       this.iconId = this.player.getService('upperBarManager').add({
-        label: 'Plugin C',
+        displayName: 'Plugin-C',
+        ariaLabel: 'Plugin-C',
+        order: 120,
         svgIcon: {path: ICON_PATH},
         component: IconComponent,
         onClick: () => alert('hello from plugin C')

diff --git a/demo/uppar-bar-manager/plugin-D.js b/demo/uppar-bar-manager/plugin-D.js
@@ -1,9 +1,10 @@
 const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
 const { h, preact, style } = KalturaPlayer.ui;
 
-const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
+const ICON_PATH = 'M19.7071 9.29289C20.0676 9.65338 20.0953 10.2206 19.7903 10.6129L19.7071 10.7071L14.415 16L19.7071 21.2929C20.0676 21.6534 20.0953 22.2206 19.7903 22.6129L19.7071 22.7071C19.3466 23.0676 18.7794 23.0953 18.3871 22.7903L18.2929 22.7071L12.2929 16.7071C11.9324 16.3466 11.9047 15.7794 12.2097 15.3871L12.2929 15.2929L18.2929 9.29289C18.6834 8.90237 19.3166 8.90237 19.7071 9.29289Z';
 
-class IconComponent extends preact.Component {
+
+  class IconComponent extends preact.Component {
   render() {
     return h('div', { className: 'icon' + ' ' + ui.style.upperBarIcon, tabIndex: 0 }, 'D');
   }
@@ -23,7 +24,9 @@ export class PluginD extends BasePlugin {
   addUpperBarIcon() {
     this.player.ready().then(() => {
       this.iconId = this.player.getService('upperBarManager').add({
-        label: 'Plugin D',
+        displayName: 'Plugin-D',
+        ariaLabel: 'Plugin-D',
+        order: 130,
         component: IconComponent,
         svgIcon: {path: ICON_PATH},
         onClick: () => alert('hello from plugin D')

diff --git a/demo/uppar-bar-manager/plugin-E.js b/demo/uppar-bar-manager/plugin-E.js
@@ -1,7 +1,7 @@
 const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
 const { h, preact, style } = KalturaPlayer.ui;
 
-const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
+const ICON_PATH = 'M11.6592 10.245L6.70483 5.29061C6.31701 4.9028 5.68581 4.90476 5.29528 5.29528C4.90204 5.68853 4.90267 6.31688 5.29061 6.70483L10.245 11.6592L5.29061 16.6137C4.9028 17.0015 4.90476 17.6327 5.29528 18.0232C5.68853 18.4165 6.31688 18.4158 6.70483 18.0279L11.6592 13.0735L16.6137 18.0279C17.0015 18.4157 17.6327 18.4137 18.0232 18.0232C18.4165 17.63 18.4158 17.0016 18.0279 16.6137L13.0735 11.6592L18.0279 6.70483C18.4157 6.31701 18.4137 5.68581 18.0232 5.29528C17.63 4.90204 17.0016 4.90267 16.6137 5.29061L11.6592 10.245Z'
 
 
 class IconComponent extends preact.Component {
@@ -24,7 +24,9 @@ export class PluginE extends BasePlugin {
   addUpperBarIcon() {
     this.player.ready().then(() => {
       this.iconId = this.player.getService('upperBarManager').add({
-        label: 'Plugin E',
+        displayName: 'Plugin-E',
+        ariaLabel: 'Plugin-E',
+        order: 140,
         component: IconComponent,
         svgIcon: {path: ICON_PATH},
         onClick: () => alert('hello from plugin E')