Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(FEC-13517): Wrong and inconsistent order of plugins & Plugins buttons sometimes display with the wrong icon #51

Merged
merged 12 commits into from
Jan 23, 2024
Merged

fix(FEC-13517): Wrong and inconsistent order of plugins & Plugins buttons sometimes display with the wrong icon #51

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0b5de94
fix(FEC-13517): Wrong and inconsistent order of plugins & Plugins but…
Jan 16, 2024
204f59a
decoupling plugins order config from ui-managers and setting it dynam…
Jan 18, 2024
4b5ae7d
remove config from ui-managers
Jan 18, 2024
c159494
add doc & update debug msgs
Jan 21, 2024
0694491
fix lint
Jan 21, 2024
96f04a6
fix tests
Jan 21, 2024
774ce18
Merge branch 'master' into FEC-13517
JonathanTGold Jan 21, 2024
bbba0fc
fix demo
Jan 22, 2024
b8c2a9b
Merge branch 'FEC-13517' of https://github.com/kaltura/playkit-js-ui-…
Jan 22, 2024
e9a47ae
Merge branch 'master' into FEC-13517
JonathanTGold Jan 23, 2024
a36ffd3
remove local trans
Jan 23, 2024
e6e631c
Merge branch 'FEC-13517' of https://github.com/kaltura/playkit-js-ui-…
Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"@typescript-eslint/explicit-function-return-type": "warn",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/no-explicit-any": "error",
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/explicit-member-accessibility":[
"error",
{
Expand Down
2 changes: 1 addition & 1 deletion demo/side-panels-manager/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<title>UI Managers</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://raw.githack.com/kaltura/kaltura-player-js/master/dist/kaltura-ovp-player.js"></script>
<script src="https://unpkg.com/@playkit-js/kaltura-player-js@canary/dist/kaltura-ovp-player.js"></script>
<script src="../playkit-ui-managers.js"></script>
</head>
<body>
Expand Down
36 changes: 31 additions & 5 deletions demo/side-panels-manager/some-plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
const { SidePanelModes, SidePanelPositions, ReservedPresetNames } = ui;

const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
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'


import {
Expand All @@ -24,7 +24,7 @@ export class somePlugin extends BasePlugin {
super(name, player);
this.player.ready().then(() => {
const panelItemAId = this.player.getService('sidePanelsManager').add({
label: 'Panel A',
label: 'Panel-A',
panelComponent: PanelItemComponent,
iconComponent: {component: IconComponent, svgIcon: {path: ICON_PATH}},
presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
Expand All @@ -38,33 +38,41 @@ export class somePlugin extends BasePlugin {
}
});

this.addUpperBarIcon('Panel-A', panelItemAId, IconComponent);

const PanelItemBId = this.player.getService('sidePanelsManager').add({
label: 'Panel B',
label: 'Panel-B',
panelComponent: AnotherPanelItemComponent,
iconComponent: {component: AnotherIconComponent, svgIcon: {path: ICON_PATH}},
presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
position: SidePanelPositions.LEFT,
expandMode: SidePanelModes.ALONGSIDE
});

this.addUpperBarIcon('Panel-B', PanelItemBId, AnotherIconComponent);

const PanelItemCId = this.player.getService('sidePanelsManager').add({
label: 'Panel C',
label: 'Panel-C',
panelComponent: SomePanelItemComponent,
iconComponent: {component: SomeIconComponent, svgIcon: {path: ICON_PATH}},
presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
position: SidePanelPositions.RIGHT,
expandMode: SidePanelModes.OVER
});

this.addUpperBarIcon('Panel-C', PanelItemCId, SomeIconComponent);

const PanelItemDId = this.player.getService('sidePanelsManager').add({
label: 'Panel D',
label: 'Panel-D',
panelComponent: MorePanelItemComponent,
iconComponent: {component: MoreIconComponent, svgIcon: {path: ICON_PATH}},
presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
position: SidePanelPositions.BOTTOM,
expandMode: SidePanelModes.ALONGSIDE
});

this.addUpperBarIcon('Panel-D', PanelItemDId, MoreIconComponent);

this.player.getService('sidePanelsManager').activateItem(panelItemAId);
console.log(this.player.getService('sidePanelsManager').isItemActive(panelItemAId));
// true
Expand All @@ -76,6 +84,24 @@ export class somePlugin extends BasePlugin {
});
}

addUpperBarIcon(pluginName, panelItemAIconId, IconComponent) {
this.player.getService('upperBarManager').add({
displayName: pluginName,
ariaLabel: pluginName,
svgIcon: {path: ICON_PATH},
component: IconComponent,
onClick: () => this.toggle(panelItemAIconId)
});
}

toggle(panelItemId) {
if (this.player.getService('sidePanelsManager').isItemActive(panelItemId)) {
this.player.getService('sidePanelsManager').deactivateItem(panelItemId);
} else {
this.player.getService('sidePanelsManager').activateItem(panelItemId);
}
}


static isValid() {
return true;
Expand Down
15 changes: 2 additions & 13 deletions demo/uppar-bar-manager/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<title>UI Managers</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://raw.githack.com/kaltura/kaltura-player-js/master/dist/kaltura-ovp-player.js"></script>
<script src="https://unpkg.com/@playkit-js/kaltura-player-js@canary/dist/kaltura-ovp-player.js"></script>
<script src="../playkit-ui-managers.js"></script>
</head>
<body>
Expand Down Expand Up @@ -35,18 +35,7 @@
}
},
plugins: {
uiManagers: {
upperBarManager: {
pluginsIconsOrder: {
'Plugin A': 100,
'Plugin B': 110,
'Plugin C': 120,
'Plugin D': 130,
'Plugin E': 140,
'Plugin F': 150
}
}
},
uiManagers: {},
pluginA: {},
pluginB: {},
pluginC: {},
Expand Down
6 changes: 4 additions & 2 deletions demo/uppar-bar-manager/plugin-A.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
const { h, preact, style } = KalturaPlayer.ui;

const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
const ICON_PATH = 'M8.378 7.084l5.175 19.314c.134.497-.126 1.005-.594 1.19l-.112.037c-.533.143-1.08-.165-1.225-.71L6.447 7.603c-.134-.497.126-1.005.594-1.19l.112-.037c.533-.143 1.08.165 1.225.71zM21.882 7c1.878 0 2.79 1.622 1.84 3.239l-1.386 2.36 2.94 3.246C26.6 17.31 25.842 19 23.868 19h-10.21c-.452 0-.848-.304-.966-.741l-2.68-10c-.17-.635.31-1.259.967-1.259h10.902zm.211 1.994l-.21.006h-9.6l2.144 8h9.196l-3.263-3.604c-.293-.324-.342-.8-.12-1.178l1.757-2.992c.114-.194.168-.23.096-.232z';

class IconComponent extends preact.Component {
render() {
Expand All @@ -23,7 +23,9 @@ export class PluginA extends BasePlugin {
addUpperBarIcon() {
this.player.ready().then(() => {
this.iconId = this.player.getService('upperBarManager').add({
label: 'Plugin A',
displayName: 'Plugin-A',
ariaLabel: 'Plugin-A',
order: 100,
svgIcon: {path: ICON_PATH},
component: IconComponent,
onClick: () => alert('hello from plugin A')
Expand Down
6 changes: 4 additions & 2 deletions demo/uppar-bar-manager/plugin-B.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
const { h, preact, style } = KalturaPlayer.ui;

const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
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 {
Expand All @@ -24,7 +24,9 @@ export class PluginB extends BasePlugin {
addUpperBarIcon() {
this.player.ready().then(() => {
this.iconId = this.player.getService('upperBarManager').add({
label: 'Plugin B',
displayName: 'Plugin-B',
ariaLabel: 'Plugin-B',
order: 110,
svgIcon: {path: ICON_PATH},
component: IconComponent,
onClick: () => alert('hello from plugin B')
Expand Down
6 changes: 4 additions & 2 deletions demo/uppar-bar-manager/plugin-C.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
const { h, preact, style } = KalturaPlayer.ui;

const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
const ICON_PATH = 'M11.6592 10.245L6.70483 5.29061C6.31701 4.9028 5.68581 4.90476 5.29528 5.29528C4.90204 5.68853 4.90267 6.31688 5.29061 6.70483L10.245 11.6592L5.29061 16.6137C4.9028 17.0015 4.90476 17.6327 5.29528 18.0232C5.68853 18.4165 6.31688 18.4158 6.70483 18.0279L11.6592 13.0735L16.6137 18.0279C17.0015 18.4157 17.6327 18.4137 18.0232 18.0232C18.4165 17.63 18.4158 17.0016 18.0279 16.6137L13.0735 11.6592L18.0279 6.70483C18.4157 6.31701 18.4137 5.68581 18.0232 5.29528C17.63 4.90204 17.0016 4.90267 16.6137 5.29061L11.6592 10.245Z'

class IconComponent extends preact.Component {
render() {
Expand All @@ -23,7 +23,9 @@ export class PluginC extends BasePlugin {
addUpperBarIcon() {
this.player.ready().then(() => {
this.iconId = this.player.getService('upperBarManager').add({
label: 'Plugin C',
displayName: 'Plugin-C',
ariaLabel: 'Plugin-C',
order: 120,
svgIcon: {path: ICON_PATH},
component: IconComponent,
onClick: () => alert('hello from plugin C')
Expand Down
9 changes: 6 additions & 3 deletions demo/uppar-bar-manager/plugin-D.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
const { h, preact, style } = KalturaPlayer.ui;

const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
const ICON_PATH = 'M19.7071 9.29289C20.0676 9.65338 20.0953 10.2206 19.7903 10.6129L19.7071 10.7071L14.415 16L19.7071 21.2929C20.0676 21.6534 20.0953 22.2206 19.7903 22.6129L19.7071 22.7071C19.3466 23.0676 18.7794 23.0953 18.3871 22.7903L18.2929 22.7071L12.2929 16.7071C11.9324 16.3466 11.9047 15.7794 12.2097 15.3871L12.2929 15.2929L18.2929 9.29289C18.6834 8.90237 19.3166 8.90237 19.7071 9.29289Z';

class IconComponent extends preact.Component {

class IconComponent extends preact.Component {
render() {
return h('div', { className: 'icon' + ' ' + ui.style.upperBarIcon, tabIndex: 0 }, 'D');
}
Expand All @@ -23,7 +24,9 @@ export class PluginD extends BasePlugin {
addUpperBarIcon() {
this.player.ready().then(() => {
this.iconId = this.player.getService('upperBarManager').add({
label: 'Plugin D',
displayName: 'Plugin-D',
ariaLabel: 'Plugin-D',
order: 130,
component: IconComponent,
svgIcon: {path: ICON_PATH},
onClick: () => alert('hello from plugin D')
Expand Down
6 changes: 4 additions & 2 deletions demo/uppar-bar-manager/plugin-E.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
const { h, preact, style } = KalturaPlayer.ui;

const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
const ICON_PATH = 'M11.6592 10.245L6.70483 5.29061C6.31701 4.9028 5.68581 4.90476 5.29528 5.29528C4.90204 5.68853 4.90267 6.31688 5.29061 6.70483L10.245 11.6592L5.29061 16.6137C4.9028 17.0015 4.90476 17.6327 5.29528 18.0232C5.68853 18.4165 6.31688 18.4158 6.70483 18.0279L11.6592 13.0735L16.6137 18.0279C17.0015 18.4157 17.6327 18.4137 18.0232 18.0232C18.4165 17.63 18.4158 17.0016 18.0279 16.6137L13.0735 11.6592L18.0279 6.70483C18.4157 6.31701 18.4137 5.68581 18.0232 5.29528C17.63 4.90204 17.0016 4.90267 16.6137 5.29061L11.6592 10.245Z'


class IconComponent extends preact.Component {
Expand All @@ -24,7 +24,9 @@ export class PluginE extends BasePlugin {
addUpperBarIcon() {
this.player.ready().then(() => {
this.iconId = this.player.getService('upperBarManager').add({
label: 'Plugin E',
displayName: 'Plugin-E',
ariaLabel: 'Plugin-E',
order: 140,
component: IconComponent,
svgIcon: {path: ICON_PATH},
onClick: () => alert('hello from plugin E')
Expand Down
6 changes: 4 additions & 2 deletions demo/uppar-bar-manager/plugin-F.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const { BasePlugin, registerPlugin, ui } = KalturaPlayer;
const { h, preact, style } = KalturaPlayer.ui;

const ICON_PATH = 'M318.641 446.219l236.155-142.257c-0.086-1.754-0.129-3.52-0.129-5.295 0-58.91 47.756-106.667 106.667-106.667s106.667 47.756 106.667 106.667c0 58.91-47.756 106.667-106.667 106.667-33.894 0-64.095-15.808-83.633-40.454l-236.467 142.445c-0.132-3.064-0.394-6.095-0.779-9.087l7.271-12.835-0.117 53.333-7.183-12.743c0.399-3.046 0.67-6.131 0.806-9.252l236.467 142.383c19.538-24.648 49.741-40.457 83.636-40.457 58.91 0 106.667 47.756 106.667 106.667s-47.756 106.667-106.667 106.667c-58.91 0-106.667-47.756-106.667-106.667 0-1.775 0.043-3.539 0.129-5.293l-236.19-142.216c-19.528 24.867-49.868 40.841-83.939 40.841-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c34.091 0 64.447 15.993 83.974 40.886zM234.667 554.667c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 341.333c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667zM661.333 768c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667c-23.564 0-42.667 19.103-42.667 42.667s19.103 42.667 42.667 42.667z';
const ICON_PATH = 'M8 7H12C13.1046 7 14 7.89543 14 9V13C14 14.1046 13.1046 15 12 15H8C6.89543 15 6 14.1046 6 13V9C6 7.89543 6.89543 7 8 7ZM8 13H12V9H8V13Z M8 18H12C13.1046 18 14 18.8954 14 20V24C14 25.1046 13.1046 26 12 26H8C6.89543 26 6 25.1046 6 24V20C6 18.8954 6.89543 18 8 18ZM8 24H12V20H8V24Z M24 7H20C18.8954 7 18 7.89543 18 9V13C18 14.1046 18.8954 15 20 15H24C25.1046 15 26 14.1046 26 13V9C26 7.89543 25.1046 7 24 7ZM24 13H20V9H24V13Z M20 18H24C25.1046 18 26 18.8954 26 20V24C26 25.1046 25.1046 26 24 26H20C18.8954 26 18 25.1046 18 24V20C18 18.8954 18.8954 18 20 18ZM20 24H24V20H20V24Z';

class IconComponent extends preact.Component {
render() {
Expand All @@ -24,7 +24,9 @@ export class PluginF extends BasePlugin {
addUpperBarIcon() {
this.player.ready().then(() => {
this.iconId = this.player.getService('upperBarManager').add({
label: 'Plugin F',
displayName: 'Plugin-F',
ariaLabel: 'Plugin-F',
order: 150,
component: IconComponent,
svgIcon: {path: ICON_PATH},
onClick: () => alert('hello from plugin F')
Expand Down
Loading