1 files changed, 17 insertions, 5 deletions
diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
index 8782f85..ed1cbc8 100644
--- a/frontend/app/views/tile/tile.utils.js
+++ b/frontend/app/views/tile/tile.utils.js
@@ -1,4 +1,4 @@
-export const generateTransform = (tile, box) => {
+export const generateTransform = (tile, box, videoBounds) => {
   let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
   if (is_tiled) {
     return 'translateZ(0)'
@@ -18,8 +18,11 @@ export const generateTransform = (tile, box) => {
   }
   // if (x % 2 == 1) x += 0.5
   // if (y % 2 == 1) y += 0.5
-  transform.push('translateX(' + x + units + ')')
-  transform.push('translateY(' + y + units + ')')
+  const xUnits = units === 'video' ? videoUnits(x, videoBounds) : x + units
+  const yUnits = units === 'video' ? videoUnits(y, videoBounds) : y + units
+
+  transform.push('translateX(' + xUnits + ')')
+  transform.push('translateY(' + yUnits + ')')
   if (scale !== 1) {
     transform.push('scale(' + scale + ')')
   }
@@ -60,9 +63,18 @@ export const generateVideoStyle = (tile, bounds) => {
   return style
 }
 
-export const unitsDimension = (tile, dimension) => {
+export const unitsDimension = (tile, dimension, videoBounds) => {
   const value = tile.settings[dimension]
   if (!value) return "auto"
-  if (tile.settings.units) return value + tile.settings.units
+  if (tile.settings.units) {
+    if (tile.settings.units === 'video') {
+      return videoUnits(value, videoBounds)
+    }
+    return value + tile.settings.units
+  }
   return value + "px"
 }
+
+export const videoUnits = (value, videoBounds) => (
+  (value / 1000 * Math.max(videoBounds.width, videoBounds.height)) + 'px'
+)
+\ No newline at end of file