1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
// ==========================================================================
// Style utils
// ==========================================================================
import { closest } from './arrays';
import is from './is';
// Check support for a CSS declaration
export function supportsCSS(declaration) {
if (!window || !window.CSS) {
return false;
}
return window.CSS.supports(declaration);
}
// Standard/common aspect ratios
const standardRatios = [
[1, 1],
[4, 3],
[3, 4],
[5, 4],
[4, 5],
[3, 2],
[2, 3],
[16, 10],
[10, 16],
[16, 9],
[9, 16],
[21, 9],
[9, 21],
[32, 9],
[9, 32],
].reduce((out, [x, y]) => ({ ...out, [x / y]: [x, y] }), {});
// Validate an aspect ratio
export function validateAspectRatio(input) {
if (!is.array(input) && (!is.string(input) || !input.includes(':'))) {
return false;
}
const ratio = is.array(input) ? input : input.split(':');
return ratio.map(Number).every(is.number);
}
// Reduce an aspect ratio to it's lowest form
export function reduceAspectRatio(ratio) {
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);
return [width / divider, height / divider];
}
// Calculate an aspect ratio
export function getAspectRatio(input) {
const parse = (ratio) => (validateAspectRatio(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 = [videoWidth, videoHeight];
}
return reduceAspectRatio(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);
if (!is.array(ratio)) {
return {};
}
const [x, y] = reduceAspectRatio(ratio);
const useNative = supportsCSS(`aspect-ratio: ${x}/${y}`);
const padding = (100 / x) * y;
if (useNative) {
wrapper.style.aspectRatio = `${x}/${y}`;
} else {
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);
if (this.fullscreen.active) {
wrapper.style.paddingBottom = null;
} else {
this.media.style.transform = `translateY(-${offset}%)`;
}
} else if (this.isHTML5) {
wrapper.classList.add(this.config.classNames.videoFixedRatio);
}
return { padding, ratio };
}
// Round an aspect ratio to closest standard ratio
export function roundAspectRatio(x, y, tolerance = 0.05) {
const ratio = x / y;
const closestRatio = closest(Object.keys(standardRatios), ratio);
// Check match is within tolerance
if (Math.abs(closestRatio - ratio) <= tolerance) {
return standardRatios[closestRatio];
}
// No match
return [x, y];
}
// Get the size of the viewport
// https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions
export function getViewportSize() {
const width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
return [width, height];
}
|
