diff --git a/src/components/related-overlay/related-overlay.tsx b/src/components/related-overlay/related-overlay.tsx index 9908df8..b1f0aaa 100644 --- a/src/components/related-overlay/related-overlay.tsx +++ b/src/components/related-overlay/related-overlay.tsx @@ -35,7 +35,6 @@ interface RelatedOverlayProps { /** * Overlay which wraps the related grid and controls its layout and visibility. * - * @param {object} props Component props. * @param {RelatedManager} props.relatedManager Related manager instance. * @param {boolean} props.isPaused Indicates whether playback is paused. diff --git a/src/event/related-event.d.ts b/src/event/related-event.d.ts index 9093470..8261377 100644 --- a/src/event/related-event.d.ts +++ b/src/event/related-event.d.ts @@ -1,5 +1,8 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ export namespace RelatedEvent { - const RELATED_CLICKED: string; - const RELATED_SELECTED: string; + const RELATED_OPEN: string; + const RELATED_CLOSE: string; + const RELATED_ENTRY_SELECTED: string; + const RELATED_ENTRY_AUTO_PLAYED: string; + const RELATED_GRID_DISPLAYED: string; } diff --git a/src/event/related-event.js b/src/event/related-event.js index a4c31d4..4ae4880 100644 --- a/src/event/related-event.js +++ b/src/event/related-event.js @@ -2,14 +2,26 @@ * Related plugin event types. */ const RelatedEvent = { + /** + * Fired when the user clicks the button to show the related list. + */ + RELATED_OPEN: 'related_open', + /** + * Fired when the user clicks the button to close the related list. + */ + RELATED_CLOSE: 'related_close', /** * Fired when the user selects an entry from the list or the grid. */ - RELATED_SELECTED: 'related_selected', + RELATED_ENTRY_SELECTED: 'related_entry_selected', /** - * Fired when the user clicks the button to show the related list. + * Fired when the user selects an entry from the list or the grid. + */ + RELATED_ENTRY_AUTO_PLAYED: 'related_entry_auto_played', + /** + * Fired when the related grid is shown or hidden. */ - RELATED_CLICKED: 'related_clicked' + RELATED_GRID_DISPLAYED: 'related_grid_displayed' }; export {RelatedEvent}; diff --git a/src/related-manager.ts b/src/related-manager.ts index 641c8d0..8546fdd 100644 --- a/src/related-manager.ts +++ b/src/related-manager.ts @@ -243,6 +243,7 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget { this.clearNextEntryTimeout(); this.nextEntryTimeoutId = window.setTimeout(() => { this.playByIndex(0); + this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_ENTRY_AUTO_PLAYED)); }, seconds * 1000); } else { this.playByIndex(0); @@ -258,7 +259,7 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget { playSelected(internalIndex: number) { this.logger.info('going to play selected entry'); this.playByIndex(internalIndex); - this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_SELECTED)); + this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_ENTRY_SELECTED)); } /** @@ -397,6 +398,7 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget { set isGridVisible(isGridVisible: boolean) { this._isGridVisible = isGridVisible; this.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedInternalEvent.GRID_VISIBILITY_CHANGED, this._isGridVisible)); + if (isGridVisible) this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_GRID_DISPLAYED)); } /** @@ -417,8 +419,10 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget { set isListVisible(isListVisible: boolean) { this._isListVisible = isListVisible; this.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedInternalEvent.LIST_VISIBILITY_CHANGED, this._isListVisible)); - if (this._isListVisible) { - this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_CLICKED)); + if (isListVisible) { + this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_OPEN, {expandMode: this.config?.expandMode})); + } else { + this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_CLOSE, {expandMode: this.config?.expandMode})); } } }