From a3a6bf807b40045ad719ddaa1c6dab6b4da317dc Mon Sep 17 00:00:00 2001
From: JonathanTGold <62672270+JonathanTGold@users.noreply.github.com>
Date: Wed, 24 Jan 2024 09:13:12 +0200
Subject: [PATCH] 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@86@gmail.com>
---
 src/components/plugin-button/plugin-button.tsx |  3 ++-
 src/index.ts                                   |  3 +--
 src/moderation-plugin.tsx                      | 10 +++++++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/plugin-button/plugin-button.tsx b/src/components/plugin-button/plugin-button.tsx
index b2a1518..ec008f7 100644
--- 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
index afe517f..a81ad3d 100644
--- 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
index d623b90..7ec7224 100644
--- 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