feat(time_indicator): updates position time when occurs drag interact…

…ion on seek bar element

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 = ''

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')