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
|
export const generateTransform = (tile, box, bounds, videoBounds) => {
let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
if (is_tiled) {
return 'translateZ(0)'
}
if (box) {
x += box.dx
y += box.dy
}
units = units || 'px'
const [yalign, xalign] = align.split('_')
let transform = ['translateZ(0)']
if (yalign === 'center') {
transform.push('translateY(-50%)')
}
if (xalign === 'center') {
transform.push('translateX(-50%)')
}
// if (x % 2 == 1) x += 0.5
// if (y % 2 == 1) y += 0.5
const xUnits = units === 'video' ? videoUnits(x, bounds, videoBounds) : x + units
const yUnits = units === 'video' ? videoUnits(y, bounds, videoBounds) : y + units
transform.push('translateX(' + xUnits + ')')
transform.push('translateY(' + yUnits + ')')
if (scale !== 1) {
transform.push('scale(' + scale + ')')
}
if (rotation !== 0) {
transform.push('rotateZ(' + rotation + 'deg)')
}
return transform.join(' ')
}
export const generateVideoStyle = (tile, bounds) => {
const style = {
pointerEvents: "none",
}
switch (tile.settings.video_style) {
case 'normal':
style.width = "auto"
style.height = "auto"
break
case 'cover':
if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
style.height = bounds.height
} else {
style.width = bounds.width
style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
}
break
case 'contain':
if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
style.width = bounds.width
style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
} else {
style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
style.height = bounds.height
}
break
}
return style
}
export const unitsDimension = (tile, dimension, bounds, videoBounds) => {
const value = tile.settings[dimension]
if (!value) return "auto"
if (tile.settings.units) {
if (tile.settings.units === 'video') {
return videoUnits(value, bounds, videoBounds)
}
return value + tile.settings.units
}
return value + "px"
}
export const videoUnits = (value, bounds, videoBounds) => (
Math.round(value / videoBounds.width * bounds.width) + 'px'
)
|
