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

Description of the Changes 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-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 · a3a6bf8 · a3a6bf8
1 parent 8225e10
commit a3a6bf8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/components/plugin-button/plugin-button.tsx b/src/components/plugin-button/plugin-button.tsx
@@ -1,6 +1,7 @@
 import {h} from 'preact';
 import {icons} from '../icons';
 import {ui} from '@playkit-js/kaltura-player-js';
+import { pluginName } from "../../moderation-plugin";
 
 const {Tooltip, Icon} = KalturaPlayer.ui.components;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
@@ -19,7 +20,7 @@ export const PluginButton = withText(translates)(({label, setRef}: PluginButtonP
     <Tooltip label={label} type="bottom">
         <button type="button" aria-label={label} className={ui.style.upperBarIcon} data-testid="moderationPluginButton" ref={setRef}>
           <Icon
-            id="moderation-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 {ModerationPlugin} from './moderation-plugin';
+import { ModerationPlugin, pluginName } from "./moderation-plugin";
 
 declare var __VERSION__: string;
 declare var __NAME__: string;
@@ -9,6 +9,5 @@ const NAME = __NAME__;
 export {ModerationPlugin as Plugin};
 export {VERSION, NAME};
 
-const pluginName: string = 'playkit-js-moderation';
 
 KalturaPlayer.core.registerPlugin(pluginName, ModerationPlugin);
diff --git a/src/moderation-plugin.tsx b/src/moderation-plugin.tsx
@@ -10,6 +10,8 @@ import {ReportLoader, KalturaModerationFlag} from './providers';
 import {ErrorIcon} from './components/icons/error-icon';
 import {SuccessIcon} from './components/icons/success-icon';
 import {ModerationEvent} from './event';
+
+export const pluginName: string = 'playkit-js-moderation';
 // @ts-ignore
 import {FakeEvent} from '@playkit-js/playkit-js';
 
@@ -193,8 +195,14 @@ export class ModerationPlugin extends KalturaPlayer.core.BasePlugin {
       return;
     }
     this.player.ready().then(() => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       this._pluginIcon = this.upperBarManager!.add({
-        label: 'Moderation',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        displayName: 'Moderation',
+        ariaLabel: 'Moderation',
+        order: 90,
         component: () => <PluginButton setRef={this._setPluginButtonRef} />,
         svgIcon: {path: icons.PLUGIN_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
         onClick: this._toggleOverlay