refactor tile forms into own files. add full-width marquee support

2 files changed, 23 insertions, 18 deletions

diff --git a/frontend/app/views/tile/handles/tile.gradient.js b/frontend/app/views/tile/handles/tile.gradient.js
index 1b3cd80..0b20ace 100644
--- a/frontend/app/views/tile/handles/tile.gradient.js
+++ b/frontend/app/views/tile/handles/tile.gradient.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
+import { generateTransform, unitsDimension, hexToRgb } from 'app/views/tile/tile.utils'
 
 export default function TileGradient({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
   // console.log(tile)
@@ -51,19 +51,3 @@ function tileRGBA(hex, opacity) {
   const { r, g, b } = hexToRgb(hex)
   return "rgba(" + [r,g,b,opacity].join(",") + ")"
 }
-
-function hexToRgb(hex) {
-  let result;
-  if (hex.length === 7) {
-    result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  } else if (hex.length === 4) {
-    result = /^#?([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(hex)
-  } else {
-    return { r: 255, g: 0, b: 255 }
-  }
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null
-}
\ No newline at end of file
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index 97fdfac..6ef8734 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -1,5 +1,6 @@
 import React from 'react'
-import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
+import { generateTransform, unitsDimension, hexToRgb } from 'app/views/tile/tile.utils'
+import Marquee from "react-fast-marquee"
 
 export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
   // console.log(tile)
@@ -31,6 +32,26 @@ export default function TileScript({ tile, box, bounds, videoBounds, viewing, on
   style.backgroundColor = tile.settings.background_color || 'transparent'
   style.color = tile.settings.font_color || '#dddddd!important'
 
+  if (tile.settings.is_marquee) {
+    const gradientColor = hexToRgb(tile.settings.marquee_gradient_color)
+    style.width = "100vw"
+    style.height = style.fontSize + "px"
+    content = (
+      <Marquee
+        direction={tile.settings.marquee_direction || "left"}
+        speed={tile.settings.marquee_speed || 1}
+        gradient={!!tile.settings.marquee_gradient}
+        gradientColor={gradientColor ? [gradientColor.r, gradientColor.g, gradientColor.b] : [0,0,0]}
+      >
+        <div style={{
+          width: (tile.settings.marquee_content_width || 200) + "px",
+          height: (tile.settings.marquee_content_height || (parseInt(tile.settings.font_size) + 20)) + "px",
+        }}>
+          {content}
+        </div>
+      </Marquee>
+    )
+  }
   return (
     <div
       className={className}