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

…tons sometimes display with the wrong icon (#90) fix: Wrong and inconsistent order of plugins fix: Plugins buttons sometimes display with the wrong icon solves: FEC-13517 FEC-13517 Related Prs kaltura/playkit-js-ui-managers#51 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-navigation#348 kaltura/playkit-js-downloads#39 kaltura/playkit-js-qna#334 --------- Co-authored-by: JonathanTGold <jonathan.gold@[email protected]>
kaltura · Jan 24, 2024 · 5ceef15 · 5ceef15
1 parent 963440f
commit 5ceef15
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/components/plugin-button/index.tsx b/src/components/plugin-button/index.tsx
@@ -1,6 +1,7 @@
 import {h} from 'preact';
 import {icons} from '../icons';
 import {ui} from '@playkit-js/kaltura-player-js';
+import { pluginName } from "../../index";
 
 const {Tooltip, Icon} = KalturaPlayer.ui.components;
 const {Text} = ui.preacti18n;
@@ -15,7 +16,7 @@ export const PluginButton = ({label, setRef}: PluginButtonProps) => {
     <Tooltip label={infoTxt} type="bottom">
         <button type="button" aria-label={label} className={ui.style.upperBarIcon} data-testid="infoPluginButton" ref={setRef}>
           <Icon
-            id="info-plugin-button"
+            id={pluginName}
             height={icons.BigSize}
             width={icons.BigSize}
             viewBox={`0 0 ${icons.BigSize} ${icons.BigSize}`}

diff --git a/src/index.ts b/src/index.ts
@@ -9,5 +9,5 @@ const NAME = __NAME__;
 export {PlaykitJsInfoPlugin as Plugin};
 export {VERSION, NAME};
 
-const pluginName: string = 'playkit-js-info';
-KalturaPlayer.core.registerPlugin(pluginName, PlaykitJsInfoPlugin);
+export const pluginName: string = 'playkit-js-info';
+KalturaPlayer.core.registerPlugin(pluginName, PlaykitJsInfoPlugin);
diff --git a/src/info-plugin.tsx b/src/info-plugin.tsx
@@ -143,9 +143,14 @@ export class PlaykitJsInfoPlugin extends KalturaPlayer.core.BasePlugin {
       return;
     }
     this.player.ready().then(() => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       this._iconId = this.upperBarManager!.add({
-        //@ts-ignore
-        label: <Text id="info.info">Info</Text>,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ariaLabel: <Text id="info.info">Info</Text>,
+        displayName: 'Info',
+        order: 80,
         component: () => <PluginButton label="Video info" setRef={this._setPluginButtonRef}/>,
         svgIcon: {path: icons.PLUGIN_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
         onClick: this._openInfo