mirror of
https://github.com/videojs/video.js.git
synced 2025-07-15 01:34:23 +02:00
feat: playerresize event in all cases (#4864)
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.
Add a debounce util.
This reverts #4800 (e0ed0b5) because we end up getting two playerresize events with the dimension methods now.
This commit is contained in:
Gary Katsevman
GitHub
@ -86,6 +86,8 @@ QUnit.test('should create an element', function(assert) {
|
||||
const comp = new Component(getFakePlayer(), {});
|
||||
|
||||
assert.ok(comp.el().nodeName);
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should add a child component', function(assert) {
|
||||
@ -98,6 +100,8 @@ QUnit.test('should add a child component', function(assert) {
|
||||
assert.ok(comp.el().childNodes[0] === child.el());
|
||||
assert.ok(comp.getChild('component') === child);
|
||||
assert.ok(comp.getChildById(child.id()) === child);
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should add a child component to an index', function(assert) {
|
||||
@ -129,6 +133,8 @@ QUnit.test('should add a child component to an index', function(assert) {
|
||||
assert.ok(comp.children().length === 5);
|
||||
assert.ok(comp.children()[3] === child3);
|
||||
assert.ok(comp.children()[4] === child2);
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('addChild should throw if the child does not exist', function(assert) {
|
||||
@ -138,6 +144,7 @@ QUnit.test('addChild should throw if the child does not exist', function(assert)
|
||||
comp.addChild('non-existent-child');
|
||||
}, new Error('Component Non-existent-child does not exist'), 'addChild threw');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('addChild with instance should allow getting child correctly', function(assert) {
|
||||
@ -151,6 +158,8 @@ QUnit.test('addChild with instance should allow getting child correctly', functi
|
||||
comp.addChild(comp2);
|
||||
assert.ok(comp.getChild('foo'), 'we can get child with camelCase');
|
||||
assert.ok(comp.getChild('Foo'), 'we can get child with TitleCase');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should add a child component with title case name', function(assert) {
|
||||
@ -163,6 +172,8 @@ QUnit.test('should add a child component with title case name', function(assert)
|
||||
assert.ok(comp.el().childNodes[0] === child.el());
|
||||
assert.ok(comp.getChild('Component') === child);
|
||||
assert.ok(comp.getChildById(child.id()) === child);
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should init child components from options', function(assert) {
|
||||
@ -174,6 +185,8 @@ QUnit.test('should init child components from options', function(assert) {
|
||||
|
||||
assert.ok(comp.children().length === 1);
|
||||
assert.ok(comp.el().childNodes.length === 1);
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should init child components from simple children array', function(assert) {
|
||||
@ -187,6 +200,8 @@ QUnit.test('should init child components from simple children array', function(a
|
||||
|
||||
assert.ok(comp.children().length === 3);
|
||||
assert.ok(comp.el().childNodes.length === 3);
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should init child components from children array of objects', function(assert) {
|
||||
@ -200,6 +215,8 @@ QUnit.test('should init child components from children array of objects', functi
|
||||
|
||||
assert.ok(comp.children().length === 3);
|
||||
assert.ok(comp.el().childNodes.length === 3);
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should do a deep merge of child options', function(assert) {
|
||||
@ -236,6 +253,7 @@ QUnit.test('should do a deep merge of child options', function(assert) {
|
||||
|
||||
// Reset default component options to none
|
||||
Component.prototype.options_ = null;
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should init child components from component options', function(assert) {
|
||||
@ -246,6 +264,8 @@ QUnit.test('should init child components from component options', function(asser
|
||||
|
||||
assert.ok(!testComp.childNameIndex_.TestComponent2, 'we do not have testComponent2');
|
||||
assert.ok(testComp.childNameIndex_.TestComponent4, 'we have a testComponent4');
|
||||
|
||||
testComp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should allows setting child options at the parent options level', function(assert) {
|
||||
@ -271,6 +291,7 @@ QUnit.test('should allows setting child options at the parent options level', fu
|
||||
}
|
||||
assert.equal(parent.children()[0].options_.foo, true, 'child options set when children array is used');
|
||||
assert.equal(parent.children().length, 1, 'we should only have one child');
|
||||
parent.dispose();
|
||||
|
||||
// using children object
|
||||
options = {
|
||||
@ -294,6 +315,7 @@ QUnit.test('should allows setting child options at the parent options level', fu
|
||||
}
|
||||
assert.equal(parent.children()[0].options_.foo, true, 'child options set when children object is used');
|
||||
assert.equal(parent.children().length, 1, 'we should only have one child');
|
||||
parent.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should dispose of component and children', function(assert) {
|
||||
@ -349,6 +371,8 @@ QUnit.test('should add and remove event listeners to element', function(assert)
|
||||
comp.trigger('test-event');
|
||||
comp.off('test-event', testListener);
|
||||
comp.trigger('test-event');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should trigger a listener once using one()', function(assert) {
|
||||
@ -363,6 +387,8 @@ QUnit.test('should trigger a listener once using one()', function(assert) {
|
||||
comp.one('test-event', testListener);
|
||||
comp.trigger('test-event');
|
||||
comp.trigger('test-event');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should be possible to pass data when you trigger an event', function(assert) {
|
||||
@ -381,6 +407,8 @@ QUnit.test('should be possible to pass data when you trigger an event', function
|
||||
comp.one('test-event', testListener);
|
||||
comp.trigger('test-event', {d1: data1, d2: data2});
|
||||
comp.trigger('test-event');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should add listeners to other components and remove them', function(assert) {
|
||||
@ -452,6 +480,9 @@ QUnit.test('should add listeners to other components that are fired once', funct
|
||||
assert.equal(listenerFired, 1, 'listener was executed once');
|
||||
comp2.trigger('test-event');
|
||||
assert.equal(listenerFired, 1, 'listener was executed only once');
|
||||
|
||||
comp1.dispose();
|
||||
comp2.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should add listeners to other element and remove them', function(assert) {
|
||||
@ -491,6 +522,8 @@ QUnit.test('should add listeners to other element and remove them', function(ass
|
||||
}
|
||||
Events.trigger(el, 'dispose');
|
||||
assert.ok(true, 'this component removed dispose listeners from other element');
|
||||
|
||||
comp1.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should add listeners to other components that are fired once', function(assert) {
|
||||
@ -509,6 +542,8 @@ QUnit.test('should add listeners to other components that are fired once', funct
|
||||
assert.equal(listenerFired, 1, 'listener was executed once');
|
||||
Events.trigger(el, 'test-event');
|
||||
assert.equal(listenerFired, 1, 'listener was executed only once');
|
||||
|
||||
comp1.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should trigger a listener when ready', function(assert) {
|
||||
@ -549,6 +584,8 @@ QUnit.test('should trigger a listener when ready', function(assert) {
|
||||
assert.ok(!initListenerFired, 'init listener should be removed');
|
||||
assert.ok(!methodListenerFired, 'method listener should be removed');
|
||||
assert.ok(!syncListenerFired, 'sync listener should be removed');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should not retrigger a listener when the listener calls triggerReady', function(assert) {
|
||||
@ -573,6 +610,8 @@ QUnit.test('should not retrigger a listener when the listener calls triggerReady
|
||||
this.clock.tick(100);
|
||||
|
||||
assert.equal(timesCalled, 1, 'triggerReady from inside a ready handler does not result in an infinite loop');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should add and remove a CSS class', function(assert) {
|
||||
@ -586,6 +625,8 @@ QUnit.test('should add and remove a CSS class', function(assert) {
|
||||
assert.ok(comp.el().className.indexOf('test-class') !== -1);
|
||||
comp.toggleClass('test-class');
|
||||
assert.ok(comp.el().className.indexOf('test-class') === -1);
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should show and hide an element', function(assert) {
|
||||
@ -595,6 +636,8 @@ QUnit.test('should show and hide an element', function(assert) {
|
||||
assert.ok(comp.hasClass('vjs-hidden') === true);
|
||||
comp.show();
|
||||
assert.ok(comp.hasClass('vjs-hidden') === false);
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('dimension() should treat NaN and null as zero', function(assert) {
|
||||
@ -624,6 +667,8 @@ QUnit.test('dimension() should treat NaN and null as zero', function(assert) {
|
||||
newWidth = comp.dimension('width', undefined);
|
||||
|
||||
assert.equal(newWidth, width, 'we did not set the width with undefined');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should change the width and height of a component', function(assert) {
|
||||
@ -654,6 +699,8 @@ QUnit.test('should change the width and height of a component', function(assert)
|
||||
comp.height('auto');
|
||||
assert.ok(comp.width() === 1000, 'forced width was removed');
|
||||
assert.ok(comp.height() === 0, 'forced height was removed');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should get the computed dimensions', function(assert) {
|
||||
@ -683,6 +730,7 @@ QUnit.test('should get the computed dimensions', function(assert) {
|
||||
assert.equal(comp.currentDimensions().width + 'px', computedWidth, 'matches computed width');
|
||||
assert.equal(comp.currentDimensions().height + 'px', computedHeight, 'matches computed width');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should use a defined content el for appending children', function(assert) {
|
||||
@ -711,6 +759,8 @@ QUnit.test('should use a defined content el for appending children', function(as
|
||||
assert.ok(comp.el().childNodes[0].id === 'contentEl', 'Content El should still exist');
|
||||
assert.ok(comp.el().childNodes[0].childNodes[0] !== child.el(),
|
||||
'Child el should be removed.');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should emit a tap event', function(assert) {
|
||||
@ -769,6 +819,7 @@ QUnit.test('should emit a tap event', function(assert) {
|
||||
|
||||
// Reset to orignial value
|
||||
browser.TOUCH_ENABLED = origTouch;
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should provide timeout methods that automatically get cleared on component disposal', function(assert) {
|
||||
@ -919,6 +970,8 @@ QUnit.test('$ and $$ functions', function(assert) {
|
||||
|
||||
assert.strictEqual(comp.$('div'), children[0], '$ defaults to contentEl as scope');
|
||||
assert.strictEqual(comp.$$('div').length, children.length, '$$ defaults to contentEl as scope');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('should use the stateful mixin', function(assert) {
|
||||
@ -929,4 +982,6 @@ QUnit.test('should use the stateful mixin', function(assert) {
|
||||
|
||||
comp.setState({foo: 'bar'});
|
||||
assert.strictEqual(comp.state.foo, 'bar', 'the component passes a basic stateful test');
|
||||
|
||||
comp.dispose();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user