fix(player): Fixed fill effect by using more CSS properties to enab…

…le proper resizing using that effect
openplayerjs · Aug 7, 2018 · 8112984 · 8112984
1 parent ba14c93
commit 8112984
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 71 deletions.
diff --git a/dist/openplayer.js b/dist/openplayer.js
@@ -850,37 +850,11 @@ var Player = function () {
     }, {
         key: "_fill",
         value: function _fill() {
-            var _this5 = this;
-
             if (general_1.isAudio(this.element)) {
                 return;
             }
-            var isVisible = function isVisible(element) {
-                if (element.getClientRects !== undefined && typeof element.getClientRects === 'function') {
-                    return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
-                }
-                return !!(element.offsetWidth || element.offsetHeight);
-            };
-            var parent = function () {
-                var parentEl = void 0;
-                var el = _this5.getContainer();
-                while (el) {
-                    try {
-                        if (constants_1.IS_FIREFOX && el.tagName.toLowerCase() === 'html' && window.self !== window.top && window.frameElement !== null) {
-                            return window.frameElement;
-                        } else {
-                            parentEl = el.parentElement;
-                        }
-                    } catch (e) {
-                        parentEl = el.parentElement;
-                    }
-                    if (parentEl && isVisible(parentEl)) {
-                        return parentEl;
-                    }
-                    el = parentEl;
-                }
-                return null;
-            }();
+            var parentEl = this.getContainer().parentNode;
+            var parent = parentEl && parentEl.nodeType !== 11 ? parentEl : null;
             if (!parent) {
                 return;
             }
@@ -889,12 +863,17 @@ var Player = function () {
             var viewportRatio = width / height;
             var videoRatio = this.width / this.height;
             var scale = 1;
-            if (videoRatio < viewportRatio) {
-                scale = viewportRatio / videoRatio;
-            } else if (viewportRatio < videoRatio) {
-                scale = videoRatio / viewportRatio;
+            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)";
             }
-            var transform = "translate(0, 0) scale(" + scale + ")";
             this.element.style.transform = transform;
             this.element.style.webkitTransform = transform;
             if (this.isAd()) {

diff --git a/dist/openplayer.min.js b/dist/openplayer.min.js
diff --git a/src/js/player.ts b/src/js/player.ts
@@ -6,7 +6,7 @@ import PlayerInstanceList from './interfaces/instance';
 import Source from './interfaces/source';
 import Media from './media';
 import Ads from './media/ads';
-import { IS_ANDROID, IS_FIREFOX, IS_IOS } from './utils/constants';
+import { IS_ANDROID, IS_IOS } from './utils/constants';
 import { addEvent } from './utils/events';
 import { isAudio, isVideo } from './utils/general';
 import { isAutoplaySupported } from './utils/media';
@@ -767,37 +767,8 @@ class Player {
             return;
         }
 
-        const isVisible = (element: HTMLElement) => {
-            if (element.getClientRects !== undefined && typeof element.getClientRects === 'function') {
-                return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
-            }
-            return !!(element.offsetWidth || element.offsetHeight);
-        };
-        const parent = (() => {
-            let parentEl;
-            let el = this.getContainer();
-
-            // traverse parents to find the closest visible one
-            while (el) {
-                try {
-                    // Firefox has an issue calculating dimensions on hidden iframes
-                    if (IS_FIREFOX && el.tagName.toLowerCase() === 'html' && window.self !== window.top && window.frameElement !== null) {
-                        return window.frameElement;
-                    } else {
-                        parentEl = el.parentElement;
-                    }
-                } catch (e) {
-                    parentEl = el.parentElement;
-                }
-
-                if (parentEl && isVisible(parentEl)) {
-                    return parentEl;
-                }
-                el = parentEl;
-            }
-
-            return null;
-        })();
+        const parentEl = this.getContainer().parentNode;
+        const parent = parentEl && parentEl.nodeType !== 11 ? parentEl : null;
 
         if (!parent) {
             return;
@@ -808,14 +779,19 @@ class Player {
         const viewportRatio = width / height;
         const videoRatio = this.width / this.height;
         let scale = 1;
+        let clip;
+        let transform;
 
-        if (videoRatio < viewportRatio) {
-            scale = viewportRatio / videoRatio;
-        } else if (viewportRatio < videoRatio) {
-            scale = videoRatio / viewportRatio;
+        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)`;
         }
 
-        const transform = `translate(0, 0) scale(${scale})`;
         this.element.style.transform = transform;
         this.element.style.webkitTransform = transform;