diff options
author | Danielh112 <Daniel@sbgsportssoftware.com> | 2020-08-18 11:29:25 +0100 |
---|---|---|
committer | Danielh112 <Daniel@sbgsportssoftware.com> | 2020-08-18 11:29:25 +0100 |
commit | f7e9ee56d2ed5447f59e5548f005fabdab2f0a72 (patch) | |
tree | a16300fa62e68b3310ae96e36dba65981f0024ef /src/js/utils/style.js | |
parent | 22af7f16ea4a4269321d29242d63ec23718c92da (diff) | |
parent | 423b7b276f1572eb666de32094a9aacd32e87d18 (diff) | |
download | plyr-f7e9ee56d2ed5447f59e5548f005fabdab2f0a72.tar.lz plyr-f7e9ee56d2ed5447f59e5548f005fabdab2f0a72.tar.xz plyr-f7e9ee56d2ed5447f59e5548f005fabdab2f0a72.zip |
Fix merge conflicts
Diffstat (limited to 'src/js/utils/style.js')
-rw-r--r-- | src/js/utils/style.js | 109 |
1 files changed, 55 insertions, 54 deletions
diff --git a/src/js/utils/style.js b/src/js/utils/style.js index 17a033fe..c2004fcb 100644 --- a/src/js/utils/style.js +++ b/src/js/utils/style.js @@ -5,74 +5,75 @@ import is from './is'; export function validateRatio(input) { - if (!is.array(input) && (!is.string(input) || !input.includes(':'))) { - return false; - } + if (!is.array(input) && (!is.string(input) || !input.includes(':'))) { + return false; + } - const ratio = is.array(input) ? input : input.split(':'); + const ratio = is.array(input) ? input : input.split(':'); - return ratio.map(Number).every(is.number); + return ratio.map(Number).every(is.number); } export function reduceAspectRatio(ratio) { - if (!is.array(ratio) || !ratio.every(is.number)) { - return null; - } + if (!is.array(ratio) || !ratio.every(is.number)) { + return null; + } - const [width, height] = ratio; - const getDivider = (w, h) => (h === 0 ? w : getDivider(h, w % h)); - const divider = getDivider(width, height); + const [width, height] = ratio; + const getDivider = (w, h) => (h === 0 ? w : getDivider(h, w % h)); + const divider = getDivider(width, height); - return [width / divider, height / divider]; + return [width / divider, height / divider]; } export function getAspectRatio(input) { - const parse = ratio => (validateRatio(ratio) ? ratio.split(':').map(Number) : null); - // Try provided ratio - let ratio = parse(input); - - // Get from config - if (ratio === null) { - ratio = parse(this.config.ratio); - } - - // Get from embed - if (ratio === null && !is.empty(this.embed) && is.array(this.embed.ratio)) { - ({ ratio } = this.embed); - } - - // Get from HTML5 video - if (ratio === null && this.isHTML5) { - const { videoWidth, videoHeight } = this.media; - ratio = reduceAspectRatio([videoWidth, videoHeight]); - } - - return ratio; + const parse = ratio => (validateRatio(ratio) ? ratio.split(':').map(Number) : null); + // Try provided ratio + let ratio = parse(input); + + // Get from config + if (ratio === null) { + ratio = parse(this.config.ratio); + } + + // Get from embed + if (ratio === null && !is.empty(this.embed) && is.array(this.embed.ratio)) { + ({ ratio } = this.embed); + } + + // Get from HTML5 video + if (ratio === null && this.isHTML5) { + const { videoWidth, videoHeight } = this.media; + ratio = reduceAspectRatio([videoWidth, videoHeight]); + } + + return ratio; } // Set aspect ratio for responsive container export function setAspectRatio(input) { - if (!this.isVideo) { - return {}; - } - - const { wrapper } = this.elements; - const ratio = getAspectRatio.call(this, input); - const [w, h] = is.array(ratio) ? ratio : [0, 0]; - const padding = (100 / w) * h; - - wrapper.style.paddingBottom = `${padding}%`; - - // For Vimeo we have an extra <div> to hide the standard controls and UI - if (this.isVimeo && this.supported.ui) { - const height = 240; - const offset = (height - padding) / (height / 50); - this.media.style.transform = `translateY(-${offset}%)`; - } else if (this.isHTML5) { - wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null); - } - - return { padding, ratio }; + if (!this.isVideo) { + return {}; + } + + const { wrapper } = this.elements; + const ratio = getAspectRatio.call(this, input); + const [w, h] = is.array(ratio) ? ratio : [0, 0]; + const padding = (100 / w) * h; + + wrapper.style.paddingBottom = `${padding}%`; + + // For Vimeo we have an extra <div> to hide the standard controls and UI + if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) { + const height = (100 / this.media.offsetWidth) * parseInt(window.getComputedStyle(this.media).paddingBottom, 10); + const offset = (height - padding) / (height / 50); + + this.media.style.transform = `translateY(-${offset}%)`; + } else if (this.isHTML5) { + wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null); + } + + return { padding, ratio }; } export default { setAspectRatio }; |