8000 fix: Change requestNamedAnimationFrame to apply last change per frame… · videojs/video.js@e715145 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit e715145

Browse files
mister-benmister-ben
authored
fix: Change requestNamedAnimationFrame to apply last change per frame instead of first (#8799)
## Description The current implementation of `requestNamedAnimationFrame` prevents multiple updates on a frame but by disregarding all but the first request per frame. This throttling behaviour is apparent when playing a very short video - if a `timeupdate` occurs just before the `ended` event, the progress bar position on the `timeupdate` is set at say 98% and 100% from the `ended` is discarded. Although #8633 removed the throttle from the `ended` handler itself, the throttle and non-throttled update can still both execute between frames. ## Specific Changes proposed Changes the implementation to apply only the last callback instead. If any exist they will be cancelled. There will still be only one update, but now it's the last. Updates tests to reflect the changed behaviour. Fixes #8782 ## Requirements Checklist - [x] Feature implemented / Bug fixed - [ ] If necessary, more likely in a feature request than a bug fix - [x] Change has been verified in an actual browser (Chrome, Firefox, IE) - [x] Unit Tests updated or fixed - [ ] Docs/guides updated - [ ] Example created ([starter template on JSBin](https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0)) - [x] Has no DOM changes which impact accessiblilty or trigger warnings (e.g. Chrome issues tab) - [x] Has no changes to JSDoc which cause `npm run docs:api` to error - [ ] Reviewed by Two Core Contributors
1 parent 790078b commit e715145

File tree

2 files changed

+10
-10
lines changed

2 files changed

+10
-10
lines changed

‎src/js/component.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1724,7 +1724,7 @@ class Component {
17241724
*/
17251725
requestNamedAnimationFrame(name, fn) {
17261726
if (this.namedRafs_.has(name)) {
1727-
return;
1727+
this.cancelNamedAnimationFrame(name);
17281728
}
17291729
this.clearTimersOnDispose_();
17301730

‎test/unit/component.test.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1377,7 +1377,7 @@ QUnit.test('requestNamedAnimationFrame should only allow one raf of a specific n
13771377

13781378
comp.requestNamedAnimationFrame(name, handlerTwo);
13791379

1380-
assert.deepEqual(cancelNames, [], 'no named cancels');
1380+
assert.deepEqual(cancelNames, ['testing'], 'one handler was cancelled');
13811381
assert.equal(comp.namedRafs_.size, 1, 'still only one named raf');
13821382
assert.equal(comp.rafIds_.size, 1, 'still only one raf id');
13831383

@@ -1386,16 +1386,16 @@ QUnit.test('requestNamedAnimationFrame should only allow one raf of a specific n
13861386
assert.equal(comp.namedRafs_.size, 0, 'we removed a named raf');
13871387
assert.equal(comp.rafIds_.size, 0, 'we removed a raf id');
13881388
assert.deepEqual(calls, {
1389-
one: 1,
1390-
two: 0,
1389+
one: 0,
1390+
two: 1,
13911391
three: 0
1392-
}, 'only handlerOne was called');
1392+
}, 'only handlerTwo was called');
13931393

13941394
comp.requestNamedAnimationFrame(name, handlerOne);
13951395
comp.requestNamedAnimationFrame(name, handlerTwo);
13961396
comp.requestNamedAnimationFrame(name, handlerThree);
13971397

1398-
assert.deepEqual(cancelNames, [], 'no named cancels for testing');
1398+
assert.deepEqual(cancelNames, ['testing', 'testing', 'testing'], 'two more cancels');
13991399
assert.equal(comp.namedRafs_.size, 1, 'only added one named raf');
14001400
assert.equal(comp.rafIds_.size, 1, 'only added one named raf');
14011401

@@ -1404,10 +1404,10 @@ QUnit.test('requestNamedAnimationFrame should only allow one raf of a specific n
14041404
assert.equal(comp.namedRafs_.size, 0, 'we removed a named raf');
14051405
assert.equal(comp.rafIds_.size, 0, 'we removed a raf id');
14061406
assert.deepEqual(calls, {
1407-
one: 2,
1408-
two: 0,
1409-
three: 0
1410-
}, 'only the handlerOne called');
1407+
one: 0,
1408+
two: 1,
1409+
three: 1
1410+
}, 'now handlerThree has also been called');
14111411

14121412
window.requestAnimationFrame = oldRAF;
14131413
window.cancelAnimationFrame = oldCAF;

0 commit comments

Comments
 (0)
0