-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* `UIManager` Exposes `addComponent` api which actually deligates to `PlayerAreaProvider._addNewComponentAndUpdateListeners` method (using _Render-Props_ technique) * Remove empty array condition for removal flow * Extract `Fragment` children since add and remove the component behaves worried when children wrapped by a `Fragment`
- Loading branch information
Showing
7 changed files
with
393 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,184 @@ | ||
| import {setup} from 'kaltura-player-js'; | ||
| import * as TestUtils from './utils/test-utils'; | ||
| import {h, Component} from 'preact'; | ||
|
|
||
| describe('UIManager', function () { | ||
| it('', function (done) { | ||
| done(); | ||
| const targetId = 'player-placeholder_ui.spec'; | ||
| class customComponent extends Component { | ||
| render() { | ||
| return <div className={'custom-component'} />; | ||
| } | ||
| } | ||
|
|
||
| let player; | ||
| const config = { | ||
| targetId, | ||
| provider: {} | ||
| }; | ||
|
|
||
| before(function () { | ||
| TestUtils.createElement('DIV', targetId); | ||
| }); | ||
|
|
||
| beforeEach(function () { | ||
| player = setup(config); | ||
| }); | ||
|
|
||
| afterEach(function () { | ||
| player.destroy(); | ||
| }); | ||
|
|
||
| after(function () { | ||
| TestUtils.removeVideoElementsFromTestPage(); | ||
| }); | ||
|
|
||
| describe('addComponent', function () { | ||
| it('Should exist but do nothing before ui built', function (done) { | ||
| try { | ||
| const func = player.ui.addComponent(); | ||
| (typeof func).should.equals('function'); | ||
| done(); | ||
| } catch (e) { | ||
| done(e); | ||
| } | ||
| }); | ||
|
|
||
| it('Should add a component in BottomBarLeftControls', function (done) { | ||
| const removeFunc = player.ui.addComponent({ | ||
| label: 'customComponent', | ||
| presets: ['Playback'], | ||
| container: 'BottomBarRightControls', | ||
| get: customComponent | ||
| }); | ||
| try { | ||
| (typeof removeFunc).should.equals('function'); | ||
| setTimeout(() => { | ||
| const rightControls = document.querySelector('.playkit-bottom-bar .playkit-right-controls'); | ||
| rightControls.lastElementChild.className.should.equals('custom-component'); | ||
| done(); | ||
| }, 0); | ||
| } catch (e) { | ||
| done(e); | ||
| } | ||
| }); | ||
|
|
||
| it('Should remove the injected component', function (done) { | ||
| let rightControls; | ||
| const removeFunc = player.ui.addComponent({ | ||
| label: 'customComponent', | ||
| presets: ['Playback'], | ||
| container: 'BottomBarRightControls', | ||
| get: customComponent | ||
| }); | ||
| setTimeout(() => { | ||
| try { | ||
| rightControls = document.querySelector('.playkit-bottom-bar .playkit-right-controls'); | ||
| rightControls.lastElementChild.className.should.equals('custom-component'); | ||
| removeFunc(); | ||
| setTimeout(() => { | ||
| rightControls.lastElementChild.className.should.not.equals('custom-component'); | ||
| done(); | ||
| }, 0); | ||
| } catch (e) { | ||
| done(e); | ||
| } | ||
| }, 0); | ||
| }); | ||
|
|
||
| it('Should add a component before other', function (done) { | ||
| let leftControls; | ||
| player.ui.addComponent({ | ||
| label: 'customComponent', | ||
| presets: ['Playback'], | ||
| container: 'BottomBarLeftControls', | ||
| beforeComponent: 'Rewind', | ||
| get: customComponent | ||
| }); | ||
| setTimeout(() => { | ||
| try { | ||
| leftControls = document.querySelector('.playkit-bottom-bar .playkit-left-controls'); | ||
| const rewindIndex = Array.from(leftControls.children).findIndex( | ||
| child => child.className === 'playkit-control-button-container playkit-no-idle-control' | ||
| ); | ||
| leftControls.children[rewindIndex - 1].className.should.equals('custom-component'); | ||
| done(); | ||
| } catch (e) { | ||
| done(e); | ||
| } | ||
| }, 0); | ||
| }); | ||
|
|
||
| it('Should add a component after other', function (done) { | ||
| let leftControls; | ||
| player.ui.addComponent({ | ||
| label: 'customComponent', | ||
| presets: ['Playback'], | ||
| container: 'BottomBarLeftControls', | ||
| afterComponent: 'Rewind', | ||
| get: customComponent | ||
| }); | ||
| setTimeout(() => { | ||
| try { | ||
| leftControls = document.querySelector('.playkit-bottom-bar .playkit-left-controls'); | ||
| const rewindIndex = Array.from(leftControls.children).findIndex( | ||
| child => child.className === 'playkit-control-button-container playkit-no-idle-control' | ||
| ); | ||
| leftControls.children[rewindIndex + 1].className.should.equals('custom-component'); | ||
| done(); | ||
| } catch (e) { | ||
| done(e); | ||
| } | ||
| }, 0); | ||
| }); | ||
|
|
||
| it('Should replace a component', function (done) { | ||
| let leftControls; | ||
| player.ui.addComponent({ | ||
| label: 'customComponent', | ||
| presets: ['Playback'], | ||
| container: 'BottomBarLeftControls', | ||
| replaceComponent: 'Rewind', | ||
| get: customComponent | ||
| }); | ||
| setTimeout(() => { | ||
| try { | ||
| leftControls = document.querySelector('.playkit-bottom-bar .playkit-left-controls'); | ||
| const forwardIndex = Array.from(leftControls.children).findIndex( | ||
| child => child.className === 'playkit-control-button-container playkit-no-idle-control' | ||
| ); | ||
| leftControls.children[forwardIndex - 1].className.should.equals('custom-component'); | ||
| done(); | ||
| } catch (e) { | ||
| done(e); | ||
| } | ||
| }, 0); | ||
| }); | ||
|
|
||
| it('Should remove the injected component and re-append the replaced one', function (done) { | ||
| let leftControls; | ||
| const removeFunc = player.ui.addComponent({ | ||
| label: 'customComponent', | ||
| presets: ['Playback'], | ||
| container: 'BottomBarLeftControls', | ||
| replaceComponent: 'Rewind', | ||
| get: customComponent | ||
| }); | ||
| setTimeout(() => { | ||
| try { | ||
| leftControls = document.querySelector('.playkit-bottom-bar .playkit-left-controls'); | ||
| const forwardIndex = Array.from(leftControls.children).findIndex( | ||
| child => child.className === 'playkit-control-button-container playkit-no-idle-control' | ||
| ); | ||
| leftControls.children[forwardIndex - 1].className.should.equals('custom-component'); | ||
| removeFunc(); | ||
| setTimeout(() => { | ||
| leftControls.children[forwardIndex - 1].className.should.equals('playkit-control-button-container playkit-no-idle-control'); | ||
| done(); | ||
| }); | ||
| } catch (e) { | ||
| done(e); | ||
| } | ||
| }, 0); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.