Skip to content

Commit

Permalink
feat(player): Added new events for custom controls to expand control …
Browse files Browse the repository at this point in the history 
…over each custom element
  • Loading branch information
@rafa8626
rafa8626 committed Mar 3, 2021
1 parent 4c143fb commit 05697ba
Show file tree
Hide file tree
Showing 7 changed files with 124 additions and 9 deletions.
34 changes: 32 additions & 2 deletions dist/esm/controls.js
View file
Expand Up @@ -302,9 +302,24 @@ class Controls {
control.addEventListener('click', (e) => this._toggleCustomMenu(e, menu, item), EVENT_OPTIONS);
this.player.getElement().addEventListener('controlshidden', () => this._hideCustomMenu(menu), EVENT_OPTIONS);
}
else if (typeof item.click === 'function') {
else if (item.click && typeof item.click === 'function') {
control.addEventListener('click', item.click, EVENT_OPTIONS);
}
if (item.mouseenter && typeof item.mouseenter === 'function') {
control.addEventListener('mouseenter', item.mouseenter, EVENT_OPTIONS);
}
if (item.mouseleave && typeof item.mouseleave === 'function') {
control.addEventListener('mouseenter', item.mouseleave, EVENT_OPTIONS);
}
if (item.keydown && typeof item.keydown === 'function') {
control.addEventListener('keydown', item.keydown, EVENT_OPTIONS);
}
if (item.blur && typeof item.blur === 'function') {
control.addEventListener('blur', item.blur, EVENT_OPTIONS);
}
if (item.focus && typeof item.focus === 'function') {
control.addEventListener('focus', item.focus, EVENT_OPTIONS);
}
if (item.layer) {
if (item.layer === 'main') {
this.player.getContainer().appendChild(control);
Expand Down Expand Up @@ -332,9 +347,24 @@ class Controls {
removeElement(menu);
}
}
if (typeof item.click === 'function') {
if (item.click && typeof item.click === 'function') {
control.removeEventListener('click', item.click);
}
if (item.mouseenter && typeof item.mouseenter === 'function') {
control.removeEventListener('mouseenter', item.mouseenter);
}
if (item.mouseleave && typeof item.mouseleave === 'function') {
control.removeEventListener('mouseenter', item.mouseleave);
}
if (item.keydown && typeof item.keydown === 'function') {
control.removeEventListener('keydown', item.keydown);
}
if (item.blur && typeof item.blur === 'function') {
control.removeEventListener('blur', item.blur);
}
if (item.focus && typeof item.focus === 'function') {
control.removeEventListener('focus', item.focus);
}
removeElement(control);
}
}
Expand Down
44 changes: 42 additions & 2 deletions dist/openplayer.js
View file
Expand Up @@ -5190,10 +5190,30 @@ var Controls = function () {
this.player.getElement().addEventListener('controlshidden', function () {
return _this6._hideCustomMenu(menu);
}, constants_1.EVENT_OPTIONS);
} else if (typeof item.click === 'function') {
} else if (item.click && typeof item.click === 'function') {
control.addEventListener('click', item.click, constants_1.EVENT_OPTIONS);
}

if (item.mouseenter && typeof item.mouseenter === 'function') {
control.addEventListener('mouseenter', item.mouseenter, constants_1.EVENT_OPTIONS);
}

if (item.mouseleave && typeof item.mouseleave === 'function') {
control.addEventListener('mouseenter', item.mouseleave, constants_1.EVENT_OPTIONS);
}

if (item.keydown && typeof item.keydown === 'function') {
control.addEventListener('keydown', item.keydown, constants_1.EVENT_OPTIONS);
}

if (item.blur && typeof item.blur === 'function') {
control.addEventListener('blur', item.blur, constants_1.EVENT_OPTIONS);
}

if (item.focus && typeof item.focus === 'function') {
control.addEventListener('focus', item.focus, constants_1.EVENT_OPTIONS);
}

if (item.layer) {
if (item.layer === 'main') {
this.player.getContainer().appendChild(control);
Expand Down Expand Up @@ -5232,10 +5252,30 @@ var Controls = function () {
}
}

if (typeof item.click === 'function') {
if (item.click && typeof item.click === 'function') {
control.removeEventListener('click', item.click);
}

if (item.mouseenter && typeof item.mouseenter === 'function') {
control.removeEventListener('mouseenter', item.mouseenter);
}

if (item.mouseleave && typeof item.mouseleave === 'function') {
control.removeEventListener('mouseenter', item.mouseleave);
}

if (item.keydown && typeof item.keydown === 'function') {
control.removeEventListener('keydown', item.keydown);
}

if (item.blur && typeof item.blur === 'function') {
control.removeEventListener('blur', item.blur);
}

if (item.focus && typeof item.focus === 'function') {
control.removeEventListener('focus', item.focus);
}

general_1.removeElement(control);
}
}
Expand Down
2 changes: 1 addition & 1 deletion dist/openplayer.min.js
View file

Large diffs are not rendered by default.

9 changes: 7 additions & 2 deletions docs/customize.md
View file
Expand Up @@ -25,14 +25,19 @@ player.addControl({
// or `main` to add it in the video area
position: 'right',
showInAds: false, // or true
click: () => {}, // the operation it executes
subitems: [{ // optional list of items to render a menu
id: '[ITEM ID]',
label: '[ITEM LABEL]',
title: '[TOOLTIP ITEM]', // optional
icon:'/path/to/item-image', // optional
click: () => {}
click: () => {},
}],
click: () => {},
mouseenter: () => {},
mouseleave: () => {},
keydown: () => {},
blur: () => {},
focus: () => {},
});
player.init();
```
Expand Down
34 changes: 32 additions & 2 deletions src/js/controls.ts
View file
Expand Up @@ -493,9 +493,24 @@ class Controls implements PlayerComponent {
control.addEventListener('click', (e) => this._toggleCustomMenu(e, menu, item), EVENT_OPTIONS);

this.player.getElement().addEventListener('controlshidden', () => this._hideCustomMenu(menu), EVENT_OPTIONS);
} else if (typeof item.click === 'function') {
} else if (item.click && typeof item.click === 'function') {
control.addEventListener('click', item.click, EVENT_OPTIONS);
}
if (item.mouseenter && typeof item.mouseenter === 'function') {
control.addEventListener('mouseenter', item.mouseenter, EVENT_OPTIONS);
}
if (item.mouseleave && typeof item.mouseleave === 'function') {
control.addEventListener('mouseenter', item.mouseleave, EVENT_OPTIONS);
}
if (item.keydown && typeof item.keydown === 'function') {
control.addEventListener('keydown', item.keydown, EVENT_OPTIONS);
}
if (item.blur && typeof item.blur === 'function') {
control.addEventListener('blur', item.blur, EVENT_OPTIONS);
}
if (item.focus && typeof item.focus === 'function') {
control.addEventListener('focus', item.focus, EVENT_OPTIONS);
}
if (item.layer) {
if (item.layer === 'main') {
this.player.getContainer().appendChild(control);
Expand Down Expand Up @@ -534,9 +549,24 @@ class Controls implements PlayerComponent {
removeElement(menu);
}
}
if (typeof item.click === 'function') {
if (item.click && typeof item.click === 'function') {
control.removeEventListener('click', item.click);
}
if (item.mouseenter && typeof item.mouseenter === 'function') {
control.removeEventListener('mouseenter', item.mouseenter);
}
if (item.mouseleave && typeof item.mouseleave === 'function') {
control.removeEventListener('mouseenter', item.mouseleave);
}
if (item.keydown && typeof item.keydown === 'function') {
control.removeEventListener('keydown', item.keydown);
}
if (item.blur && typeof item.blur === 'function') {
control.removeEventListener('blur', item.blur);
}
if (item.focus && typeof item.focus === 'function') {
control.removeEventListener('focus', item.focus);
}
removeElement(control);
}
}
Expand Down
5 changes: 5 additions & 0 deletions src/js/interfaces/control-item.ts
View file
Expand Up @@ -15,4 +15,9 @@ export default interface ControlItem {
custom?: boolean;
subitems?: Array<{id: string, label: string, title?: string, icon?: string, click(): void}>;
click(event: any): void;
mouseenter?(event: any): void;
mouseleave?(event: any): void;
keydown?(event: any): void;
blur?(event: any): void;
focus?(event: any): void;
}
5 changes: 5 additions & 0 deletions types/interfaces/control-item.d.ts
View file
Expand Up @@ -21,4 +21,9 @@ export default interface ControlItem {
click(): void;
}>;
click(event: any): void;
mouseenter?(event: any): void;
mouseleave?(event: any): void;
keydown?(event: any): void;
blur?(event: any): void;
focus?(event: any): void;
}

0 comments on commit 05697ba

Please sign in to comment.