diff --git a/src/components/time_indicator/time_indicator.js b/src/components/time_indicator/time_indicator.js index b93dea5..3658a97 100644 --- a/src/components/time_indicator/time_indicator.js +++ b/src/components/time_indicator/time_indicator.js @@ -20,7 +20,11 @@ export default class TimeIndicatorPlugin extends MediaControlComponentPlugin { get defaultTime() { return '00:00' } bindEvents() { - const coreEventListenerData = [{ object: this.core, event: Events.CORE_ACTIVE_CONTAINER_CHANGED, callback: this.onContainerChanged }] + const coreEventListenerData = [ + { object: this.core, event: Events.CORE_ACTIVE_CONTAINER_CHANGED, callback: this.onContainerChanged }, + { object: this.core, event: Events.Custom.MEDIA_CONTROL_SEEK_BAR_START_DRAGGING, callback: this.onStartDraggingSeekBar }, + { object: this.core, event: Events.Custom.MEDIA_CONTROL_SEEK_BAR_STOP_DRAGGING, callback: this.onStopDraggingSeekBar }, + ] coreEventListenerData.forEach(item => this.stopListening(item.object, item.event, item.callback)) coreEventListenerData.forEach(item => this.listenTo(item.object, item.event, item.callback)) } @@ -41,7 +45,7 @@ export default class TimeIndicatorPlugin extends MediaControlComponentPlugin { } onTimeUpdate(time) { - if (time.current === null || time.total === null) return + if (time.current === null || time.total === null || this._isDragging) return const position = Utils.formatTime(Math.floor(time.current)) const duration = Utils.formatTime(Math.floor(time.total)) @@ -63,6 +67,16 @@ export default class TimeIndicatorPlugin extends MediaControlComponentPlugin { this.setDuration(this.defaultTime) } + onStartDraggingSeekBar(data) { + this._isDragging = true + const position = Utils.formatTime(Math.floor(data.event.target.value)) + position !== this.$position.textContent && this.setPosition(position) + } + + onStopDraggingSeekBar() { + this._isDragging = false + } + render() { if (this.isRendered) return this.el.innerHTML = '' diff --git a/src/components/time_indicator/time_indicator.test.js b/src/components/time_indicator/time_indicator.test.js index d718eeb..7c866ad 100644 --- a/src/components/time_indicator/time_indicator.test.js +++ b/src/components/time_indicator/time_indicator.test.js @@ -3,6 +3,9 @@ import TimeIndicatorPlugin from './time_indicator' import templateHTML from './public/template.html' import MediaControlComponentPlugin from '../../base/media_control_component/media_control_component' +Events.register('MEDIA_CONTROL_SEEK_BAR_START_DRAGGING') +Events.register('MEDIA_CONTROL_SEEK_BAR_STOP_DRAGGING') + const setupTest = (options = {}, fullSetup = false) => { const core = new Core(options) const plugin = new TimeIndicatorPlugin(core) @@ -82,6 +85,22 @@ describe('TimeIndicatorPlugin', function() { expect(plugin.onContainerChanged).toHaveBeenCalledTimes(1) }) + + test('register onStartDraggingSeekBar method as callback for MEDIA_CONTROL_SEEK_BAR_START_DRAGGING custom event', () => { + jest.spyOn(TimeIndicatorPlugin.prototype, 'onStartDraggingSeekBar') + const { core, plugin } = setupTest() + core.trigger(Events.Custom.MEDIA_CONTROL_SEEK_BAR_START_DRAGGING) + + expect(plugin.onStartDraggingSeekBar).toHaveBeenCalledTimes(1) + }) + + test('register onStopDraggingSeekBar method as callback for MEDIA_CONTROL_SEEK_BAR_STOP_DRAGGING custom event', () => { + jest.spyOn(TimeIndicatorPlugin.prototype, 'onStopDraggingSeekBar') + const { core, plugin } = setupTest() + core.trigger(Events.Custom.MEDIA_CONTROL_SEEK_BAR_STOP_DRAGGING) + + expect(plugin.onStopDraggingSeekBar).toHaveBeenCalledTimes(1) + }) }) describe('onContainerChanged method', () => { @@ -163,6 +182,16 @@ describe('TimeIndicatorPlugin', function() { expect(this.plugin.setDuration).not.toHaveBeenCalled() }) + test('avoids update any data if _isDragging flag is truthy', () => { + this.plugin._isDragging = true + this.plugin.onTimeUpdate({ current: null, total: 100 }) + + expect(this.plugin.setPosition).not.toHaveBeenCalled() + expect(this.plugin.setDuration).not.toHaveBeenCalled() + + this.plugin._isDragging = false + }) + test('generates time text based on callback response to add on DOM elements', () => { this.plugin.onTimeUpdate({ current: 1, total: 100 }) @@ -221,6 +250,53 @@ describe('TimeIndicatorPlugin', function() { }) }) + describe('onStartDraggingSeekBar method', () => { + beforeEach(() => jest.spyOn(this.plugin, 'setPosition')) + + test('sets _isDragging flag to true', () => { + expect(this.plugin._isDragging).toBeFalsy() + + this.plugin.onStartDraggingSeekBar({ event: { target: { value: 0 } } }) + + expect(this.plugin._isDragging).toBeTruthy() + }) + + test('generates time text based on callback response to add on DOM elements', () => { + this.plugin.onStartDraggingSeekBar({ event: { target: { value: 10 } } }) + + expect(this.plugin.setPosition).toHaveBeenCalledWith('00:10') + }) + + test('uses Math.floor to only set integer values', () => { + this.plugin.onStartDraggingSeekBar({ event: { target: { value: 10.234234235 } } }) + + expect(this.plugin.setPosition).toHaveBeenCalledWith('00:10') + }) + + test('only updates position time text if differs from current DOM element text value', () => { + this.plugin.onStartDraggingSeekBar({ event: { target: { value: 0 } } }) + + expect(this.plugin.setPosition).not.toHaveBeenCalled() + + this.plugin.onStartDraggingSeekBar({ event: { target: { value: 10 } } }) + + expect(this.plugin.setPosition).toHaveBeenCalledWith('00:10') + expect(this.plugin.setPosition).toHaveBeenCalledTimes(1) + }) + }) + + describe('onStopDraggingSeekBar method', () => { + test('sets _isDragging flag to false', () => { + this.plugin.onStartDraggingSeekBar({ event: { target: { value: 0 } } }) + + expect(this.plugin._isDragging).toBeTruthy() + + this.plugin.onStopDraggingSeekBar() + + expect(this.plugin._isDragging).toBeFalsy() + }) + }) + describe('render method', () => { beforeEach(() => { jest.spyOn(this.plugin, 'render')