move frontend site folder. add video support

1 files changed, 52 insertions, 0 deletions

diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js
index 624b175..96574ff 100644
--- a/frontend/app/views/page/components/tile.handle.js
+++ b/frontend/app/views/page/components/tile.handle.js
@@ -44,6 +44,24 @@ const TileHandle = ({ tile, bounds, box, viewing, onMouseDown, onDoubleClick })
         content = <img src={tile.settings.url} />
       }
       break
+
+    case 'video':
+      if (!tile.settings.url) {
+        return null
+      }
+      className += ' ' + tile.settings.align
+      content = (
+        <video
+          src={tile.settings.url}
+          autoPlay={true}
+          controls={false}
+          loop={tile.settings.loop}
+          muted={tile.settings.muted}
+          style={generateVideoStyle(tile, bounds)}
+        />
+      )
+      break
+
     case 'text':
       if (!tile.settings.content) {
         return null
@@ -60,12 +78,14 @@ const TileHandle = ({ tile, bounds, box, viewing, onMouseDown, onDoubleClick })
       style.backgroundColor = tile.settings.background_color || 'transparent'
       style.color = tile.settings.font_color || '#dddddd!important'
       break
+
     case 'link':
       content = ""
       className += ' ' + tile.settings.align
       style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
       style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
       break
+
     case 'script':
       content = ""
       if (viewing) {
@@ -143,4 +163,36 @@ const generateTransform = (tile, box) => {
   return transform.join(' ')
 }
 
+const generateVideoStyle = (tile, bounds) => {
+  console.log(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 default TileHandle