From ff76aa2dbb5d54f8e1a7d39791929713d2a82c8f Mon Sep 17 00:00:00 2001 From: Serhii Marchenko Date: Tue, 1 Oct 2024 04:29:44 +0300 Subject: [PATCH 1/5] fix(FEC-14041): play next entry on error --- src/playlist.tsx | 29 +++++++++++++++++++++-------- src/types/playlist-config.ts | 1 + 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/playlist.tsx b/src/playlist.tsx index c828e58..fc02226 100755 --- a/src/playlist.tsx +++ b/src/playlist.tsx @@ -1,5 +1,6 @@ import {h} from 'preact'; -import {ui} from '@playkit-js/kaltura-player-js'; +// @ts-expect-error Module '"@playkit-js/kaltura-player-js"' has no exported member 'core' +import {ui, core} from '@playkit-js/kaltura-player-js'; import {OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrapper'; import {UpperBarManager, SidePanelsManager} from '@playkit-js/ui-managers'; import {PlaylistConfig, PluginPositions, PluginStates} from './types'; @@ -30,7 +31,8 @@ export class Playlist extends KalturaPlayer.core.BasePlugin { static defaultConfig: PlaylistConfig = { position: SidePanelPositions.RIGHT, expandMode: SidePanelModes.ALONGSIDE, - expandOnFirstPlay: true + expandOnFirstPlay: true, + playNextOnError: true }; constructor(name: string, player: KalturaPlayerTypes.Player, config: PlaylistConfig) { @@ -38,22 +40,29 @@ export class Playlist extends KalturaPlayer.core.BasePlugin { this._player = player; this._dataManager = new DataManager(this._player, this.logger); // subscribe on store changes - this._unsubscribeStore = this._player.ui.store?.subscribe(() => { - const state = this._player.ui.store.getState(); - if (state.shell.playerClasses.includes('has-live-plugin-overlay') && !this._offlineSlateActive) { + this._unsubscribeStore = this.uiStore?.subscribe(() => { + const {shell} = this.uiStore.getState(); + if (shell.playerClasses.includes('has-live-plugin-overlay') && !this._offlineSlateActive) { this._offlineSlateActive = true; this._activatePlugin(); } - if (this._activePresetName !== '' && this._activePresetName !== state.shell.activePresetName) { - this._activePresetName = state.shell.activePresetName; + if (this._activePresetName !== '' && this._activePresetName !== shell.activePresetName) { + this._activePresetName = shell.activePresetName; // when switching from non-broadcasting live to VOD we need to toggle the plugin since the live plugin disables it this._deactivatePlugin(); this._activatePlugin(); } else if (this._activePresetName === '') { - this._activePresetName = state.shell.activePresetName; + this._activePresetName = shell.activePresetName; } this._addSidePanel(); }); + if (this.config.playNextOnError) { + this.eventManager.listen(this.player, core.EventType.ERROR, this._handleError); + } + } + + get uiStore() { + return this._player.ui.store; } get sidePanelsManager() { @@ -192,6 +201,10 @@ export class Playlist extends KalturaPlayer.core.BasePlugin { }); }; + private _handleError = () => { + this.player.playlist?.playNext(); + }; + static isValid(): boolean { return true; } diff --git a/src/types/playlist-config.ts b/src/types/playlist-config.ts index e618fde..87500b2 100644 --- a/src/types/playlist-config.ts +++ b/src/types/playlist-config.ts @@ -2,4 +2,5 @@ export interface PlaylistConfig { position: string; expandMode: string; expandOnFirstPlay: boolean; + playNextOnError: boolean; } From 4b057691c6cf32891ea6af0b378d7d030f6d7f8f Mon Sep 17 00:00:00 2001 From: Serhii Marchenko Date: Tue, 1 Oct 2024 04:30:21 +0300 Subject: [PATCH 2/5] fix(FEC-14041): upd Readme --- README.md | 75 ++++++++++++++++++++++++++++++++++--------- docs/configuration.md | 23 ------------- 2 files changed, 59 insertions(+), 39 deletions(-) delete mode 100644 docs/configuration.md diff --git a/README.md b/README.md index 7cfcfbf..e38131d 100644 --- a/README.md +++ b/README.md @@ -66,30 +66,73 @@ Finally, add the bundle as a script tag in your page, and initialize the player ``` -## Documentation - -Playlist plugin configuration can been found here: +## Configuration +#### Configuration Structure + +```js +//Default configuration +"playlist" = {}; +//Plugin params +"playlist" = { + expandOnFirstPlay?: boolean, // optional + position?: string, // optional + expandMode?: string, // optional + playNextOnError?: boolean // optional +} +``` -- **[Configuration](docs/configuration.md)** +## + +> ### config.expandOnFirstPlay +> +> ##### Type: `boolean` +> +> ##### Default: true +> +> ##### Description: if plugin should automatically open on first play. +> + +## + +> ### config.position +> +> ##### Type: `'right' | 'left' | 'top' | 'bottom'` +> +> ##### Default: `right` +> +> ##### Description: expand mode of side panel (‘alongside', ‘hidden’, 'over’, default 'alongside'). +> + +## + +> ### config.expandMode +> +> ##### Type: `string` +> +> ##### Default: `alongside` +> +> ##### Description: expand mode of side panel (‘alongside', ‘hidden’, 'over’, default 'alongside'). +> + +## + +> ### config.playNextOnError +> +> ##### Type: `boolean` +> +> ##### Default: true +> +> ##### Description: If entry playback fails the playlist will move playback to the next entry. +> ## Running the tests -Tests can be run locally via [Karma], which will run on Chrome, Firefox and Safari - -[karma]: https://karma-runner.github.io/1.0/index.html +The plugin uses `cypress` tool for e2e tests -``` +```javascript yarn run test ``` -You can test individual browsers: - -``` -yarn run test:chrome -yarn run test:firefox -yarn run test:safari -``` - ### And coding style tests We use ESLint [recommended set](http://eslint.org/docs/rules/) with some additions for enforcing [Flow] types and other rules. diff --git a/docs/configuration.md b/docs/configuration.md deleted file mode 100644 index 9da6feb..0000000 --- a/docs/configuration.md +++ /dev/null @@ -1,23 +0,0 @@ -### Table of Contents - -- [PlaylistConfigObject][1] - - [Parameters][2] - -## PlaylistConfigObject - -Defines the configuration of the Playlist Plugin. - -Type: [Object][4] - -### Parameters - -- -- -TBD - -[1]: #ivqconfigobject -[2]: #parameters -[3]: #eventtype -[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object -[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean -[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number From 1406d1d61f88f17a1efe3d02788756f1b6fbd1d2 Mon Sep 17 00:00:00 2001 From: Serhii Marchenko Date: Tue, 1 Oct 2024 04:30:33 +0300 Subject: [PATCH 3/5] fix(FEC-14041): upd tests --- cypress/e2e/playlist.cy.ts | 49 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/cypress/e2e/playlist.cy.ts b/cypress/e2e/playlist.cy.ts index 5735e44..82ed08c 100644 --- a/cypress/e2e/playlist.cy.ts +++ b/cypress/e2e/playlist.cy.ts @@ -1,3 +1,5 @@ +// @ts-expect-error Module '"@playkit-js/kaltura-player-js"' has no exported member 'core' +import {core} from '@playkit-js/kaltura-player-js'; import {mockKalturaBe, loadPlayer, MANIFEST, MANIFEST_SAFARI} from './env'; describe('Playlist plugin', () => { @@ -57,4 +59,51 @@ describe('Playlist plugin', () => { }); }); }); + + describe('playlist navigation on click', () => { + it('should navigate between playlist items on click', () => { + mockKalturaBe(); + loadPlayer({expandOnFirstPlay: true}, {autoplay: true}).then(() => { + cy.get('[data-testid="playlist_item"]').eq(0).should('have.attr', 'aria-current', 'true'); + cy.get('[data-testid="playlist_item"]').eq(2).should('have.attr', 'aria-current', 'false'); + cy.get('[data-testid="playlist_item"]').eq(2).click({force: true}); + cy.get('[data-testid="playlist_item"]').eq(0).should('have.attr', 'aria-current', 'false'); + cy.get('[data-testid="playlist_item"]').eq(2).should('have.attr', 'aria-current', 'true'); + }); + }); + + it('should navigate between playlist items on keyboard press', () => { + mockKalturaBe(); + loadPlayer({expandOnFirstPlay: true}, {autoplay: true}).then(() => { + cy.get('[data-testid="playlist_item"]').eq(2).should('have.attr', 'aria-current', 'false'); + cy.get('[data-testid="playlist_item"]').eq(2).focus().type('{enter}'); + cy.get('[data-testid="playlist_item"]').eq(2).should('have.attr', 'aria-current', 'true'); + }); + }); + }); + + describe('error handling', () => { + it('should play next entry on error', () => { + mockKalturaBe(); + loadPlayer({expandOnFirstPlay: true}, {autoplay: true}).then(kalturaPlayer => { + cy.get('[data-testid="playlist_item"]').eq(0).should('have.attr', 'aria-current', 'true'); + const error = new core.Error(core.Error.Severity.CRITICAL, core.Error.Category.PLAYER, core.Error.Code.VIDEO_ERROR, {}); + kalturaPlayer.dispatchEvent(new core.FakeEvent(core.EventType.ERROR, error)); + cy.get('[data-testid="playlist_item"]').eq(0).should('have.attr', 'aria-current', 'false'); + cy.get('[data-testid="playlist_item"]').eq(1).should('have.attr', 'aria-current', 'true'); + }); + }); + it('should not play next entry on error if feature disabled', () => { + mockKalturaBe(); + loadPlayer({expandOnFirstPlay: true, playNextOnError: false}, {autoplay: true}).then(kalturaPlayer => { + cy.get('[data-testid="playlist_root"]') + .should('exist') + .then(() => { + const error = new core.Error(core.Error.Severity.CRITICAL, core.Error.Category.PLAYER, core.Error.Code.VIDEO_ERROR, {}); + kalturaPlayer.dispatchEvent(new core.FakeEvent(core.EventType.ERROR, error)); + cy.get('[data-testid="playlist_root"]').should('not.exist'); + }); + }); + }); + }); }); From 8ee3e601a91527cb3165ba671008573e08a1254f Mon Sep 17 00:00:00 2001 From: Serhii Marchenko Date: Tue, 1 Oct 2024 04:52:59 +0300 Subject: [PATCH 4/5] fix(FEC-14041): address comments --- src/playlist.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/playlist.tsx b/src/playlist.tsx index fc02226..e29dcde 100755 --- a/src/playlist.tsx +++ b/src/playlist.tsx @@ -202,7 +202,9 @@ export class Playlist extends KalturaPlayer.core.BasePlugin { }; private _handleError = () => { - this.player.playlist?.playNext(); + if (this._player.playlist?.items?.length > 1) { + this.player.playlist.playNext(); + } }; static isValid(): boolean { From 2be93999ad3e285981c1c0b7053af25109fbfc3b Mon Sep 17 00:00:00 2001 From: Serhii Marchenko Date: Tue, 8 Oct 2024 04:29:27 +0300 Subject: [PATCH 5/5] address comments --- src/playlist.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/playlist.tsx b/src/playlist.tsx index e29dcde..7cf663e 100755 --- a/src/playlist.tsx +++ b/src/playlist.tsx @@ -201,8 +201,8 @@ export class Playlist extends KalturaPlayer.core.BasePlugin { }); }; - private _handleError = () => { - if (this._player.playlist?.items?.length > 1) { + private _handleError = (e: any) => { + if (e.payload.severity === core.Error.Severity.CRITICAL && this._player.playlist?.items?.length > 1) { this.player.playlist.playNext(); } };