replace on change with on input event listener

Author: chrisweb

examples/simple-player/README.md

@@ -84,7 +84,17 @@ the linting is now done via the npm run lint command of the main project
 
 ## notes about problems I encountered during development
 
-### using es6 modules with nodejs
+### client problems
+
+#### input type range not triggering change event
+
+Because the value of the input type range element gets constantly updated by the player itself, when using an event listener on **change** will result in the event not firing at all (chrome only?) or it will fire but then at the moment when you read the value it will already have been updated by the player
+
+this is why I recommend using the **input** event instead (which is what is used in this example), so far I had none of the problems I just mentioned using the "input" event instead of the "change" event
+
+### server problems
+
+#### using es6 modules with nodejs
 
 Full nodejs support for es6 modules import/export syntax enabled
 
@@ -109,7 +119,7 @@ and in package.json you will notice that I also added:
 }
 ```
 
-### replacing cjs dirname with esm import.meta.url
+#### replacing cjs dirname with esm import.meta.url
 
 When using es modules (esm), the __dirname environment variable is not available anymore, as it is for commonjs (cjs) only, however a replacement is available: meta.import.url
 

examples/simple-player/client/src/bootstrap.ts

@@ -18,7 +18,6 @@ import { PlayerUI } from './library/player/ui.js'
 // check out the documentation part of the readme
 const options: ICoreOptions = {
     soundsBaseUrl: 'https://mp3l.jamendo.com/?trackid=',
-    playingProgressIntervalTime: 500,
     loadPlayerMode: PlayerCore.PLAYER_MODE_AUDIO,
 }
 

examples/simple-player/client/src/library/player/ui.ts

@@ -44,8 +44,8 @@ class PlayerUI {
     protected _createListeners(): void {
 
         this._buttonsBox.addEventListener('click', this._onClickButtonsBox.bind(this))
-        this._volumeSlider.addEventListener('change', this._onChangeVolume.bind(this))
-        this._playingProgressBar.addEventListener('change', this._onChangePlayingProgress.bind(this))
+        this._volumeSlider.addEventListener('input', this._onInputVolume.bind(this))
+        this._playingProgressBar.addEventListener('input', this._onInputPlayingProgress.bind(this))
 
     }
 
@@ -132,7 +132,12 @@ class PlayerUI {
 
     }
 
-    protected _onChangeVolume(event: Event): void {
+    protected _onInputVolume(event: Event): void {
+
+        // Note: for input type=range elements listen for input events
+        // instead of change events, the change event will sometimes
+        // not fire if the click on the element happens at the same
+        // exact moment at which the user clicks on the input element
 
         // styling the html5 range:
         // http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
@@ -144,11 +149,9 @@ class PlayerUI {
 
     }
 
-    protected _onChangePlayingProgress(event: Event): void {
-
+    protected _onInputPlayingProgress(event: Event): void {
         const rangeElement = event.target as HTMLInputElement
         const value = parseInt(rangeElement.value)
-
         this.player.setPosition(value)
 
     }
@@ -211,8 +214,8 @@ class PlayerUI {
     protected _destroyListeners(): void {
 
         this._buttonsBox.removeEventListener('click', this._onClickButtonsBox.bind(this))
-        this._volumeSlider.removeEventListener('change', this._onChangeVolume.bind(this))
-        this._playingProgressBar.removeEventListener('click', this._onChangePlayingProgress.bind(this))
+        this._volumeSlider.removeEventListener('change', this._onInputVolume.bind(this))
+        this._playingProgressBar.removeEventListener('click', this._onInputPlayingProgress.bind(this))
 
         this._buttonsBox = null
         this._volumeSlider = null