feat: playerresize event in all cases by gkatsev · Pull Request #4864 · videojs/video.js

gkatsev · 2018-01-08T22:32:41Z

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:

gkatsev · 2018-01-09T16:19:40Z

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.

This reverts commit e0ed0b5.

ldayananda · 2018-01-11T21:13:15Z

+    let RESIZE_OBSERVER_AVAILABLE = options.ResizeObserver || window.ResizeObserver;
+
+    if (options.ResizeObserver === null) {
+      RESIZE_OBSERVER_AVAILABLE = false;


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

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

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

ldayananda · 2018-01-11T21:24:06Z

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


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?

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.

ldayananda · 2018-01-11T22:46:49Z

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


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

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.

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

ldayananda · 2018-01-11T22:50:33Z

+    assert.equal(playerresizeCalled, 1, 'playerresize was triggered');
+
+    rm.dispose();
+  });


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

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

ldayananda · 2018-01-12T20:36:40Z

+    let RESIZE_OBSERVER_AVAILABLE = options.ResizeObserver || window.ResizeObserver;
+
+    if (options.ResizeObserver === null) {
+      RESIZE_OBSERVER_AVAILABLE = false;


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

ldayananda · 2018-01-12T20:39:04Z

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


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

misteroneill

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

misteroneill · 2018-01-16T16:29:54Z

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


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 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

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

Updated based on comments and added docs.

ldayananda

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

pagarwal123 · 2018-01-30T18:14:45Z

QA-LGTM

gkatsev added 3 commits January 8, 2018 17:03

resizer

332e896

wip

92adf24

use resize observer or iframe

2ea72f9

gkatsev added 23 commits January 9, 2018 13:57

Revert "feat: playerresize event on Player dimension API calls (#4800)"

e7fa09b

This reverts commit e0ed0b5.

make sure that contentWindow is available before remove listener

5902483

dispose iframe load handler properly

439ac9e

dispose some players in tests when done

c98a945

dispose all the things

5219730

add .off to fake player in poster image tests

a063076

add removeEventListener to tracks tests

818a574

nullcheck contentWindow

8b1cee1

use vjs event helpers

e0400e5

can't delegate, use actual event helpers

e66acb1

disable resize manager to IE8

a2494d5

push to children

4fed939

allow a ResizeObserver polyfill to be passed in.

69ad100

test RM, can't test iframe because async

157adcf

lint

b9c5967

point at right player

18854a3

update tests

6b7c278

add debounce inspired by lodash and underscore

902bfde

debounce handlers and don't create el if not necessary

4fa8e31

fixup tests

1ffd0aa

dispose debounce with player, use fake timers in test

a8f6ebb

sinon fake timers

fec334b

linter

a742ad4

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

ldayananda reviewed Jan 11, 2018

View reviewed changes

ldayananda previously approved these changes Jan 12, 2018

View reviewed changes

misteroneill previously approved these changes Jan 16, 2018

View reviewed changes

gkatsev added 5 commits January 17, 2018 14:58

add jsdoc to resize manager

5cb16a3

update glob for remark

e891260

add ResizeManager to components

062d31f

remark fix components

93449c0

code review comments

18d354b

small typo corrections

3041792

ldayananda approved these changes Jan 18, 2018

View reviewed changes

gkatsev added confirmed minor This PR can be added to a minor release. It should not be added to a patch release. labels Jan 30, 2018

gkatsev merged commit 9ceb4e4 into master Jan 30, 2018

gkatsev deleted the resizer branch January 30, 2018 18:26

gkatsev mentioned this pull request Jul 23, 2018

feat(player): add playerreset event #5335

Merged

7 tasks

Conversation

gkatsev commented Jan 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gkatsev commented Jan 9, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

misteroneill left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ldayananda left a comment

Choose a reason for hiding this comment

Uh oh!

pagarwal123 commented Jan 30, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

gkatsev commented Jan 8, 2018 •

edited

Loading