refactor(seek_bar): guarantee progress bar update on click events

joaopaulovieira · Apr 22, 2021 · ae2ba6e · ae2ba6e
1 parent a1d42df
commit ae2ba6e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/components/seek_bar/seek_bar.js b/src/components/seek_bar/seek_bar.js
@@ -131,6 +131,7 @@ export default class SeekBarPlugin extends MediaControlComponentPlugin {
   seek(rangeInput) {
     if (this.shouldDisableInteraction) return
     const percentage = rangeInput.target.value / rangeInput.target.max * 100
+    this.$el[0].style.setProperty('--seek-before-width', `${percentage}%`)
     this.container.seekPercentage(percentage)
     this._isDragging = false
     this.core.trigger(Events.Custom.MEDIA_CONTROL_SEEK_BAR_STOP_DRAGGING, { event: rangeInput })

diff --git a/src/components/seek_bar/seek_bar.test.js b/src/components/seek_bar/seek_bar.test.js
@@ -442,6 +442,12 @@ describe('SeekBarPlugin', function() {
       expect(this.container.seekPercentage).not.toHaveBeenCalled()
     })
 
+    test('adds the ratio of event.target.value and event.target.max values as --seek-before-width style property of DOM element plugin', () => {
+      this.plugin.seek({ target: { value: 20, max: 200 } })
+
+      expect(getComputedStyle(this.plugin.$el[0]).getPropertyValue('--seek-before-width')).toEqual('10%')
+    })
+
     test('calls container.seekPercentage with the ratio of event.target.value and event.target.max values', () => {
       jest.spyOn(this.container, 'seekPercentage')
       this.plugin.seek({ target: { value: 20, max: 200 } })