Skip to content

Commit

Permalink
fix(player): Simplified workflow to generate fullscreen video by rely…
Browse files Browse the repository at this point in the history 
…ing only in CSS
  • Loading branch information
@rafa8626
rafa8626 committed Sep 6, 2018
1 parent 2444fea commit e6f435f
Show file tree
Hide file tree
Showing 7 changed files with 60 additions and 148 deletions.
25 changes: 25 additions & 0 deletions dist/openplayer.css
View file
Expand Up @@ -31,6 +31,7 @@
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.om-player__media {
display: inline-block;
height: auto;
Expand Down Expand Up @@ -750,3 +751,27 @@ video:-webkit-media-text-track-display {
.om-player.om-player__keyboard--inactive > .om-controls > *:focus {
outline: none;
}

/* === FUllscreen effect ========= */
.om-player.om-player__full {
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: -100;
}
.om-player__full .om-player__media,
.om-player__full #om-ads {
height: auto;
left: 50%;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto !important;
}
66 changes: 3 additions & 63 deletions dist/openplayer.js
View file
Expand Up @@ -1111,8 +1111,6 @@ var Player = function () {
this.fill = fill;
this.autoplay = this.element.autoplay || false;
this.volume = this.element.volume;
this.width = this.element.offsetWidth;
this.height = this.element.offsetHeight;
this.options = options;
this.element.autoplay = false;
}
Expand Down Expand Up @@ -1188,10 +1186,6 @@ var Player = function () {
this.loader.remove();
}

if (this.fill) {
window.removeEventListener('resize', this._fill.bind(this));
}

el.controls = true;
var parent = el.parentElement;
parent.parentNode.replaceChild(el, parent);
Expand Down Expand Up @@ -1297,8 +1291,6 @@ var Player = function () {

if (this.fill) {
this._fill();

window.addEventListener('resize', this._fill.bind(this));
}
}
}, {
Expand Down Expand Up @@ -1550,56 +1542,9 @@ var Player = function () {
}, {
key: "_fill",
value: function _fill() {
var _this5 = this;

if (general_1.isAudio(this.element)) {
return;
if (!general_1.isAudio(this.element) && !constants_1.IS_IPHONE) {
this.getContainer().classList.add('om-player__full');
}

var timeout;

if (timeout) {
window.cancelAnimationFrame(timeout);
}

timeout = window.requestAnimationFrame(function () {
if (!_this5.getContainer()) {
return;
}

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;
var transform;

if (viewportRatio > videoRatio) {
scale = width / _this5.width;
clip = _this5.width / viewportRatio;
transform = "scale(".concat(scale, ") translateY(").concat(-((_this5.height - clip) / _this5.height), "px)");
} else {
scale = height / _this5.height;
clip = _this5.height / viewportRatio;
transform = "scale(".concat(scale, ") translateX(").concat(-((_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 @@ -6093,7 +6038,7 @@ var Ads = function () {
}
}, {
key: "resizeAds",
value: function resizeAds(width, height, transform) {
value: function resizeAds(width, height) {
var _this3 = this;

var timeout;
Expand All @@ -6113,11 +6058,6 @@ var Ads = function () {
} else {
_this3.adsManager.resize(target.offsetWidth, target.offsetHeight, google.ima.ViewMode.NORMAL);
}

if (transform) {
_this3.adsContainer.style.transform = transform;
_this3.adsContainer.style.webkitTransform = transform;
}
}
});
}
Expand Down
2 changes: 1 addition & 1 deletion dist/openplayer.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/openplayer.min.js
View file

Large diffs are not rendered by default.

23 changes: 23 additions & 0 deletions src/css/player.css
View file
Expand Up @@ -27,6 +27,7 @@
.om-player ::before {
box-sizing: border-box;
}

.om-player__media {
display: inline-block;
height: auto;
Expand Down Expand Up @@ -674,3 +675,25 @@ video:-webkit-media-text-track-display {
.om-player.om-player__keyboard--inactive > .om-controls > *:focus {
outline: none;
}

/* === Fullscreen effect ========= */
.om-player.om-player__full {
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: -100;
}
.om-player__full .om-player__media,
.om-player__full #om-ads {
height: auto;
left: 50%;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: auto !important;
}
8 changes: 1 addition & 7 deletions src/js/media/ads.ts
View file
Expand Up @@ -361,10 +361,9 @@ class Ads {
*
* @param {?number} width The new width of the Ad's container.
* @param {?number} height The new height of the Ad's container.
* @param {?string} transform CSS `transform` property to align Ad if `fill` mode is enabled.
* @memberof Ads
*/
public resizeAds(width?: number, height?: number, transform?: string): void {
public resizeAds(width?: number, height?: number): void {
let timeout;
if (timeout) {
window.cancelAnimationFrame(timeout);
Expand All @@ -388,11 +387,6 @@ class Ads {
google.ima.ViewMode.NORMAL,
);
}

if (transform) {
this.adsContainer.style.transform = transform;
this.adsContainer.style.webkitTransform = transform;
}
}
});
}
Expand Down
82 changes: 6 additions & 76 deletions src/js/player.ts
View file
Expand Up @@ -12,7 +12,7 @@ import PlayerOptions from './interfaces/player-options';
import Source from './interfaces/source';
import Media from './media';
import Ads from './media/ads';
import { IS_ANDROID, IS_IOS } from './utils/constants';
import { IS_ANDROID, IS_IOS, IS_IPHONE } from './utils/constants';
import { addEvent } from './utils/events';
import { isAudio, isVideo } from './utils/general';
import { isAutoplaySupported } from './utils/media';
Expand Down Expand Up @@ -172,26 +172,6 @@ class Player {
*/
private canAutoplayMuted: boolean;

/**
* Storage for media's original width, to be used when calculating media's ratio aspect.
*
* @see [[Player._fill]]
* @private
* @type number
* @memberof Player
*/
private width: number;

/**
* Storage for media's original height, to be used when calculating media's ratio aspect.
*
* @see [[Player._fill]]
* @private
* @type {number}
* @memberof Player
*/
private height: number;

/**
* Container for other player options.
*
Expand All @@ -218,8 +198,6 @@ class Player {
this.fill = fill;
this.autoplay = this.element.autoplay || false;
this.volume = this.element.volume;
this.width = this.element.offsetWidth;
this.height = this.element.offsetHeight;
this.options = options;
this.element.autoplay = false;
}
Expand Down Expand Up @@ -312,10 +290,6 @@ class Player {
this.loader.remove();
}

if (this.fill) {
window.removeEventListener('resize', this._fill.bind(this));
}

el.controls = true;
const parent = el.parentElement;
parent.parentNode.replaceChild(el, parent);
Expand Down Expand Up @@ -528,7 +502,6 @@ class Player {

if (this.fill) {
this._fill();
window.addEventListener('resize', this._fill.bind(this));
}
}

Expand Down Expand Up @@ -773,60 +746,17 @@ class Player {
}

/**
* Create fill effect on video, scaling and croping dimensions relative to its parent.
* Create fill effect on video, scaling and croping dimensions relative to its parent, setting just a class.
*
* This methods centers the video view using pure CSS, and uses algorithm to search for
* the next immediate parent.
* @see https://www.viget.com/articles/fullscreen-html5-video-with-css-transforms/
* This methods centers the video view using pure CSS in both Ads and Media.
* @see https://slicejack.com/fullscreen-html5-video-background-css/
* @private
* @memberof Player
*/
private _fill(): void {
if (isAudio(this.element)) {
return;
}

let timeout;
if (timeout) {
window.cancelAnimationFrame(timeout);
if (!isAudio(this.element) && !IS_IPHONE) {
this.getContainer().classList.add('om-player__full');
}

timeout = window.requestAnimationFrame(() => {
if (!this.getContainer()) {
return;
}
const parentEl = this.getContainer().parentNode;
const parent = parentEl && parentEl.nodeType !== 11 ? parentEl : null;

if (!parent) {
return;
}

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 e6f435f

Please sign in to comment.