New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: playerresize event in all cases #4864

Merged
merged 32 commits into from Jan 30, 2018

Conversation

Projects
None yet
4 participants
@gkatsev
Copy link
Member

gkatsev commented Jan 8, 2018

Use ResizeObserver when available for better and more performant resizing information, otherwise, fall back to a throttled resize event on an iframe that's the size of the player.
Allows a video.js user to disable this by setting resizeManager: false as an option since the component will not be initialized.
This probably needs to revert #4800 (e0ed0b5) because we end up getting two playerresize events with the dimension methods now.

TODO:

  • Revert #4800
  • fix current tests
  • make RO polyfill possible
  • allow RO to be disabled
  • debounce calls instead of throttle
  • Write tests
  • documentation
  • make sure things are disposed properly
    • events
    • objects
@gkatsev

This comment has been minimized.

Copy link
Member

gkatsev commented Jan 9, 2018

One thing to consider as well here is that we're going to get multiple playerresize events when changing into fullscreen, depending on what the throttle is, it can be anywhere from 1 to 3 events. Currently, the ResizeObserver isn't throttled but the iframe resize event is throttled to 50ms. It's probable that we want to debounce rather than throttle.

@gkatsev gkatsev changed the title [WIP] feat: playerresize event in all cases feat: playerresize event in all cases Jan 10, 2018

let RESIZE_OBSERVER_AVAILABLE = options.ResizeObserver || window.ResizeObserver;

if (options.ResizeObserver === null) {
RESIZE_OBSERVER_AVAILABLE = false;

This comment has been minimized.

@ldayananda

ldayananda Jan 11, 2018

Contributor

wouldn't this set RESIZE_OBSERVER_AVAILABLE to false even when one is available through window.ResizeObserver?

This comment has been minimized.

@gkatsev

gkatsev Jan 12, 2018

Member

Yup, the idea is if you wanted to disable the ResizeObserver for whatever reason you could pass in null.

This comment has been minimized.

@ldayananda

ldayananda Jan 12, 2018

Contributor

Gotcha. I'd suggest a comment over this block so it's clear for future readers 😄

* @event Player#playerresize
* @type {EventTarget~Event}
*/
this.trigger('playerresize');

This comment has been minimized.

@ldayananda

ldayananda Jan 11, 2018

Contributor

I believe the event trigger would have worked in IE8 as well - since we're reverting this for the ResizeObserver and that's only available after IE8, is this a breaking change?

This comment has been minimized.

@gkatsev

gkatsev Jan 12, 2018

Member

We are falling back to using an iframe for playerresize events when ResizeObserver isn't available, currently, that's basically everywhere, though, chrome will be shipping ResizeObserver soon.

this.player.on('playerresize', function() {
playerresizeCalled++;
});
rm.resizeObserver_.observer();

This comment has been minimized.

@ldayananda

ldayananda Jan 11, 2018

Contributor

observe?

This comment has been minimized.

@ldayananda

ldayananda Jan 11, 2018

Contributor

actually looks like you don't need this line at all

This comment has been minimized.

@gkatsev

gkatsev Jan 12, 2018

Member

I set this in the constructor of MyResizeObserver, calling it calls the observe handler which will trigger playerresize which we can then test. Maybe I should just make it a local variable to be more obvious what is going on.

This comment has been minimized.

@ldayananda

ldayananda Jan 12, 2018

Contributor

Ah, I see. I agree that making it a local variable will make it more clear

assert.equal(playerresizeCalled, 1, 'playerresize was triggered');

rm.dispose();
});

This comment has been minimized.

@ldayananda

ldayananda Jan 11, 2018

Contributor

one good test to add would be a test that makes sure a resizeObserver is created when one is available on the window

This comment has been minimized.

@gkatsev

gkatsev Jan 12, 2018

Member

It would be nice but mocking out window is a pain :)

let RESIZE_OBSERVER_AVAILABLE = options.ResizeObserver || window.ResizeObserver;

if (options.ResizeObserver === null) {
RESIZE_OBSERVER_AVAILABLE = false;

This comment has been minimized.

@ldayananda

ldayananda Jan 12, 2018

Contributor

Gotcha. I'd suggest a comment over this block so it's clear for future readers 😄

this.player.on('playerresize', function() {
playerresizeCalled++;
});
rm.resizeObserver_.observer();

This comment has been minimized.

@ldayananda

ldayananda Jan 12, 2018

Contributor

Ah, I see. I agree that making it a local variable will make it more clear

@misteroneill
Copy link
Member

misteroneill left a comment

One minor question that I don't think affects my approval of this PR. 👍

return super.createEl('iframe', {
className: 'vjs-resize-manager'
});
}

This comment has been minimized.

@misteroneill

misteroneill Jan 16, 2018

Member

I believe the element will be created even when it's not needed. Should we suppress the creation of it when ResizeObserver is available?

This comment has been minimized.

@gkatsev

gkatsev Jan 16, 2018

Member

This line in the constructor will make it so no element is created if ResizeObserver is used: https://github.com/videojs/video.js/pull/4864/files#diff-8947c14c969c2d82a892c5fac0d0efd0R19

This comment has been minimized.

@misteroneill

misteroneill Jan 16, 2018

Member

Oh, I didn't notice that. Carry on. 👍

@gkatsev gkatsev dismissed stale reviews from misteroneill and ldayananda Jan 17, 2018

Updated based on comments and added docs.

@ldayananda
Copy link
Contributor

ldayananda left a comment

Made a few small typo corrections, but at this point LGTM

@pagarwal123

This comment has been minimized.

Copy link
Contributor

pagarwal123 commented Jan 30, 2018

QA-LGTM

@gkatsev gkatsev merged commit 9ceb4e4 into master Jan 30, 2018

4 checks passed

continuous-integration/codeship Build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
deploy/netlify Deploy preview ready!
Details

@gkatsev gkatsev deleted the resizer branch Jan 30, 2018

@gkatsev gkatsev referenced this pull request Jul 23, 2018

Merged

feat(player): add playerreset event #5335

0 of 7 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment