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

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

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,4 @@
-import {TranscriptPlugin} from './transcript-plugin';
+import { pluginName, TranscriptPlugin } from "./transcript-plugin";
 
 declare var __VERSION__: string;
 declare var __NAME__: string;
@@ -9,6 +9,4 @@ const NAME = __NAME__;
 export {TranscriptPlugin as Plugin};
 export {VERSION, NAME};
 
-const pluginName: string = 'playkit-js-transcript';
-
 KalturaPlayer.core.registerPlugin(pluginName, TranscriptPlugin);
diff --git a/src/transcript-plugin.tsx b/src/transcript-plugin.tsx
@@ -10,6 +10,8 @@ import {Transcript} from './components/transcript';
 import {getConfigValue, isBoolean, makePlainText, prepareCuePoint} from './utils';
 import {TranscriptConfig, PluginStates, HighlightedMap, CuePointData, ItemTypes, CuePoint} from './types';
 
+export const pluginName: string = 'playkit-js-transcript';
+
 const {SidePanelModes, SidePanelPositions, ReservedPresetNames, ReservedPresetAreas} = ui;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 const {get} = ObjectUtils;
@@ -267,8 +269,14 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       showTranscript: <Text id="transcript.show_plugin">Show Transcript</Text>,
       hideTranscript: <Text id="transcript.hide_plugin">Hide Transcript</Text>
     };
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     this._transcriptIcon = this.upperBarManager!.add({
-      label: 'Transcript',
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      displayName: 'Transcript',
+      ariaLabel: 'Transcript',
+      order: 30,
       svgIcon: {path: icons.PLUGIN_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
       onClick: this._handleClickOnPluginIcon as () => void,
       component: withText(translates)((props: {showTranscript: string; hideTranscript: string}) => {
@@ -277,7 +285,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
         return (
           <PluginButton
             isActive={isActive}
-            id="transcript-icon"
+            id={pluginName}
             label={label}
             icon={icons.PLUGIN_ICON}
             dataTestId="transcript_pluginButton"