diff --git a/src/base/media_control/media_control.js b/src/base/media_control/media_control.js index 1676406..e50f00d 100644 --- a/src/base/media_control/media_control.js +++ b/src/base/media_control/media_control.js @@ -30,7 +30,7 @@ export default class MediaControlPlugin extends UICorePlugin { 'mouseleave .media-control__elements': 'removeKeepVisible', } const touchOnlyEvents = { - 'touchstart .media-control__elements': 'setKeepVisible', + 'touchstart .media-control__elements': 'onTouchStart', 'touchend .media-control__elements': 'removeKeepVisible', } @@ -83,6 +83,12 @@ export default class MediaControlPlugin extends UICorePlugin { this.playback && playbackEventListenerData.forEach(item => this.listenToOnce(item.object, item.event, item.callback)) } + onTouchStart() { + // Avoids to hide if the user taps into one media control element + clearTimeout(this._hideId) + this.setKeepVisible() + } + setKeepVisible() { if (!this._isVisible) return this._keepVisible = true diff --git a/src/base/media_control/media_control.test.js b/src/base/media_control/media_control.test.js index 6e8cd86..4e17439 100644 --- a/src/base/media_control/media_control.test.js +++ b/src/base/media_control/media_control.test.js @@ -288,6 +288,16 @@ describe('MediaControl Plugin', () => { }) }) + describe('onTouchStart callback', () => { + test('calls setKeepVisible method', () => { + const { plugin } = setupTest() + jest.spyOn(plugin, 'setKeepVisible') + plugin.onTouchStart() + + expect(plugin.setKeepVisible).toHaveBeenCalledTimes(1) + }) + }) + describe('setKeepVisible method', () => { test('ignores the invocation if _isVisible internal flag is false', () => { const { plugin } = setupTest()