- {this.props.controls.map(({ id, label, svgIcon, onClick }) => {
+ {this.props.controls.map(({ id, displayName, ariaLabel, svgIcon, onClick }) => {
return (
{
}}
role="menuitem"
>
-
+
-
+
-
{label}
+
{displayName}
diff --git a/src/services/upper-bar-manager/upper-bar-manager.tsx b/src/services/upper-bar-manager/upper-bar-manager.tsx
index ef6b998..8a071ea 100644
--- a/src/services/upper-bar-manager/upper-bar-manager.tsx
+++ b/src/services/upper-bar-manager/upper-bar-manager.tsx
@@ -3,42 +3,44 @@ import { IconDto } from './models/icon-dto';
import { IconModel } from './models/icon-model';
import { h, RefObject, createRef } from 'preact';
import { DisplayedBar } from './ui/displayed-bar/displayed-bar.component';
-import { KalturaPluginNames } from '../../types/ui-managers-config';
+import { KalturaPluginsDisplayNames } from '../../types/kaltura-plugins-display-names';
const { ReservedPresetAreas, ReservedPresetNames } = ui;
const UPPER_BAR_PRESETS = Object.values(ReservedPresetNames).filter(
(preset) => preset !== ReservedPresetNames.Idle && preset !== ReservedPresetNames.Error
);
-type UpperBarManagerConfig = { pluginsIconsOrder: { [key in KalturaPluginNames | string]: number } };
-type IconsOrder = { [key in KalturaPluginNames | string]: number };
+type IconsOrder = { [key in KalturaPluginsDisplayNames | string]: number };
export class UpperBarManager {
private readonly player: KalturaPlayer;
private readonly logger: Logger;
private readonly componentsRegistry: Map
;
private readonly displayedBarComponentRefs: Record>;
+ private iconsOrder: IconsOrder;
/**
* @ignore
*/
- constructor(player: KalturaPlayer, logger: Logger, config: UpperBarManagerConfig) {
+ constructor(player: KalturaPlayer, logger: Logger) {
this.player = player;
this.componentsRegistry = new Map();
this.logger = logger;
this.displayedBarComponentRefs = {};
+ this.iconsOrder = {} as IconsOrder;
UPPER_BAR_PRESETS.forEach((preset) => (this.displayedBarComponentRefs[preset] = createRef()));
- this.injectDisplayedBarComponentWrapper(config.pluginsIconsOrder);
+ this.injectDisplayedBarComponentWrapper();
}
public add(icon: IconDto): number | undefined {
if (UpperBarManager.validateItem(icon)) {
const newIcon: IconModel = new IconModel(icon);
this.componentsRegistry.set(newIcon.id, newIcon);
+ this.iconsOrder[icon.displayName] = icon.order;
newIcon.presets.forEach((preset) => this.displayedBarComponentRefs[preset].current?.update());
- this.logger.debug(`Icon Id: '${newIcon.id}' '${newIcon.label}' added`);
+ this.logger.debug(`control '${newIcon.displayName}' added, id: '${newIcon.id}' `);
return newIcon.id;
}
- this.logger.warn('Invalid Icon parameters', icon);
+ this.logger.error('icon cannot be added due to invalid parameters', JSON.stringify(icon));
return undefined;
}
@@ -47,9 +49,9 @@ export class UpperBarManager {
if (icon) {
this.componentsRegistry.delete(itemId);
icon.presets.forEach((preset) => this.displayedBarComponentRefs[preset].current?.update());
- this.logger.debug(`Icon Id: '${icon.id}' Label: '${icon.label}' removed`);
+ this.logger.debug(`control '${icon.displayName}' removed, id: '${icon.id}' `);
} else {
- this.logger.warn(`${itemId} is not registered`);
+ this.logger.warn(`control ${itemId} is not registered`);
}
}
@@ -62,16 +64,17 @@ export class UpperBarManager {
if (icon) {
icon.update();
} else {
- this.logger.warn(`${iconId} is not registered`);
+ this.logger.warn(`control ${iconId} is not registered`);
}
}
private getControls(iconsOrder: IconsOrder): IconModel[] {
const icons = Array.from(this.componentsRegistry.values());
- return icons.sort((a, b) => (iconsOrder[a.label] > iconsOrder[b.label] ? 1 : -1));
+ return icons.sort((a, b) => iconsOrder[a.displayName] - iconsOrder[b.displayName]);
}
- private injectDisplayedBarComponentWrapper(iconsOrder: IconsOrder): void {
+ private injectDisplayedBarComponentWrapper(): void {
+ const iconsOrder = this.iconsOrder;
for (const preset of UPPER_BAR_PRESETS) {
this.player.ui.addComponent({
label: 'Right-Upper-Bar-Wrapper',
diff --git a/src/types/kaltura-plugins-display-names.ts b/src/types/kaltura-plugins-display-names.ts
new file mode 100644
index 0000000..0bc0028
--- /dev/null
+++ b/src/types/kaltura-plugins-display-names.ts
@@ -0,0 +1,10 @@
+export type KalturaPluginsDisplayNames =
+ | 'Navigation'
+ | 'Q&A'
+ | 'Transcript'
+ | 'Download'
+ | 'Playlist'
+ | 'Related'
+ | 'Share'
+ | 'Info'
+ | 'Moderation';
\ No newline at end of file
diff --git a/src/types/ui-managers-config.ts b/src/types/ui-managers-config.ts
deleted file mode 100644
index dd93b0e..0000000
--- a/src/types/ui-managers-config.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type KalturaPluginNames =
- | 'Navigation'
- | 'Q&A'
- | 'Transcript'
- | 'Download'
- | 'Playlist'
- | 'Related'
- | 'Share'
- | 'Info'
- | 'Moderation';
-
-export type UiManagerConfig = {
- upperBarManager: {
- pluginsIconsOrder: {
- [key in KalturaPluginNames | string]: number;
- };
- };
-};
\ No newline at end of file
diff --git a/src/ui-managers.ts b/src/ui-managers.ts
index d05e28c..8041244 100644
--- a/src/ui-managers.ts
+++ b/src/ui-managers.ts
@@ -1,7 +1,6 @@
import { BasePlugin, KalturaPlayer } from '@playkit-js/kaltura-player-js';
import { SidePanelsManager } from './services/side-panels-manager/side-panels-manager';
import { UpperBarManager } from './services/upper-bar-manager/upper-bar-manager';
-import { UiManagerConfig } from './types/ui-managers-config';
import { FloatingManager } from './services/floating-manager/floating-manager';
import { PresetManager } from './services/preset-manager/preset-manager';
import { ToastManager } from './services/toast-manager/toast-manager';
@@ -13,27 +12,13 @@ export const pluginName = 'uiManagers';
* manages the registration of UI services
* @internal
*/
-export class UIManagers extends BasePlugin {
- protected static defaultConfig: UiManagerConfig = {
- upperBarManager: {
- pluginsIconsOrder: {
- Navigation: 10,
- 'Q&A': 20,
- Transcript: 30,
- Download: 40,
- Playlist: 50,
- Related: 60,
- Share: 70,
- Info: 80,
- Moderation: 90
- }
- }
- };
+export class UIManagers extends BasePlugin {
+ protected static defaultConfig = {};
- constructor(name: string, player: KalturaPlayer, config?: UiManagerConfig) {
+ constructor(name: string, player: KalturaPlayer, config?: never) {
super(name, player, config);
player.registerService('sidePanelsManager', new SidePanelsManager(player, this.logger));
- player.registerService('upperBarManager', new UpperBarManager(player, this.logger, this.config.upperBarManager));
+ player.registerService('upperBarManager', new UpperBarManager(player, this.logger));
const presetManager = new PresetManager({
kalturaPlayer: player,
eventManager: this.eventManager
diff --git a/tests/e2e/upper-bar-manager.spec.js b/tests/e2e/upper-bar-manager.spec.js
index 82e74b5..384227f 100644
--- a/tests/e2e/upper-bar-manager.spec.js
+++ b/tests/e2e/upper-bar-manager.spec.js
@@ -1,11 +1,12 @@
import { expect } from 'chai';
import { createSandbox, spy } from 'sinon';
import '../../src/index';
-import { setup } from '@playkit-js/kaltura-player-js';
+import { setup, ui } from "@playkit-js/kaltura-player-js";
import { IconComponent } from '../mock/compenents/icon.component';
import { config, targetId } from '../mock/config';
import { mediaData } from '../mock/media-sourc';
import '../mock/plugins/index';
+const { ReservedPresetNames } = ui;
describe('Upper Bar Manager', () => {
let player;
@@ -38,11 +39,11 @@ describe('Upper Bar Manager', () => {
await player.ready();
// Do
- const iconId = upperBarManagerService.add({ label: 'icon', component: IconComponent, onClick: () => {} });
+ const iconId = upperBarManagerService.add({ displayName: 'icon', component: IconComponent, onClick: () => {} });
// Expect
expect(upperBarManagerService.componentsRegistry.size).to.equal(1);
- expect(upperBarManagerService.componentsRegistry.get(iconId).label).equal('icon');
+ expect(upperBarManagerService.componentsRegistry.get(iconId).displayName).equal('icon');
});
it('Remove icon', async () => {
@@ -53,7 +54,7 @@ describe('Upper Bar Manager', () => {
await player.ready();
// Do
- const iconId = upperBarManagerService.add({ label: 'icon', component: IconComponent, onClick: () => {} });
+ const iconId = upperBarManagerService.add({ displayName: 'icon', component: IconComponent, onClick: () => {} });
upperBarManagerService.remove(iconId);
// Expect
@@ -68,8 +69,8 @@ describe('Upper Bar Manager', () => {
await player.ready();
// Do
- const iconId1 = upperBarManagerService.add({ label: 'icon1', component: IconComponent, onClick: () => {} });
- const iconId2 = upperBarManagerService.add({ label: 'icon2', component: IconComponent, onClick: () => {} });
+ const iconId1 = upperBarManagerService.add({ displayName: 'icon1', component: IconComponent, onClick: () => {} });
+ const iconId2 = upperBarManagerService.add({ displayName: 'icon2', component: IconComponent, onClick: () => {} });
upperBarManagerService.remove(iconId1);
// Expect
@@ -85,8 +86,8 @@ describe('Upper Bar Manager', () => {
// Do
player.ready().then(() => {
- const icon1Id = upperBarManagerService.add({ label: 'icon1', component: IconComponent, onClick: () => {} });
- const icon2Id = upperBarManagerService.add({ label: 'icon2', component: IconComponent, onClick: () => {} });
+ const icon1Id = upperBarManagerService.add({ displayName: 'icon1', component: IconComponent, onClick: () => {} });
+ const icon2Id = upperBarManagerService.add({ displayName: 'icon2', component: IconComponent, onClick: () => {} });
setTimeout(() => {
const iconModel1 = upperBarManagerService.componentsRegistry.get(icon1Id);
const iconModel2 = upperBarManagerService.componentsRegistry.get(icon2Id);
@@ -107,24 +108,13 @@ describe('Upper Bar Manager', () => {
it('icons order state compatible with the configuration', (done) => {
// Given
const pluginsConfig = {
- uiManagers: {
- upperBarManager: {
- pluginsIconsOrder: {
- pluginC: 100,
- pluginF: 110,
- pluginA: 120,
- pluginD: 130,
- pluginE: 140,
- pluginB: 150
- }
- }
- },
- pluginA: {},
- pluginB: {},
- pluginC: {},
- pluginD: {},
- pluginE: {},
- pluginF: {}
+ uiManagers: {},
+ 'Plugin-A': { iconOrder: 120 },
+ 'Plugin-B': { iconOrder: 150 },
+ 'Plugin-C': { iconOrder: 100 },
+ 'Plugin-D': { iconOrder: 130 },
+ 'Plugin-E': { iconOrder: 140 },
+ 'Plugin-F': { iconOrder: 110 }
};
player = setup({ ...config, plugins: pluginsConfig });
@@ -133,39 +123,29 @@ describe('Upper Bar Manager', () => {
player.ready().then(() => {
setTimeout(() => {
- const displayedBarComponentState = upperBarManagerService.getControls(pluginsConfig.uiManagers.upperBarManager.pluginsIconsOrder);
- expect(displayedBarComponentState[0].label).to.be.equal('pluginC');
- expect(displayedBarComponentState[1].label).to.be.equal('pluginF');
- expect(displayedBarComponentState[2].label).to.be.equal('pluginA');
- expect(displayedBarComponentState[3].label).to.be.equal('pluginD');
- expect(displayedBarComponentState[4].label).to.be.equal('pluginE');
- expect(displayedBarComponentState[5].label).to.be.equal('pluginB');
+ const displayedBarComponentState = upperBarManagerService.getControls(upperBarManagerService.iconsOrder);
+ // const displayedBarComponentState = Array.from(this.componentsRegistry.values());
+ expect(displayedBarComponentState[0].displayName).to.be.equal('Plugin-C');
+ expect(displayedBarComponentState[1].displayName).to.be.equal('Plugin-F');
+ expect(displayedBarComponentState[2].displayName).to.be.equal('Plugin-A');
+ expect(displayedBarComponentState[3].displayName).to.be.equal('Plugin-D');
+ expect(displayedBarComponentState[4].displayName).to.be.equal('Plugin-E');
+ expect(displayedBarComponentState[5].displayName).to.be.equal('Plugin-B');
done();
- });
+ }, 1000);
});
});
it('icons order state is preserved on change media', (done) => {
// Given
const pluginsConfig = {
- uiManagers: {
- upperBarManager: {
- pluginsIconsOrder: {
- pluginC: 100,
- pluginF: 110,
- pluginA: 120,
- pluginD: 130,
- pluginE: 140,
- pluginB: 150
- }
- }
- },
- pluginA: {},
- pluginB: {},
- pluginC: {},
- pluginD: {},
- pluginE: {},
- pluginF: {}
+ uiManagers: {},
+ 'Plugin-A': { iconOrder: 120 },
+ 'Plugin-B': { iconOrder: 150 },
+ 'Plugin-C': { iconOrder: 100 },
+ 'Plugin-D': { iconOrder: 130 },
+ 'Plugin-E': { iconOrder: 140 },
+ 'Plugin-F': { iconOrder: 110 }
};
player = setup({ ...config, plugins: pluginsConfig });
@@ -175,14 +155,14 @@ describe('Upper Bar Manager', () => {
player.ready().then(() => {
setTimeout(() => {
const previousServiceRegistryState = JSON.parse(
- JSON.stringify(Array.from(upperBarManagerService.componentsRegistry.values()).map(({ id, label }) => ({ id, label })))
+ JSON.stringify(Array.from(upperBarManagerService.componentsRegistry.values()).map(({ id, displayName }) => ({ id, displayName })))
);
player.setMedia({ sources: { ...mediaData } });
setTimeout(() => {
const currentServiceRegistryState = Array.from(upperBarManagerService.componentsRegistry.values()).map(
- ({ id, label }) => ({ id, label })
+ ({ id, displayName }) => ({ id, displayName })
);
expect(previousServiceRegistryState).to.be.deep.equal(currentServiceRegistryState);
done();
diff --git a/tests/mock/plugins/plugin-A.js b/tests/mock/plugins/plugin-A.js
index e00122d..baf80b6 100644
--- a/tests/mock/plugins/plugin-A.js
+++ b/tests/mock/plugins/plugin-A.js
@@ -1,25 +1,35 @@
import { BasePlugin, registerPlugin, ui } from '@playkit-js/kaltura-player-js';
const { h, preact } = ui;
+const ICON_PATH = 'M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 2C10.477 6 6 10.477 6 16s4.477 10 10 10 10-4.477 10-10S21.523 6 16 6zm0 9a1 1 0 0 1 1 .99v4.02a.992.992 0 0 1-.883.983L16 21a1 1 0 0 1-1-.99v-4.02c0-.507.383-.926.883-.983L16 15zm0-4.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'
+
+
class IconComponent extends preact.Component {
render() {
return h('div', null, 'A');
}
}
-export const pluginName = 'pluginA';
+export const pluginName = 'Plugin-A';
export class PluginA extends BasePlugin {
static defaultConfig = {};
- constructor(name, player) {
- super(name, player);
+ constructor(name, player, config) {
+ super(name, player, config);
this.player.ready().then(() => {
- const pluginAId = this.player.getService('upperBarManager').add({
- label: 'pluginA',
- component: IconComponent,
- onClick: () => alert('hello from plugin A')
- });
+ this.addUpperBarIcon(config.iconOrder);
+ });
+ }
+
+ addUpperBarIcon(iconOrder) {
+ this.player.getService('upperBarManager').add({
+ displayName: pluginName,
+ ariaLabel: pluginName,
+ order: iconOrder,
+ svgIcon: {path: ICON_PATH},
+ component: IconComponent,
+ onClick: () => {}
});
}
diff --git a/tests/mock/plugins/plugin-B.js b/tests/mock/plugins/plugin-B.js
index 82a3ba2..d28b4d4 100644
--- a/tests/mock/plugins/plugin-B.js
+++ b/tests/mock/plugins/plugin-B.js
@@ -1,25 +1,35 @@
import { BasePlugin, registerPlugin, ui } from '@playkit-js/kaltura-player-js';
const { h, preact } = ui;
+const ICON_PATH = 'M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 2C10.477 6 6 10.477 6 16s4.477 10 10 10 10-4.477 10-10S21.523 6 16 6zm0 9a1 1 0 0 1 1 .99v4.02a.992.992 0 0 1-.883.983L16 21a1 1 0 0 1-1-.99v-4.02c0-.507.383-.926.883-.983L16 15zm0-4.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'
+
+
class IconComponent extends preact.Component {
render() {
return h('div', null, 'B');
}
}
-export const pluginName = 'pluginB';
+export const pluginName = 'Plugin-B';
export class PluginB extends BasePlugin {
static defaultConfig = {};
- constructor(name, player) {
- super(name, player);
+ constructor(name, player, config) {
+ super(name, player, config);
this.player.ready().then(() => {
- const pluginBId = this.player.getService('upperBarManager').add({
- label: 'pluginB',
- component: IconComponent,
- onClick: () => alert('hello from plugin B')
- });
+ this.addUpperBarIcon(config.iconOrder);
+ });
+ }
+
+ addUpperBarIcon(iconOrder) {
+ this.player.getService('upperBarManager').add({
+ displayName: pluginName,
+ ariaLabel: pluginName,
+ order: iconOrder,
+ svgIcon: {path: ICON_PATH},
+ component: IconComponent,
+ onClick: () => {}
});
}
diff --git a/tests/mock/plugins/plugin-C.js b/tests/mock/plugins/plugin-C.js
index 80b9b27..e883862 100644
--- a/tests/mock/plugins/plugin-C.js
+++ b/tests/mock/plugins/plugin-C.js
@@ -1,25 +1,35 @@
import { BasePlugin, registerPlugin, ui } from '@playkit-js/kaltura-player-js';
const { h, preact } = ui;
+const ICON_PATH = 'M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 2C10.477 6 6 10.477 6 16s4.477 10 10 10 10-4.477 10-10S21.523 6 16 6zm0 9a1 1 0 0 1 1 .99v4.02a.992.992 0 0 1-.883.983L16 21a1 1 0 0 1-1-.99v-4.02c0-.507.383-.926.883-.983L16 15zm0-4.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'
+
+
class IconComponent extends preact.Component {
render() {
return h('div', null, 'C');
}
}
-export const pluginName = 'pluginC';
+export const pluginName = 'Plugin-C';
export class PluginC extends BasePlugin {
static defaultConfig = {};
- constructor(name, player) {
- super(name, player);
+ constructor(name, player, config) {
+ super(name, player, config);
this.player.ready().then(() => {
- const pluginCId = this.player.getService('upperBarManager').add({
- label: 'pluginC',
- component: IconComponent,
- onClick: () => alert('hello from plugin C')
- });
+ this.addUpperBarIcon(config.iconOrder);
+ });
+ }
+
+ addUpperBarIcon(iconOrder) {
+ this.player.getService('upperBarManager').add({
+ displayName: pluginName,
+ ariaLabel: pluginName,
+ order: iconOrder,
+ svgIcon: {path: ICON_PATH},
+ component: IconComponent,
+ onClick: () => {}
});
}
diff --git a/tests/mock/plugins/plugin-D.js b/tests/mock/plugins/plugin-D.js
index c030747..994d86f 100644
--- a/tests/mock/plugins/plugin-D.js
+++ b/tests/mock/plugins/plugin-D.js
@@ -1,25 +1,35 @@
import { BasePlugin, registerPlugin, ui } from '@playkit-js/kaltura-player-js';
const { h, preact } = ui;
+const ICON_PATH = 'M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 2C10.477 6 6 10.477 6 16s4.477 10 10 10 10-4.477 10-10S21.523 6 16 6zm0 9a1 1 0 0 1 1 .99v4.02a.992.992 0 0 1-.883.983L16 21a1 1 0 0 1-1-.99v-4.02c0-.507.383-.926.883-.983L16 15zm0-4.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'
+
+
class IconComponent extends preact.Component {
render() {
return h('div', null, 'D');
}
}
-export const pluginName = 'pluginD';
+export const pluginName = 'Plugin-D';
export class PluginD extends BasePlugin {
static defaultConfig = {};
- constructor(name, player) {
- super(name, player);
+ constructor(name, player, config) {
+ super(name, player, config);
this.player.ready().then(() => {
- const pluginDId = this.player.getService('upperBarManager').add({
- label: 'pluginD',
- component: IconComponent,
- onClick: () => alert('hello from plugin D')
- });
+ this.addUpperBarIcon(config.iconOrder);
+ });
+ }
+
+ addUpperBarIcon(iconOrder) {
+ this.player.getService('upperBarManager').add({
+ displayName: pluginName,
+ ariaLabel: pluginName,
+ order: iconOrder,
+ svgIcon: {path: ICON_PATH},
+ component: IconComponent,
+ onClick: () => {}
});
}
diff --git a/tests/mock/plugins/plugin-E.js b/tests/mock/plugins/plugin-E.js
index 1d75c57..e9bfedf 100644
--- a/tests/mock/plugins/plugin-E.js
+++ b/tests/mock/plugins/plugin-E.js
@@ -1,25 +1,35 @@
import { BasePlugin, registerPlugin, ui } from '@playkit-js/kaltura-player-js';
const { h, preact } = ui;
+const ICON_PATH = 'M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 2C10.477 6 6 10.477 6 16s4.477 10 10 10 10-4.477 10-10S21.523 6 16 6zm0 9a1 1 0 0 1 1 .99v4.02a.992.992 0 0 1-.883.983L16 21a1 1 0 0 1-1-.99v-4.02c0-.507.383-.926.883-.983L16 15zm0-4.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'
+
+
class IconComponent extends preact.Component {
render() {
return h('div', null, 'E');
}
}
-export const pluginName = 'pluginE';
+export const pluginName = 'Plugin-E';
export class PluginE extends BasePlugin {
static defaultConfig = {};
- constructor(name, player) {
- super(name, player);
+ constructor(name, player, config) {
+ super(name, player, config);
this.player.ready().then(() => {
- const pluginEId = this.player.getService('upperBarManager').add({
- label: 'pluginE',
- component: IconComponent,
- onClick: () => alert('hello from plugin E')
- });
+ this.addUpperBarIcon(config.iconOrder);
+ });
+ }
+
+ addUpperBarIcon(iconOrder) {
+ this.player.getService('upperBarManager').add({
+ displayName: pluginName,
+ ariaLabel: pluginName,
+ order: iconOrder,
+ svgIcon: {path: ICON_PATH},
+ component: IconComponent,
+ onClick: () => {}
});
}
diff --git a/tests/mock/plugins/plugin-F.js b/tests/mock/plugins/plugin-F.js
index c64d161..b454e0a 100644
--- a/tests/mock/plugins/plugin-F.js
+++ b/tests/mock/plugins/plugin-F.js
@@ -1,25 +1,35 @@
import { BasePlugin, registerPlugin, ui } from '@playkit-js/kaltura-player-js';
const { h, preact } = ui;
+const ICON_PATH = 'M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 2C10.477 6 6 10.477 6 16s4.477 10 10 10 10-4.477 10-10S21.523 6 16 6zm0 9a1 1 0 0 1 1 .99v4.02a.992.992 0 0 1-.883.983L16 21a1 1 0 0 1-1-.99v-4.02c0-.507.383-.926.883-.983L16 15zm0-4.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'
+
+
class IconComponent extends preact.Component {
render() {
return h('div', null, 'F');
}
}
-export const pluginName = 'pluginF';
+export const pluginName = 'Plugin-F';
export class PluginF extends BasePlugin {
static defaultConfig = {};
- constructor(name, player) {
- super(name, player);
+ constructor(name, player, config) {
+ super(name, player, config);
this.player.ready().then(() => {
- const pluginFId = this.player.getService('upperBarManager').add({
- label: 'pluginF',
- component: IconComponent,
- onClick: () => alert('hello from plugin F')
- });
+ this.addUpperBarIcon(config.iconOrder);
+ });
+ }
+
+ addUpperBarIcon(iconOrder) {
+ this.player.getService('upperBarManager').add({
+ displayName: pluginName,
+ ariaLabel: pluginName,
+ order: iconOrder,
+ svgIcon: {path: ICON_PATH},
+ component: IconComponent,
+ onClick: () => {}
});
}
diff --git a/tsconfig.dev.json b/tsconfig.dev.json
index 2c7f812..bb83e73 100644
--- a/tsconfig.dev.json
+++ b/tsconfig.dev.json
@@ -4,6 +4,8 @@
"target": "ES2020",
"module": "ES2020",
"moduleResolution": "node",
- "sourceMap": true
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true
}
}
diff --git a/tsconfig.json b/tsconfig.json
index 2fdfa8e..ca18615 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,8 @@
"preserveSymlinks": true,
"jsx": "react",
"jsxFactory": "h",
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
"jsxFragmentFactory": "Fragment",
"allowUnreachableCode": false,
"allowUnusedLabels": false,