Pause/Play button repaints causes flaky control in Chrome when using a Youtube video #694
Description
Describe the bug
When using a Youtube video a interval is set here. This causes the refreshControls method to run periodically, which in turn ignores the context parameter and thus refreshes all UI elements, including the pause/play button. The getIcon method removes the element and repaints it, which causes flaky control in Chrome (141.0.7390.108). In Ableplayer v4.6.0 this problem didn't exist, because this works with changing the class instead of deleting and rebuilding the svg (at least, that is what I suspect).
Version tested
Which version of AblePlayer are you reporting against?
- Main (the current release)
v4.7.0
To Reproduce
Steps to reproduce the behavior:
- Go to https://ableplayer-poc.vercel.app/ using Chrome (only tested on MacOS 26.0 (25A354))
- Repeatedly press the play/pause button
Expected behavior
I expect the button to, more or less, instantly correspond to the Youtube player state and when pressing the button it always works (which is not the case currently)
Desktop (please complete the following information):
- OS: MacOS 26.0 (25A354)
- Browser Chrome (141.0.7390.108)
Smartphone (please complete the following information):
Not tested on smartphone
Additional context
I've quick fixed the problem by adding a button state (thisObj.activePlayPauseButtonState) to the refreshControls method:
if (currentState === 'paused' || currentState === 'stopped' || currentState === 'ended') {
if(thisObj.activePlayPauseButtonState !== 'play') {
thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play);
thisObj.getIcon( thisObj.$playpauseButton, 'play' );
thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play);
thisObj.activePlayPauseButtonState = 'play';
}
} else if(thisObj.activePlayPauseButtonState !== 'pause') {
thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause);
thisObj.getIcon( thisObj.$playpauseButton, 'pause' );
thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause);
thisObj.activePlayPauseButtonState = 'pause';
}Now a repaint will only happen when the last state was it's opposite. But I can imagine there are better ways to fix this (maybe using the Youtube player API?)
Thanks!