From cda9c115283be8e4e224f6036ba07e5eca243289 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 31 Mar 2021 17:37:40 +0200
Subject: refactor tile forms into own files. add full-width marquee support

---
 frontend/app/views/tile/handles/tile.text.js | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

(limited to 'frontend/app/views/tile/handles/tile.text.js')

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}
-- 
cgit v1.2.3-70-g09d2