fix(FEC-13517): Wrong and inconsistent order of plugins (#348)

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-info#90 kaltura/playkit-js-downloads#39 kaltura/playkit-js-qna#334 --------- Co-authored-by: JonathanTGold <jonathan.gold@[email protected]>
kaltura · Jan 24, 2024 · 30a746f · 30a746f
1 parent 48bc076
commit 30a746f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/components/navigation/plugin-button/index.tsx b/src/components/navigation/plugin-button/index.tsx
@@ -2,6 +2,7 @@ import {h} from 'preact';
 import {ui} from '@playkit-js/kaltura-player-js';
 import * as styles from './plugin-button.scss';
 import {icons} from '../../icons';
+import { pluginName } from "../../../navigation-plugin";
 
 const {Tooltip, Icon} = KalturaPlayer.ui.components;
 const {withText, Text} = ui.preacti18n;
@@ -30,7 +31,7 @@ export const PluginButton = withText(translates)(({isActive, setRef, ...otherPro
           className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}
           data-testid={'navigation_pluginButton'}>
           <Icon
-            id="navigation-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
@@ -1,4 +1,4 @@
-import {NavigationPlugin} from './navigation-plugin';
+import { NavigationPlugin, pluginName } from "./navigation-plugin";
 
 declare var __VERSION__: string;
 declare var __NAME__: string;
@@ -9,5 +9,4 @@ const NAME = __NAME__;
 export {NavigationPlugin as Plugin};
 export {VERSION, NAME};
 
-const pluginName: string = 'navigation';
 KalturaPlayer.core.registerPlugin(pluginName, NavigationPlugin);
diff --git a/src/navigation-plugin.tsx b/src/navigation-plugin.tsx
@@ -21,6 +21,8 @@ import {icons} from './components/icons';
 import {NavigationConfig, PluginStates, ItemTypes, ItemData, CuePoint, HighlightedMap, CuePointsMap} from './types';
 import {QuizTitle} from './components/navigation/navigation-item/QuizTitle';
 
+export const pluginName: string = 'navigation';
+
 const {TimedMetadata} = core;
 const {SidePanelModes, SidePanelPositions, ReservedPresetNames} = ui;
 const liveCuePointTimeThreshold = 20 * 1000; // 20 seconds threshold
@@ -370,8 +372,14 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
       onDeactivate: this._deactivatePlugin
     }) as number;
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     this._navigationIcon = this.upperBarManager!.add({
-      label: 'Navigation',
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ariaLabel: 'Navigation',
+      displayName: 'Navigation',
+      order: 10,
       svgIcon: {path: icons.PLUGIN_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
       onClick: this._handleClickOnPluginIcon as () => void,
       component: () => {