Skip to content

Commit

Permalink
fix(player): Added requestAnimationFrame and cancelAnimationFrame…
Browse files Browse the repository at this point in the history 
… for resize events
  • Loading branch information
@rafa8626
rafa8626 committed Aug 22, 2018
1 parent eb81bbe commit 87ec25c
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 119 deletions.
118 changes: 70 additions & 48 deletions dist/openplayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1869,35 +1869,43 @@ var Player = function () {
}, {
key: "_fill",
value: function _fill() {
var _this5 = this;

if (general_1.isAudio(this.element)) {
return;
}
var parentEl = this.getContainer().parentNode;
var parent = parentEl && parentEl.nodeType !== 11 ? parentEl : null;
if (!parent) {
return;
}
var height = parent.offsetHeight;
var width = parent.offsetWidth;
var viewportRatio = width / height;
var videoRatio = this.width / this.height;
var scale = 1;
var clip = void 0;
var transform = void 0;
if (viewportRatio > videoRatio) {
scale = width / this.width;
clip = this.width / viewportRatio;
transform = "scale(" + scale + ") translateY(" + -((this.height - clip) / this.height) + "px)";
} else {
scale = height / this.height;
clip = this.height / viewportRatio;
transform = "scale(" + scale + ") translateX(" + -((this.width - clip) / this.width) + "px)";
}
this.element.style.transform = transform;
this.element.style.webkitTransform = transform;
if (this.isAd()) {
this.getAd().resizeAds(width, height, transform);
var timeout = void 0;
if (timeout) {
window.cancelAnimationFrame(timeout);
}
timeout = window.requestAnimationFrame(function () {
var parentEl = _this5.getContainer().parentNode;
var parent = parentEl && parentEl.nodeType !== 11 ? parentEl : null;
if (!parent) {
return;
}
var height = parent.offsetHeight;
var width = parent.offsetWidth;
var viewportRatio = width / height;
var videoRatio = _this5.width / _this5.height;
var scale = 1;
var clip = void 0;
var transform = void 0;
if (viewportRatio > videoRatio) {
scale = width / _this5.width;
clip = _this5.width / viewportRatio;
transform = "scale(" + scale + ") translateY(" + -((_this5.height - clip) / _this5.height) + "px)";
} else {
scale = height / _this5.height;
clip = _this5.height / viewportRatio;
transform = "scale(" + scale + ") translateX(" + -((_this5.width - clip) / _this5.width) + "px)";
}
_this5.element.style.transform = transform;
_this5.element.style.webkitTransform = transform;
if (_this5.isAd()) {
_this5.getAd().resizeAds(width, height, transform);
}
});
}
}, {
key: "src",
Expand Down Expand Up @@ -2070,24 +2078,32 @@ var Ads = function () {
}, {
key: "resizeAds",
value: function resizeAds(width, height, transform) {
if (this.adsManager) {
var target = this.element;
if (width && height) {
var mode = target.getAttribute('data-fullscreen') === 'true' ? google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
this.adsManager.resize(width, height, mode);
} else {
this.adsManager.resize(target.offsetWidth, target.offsetHeight, google.ima.ViewMode.NORMAL);
}
if (transform) {
this.adsContainer.style.transform = transform;
this.adsContainer.style.webkitTransform = transform;
}
var _this3 = this;

var timeout = void 0;
if (timeout) {
window.cancelAnimationFrame(timeout);
}
timeout = window.requestAnimationFrame(function () {
if (_this3.adsManager) {
var target = _this3.element;
if (width && height) {
var mode = target.getAttribute('data-fullscreen') === 'true' ? google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
_this3.adsManager.resize(width, height, mode);
} else {
_this3.adsManager.resize(target.offsetWidth, target.offsetHeight, google.ima.ViewMode.NORMAL);
}
if (transform) {
_this3.adsContainer.style.transform = transform;
_this3.adsContainer.style.webkitTransform = transform;
}
}
});
}
}, {
key: "_assign",
value: function _assign(event) {
var _this3 = this;
var _this4 = this;

var ad = event.getAd();
switch (event.type) {
Expand Down Expand Up @@ -2118,10 +2134,10 @@ var Ads = function () {
this.element.dispatchEvent(endEvent);
}
this.intervalTimer = window.setInterval(function () {
if (_this3.adsActive === true) {
_this3.adsCurrentTime = Math.round(_this3.adsManager.getRemainingTime());
if (_this4.adsActive === true) {
_this4.adsCurrentTime = Math.round(_this4.adsManager.getRemainingTime());
var timeEvent = events_1.addEvent('timeupdate');
_this3.element.dispatchEvent(timeEvent);
_this4.element.dispatchEvent(timeEvent);
}
}, 250);
}
Expand Down Expand Up @@ -2170,14 +2186,14 @@ var Ads = function () {
}, {
key: "_start",
value: function _start(manager) {
var _this4 = this;
var _this5 = this;

manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, this._error.bind(this));
manager.addEventListener(google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, this._onContentPauseRequested.bind(this));
manager.addEventListener(google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, this._onContentResumeRequested.bind(this));
this.events = [google.ima.AdEvent.Type.ALL_ADS_COMPLETED, google.ima.AdEvent.Type.CLICK, google.ima.AdEvent.Type.COMPLETE, google.ima.AdEvent.Type.FIRST_QUARTILE, google.ima.AdEvent.Type.LOADED, google.ima.AdEvent.Type.MIDPOINT, google.ima.AdEvent.Type.PAUSED, google.ima.AdEvent.Type.STARTED, google.ima.AdEvent.Type.THIRD_QUARTILE, google.ima.AdEvent.Type.SKIPPED, google.ima.AdEvent.Type.VOLUME_CHANGED, google.ima.AdEvent.Type.VOLUME_MUTED];
this.events.forEach(function (event) {
manager.addEventListener(event, _this4._assign.bind(_this4));
manager.addEventListener(event, _this5._assign.bind(_this5));
});
this._playAds();
}
Expand Down Expand Up @@ -2210,7 +2226,7 @@ var Ads = function () {
}, {
key: "_resumeMedia",
value: function _resumeMedia() {
var _this5 = this;
var _this6 = this;

this.intervalTimer = 0;
this.adsMuted = false;
Expand All @@ -2220,9 +2236,9 @@ var Ads = function () {
this.element.parentElement.classList.remove('om-ads--active');
if (!this.media.ended) {
setTimeout(function () {
_this5.media.play();
_this6.media.play();
var playEvent = events_1.addEvent('play');
_this5.element.dispatchEvent(playEvent);
_this6.element.dispatchEvent(playEvent);
}, 500);
} else {
var event = events_1.addEvent('ended');
Expand Down Expand Up @@ -3217,8 +3233,14 @@ var Settings = function () {
_this.menu.setAttribute('aria-hidden', _this.menu.getAttribute('aria-hidden') === 'false' ? 'true' : 'false');
};
this.hideEvent = function () {
_this.menu.innerHTML = _this.originalOutput;
_this.menu.setAttribute('aria-hidden', 'true');
var timeout = void 0;
if (timeout) {
window.cancelAnimationFrame(timeout);
}
timeout = window.requestAnimationFrame(function () {
_this.menu.innerHTML = _this.originalOutput;
_this.menu.setAttribute('aria-hidden', 'true');
});
};
this.events.media['controlshidden'] = this.hideEvent.bind(this);
this.events.media.play = this.hideEvent.bind(this);
Expand Down
2 changes: 1 addition & 1 deletion dist/openplayer.min.js
View file

Large diffs are not rendered by default.

25 changes: 16 additions & 9 deletions src/js/controls/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,15 @@ class Settings implements PlayerComponent {
};

this.hideEvent = () => {
this.menu.innerHTML = this.originalOutput;
this.menu.setAttribute('aria-hidden', 'true');
let timeout;
if (timeout) {
window.cancelAnimationFrame(timeout);
}

timeout = window.requestAnimationFrame(() => {
this.menu.innerHTML = this.originalOutput;
this.menu.setAttribute('aria-hidden', 'true');
});
};

this.events.media['controlshidden'] = this.hideEvent.bind(this);
Expand Down Expand Up @@ -196,13 +203,13 @@ class Settings implements PlayerComponent {
key: 'speed',
name: 'Speed',
subitems: [
{key: '0.25', label: '0.25'},
{key: '0.5', label: '0.5'},
{key: '0.75', label: '0.75'},
{key: '1', label: 'Normal'},
{key: '1.25', label: '1.25'},
{key: '1.5', label: '1.5'},
{key: '2', label: '2'},
{ key: '0.25', label: '0.25' },
{ key: '0.5', label: '0.5' },
{ key: '0.75', label: '0.75' },
{ key: '1', label: 'Normal' },
{ key: '1.25', label: '1.25' },
{ key: '1.5', label: '1.5' },
{ key: '2', label: '2' },
],
};
}
Expand Down
49 changes: 28 additions & 21 deletions src/js/media/ads.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,29 +345,36 @@ class Ads {
* @memberof Ads
*/
public resizeAds(width?: number, height?: number, transform?: string): void {
if (this.adsManager) {
const target = this.element;
if (width && height) {
const mode = target.getAttribute('data-fullscreen') === 'true' ?
google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
this.adsManager.resize(
width,
height,
mode,
);
} else {
this.adsManager.resize(
target.offsetWidth,
target.offsetHeight,
google.ima.ViewMode.NORMAL,
);
}
let timeout;
if (timeout) {
window.cancelAnimationFrame(timeout);
}

if (transform) {
this.adsContainer.style.transform = transform;
this.adsContainer.style.webkitTransform = transform;
timeout = window.requestAnimationFrame(() => {
if (this.adsManager) {
const target = this.element;
if (width && height) {
const mode = target.getAttribute('data-fullscreen') === 'true' ?
google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
this.adsManager.resize(
width,
height,
mode,
);
} else {
this.adsManager.resize(
target.offsetWidth,
target.offsetHeight,
google.ima.ViewMode.NORMAL,
);
}

if (transform) {
this.adsContainer.style.transform = transform;
this.adsContainer.style.webkitTransform = transform;
}
}
}
});
}

/**
Expand Down
87 changes: 47 additions & 40 deletions src/js/player.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,17 +201,17 @@ class Player {
*/
private options: PlayerOptions;

/**
* Create an instance of Player.
*
* @param {(HTMLMediaElement|string)} element A video/audio tag or its identifier.
* @param {?string} adsUrl A URL to play Ads via Google IMA SDK.
* @param {?boolean} fill Determine if video should be scaled and scrop to fit container.
* @param {?PlayerOptions} options Options to enhance Hls and Dash players.
* @returns {Player}
* @memberof Player
*/
constructor(element: HTMLMediaElement|string, adsUrl?: string, fill?: boolean, options?: PlayerOptions) {
/**
* Create an instance of Player.
*
* @param {(HTMLMediaElement|string)} element A video/audio tag or its identifier.
* @param {?string} adsUrl A URL to play Ads via Google IMA SDK.
* @param {?boolean} fill Determine if video should be scaled and scrop to fit container.
* @param {?PlayerOptions} options Options to enhance Hls and Dash players.
* @returns {Player}
* @memberof Player
*/
constructor(element: HTMLMediaElement | string, adsUrl?: string, fill?: boolean, options?: PlayerOptions) {
this.element = element instanceof HTMLMediaElement ? element : (document.getElementById(element) as HTMLMediaElement);
if (this.element) {
this.adsUrl = adsUrl;
Expand Down Expand Up @@ -372,7 +372,7 @@ class Player {
* @returns {(Ads|Media)}
* @memberof Player
*/
public activeElement(): Ads|Media {
public activeElement(): Ads | Media {
return this.ads && this.ads.adsStarted ? this.ads : this.media;
}

Expand Down Expand Up @@ -572,7 +572,7 @@ class Player {
this.element.removeAttribute('id');
} else {
let uid;
do {
do {
uid = `om_${Math.random().toString(36).substr(2, 9)}`;
} while (Player.instances[uid] !== undefined);
this.uid = uid;
Expand Down Expand Up @@ -784,37 +784,44 @@ class Player {
return;
}

const parentEl = this.getContainer().parentNode;
const parent = parentEl && parentEl.nodeType !== 11 ? parentEl : null;

if (!parent) {
return;
let timeout;
if (timeout) {
window.cancelAnimationFrame(timeout);
}

const height = (parent as HTMLElement).offsetHeight;
const width = (parent as HTMLElement).offsetWidth;
const viewportRatio = width / height;
const videoRatio = this.width / this.height;
let scale = 1;
let clip;
let transform;

if (viewportRatio > videoRatio) {
scale = width / this.width;
clip = this.width / viewportRatio;
transform = `scale(${scale}) translateY(${-((this.height - clip) / this.height)}px)`;
} else {
scale = height / this.height;
clip = this.height / viewportRatio;
transform = `scale(${scale}) translateX(${-((this.width - clip) / this.width)}px)`;
}
timeout = window.requestAnimationFrame(() => {
const parentEl = this.getContainer().parentNode;
const parent = parentEl && parentEl.nodeType !== 11 ? parentEl : null;

this.element.style.transform = transform;
this.element.style.webkitTransform = transform;
if (!parent) {
return;
}

if (this.isAd()) {
this.getAd().resizeAds(width, height, transform);
}
const height = (parent as HTMLElement).offsetHeight;
const width = (parent as HTMLElement).offsetWidth;
const viewportRatio = width / height;
const videoRatio = this.width / this.height;
let scale = 1;
let clip;
let transform;

if (viewportRatio > videoRatio) {
scale = width / this.width;
clip = this.width / viewportRatio;
transform = `scale(${scale}) translateY(${-((this.height - clip) / this.height)}px)`;
} else {
scale = height / this.height;
clip = this.height / viewportRatio;
transform = `scale(${scale}) translateX(${-((this.width - clip) / this.width)}px)`;
}

this.element.style.transform = transform;
this.element.style.webkitTransform = transform;

if (this.isAd()) {
this.getAd().resizeAds(width, height, transform);
}
});
}
}

Expand Down

0 comments on commit 87ec25c

Please sign in to comment.