diff options
Diffstat (limited to 'frontend/app/views/tile/handles/tile.text.js')
| -rw-r--r-- | frontend/app/views/tile/handles/tile.text.js | 23 |
1 files changed, 22 insertions, 1 deletions
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} |